/* Voxmind - Cognitive Conditioning Design System */
/* Phonetics-First Visual Language | Voice Transformation Platform */

/* ================================================================
   DESIGN TOKENS - ENGINEERING-READY
   ================================================================ */

:root {
  /* === COLOR TOKENS - HIGH CONTRAST === */
  
  /* Primary Background - Deep Void
     Emotional Intent: Focused immersion, endless depth
     Use: Primary canvas, speaking environments
     Never Use: During celebrations or upgrades */
  --bg-primary: #080c14;
  --bg-secondary: #0f1623;
  --bg-depth: #040609;
  --bg-surface: #141c2d;
  --bg-elevated: #1a2438;
  
  /* Neural Teal - Focus/Emphasis (HIGH CONTRAST)
     Emotional Intent: Clarity, mastery, presence
     Use: Active elements, phonetic feedback, avatar auras
     Never Use: Error states, warnings */
  --neural-500: #00e5c7;
  --neural-400: #33ffdd;
  --neural-600: #00c4a9;
  --neural-700: #009980;
  --neural-glow: rgba(0, 229, 199, 0.5);
  
  /* Electric Blue - Secondary Accent
     Emotional Intent: Progress, movement, action
     Use: CTAs, links, progress indicators */
  --electric-500: #3b82f6;
  --electric-400: #60a5fa;
  --electric-glow: rgba(59, 130, 246, 0.4);
  
  /* Sage - Rest/Listening State
     Emotional Intent: Calm acceptance, safety
     Use: Passive states, background accents, neutral feedback
     Never Use: Call-to-action buttons */
  --sage-400: #8fc9b8;
  --sage-500: #6bb09c;
  --sage-muted: rgba(139, 201, 184, 0.25);
  
  /* Gold - Reward/Progression (BRIGHTER)
     Emotional Intent: Achievement, mastery moments, transformation
     Use: Celebrations, tier badges, success states
     Never Use: During practice (too distracting) */
  --gold-400: #ffd93d;
  --gold-500: #f5c542;
  --gold-600: #d4a527;
  --gold-glow: rgba(255, 217, 61, 0.5);
  
  /* Violet - Premium/Locked States
     Emotional Intent: Aspiration, mystery, premium value
     Use: Premium badges, locked features, upgrade prompts */
  --violet-500: #a855f7;
  --violet-400: #c084fc;
  --violet-glow: rgba(168, 85, 247, 0.4);
  
  /* Rose - Soft Attention
     Emotional Intent: Gentle guidance, warmth
     Use: Subtle notifications, avatar warmth indicators
     Never Use: Errors (too harsh), during speaking */
  --rose-400: #f472b6;
  --rose-500: #ec4899;
  --rose-soft: rgba(244, 114, 182, 0.2);
  
  /* Success/Error States (HIGH CONTRAST) */
  --success-500: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.4);
  --error-500: #ef4444;
  --error-glow: rgba(239, 68, 68, 0.4);
  --warning-500: #f59e0b;
  
  /* Neutral/Muted (WIDER RANGE)
     Emotional Intent: Non-intrusive, supportive
     Use: Microcopy, secondary labels, disabled states */
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  
  /* Glass/Overlay */
  --glass-bg: rgba(17, 24, 39, 0.85);
  --glass-border: rgba(45, 212, 191, 0.15);
  --glass-blur: 20px;
  
  /* === TYPOGRAPHY TOKENS === */
  
  /* Font Families */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-phonetic: 'Noto Sans', 'Inter', system-ui, sans-serif;
  
  /* Font Sizes - Fluid Typography */
  --text-xs: 0.75rem;      /* 12px - Microcopy */
  --text-sm: 0.875rem;     /* 14px - UI labels */
  --text-base: 1rem;       /* 16px - Body */
  --text-lg: 1.125rem;     /* 18px - Emphasis */
  --text-xl: 1.25rem;      /* 20px - Subheadings */
  --text-2xl: 1.5rem;      /* 24px - Section headers */
  --text-3xl: 1.875rem;    /* 30px - Page headers */
  --text-4xl: 2.25rem;     /* 36px - Hero text */
  --text-5xl: 3rem;        /* 48px - Display */
  --text-6xl: 3.75rem;     /* 60px - Impact */
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* === SPACING TOKENS === */
  
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 1rem;        /* 16px */
  --space-lg: 1.5rem;      /* 24px */
  --space-xl: 2rem;        /* 32px */
  --space-2xl: 3rem;       /* 48px */
  --space-3xl: 4rem;       /* 64px */
  
  /* Speaking Mode Spacing - Extra breathing room */
  --space-speaking: 2.5rem;
  --space-listening: 2rem;
  
  /* === MOTION TOKENS === */
  
  --transition-fast: 150ms;
  --transition-standard: 300ms;
  --transition-slow: 500ms;
  --transition-immersive: 800ms;
  
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* === BORDER RADIUS === */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
  
  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px var(--neural-glow);
  --shadow-gold: 0 0 30px var(--gold-glow);
}

