: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;
}

* {
  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,
textarea {
  font: inherit;
}

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

.hidden {
  display: none !important;
}

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

.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,
.button-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

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

.metric-icon 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);
}

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

.menu-btn {
  display: grid;
  width: 2.7rem;
  min-height: 2.78rem;
  place-items: center;
  color: var(--text);
  border: 0;
  border-radius: 0.35rem;
  background: #ffffff;
  cursor: pointer;
  font-weight: 600;
}

.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;
  color: var(--text);
  border: 0;
  background: #ffffff;
  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;
}

.conversation-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-conversation-state="voice"] .lesson-grid {
  grid-template-columns: minmax(0, 1fr);
  width: min(760px, 100%);
}

body[data-conversation-state="form"] .voice-shell,
body[data-conversation-state="generating"] .voice-shell,
body[data-conversation-state="result"] .voice-shell {
  display: none;
}

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

.setup-panel,
.dialogue-form,
.dialogue-result {
  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 {
  max-width: 600px;
  margin: 0 auto;
  padding: 1.45rem;
}

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

#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;
}

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 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;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 550;
}

.form-group label {
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.24rem;
}

.label-hint {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 450;
}

.tts-label {
  justify-content: space-between;
}

.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;
}

.primary-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;
}

.primary-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;
}

.conversation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(920px, 100%);
  margin: 0 auto;
}

.dialogue-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: 1.45rem;
}

.dialogue-result {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin-top: 1rem;
  padding: 1.45rem;
}

.conversation-generating {
  display: grid;
  min-height: min(56svh, 34rem);
  place-items: center;
}

.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-align: center;
  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 {
  display: block;
  width: min(10.5rem, 72vw);
  aspect-ratio: 1;
  object-fit: contain;
  filter: none;
}

.form-head {
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}

.form-head h3 {
  margin-top: 0.45rem;
  margin-bottom: 0.32rem;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
}

.form-head .panel-kicker {
  font-size: 0.84rem;
  text-align: center;
}

.conversation-history-loading {
  display: grid;
  min-height: min(28svh, 16rem);
  place-items: center;
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(2, 11, 18, 0.92);
}

.conversation-history-loading p {
  margin: 0;
  color: var(--blue);
  font-size: 0.98rem;
  font-weight: 750;
  text-align: center;
}

.conversation-history-loading[data-state="error"] p {
  color: #ff4d6d;
}

.conversation-history-panel {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid rgba(49, 215, 255, 0.22);
  border-radius: 0.75rem;
  background: rgba(11, 31, 42, 0.62);
}

.conversation-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.conversation-history-head h4 {
  margin: 0;
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 750;
}

.conversation-history-head span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 550;
  text-align: right;
}

.conversation-history-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(2.4rem, 1fr));
  gap: 0.5rem;
}

.history-preset-btn,
.history-new-btn {
  min-height: 2.45rem;
  border: 1px solid rgba(49, 215, 255, 0.38);
  border-radius: 0.55rem;
  background: #061723;
  color: var(--text);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
}

.history-preset-btn:not(:disabled):hover,
.history-new-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.history-preset-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.history-new-btn {
  width: 100%;
  color: var(--blue);
}

.required-note {
  margin: -0.35rem 0 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 550;
  text-align: center;
}

.required-note span,
.required-mark {
  color: #ff4d6d;
  font-weight: 750;
}

.conversation-form-grid,
.compact-grid {
  display: grid;
  gap: 1rem;
}

.conversation-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.role-block {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.role-block .form-group {
  margin-bottom: 0;
}

.dialogue-form input,
.dialogue-form textarea {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.68rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.7rem;
  background: #0b1f2a;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 400;
  caret-color: var(--blue);
}

.dialogue-form textarea {
  min-height: 5.6rem;
  resize: vertical;
}

.dialogue-form input::placeholder,
.dialogue-form textarea::placeholder {
  color: #a9c4d8;
  opacity: 1;
}

.dialogue-form input:focus,
.dialogue-form textarea:focus,
.dialogue-form select:focus,
.form-group select:focus {
  border-color: var(--blue);
  outline: 2px solid rgba(49, 215, 255, 0.18);
}

.emotion-field {
  margin-bottom: 0;
}

.conversation-status {
  min-height: 1.25rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 550;
  text-align: center;
}

.conversation-status[data-state="loading"] {
  color: var(--blue);
}

.conversation-status[data-state="success"] {
  color: var(--success);
}

.conversation-status[data-state="error"] {
  color: #ff4d6d;
}

.dialogue-lines {
  display: grid;
  gap: 0.85rem;
}

.dialogue-line {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #0b1f2a;
}

.dialogue-line strong {
  color: var(--blue);
  font-size: 0.84rem;
}

.dialogue-line p {
  margin: 0;
  line-height: 1.38;
}

.dialogue-line-en {
  color: var(--text);
  font-size: 1rem;
  font-weight: 650;
}

.dialogue-line-es {
  color: var(--muted);
  font-size: 0.9rem;
}

.conversation-turn-topbar {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #061723;
}

.conversation-turn-topbar strong {
  color: var(--text);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 650;
  text-align: center;
}

.conversation-turn-track {
  width: min(9.5rem, 58%);
  height: 0.38rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(169, 196, 216, 0.2);
}

.conversation-turn-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 0.25s ease;
}

