:root {
  --bg: #000000;
  --surface: #020b12;
  --surface-soft: #061522;
  --blue: #31d7ff;
  --blue-dark: #0b63f6;
  --purple: #8f63ff;
  --purple-soft: rgba(143, 99, 255, 0.18);
  --success: #22ff73;
  --danger-warm: #f97316;
  --voice-state-color: #52687a;
  --voice-state-rgb: 82, 104, 122;
  --text: #f4fbff;
  --muted: #a9c4d8;
  --line: rgba(49, 215, 255, 0.22);
  --line-strong: rgba(49, 215, 255, 0.38);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
  --radius: 16px;
}

body[data-training-state="listening"] {
  --voice-state-color: var(--blue);
  --voice-state-rgb: 11, 99, 246;
}

body[data-training-state="checking"] {
  --voice-state-color: var(--purple);
  --voice-state-rgb: 111, 43, 232;
}

body[data-voice-result="correct"] {
  --voice-state-color: var(--success);
  --voice-state-rgb: 34, 255, 115;
}

body[data-voice-result="incorrect"] {
  --voice-state-color: var(--danger-warm);
  --voice-state-rgb: 249, 115, 22;
}

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

html {
  font-size: 16px;
}

body {
  min-height: 100svh;
  color: var(--text);
  background: var(--bg);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  text-rendering: geometricPrecision;
}

button,
select,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ===============================
   HEADER
================================ */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.85rem, 3vw, 2.4rem);
  min-height: 64px;
  padding: calc(0.45rem + env(safe-area-inset-top)) clamp(1rem, 2vw, 1.35rem) 0.45rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.brand-mark {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
  justify-self: start;
}

.brand-logo {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 0.3rem;
}

.brand-logo img {
  display: block;
  width: 150%;
  height: 150%;
  object-fit: contain;
  transform: translateY(-14%);
  transform-origin: center center;
}

.brand-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 0.46rem;
  transform: translateY(-0.06rem);
}

.brand-title {
  color: var(--text);
  font-size: clamp(1.2rem, 1.55vw, 1.48rem);
  font-weight: 700;
  line-height: 1.08;
  white-space: nowrap;
}

.brand-title strong {
  color: #4f62ff;
  font-weight: 500;
}

.user-info {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  justify-content: center;
  justify-self: stretch;
  max-width: min(28rem, 100%);
  overflow: hidden;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 650;
}

.user-info span:last-child,
.user-info strong {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-metric {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
  color: var(--text);
}

.header-metric + .header-metric {
  padding-left: 0.95rem;
  border-left: 1px solid var(--line);
}

.brand-credits {
  display: block;
  align-self: start;
  margin-top: 0.03rem;
}

.header-metric.brand-credits span:last-child {
  display: flex;
  align-items: baseline;
  gap: 0.24rem;
  color: #4b5570;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.05;
}

.header-metric span:last-child {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.1;
  white-space: nowrap;
}

.header-metric strong {
  color: #155df5;
  font-size: 0.96rem;
  font-weight: 700;
}

.header-metric.brand-credits strong {
  font-size: 0.82rem;
  line-height: 1;
}

.metric-icon,
.side-icon,
.flow-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

.metric-icon {
  width: 1.48rem;
  height: 1.48rem;
}

.metric-icon svg,
.side-icon svg,
.flow-icon svg,
.lock-icon svg,
.sound-icon svg,
.practice-speaker svg,
.menu-btn svg,
.button-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-icon {
  color: var(--text);
}

.star-icon {
  color: #155df5;
}

.star-icon svg {
  fill: currentColor;
  stroke: none;
}

.money-icon {
  color: var(--purple);
}

.calendar-icon {
  border: 2px solid var(--text);
  border-radius: 0.2rem;
}

.calendar-icon::before {
  content: "";
  position: absolute;
  top: 0.28rem;
  width: 1rem;
  height: 2px;
  background: var(--text);
}

.calendar-icon::after {
  content: "";
  width: 0.72rem;
  height: 0.55rem;
  border-top: 2px solid var(--text);
}

.menu-btn {
  min-height: 2.78rem;
  border: 1.5px solid #9ca6ba;
  border-radius: 0.35rem;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
}

.header-menu {
  position: relative;
  justify-self: end;
}

.menu-btn {
  display: grid;
  width: 2.7rem;
  border: 0;
  place-items: center;
}

.menu-btn svg {
  width: 1.65rem;
  height: 1.65rem;
  stroke-width: 2.4;
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  display: none;
  min-width: 160px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.menu-dropdown.show {
  display: block;
}

.menu-dropdown a,
.menu-dropdown button {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
}

.menu-dropdown a:hover,
.menu-dropdown button:hover {
  background: #f2f5fb;
}

/* ===============================
   LAYOUT
================================ */
.container {
  width: 100%;
  padding: clamp(1.05rem, 2.4vw, 1.55rem) clamp(1rem, 3vw, 2.8rem);
}

.lesson-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(300px, 0.42fr);
  align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: min(1460px, 100%);
  margin: 0 auto;
}

body[data-training-state="setup"] .lesson-grid,
body[data-training-state="exercise_config"] .lesson-grid,
body[data-training-state="generating"] .lesson-grid {
  grid-template-columns: minmax(0, 1fr);
  width: min(760px, 100%);
}

body[data-training-state="generating"] {
  background: #000000;
}

body[data-training-state="setup"] .lesson-side,
body[data-training-state="exercise_config"] .lesson-side,
body[data-training-state="generating"] .lesson-side {
  display: none;
}

.lesson-main,
.lesson-side {
  min-width: 0;
}

.lesson-main {
  display: grid;
  align-content: start;
  gap: 0;
}

.setup-panel,
.lesson-topbar,
.exercise-card,
.control-card,
.lesson-side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 34px rgba(17, 24, 39, 0.04);
}

