/*==============================================
   AUTH COMPONENT CSS
==============================================*/

.auth-wrapper {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 80px);
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--accent-color) 100%);
    padding: 2rem 1rem;
}

[data-theme="dark"] .auth-wrapper {
    background: linear-gradient(135deg, var(--bg-color) 0%, #152219 100%);
}

.auth-card {
    background: var(--bg-alt);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    width: 100%; max-width: 450px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    animation: fadeUp 0.4s ease-out;
}

.auth-card h2 { text-align: center; margin-bottom: 0.5rem; }
.auth-card p.subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 2rem; }

.role-selector {
    display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem;
}

.role-btn {
    flex: 1; padding: 1rem; text-align: center;
    border: 2px solid var(--border-color); border-radius: var(--border-radius);
    cursor: pointer; transition: var(--transition);
    background: var(--bg-color); color: var(--text-secondary);
}

.role-btn i { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; }
.role-btn.active { border-color: var(--primary-color); color: var(--primary-color); background: rgba(45, 106, 79, 0.05); }

.auth-link-text { text-align: center; margin-top: 1.5rem; color: var(--text-secondary); }
.auth-link-text a { font-weight: 600; text-decoration: underline; }

.error-msg { background: #fee2e2; color: #991b1b; padding: 0.75rem; border-radius: var(--border-radius); font-size: 0.9rem; margin-bottom: 1rem; text-align: center; }