/* =========================================================================
   Login page — reuses theme.css's CSS custom properties (colors, radius,
   shadow, dark-mode via [data-theme="dark"]) so it feels like the same
   product as the chat app, just a single centered card instead of the
   full chat shell.
   ========================================================================= */

.auth-body {
    height: 100%;
    overflow-y: auto;
    background: var(--app-bg);
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2.25rem 2rem;
    animation: authCardIn .25s ease;
}

@keyframes authCardIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 1.4rem;
}

.auth-brand .logo-dot {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(23, 135, 155, .35);
}

.auth-title {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .35rem;
}

.auth-subtitle {
    text-align: center;
    font-size: .88rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.auth-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .3rem;
}

.auth-field .form-control {
    background: var(--app-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: .6rem .75rem;
    height: auto;
    font-size: .92rem;
}

.auth-field .form-control:focus {
    background: var(--card);
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    color: var(--text);
}

.auth-field .form-control::placeholder { color: var(--text-muted); opacity: .7; }

.auth-password-wrap { position: relative; }

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    padding: .35rem;
    cursor: pointer;
}
.auth-password-toggle:hover { color: var(--text); }
.auth-password-toggle:focus { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.auth-submit {
    margin-top: .5rem;
    padding: .65rem 1rem;
    font-size: .92rem;
}

.auth-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .35);
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: .6rem .8rem;
    font-size: .85rem;
    margin-bottom: 1.1rem;
}

.auth-theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
}
.auth-theme-toggle:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }

@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.25rem; }
}