.setup-panel,
.exercise-card {
  padding: 1.45rem;
}

.setup-panel {
  max-width: 600px;
  margin: 0 auto;
}

body[data-training-state="generating"] .setup-panel {
  width: min(18rem, 100%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lesson-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 1.3rem;
  padding: 1.35rem 1.55rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: none;
}

.level-pill {
  display: inline-grid;
  min-width: 2.3rem;
  min-height: 2.3rem;
  place-items: center;
  border-radius: 0.42rem;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 1.18rem;
  font-weight: 700;
}

.lesson-progress {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
}

.lesson-progress strong {
  font-size: 1rem;
  font-weight: 500;
}

.lesson-progress.chunk-practice-phrase {
  width: min(34rem, 100%);
}

.lesson-progress.chunk-practice-phrase strong {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.progress-track {
  width: min(310px, 100%);
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: #d9dee8;
}

.progress-track span {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: #115cf6;
}

body[data-training-state="setup"] .lesson-topbar,
body[data-training-state="exercise_config"] .lesson-topbar,
body[data-training-state="generating"] .lesson-topbar {
  display: none;
}

body[data-training-state="listening"] #ttsPanel,
body[data-training-state="translate"] #ttsPanel,
body[data-training-state="reverse"] #ttsPanel,
body[data-training-state="checking"] #ttsPanel {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body[data-training-state="reverse"] .lesson-topbar,
body[data-training-state="paused"][data-paused-from="reverse"] .lesson-topbar,
body[data-training-state="paused"][data-paused-from^="pronunciation"] .lesson-topbar {
  margin-bottom: 0.8rem;
  border-radius: var(--radius);
  overflow: hidden;
}

body[data-training-state="reverse"] #ttsPanel,
body[data-training-state="paused"][data-paused-from="reverse"] #ttsPanel {
  border-top: 1px solid var(--line);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ===============================
   FORMS / TEXT
================================ */
.panel-kicker {
  color: #0b55ee;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
}

h3 {
  margin: 0.38rem 0 1.32rem;
  color: var(--text);
  font-size: clamp(1.12rem, 1.3vw, 1.28rem);
  font-weight: 560;
  line-height: 1.28;
}

#voiceConfig .panel-kicker {
  font-size: 0.84rem;
  text-align: center;
}

#voiceConfig .voice-section-label {
  margin-bottom: 0.2rem;
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 650;
  text-align: center;
}

#exerciseForm .panel-kicker {
  font-size: 0.84rem;
  text-align: center;
}

#voiceConfig h3 {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
}

#exerciseForm h3 {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label,
.tts-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 550;
}

.form-group select {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.68rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.7rem;
  background: #ffffff;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 400;
}

.tts-control {
  margin: 1.2rem 0;
}

#rateValue {
  color: var(--purple);
  font-weight: 600;
}

.tts-slider {
  width: 100%;
  appearance: none;
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
}

.tts-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--blue);
  border-radius: 50%;
  background: #ffffff;
}

.tts-slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--blue);
  border-radius: 50%;
  background: #ffffff;
}

