:root{
  --bg:#F2F4F6; --surface:#FFFFFF; --ink:#13202B; --ink2:#4A5B69; --line:#D3DAE0;
  --accent:#0A6C74; --accent-ink:#FFFFFF; --bad:#A8281C; --bad-soft:#FADFDA; --good:#14683A; --good-soft:#DCF2E4;
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1519; --surface:#16212A; --ink:#E6EDF2; --ink2:#9FB0BD; --line:#2B3B47;
    --accent:#4FC1C9; --accent-ink:#06191B; --bad:#FF9487; --bad-soft:#3A1713; --good:#6FD39A; --good-soft:#123422;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1519; --surface:#16212A; --ink:#E6EDF2; --ink2:#9FB0BD; --line:#2B3B47;
  --accent:#4FC1C9; --accent-ink:#06191B; --bad:#FF9487; --bad-soft:#3A1713; --good:#6FD39A; --good-soft:#123422;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-body)}
.card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px 24px}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
h1{font-family:var(--f-display);font-size:28px;line-height:1.1;margin:4px 0 20px}
label{display:block;font-weight:500;margin:14px 0 6px}
input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:16px var(--f-body)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button{width:100%;margin-top:22px;padding:11px 14px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);font:600 16px var(--f-body);cursor:pointer}
.err{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:10px 12px;margin:0 0 8px;font-size:14px}
.ok{background:var(--good-soft);color:var(--good);border-radius:8px;padding:10px 12px;font-size:14px}
.help{font-size:13px;color:var(--ink2)}
.help ul{margin:6px 0 0;padding-left:18px}
.foot{margin-top:18px;font-size:14px}
a{color:var(--accent)}