.conversation-practice-card {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: #061723;
}

.practice-progress,
.practice-pass {
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
}

.practice-pass {
  margin-top: -0.45rem;
  color: #a9c4d8;
  font-weight: 600;
}

.conversation-practice-card h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.06rem, 1.7vw, 1.35rem);
  font-weight: 700;
  text-align: center;
}

.conversation-mic-orb {
  --conversation-mic-color: #52687a;
  --conversation-mic-rgb: 82, 104, 122;
  display: grid;
  width: 3.35rem;
  height: 3.35rem;
  place-items: center;
  justify-self: center;
  border: 0.13rem solid var(--conversation-mic-color);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #061723 0 58%, rgba(var(--conversation-mic-rgb), 0.1) 59% 64%, transparent 65%),
    #061723;
  box-shadow: 0 0 0 0.32rem rgba(var(--conversation-mic-rgb), 0.06);
  color: var(--conversation-mic-color);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.conversation-mic-orb[data-state="listening"] {
  --conversation-mic-color: var(--blue);
  --conversation-mic-rgb: 49, 215, 255;
}

.conversation-mic-orb[data-state="checking"] {
  --conversation-mic-color: var(--purple);
  --conversation-mic-rgb: 143, 99, 255;
}

.conversation-mic-orb[data-state="correct"] {
  --conversation-mic-color: var(--success);
  --conversation-mic-rgb: 34, 255, 115;
}

.conversation-mic-orb[data-state="incorrect"] {
  --conversation-mic-color: var(--danger-warm);
  --conversation-mic-rgb: 249, 115, 22;
}

.conversation-listen-visual {
  width: 2.5rem;
  height: auto;
  color: currentColor;
  overflow: visible;
  transition: color 0.25s ease;
}

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

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

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

.conversation-mic-orb[data-state="correct"] .listen-mic,
.conversation-mic-orb[data-state="incorrect"] .listen-mic {
  opacity: 0;
  transform: scale(0.9);
}

.conversation-mic-orb[data-state="correct"] .listen-result-correct,
.conversation-mic-orb[data-state="incorrect"] .listen-result-incorrect {
  opacity: 1;
  transform: scale(1);
}

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

.conversation-mic-orb[data-state="listening"] .listen-waves {
  opacity: 1;
}

.conversation-mic-orb[data-state="listening"] .wave-bar {
  animation: conversation-listen-wave 1s ease-in-out infinite;
}

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

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

.practice-instruction {
  width: min(620px, 100%);
  margin: -0.35rem auto 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
  text-align: center;
}

.practice-help-list {
  display: grid;
  gap: 0.8rem;
}

.practice-help {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border: 1px solid rgba(49, 215, 255, 0.28);
  border-radius: 0.7rem;
  background: #0b1f2a;
}

.practice-heard-line p strong {
  color: var(--text);
  font-weight: 800;
}

.practice-heard-line small {
  color: #a9c4d8;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.practice-help span,
.practice-status span {
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 750;
}

.practice-help p,
.practice-status p {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.45;
}

.practice-hints ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.4;
}

.practice-hints li::marker {
  color: var(--blue);
}

.practice-help.is-muted p {
  color: #a9c4d8;
}

.practice-model p {
  font-size: 1.08rem;
  font-weight: 700;
}

.practice-grammar-correction {
  border-color: rgba(143, 99, 255, 0.42);
  background: rgba(143, 99, 255, 0.09);
}

.practice-grammar-correction span {
  color: #b9a5ff;
}

.practice-grammar-correction p {
  font-size: 1.04rem;
  font-weight: 700;
}

.practice-grammar-correction strong {
  display: inline-block;
  margin: 0 0.12rem;
  color: var(--text);
  font-weight: 850;
}

.practice-grammar-correction small {
  color: #b8cbe0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
}

.practice-grammar-comparison {
  gap: 0.7rem;
  border-color: rgba(143, 99, 255, 0.42);
  background: rgba(143, 99, 255, 0.09);
}

.grammar-comparison-row {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
}

.practice-help .grammar-comparison-icon {
  display: inline-grid;
  width: 1.42rem;
  height: 1.42rem;
  place-items: center;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
}

.grammar-comparison-row.is-correct .grammar-comparison-icon {
  border: 1px solid rgba(34, 255, 115, 0.62);
  color: var(--success);
  background: rgba(34, 255, 115, 0.08);
}

.grammar-comparison-row.is-student .grammar-comparison-icon {
  border: 1px solid rgba(255, 77, 109, 0.72);
  color: #ff4d6d;
  background: rgba(255, 77, 109, 0.08);
}

.grammar-comparison-row p {
  color: #c9d9e5;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
}

.grammar-comparison-row.is-correct p {
  color: var(--text);
}

.practice-help .grammar-diff-token {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.grammar-comparison-row.is-correct .grammar-diff-token.is-different {
  color: var(--success);
  font-weight: 850;
}

.grammar-comparison-row.is-student .grammar-diff-token.is-different {
  color: #ff4d6d;
  font-weight: 850;
}

.practice-pronunciation-guide {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.55rem;
  padding-top: 0.62rem;
  border-top: 1px solid rgba(49, 215, 255, 0.18);
}

.practice-pronunciation-guide p {
  color: #a9c4d8;
  font-size: 0.96rem;
  font-weight: 550;
}

.practice-pronunciation {
  display: grid;
  gap: 0.45rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.practice-pronunciation li {
  display: grid;
  gap: 0.16rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.55rem;
  background: rgba(49, 215, 255, 0.09);
}

.practice-pronunciation li span {
  color: var(--text);
  font-size: 0.9rem;
}

.practice-pronunciation small {
  color: #a9c4d8;
  font-size: 0.83rem;
  line-height: 1.35;
}

.practice-status {
  display: grid;
  gap: 0.25rem;
  min-height: 4rem;
  align-content: center;
  padding: 0.85rem;
  border: 1px solid rgba(49, 215, 255, 0.22);
  border-radius: 0.7rem;
  background: rgba(2, 11, 18, 0.78);
  text-align: center;
}

.practice-status[data-state="recording"] {
  border-color: #ff4d6d;
}

.practice-status[data-state="success"] {
  border-color: var(--success);
}

.practice-status[data-state="error"] {
  border-color: #ff4d6d;
}

.practice-status[data-state="error"] span {
  color: #ff4d6d;
}

.practice-status[data-state="loading"],
.practice-status[data-state="waiting"],
.practice-status[data-state="listening"],
.practice-status[data-state="paused"] {
  border-color: var(--blue);
}

.practice-status[data-state="success"] p {
  color: var(--success);
}

.practice-status[data-state="error"] p,
.practice-status[data-state="recording"] p {
  color: #ff9ab0;
}

.practice-countdown {
  width: min(34rem, 100%);
  height: 0.42rem;
  margin: 0.42rem auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(169, 196, 216, 0.22);
}

.practice-countdown span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  animation: conversation-countdown var(--conversation-countdown-duration, 10000ms) linear forwards;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--purple));
}

@keyframes conversation-countdown {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.practice-complete {
  min-height: 16rem;
  place-content: center;
}

.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,
.dialogue-form,
.dialogue-result {
  border-color: var(--line);
  background: rgba(2, 11, 18, 0.96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
}

.form-group label,
.tts-label {
  color: var(--text);
}

.panel-kicker {
  color: var(--blue);
}

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

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

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

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

/* 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;
}

@media (max-width: 880px) {
  .conversation-layout,
  .conversation-form-grid,
  .compact-grid {
    grid-template-columns: 1fr;
  }
}

@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;
  }
}

@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;
  }

  .conversation-container {
    padding: 1rem 0.8rem;
  }

  .setup-panel,
  .dialogue-form,
  .dialogue-result {
    padding: 1rem;
  }

  .form-head {
    display: grid;
  }

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

.dialogue-result {
  gap: 1rem;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}