.status,
.statusPronounce {
  color: var(--text);
  font-weight: 650;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#exerciseConfig .status:not(:empty) {
  display: grid;
  min-height: 10.8rem;
  place-items: center;
  color: #0b63f6;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

body[data-training-state="generating"] #exerciseConfig .status:not(:empty) {
  min-height: 0;
}

.generating-status {
  display: grid;
  justify-items: center;
  gap: 0.74rem;
  width: min(18rem, 100%);
  padding: 1.25rem 1.2rem 1.05rem;
  border: 0;
  border-radius: 8px;
  background: #000000;
  box-shadow: none;
}

.generating-status p {
  margin: 0;
  color: #f4fbff;
  font-size: 1rem;
  font-weight: 750;
  text-shadow: 0 0 0.68rem rgba(61, 208, 255, 0.6);
}

.generating-status .generating-wait {
  margin-top: -0.48rem;
  color: #a9c4d8;
  font-size: 0.86rem;
  font-weight: 600;
  text-shadow: none;
}

.generating-hud-gif {
  width: min(10.5rem, 72vw);
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  filter: none;
}

.ai-hud {
  --hud-cyan: #31d7ff;
  --hud-blue: #0b63f6;
  --hud-violet: #7b3ff2;
  --hud-lilac: #b68cff;
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  isolation: isolate;
  filter: saturate(1.18);
}

.ai-hud::before,
.ai-hud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ai-hud::before {
  inset: -0.18rem;
  border: 1px solid rgba(49, 215, 255, 0.2);
  box-shadow:
    0 0 1.15rem rgba(49, 215, 255, 0.18),
    inset 0 0 1rem rgba(123, 63, 242, 0.14);
}

.ai-hud::after {
  inset: 0.72rem;
  border: 1px solid rgba(182, 140, 255, 0.22);
  background:
    linear-gradient(90deg, transparent 49%, rgba(49, 215, 255, 0.16) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(123, 63, 242, 0.12) 50%, transparent 51%);
  opacity: 0.7;
}

.hud-glow,
.hud-ring,
.hud-scan,
.hud-orbit,
.hud-core {
  position: absolute;
  border-radius: 50%;
}

.hud-glow {
  inset: -0.05rem;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 4%, rgba(49, 215, 255, 0.42) 5% 18%, rgba(11, 99, 246, 0.13) 28% 56%, transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(123, 63, 242, 0.24), transparent 65%);
  filter: blur(0.2rem);
  animation: hudGlow 1.8s ease-in-out infinite;
  z-index: 0;
}

.hud-ring {
  inset: 0;
  background: conic-gradient(
    from 8deg,
    transparent 0 14%,
    var(--hud-cyan) 15% 20%,
    transparent 21% 34%,
    var(--hud-blue) 35% 39%,
    transparent 40% 64%,
    var(--hud-violet) 65% 70%,
    transparent 70% 100%
  );
  mask: radial-gradient(circle, transparent 0 61%, #000 62% 66%, transparent 67%);
  -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 62% 66%, transparent 67%);
  filter:
    drop-shadow(0 0 0.42rem rgba(49, 215, 255, 0.46))
    drop-shadow(0 0 0.35rem rgba(123, 63, 242, 0.32));
}

.hud-ring::before,
.hud-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hud-ring::before {
  inset: 0.28rem;
  border: 1px solid rgba(11, 99, 246, 0.34);
}

.hud-ring::after {
  inset: 0.72rem;
  border: 1px dotted rgba(49, 215, 255, 0.58);
}

.hud-ring-outer {
  animation: hudSpin 2.8s linear infinite;
}

.hud-ring-middle {
  inset: 0.52rem;
  background: conic-gradient(
    from 90deg,
    transparent 0 18%,
    rgba(49, 215, 255, 0.95) 19% 25%,
    transparent 26% 48%,
    rgba(123, 63, 242, 0.9) 49% 56%,
    transparent 57% 100%
  );
  mask: radial-gradient(circle, transparent 0 54%, #000 55% 61%, transparent 62%);
  -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 61%, transparent 62%);
  animation: hudSpinReverse 3.4s linear infinite;
}

