/* ============================================================================
   auth.css — login, register, password-reset, logout-confirm
   ============================================================================ */

.auth-page {
    min-height: 100vh;
    display: flex;
    background: var(--bg-secondary);
}

.auth-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
}

.auth-logo {
    display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none;
    margin-bottom: var(--space-6);
}
.auth-logo-mark {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: block; flex-shrink: 0;
}
.auth-logo-text {
    font-family: var(--font-display); font-size: var(--text-2xl);
    color: var(--text-primary); letter-spacing: -0.01em;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-medium);
}
.auth-card h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
}
.auth-card .muted { margin-bottom: var(--space-6); }

.auth-form { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.auth-form label { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.auth-form label > span { color: var(--text-secondary); font-weight: 500; }
.auth-form label small { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 400; }
.auth-form label.checkbox {
    display: flex; align-items: center; gap: var(--space-2); font-weight: 500;
    color: var(--text-secondary); cursor: pointer;
}

.auth-alt {
    text-align: center; font-size: var(--text-sm);
    color: var(--text-secondary); margin-top: var(--space-3);
}
.auth-alt a { color: var(--accent-600); font-weight: 600; }