/* Mercury Design System */
:root {
  /* Color Palette */
  --primary-orange: #FF5A3D;
  --bg-white: #FFFFFF;
  --border: #ECECEC;
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #A1A1AA;
  --progress-purple: #7C5CFC;
  --success-green: #22C55E;
  --warning-amber: #F59E0B;

  /* Typography */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Spacing */
  --space-outer: 24px;
  --space-section: 28px;
  --space-card: 20px;
  --space-grid: 16px;

  /* Radius */
  --radius-btn: 18px;
  --radius-card: 24px;
  --radius-cat: 20px;
  --radius-badge: 999px;

  /* Shadows */
  --shadow-soft: 0 8px 30px rgba(0,0,0,0.06);

  /* Bottom-nav clearance */
  --nav-h: calc(env(safe-area-inset-bottom, 0px) + 72px);
  --nav-clear: calc(var(--nav-h) + 16px);

  /* ===== Legacy token aliases (lesson/feedback/nav screens still use these) ===== */
  --ink: #14132A;
  --ink-soft: #252343;
  --ink-lift: #2E2B4D;
  --bg: #F4F1FA;
  --card: #FFFFFF;
  --coral: #FF5A3D;
  --coral-deep: #E8492C;
  --amber: #F59E0B;
  --mint: #22C55E;
  --mint-deep: #12A267;
  --lilac: #7C5CFC;
  --lilac-bg: #EEEAF8;
  --lilac-bg2: #E6E1F4;
  --hair: #ECECEC;
  --text: #1D1D1F;
  --sec: #6E6E73;
  --muted: #A1A1AA;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* lock to dynamic viewport on mobile so iOS browser chrome doesn't hide content */
}
button { font-family: inherit; }

/* Phone frame container — fills dynamic viewport, capped on desktop */
.device {
  position: relative;
  width: 100vw;
  height: 100vh;          /* fallback */
  height: 100dvh;         /* dynamic viewport — respects browser chrome on iOS */
  max-width: 430px;
  margin: 0 auto;
  background: var(--ink);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--ink);
  animation: fadeIn 0.3s ease;
  overflow: hidden;
}
.screen.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.hidden { display: none !important; }

/* ============== Shared primitives ============== */
.cta {
  width: 100%;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 17px 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(255,91,62,0.42);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform 0.12s, filter 0.12s;
}
.cta:active { transform: scale(0.98); }
.arrow { font-size: 20px; line-height: 1; }

.text-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.72);
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}
.text-btn:hover { color: #fff; }

/* ============== SPLASH SCREEN ============== */
.intro {
  background: #000;
  /* NB: do not set position here — .screen already provides
     position:absolute; inset:0 so the section fills the device. */
}

.splash-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none; /* taps fall through to the overlay, which triggers play */
}
/* Hide iOS Safari's native "tap to play" button overlay so a blocked autoplay
   shows the frozen first frame (then our JS plays it on the first tap anywhere)
   instead of an intrusive ▶ control. */
.splash-bg-video::-webkit-media-controls,
.splash-bg-video::-webkit-media-controls-start-playback-button,
.splash-bg-video::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

.splash-overlay {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) clamp(20px, 6vw, 28px) calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: linear-gradient(180deg,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.05) 28%,
    rgba(10,8,12,0.55) 62%,
    rgba(10,8,12,0.9) 100%);
  overflow: hidden;
}

/* ---- Logo pill ---- */
.splash-logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: rgba(120, 120, 135, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--radius-badge);
  flex-shrink: 0;
}

.splash-logo-badge {
  width: 34px;
  height: 34px;
  background: var(--primary-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 90, 61, 0.45);
}

.splash-logo-text {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.2px;
}

/* Pushes the hero block down to the lower half, over the video */
.splash-spacer {
  flex: 1;
  min-height: 24px;
}

/* ---- Hero: mic + headline + subtext ---- */
.splash-hero {
  text-align: center;
  color: white;
  width: 100%;
}

.splash-mic-box {
  width: clamp(64px, 19vw, 84px);
  height: clamp(64px, 19vw, 84px);
  margin: 0 auto clamp(18px, 5vw, 28px);
  background: rgba(20, 16, 20, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  box-shadow: 0 20px 50px -12px rgba(255, 90, 61, 0.75);
}

.splash-mic-box::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 14px;
  background: var(--primary-orange);
  filter: blur(16px);
  opacity: 0.85;
  border-radius: 50%;
  z-index: -1;
}

.splash-mic-icon {
  width: clamp(30px, 9vw, 38px);
  height: clamp(30px, 9vw, 38px);
  color: var(--primary-orange);
  filter: drop-shadow(0 0 8px rgba(255, 90, 61, 0.6));
}