.hud-ring-inner {
  inset: 1.45rem;
  background: repeating-conic-gradient(
    from 12deg,
    rgba(11, 99, 246, 0.12) 0 4deg,
    rgba(11, 99, 246, 0.8) 5deg 8deg,
    transparent 9deg 16deg
  );
  mask: radial-gradient(circle, transparent 0 50%, #000 51% 58%, transparent 59%);
  -webkit-mask: radial-gradient(circle, transparent 0 50%, #000 51% 58%, transparent 59%);
  animation: hudScanSpin 1.65s linear infinite;
}

.hud-network {
  position: absolute;
  inset: 0.72rem;
  z-index: 1;
  color: var(--hud-cyan);
  opacity: 0.68;
  overflow: visible;
  animation: hudNetworkPulse 2.2s ease-in-out infinite;
}

.hud-net-lines {
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.42;
  filter: drop-shadow(0 0 0.28rem rgba(49, 215, 255, 0.45));
}

.hud-net-nodes {
  fill: var(--hud-lilac);
  filter:
    drop-shadow(0 0 0.2rem rgba(182, 140, 255, 0.8))
    drop-shadow(0 0 0.34rem rgba(49, 215, 255, 0.42));
}

.hud-orbit {
  left: calc(50% - 0.17rem);
  top: calc(50% - 0.17rem);
  width: 0.34rem;
  height: 0.34rem;
  background: #ffffff;
  box-shadow:
    0 0 0.28rem rgba(255, 255, 255, 0.9),
    0 0 0.55rem rgba(49, 215, 255, 0.72);
  transform-origin: center;
  z-index: 3;
}

.hud-orbit-one {
  animation: hudOrbit 2.4s linear infinite;
}

.hud-orbit-two {
  background: var(--hud-cyan);
  animation: hudOrbitReverse 3.1s linear infinite;
}

.hud-orbit-three {
  left: calc(50% - 0.14rem);
  top: calc(50% - 0.14rem);
  width: 0.28rem;
  height: 0.28rem;
  background: var(--hud-violet);
  animation: hudOrbit 2.8s linear infinite;
}

.hud-scan {
  inset: 1.05rem;
  border: 1px solid rgba(49, 215, 255, 0.28);
  background:
    radial-gradient(circle, transparent 0 58%, rgba(255, 255, 255, 0.32) 59% 60%, transparent 61%),
    conic-gradient(from 230deg, transparent 0 76%, rgba(49, 215, 255, 0.52), rgba(123, 63, 242, 0.38), transparent 93%);
  animation: hudSpin 2.2s linear infinite;
  z-index: 2;
}

.hud-core {
  left: 50%;
  top: 50%;
  width: 1.42rem;
  height: 1.42rem;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0 10%, #7fe8ff 22%, #0b63f6 62%, #7b3ff2 100%);
  box-shadow:
    0 0 0 0.42rem rgba(49, 215, 255, 0.14),
    0 0 0 0.72rem rgba(123, 63, 242, 0.08),
    0 0 1.45rem rgba(11, 99, 246, 0.58),
    inset 0 0 0.35rem rgba(255, 255, 255, 0.72);
  transform: translate(-50%, -50%);
  animation: hudCorePulse 1.45s ease-in-out infinite;
  z-index: 4;
}

@keyframes hudSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hudSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes hudScanSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hudOrbit {
  from {
    transform: rotate(0deg) translate(2.68rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(2.68rem) rotate(-360deg);
  }
}

@keyframes hudOrbitReverse {
  from {
    transform: rotate(360deg) translate(2.22rem) rotate(-360deg);
  }
  to {
    transform: rotate(0deg) translate(2.22rem) rotate(0deg);
  }
}

@keyframes hudNetworkPulse {
  0%, 100% {
    opacity: 0.46;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

@keyframes hudCorePulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes hudGlow {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* ===============================
   BUTTONS
================================ */
.primary-btn,
.secondary-btn {
  display: inline-flex;
  min-height: 3.05rem;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  padding: 0.72rem 1.15rem;
  border-radius: 0.48rem;
  cursor: pointer;
  font-size: 0.94rem;
  font-weight: 600;
  text-align: center;
}

.primary-btn {
  width: 100%;
  border: 1.5px solid var(--blue);
  background: #ffffff;
  color: var(--blue);
}

.primary-btn::before {
  content: none;
}

.secondary-btn {
  width: min(100%, 25rem);
  border: 1.5px solid var(--blue);
  background: #ffffff;
  color: var(--blue);
  font-size: 1rem;
}

.secondary-btn::before {
  content: none;
}

.primary-btn span:last-child,
.secondary-btn span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.button-icon {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
}

.button-icon svg {
  stroke-width: 2.2;
}

.control-card {
  display: flex;
  justify-content: center;
  margin-top: 0.8rem;
  padding: 0.85rem 1.4rem;
}

body[data-training-state^="pronunciation"] .lesson-main {
  gap: 0;
}

body[data-training-state^="pronunciation"] .lesson-topbar,
body[data-training-state^="pronunciation"] #pronounce {
  border-radius: var(--radius);
  overflow: hidden;
}

body[data-training-state^="pronunciation"] #pronounce {
  min-height: 0;
  margin-bottom: 0.8rem;
}

body[data-training-state^="pronunciation"] #pauseContainer {
  margin-top: 1rem;
}

/* ===============================
   LISTENING CARD
================================ */
#ttsPanel {
  min-height: auto;
  padding: 1.45rem 1.5rem 1rem;
}

.hidden-phrase-bar {
  display: flex;
  min-height: 3.65rem;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  border: 1px solid #d5dcff;
  border-radius: 0.55rem;
  background: linear-gradient(90deg, rgba(111, 43, 232, 0.06), rgba(11, 99, 246, 0.03));
  color: #4b5570;
  font-size: 0.98rem;
  font-weight: 500;
}

.hidden-phrase-bar #statusMessageTTS {
  min-width: 0;
  color: #4b5570;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.lock-icon {
  flex: 0 0 auto;
  display: inline-grid;
  width: 1.32rem;
  height: 1.32rem;
  place-items: center;
  color: var(--text);
}

body[data-training-state="reverse"] .hidden-phrase-bar .lock-icon,
body[data-training-state="paused"][data-paused-from="reverse"] .hidden-phrase-bar .lock-icon {
  display: none;
}

.listen-orb {
  position: relative;
  display: grid;
  width: clamp(9.66rem, 14vw, 11.34rem);
  height: clamp(9.66rem, 14vw, 11.34rem);
  place-items: center;
  margin: 0.88rem auto 0.39rem;
  border: 0.29rem solid var(--voice-state-color);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 58%, rgba(var(--voice-state-rgb), 0.08) 59% 63%, transparent 64%),
    #ffffff;
  box-shadow: 0 0 0 0.7rem rgba(var(--voice-state-rgb), 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.chunk-listen-mini {
  position: relative;
  display: grid;
  width: clamp(3.35rem, 8vw, 4.2rem);
  height: clamp(3.35rem, 8vw, 4.2rem);
  place-items: center;
  margin: 0 auto;
  border: 0.14rem solid var(--voice-state-color);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 58%, rgba(var(--voice-state-rgb), 0.08) 59% 63%, transparent 64%),
    #ffffff;
  box-shadow: 0 0 0 0.34rem rgba(var(--voice-state-rgb), 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.chunk-listen-mini .listen-visual {
  top: 45%;
  width: 74%;
}

.chunk-practice-status {
  display: grid;
  justify-items: center;
  gap: 0.58rem;
  margin: 0.1rem auto 0.85rem;
}

.listen-visual {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(68%, 11.2rem);
  height: auto;
  color: var(--voice-state-color);
  overflow: visible;
  transform: translate(-50%, -50%);
  transition: color 0.25s ease;
}

.listen-visual .listen-waves {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.listen-visual .listen-mic,
.listen-visual .listen-result {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.listen-visual .listen-result {
  opacity: 0;
  transform: scale(0.86);
}

body[data-voice-result] .listen-visual .listen-mic {
  opacity: 0;
  transform: scale(0.9);
}

body[data-voice-result="correct"] .listen-visual .listen-result-correct,
body[data-voice-result="incorrect"] .listen-visual .listen-result-incorrect {
  opacity: 1;
  transform: scale(1);
}

.listen-visual .wave-bar {
  transform: scaleY(0.78);
  transform-box: fill-box;
  transform-origin: center;
}

body[data-training-state="listening"] .listen-visual .listen-waves {
  opacity: 1;
}

body[data-training-state="listening"] .listen-visual .wave-bar {
  animation: listenWave 1s ease-in-out infinite;
}

.listen-visual .wave-bar:nth-child(1),
.listen-visual .wave-bar:nth-child(8) { animation-delay: 0.05s; }
.listen-visual .wave-bar:nth-child(2),
.listen-visual .wave-bar:nth-child(7) { animation-delay: 0.14s; }
.listen-visual .wave-bar:nth-child(3),
.listen-visual .wave-bar:nth-child(6) { animation-delay: 0.23s; }
.listen-visual .wave-bar:nth-child(4),
.listen-visual .wave-bar:nth-child(5) { animation-delay: 0.32s; }

@keyframes listenWave {
  0%, 100% { transform: scaleY(0.72); opacity: 0.7; }
  50% { transform: scaleY(1.16); opacity: 1; }
}

#statusMessageTTS {
  font-size: 0.98rem;
  font-weight: 600;
}

.reverse-correction {
  width: min(34rem, 88%);
  margin: 0.45rem auto 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid #bfd3ff;
  border-radius: 0.8rem;
  background: linear-gradient(90deg, rgba(111, 43, 232, 0.06), rgba(11, 99, 246, 0.04));
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.reverse-correction .student-said {
  margin-bottom: 0.5rem;
}

.reverse-correction .explanation-en {
  font-size: 1rem;
}

.attempt-progress {
  width: min(13.5rem, 72%);
  margin: 1.7rem auto 0.1rem;
}

.sound-icon {
  display: inline-grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  color: #0b63f6;
}

/* ===============================
   PRONUNCIATION
================================ */
#pronounce {
  min-height: 0;
  padding: 1.45rem 1.65rem 1.15rem;
  border-radius: var(--radius);
}

.pronounce-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  margin-bottom: 0.7rem;
  text-align: center;
}

.pronounce-title h3 {
  margin: 0;
  color: #0b63f6;
  font-size: 1.18rem;
  font-weight: 650;
}

.practice-chunks {
  display: grid;
  gap: 1rem;
  margin: 0.65rem 0 0.75rem;
}

.practice-chunk {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  min-height: 4.6rem;
  gap: 1.35rem;
  padding: 0.9rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #ffffff;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 650;
}

.practice-chunk::before {
  content: attr(data-index);
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 50%;
  background: #eef0f5;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 650;
}

.practice-chunk::after {
  content: none;
}

.practice-chunk.active {
  border: 1.5px solid #0b63f6;
  background: linear-gradient(90deg, rgba(11, 99, 246, 0.05), rgba(255, 255, 255, 0.8));
}

.practice-chunk.active::before {
  background: linear-gradient(135deg, #155df5, #0b46e8);
  color: #ffffff;
}

.practice-copy {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.practice-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.practice-guide {
  display: block;
  color: #5d6880;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.practice-guide span {
  color: #0b63f6;
  font-weight: 750;
}

.practice-speaker {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  color: #657085;
}

.practice-chunk.active .practice-speaker {
  color: #0b63f6;
}


.chunk-success-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto;
}

.chunk-success-progress span {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: #d9dde6;
}

.chunk-success-progress span.active {
  background: #0b63f6;
}

#statusMessagePronounce {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 700;
  margin-top: 0.35rem;
}

#statusMessagePronounce:empty {
  display: none;
}

.pronounce-help {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #2767d8;
  font-size: 0.95rem;
}

body[data-training-state^="pronunciation"] .lesson-topbar {
  margin-bottom: 0.8rem;
  border-radius: var(--radius);
}

body[data-training-state^="pronunciation"] #pronounce {
  min-height: 0;
  padding: 1.45rem 1.65rem 1.15rem;
  border-radius: var(--radius);
}

/* ===============================
   SIDE PANEL
================================ */
.lesson-side {
  position: sticky;
  top: 6.35rem;
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 1.08rem;
  padding: 1.4rem;
}

.mode-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.92rem;
  font-size: 0.94rem;
}

