:root { color-scheme: light dark; --bg:#f8f9fc; --card:#fff; --text:#222332; --muted:#666a7d; --border:#dce0eb; --primary:#6654d9; --error:#b42335; }
@media (prefers-color-scheme:dark) { :root { --bg:#12131b; --card:#1b1d29; --text:#f1f0fa; --muted:#b0b3c7; --border:#383b50; --primary:#b1a3ff; --error:#ff9aa9; } }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-height:100svh; padding:40px 20px; display:grid; place-items:center; background:var(--bg); color:var(--text); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.card { width:100%; max-width:420px; padding:32px; border:1px solid var(--border); border-radius:18px; background:var(--card); }
.brand { color:var(--primary); text-decoration:none; font-weight:700; font-size:20px; }
h1 { margin:24px 0 8px; font-size:24px; line-height:1.3; letter-spacing:-.4px; }
p { margin:0 0 20px; color:var(--muted); overflow-wrap:anywhere; }
form { display:grid; gap:16px; }
label { display:block; margin-bottom:6px; font-size:14px; font-weight:500; }
input { width:100%; min-height:44px; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); padding:10px 12px; font:inherit; }
button { min-height:44px; border:0; border-radius:9px; padding:10px 14px; font:inherit; cursor:pointer; }
#submit { margin-top:4px; color:#fff; background:#6654d9; font-weight:600; }
button:disabled { opacity:.55; cursor:wait; }
:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
nav { display:grid; gap:4px; margin-top:12px; }
.link { padding:6px 0; background:transparent; color:var(--primary); text-align:left; font-size:14px; }
#status, #error { margin:16px 0 0; font-size:14px; }
#error { color:var(--error); }
.hint { margin:16px 0 0; font-size:13px; }
footer { margin-top:28px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding-top:12px; }
footer a { color:var(--muted); font-size:13px; }
@media (max-width:400px) { body { padding:20px 12px; } .card { padding:24px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }