:root { --bg:#f5f7fb; --card:#fff; --text:#1b1f27; --muted:#6b7280; --brand:#0d6efd; --err:#c62828; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#10131a; --card:#1a1f2b; --text:#e8ebf2; --muted:#9aa3b2; --err:#ef7b7b; }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  min-height: 100vh;
}
.card { background: var(--card); width: 100%; max-width: 380px; padding: 28px 24px;
        border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.08); text-align: center; }
h1 { font-size: 1.4rem; margin: 0 0 12px; }
p { color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
input { width: 100%; padding: 14px; font-size: 1.05rem; border-radius: 10px;
        border: 1px solid var(--muted); background: transparent; color: var(--text); margin-bottom: 12px; }
input.code { text-align: center; letter-spacing: .4em; font-size: 1.5rem; }
button { width: 100%; padding: 14px; font-size: 1rem; border: 0; border-radius: 10px;
         background: var(--brand); color: #fff; cursor: pointer; }
button.link { background: none; color: var(--brand); margin-top: 8px; }
button:disabled { opacity: .6; }
.err { color: var(--err); min-height: 1.3em; margin: 0 0 8px; font-size: .95rem; }
.hint { font-size: .85rem; }
[hidden] { display: none !important; }