/* ═══════════════════════════════════════════════════════
   AstroKamya · Auth Modal · PREMIUM CINEMATIC EDITION v2
   World-Class Redesign — Blur-up entry, cycling border,
   nebula orbs, mandala rings, cinematic scanner
   Loads AFTER auth.css — all rules override via specificity
   ═══════════════════════════════════════════════════════ */

/* ─── OVERLAY: Deep space vignette ─── */
.auth-overlay {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(124,92,252,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(224,165,38,0.05) 0%, transparent 40%),
    rgba(3,2,8,0.92) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}

/* ─── MODAL: Liquid-glass + blur-up entry + cycling border ─── */
.auth-modal {
  width: 440px !important;
  max-width: 94vw !important;
  border-radius: 28px !important;
  background:
    linear-gradient(168deg, rgba(18,14,30,0.97) 0%, rgba(10,8,18,0.98) 100%) !important;
  border: 1.2px solid rgba(224,165,38,0.15) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 60px 120px -20px rgba(0,0,0,0.7),
    0 0 80px rgba(124,92,252,0.04),
    0 0 160px rgba(224,165,38,0.03) !important;
  /* Blur-up start state */
  transform: scale(0.88) translateY(30px) !important;
  opacity: 0 !important;
  filter: blur(12px);
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1),
              opacity 0.5s cubic-bezier(0.16,1,0.3,1),
              filter 0.6s cubic-bezier(0.16,1,0.3,1),
              border-color 1.5s ease,
              box-shadow 1.5s ease !important;
  will-change: transform, opacity, filter;
}
.auth-overlay.show .auth-modal {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
  filter: blur(0);
  animation: authBorderCycle 8s ease-in-out 0.7s infinite !important;
}

/* Cycling border glow: gold → violet → rose → gold */
@keyframes authBorderCycle {
  0%, 100% {
    border-color: rgba(224,165,38,0.18);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 60px 120px -20px rgba(0,0,0,0.7),
      0 0 60px rgba(224,165,38,0.06);
  }
  33% {
    border-color: rgba(124,58,237,0.22);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 60px 120px -20px rgba(0,0,0,0.7),
      0 0 60px rgba(124,58,237,0.06);
  }
  66% {
    border-color: rgba(232,54,124,0.18);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03) inset,
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 60px 120px -20px rgba(0,0,0,0.7),
      0 0 60px rgba(232,54,124,0.05);
  }
}

/* ─── CLOSE BUTTON: Refined glass ─── */
.auth-close {
  width: 32px !important; height: 32px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.35) !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  top: 14px !important; right: 14px !important;
}
.auth-close:hover {
  background: rgba(252,92,124,0.1) !important;
  border-color: rgba(252,92,124,0.2) !important;
  color: #FC5C7C !important;
  transform: rotate(90deg) scale(1.08) !important;
}

/* ─── COSMIC HEADER: Constellation field + nebula orb ─── */
.auth-cosmic-header {
  height: 180px !important;
  border-radius: 28px 28px 0 0 !important;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(224,165,38,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 30%, rgba(124,92,252,0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(76,219,196,0.04) 0%, transparent 40%),
    linear-gradient(180deg, rgba(12,10,22,0) 0%, rgba(12,10,22,0.4) 100%) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Star dots constellation */
.auth-cosmic-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 35%, rgba(255,255,255,0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 75%, rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 45%, rgba(224,165,38,0.6) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 25%, rgba(124,92,252,0.5) 50%, transparent 100%);
  animation: authStarTwinkle 6s ease-in-out infinite alternate;
}
@keyframes authStarTwinkle {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* Aurora sweep + nebula orb drift */
.auth-cosmic-header::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120px 120px at 30% 60%, rgba(224,165,38,0.07) 0%, transparent 70%),
    radial-gradient(100px 100px at 75% 30%, rgba(124,92,252,0.05) 0%, transparent 70%),
    linear-gradient(120deg, transparent 20%, rgba(224,165,38,0.05) 35%, rgba(124,92,252,0.03) 50%, transparent 65%);
  animation: authNebulaFloat 12s ease-in-out infinite;
  will-change: transform;
}
@keyframes authNebulaFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25% { transform: translate(15px, -8px) scale(1.05); opacity: 0.8; }
  50% { transform: translate(-10px, 5px) scale(0.95); opacity: 1; }
  75% { transform: translate(8px, 10px) scale(1.02); opacity: 0.7; }
}

