:root { --bg:#f6f7f9; --fg:#1f2933; --card:#fff; --line:#d5dae1; --acc:#2f6fdf; --bad:#b42318; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12161b; --fg:#e4e7eb; --card:#1c2229; --line:#323a44; --acc:#6ea0ff; --bad:#ff8a80; }
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,sans-serif; padding:16px; }
main { width:100%; max-width:360px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:24px; }
h1 { margin:0 0 16px; font-size:22px; }
label { display:block; margin:12px 0; }
input { display:block; width:100%; margin-top:6px; padding:12px; font-size:16px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
input[readonly] { position:absolute; left:-9999px; }
button { width:100%; padding:12px; font-size:16px; border:0; border-radius:8px;
  background:var(--acc); color:#fff; cursor:pointer; }
.err { color:var(--bad); }