:root { --ink:#0F181C; --panel:#16232A; --panel-2:#1D2D35; --line:#2A3D46; --text:#E6EDEF; --muted:#8FA4AC; --faint:#5E747C; --tungsten:#F2B45C; --tungsten-deep:#C98A33; --red:#EE7A6F; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(1200px 600px at 20% -10%, rgba(242,180,92,.12), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(98,199,191,.10), transparent 60%), var(--ink); color: var(--text); font: 400 15px/1.5 'Instrument Sans', system-ui, sans-serif; display: grid; place-items: center; padding: 24px 16px; }
.wrap { width: min(400px, 100%); display: grid; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 22px 'Bricolage Grotesque', sans-serif; font-variation-settings: 'wdth' 85; justify-content: center; }
.card { background: rgba(22,35,42,.9); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; display: grid; gap: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.card[hidden] { display: none; }
h1 { margin: 0 0 2px; font: 700 24px 'Bricolage Grotesque', sans-serif; font-variation-settings: 'wdth' 85; }
.lead { margin: -4px 0 4px; color: var(--muted); font-size: 14px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
label[hidden] { display: none; }
input { width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--text); font: inherit; outline: none; }
input:focus { border-color: var(--tungsten-deep); }
button { margin-top: 4px; height: 46px; border: 0; border-radius: 12px; background: var(--tungsten); color: #1b1407; font: 800 14px 'Bricolage Grotesque', sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
button:hover { background: #f6c27a; }
button:disabled { background: var(--line); color: var(--muted); cursor: wait; }
.err { margin: 0; color: var(--red); font-size: 13.5px; }
.note, .foot { margin: 0; color: var(--faint); font-size: 12.5px; text-align: center; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }