/* Auth Page Styles */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--primary-deepdark); position: relative; overflow: hidden; padding: 40px 20px;
}
.auth-page::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}
.auth-container { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.auth-header { text-align: center; margin-bottom: 32px; }
.auth-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; text-decoration: none; }
.auth-logo-icon {
  width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: white; box-shadow: 0 4px 20px rgba(29,78,216,0.4);
}
.auth-logo-text { font-size: 1.6rem; font-weight: 800; color: white; }
.auth-header h2 { color: white; margin-bottom: 8px; font-size: 1.5rem; }
.auth-header p { color: var(--text-muted); font-size: 0.9rem; }
.auth-card {
  background: white; border-radius: var(--radius-2xl); padding: 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.auth-tabs { display: flex; gap: 4px; background: var(--bg-body); border-radius: var(--radius-md); padding: 4px; margin-bottom: 28px; }
.auth-tab {
  flex: 1; padding: 10px; text-align: center; font-size: 14px; font-weight: 600;
  color: var(--text-muted); border-radius: var(--radius-sm); background: none;
  transition: all var(--transition-fast); cursor: pointer;
}
.auth-tab.active { background: white; color: var(--primary); box-shadow: var(--shadow-xs); }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-divider {
  display: flex; align-items: center; gap: 16px; margin: 24px 0;
  color: var(--text-muted); font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-footer { text-align: center; margin-top: 24px; }
.auth-footer a { color: white; font-weight: 600; }
.auth-footer p { color: var(--text-muted); font-size: 0.85rem; }
@media (max-width: 480px) { .auth-card { padding: 24px; } }