:root{--navy:#001726;--teal:#14637d;--cream:#f7f2e9;--gray:#66747c}
    *{box-sizing:border-box}
    body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f7f2e9;font-family:"Noto Sans SC",Arial,sans-serif;color:var(--navy)}
    .card{width:390px;max-width:calc(100vw - 32px);background:#fff;padding:32px;border:1px solid #e4ded4;border-radius:8px;box-shadow:0 20px 60px rgba(0,23,38,.14)}
    h1{font-size:23px;margin:0 0 6px}
    p{font-size:13px;color:var(--gray);margin:0 0 22px;line-height:1.6}
    .field{margin:14px 0}
    .field label{display:block;font-size:12px;margin-bottom:6px}
    .field input{width:100%;padding:11px;border:1px solid #c7cfd3;border-radius:4px;font:inherit}
    button{width:100%;border:0;border-radius:4px;padding:11px;background:var(--teal);color:#fff;font:inherit;cursor:pointer}
    button:hover{background:#004f51}
    .error{display:none;color:#b42318;font-size:12px;margin-top:12px}
    .hint{font-size:12px;color:var(--gray);margin-top:16px}
    .hidden{display:none}