/* Light mode - for accessibility/preference */
[data-theme="light"] {
  --bg-primary: #f0fdfa;
  --bg-secondary: #ffffff;
  --bg-depth: #e0f2f1;
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(45, 212, 191, 0.2);
  --neutral-100: #134e4a;
  --neutral-200: #1e5c57;
  --neutral-400: #4a7c7b;
  --neutral-600: #6b8a89;
  --neutral-800: #f8fafc;
}

/* ================================================================
   GLOBAL RESET & BASE
   ================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Smooth transitions - SUPPRESSED during speaking mode */
*:not(.speaking-mode *) {
  transition: background-color var(--transition-standard) var(--easing-soft),
              color var(--transition-standard) var(--easing-soft),
              border-color var(--transition-standard) var(--easing-soft),
              opacity var(--transition-standard) var(--easing-soft);
}

/* Speaking mode: No distracting animations */
.speaking-mode * {
  transition: none !important;
  animation: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--bg-primary);
  color: var(--neutral-200);
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none; /* Prevent bounce on iOS */
  /* Safe area insets for iOS notch devices */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ================================================================
   MOBILE SCROLL & RESPONSIVE FIXES
   ================================================================ */

/* Ensure all images are responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Ensure main content scrolls naturally */
main {
  position: relative;
  z-index: 1;
}

/* Prevent any fixed children from blocking scroll */
.fixed, [class*="fixed"] {
  pointer-events: auto;
}

/* iOS Safari address bar collapse fix */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

/* Touch-friendly button handling */
button, .btn, a.btn, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* Prevent double-tap zoom on buttons */
.touch-manipulation {
  touch-action: manipulation;
}

/* ================================================================
   VOXMIND BACKGROUNDS
   ================================================================ */

/* Deep Void Background - Primary */
.void-bg {
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 0%, rgba(45, 212, 191, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(45, 212, 191, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-depth) 0%, var(--bg-primary) 50%, var(--bg-secondary) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Neural Particle Field */
.neural-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

.neural-field::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, var(--neural-500) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, var(--neural-500) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, var(--sage-400) 0.5px, transparent 0.5px);
  background-size: 120px 120px, 100px 100px, 80px 80px;
  animation: neuralDrift 60s linear infinite;
}

@keyframes neuralDrift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-20px, -20px); }
  100% { transform: translate(0, 0); }
}

/* ================================================================
   AVATAR PRESENTATION SYSTEM
   ================================================================ */

/* Avatar Container - Central Presence */
.avatar-presence {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Avatar Frame - Creates depth and importance */
.avatar-frame {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--neural-500), var(--sage-400));
}

.avatar-frame::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neural-glow) 0%, transparent 70%);
  animation: avatarAura 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes avatarAura {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-depth);
}

/* Avatar Info */
.avatar-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--neutral-100);
  margin-top: var(--space-md);
}

.avatar-role {
  font-size: var(--text-sm);
  color: var(--neural-500);
  margin-top: var(--space-xs);
}

/* Premium Avatar Badge */
.avatar-premium-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-gold);
}

/* Avatar Selection Card */
.avatar-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-standard) var(--easing-soft);
  backdrop-filter: blur(var(--glass-blur));
}

.avatar-card:hover {
  transform: translateY(-8px);
  border-color: var(--neural-500);
  box-shadow: var(--shadow-glow);
}

.avatar-card.selected {
  border-color: var(--neural-500);
  background: rgba(45, 212, 191, 0.1);
}

/* Avatar Coach Button - Dashboard Grid */
.avatar-coach-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: all var(--transition-standard) var(--easing-soft);
}

.avatar-coach-btn:hover {
  background: var(--glass-bg);
}