/* ─── ZODIAC RING: Refined glow ─── */
.auth-zodiac-ring {
  width: 180px !important; height: 180px !important;
  filter: drop-shadow(0 0 20px rgba(224,165,38,0.08));
}
.azr-outer { animation: azrSpin 80s linear infinite !important; }
.azr-inner { animation: azrSpin 55s linear infinite reverse !important; }
.azs { font-size: 13px !important; opacity: 0.15 !important; }

/* ─── CENTER ICON: Premium orb + mandala rings + ring pulse ─── */
.auth-center-icon {
  width: 60px !important; height: 60px !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,220,120,0.2) 0%, transparent 60%),
    linear-gradient(145deg, rgba(224,165,38,0.18), rgba(124,92,252,0.12)) !important;
  border: 1.5px solid rgba(224,165,38,0.25) !important;
  box-shadow:
    0 0 30px rgba(224,165,38,0.12),
    0 0 60px rgba(224,165,38,0.06),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  font-size: 24px !important;
  animation: authOrbFloat 4s ease-in-out infinite !important;
  position: relative !important;
}
@keyframes authOrbFloat {
  0%, 100% {
    box-shadow: 0 0 30px rgba(224,165,38,0.12), 0 0 60px rgba(224,165,38,0.06), inset 0 1px 0 rgba(255,255,255,0.08);
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    box-shadow: 0 0 40px rgba(224,165,38,0.18), 0 0 80px rgba(224,165,38,0.08), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translate(-50%, -50%) translateY(-4px);
  }
}

/* SVG mandala rings inside center icon */
.auth-mandala-svg {
  position: absolute;
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  pointer-events: none;
}
.am-ring-1 { animation: amSpin1 20s linear infinite; transform-origin: 40px 40px; }
.am-ring-2 { animation: amSpin2 14s linear infinite reverse; transform-origin: 40px 40px; }
.am-ring-3 { animation: amSpin3 10s linear infinite; transform-origin: 40px 40px; }
@keyframes amSpin1 { to { transform: rotate(360deg); } }
@keyframes amSpin2 { to { transform: rotate(-360deg); } }
@keyframes amSpin3 { to { transform: rotate(360deg); } }

/* Emoji overlay on top of mandala */
.auth-mandala-emoji {
  position: relative;
  z-index: 1;
}

/* Ring pulse radiating from center icon */
.auth-center-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(224,165,38,0.25);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: authRingPulse 3.5s ease-out infinite;
  pointer-events: none;
}
@keyframes authRingPulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* ─── SHOOTING STARS: Cinematic ─── */
.auth-shooting-star {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(224,165,38,0.6), rgba(255,255,255,0.8), transparent) !important;
  width: 60px !important;
}

/* ─── BODY: Typography + staggered entrance ─── */
.auth-body {
  padding: 24px 28px 28px !important;
}
.auth-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #F0EAFF !important;
  animation: authFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