.splash-headline {
  font-family: var(--display);
  font-size: clamp(28px, 8.6vw, 44px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -1px;
  margin: 0 0 clamp(10px, 3vw, 16px);
  color: white;
}

.splash-headline-accent {
  background: linear-gradient(100deg, #FF7A3D 0%, #FF5A3D 60%, #E8492C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary-orange);
}

.splash-subtext {
  font-size: clamp(14px, 4.3vw, 18px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  font-weight: 400;
}

/* ---- Features row with dividers ---- */
.splash-features {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: clamp(22px, 6.5vw, 44px);
}

.feature-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: white;
  text-align: center;
  padding: 0 6px;
  position: relative;
}

.feature-item + .feature-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.feature-icon {
  width: clamp(44px, 13vw, 52px);
  height: clamp(44px, 13vw, 52px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon svg {
  width: clamp(22px, 6.5vw, 26px);
  height: clamp(22px, 6.5vw, 26px);
}

.feature-icon-orange { color: var(--primary-orange); }
.feature-icon-purple { color: #8B6FFF; }

.feature-label {
  font-size: clamp(13px, 3.8vw, 15px);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.feature-sub {
  font-size: clamp(11px, 3.2vw, 13px);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

/* ---- Footer: CTA + login ---- */
.splash-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3.5vw, 16px);
  width: 100%;
  margin-top: clamp(22px, 6.5vw, 44px);
}

.splash-cta {
  width: 100%;
  background: linear-gradient(180deg, #FF7A3D 0%, #FF5A3D 100%);
  color: white;
  border: none;
  border-radius: var(--radius-badge);
  padding: clamp(16px, 4.6vw, 20px) 24px;
  font-family: var(--display);
  font-size: clamp(17px, 5vw, 19px);
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.2s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 16px 40px -8px rgba(255, 90, 61, 0.7);
}

.splash-cta:active {
  transform: scale(0.98);
}

.splash-arrow {
  font-size: 22px;
  line-height: 1;
}

.splash-login-link {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  font-family: var(--body);
  cursor: pointer;
  padding: 4px;
  text-align: center;
}

.splash-login-link strong {
  color: var(--primary-orange);
  font-weight: 700;
}

/* ============== LESSON — Situations panel ============== */
.panel[data-panel="situations"] {
  position: absolute; inset: 0;
  background: #000;
  color: #fff;
  font-family: var(--body);
  overflow: hidden;
}
.panel[data-panel="situations"].hidden { display: none; }

.reel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 0;
}

.top-scrim {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(8,7,20,0.65) 0%, rgba(8,7,20,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.bottom-scrim {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 440px;
  background: linear-gradient(0deg, rgba(8,7,20,0.86) 6%, rgba(8,7,20,0.5) 42%, rgba(8,7,20,0) 100%);
  z-index: 1;
  pointer-events: none;
}

.close-glass {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 16px;
  z-index: 6;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(20,19,42,0.34);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.top-tabs {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 22px);
  left: 0; right: 0;
  z-index: 5;
  display: flex; justify-content: center;
  gap: 26px;
  pointer-events: none;
}
.tab {
  pointer-events: auto;
  background: none; border: none;
  cursor: pointer;
  padding: 2px 0;
  position: relative;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: rgba(255,255,255,0.52);
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.tab.active { color: #fff; }
.tab .tab-dot {
  display: none;
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
}
.tab.active .tab-dot { display: block; }
.tab:disabled { opacity: 0.6; cursor: default; }
.tab.has-badge::after {
  content: "";
  position: absolute;
  top: -2px; right: -10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(255,91,62,0.7);
  animation: pulse-dot 1.2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(255,91,62,0.6); }
  100% { box-shadow: 0 0 0 8px rgba(255,91,62,0); }
}

/* Location row + countdown */
.loc-row {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 76px);
  left: 16px; right: 16px;
  z-index: 5;
  display: flex; align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.loc-pin { font-size: 14px; }
.loc-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}
.loc-tag { color: rgba(255,255,255,0.66); }

.countdown-pill {
  position: absolute;
  /* Sits under the watch-prompt-card, horizontally centered */
  top: calc(env(safe-area-inset-top, 0px) + 270px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: var(--coral, #FF5B3E);
  color: #fff;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14.5px;
  box-shadow: 0 10px 24px rgba(255,91,62,0.5);
  display: inline-flex; align-items: center; gap: 8px;
}
.countdown-pill::before {
  content: '🎙';
  font-size: 13px;
}
.countdown-pill.hidden { display: none; }

/* Right rail */
.right-rail {
  position: absolute;
  right: 14px;
  top: 44%;
  z-index: 5;
  display: flex; flex-direction: column;
  gap: 16px;
}
.rail-item {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 5px;
}
.glass-circle {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(20,19,42,0.34);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s;
}
.glass-circle:active { transform: scale(0.92); }
.rail-label {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* YOUR TURN sticker prompt */
.sticker-prompt {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 144px);
  left: 0; right: 0;
  z-index: 4;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}
.sticker-prompt:not(.hidden) { display: flex; }
.sticker-prompt .sticker-label,
.sticker-prompt .sticker-pill,
.sticker-prompt .skip-link { pointer-events: auto; }
.sticker-label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.sticker-pill {
  background: var(--coral);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1.12;
  text-align: center;
  padding: 12px 22px;
  border-radius: 20px;
  letter-spacing: -0.3px;
  box-shadow: 0 14px 30px rgba(255,91,62,0.45);
  animation: sticker-glow 2.2s ease-in-out infinite;
}
@keyframes sticker-glow {
  0%, 100% { box-shadow: 0 10px 24px rgba(255,91,62,0.4); }
  50% { box-shadow: 0 14px 40px rgba(255,91,62,0.6), 0 0 60px rgba(255,91,62,0.3); }
}
.skip-link {
  margin-top: 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  opacity: 0.7;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: opacity 0.2s;
  font-family: var(--body);
}
.skip-link:hover { opacity: 1; }

/* Bottom dock */
.bottom-dock {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  padding: 0 22px var(--nav-clear);
  display: flex; flex-direction: column;
  align-items: center;
}

.watch-row {
  width: 100%;
  display: flex; align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.watch-row.hidden { display: none; }
.watch-text {
  font-family: var(--body);
  font-weight: 600;
  font-size: 14.5px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.progress-track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--coral);
  border-radius: 999px;
  transition: width 0.1s linear;
}

/* Describe state */
.describe-col {
  display: flex; flex-direction: column;
  align-items: center;
  width: 100%;
}
.describe-col.hidden { display: none; }

.waveform {
  height: 40px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 3.5px;
}
.waveform.hidden { display: none; }
.waveform .bar {
  width: 4px;
  border-radius: 999px;
  background: var(--coral);
  height: 25%;
  animation: wave 0.9s infinite ease-in-out;
}
@keyframes wave {
  0%, 100% { height: 25%; opacity: 0.55; }
  50% { height: 90%; opacity: 1; }
}

.rec-timer {
  display: flex; align-items: center; gap: 7px;
  margin-top: 7px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
}
.rec-timer.hidden { display: none; }
.rec-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--coral);
  animation: pulse-dot 1s infinite;
}

.describe-hint {
  font-size: 14.5px;
  line-height: 1.4;
  text-align: center;
  margin: 8px 0 14px;
  max-width: 290px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.mic-hit {
  position: relative;
  width: 132px; height: 96px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mic-pulse {
  position: absolute;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0;
  pointer-events: none;
}
.mic-hit.recording .mic-pulse {
  opacity: 0.22;
  animation: mic-pulse 1.8s ease-out infinite;
}
.mic-hit.recording .mic-pulse.delay {
  opacity: 0.15;
  animation-delay: 0.9s;
}
@keyframes mic-pulse {
  0% { transform: scale(0.9); opacity: 0.3; }
  100% { transform: scale(1.7); opacity: 0; }
}
.mic-circle {
  width: 82px; height: 82px;
  border-radius: 50%;
  background: var(--coral);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,0.92);
  box-shadow: 0 12px 30px rgba(255,91,62,0.5);
  transition: width 0.2s, height 0.2s;
}
.mic-hit.recording .mic-circle {
  width: 88px; height: 88px;
}
.mic-icon { font-size: 32px; line-height: 1; }

.mic-cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  margin-top: 10px;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.glass-pill {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(20,19,42,0.34);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.kbd-glyph { font-size: 14px; }

.live-transcript {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  text-align: center;
  max-width: 320px;
  max-height: 48px;
  overflow-y: auto;
}

/* Recorded state */
.recorded-col {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: rise 0.3s ease;
}
.recorded-col.hidden { display: none; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.got-row {
  display: flex; align-items: center; gap: 9px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.got-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mint);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

/* Type state */
.type-col {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 10px;
}
.type-col.hidden { display: none; }
.type-col textarea {
  width: 100%;
  min-height: 96px;
  background: rgba(20,19,42,0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  color: #fff;
  padding: 12px;
  font-size: 14.5px;
  font-family: inherit;
  resize: none;
}
.type-actions { display: flex; gap: 10px; }
.type-actions .glass-pill { margin-top: 0; flex: 1; justify-content: center; }
.type-actions .cta { flex: 1.5; padding: 13px; font-size: 16px; }

/* ============== LESSON — Feedback panel (light sheet) ============== */
.panel[data-panel="feedback"] {
  position: absolute; inset: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 10;
}
.panel[data-panel="feedback"].hidden { display: none; }

.fb-sheet {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.fb-head {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 22px 12px;
  display: flex; align-items: center;
  position: relative;
}
.fb-eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--lilac);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.lilac-close {
  margin-left: auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--lilac-bg);
  border: none;
  color: var(--sec);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.fb-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 22px 18px;
}

.fb-loc-chip {
  display: inline-flex; align-items: center;
  gap: 7px;
  background: rgba(255,91,62,0.14);
  color: var(--coral);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.fb-h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
}

/* ---- Feedback sub-tabs (two windows) ---- */
.fb-subtabs {
  display: flex;
  gap: 6px;
  background: var(--lilac-bg);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 16px;
}
.fb-subtab {
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 11px 10px;
  border-radius: 11px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--sec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}
.fb-subtab .sub-ic { font-size: 14px; }
.fb-subtab.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(20,19,42,0.08);
}

.fb-window.hidden { display: none; }

/* ---- Window 1: Mentor's Narrative (vertical 9:16 reel) ---- */
.mentor-reel {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: calc(100dvh - 240px);
  margin: 0 auto;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(20,19,42,0.25);
}
.mentor-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.mentor-top-scrim {
  position: absolute; top: 0; left: 0; right: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
}
.mentor-bot-scrim {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 56%;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 12%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
}
.mentor-top {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
}
.mentor-eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.mentor-duration {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'ui-monospace', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.4px;
}
.mentor-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding-left: 4px;
}
.mentor-play.hidden { display: none; }
.mentor-caption {
  position: absolute;
  bottom: 22px; left: 18px; right: 18px;
  z-index: 3;
  color: #fff;
}
.mentor-label {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  box-shadow: 0 6px 14px rgba(255,91,62,0.45);
}
.mentor-text {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  max-height: 26vh;
  overflow-y: auto;
  padding-right: 4px;
}
.mentor-text::-webkit-scrollbar { width: 3px; }
.mentor-text::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.mentor-progress {
  position: absolute;
  bottom: 8px; left: 14px; right: 14px;
  z-index: 3;
  height: 3px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  overflow: hidden;
}
.mentor-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--coral);
  border-radius: 999px;
  transition: width 0.1s linear;
}

/* Section headers — Mentor's Narrative / Mercury AI Feedback */
.fb-section-head {
  display: flex; align-items: center;
  gap: 12px;
  padding: 6px 4px;
  margin: 4px 0 14px;
}
.fb-section-head + .fb-section-head { margin-top: 22px; }
.ring-row + .fb-section-head,
.fb-card + .fb-section-head,
.fb-tip + .fb-section-head {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}
.fb-section-ic {
  width: 42px; height: 42px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--coral), var(--amber));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(255,91,62,0.28);
}
.fb-section-eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--lilac);
}
.fb-section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--text);
  line-height: 1.1;
  margin-top: 2px;
}

/* Keyword card (separate, in Mercury AI section) */
.fb-card.kw-card .kw-row + .kw-row { margin-top: 12px; }
.fb-card.kw-card .kw-row-head {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--sec);
  display: block;
  margin-bottom: 6px;
}
.fb-card.kw-card .kw-chip.good { background: rgba(25,184,119,0.18); color: var(--mint-deep); }
.fb-card.kw-card .kw-chip.bad { background: rgba(232,73,44,0.14); color: var(--coral-deep); }

/* Score rings */
.ring-row {
  display: flex; gap: 11px;
  margin-bottom: 18px;
}
.ring-card {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 16px 6px 14px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(20,19,42,0.05);
  position: relative;
}
.ring {
  width: 78px; height: 78px;
  display: block;
  margin: 0 auto;
}
.ring-track {
  fill: none;
  stroke: #EFEAF6;
  stroke-width: 8;
}
.ring-fill {
  fill: none;
  stroke: var(--c, var(--coral));
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 207.345;
  stroke-dashoffset: 207.345;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.8s ease;
}
.ring-pct {
  position: absolute;
  top: 39%; left: 0; right: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}
.ring-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  color: var(--sec);
  margin-top: 7px;
}

/* You said card */
.fb-card { background: #fff; border-radius: 18px; padding: 18px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(20,19,42,0.04); }
.you-said { border-left: 4px solid var(--coral); }
.you-said-head {
  display: flex; align-items: center; gap: 8px;
  color: var(--coral);
  font-weight: 700;
  font-size: 14px;
}
.ic-spk { font-size: 14px; }
.you-said-quote {
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.4;
  margin: 10px 0 12px;
}
.issue-pill {
  display: inline-block;
  background: rgba(255,91,62,0.14);
  color: var(--coral);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
}

/* Model card */
.fb-card.model {
  background: linear-gradient(150deg, var(--ink-lift), var(--ink));
  color: #fff;
  box-shadow: 0 14px 30px rgba(20,19,42,0.2);
  padding: 22px 20px;
}
.model-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--coral);
  margin-bottom: 12px;
}
.model-text {
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 16px;
  font-weight: 500;
}

