.auth-page { min-height: 100vh; background:
  radial-gradient(1200px 500px at 85% -10%, rgba(232, 89, 12, .10), transparent 60%),
  radial-gradient(900px 400px at -10% 110%, rgba(20, 20, 20, .06), transparent 60%), var(--bg); }
.auth-wrap { max-width: 440px; margin: 0 auto; padding: var(--s10) var(--s4) var(--s12); display: flex; flex-direction: column; gap: var(--s6); }
.auth-wrap > .brand { align-self: center; }
.auth-card { padding: var(--s8); }
.auth-card h1 { font-size: var(--fs-xl); margin-bottom: 4px; }
.auth-card .center { text-align: center; margin: var(--s5) 0 0; }
.oauth { display: grid; gap: var(--s2); margin: var(--s4) 0; }
.oauth .btn { min-height: 46px; }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--text-faint); font-size: var(--fs-xs); margin: var(--s2) 0 var(--s4); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
[data-alert] .alert { margin: var(--s3) 0; }
@media (max-width: 480px) { .auth-card { padding: var(--s5); } .auth-wrap { padding-top: var(--s6); } }