.mode-row > span:nth-child(2) {
  min-width: 0;
  text-align: left;
}

.mode-row strong {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.mode-row strong,
.fact-row strong {
  color: var(--purple);
  font-weight: 650;
}

.side-icon {
  width: 1.45rem;
  height: 1.45rem;
  color: var(--blue);
}

.target-icon {
  color: var(--blue);
}

.cost-side-icon {
  color: var(--blue);
}

.target-icon svg {
  stroke-width: 2.25;
}

.side-facts {
  display: grid;
  gap: 1.15rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--line);
}

.fact-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.88rem;
  color: var(--text);
  font-size: 0.92rem;
}

.fact-row span:nth-child(2) {
  min-width: 0;
}

.attempt-dots {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.attempt-dots span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #d9dde6;
}

.attempt-dots span.active {
  background: #0b63f6;
}

.flow-list {
  display: grid;
  gap: 1rem;
}

.flow-list > strong {
  color: #0b63f6;
}

.flow-status,
.flow-sentences {
  display: grid;
  gap: 1rem;
}

.flow-sentence-card {
  display: grid;
  gap: 0.62rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #ffffff;
}

.flow-sentence-card span {
  color: #0b63f6;
  font-size: 0.94rem;
  font-weight: 650;
}

.flow-sentence-card:nth-of-type(2) span {
  color: var(--purple);
}