.kw-block { margin: 10px 0 14px; }
.kw-row { margin-bottom: 10px; }
.kw-row-head {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: 6px;
}
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.kw-chip.good {
  background: rgba(25,184,119,0.2);
  color: #6ee7a7;
}
.kw-chip.bad {
  background: rgba(255,107,107,0.2);
  color: #ffb4b4;
}

.model-video-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
  margin-top: 10px;
}
.model-video-wrap video {
  position: static;
  width: 100%; height: 100%;
}
.model-vid-cap {
  position: absolute;
  bottom: 8px; left: 10px;
  background: rgba(0,0,0,0.5);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}

/* Quick tip */
.fb-tip {
  background: var(--lilac-bg);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.bulb { font-size: 22px; line-height: 1; }
.tip-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
}
.tip-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
  margin-top: 4px;
}

/* Sticky CTA */
.fb-sticky {
  padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: var(--bg);
  border-top: 1px solid var(--hair);
}
.cta-row {
  display: flex; gap: 10px;
  padding: 0;
  background: none;
  box-shadow: none;
}
.ghost-inline {
  flex: 1;
  background: transparent;
  color: var(--coral);
  border: 1.6px solid #F1C7BD;
  border-radius: 18px;
  padding: 15px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.cta-main {
  flex: 1.5;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 17px 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(255,91,62,0.4);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

.footer-crumb {
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  pointer-events: none;
  /* Sit below the overlay panels (feedback/passive, z 10) so it only shows
     on the situations view where the dark video is the background. */
  z-index: 1;
}

/* ============== ANALYZING (Mercury AI thinking) ============== */
#analyzingScreen {
  background: linear-gradient(180deg, #1B1A36 0%, #0C0B1C 100%);
  color: #fff;
  justify-content: center;
  align-items: center;
  padding: 0 38px;
  text-align: center;
}
.analyzing-wrap {
  display: flex; flex-direction: column;
  align-items: center;
  width: 100%;
}
.analyzing-orb {
  position: relative;
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 32px;
}
.analyzing-orb .ao-pulse {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--coral, #FF5B3E);
  opacity: 0.16;
  animation: ao-pulse 1.8s ease-out infinite;
}
@keyframes ao-pulse {
  0% { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}
.analyzing-orb .ao-spin {
  position: absolute;
  width: 122px; height: 122px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--coral, #FF5B3E);
  animation: ao-spin 0.8s linear infinite;
}
@keyframes ao-spin { to { transform: rotate(360deg); } }
.analyzing-orb .ao-core {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4680, #252343);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.analyzing-eyebrow {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--coral, #FF5B3E);
  margin-bottom: 13px;
}
.analyzing-msg {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  margin: 0 0 28px;
  min-height: 60px;
  max-width: 300px;
  transition: opacity 0.18s ease;
}
.analyzing-dots {
  display: flex;
  gap: 9px;
}
.analyzing-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.3s;
}
.analyzing-dots span.lit {
  background: var(--coral, #FF5B3E);
}

/* ============== DONE ============== */
#doneScreen {
  background: var(--bg);
  color: var(--text);
  justify-content: center;
  align-items: center;
  padding: 30px;
}
.done-card {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 320px;
}
.big-emoji { font-size: 64px; }
.done-card h2 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
}
.done-card p { color: var(--sec); line-height: 1.5; font-size: 15px; }
.done-card .cta { margin-top: 16px; }
.muted { color: var(--sec); }

/* ============== FEEDBACK V2 ============== */

/* Attempt 2+ improvement banner */
.improved-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  background: linear-gradient(120deg, rgba(25,184,119,0.16), rgba(25,184,119,0.05));
  border: 1px solid rgba(25,184,119,0.32);
  border-radius: 15px;
  padding: 12px 14px;
  margin-bottom: 14px;
  animation: ib-rise 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.improved-banner.hidden { display: none; }
@keyframes ib-rise {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.improved-banner .ib-ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #19B877;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
}
.ib-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 14.5px;
  color: #127049;
}
.ib-sub {
  font-size: 12px;
  color: #3C6B53;
  margin-top: 1px;
}

