:root { --bg:#f6f5f2; --fg:#1d1d1b; --card:#fff; --line:#d9d6cf; --accent:#b4432c; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#141413; --fg:#ecebe6; --card:#1e1e1c; --line:#3a3935; --accent:#e0735a; }
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--fg);
  font:16px/1.4 system-ui, sans-serif; }
.card { width:min(360px, calc(100vw - 32px)); background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:28px; display:grid; gap:12px; }
h1 { margin:0 0 8px; font-size:1.2rem; }
input, button { font:inherit; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--fg); }
button { background:var(--accent); color:#fff; border-color:var(--accent); cursor:pointer; }
#err { margin:0; color:var(--accent); font-size:.9rem; }