:root { color-scheme: light dark; --fg: #1a1a1a; --bg: #fff; --muted: #666; --accent: #2563eb; --err: #b91c1c; }
@media (prefers-color-scheme: dark) { :root { --fg: #eee; --bg: #111; --muted: #aaa; --accent: #60a5fa; --err: #f87171; } }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg); }
main { max-width: 28rem; margin: 0 auto; padding: 2rem 1.25rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.muted { color: var(--muted); font-size: .95rem; }
.error { color: var(--err); font-weight: 600; }
label { display: block; margin: 1.25rem 0 .4rem; font-weight: 600; }
input[type=email], input[name=otp] { width: 100%; font-size: 1.25rem; padding: .75rem; border: 1px solid var(--muted); border-radius: .5rem; background: transparent; color: inherit; }
input[name=otp] { letter-spacing: .4em; text-align: center; }
textarea.key { display: block; width: 100%; resize: none; word-break: break-all; font: 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: .75rem; border: 1px solid var(--muted); border-radius: .5rem; background: transparent; color: inherit; }
button { width: 100%; margin-top: 1rem; padding: .9rem; font-size: 1.05rem; border: 0; border-radius: .5rem; background: var(--accent); color: #fff; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button[disabled] { opacity: .45; }
a { color: var(--accent); }