.auth-page {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 100px 24px 60px;
}
.auth-bg {
  position: absolute; inset: 0;
  background-image: url('/images/background4.jpg');
  background-size: cover; background-position: center;
  filter: blur(3px) brightness(0.35); transform: scale(1.04);
}
.auth-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,10,20,0.4), rgba(6,10,20,0.7));
}
.auth-card {
  position: relative; z-index: 2; width: 100%; max-width: 400px;
  background: rgba(8,14,28,0.92); border: 1px solid var(--border2);
  border-radius: 16px; padding: 40px 36px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.auth-sub { font-size: 13.5px; color: var(--muted); }

.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.auth-switch a { color: var(--gold); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { color: var(--gold-lt); }

/* Gender selector */
.gender-selector { display: flex; gap: 10px; }
.gender-option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: 8px; border: 1px solid var(--border2);
  cursor: pointer; transition: all 0.18s; font-size: 13.5px; color: var(--text); font-weight: 500;
}
.gender-option input { display: none; }
.gender-option:has(input:checked) {
  background: rgba(201,147,58,0.12); border-color: var(--border); color: var(--gold);
}
.gender-option:hover { border-color: rgba(255,255,255,0.15); }