.flow-sentence-card p {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: 1.45rem;
  top: -1rem;
  height: 1rem;
  border-left: 2px dashed #b9c0cf;
}

.flow-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #eef0f4;
  color: var(--blue);
}

.flow-icon svg {
  width: 1.28rem;
  height: 1.28rem;
  stroke-width: 2.2;
}

.flow-step.active .flow-icon {
  background: linear-gradient(135deg, #6f2be8, #0b63f6);
  color: #ffffff;
}

.flow-step p {
  font-weight: 650;
}

.flow-step small {
  display: block;
  margin-top: 0.25rem;
  color: #66708c;
}

/* ===============================
   UTILITIES
================================ */
.student-said {
  margin-bottom: 0.65rem;
  color: #66708c;
  font-style: italic;
}

.explanation-en {
  color: #0b63f6;
  font-weight: 650;
}

.translate-popup {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 50;
  max-width: calc(100vw - 2rem);
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  background: var(--text);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.5rem);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.translate-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hidden {
  display: none !important;
}

/* ===============================
   DARK COURSE THEME
================================ */
.top-bar {
  border-bottom-color: var(--line);
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(14px);
}

.brand-title strong,
.header-metric strong,
.star-icon,
.side-icon,
.target-icon,
.cost-side-icon,
.sound-icon,
.flow-list > strong,
.explanation-en,
.practice-guide span,
.practice-chunk.active .practice-speaker,
.panel-kicker,
.pronounce-title h3,
#exerciseConfig .status:not(:empty) {
  color: var(--blue);
}

