body { min-height: 100vh; background: var(--grid), var(--bg); background-attachment: fixed; }
main { display: grid; gap: 18px; width: min(460px, 100%); margin: 0 auto; padding: 40px 16px 60px; }
.card { padding: 24px; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.card h1 { margin: 6px 0 8px; font: 800 26px/1.15 var(--font-display); }
.card h2 { margin: 0 0 6px; font: 700 16px/1.3 var(--font-display); }
.lead { margin: 0 0 18px; color: var(--dim); }
.alpha-note { margin: -8px 0 18px; color: var(--dim); font-size: 13px; }
form { display: grid; gap: 8px; }
label { color: var(--fg-soft); font-size: 13px; font-weight: 600; }
form .btn { justify-self: start; margin-top: 6px; }
.code-input { font: 600 22px/1.2 var(--font-mono); letter-spacing: .35em; }
.secondary-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.text-button { padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.text-button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.text-button:disabled { color: var(--dim); cursor: not-allowed; }
.hint { min-height: 1.5em; margin: 2px 0 0; color: var(--dim); font-size: 12px; }
.status { min-height: 1.5em; margin: 14px 0 0; color: var(--fg-soft); }
.status[data-kind="error"] { color: var(--warn); }
.card a { color: var(--accent); }
.legal { margin: 16px 0 0; color: var(--dim); font-size: 12.5px; }
.dev { border-style: dashed; }
.dev p { margin: 0 0 12px; color: var(--dim); font-size: 13px; }
.dev-accounts { display: grid; gap: 8px; }
.dev-accounts .btn { justify-content: space-between; width: 100%; }
.dev-accounts small { color: var(--dim); font-weight: 400; }