.avatar-coach-btn.ring-2 {
  background: rgba(0, 229, 199, 0.1);
}

/* Avatar Grid */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

/* ================================================================
   PRICING / TRANSFORMATION TIERS
   ================================================================ */

/* Tier Card Container */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual Tier Card */
.tier-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
  text-align: center;
  backdrop-filter: blur(var(--glass-blur));
  transition: all var(--transition-standard) var(--easing-soft);
}

.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Highlighted/Recommended Tier */
.tier-card.featured {
  border-color: var(--gold-500);
  background: linear-gradient(180deg, rgba(212, 165, 116, 0.1) 0%, var(--glass-bg) 100%);
}

.tier-card.featured::before {
  content: 'MOST CHOSEN';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--bg-depth);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

/* Tier Name */
.tier-name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--neutral-100);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Numerology Price Display */
.tier-price {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: var(--neural-500);
  line-height: 1;
  margin: var(--space-lg) 0;
}

.tier-price .currency {
  font-size: var(--text-2xl);
  vertical-align: super;
  opacity: 0.8;
}

.tier-price .period {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  font-weight: var(--font-normal);
}

/* Tier Symbolism */
.tier-symbolism {
  font-size: var(--text-sm);
  color: var(--gold-400);
  font-style: italic;
  margin-bottom: var(--space-lg);
}

/* Tier Features */
.tier-features {
  list-style: none;
  text-align: left;
  margin: var(--space-lg) 0;
}

.tier-features li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  color: var(--neutral-200);
  font-size: var(--text-sm);
}

.tier-features li::before {
  content: '✓';
  color: var(--neural-500);
  font-weight: var(--font-bold);
}

/* Avatar Unlock Preview */
.tier-avatars {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.tier-avatar-mini {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  overflow: hidden;
}

.tier-avatar-mini.locked {
  filter: grayscale(1);
  opacity: 0.5;
}

/* ================================================================
   PHONETIC FEEDBACK SYSTEM
   ================================================================ */

/* Waveform Visualization */
.waveform-container {
  position: relative;
  height: 80px;
  width: 100%;
  background: rgba(45, 212, 191, 0.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.waveform-bar {
  position: absolute;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--neural-500), var(--neural-600));
  border-radius: var(--radius-sm);
  transition: height 50ms linear;
}

/* Pitch Arc */
.pitch-arc-container {
  position: relative;
  height: 120px;
  width: 100%;
}

.pitch-arc {
  fill: none;
  stroke: var(--neural-500);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.9;
}

.pitch-arc.target {
  stroke: var(--sage-400);
  stroke-dasharray: 8 4;
  opacity: 0.4;
}

/* Rhythm Pulse */
.rhythm-pulse {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--neural-500);
  opacity: 0;
  animation: rhythmPulse 0.5s ease-out;
}

@keyframes rhythmPulse {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Stress Heatmap */
.stress-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
}

.stress-syllable {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-phonetic);
  transition: background var(--transition-standard);
}

.stress-syllable.stressed {
  background: rgba(212, 165, 116, 0.3);
  color: var(--gold-400);
}

.stress-syllable.unstressed {
  background: transparent;
  color: var(--neutral-400);
}

/* Feedback Overlay - Auto-fades */
.feedback-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  background: linear-gradient(0deg, var(--bg-depth) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-slow) var(--easing-soft);
}

.feedback-overlay.visible {
  opacity: 1;
}

/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  border: none;
  transition: all var(--transition-standard) var(--easing-soft);
  min-height: 56px;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--neural-500), var(--neural-600));
  color: var(--bg-depth);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 50px var(--neural-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--neural-500);
  border: 2px solid var(--neural-500);
}

.btn-secondary:hover {
  background: rgba(45, 212, 191, 0.1);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--bg-depth);
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 50px var(--gold-glow);
}

/* Pulsing CTA */
.btn-pulse {
  animation: btnPulse 3s ease-in-out infinite;
}

@keyframes btnPulse {
  0%, 100% { box-shadow: var(--shadow-glow); }
  50% { box-shadow: 0 0 60px var(--neural-glow); }
}

/* ================================================================
   CARDS
   ================================================================ */

.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  backdrop-filter: blur(var(--glass-blur));
  transition: all var(--transition-standard) var(--easing-soft);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--neural-500);
}

.card-glow {
  box-shadow: var(--shadow-glow);
}

