:root { --bg: #f6f3fa; --fg: #1d1b22; --muted: #5d5868; --card: #fff; --accent: #6B2FB3; --bad: #a3262a; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg: #141119; --fg: #ece8f2; --muted: #a8a1b4; --card: #1e1a26; --accent: #b48ef0; --bad: #ff8a8a; color-scheme: dark; } }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 16px; box-sizing: border-box; }
.box { background: var(--card); border-radius: 12px; padding: 28px 24px; max-width: 380px; width: 100%; display: grid; gap: 14px; box-shadow: 0 4px 24px rgb(40 10 80 / .08); }
h1 { margin: 0; color: var(--accent); font-size: 22px; }
p { margin: 0; color: var(--muted); }
.err { color: var(--bad); }
.foot { font-size: 12px; }