.auth-page { display: grid; min-height: calc(100vh - 68px); padding: 3rem 1rem; place-items: center; background: linear-gradient(180deg, #f7f7fb 0%, #fff 100%); }
.auth-card { width: min(100%, 460px); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--border); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.auth-card h1 { font-size: clamp(2.4rem, 9vw, 3.8rem); }
.auth-card > p:not(.eyebrow) { color: var(--muted); }
.checkbox-field { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.88rem; }
.auth-alternative { margin: 1.4rem 0 0; text-align: center; }
.auth-alternative a { white-space: nowrap; }
.auth-footer { display: flex; justify-content: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.auth-provider-form { margin-top: 1.5rem; }
.auth-provider-button { min-height: 46px; gap: 0.55rem; }
.auth-provider-logo { width: auto; height: 30px; }
.auth-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.5rem 0; color: var(--muted); font-size: 0.82rem; text-align: center; }
.auth-divider::before, .auth-divider::after { height: 1px; background: var(--border); content: ""; flex: 1; }
.auth-divider span { flex: none; }
.email-login { display: grid; gap: 1rem; }
.auth-card:has(> .password-login[open]) > .email-login { display: none; }
.email-login p { margin: 0; color: var(--muted); }
.auth-section-title { margin: 0; font-family: var(--brand-body-font-family); font-size: 1rem; font-style: normal; font-weight: 700; }
.email-login__code { font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: 0.3em; text-align: center; }
.email-login__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
.email-login__action { margin: 0; }
.email-login__action .text-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.password-login { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.password-login summary { color: var(--brand-blue); cursor: pointer; font-weight: 700; text-align: center; }
.password-login summary::marker { color: var(--brand-gold); }
.password-login__form { margin-top: 1.2rem; }