.auth-title em {
  background: linear-gradient(135deg, #FFD170, #E0A526, #FC5C7C) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.auth-subtitle {
  font-size: 13px !important;
  color: #8B82A8 !important;
  line-height: 1.6 !important;
  margin-bottom: 22px !important;
  animation: authFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.22s both;
}

/* Staggered entrance for body children */
@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.auth-step.active .auth-toggle {
  animation: authFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.28s both;
}
.auth-step.active .auth-field {
  animation: authFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.34s both;
}
.auth-step.active .auth-cta {
  animation: authFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.40s both;
}
.auth-step.active .auth-divider {
  animation: authFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.46s both;
}
.auth-step.active .auth-social-row {
  animation: authFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.50s both;
}
.auth-step.active .auth-trust {
  animation: authFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.56s both;
}

/* ─── TOGGLE: Premium pill switcher ─── */
.auth-toggle {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  margin-bottom: 22px !important;
}
.auth-toggle-btn {
  border-radius: 11px !important;
  padding: 11px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #8B82A8 !important;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1) !important;
  border: 1px solid transparent !important;
}
.auth-toggle-btn.active {
  background: linear-gradient(145deg, rgba(224,165,38,0.10), rgba(124,92,252,0.06)) !important;
  color: #F0EAFF !important;
  border: 1px solid rgba(224,165,38,0.12) !important;
  box-shadow:
    0 2px 16px rgba(224,165,38,0.08),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transform: scale(1.02);
}

/* ─── INPUT FIELDS: Premium dark glass + golden focus ─── */
.auth-field label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #7A7290 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 7px !important;
}
.auth-input {
  padding: 15px 16px !important;
  background: rgba(6,4,14,0.7) !important;
  border: 1.5px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  color: #F0EAFF !important;
  font-size: 15px !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.auth-input::placeholder {
  color: rgba(139,130,168,0.5) !important;
}
.auth-input:focus {
  border-color: rgba(224,165,38,0.35) !important;
  box-shadow:
    0 0 0 3px rgba(224,165,38,0.06),
    0 0 20px rgba(224,165,38,0.05),
    0 4px 0 -2px rgba(224,165,38,0.15),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
  background: rgba(10,8,20,0.9) !important;
  transform: scale(1.01);
}

/* ─── CTA BUTTON: Liquid gold + light streak sweep ─── */
.auth-cta {
  padding: 15px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #D4960F 0%, #E8B020 30%, #FFD060 55%, #E8B020 80%, #D4960F 100%) !important;
  background-size: 200% 100% !important;
  color: #1A0E08 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    0 4px 16px rgba(224,165,38,0.25),
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.1) inset !important;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1) !important;
  animation: authGoldShimmer 4s ease-in-out infinite !important;
  position: relative !important;
  overflow: hidden !important;
}
@keyframes authGoldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.auth-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 8px 32px rgba(224,165,38,0.35),
    0 0 60px rgba(224,165,38,0.10),
    0 1px 0 rgba(255,255,255,0.2) inset !important;
}
.auth-cta:active {
  transform: translateY(0) scale(0.98) !important;
}
/* Light streak sweep across button */
.auth-cta::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
  animation: authCTASweep 4s ease-in-out infinite !important;
  pointer-events: none;
}
@keyframes authCTASweep {
  0%, 70%, 100% { transform: translateX(-100%); }
  85% { transform: translateX(350%); }
}

/* ─── DIVIDER: Gradient line ─── */
.auth-divider {
  margin: 20px 0 !important;
}
.auth-divider::before, .auth-divider::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent) !important;
}
.auth-divider span {
  font-size: 10px !important;
  color: #6B6380 !important;
  letter-spacing: 0.1em !important;
}

