:root{--bg:#f4f6fb;--sf:#fff;--ink:#1a2233;--mute:#64708a;--acc:#4a63e7;--line:#dde3f0;--danger:#d64545}
:root[data-theme=dark]{--bg:#10131a;--sf:#1a1f2b;--ink:#e8ecf4;--mute:#97a2bb;--acc:#7d95ff;--line:#2a3142;--danger:#ff7b7b}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{display:grid;place-items:center;min-height:100vh;padding:20px;background:var(--bg);color:var(--ink);font:16px system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.card{width:100%;max-width:380px;background:var(--sf);border-radius:20px;padding:30px;text-align:center;box-shadow:0 12px 40px rgba(15,23,42,.14)}
h1{margin:0;font-size:32px;letter-spacing:-.03em;color:var(--acc)}p{color:var(--mute);margin:6px 0 18px}
.q{font-size:40px;font-weight:800;letter-spacing:.02em;margin:6px 0 14px;user-select:none}
input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:18px;text-align:center}
input:focus{outline:2px solid var(--acc);outline-offset:1px}
.err{min-height:22px;color:var(--danger);font-size:14px;margin:8px 0}
button{width:100%;padding:12px;border:0;border-radius:12px;background:var(--acc);color:#fff;font:inherit;font-weight:700;cursor:pointer}
button:disabled{opacity:.6}
button.link{background:none;color:var(--mute);font-weight:500;margin-top:6px;padding:8px}