body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--color-surface-muted); padding: 28px 18px; }
.auth-shell { width: min(390px, 100%); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; color: var(--color-text-muted); font-size: 12px; }
.auth-card { background: var(--color-surface); padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
h1 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.6px; font-weight: 600; }
.subtitle { margin: 0 0 25px; color: var(--color-text-muted); font-size: 13px; }
.auth-tabs { display: flex; gap: 3px; padding: 3px; border-radius: var(--radius-sm); background: var(--color-surface-muted); margin-bottom: 25px; }
.auth-tabs button { flex: 1; border: 0; border-radius: var(--radius-sm); padding: 8px; background: transparent; color: var(--color-text-muted); font-size: 13px; }
.auth-tabs .active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }
label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 550; }
input { width: 100%; padding: 10px 12px; margin-bottom: 19px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
input:focus { outline: 2px solid var(--color-primary-soft); border-color: var(--color-primary); }
.button-primary { width: 100%; margin-top: 3px; }
.auth-error { padding: 10px; margin: 0 0 18px; background: var(--color-danger-soft); color: var(--color-danger); border-radius: var(--radius-sm); font-size: 12px; overflow-wrap: anywhere; }
.auth-footnote { color: var(--color-text-muted); font-size: 11px; text-align: center; margin-top: 23px; }
@media (max-width: 480px) { .auth-card { padding: 26px; } input { font-size: 16px; } }