:root { --bg:#f6f7f9; --fg:#1a1c20; --card:#fff; --accent:#3b6cff; --border:#d9dce2; --err:#d33; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --fg:#e8eaee; --card:#1d2026; --accent:#6c8fff; --border:#2e323a; --err:#ff7a7a; }
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--fg);
       font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
form { width:min(360px, 90vw); background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.5rem; }
h1 { font-size:1.25rem; font-weight:600; margin:0 0 1rem; }
input, button { width:100%; font-size:1rem; padding:.75rem .9rem; border-radius:10px; }
input { border:1px solid var(--border); background:transparent; color:inherit; margin-bottom:.75rem; }
button { border:0; background:var(--accent); color:#fff; cursor:pointer; }
#err { color:var(--err); font-size:.9rem; margin:0 0 .75rem; display:none; }