/* ─── SOCIAL BUTTONS: Glass capsules + context glow ─── */
.auth-social-row {
  gap: 10px !important;
}
.auth-social-btn {
  padding: 13px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #B8B0D4 !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.auth-social-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F0EAFF !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}
/* Google button glow */
.auth-social-btn[data-provider="google"]:hover {
  box-shadow: 0 4px 20px rgba(66,133,244,0.15), 0 0 0 1px rgba(66,133,244,0.08) !important;
}
/* Apple button glow */
.auth-social-btn[data-provider="apple"]:hover {
  box-shadow: 0 4px 20px rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* ─── TRUST FOOTER: Minimal SVG icons ─── */
.auth-trust {
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  padding-top: 14px !important;
  margin-top: 18px !important;
  gap: 14px !important;
}
.auth-trust span {
  font-size: 10px !important;
  color: #5E5675 !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.auth-trust svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* ─── OTP DIGITS: Premium glass + fill bounce ─── */
.otp-digit {
  width: 50px !important; height: 58px !important;
  background: rgba(6,4,14,0.7) !important;
  border: 1.5px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  color: #F0EAFF !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.otp-digit:focus {
  border-color: rgba(224,165,38,0.4) !important;
  box-shadow:
    0 0 0 3px rgba(224,165,38,0.08),
    0 0 24px rgba(224,165,38,0.06) !important;
  background: rgba(224,165,38,0.03) !important;
}
.otp-digit.filled {
  border-color: rgba(76,219,196,0.35) !important;
  background: rgba(76,219,196,0.03) !important;
  box-shadow: 0 0 12px rgba(76,219,196,0.06) !important;
  animation: otpFillBounce 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}
@keyframes otpFillBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ─── BIRTH BADGE: Refined ─── */
.auth-birth-badge {
  background: linear-gradient(145deg, rgba(124,92,252,0.05), rgba(224,165,38,0.03)) !important;
  border: 1px solid rgba(124,92,252,0.10) !important;
  border-radius: 14px !important;
  padding: 11px 16px !important;
}
.auth-birth-badge-text {
  font-size: 11.5px !important;
  color: #9B92B8 !important;
  line-height: 1.5 !important;
}

/* ─── WELCOME SCREEN: Celebration ─── */
.welcome-check {
  width: 68px !important; height: 68px !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(76,219,196,0.15) 0%, transparent 60%),
    linear-gradient(145deg, rgba(34,197,94,0.12), rgba(76,219,196,0.08)) !important;
  border: 1.5px solid rgba(76,219,196,0.25) !important;
  box-shadow: 0 0 40px rgba(76,219,196,0.10), 0 0 80px rgba(76,219,196,0.04) !important;
}
.welcome-name {
  font-size: 22px !important;
  color: #F0EAFF !important;
  letter-spacing: -0.02em !important;
}
.welcome-sign {
  color: #D4A020 !important;
}

/* ─── ToS CHECKBOX ─── */
.auth-tos {
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.auth-tos label {
  font-size: 11.5px !important;
  color: #7A7290 !important;
  line-height: 1.6 !important;
}
.auth-tos a {
  color: #D4A020 !important;
}

/* ─── PHONE SELECT ─── */
.auth-country-select {
  background: rgba(6,4,14,0.7) !important;
  border: 1.5px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  color: #B8B0D4 !important;
}

/* ─── SCROLLBAR: Ultra thin ─── */
.auth-modal::-webkit-scrollbar { width: 3px !important; }
.auth-modal::-webkit-scrollbar-track { background: transparent !important; }
.auth-modal::-webkit-scrollbar-thumb {
  background: rgba(224,165,38,0.12) !important;
  border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════
   COSMIC SCANNER OVERLAY — Cinematic Upgrade
   ═══════════════════════════════════════════════════════ */

/* Backdrop: floating nebula orbs */
.cs-backdrop {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(15,10,25,0.97) 0%, rgba(5,5,8,0.99) 100%) !important;
  backdrop-filter: blur(40px) saturate(120%) !important;
}
.cs-backdrop::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  top: 20%; left: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,165,38,0.06) 0%, transparent 70%);
  filter: blur(60px);
  animation: csNebulaOrb1 15s ease-in-out infinite;
  will-change: transform;
}
.cs-backdrop::after {
  content: '';
  position: absolute;
  width: 250px; height: 250px;
  bottom: 15%; right: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,252,0.05) 0%, transparent 70%);
  filter: blur(50px);
  animation: csNebulaOrb2 18s ease-in-out infinite;
  will-change: transform;
}
@keyframes csNebulaOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.9); }
  75% { transform: translate(30px, 15px) scale(1.05); }
}
@keyframes csNebulaOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, -20px) scale(1.15); }
  66% { transform: translate(25px, 30px) scale(0.95); }
}

/* Orbital rings: intensified glow */
.cs-rings {
  width: 240px !important; height: 240px !important;
}
.cs-orbit {
  filter: drop-shadow(0 0 4px currentColor);
}

/* Center icon: radiant pulse */
.cs-center-icon {
  font-size: 46px !important;
  filter: drop-shadow(0 0 20px rgba(224,165,38,0.3));
}

/* Title: bigger, more impactful */
.cs-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 10px !important;
}