/* Feature Cards */
.feature-card {
  text-align: center;
  padding: var(--space-2xl);
}

.feature-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  background: linear-gradient(135deg, var(--neural-500), var(--neural-600));
  color: var(--bg-depth);
}

.feature-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--neutral-100);
  margin-bottom: var(--space-sm);
}

.feature-desc {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  line-height: var(--leading-relaxed);
}

/* ================================================================
   NAVIGATION
   ================================================================ */

.nav-glass {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
}

.nav-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--neural-500), var(--neural-600));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-depth);
  font-size: var(--text-xl);
}

.logo-text {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--neural-500);
  letter-spacing: -0.02em;
}

/* ================================================================
   FORM ELEMENTS
   ================================================================ */

.input {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  color: var(--neutral-100);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--neural-500);
  box-shadow: 0 0 0 3px var(--neural-glow);
}

/* ================================================================
   PROGRESS INDICATORS
   ================================================================ */

.progress-ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.progress-ring-circle {
  fill: none;
  stroke: var(--glass-border);
  stroke-width: 8;
}

.progress-ring-progress {
  fill: none;
  stroke: var(--neural-500);
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset var(--transition-slow) var(--easing-soft);
}

/* Stage Indicator */
.stage-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--neutral-600);
  transition: all var(--transition-standard);
}

.stage-dot.active {
  background: var(--neural-500);
  box-shadow: 0 0 12px var(--neural-glow);
}

.stage-dot.completed {
  background: var(--gold-500);
}

.stage-connector {
  flex: 1;
  height: 2px;
  background: var(--neutral-600);
}

.stage-connector.completed {
  background: linear-gradient(90deg, var(--gold-500), var(--neural-500));
}

/* ================================================================
   BADGES & CHIPS
   ================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.badge-neural {
  background: rgba(45, 212, 191, 0.2);
  color: var(--neural-400);
  border: 1px solid rgba(45, 212, 191, 0.3);
}

.badge-gold {
  background: rgba(212, 165, 116, 0.2);
  color: var(--gold-400);
  border: 1px solid rgba(212, 165, 116, 0.3);
}

.badge-premium {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--bg-depth);
}

/* Language Pills */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--neutral-100);
  backdrop-filter: blur(8px);
  transition: all var(--transition-fast);
}

.lang-pill:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* ================================================================
   MASTERY ACKNOWLEDGMENT
   ================================================================ */

.mastery-shimmer {
  position: relative;
  overflow: hidden;
}

.mastery-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.3), transparent);
  animation: masteryShimmer 0.8s ease-out;
}

@keyframes masteryShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ================================================================
   IMMERSIVE TRANSITION
   ================================================================ */

.immersive-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-depth);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-immersive) var(--easing-soft);
}

.immersive-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ================================================================
   SPEAKING MODE RULES
   UI Suppression during vocal practice
   ================================================================ */

.speaking-mode .hide-on-speak {
  opacity: 0 !important;
  pointer-events: none !important;
}

.speaking-mode .dim-on-speak {
  opacity: 0.3 !important;
}

/* Only waveform and avatar visible during speaking */
.speaking-mode .speak-focus {
  opacity: 1 !important;
}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */

.text-neural { color: var(--neural-500); }
.text-gold { color: var(--gold-400); }
.text-sage { color: var(--sage-400); }
.text-muted { color: var(--neutral-400); }

.bg-glass { background: var(--glass-bg); }
.bg-depth { background: var(--bg-depth); }

.glow-neural { box-shadow: var(--shadow-glow); }
.glow-gold { box-shadow: var(--shadow-gold); }

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Touch-friendly */
.touch-target {
  min-height: 48px;
  min-width: 48px;
}

/* Page transitions */
.page-enter {
  animation: pageEnter 0.6s var(--easing-soft);
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.25rem;
    --text-6xl: 3rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
  }
  
  .avatar-frame {
    width: 140px;
    height: 140px;
  }
  
  .tier-grid {
    grid-template-columns: 1fr;
  }
  
  .avatar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   STAT BADGES (Dashboard)
   ================================================================ */

.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--neutral-100);
  backdrop-filter: blur(10px);
}

/* Action Cards */
.action-card {
  position: relative;
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  color: white;
  text-decoration: none;
  display: block;
  transition: all var(--transition-standard) var(--easing-soft);
  overflow: hidden;
}

.action-card:hover {
  transform: translateY(-4px) scale(1.02);
}