/* Ring delta (under each ring on attempt 2+) */
.ring-delta {
  margin-top: 6px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ring-delta.hidden { display: none; }
.ring-delta .rd-up {
  display: inline-flex; align-items: center;
  gap: 3px;
  background: rgba(25,184,119,0.13);
  border-radius: 999px;
  padding: 3px 8px;
  color: #12A267;
  font-weight: 800;
  font-size: 11px;
}
.ring-delta .rd-prev {
  font-size: 10px;
  color: var(--sec, #9A95AD);
}

/* New "You said" card with vocab/connector suggestion pills */
.fb-card.you-said-v2 {
  background: #fff;
  border-left: 4px solid var(--coral, #FF5B3E);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(20,19,42,0.04);
  margin-bottom: 14px;
}
.you-said-v2 .ys-head {
  display: flex; align-items: center;
  gap: 8px;
  color: var(--coral, #FF5B3E);
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.you-said-v2 .ys-spk { font-size: 15px; }
.you-said-v2 .ys-quote {
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.4;
  margin: 9px 0 12px;
  color: var(--text, #1B1A2E);
}
.you-said-v2 .ys-pills {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.ys-pill {
  display: inline-flex; align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12.5px;
  padding: 6px 11px;
  border-radius: 999px;
}
.ys-pill-vocab {
  background: rgba(255,91,62,0.14);
  color: var(--coral, #FF5B3E);
}
.ys-pill-conn {
  background: #EEEAF8;
  color: #6E5FB8;
}

/* Captured / Missed — two side-by-side mini cards */
.kw-pair {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.kw-mini {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}
.kw-mini-head {
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 9px;
}
.kw-mini.good .kw-mini-head { color: #12A267; }
.kw-mini.bad .kw-mini-head { color: #E8492C; }
.kw-mini-chips {
  display: flex; flex-wrap: wrap;
  gap: 6px;
}
.kw-mini-chips .chip {
  font-weight: 600;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
}
.kw-mini.good .kw-mini-chips .chip {
  background: rgba(25,184,119,0.12);
  color: #12A267;
}
.kw-mini.bad .kw-mini-chips .chip {
  background: rgba(232,73,44,0.10);
  color: #E8492C;
}

/* Mentor narrative — video card (rectangular, not 9:16) */
.mentor-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: #14132A;
  box-shadow: 0 14px 30px rgba(20,19,42,0.2);
  margin-bottom: 14px;
}
.mentor-card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ===== Audio-only mentor stage (waveform stands in for video) ===== */
.mentor-audio-stage {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(120% 120% at 50% 25%, #2A2748 0%, #14132A 70%);
  z-index: 1;
}
.mentor-card.is-audio .mentor-audio-stage { display: flex; }
.mentor-card.is-audio .mentor-card-video { visibility: hidden; }
.mentor-audio-stage .maw {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 64px;
}
.mentor-audio-stage .maw i {
  width: 5px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FF7A4E, var(--coral));
  animation: maw-bounce 1s ease-in-out infinite;
}
.mentor-audio-stage .maw i:nth-child(odd)  { animation-duration: 0.9s; }
.mentor-audio-stage .maw i:nth-child(3n)   { animation-duration: 1.15s; }
.mentor-audio-stage .maw i:nth-child(1){animation-delay:0s}
.mentor-audio-stage .maw i:nth-child(2){animation-delay:.08s}
.mentor-audio-stage .maw i:nth-child(3){animation-delay:.16s}
.mentor-audio-stage .maw i:nth-child(4){animation-delay:.24s}
.mentor-audio-stage .maw i:nth-child(5){animation-delay:.32s}
.mentor-audio-stage .maw i:nth-child(6){animation-delay:.40s}
.mentor-audio-stage .maw i:nth-child(7){animation-delay:.48s}
.mentor-audio-stage .maw i:nth-child(8){animation-delay:.40s}
.mentor-audio-stage .maw i:nth-child(9){animation-delay:.32s}
.mentor-audio-stage .maw i:nth-child(10){animation-delay:.24s}
.mentor-audio-stage .maw i:nth-child(11){animation-delay:.16s}
.mentor-audio-stage .maw i:nth-child(12){animation-delay:.08s}
.mentor-audio-stage .maw i:nth-child(13){animation-delay:.16s}
.mentor-audio-stage .maw i:nth-child(14){animation-delay:.24s}
@keyframes maw-bounce {
  0%, 100% { height: 14px; opacity: 0.7; }
  50%      { height: 56px; opacity: 1; }
}
.mentor-audio-label {
  color: rgba(255,255,255,0.9);
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.mentor-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,42,0.1), rgba(20,19,42,0.5));
  pointer-events: none;
}
.mentor-card-chip {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
}
.mentor-card-time {
  position: absolute;
  bottom: 12px; right: 14px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: 6px;
}
.mentor-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding-left: 3px;
}
.mentor-card-play.hidden { display: none; }
.mentor-card-progress {
  position: absolute;
  bottom: 8px; left: 12px; right: 12px;
  height: 3px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  overflow: hidden;
}
.mentor-card-progress-fill {
  height: 100%; width: 0%;
  background: var(--coral, #FF5B3E);
  border-radius: 999px;
  transition: width 0.1s linear;
}

/* Timecoded caption cards */
.captions-list {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.caption-card {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(20,19,42,0.04);
}
.caption-num {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: rgba(255,91,62,0.14);
  color: var(--coral, #FF5B3E);
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.caption-body { flex: 1; }
.caption-tc {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--sec, #9A95AD);
}
.caption-x {
  margin: 2px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text, #1B1A2E);
}

/* Natural model answer (dark card) */
.model-answer-card {
  background: linear-gradient(150deg, #2E2B4D, #14132A);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 14px 30px rgba(20,19,42,0.22);
  color: #fff;
  margin-bottom: 14px;
}
.model-answer-eyebrow {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--coral, #FF5B3E);
  margin-bottom: 11px;
}
.model-answer-text {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}
.model-answer-text b {
  color: var(--coral, #FF5B3E);
  font-weight: 800;
}
.model-answer-foot {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin: 13px 0 0;
}

/* Sticky bottom with 2 buttons */
.fb-sticky.two-btn {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.fb-sticky.two-btn .cta { flex: 1.65; }
.btn-redescribe {
  flex: 1;
  border: 1.6px solid var(--coral, #FF5B3E);
  background: #fff;
  cursor: pointer;
  border-radius: 16px;
  padding: 16px 8px;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--coral, #FF5B3E);
  display: flex;
  align-items: center; justify-content: center;
  gap: 7px;
  transition: transform 0.1s;
}
.btn-redescribe:active { transform: scale(0.98); }

/* ============== ONBOARDING (new 5-screen flow) ============== */

/* Shared light-theme onboard screens (Login / OTP / Details) */
.screen.light.onboard {
  background: #fff;
  color: #14132A;
}
.screen.onboard {
  display: flex;
  flex-direction: column;
}
.onboard-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
  position: relative;
}
.onboard-topbar.with-back .ob-back { justify-self: start; }
.onboard-topbar .ob-icon {
  justify-self: start;
  font-size: 22px;
}
.onboard-topbar .ob-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 19px;
  color: #14132A;
  letter-spacing: -0.2px;
  text-align: center;
}
.onboard-topbar .ob-help {
  justify-self: end;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  color: #615C77;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.onboard-topbar .ob-back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  border: none;
  color: #14132A;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboard-topbar .ob-spacer { width: 30px; }

.onboard-body {
  flex: 1;
  padding: 18px 24px calc(env(safe-area-inset-bottom, 0px) + 26px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.onboard-body::-webkit-scrollbar { display: none; }

.onboard-h1 {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.5px;
  margin: 4px 0 8px;
  text-align: center;
  color: #14132A;
  line-height: 1.15;
}
.onboard-h1.left { text-align: left; }
.onboard-sub {
  font-size: 14.5px;
  line-height: 1.45;
  color: #615C77;
  margin: 0 0 24px;
  text-align: center;
}
.onboard-sub.left { text-align: left; }

.ob-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #615C77;
  margin: 12px 0 6px;
  text-transform: uppercase;
}

.ob-input {
  width: 100%;
  background: #F5F2FA;
  border: 1.5px solid #E8E2F1;
  border-radius: 12px;
  padding: 14px 14px;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: #14132A;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.ob-input:focus {
  border-color: var(--coral, #FF5B3E);
  background: #fff;
}
.ob-input::placeholder { color: #B0AAC2; }
.ob-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A95AD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.row2 {
  display: flex;
  gap: 10px;
}
.row2-col { display: flex; flex-direction: column; }
.row2-col.small { width: 90px; }
.row2-col.grow { flex: 1; }

.gender-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.gender-pill {
  flex: 1;
  background: #fff;
  border: 1.5px solid #E8E2F1;
  border-radius: 12px;
  padding: 11px 6px;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 600;
  font-size: 13px;
  color: #615C77;
  cursor: pointer;
  transition: all 0.15s;
}
.gender-pill.active {
  background: rgba(255,91,62,0.10);
  border-color: var(--coral, #FF5B3E);
  color: var(--coral, #FF5B3E);
  font-weight: 700;
}

.onboard-spacer { flex: 1; min-height: 14px; }

.onboard-footer {
  font-size: 11px;
  color: #9A95AD;
  line-height: 1.45;
  text-align: center;
  margin-top: 18px;
}
.onboard-footer strong { color: #615C77; font-weight: 700; }

/* Coral CTA used across onboarding */
.cta-onboard {
  width: 100%;
  background: var(--coral, #FF5B3E);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 16px 18px;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.1px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255,91,62,0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  transition: transform 0.1s;
}
.cta-onboard:active { transform: scale(0.98); }
.cta-onboard .arrow { font-weight: 700; }

/* Splash redesign (new copy + Continue + Log in link) */
.splash-brand-pill {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top: calc(env(safe-area-inset-top, 0px) + 22px);
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(20,19,42,0.55);
  color: #fff;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 600;
  font-size: 13.5px;
  backdrop-filter: blur(8px);
}
.brand-dot {
  width: 6px; height: 6px;
  background: var(--coral, #FF5B3E);
  border-radius: 50%;
  display: inline-block;
}
.splash-brand-eq {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--coral, #FF5B3E);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255,91,62,0.45);
}

.splash-pill-top {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: 28vh 18px 0;
}

.splash-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  z-index: 2;
  position: relative;
  padding: 0 22px 24px;
}
.splash-hero {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1.18;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
  text-align: left;
}
/* Numbered list variant — 3 coral chips with white numerals + text */
.splash-hero-list {
  list-style: none;
  padding: 0;
  gap: 16px;
  align-items: flex-start;
}
.splash-hero-list li {
  display: flex; align-items: center;
  gap: 14px;
}
.sh-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--coral, #FF5B3E);
  color: #fff;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(255,91,62,0.45);
}
.sh-text { white-space: nowrap; }
.splash-hero-accent { color: var(--coral, #FF5B3E); }
.splash-sub {
  margin: 0;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 500;
  font-size: 14.5px;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.splash-quote {
  margin-top: 10px;
  background: rgba(20,19,42,0.55);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  width: 100%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.splash-quote-en {
  margin: 0;
  color: #fff;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
}
.splash-quote-tr {
  margin: 4px 0 0;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 600;
}

.splash-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: transparent;
  color: #fff;
  padding: 0;
  border-radius: 20px;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.2px;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  max-width: 340px;
  text-align: center;
}
.splash-pill-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.splash-pill-mic {
  font-size: 32px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-globe { font-size: 14px; margin-right: 4px; }
/* NEW SPLASH LAYOUT — same structure as home screen */
.splash-clean {
  display: flex;
  flex-direction: column;
}
.splash-topbar {
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 12px;
  display: flex;
  align-items: center;
  z-index: 2;
  position: relative;
}
.splash-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  position: relative;
  padding: 40px 20px 20px;
}
.splash-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.splash-cta-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
}

.splash-bottom {
  position: relative;
  z-index: 2;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.splash-bottom .cta-onboard {
  margin-top: 0;
  width: 100%;
  padding: 18px 22px;
  font-size: 17px;
}
.splash-bottom .splash-login-link { align-self: center; }
.splash-cta-section .cta-onboard {
  width: 100%;
  margin-top: 0;
}
.splash-cta-section .splash-login-link { align-self: center; }
.splash-login-link {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.82);
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 13.5px;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.splash-login-link strong { font-weight: 800; color: #fff; }

/* Login screen specifics */
.login-rocket {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(140deg, #FF7A5E, #FF5B3E);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  margin: 8px auto 18px;
  box-shadow: 0 12px 26px rgba(255,91,62,0.35);
}

.phone-row {
  display: flex;
  gap: 8px;
}
.phone-cc {
  background: #F5F2FA;
  border: 1.5px solid #E8E2F1;
  border-radius: 12px;
  padding: 0 12px;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #14132A;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.phone-cc .caret { font-size: 10px; color: #9A95AD; }
.phone-cc .cc-flag { margin-right: 6px; font-size: 16px; line-height: 1; }
.phone-input {
  flex: 1;
  min-width: 0;
  background: #F5F2FA;
  border: 1.5px solid #E8E2F1;
  border-radius: 12px;
  padding: 14px;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: #14132A;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.phone-input:focus {
  border-color: var(--coral, #FF5B3E);
  background: #fff;
}
.phone-input::placeholder { color: #B0AAC2; }

.or-divider {
  position: relative;
  text-align: center;
  margin: 22px 0 14px;
  color: #9A95AD;
  font-size: 12.5px;
}
.or-divider::before,
.or-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 60px);
  height: 1px;
  background: #ECE6F3;
}
.or-divider::before { left: 0; }
.or-divider::after { right: 0; }
.or-divider span {
  background: #fff;
  padding: 0 12px;
}

.oauth-row {
  display: flex;
  gap: 10px;
}
.oauth-btn {
  flex: 1;
  background: #fff;
  border: 1.5px solid #E8E2F1;
  border-radius: 12px;
  padding: 12px;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: #14132A;
  cursor: pointer;
  transition: background 0.15s;
}
.oauth-btn:active { background: #F5F2FA; }

/* OTP screen */
.otp-row {
  display: flex;
  gap: 9px;
  margin: 18px 0 14px;
}
.otp-cell {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1;
  text-align: center;
  background: #F5F2FA;
  border: 1.5px solid #E8E2F1;
  border-radius: 12px;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-size: 22px;
  font-weight: 800;
  color: #14132A;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.otp-cell:focus {
  border-color: var(--coral, #FF5B3E);
  background: #fff;
}
.otp-resend {
  text-align: center;
  font-size: 13.5px;
  color: #9A95AD;
  margin: 4px 0 22px;
}
.link-coral {
  background: none;
  border: none;
  color: var(--coral, #FF5B3E);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

/* Welcome / Day 1 */
#welcomeScreen {
  /* Same warm-glow background runs the full height, no flat band at the bottom */
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255,91,62,0.30) 0%, rgba(255,91,62,0) 55%),
    linear-gradient(180deg, #1f0d18 0%, #170914 55%, #0c0712 100%);
  color: #fff;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  /* inherit position:absolute + inset:0 from base .screen so the body fills
     the full device height — otherwise the CTA can't reach the bottom. */
  overflow: hidden;
}
.welcome-glow {
  position: absolute;
  top: 8%; left: 50%;
  transform: translateX(-50%);
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,91,62,0.45) 0%, rgba(255,91,62,0) 70%);
  pointer-events: none;
  filter: blur(8px);
}
.welcome-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  /* Use the full screen height — content top, CTA pinned to bottom */
  flex: 1;
  height: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 24px calc(env(safe-area-inset-bottom, 0px) + 26px);
  box-sizing: border-box;
}
.welcome-flame {
  font-size: 56px;
  margin-bottom: 14px;
  filter: drop-shadow(0 8px 20px rgba(255,91,62,0.5));
}
.welcome-h1 {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.6px;
  margin: 0 0 12px;
}
.welcome-h1-accent { color: var(--coral, #FF5B3E); }
.welcome-sub {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0 0 28px;
}
.welcome-stats {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 36px;
}
.welcome-cta-wrap {
  margin-top: auto; /* pin the Start Day 1 CTA to the very bottom */
  width: 100%;
}
.ws-tile {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 6px 12px;
}
.ws-num {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 26px;
  color: #FFB23E;
  line-height: 1;
}
.ws-lbl {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}
.welcome-cta {
  width: 100%;
  margin-top: auto;  /* push to the bottom of the flex column */
  padding: 18px 22px;
  font-size: 17px;
}
.welcome-cta .arrow-l { font-weight: 800; }

/* ============== BOTTOM NAV ============== */
.bottom-nav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid #E8E3F1;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bottom-nav.on-dark {
  background: rgba(12,11,28,0.62);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.bottom-nav.hidden { transform: translateY(100%); pointer-events: none; }
.bn-tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 16px;
  padding: 8px 0 7px;
  color: #A39EB4;
  transition: background 0.22s ease, color 0.22s ease;
}
.bn-tab svg { width: 23px; height: 23px; }
.bn-tab span {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 600;
  font-size: 11px;
}
.bn-tab.active {
  background: rgba(255,91,62,0.14);
  color: var(--coral, #FF5B3E);
}
.bn-tab.active span { font-weight: 700; }
.bottom-nav.on-dark .bn-tab { color: rgba(255,255,255,0.5); }
.bottom-nav.on-dark .bn-tab.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* ============== HOME / CATEGORIES (entry point) ============== */
#categoriesScreen {
  background: #fff;
  color: var(--text);
  flex-direction: column;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  overflow: hidden;
}

/* ============== HOME SCREEN ============== */
.home-screen {
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
}

/* Header: logo + streak */
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--space-outer) 16px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
}

.home-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-logo {
  width: 32px;
  height: 32px;
  background: var(--primary-orange);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.home-logo-text {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.home-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #FEF2F0;
  border-radius: var(--radius-badge);
  font-weight: 600;
  font-size: 14px;
  color: var(--primary-orange);
}

.streak-flame {
  font-size: 14px;
}

.streak-count {
  font-variant-numeric: tabular-nums;
}

/* Main scrollable content */
.home-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 var(--nav-clear);
}

.home-content::-webkit-scrollbar {
  display: none;
}

/* Greeting section + rocket */
.home-greeting {
  padding: 24px var(--space-outer) 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.greeting-text {
  flex: 1;
  min-width: 0;
}

.greeting-main {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.greeting-sub {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--text-primary);
  letter-spacing: -0.7px;
}

/* Animated fiery rocket */
.greeting-rocket {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rocket-emoji {
  font-size: 66px;
  line-height: 1;
  display: inline-block;
  transform: rotate(8deg);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
  animation: rocket-float 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes rocket-float {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50%      { transform: translateY(-12px) rotate(4deg); }
}

/* Flickering flame glow at the rocket's tail */
.rocket-glow {
  position: absolute;
  bottom: 20px;
  left: 30px;
  width: 34px;
  height: 46px;
  background: radial-gradient(ellipse at center,
    rgba(255,180,0,0.9) 0%,
    rgba(255,90,30,0.6) 45%,
    rgba(255,60,20,0) 75%);
  filter: blur(7px);
  border-radius: 50%;
  transform-origin: top center;
  animation: flame-flicker 0.35s ease-in-out infinite alternate, rocket-float 3s ease-in-out infinite;
  z-index: 1;
}

@keyframes flame-flicker {
  0%   { opacity: 0.6; transform: scaleY(0.85) scaleX(1.05); }
  100% { opacity: 1;   transform: scaleY(1.15) scaleX(0.9); }
}

/* Twinkling sparks around the rocket */
.rocket-spark {
  position: absolute;
  color: #B9A9F5;
  font-size: 13px;
  z-index: 0;
  animation: spark-twinkle 2s ease-in-out infinite;
}
.rocket-spark.spark-1 { top: 16px; left: 8px; animation-delay: 0s; }
.rocket-spark.spark-2 { top: 40px; right: 6px; font-size: 10px; animation-delay: 0.8s; }

@keyframes spark-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* Continue learning section */
.continue-section {
  padding: 0 var(--space-outer) 28px;
}

.continue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.continue-label {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.continue-viewall {
  background: transparent;
  border: none;
  color: var(--primary-orange);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--body);
}

.va-chev { font-size: 16px; line-height: 1; }

.hero-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  gap: 16px;
}

.hero-thumbnail {
  width: 132px;
  height: 152px;
  border-radius: var(--radius-cat);
  background: linear-gradient(150deg, #8B7DD8 0%, #6B5BC4 100%);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-thumb-emoji {
  font-size: 60px;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
}

.hero-play-icon {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 1.5px solid rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: white;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
}

.hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-info-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.hero-cat-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F1EDFB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.hero-title {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.hero-scene {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.hero-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.hero-progress-bar {
  flex: 1;
  height: 7px;
  background: #EDEAF6;
  border-radius: 999px;
  overflow: hidden;
}

.hero-progress-fill {
  height: 100%;
  background: var(--progress-purple);
  border-radius: 999px;
  transition: width 0.3s ease-out;
}

.hero-percent {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 42px;
  text-align: right;
}

.hero-continue-btn {
  align-self: flex-start;
  background: var(--primary-orange);
  color: white;
  border: none;
  border-radius: var(--radius-btn);
  padding: 13px 26px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: transform 0.2s ease-out;
}

.hero-continue-btn:active {
  transform: scale(0.97);
}

.btn-arrow {
  font-size: 17px;
}

/* Quick stats — premium metric cards */
.home-stats {
  display: flex;
  gap: 12px;
  padding: 0 var(--space-outer) 28px;
}

.stat-card {
  flex: 1;
  min-width: 0;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 15px 14px;
  min-height: 116px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Icon: clean monochrome line glyph, top-left, no colored circle */
.stat-ic {
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  flex-shrink: 0;
}

/* Metric value — the hero. Tabular figures so columns stay aligned. */
.stat-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

/* Unit (wpm) — secondary but readable */
.stat-unit {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-tertiary);
}

/* Label — clear and confident, stronger than before */
.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
  margin-top: 6px;
}

/* Context / helper — meaningful, pinned to the card bottom */
.stat-context {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  line-height: 1.2;
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-context.is-positive { color: var(--success-green); }
.stat-context.is-brand { color: var(--primary-orange); }

/* Explore section header — one quiet label + a calm link */
.explore-header {
  padding: 0 var(--space-outer) 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.explore-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.explore-allcats {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 4px 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--body);
  white-space: nowrap;
}

.explore-allcats .va-chev { color: var(--text-tertiary); }

/* Category grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-grid);
  padding: 0 var(--space-outer) 20px;
}

.cat-card {
  background: linear-gradient(135deg, #8B7DD8 0%, #6B5BC4 100%);
  border-radius: var(--radius-cat);
  padding: 0;
  display: block;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1 / 1.28;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  overflow: hidden;
  border: none;
  text-align: left;
  color: white;
}

.cat-card:active {
  transform: scale(0.96);
}

.cat-card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.cat-card[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.cat-card[disabled]:active {
  transform: none;
}

/* Full-bleed image background */
.cat-card .card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Dark gradient overlay for text legibility */
.cat-card .card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0));
  z-index: 1;
}

/* Empty-state surface (no uploaded image) — neutral tint, not loud purple */
.cat-card .card-bg-empty {
  background: linear-gradient(135deg, #8B7DD8 0%, #6B5BC4 100%);
}

/* Bottom row: icon badge + (title / scene count) */
.cat-card .card-bottom {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
}

.cat-card .card-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20,18,28,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.cat-card .card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cat-card .card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.3px;
  line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  margin: 0;
  color: #fff;
}

.cat-card .card-stats {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  margin: 0;
}

/* Difficulty badge */
.cat-card .card-diff {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.2);
  padding: 5px 11px;
  border-radius: var(--radius-badge);
  text-transform: capitalize;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: 0.2px;
  z-index: 2;
}

/* Coming-soon panel for Interview tab */
.cat-soon {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 64px 24px;
  color: var(--sec, #615C77);
  background: #fff;
  border-radius: 16px;
  border: 1px dashed var(--hair, #E8E3F1);
}
.soon-emoji { font-size: 40px; margin-bottom: 10px; }
.soon-title { font-family: var(--display); font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.soon-sub { font-size: 13.5px; max-width: 240px; color: var(--muted, #9A95AD); }

/* ============== REELS FEED (vertical swipe through all reels) ============== */
#reelsFeedScreen {
  background: #000;
  flex-direction: column;
  overflow: hidden;
}
.reels-feed {
  flex: 1;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--nav-h); /* leave space for the bottom nav */
}
.reels-feed::-webkit-scrollbar { display: none; }
.reel-card {
  position: relative;
  height: calc(100% - 0px);
  min-height: calc(100dvh - var(--nav-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #000;
  overflow: hidden;
}
.reel-card video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.reel-card .reel-scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  pointer-events: none;
}
.reel-card .reel-meta {
  position: absolute;
  left: 18px; right: 90px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  color: #fff;
  z-index: 2;
}
.reel-card .reel-loc {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0,0,0,0.45);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  margin-bottom: 8px;
  backdrop-filter: blur(6px);
}
.reel-card .reel-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  margin-bottom: 4px;
}
.reel-card .reel-cta {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.reel-card .reel-rail {
  position: absolute;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  z-index: 2;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 18px;
}
.reel-rail .rail-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(20,19,42,0.42);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.08s;
}
.reel-rail .rail-btn:active { transform: scale(0.92); }
.reel-rail .rail-btn.cta {
  background: var(--coral, #FF5B3E);
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 6px 16px rgba(255,91,62,0.4);
}
.reel-rail .rail-btn.is-saved { background: rgba(255,91,62,0.85); }
.reel-rail .rail-lbl {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  margin-top: -8px;
  font-weight: 600;
}
.reel-card .reel-progress {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.15);
}
.reel-card .reel-progress-fill {
  height: 100%; width: 0%;
  background: var(--coral, #FF5B3E);
  transition: width 0.15s linear;
}
.reels-empty {
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 80px 24px;
  font-size: 14px;
}

/* ============== PROGRESS (stub) ============== */
#progressScreen {
  background: #F4F1FA;
  color: var(--text, #1B1A2E);
  flex-direction: column;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
}
.prog-head {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.prog-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--sec, #615C77);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.prog-title, .prof-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.3px;
}
.prog-scroll {
  flex: 1;
  overflow: auto;
  padding: 14px 20px var(--nav-clear);
  -webkit-overflow-scrolling: touch;
}
.prog-scroll::-webkit-scrollbar { display: none; }
.prog-stat-cards {
  display: flex;
  gap: 11px;
  margin-bottom: 14px;
}
.prog-stat-card {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 17px;
  box-shadow: 0 2px 10px rgba(20,19,42,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.prog-stat-card.streak-card {
  background: linear-gradient(155deg, #FF7A4E, #E8492C);
  color: #fff;
  box-shadow: 0 12px 26px rgba(232,73,44,0.28);
}
.prog-stat-card.longest-card {
  background: #f5f3fa;
  border: 1px solid #e8e5f0;
}
.ps-emoji {
  font-size: 28px;
  margin-bottom: 8px;
}
.ps-num {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 3px;
}
.streak-card .ps-num { color: #fff; }
.ps-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--sec, #615C77);
}
.streak-card .ps-lbl { color: rgba(255,255,255,0.85); }
.prog-card {
  background: #fff;
  border-radius: 20px;
  padding: 17px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(20,19,42,0.05);
}
.prog-card-row {
  display: flex; align-items: center; justify-content: space-between;
}
.prog-big-num {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
}
.prog-mute {
  font-size: 12.5px;
  color: var(--sec, #615C77);
  margin-top: 3px;
}
.prog-icon-tile {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255,91,62,0.14);
  display: flex; align-items: center; justify-content: center;
}

/* Lessons card with progress bar */
.prog-card.lessons-card {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.prog-icon-lg {
  display: none;
}
.prog-stat-content {
  flex: 1;
}
.prog-progress-bar {
  height: 6px;
  background: #e8e5f0;
  border-radius: 3px;
  margin: 8px 0;
  overflow: hidden;
}
.prog-progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF7A4E, #E8492C);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.prog-progress-label {
  font-size: 11px;
  color: var(--sec, #615C77);
  text-align: right;
}

/* Voice stats section */
.prog-card.voice-stats-card {
  padding: 0;
}
.prog-stat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 17px;
  border-bottom: 1px solid #f0eff5;
}
.prog-stat-row:last-of-type {
  border-bottom: none;
}
.prog-stat-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.prog-stat-label {
  font-size: 13px;
  color: var(--sec, #615C77);
  flex: 1;
}
.prog-stat-value {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 16px;
  color: #1a1624;
}
.prog-stat-value .unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--sec, #615C77);
  margin-left: 3px;
}

/* Voice Profile CTA box */
.vp-cta-box {
  padding: 14px 17px;
  border-top: 1px solid #f0eff5;
}
.vp-cta-content {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.vp-cta-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.vp-cta-text {
  flex: 1;
}
.vp-cta-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: #1a1624;
  line-height: 1.2;
}
.vp-cta-sub {
  font-size: 12px;
  color: var(--sec, #615C77);
  margin-top: 2px;
}
.vp-report-btn {
  width: 100%;
  background: linear-gradient(155deg, #FF7A4E, #E8492C);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(232,73,44,0.2);
  transition: transform 0.1s, box-shadow 0.2s;
}
.vp-report-btn:active {
  transform: scale(0.97);
}
.vp-report-btn:hover {
  box-shadow: 0 8px 20px rgba(232,73,44,0.3);
}

.prog-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 13px;
}
.prog-card-h {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 16px;
}
.prog-legend {
  display: flex; gap: 12px;
  font-size: 11px;
  color: var(--sec, #615C77);
}
.prog-legend span { display: inline-flex; align-items: center; gap: 5px; }
.prog-legend .dot {
  width: 10px; height: 10px;
  border-radius: 3px;
}
.prog-legend .dot.g { background: #19B877; }
.prog-legend .dot.a { background: #FFB23E; }
.prog-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}
.prog-calendar > div {
  aspect-ratio: 1;
  border-radius: 7px;
}

/* ============== PROFILE (stub) ============== */
#profileScreen {
  background: #F4F1FA;
  color: var(--text, #1B1A2E);
  flex-direction: column;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
}
.prof-head {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 8px;
  display: flex; align-items: center; justify-content: center;
}
.prof-scroll {
  flex: 1;
  overflow: auto;
  padding: 14px 20px var(--nav-clear);
  -webkit-overflow-scrolling: touch;
}
.prof-scroll::-webkit-scrollbar { display: none; }
.prof-id {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.prof-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3766, #14132A);
  border: 2.5px solid var(--coral, #FF5B3E);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 24px;
}
.prof-name {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 21px;
}
.prof-sub {
  font-size: 13.5px;
  color: var(--sec, #615C77);
}
.prof-section-head {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sec, #9A95AD);
  padding: 0 4px 8px;
}
.prof-list {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(20,19,42,0.04);
}
.prof-row {
  display: flex; align-items: center;
  padding: 15px 16px;
  border-bottom: 1px solid #F0ECF7;
  font-size: 15px;
}
.prof-row span:first-child { flex: 1; }
.prof-row.prof-row-last { border-bottom: none; }
.prof-val { color: var(--sec, #615C77); }
.prof-caret { color: #C9C3D6; font-size: 18px; }
.toggle {
  width: 46px; height: 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(0,0,0,0.15);
  position: relative;
  transition: background 0.2s;
}
.toggle.on { background: #34c759; }
.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s;
}
.toggle.on .toggle-knob { transform: translateX(18px); }
.prof-logout {
  width: 100%;
  background: #fff;
  border: 1.5px solid #F1C7BD;
  cursor: pointer;
  border-radius: 16px;
  padding: 15px;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #E8492C;
}

/* ============== Short-height phones / landscape safety ============== */
@media (max-height: 700px) {
  .intro-h1 { font-size: 24px; }
  .intro-sub { font-size: 13.5px; margin-bottom: 14px; }
  .intro-features { gap: 9px; margin-bottom: 16px; }
  .intro-features li { font-size: 14px; }
  .ft-tile { width: 32px; height: 32px; border-radius: 11px; }
  .how-pill { margin-top: 14px; padding: 7px 13px; font-size: 12px; }
  .cta { padding: 14px 18px; font-size: 16px; }

  .sticker-pill { font-size: 21px; padding: 11px 18px; }
  .mic-circle { width: 72px; height: 72px; }
  .mic-hit.recording .mic-circle { width: 78px; height: 78px; }
  .mic-icon { font-size: 26px; }
  .describe-hint { margin: 4px 0 10px; font-size: 13.5px; }
  .glass-pill { margin-top: 10px; padding: 9px 15px; font-size: 13px; }
}

/* Very small phones (e.g. iPhone SE width) */
@media (max-width: 360px) {
  .intro-scrim { padding-left: 20px; padding-right: 20px; }
  .top-tabs { gap: 18px; }
  .tab { font-size: 18px; }
  .loc-row { font-size: 12.5px; }
  .countdown-pill { font-size: 12px; padding: 5px 10px; }
}

/* ============== STREAM V2 (sticker top, Prev/Save/Next rail, streak pill) ============== */

/* Location row v2: location left, streak pill right */
.loc-row.v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px; /* ~1.5x of the previous 13px */
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.loc-row.v2 .loc-pin { font-size: 18px; }
.loc-row.v2 .loc-text {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.loc-row.v2 .loc-text strong {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: #fff;
}
.loc-row.v2 .loc-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.loc-row.v2 .loc-tag {
  color: rgba(255,255,255,0.7);
  font-size: 17px;
}
.streak-pill {
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

/* YOUR TURN sticker — at TOP, just under location row */
.sticker-prompt-v2 {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 140px);
  left: 0; right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}
.sticker-prompt-v2.hidden { display: none; }
.sticker-prompt-v2 .sticker-label {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 5px rgba(0,0,0,0.6);
}
.sticker-pill.v2 {
  background: var(--coral, #FF5B3E);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 16px;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: -0.2px;
  box-shadow: 0 10px 28px rgba(255,91,62,0.55);
  animation: sticker-glow 2.2s ease-in-out infinite;
  pointer-events: auto;
  max-width: 86%;
}
.sticker-pill.v2 .sticker-pill-mic {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* Right rail v2: Prev / Save / Next */
.right-rail.v2 {
  top: 46%;
}
.right-rail.v2 .glass-circle {
  font-size: 16px;
  color: #fff;
  background: rgba(20,19,42,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
}
.right-rail.v2 .rail-label {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Bottom dock v2 */
.bottom-dock.v2 { gap: 0; }

/* New "describe" UI: hint above mic, OR divider, Hear native button */
.describe-col.v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.describe-col.v2 .describe-hint {
  font-size: 15px;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  margin: 0 0 4px;
  font-weight: 500;
}
.or-mini-divider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.or-mini-divider .or-line {
  width: 38px; height: 1px;
  background: rgba(255,255,255,0.22);
}
.describe-col.v2 .glass-pill {
  margin-top: 0;
}
.eye-glyph { font-size: 14px; margin-right: 2px; }

/* Recording state v2 — waveform + timer ABOVE the mic */
.recording-col.v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
/* Animated waveform — JS appends .bar children that pulse via @keyframes. */
.waveform.v2 {
  width: 300px;
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  background: none;
  overflow: hidden;
}
.waveform.v2 .bar {
  width: 4px;
  height: 14px;
  background: var(--coral, #FF5B3E);
  border-radius: 999px;
  animation-name: wave-bounce;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes wave-bounce {
  0%, 100% { height: 8px;  opacity: 0.55; }
  50%      { height: 56px; opacity: 1;    }
}
.rec-timer.v2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 15px;
}
.rec-timer.v2 .rec-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral, #FF5B3E);
  animation: rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.recording-col.v2 .describe-hint { margin-top: 6px; }

/* Recording-state mic: bigger circle with 3 concentric coral pulse rings
   and an intense glow, matching the reference. */
.mic-hit.recording-active { width: 200px; height: 200px; }
.mic-hit.recording-active .mic-pulse {
  width: 200px; height: 200px;
  background: var(--coral, #FF5B3E);
  opacity: 0;
  animation: mic-pulse-ring 1.8s ease-out infinite;
}
.mic-hit.recording-active .mic-pulse.delay {
  animation-delay: 0.6s;
}
/* A third static ring sits behind the mic for the soft halo effect. */
.mic-hit.recording-active::before {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,91,62,0.32) 0%, rgba(255,91,62,0.10) 55%, rgba(255,91,62,0) 78%);
  pointer-events: none;
}
.mic-hit.recording-active .mic-circle {
  width: 96px; height: 96px;
  background: var(--coral, #FF5B3E);
  border: 4px solid rgba(255,255,255,0.95);
  box-shadow:
    0 0 0 8px rgba(255,91,62,0.18),
    0 0 0 18px rgba(255,91,62,0.10),
    0 12px 36px rgba(255,91,62,0.55);
}
.mic-hit.recording-active .mic-icon { font-size: 38px; }

@keyframes mic-pulse-ring {
  0%   { transform: scale(0.55); opacity: 0.55; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* Already-described state */
.described-col.v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.described-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(25,184,119,0.18);
  border: 1px solid rgba(25,184,119,0.45);
  color: #19B877;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
}
.described-pill .dp-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #19B877;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.described-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.ghost-coral {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 14px 8px;
  color: #fff;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.1s;
}
.ghost-coral:active { transform: scale(0.98); }
.described-actions .cta {
  flex: 1.5;
  margin: 0;
}
.described-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
  margin: 0;
  text-align: center;
}

/* ============== PASSIVE MODEL ANSWER VIEW ============== */
.panel[data-panel="passive"] {
  position: absolute; inset: 0;
  background: #F4F1FA;
  color: #14132A;
  overflow: hidden;
  z-index: 10;
}
.panel[data-panel="passive"].hidden { display: none; }
.passive-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.passive-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
}
.passive-head .lilac-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  border: none;
  color: #14132A;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.passive-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.3px;
  text-align: center;
  color: #14132A;
}
.passive-spacer { width: 36px; }
.passive-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 18px 18px;
}
.passive-body::-webkit-scrollbar { display: none; }
.passive-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(110,95,184,0.08);
  border: 1px solid rgba(110,95,184,0.2);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #4C4470;
}
.passive-banner .pb-emoji {
  font-size: 18px;
  flex-shrink: 0;
}

/* ============== FEEDBACK v3 (no sub-tabs, horizontal bars, inline mentor) ============== */
.fb-sheet.v3 { display: flex; flex-direction: column; height: 100%; }
.fb-head.v3 {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 8px;
}
.fb-head.v3 .lilac-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  border: none;
  color: #14132A;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.fb-head.v3 .fb-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.3px;
  text-align: center;
  color: #14132A;
}
.fb-head.v3 .fb-spacer { width: 36px; }
.fb-body.v3 {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 18px 18px;
}
.fb-body.v3::-webkit-scrollbar { display: none; }

.howyou-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 4px 10px;
}
.howyou-eyebrow {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9A95AD;
}
.howyou-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 13px;
  color: #19B877;
}
.howyou-tag .ht-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #19B877;
}
.howyou-tag.tag-mid { color: #FFB23E; }
.howyou-tag.tag-mid .ht-dot { background: #FFB23E; }
.howyou-tag.tag-low { color: #E8492C; }
.howyou-tag.tag-low .ht-dot { background: #E8492C; }

/* Horizontal bars card */
.fb-card.bars-card {
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(20,19,42,0.05);
  margin-bottom: 14px;
}
.bar-row + .bar-row { margin-top: 14px; }
.bar-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.bar-label {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 14.5px;
  color: #14132A;
}
.bar-tag {
  font-size: 12.5px;
  font-weight: 700;
  color: #19B877;
}
.bar-tag.tag-mid { color: #FFB23E; }
.bar-tag.tag-low { color: #E8492C; }
.bar-track {
  height: 8px;
  background: #EFEAF6;
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0%;
  background: var(--c, var(--coral, #FF5B3E));
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* CORRECT ANSWER · MENTOR section */
.ma-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9A95AD;
  margin: 22px 4px 10px;
}
.ma-now-playing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--coral, #FF5B3E);
  text-transform: none;
  letter-spacing: 0.1px;
  font-size: 12px;
}
.ma-now-playing.hidden { display: none; }
.np-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral, #FF5B3E);
  animation: rec-blink 1s ease-in-out infinite;
}

/* Mentor card — collapsed (small) by default, expanded after tap */
.mentor-card {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #14132A;
  margin-bottom: 14px;
  transition: aspect-ratio 0.3s ease;
}
.mentor-card.collapsed {
  aspect-ratio: 16 / 9;
}
.mentor-card.big {
  aspect-ratio: 16 / 11;
}
.mentor-card .mentor-card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mentor-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,42,0.1) 0%, rgba(20,19,42,0.7) 100%);
}
.mentor-card-chip {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(20,19,42,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mentor-card-soundchip {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(20,19,42,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mentor-card-soundchip.hidden { display: none; }
.mentor-card-caption {
  position: absolute;
  bottom: 28px;
  left: 16px; right: 16px;
  color: #fff;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.mentor-card-caption.hidden { display: none; }
.mentor-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding-left: 3px;
}
.mentor-card-play.hidden { display: none; }
.mentor-collapsed-hint {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.mentor-collapsed-hint.hidden { display: none; }
.mentor-collapsed-hint span { font-size: 14px; margin-left: 4px; }
.mentor-card-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.18);
}
.mentor-card-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--coral, #FF5B3E);
  transition: width 0.15s linear;
}

.fb-footnote {
  text-align: center;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: #B0AAC2;
  margin-top: 18px;
  padding-bottom: 12px;
}

/* ============== SAVED SCENES (in Progress) ============== */
.prog-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sec, #9A95AD);
  padding: 0 4px;
  margin: 22px 0 10px;
}
.prog-section-title {}
.prog-section-count {
  background: rgba(255,91,62,0.14);
  color: var(--coral, #FF5B3E);
  font-weight: 800;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0;
}
.saved-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.saved-empty {
  background: #fff;
  border-radius: 18px;
  padding: 22px 16px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(20,19,42,0.05);
}
.se-emoji { font-size: 30px; margin-bottom: 8px; }
.se-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 16px;
  color: var(--text, #1B1A2E);
}
.se-sub {
  font-size: 13px;
  color: var(--sec, #615C77);
  margin-top: 3px;
}
.saved-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(20,19,42,0.05);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.1s;
}
.saved-card:active { transform: scale(0.99); }
.saved-card .sc-chip {
  background: rgba(255,91,62,0.14);
  color: var(--coral, #FF5B3E);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.saved-card .sc-title {
  flex: 1;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text, #1B1A2E);
}
.saved-card .sc-caret {
  color: #C9C3D6;
  font-size: 18px;
}

/* ============== Lesson — WATCH state v3 (matches image 1) ============== */
.watch-prompt-card {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 130px);
  left: 30px; right: 30px;
  z-index: 5;
  background: rgba(20,19,42,0.75);
  border-radius: 22px;
  padding: 22px 26px;
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  pointer-events: none;
}
.watch-prompt-card.hidden { display: none; }
.wpc-line {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.6px;
  line-height: 1.05;
}
.wpc-en { color: #fff; }
.wpc-en-faded { color: rgba(255,255,255,0.35); margin-top: 2px; }

/* Bottom translation card during watch */
.watch-row.v3 {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}
.watch-translation { text-align: center; }
.wt-phonetic {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.wt-native {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.wt-caption {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-top: 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

/* ============== Lesson — SPEAKING state v3 (matches image 2) ============== */
.describe-col.v2 .describe-hint {
  text-align: center;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  margin-bottom: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.describe-col.v2 .live-transcript {
  margin-top: 0;
  margin-bottom: 10px;
  width: 100%;
  max-width: 320px;
  background: rgba(20,19,42,0.65);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  text-align: left;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  letter-spacing: -0.2px;
  min-height: 48px;
  max-height: 96px;
  backdrop-filter: blur(8px);
}
.describe-col.v2 .live-transcript:empty::after {
  content: ' ';
  display: inline-block;
  width: 2px; height: 22px;
  background: var(--coral, #FF5B3E);
  vertical-align: middle;
  animation: caret-blink 1s steps(2, end) infinite;
}
.native-hint {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin: 0 0 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.speaker-glyph { font-size: 14px; }
@keyframes caret-blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* ============== Voice Profile card (Progress screen) ============== */
.voice-profile-card {
  background: #FAF7F2;
  border: 1px solid #EDE6D9;
  border-radius: 16px;
  padding: 22px 22px 18px;
  margin-bottom: 14px;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
}
.vp-stats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.vp-stat { display: flex; align-items: baseline; gap: 10px; }
.vp-num {
  font-size: 28px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.vp-lbl {
  font-size: 15px;
  color: var(--sec, #615C77);
  font-weight: 500;
}
.vp-divider {
  height: 1px; background: #E8E0CF;
  margin: 4px 0 14px;
}
.vp-cta-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.vp-cta-title { font-weight: 700; font-size: 17px; color: var(--text); margin-bottom: 2px; }
.vp-cta-sub { font-size: 14px; color: var(--sec, #615C77); font-weight: 500; }
.vp-report-btn {
  display: block;
  width: 100%;
  background: #F4A03A;
  color: #14132A;
  border: 1.5px solid #D67018;
  border-radius: 14px;
  padding: 14px 20px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s;
}
.vp-report-btn:hover { filter: brightness(1.04); }
.vp-report-btn:active { transform: scale(0.985); }

/* ============== Reward screen (after 2nd reel) ============== */
#rewardScreen {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,178,62,0.30) 0%, rgba(255,91,62,0.10) 45%, transparent 70%),
    linear-gradient(180deg, #1f0d18 0%, #170914 60%, #0c0712 100%);
  color: #fff;
  align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.reward-wrap {
  position: relative; z-index: 2;
  width: 100%; max-width: 380px;
  padding: 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.reward-medal {
  font-size: 80px;
  margin-bottom: 16px;
  filter: drop-shadow(0 12px 30px rgba(255,178,62,0.55));
  animation: medal-pop 0.6s cubic-bezier(.22,1.4,.36,1) both, medal-float 3.2s ease-in-out infinite 0.6s;
}
.reward-eyebrow {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 2.4px;
  color: #FFB23E;
  margin-bottom: 6px;
}
.reward-title {
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.8px;
  line-height: 1.05;
  margin: 0 0 8px;
}
.reward-sub {
  font-size: 14.5px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 28px;
}
.reward-stats {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 28px;
}
.rw-stat {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 16px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: stat-pop 0.55s cubic-bezier(.22,1.4,.36,1) both;
}
.rw-stat:nth-child(1) { animation-delay: 0.15s; }
.rw-stat:nth-child(2) { animation-delay: 0.30s; }
.rw-stat:nth-child(3) { animation-delay: 0.45s; }
.rw-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  color: #FFB23E;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.rw-lbl {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}
.reward-cta { width: 100%; max-width: 320px; }

@keyframes medal-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes medal-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes stat-pop {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Confetti — 15 falling dots in coral/amber/mint */
.reward-confetti {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}
.reward-confetti span {
  position: absolute; top: -20px;
  width: 8px; height: 14px;
  border-radius: 2px;
  animation: confetti-fall linear infinite;
}
.reward-confetti span:nth-child(1)  { left:  5%; background: #FF5B3E; animation-duration: 3.2s; animation-delay: 0.0s; }
.reward-confetti span:nth-child(2)  { left: 12%; background: #FFB23E; animation-duration: 2.8s; animation-delay: 0.4s; }
.reward-confetti span:nth-child(3)  { left: 22%; background: #19B877; animation-duration: 3.6s; animation-delay: 0.2s; }
.reward-confetti span:nth-child(4)  { left: 30%; background: #FF5B3E; animation-duration: 2.6s; animation-delay: 0.7s; }
.reward-confetti span:nth-child(5)  { left: 40%; background: #FFB23E; animation-duration: 3.4s; animation-delay: 0.1s; }
.reward-confetti span:nth-child(6)  { left: 48%; background: #6B5BC4; animation-duration: 3.0s; animation-delay: 0.5s; }
.reward-confetti span:nth-child(7)  { left: 55%; background: #FFB23E; animation-duration: 2.7s; animation-delay: 0.3s; }
.reward-confetti span:nth-child(8)  { left: 63%; background: #19B877; animation-duration: 3.3s; animation-delay: 0.6s; }
.reward-confetti span:nth-child(9)  { left: 70%; background: #FF5B3E; animation-duration: 2.9s; animation-delay: 0.2s; }
.reward-confetti span:nth-child(10) { left: 78%; background: #6B5BC4; animation-duration: 3.5s; animation-delay: 0.8s; }
.reward-confetti span:nth-child(11) { left: 85%; background: #FFB23E; animation-duration: 2.8s; animation-delay: 0.4s; }
.reward-confetti span:nth-child(12) { left: 92%; background: #FF5B3E; animation-duration: 3.1s; animation-delay: 0.0s; }
.reward-confetti span:nth-child(13) { left: 15%; background: #19B877; animation-duration: 2.9s; animation-delay: 1.2s; }
.reward-confetti span:nth-child(14) { left: 50%; background: #FF5B3E; animation-duration: 3.4s; animation-delay: 1.0s; }
.reward-confetti span:nth-child(15) { left: 75%; background: #FFB23E; animation-duration: 2.7s; animation-delay: 1.4s; }
@keyframes confetti-fall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.4; }
}

/* ============== Mercury brand mark — animated voice equalizer ==============
   Drop-in replacement for the rocket emoji. Sits inside any existing
   .brand-avatar / .login-rocket circle; the bars stay clipped so they never
   spill outside the circle. Add .brand-mark to opt in. */
.brand-mark { overflow: hidden; padding: 0; }
/* Reusable equalizer — sized by parent. Drop-in anywhere. */
.eq-bars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11%;
  width: 58%;
  height: 50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.eq-bars i {
  display: block;
  flex: 1;
  background: #fff;
  border-radius: 999px;
  transform-origin: center;
  animation: eq-pulse 1.1s ease-in-out infinite;
  height: 30%;
}
.eq-bars i:nth-child(1) { animation-delay: 0.00s; }
.eq-bars i:nth-child(2) { animation-delay: 0.18s; }
.eq-bars i:nth-child(3) { animation-delay: 0.36s; }
.eq-bars i:nth-child(4) { animation-delay: 0.18s; }
.eq-bars i:nth-child(5) { animation-delay: 0.06s; }
@keyframes eq-pulse {
  0%, 100% { height: 22%; }
  50%      { height: 100%; }
}

/* ============== Splash — bullet list + extra-large CTA ============== */
.splash-bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.splash-bullets li {
  font-family: var(--body, 'Plus Jakarta Sans', sans-serif);
  font-weight: 500;
  font-size: 15.5px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  letter-spacing: -0.1px;
}

/* Doubled-up CTA — taller padding, bigger font, bolder shadow */
.splash-cta-xl {
  padding: 18px 28px !important;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: -0.2px;
  border-radius: 22px !important;
  box-shadow: 0 18px 38px rgba(255,91,62,0.50) !important;
}
.splash-cta-xl .arrow { font-size: 22px; }

/* ============== Mic button — alive / breathing / futuristic ============== */
.mic-circle .eq-bars.mic-eq {
  width: 56%;
  height: 48%;
  gap: 10%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.22));
}
.mic-circle .eq-bars.mic-eq i {
  background: #fff;
}
/* Soft, slow breathe — coral halo grows + shrinks behind the circle */
.mic-hit .mic-circle {
  animation: mic-breathe 2.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}
@keyframes mic-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(255,91,62,0.35),
      0 12px 30px rgba(255,91,62,0.50);
  }
  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 0 14px rgba(255,91,62,0.06),
      0 16px 38px rgba(255,91,62,0.65);
  }
}
/* While actively recording the breathe is wider + faster */
.mic-hit.recording-active .mic-circle,
.mic-hit.recording .mic-circle {
  animation-duration: 1.6s;
}