/* ============================================
   Auth Page Styles
   ============================================ */

.auth-body {
    background: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-wrapper {
    display: flex;
    width: 100%;
    max-width: 960px;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    min-height: 560px;
}

.auth-left {
    flex: 1;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-brand { margin-bottom: 2.5rem; }
.auth-logo { margin-bottom: 1rem; }
.auth-logo img { max-width: 200px; height: auto; filter: brightness(0) invert(1); }
.auth-brand h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.auth-brand p { opacity: 0.9; font-size: 1rem; }

.auth-features { display: flex; flex-direction: column; gap: 1.25rem; }

.auth-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feature-icon {
    font-size: 1.5rem;
    background: rgba(255,255,255,0.15);
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-feature h4 { font-size: 1rem; margin-bottom: 0.125rem; }
.auth-feature p { font-size: 0.85rem; opacity: 0.8; }

.auth-right {
    flex: 1;
    padding: 3rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-form-wrapper { width: 100%; max-width: 360px; }

.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.auth-tab {
    flex: 1;
    padding: 0.6rem;
    background: none;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
    font-family: inherit;
}

.auth-tab.active {
    background: var(--primary);
    color: white;
}

.auth-form { animation: fadeIn 0.3s ease; }

@media (max-width: 768px) {
    .auth-left { display: none; }
    .auth-wrapper { min-height: auto; }
    .auth-right { padding: 2rem 1.5rem; }
}

@media (max-width: 480px) {
    .auth-right { padding: 1.5rem 1rem; }
}