.header-metric.brand-credits span:last-child,
.student-said,
.flow-step small,
.practice-guide,
.practice-speaker {
  color: var(--muted);
}

.menu-btn {
  background: transparent;
  color: var(--text);
}

.menu-dropdown {
  background: var(--surface);
  box-shadow: var(--shadow);
}

.menu-dropdown a,
.menu-dropdown button {
  background: transparent;
  color: var(--text);
}

.menu-dropdown a:hover,
.menu-dropdown button:hover {
  background: rgba(49, 215, 255, 0.12);
}

.setup-panel,
.lesson-topbar,
.exercise-card,
.control-card,
.lesson-side,
.flow-sentence-card,
.practice-chunk {
  border-color: var(--line);
  background: rgba(2, 11, 18, 0.96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
}

body[data-training-state="generating"] .setup-panel {
  background: transparent;
  box-shadow: none;
}

.form-group label,
.tts-label,
.flow-sentence-card p,
.fact-row,
.flow-step p,
#statusMessagePronounce,
.status,
.statusPronounce {
  color: var(--text);
}

.form-group select {
  border-color: var(--line-strong);
  background: #020b12;
  color: var(--text);
}

.form-group select option {
  background: #020b12;
  color: var(--text);
}

.primary-btn,
.secondary-btn {
  border-color: var(--blue);
  background: #020b12;
  color: var(--text);
}

.primary-btn:hover,
.secondary-btn:hover {
  background: rgba(49, 215, 255, 0.12);
}

.progress-track,
.chunk-success-progress span,
.attempt-dots span {
  background: #102230;
}

.progress-track span,
.chunk-success-progress span.active,
.attempt-dots span.active {
  background: var(--blue);
}

.hidden-phrase-bar,
.reverse-correction {
  border-color: rgba(49, 215, 255, 0.34);
  background: linear-gradient(90deg, rgba(49, 215, 255, 0.12), rgba(143, 99, 255, 0.1));
}

.hidden-phrase-bar,
.hidden-phrase-bar #statusMessageTTS,
.reverse-correction {
  color: var(--text);
}

.listen-orb,
.chunk-listen-mini {
  background:
    radial-gradient(circle at center, #061522 0 58%, rgba(var(--voice-state-rgb), 0.16) 59% 63%, transparent 64%),
    #020b12;
  box-shadow: 0 0 0 0.7rem rgba(var(--voice-state-rgb), 0.11);
}

.chunk-listen-mini {
  box-shadow: 0 0 0 0.34rem rgba(var(--voice-state-rgb), 0.11);
}

.practice-chunk::before,
.flow-icon {
  background: #102230;
  color: var(--text);
}

.practice-chunk.active {
  border-color: var(--blue);
  background: linear-gradient(90deg, rgba(49, 215, 255, 0.14), rgba(2, 11, 18, 0.96));
}

.practice-chunk.active::before,
.flow-step.active .flow-icon {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #001018;
}

.flow-sentence-card span,
.flow-sentence-card:nth-of-type(2) span,
#rateValue {
  color: var(--purple);
}

.mode-row strong,
.fact-row strong {
  color: var(--text);
}

.flow-step + .flow-step::before {
  border-left-color: rgba(169, 196, 216, 0.45);
}

.translate-popup {
  border: 1px solid var(--line);
  background: #020b12;
  color: var(--text);
}

/* Keep the global navigation visually consistent with the original header. */
.top-bar {
  border-bottom-color: #dde3ee;
  background: #ffffff;
}

.brand-title,
.user-info,
.header-metric,
.header-metric span:last-child,
.user-icon,
.menu-btn {
  color: #111827;
}

.brand-title strong {
  color: #4f62ff;
}

.header-metric.brand-credits span:last-child {
  color: #4b5570;
}

.header-metric strong {
  color: #155df5;
}

.header-metric + .header-metric {
  border-left-color: #dde3ee;
}

.menu-btn {
  background: #ffffff;
}

.menu-dropdown {
  border-color: #dde3ee;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.08);
}

.menu-dropdown a,
.menu-dropdown button {
  background: #ffffff;
  color: #111827;
}

.menu-dropdown a:hover,
.menu-dropdown button:hover {
  background: #f2f5fb;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1180px) {
  .top-bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.8rem;
  }

  .lesson-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lesson-side {
    position: static;
  }

  .lesson-main {
    order: 1;
  }

  .lesson-side {
    order: 2;
  }
}