/* Steps: cinematic stagger entrance */
.cs-step {
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,0.015) !important;
  border: 1px solid transparent !important;
  transition: all 0.6s cubic-bezier(0.16,1,0.3,1) !important;
  transform: translateX(-20px) !important;
  opacity: 0 !important;
  filter: blur(4px);
}
.cs-step.active {
  color: #F0EAFF !important;
  background: rgba(224,165,38,0.05) !important;
  border-color: rgba(224,165,38,0.12) !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  filter: blur(0);
  box-shadow: 0 2px 16px rgba(224,165,38,0.06);
}
.cs-step-icon {
  font-size: 16px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #E0A526;
}
.cs-step-icon svg {
  color: #E0A526;
}

/* Progress bar: glowing leading edge */
.cs-progress {
  height: 5px !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,0.04) !important;
}
.cs-progress-fill {
  border-radius: 5px !important;
  background: linear-gradient(90deg, #E0A526, #FC5C7C) !important;
  box-shadow: 0 0 16px rgba(224,165,38,0.4), 0 0 40px rgba(224,165,38,0.15) !important;
  position: relative !important;
  transition: width 1s cubic-bezier(0.16,1,0.3,1) !important;
}
/* Glowing head particle */
.cs-progress-fill::after {
  content: '';
  position: absolute;
  right: -2px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #FFD060;
  box-shadow: 0 0 12px rgba(255,208,96,0.6), 0 0 30px rgba(224,165,38,0.3);
  opacity: 0.9;
}

/* ─── CONTEXT VARIANTS: Refined ─── */
.auth-overlay.soulsync .auth-modal {
  border-color: rgba(252,92,124,0.12) !important;
  box-shadow: 0 60px 120px -20px rgba(0,0,0,0.7), 0 0 80px rgba(252,92,124,0.04) !important;
}
.auth-overlay.soulsync .auth-cosmic-header::before {
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(252,92,124,0.5) 50%, transparent 100%),
    radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 35%, rgba(167,139,250,0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 75%, rgba(252,92,124,0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 45%, rgba(252,92,124,0.6) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 25%, rgba(167,139,250,0.5) 50%, transparent 100%) !important;
}
.auth-overlay.soulsync .auth-cta {
  background: linear-gradient(135deg, #D4406A 0%, #FC5C7C 40%, #FF8DA6 60%, #FC5C7C 80%, #D4406A 100%) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
}
.auth-overlay.soulsync .auth-center-icon::after {
  border-color: rgba(252,92,124,0.25);
}

/* ─── ACCESSIBILITY: Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .auth-modal,
  .auth-overlay.show .auth-modal {
    animation: none !important;
    filter: none !important;
    transition-duration: 0.1s !important;
  }
  .auth-center-icon,
  .auth-center-icon::after,
  .auth-mandala-svg *,
  .auth-cosmic-header::before,
  .auth-cosmic-header::after,
  .auth-shooting-star,
  .auth-cta::after,
  .cs-backdrop::before,
  .cs-backdrop::after,
  .cs-orbit,
  .cs-planet,
  .cs-center-icon,
  .cs-progress-fill::after {
    animation: none !important;
  }
  .otp-digit.filled {
    animation: none !important;
  }
  .auth-title,
  .auth-subtitle,
  .auth-step.active .auth-toggle,
  .auth-step.active .auth-field,
  .auth-step.active .auth-cta,
  .auth-step.active .auth-divider,
  .auth-step.active .auth-social-row,
  .auth-step.active .auth-trust {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ─── RESPONSIVE: Mobile ─── */
@media (max-width: 600px) {
  .auth-modal {
    border-radius: 20px !important;
    max-width: 96vw !important;
  }
  .auth-body { padding: 20px 20px 24px !important; }
  .auth-cosmic-header { height: 140px !important; border-radius: 20px 20px 0 0 !important; }
  .auth-center-icon { width: 48px !important; height: 48px !important; font-size: 20px !important; }
  .auth-mandala-svg { inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
  .auth-title { font-size: 19px !important; }
  .otp-digit { width: 44px !important; height: 52px !important; font-size: 20px !important; }
  .auth-trust { flex-wrap: wrap !important; gap: 8px !important; }
  .cs-rings { width: 180px !important; height: 180px !important; }
  .cs-title { font-size: 22px !important; }
  .cs-content { padding: 24px !important; }
}