:root {
  --bg: #f4f4f1; --card: #fff; --text: #1c1c1a; --muted: #6d6d68; --line: #e3e3de;
  --accent: #2b59c3; --bad: #c0392b; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121211; --card: #1c1c1b; --text: #ececea; --muted: #9a9a95; --line: #2e2e2c;
          --accent: #5b84e6; --bad: #e05a4a; color-scheme: dark; }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
main { width: 100%; max-width: 360px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
h1 { font-size: 22px; margin: 0 0 18px; }
label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
input {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px; color: var(--text);
  padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
button {
  width: 100%; margin-top: 6px; padding: 14px; border: 0; border-radius: 12px; font: inherit;
  font-weight: 600; background: var(--accent); color: #fff; cursor: pointer;
}
.err { color: var(--bad); font-size: 14px; margin: -6px 0 14px; }
[hidden] { display: none !important; }