/* =====================================================
   Auth Forms — DinnerVideoJourney
   Login, Register styles
   ===================================================== */

.AuthPage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-base);
    padding: calc(var(--nav-h) + var(--sp-8)) var(--sp-5) var(--sp-8);
    background-image: radial-gradient(ellipse at 60% 40%, rgba(201,162,39,0.07) 0%, transparent 60%);
}

.AuthBox {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-2xl);
    padding: clamp(1.75rem, 5vw, 2.75rem);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow-lg);
}

.AuthBox-logo {
    text-align: center;
    margin-bottom: var(--sp-6);
}
.AuthBox-logo a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    color: var(--color-text-primary);
    text-decoration: none;
}
.AuthBox-logo span { color: var(--color-brand); }

.AuthBox-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-black);
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: var(--sp-2);
}
.AuthBox-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--sp-8);
    line-height: 1.6;
}

.AuthBox-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--sp-5);
}

.AuthBox-footer {
    text-align: center;
    margin-top: var(--sp-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.AuthBox-footer a {
    color: var(--color-brand);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.AuthBox-footer a:hover { color: var(--color-brand-light); }
.Form-checkRow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.Form-checkbox {
    width: 16px; height: 16px;
    accent-color: var(--color-brand);
    cursor: pointer;
}
.Form-forgotLink {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.Form-forgotLink:hover { color: var(--color-brand-light); }
.PasswordStrength { margin-top: var(--sp-2); }
.PasswordStrength-bar {
    height: 4px;
    background: var(--color-border);
    border-radius: var(--r-full);
    overflow: hidden;
    margin-bottom: var(--sp-1);
}
.PasswordStrength-fill {
    height: 100%;
    border-radius: var(--r-full);
    transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
    width: 0%;
}
.PasswordStrength-fill--weak   { background: var(--color-error);   width: 25%; }
.PasswordStrength-fill--fair   { background: #f59e0b; width: 50%; }
.PasswordStrength-fill--good   { background: #a3e635; width: 75%; }
.PasswordStrength-fill--strong { background: var(--color-success); width: 100%; }
.PasswordStrength-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.AuthBenefits {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.AuthBenefits-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding-block: var(--sp-2);
}
.AuthBenefits-icon { color: var(--color-brand); font-size: 1rem; flex-shrink: 0; }

@media (max-width: 480px) {
    .AuthBox { border-radius: var(--r-lg); }
}