.action-card-teal {
  background: linear-gradient(135deg, var(--neural-500), var(--neural-600));
}

.action-card-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.action-card-pink {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.action-card-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--bg-depth);
}

/* Theme Toggle */
.theme-toggle {
  position: relative;
  width: 56px;
  height: 32px;
  background: linear-gradient(135deg, #1e3a5f, #0f172a);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition-standard);
}

.theme-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: 50%;
  transition: all var(--transition-standard);
  box-shadow: 0 0 10px var(--neural-glow);
}

[data-theme="light"] .theme-toggle {
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
}

[data-theme="light"] .theme-toggle::before {
  left: calc(100% - 28px);
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Streak Fire Animation */
.streak-fire {
  color: #f97316;
  animation: fireFlicker 1s ease-in-out infinite;
}

@keyframes fireFlicker {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.2); }
}

/* Heart Pop Animation */
.heart-pop {
  color: #ec4899;
  animation: heartPop 1.5s ease-in-out infinite;
}

@keyframes heartPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ================================================================
   STATE DESIGN SYSTEM - LOCKED/UNLOCKED/PROGRESSION
   ================================================================ */

/* === AVAILABLE / ACTIVE STATE === */
.state-active {
  opacity: 1;
  pointer-events: auto;
}

.state-active .state-icon {
  color: var(--neural-500);
}

/* === LOCKED STATE === */
.state-locked {
  position: relative;
  opacity: 0.6;
  filter: grayscale(0.3);
  pointer-events: auto;
  cursor: pointer;
}

.state-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), transparent);
  border-radius: inherit;
  pointer-events: none;
}

.state-locked .lock-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  box-shadow: 0 4px 12px var(--violet-glow);
  z-index: 10;
}

.state-locked:hover {
  opacity: 0.8;
  filter: grayscale(0.1);
  transform: translateY(-2px);
}

.state-locked:hover .lock-badge {
  animation: lockPulse 1s ease-in-out infinite;
}

@keyframes lockPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 4px 20px var(--violet-glow); }
}

/* === UNLOCKABLE STATE (Clear path forward) === */
.state-unlockable {
  position: relative;
  opacity: 0.85;
  border: 2px dashed var(--violet-500);
}

.state-unlockable::before {
  content: 'Next';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--violet-500), var(--electric-500));
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 10px;
  border-radius: 999px;
}

/* === UPCOMING STATE (Not implemented yet) === */
.state-upcoming {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.6);
}

.state-upcoming::after {
  content: 'Coming Soon';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--neutral-700);
  color: var(--neutral-400);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* === IN PROGRESS STATE === */
.state-in-progress {
  border: 2px solid var(--neural-500);
  box-shadow: 0 0 20px var(--neural-glow);
}

.state-in-progress::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--neural-400);
  animation: progressPulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes progressPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

/* === COMPLETED / MASTERED STATE === */
.state-completed {
  border: 2px solid var(--gold-500);
}

.state-completed .completion-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-depth);
  font-size: 14px;
  box-shadow: 0 4px 12px var(--gold-glow);
}

/* === PREMIUM INDICATOR === */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--bg-depth);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
}

.premium-badge i {
  font-size: 10px;
}

/* === TIER INDICATORS === */
.tier-spark { --tier-color: var(--electric-500); }
.tier-path { --tier-color: var(--violet-500); }
.tier-emergence { --tier-color: var(--gold-500); }
.tier-mastery { --tier-color: linear-gradient(135deg, var(--gold-400), var(--violet-500)); }

.tier-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--tier-color);
  color: white;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
}

/* === AVATAR STATES === */
.avatar-locked {
  filter: grayscale(0.5) brightness(0.7);
  opacity: 0.7;
}

.avatar-locked .avatar-frame {
  border-color: var(--neutral-600);
  background: linear-gradient(135deg, var(--neutral-600), var(--neutral-700));
}

.avatar-locked .avatar-frame::before {
  display: none;
}

.avatar-active .avatar-frame {
  border-color: var(--neural-500);
  background: linear-gradient(135deg, var(--neural-500), var(--neural-600));
}

.avatar-premium .avatar-frame {
  border-color: var(--gold-500);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
}

/* === PHONETIC LADDER STATES === */
.ladder-stage {
  position: relative;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 2px solid transparent;
  transition: all var(--transition-standard);
}

