/* Auth surfaces use the same quiet hierarchy as the chat list and Settings. */
.auth-page {
    box-sizing: border-box;
    padding: clamp(20px, 4vw, 56px);
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 58%),
        var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
}

.auth-card {
    width: min(100%, 1080px);
    max-width: 1080px;
    min-height: min(680px, calc(100dvh - 64px));
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
    animation: none;
}

.auth-header {
    min-width: 0;
    padding: clamp(36px, 4.5vw, 56px);
    border: 0;
    border-right: 1px solid var(--color-border-subtle);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-accent-container) 48%, var(--color-bg-surface)), var(--color-bg-surface) 72%);
    color: var(--color-text-primary);
    text-align: left;
    align-items: flex-start;
}

.auth-header-glow { display: none; }

.auth-hero-shell {
    width: 100%;
    max-width: 400px;
    margin: 0;
}

.auth-badge {
    min-height: 28px;
    margin: 0 0 28px;
    padding: 0 10px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-bg-surface) 72%, transparent);
    color: var(--color-text-secondary);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-section);
}

.auth-logo {
    width: 52px;
    height: 52px;
    margin: 0 0 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-raised);
    box-shadow: var(--shadow-xs);
    backdrop-filter: none;
}

.auth-logo-orb { display: none; }

.auth-logo-mark {
    color: var(--color-accent-hover);
    font-size: 22px;
    filter: none;
}

.auth-header h2 {
    margin: 0 0 var(--space-2);
    color: var(--color-text-primary);
    font-size: clamp(34px, 4vw, 42px);
    font-weight: var(--roomy-weight-heading);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.auth-header p {
    max-width: 340px;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.auth-highlights {
    justify-content: flex-start;
    gap: 0;
    margin-top: 26px;
}

.auth-highlight-pill {
    padding: 0 10px;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-medium);
}

.auth-highlight-pill:first-child { padding-left: 0; border-left: 0; }

.auth-hero-metrics {
    width: 100%;
    max-width: 400px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 32px;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}

.auth-metric {
    min-width: 0;
    gap: 5px;
    padding: 4px 10px;
    border: 0;
    border-left: 1px solid var(--color-border-subtle);
    border-radius: 0;
    background: transparent;
}

.auth-metric:first-child { padding-left: 0; border-left: 0; }

.auth-metric-value {
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-strong);
}

.auth-metric-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-micro);
    letter-spacing: var(--letter-spacing-section);
}

.auth-panel {
    min-width: 0;
    background: var(--color-bg-surface);
}

.auth-tabs {
    min-height: 58px;
    padding: 0 clamp(20px, 3.5vw, 42px);
    border-bottom: 1px solid var(--color-border-subtle);
    background: transparent;
}

.auth-tab {
    min-width: 0;
    padding: 0 12px;
    border-radius: 0;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.auth-tab:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }

.auth-tab.active {
    background: transparent;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-strong);
}

.auth-tab.active::after { height: 2px; background: var(--color-accent); }

.auth-tab:focus-visible,
.auth-footer a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.auth-body {
    min-width: 0;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 3.5vw, 42px);
    align-items: center;
}

.auth-form { gap: 18px; max-width: 460px; }

.auth-form-intro { gap: 7px; margin-bottom: 4px; }

.auth-form-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-strong);
    letter-spacing: var(--letter-spacing-tight);
}

.auth-form-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-body);
}

.input-group { gap: 7px; }

.input-group label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-section);
}

.input-icon svg { color: var(--color-text-muted); }

.input-icon input {
    box-sizing: border-box;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--font-size-body-sm);
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.input-icon:has(svg) input { padding-left: 42px; }

.input-icon input:focus {
    border-color: var(--color-accent);
    background: var(--color-bg-surface);
    box-shadow: var(--focus-ring);
}

.input-icon input::placeholder { color: var(--color-text-muted); }

.password-length-hint { color: var(--color-text-muted); font-size: var(--font-size-micro); }

.auth-btn {
    min-height: 44px;
    margin-top: 4px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-accent-action);
    color: var(--color-text-inverse);
    font: inherit;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-strong);
    box-shadow: var(--shadow-xs);
    transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.auth-btn:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-sm); transform: none; }
.auth-btn:active { transform: none; }
.auth-btn:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 2px; }

.auth-btn-secondary {
    border-color: var(--color-border);
    background: var(--color-bg-muted);
    color: var(--color-text-primary);
    box-shadow: none;
}

.auth-btn-secondary:hover { background: var(--color-bg-hover); box-shadow: none; }

.auth-btn:disabled { background: var(--color-bg-disabled); color: var(--color-text-muted); }

.auth-error {
    margin-top: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--color-danger) 32%, var(--color-border));
    border-radius: var(--radius-sm);
    background: var(--color-danger-container);
    color: var(--color-danger);
    font-size: var(--font-size-meta);
}

.auth-footer {
    gap: 8px;
    padding: 16px 24px 22px;
    border-top: 1px solid var(--color-border-subtle);
    background: transparent;
}

.auth-footer a {
    border-radius: var(--radius-sm);
    color: var(--color-accent-hover);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.auth-footer a:hover { color: var(--color-text-primary); text-decoration: underline; }

@media (max-width: 980px) {
    .auth-page { padding: 24px 16px; }
    .auth-card { width: min(100%, 620px); min-height: 0; grid-template-columns: minmax(0, 1fr); }
    .auth-header { min-height: 0; padding: 30px 32px 26px; border-right: 0; border-bottom: 1px solid var(--color-border-subtle); }
    .auth-hero-shell { max-width: 520px; }
    .auth-badge { margin-bottom: 18px; }
    .auth-logo { width: 44px; height: 44px; margin-bottom: 16px; }
    .auth-header h2 { font-size: 32px; }
    .auth-highlights { margin-top: 18px; }
    .auth-hero-metrics { max-width: 520px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
    .auth-panel { min-height: 0; }
    .auth-body { align-items: flex-start; }
}

@media (max-width: 640px) {
    .auth-page { min-height: 100dvh; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
    .auth-card { border-radius: var(--radius-md); }
    .auth-header { padding: 22px 20px 18px; }
    .auth-badge { min-height: 26px; margin-bottom: 14px; }
    .auth-logo { width: 38px; height: 38px; margin-bottom: 13px; border-radius: var(--radius-sm); }
    .auth-logo-mark { font-size: 18px; }
    .auth-header h2 { margin-bottom: 5px; font-size: 28px; }
    .auth-header p { font-size: var(--font-size-body-sm); }
    .auth-highlights { margin-top: 14px; }
    .auth-highlight-pill { padding-inline: 7px; font-size: var(--font-size-micro); }
    .auth-hero-metrics { display: none; }
    .auth-tabs { min-height: 50px; padding-inline: 14px; }
    .auth-tab { font-size: var(--font-size-body-sm); }
    .auth-body { padding: 22px 20px; }
    .auth-form { gap: 15px; }
    .auth-footer { padding: 14px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-tab,
    .input-icon input,
    .auth-btn { transition: none; }
}