/* =============================================================================
   auth.css — authentication pages (login, register)
   Extends chat.css base variables
   ============================================================================= */

.page-auth {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2rem 1rem;
    background:      radial-gradient(ellipse at 60% 10%, #1a1060 0%, var(--bg-base) 60%);
}

.auth-card {
    width:           100%;
    max-width:       420px;
    background:      var(--bg-surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius-xl);
    padding:         2.5rem 2rem;
    display:         flex;
    flex-direction:  column;
    gap:             1.25rem;
}

.auth-logo {
    display:         flex;
    align-items:     center;
    gap:             0.4rem;
    font-weight:     700;
    font-size:       1.15rem;
    color:           var(--text-primary);
    text-decoration: none;
    align-self:      center;
}

.auth-title {
    font-size:       1.5rem;
    font-weight:     700;
    text-align:      center;
    color:           var(--text-primary);
}

.auth-subtitle {
    font-size:       0.875rem;
    color:           var(--text-secondary);
    text-align:      center;
    margin-top:      -0.75rem;
}

.auth-error {
    background:      rgba(239,68,68,0.12);
    border:          1px solid rgba(239,68,68,0.35);
    border-radius:   var(--radius-md);
    padding:         0.65rem 0.9rem;
    font-size:       0.875rem;
    color:           #fca5a5;
}

/* OAuth buttons */
.oauth-buttons {
    display:         flex;
    flex-direction:  column;
    gap:             0.6rem;
}

.oauth-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.65rem;
    padding:         0.65rem 1rem;
    border-radius:   var(--radius-md);
    font-size:       0.9rem;
    font-weight:     500;
    text-decoration: none;
    transition:      all 0.15s;
    border:          1px solid var(--border);
}

.oauth-google {
    background:  #fff;
    color:       #1a1a1a;
}
.oauth-google:hover { background: #f1f3f4; text-decoration: none; color: #1a1a1a; }

.oauth-github {
    background:  #24292e;
    color:       #fff;
    border-color: #444d56;
}
.oauth-github:hover { background: #2f363d; text-decoration: none; color: #fff; }

/* Divider */
.auth-divider {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    color:           var(--text-muted);
    font-size:       0.8rem;
}
.auth-divider::before,
.auth-divider::after {
    content:         '';
    flex:            1;
    height:          1px;
    background:      var(--border);
}

/* Form */
.auth-form {
    display:         flex;
    flex-direction:  column;
    gap:             1rem;
}

.form-group {
    display:         flex;
    flex-direction:  column;
    gap:             0.35rem;
}

.form-label {
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--text-secondary);
}

.form-input {
    background:      var(--bg-input);
    border:          1px solid var(--border);
    border-radius:   var(--radius-md);
    color:           var(--text-primary);
    font-size:       0.925rem;
    padding:         0.6rem 0.85rem;
    transition:      border-color 0.15s;
    width:           100%;
}
.form-input:focus         { outline: none; border-color: var(--accent); }
.form-input::placeholder  { color: var(--text-muted); }

.form-hint {
    font-size:       0.78rem;
    color:           var(--text-muted);
}

.btn-full { width: 100%; justify-content: center; padding: 0.7rem; font-size: 0.95rem; }

.auth-footer {
    text-align:      center;
    font-size:       0.875rem;
    color:           var(--text-secondary);
}