/* Auth layout uses the same tokens, header mark, fields and buttons as /site.css. */
:root { color-scheme: dark; }
.auth-page { min-height: 100vh; background: var(--bg); }
.auth-card {
  width: calc(100% - 2rem); max-width: 28rem; margin: 3rem auto;
  padding: 2rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.auth-card h1 { font-size: 2rem; letter-spacing: -0.03em; }
.auth-card p { color: var(--muted); }
.auth-card .eyebrow { color: var(--accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 1.25rem; }
.auth-card label { margin-top: 1.5rem; }
.auth-card .btn { width: 100%; margin: 0.85rem 0 1rem; }
.auth-card .btn:disabled { opacity: 0.6; cursor: wait; }
#code { text-transform: uppercase; letter-spacing: 0.3em; }
.auth-card .note { font-size: 0.8rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
#message { font-size: 0.9rem; overflow-wrap: anywhere; color: var(--text); }
#message:empty { display: none; }
form[hidden] { display: none; }
@media (max-width: 480px) {
  .auth-card { margin: 1.5rem auto; padding: 1.5rem; }
  .auth-card h1 { font-size: 1.8rem; }
}