@media (max-width: 760px) {
  .top-bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.55rem;
    min-height: auto;
    padding: calc(0.5rem + env(safe-area-inset-top)) 0.8rem 0.5rem;
  }

  .brand-mark {
    width: min(13rem, 43vw);
    max-width: 43vw;
    gap: 0.5rem;
    overflow: hidden;
  }

  .brand-logo {
    width: 2rem;
    height: 2rem;
  }

  .brand-copy {
    gap: 0.34rem;
    overflow: hidden;
  }

  .brand-title {
    font-size: 1.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-metric.brand-credits span:last-child {
    font-size: 0.68rem;
  }

  .header-metric.brand-credits strong {
    font-size: 0.76rem;
  }

  .user-info {
    justify-self: center;
    gap: 0.3rem;
    max-width: 10.6rem;
    font-size: 0.74rem;
  }

  .header-metric {
    gap: 0.45rem;
  }

  .header-metric + .header-metric {
    padding-left: 0.75rem;
  }

  .metric-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .header-metric span:last-child {
    font-size: 0.72rem;
  }

  .header-metric strong {
    font-size: 0.86rem;
  }

  .menu-btn {
    width: 2.2rem;
    min-height: 2.2rem;
    font-size: 1.55rem;
  }

  .container {
    padding: 1rem 0.8rem;
  }

  .lesson-topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #ttsPanel {
    min-height: auto;
  }

  .listen-orb {
    width: min(36.89vw, 8.57rem);
    height: min(36.89vw, 8.57rem);
  }

  #pronounce {
    min-height: auto;
  }

  .practice-chunk {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.45rem;
    gap: 1rem;
  }

  .flow-sentence-card p {
    font-size: 1.22rem;
  }
}

@media (max-width: 480px) {
  .top-bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    padding-right: 0.65rem;
    padding-left: 0.65rem;
  }

  .brand-mark {
    width: min(10rem, 42vw);
    max-width: 42vw;
  }

  .brand-logo {
    width: 1.9rem;
    height: 1.9rem;
  }

  .brand-title {
    font-size: 0.94rem;
  }

  .brand-copy {
    gap: 0.3rem;
  }

  .user-info {
    justify-self: end;
    gap: 0.24rem;
    max-width: 8.8rem;
    font-size: 0.7rem;
  }

  .metric-icon {
    width: 1rem;
    height: 1rem;
  }

  .header-metric.brand-credits span:last-child {
    font-size: 0.62rem;
  }

  .header-metric.brand-credits strong {
    font-size: 0.72rem;
  }

  .header-metric span:last-child {
    font-size: 0.66rem;
  }

  .header-metric strong {
    font-size: 0.78rem;
  }

  .setup-panel,
  .exercise-card,
  .lesson-side {
    padding: 1rem;
  }

  .lesson-topbar {
    padding: 1rem;
  }

  .hidden-phrase-bar {
    font-size: 0.92rem;
  }

  #statusMessageTTS {
    font-size: 0.92rem;
  }

  .attempt-progress {
    width: min(13rem, 86%);
  }

  .secondary-btn,
  .primary-btn {
    width: 100%;
  }
}