:root { color-scheme: dark; --gold: #d6b36a; --ink: #f2eee6; --muted: #b6b0a4; --bg: #101013; --panel: #1b1b20; --line: #45434a; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 70% 0, #80602c22, transparent 60%), var(--bg); color: var(--ink); font: 16px/1.6 system-ui, sans-serif; min-height: 100vh; }
header { max-width: 1120px; margin: auto; padding: 26px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
a { color: var(--gold); text-underline-offset: 4px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; letter-spacing: 4px; font-weight: 700; }
main { width: min(100% - 40px, 440px); margin: 56px auto; }
.eyebrow { font-size: 11px; letter-spacing: 3px; color: var(--gold); }
h1 { font: 400 44px/1.15 Georgia, serif; margin: 16px 0; }
p { color: var(--muted); }
label { display: block; margin: 18px 0 7px; font-weight: 600; font-size: 14px; }
input { width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 12px; font: inherit; }
button, .primary { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--gold); padding: 10px 18px; font: 600 14px/1.5 system-ui, sans-serif; cursor: pointer; transition: background .15s; }
button:hover { background: #2c2a25; }
.primary { display: inline-block; width: auto; background: var(--gold); color: var(--bg); text-decoration: none; border-color: var(--gold); margin-right: 8px; }
.primary:hover:not(:disabled) { background: #f2d398; }
button:disabled { color: #b6b0a4; background: #30302e; border-color: #45434a; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.password-row { display: flex; gap: 8px; }
.hint, .footnote { font-size: 12px; }
#status { min-height: 26px; color: var(--gold); }
#status.error { color: #ffb4a6; }
#challenge { margin: 20px 0; min-height: 65px; }
.switch { font-size: 14px; }
.switch button { background: transparent; border: none; padding: 8px; text-decoration: underline; text-underline-offset: 4px; }
.footnote { margin-top: 32px; }
[hidden] { display: none !important; }
@media (max-width: 480px) { header { font-size: 12px; padding: 20px; } .brand { letter-spacing: 2px; } main { margin-top: 28px; } h1 { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }