/* Auth Page Styles */
.auth-body { overflow: auto; }
.auth-container { display: flex; min-height: 100vh; }

.auth-left {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px;
    background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(168,85,247,.05));
    border-right: 1px solid var(--border); position: relative; overflow: hidden;
}
.auth-left::before {
    content: ''; position: absolute; top: -150px; right: -150px;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.12), transparent 70%);
    filter: blur(40px);
}
.auth-left-content { position: relative; max-width: 400px; }
.auth-left-content .logo { margin-bottom: 32px; }
.auth-left-content h1 { font-size: 2rem; font-weight: 800; margin-bottom: 12px; letter-spacing: -.02em; }
.auth-left-content p { font-size: .95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 32px; }
.auth-features { display: flex; flex-direction: column; gap: 12px; }
.auth-feature {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; font-size: .88rem; font-weight: 500;
}

.auth-right {
    width: 480px; flex-shrink: 0; display: flex; flex-direction: column;
    justify-content: center; padding: 40px 48px;
}
.auth-tabs { display: flex; gap: 4px; margin-bottom: 28px; background: var(--bg-card); padding: 4px; border-radius: 10px; }
.auth-tab {
    flex: 1; padding: 10px; border: none; border-radius: 8px;
    background: transparent; color: var(--text-muted); font-family: var(--font);
    font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.auth-tab.active { background: linear-gradient(135deg, var(--accent), var(--purple)); color: #fff; }

.auth-form { display: none; flex-direction: column; gap: 16px; }
.auth-form.active { display: flex; }

.btn-block { width: 100%; justify-content: center; }

.auth-switch { font-size: .85rem; color: var(--text-muted); text-align: center; }
.auth-switch a { color: var(--accent-light); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { font-size: .78rem; color: var(--text-dim); }

@media (max-width: 768px) {
    .auth-container { flex-direction: column; }
    .auth-left { display: none; }
    .auth-right { width: 100%; padding: 32px 20px; }
}