.ladder-stage.stage-current {
  border-color: var(--neural-500);
  background: linear-gradient(135deg, rgba(0, 229, 199, 0.1), var(--bg-surface));
  box-shadow: 0 0 20px var(--neural-glow);
}

.ladder-stage.stage-completed {
  border-color: var(--gold-500);
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.1), var(--bg-surface));
}

.ladder-stage.stage-locked {
  opacity: 0.5;
  border-color: var(--neutral-700);
}

.ladder-stage.stage-next {
  border: 2px dashed var(--violet-500);
  opacity: 0.8;
}

/* === IMMERSION STATE INDICATORS === */
.immersion-ready {
  position: relative;
}

.immersion-ready::after {
  content: 'Ready';
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--success-500);
  color: white;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.immersion-locked::after {
  content: 'Premium';
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--violet-500);
  color: white;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.immersion-beta::after {
  content: 'Beta';
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--warning-500);
  color: var(--bg-depth);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

/* === LANGUAGE TAB & AVATAR THUMBNAIL SYSTEM === */

.language-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
}

/* Avatar Thumbnail Grid */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-md);
}

/* State Classes for Avatar Thumbnails */
.avatar-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-surface);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-standard);
  position: relative;
}

.avatar-thumb.state-available {
  border-color: var(--glass-border);
}

.avatar-thumb.state-available:hover {
  border-color: var(--neural-500);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 229, 199, 0.2);
}

.avatar-thumb.state-locked {
  cursor: not-allowed;
  border-color: var(--neutral-700);
}

.avatar-thumb.state-locked .avatar-thumb-img {
  filter: grayscale(0.4) brightness(0.7);
  opacity: 0.6;
}

.avatar-thumb.state-unlockable {
  border: 2px dashed var(--violet-500);
  opacity: 0.85;
}

.avatar-thumb.state-unlockable:hover {
  border-color: var(--violet-400);
  background: rgba(168, 85, 247, 0.1);
}

.avatar-thumb.state-next {
  border: 2px dashed var(--neural-500);
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: var(--neural-500); }
  50% { border-color: var(--neural-400); }
}

.avatar-thumb.state-selected {
  border-color: var(--neural-500);
  background: linear-gradient(135deg, rgba(0, 229, 199, 0.15), var(--bg-surface));
  box-shadow: 0 0 20px var(--neural-glow);
}

/* Avatar Thumbnail Image Container */
.avatar-thumb-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--space-sm);
  position: relative;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lock Overlay for Thumbnails */
.avatar-thumb .lock-badge {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.avatar-thumb .lock-badge i {
  color: white;
  font-size: 1rem;
}

/* Avatar Thumbnail Labels */
.avatar-thumb-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-top: 4px;
}

.avatar-thumb-role {
  font-size: 0.625rem;
  color: var(--neutral-400);
  text-align: center;
}

/* Tier Badge on Thumbnails */
.avatar-thumb .tier-tag {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.tier-tag.tier-free {
  background: var(--sage-muted);
  color: var(--sage-500);
}

.tier-tag.tier-spark {
  background: rgba(255, 217, 61, 0.2);
  color: var(--gold-400);
}

.tier-tag.tier-path {
  background: var(--violet-glow);
  color: var(--violet-400);
}

.tier-tag.tier-emergence {
  background: rgba(236, 72, 153, 0.2);
  color: var(--rose-400);
}

.tier-tag.tier-mastery {
  background: linear-gradient(135deg, rgba(255, 217, 61, 0.3), rgba(168, 85, 247, 0.3));
  color: var(--gold-400);
}

/* Language Flag Display */
.lang-flags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.lang-flag {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.lang-flag.flag-muted {
  opacity: 0.5;
  filter: grayscale(0.3);
}

.lang-flag-count {
  font-size: 10px;
  color: var(--neutral-400);
  background: var(--bg-surface);
  padding: 2px 5px;
  border-radius: 4px;
}

/* Language Card/Tab */
.lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-standard);
}

.lang-card:hover {
  border-color: var(--neural-500);
  transform: translateY(-2px);
}

.lang-card.active {
  border-color: var(--neural-500);
  background: linear-gradient(135deg, rgba(0, 229, 199, 0.1), var(--bg-card));
  box-shadow: 0 0 20px var(--neural-glow);
}

.lang-card-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.lang-card-native {
  font-size: 0.75rem;
  color: var(--neutral-400);
}