.auth-page { position: relative; }
.theme-toggle-wrapper { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 3; }
.auth-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 1rem;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    max-width: 1040px;
    margin: 0 auto;
}
.auth-showcase { padding: clamp(2rem, 6vw, 4rem); }
.auth-kicker { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); background: rgba(19, 34, 56, 0.08); color: var(--sys-color-primary); font-size: 0.86rem; font-weight: 700; margin-bottom: 1.25rem; }
.auth-showcase h1 { font-family: var(--font-title); font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 0.98; max-width: 12ch; margin-bottom: 1rem; }
.auth-showcase p { color: var(--sys-color-on-surface-variant); max-width: 34rem; font-size: 1.05rem; margin-bottom: 1.8rem; }
.auth-benefits { display: grid; gap: 0.85rem; }
.auth-benefit { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--sys-color-outline); background: color-mix(in srgb, var(--sys-color-surface) 82%, transparent); }
.auth-panel { width: 100%; padding: 2rem; border-radius: 30px; background: color-mix(in srgb, var(--sys-color-surface-raised) 96%, transparent); }
.auth-header { margin-bottom: 2rem; text-align: left; }
.auth-logo { height: 64px; width: 64px; }
.auth-header h1 { font-family: var(--font-title); font-size: 2rem; font-weight: 700; margin: 1rem 0 0.35rem; }
.auth-header p, .auth-footer, .terms-row label { color: var(--sys-color-on-surface-variant); }
.auth-footer { margin-top: 1.5rem; font-size: 0.92rem; }
.auth-footer a { color: var(--sys-color-primary); font-weight: 700; }
.terms-row { margin: 1rem 0; display: flex; align-items: flex-start; gap: 0.75rem; }
.terms-checkbox { margin-top: 0.25rem; }
.auth-submit { margin-top: 0.25rem; }
.auth-last-input { margin-bottom: 1rem; }
.auth-recovery-toggle { margin-bottom: 0.75rem; }
.auth-recovery-panel { padding: 1rem; border-radius: var(--radius-md); background: var(--sys-color-surface-variant); border: 1px solid var(--sys-color-outline); margin-bottom: 1rem; }

@media (max-width: 980px) {
    .auth-wrapper { grid-template-columns: 1fr; padding: 1.25rem; }
    .auth-showcase { padding: 1rem 0 0; }
}

@media (max-width: 640px) {
    .auth-panel { padding: 1.4rem; border-radius: 22px; }
    .auth-showcase h1 { max-width: none; }
}