:root { color-scheme: light dark; --bg:#f6f5f2; --card:#fff; --text:#1d1d1b; --muted:#6b6a65; --border:#dcdad3;
  --accent:#1f5fa8; --accent-text:#fff; --danger:#a32d2d; --ok:#2f6b16; }
@media (prefers-color-scheme: dark) { :root { --bg:#161615; --card:#21211f; --text:#ecebe6; --muted:#a3a29b;
  --border:#3a3a37; --accent:#5b9ee6; --accent-text:#0b1a2b; --danger:#f09595; --ok:#97c459; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:16px;
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
main { width:100%; max-width:380px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; }
h1 { font-size:20px; font-weight:600; margin:0 0 4px; }
p { margin:0 0 16px; color:var(--muted); font-size:14px; }
label { display:block; font-size:14px; margin:12px 0 4px; }
input[type=email], input[type=password], input[type=text] { width:100%; height:40px; padding:0 12px; font:inherit;
  color:inherit; background:transparent; border:1px solid var(--border); border-radius:8px; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.check { display:flex; gap:8px; align-items:center; font-size:14px; margin-top:12px; }
.actions { display:flex; gap:8px; margin-top:20px; }
button { flex:1; height:40px; font:inherit; font-weight:500; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); background:transparent; color:inherit; }
button.primary { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
button:disabled { opacity:.6; cursor:wait; }
.error { color:var(--danger); font-size:14px; margin-top:12px; min-height:1em; }
.ok { color:var(--ok); }
dl { margin:0; font-size:14px; } dt { color:var(--muted); margin-top:10px; } dd { margin:0; overflow-wrap:anywhere; } dd ul { margin:4px 0 0; padding-left:20px; }
.hidden { display:none; }
.wide { width:100%; flex:none; }
#page-error { margin:0 0 12px; } #page-error:empty { display:none; }
.divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; margin:18px 0 2px; }
.divider::before, .divider::after { content:""; flex:1; border-top:1px solid var(--border); }
a { color:var(--accent); }