:root {
  --bg: #f5f7f2;
  --panel: #ffffff;
  --ink: #18211d;
  --muted: #66736d;
  --line: #d8ded4;
  --accent: #2e6f63;
  --accent2: #8a5f2a;
  --soft: #eef3ea;
  --danger: #a43c36;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

button, input, textarea, select {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.app {
  display: grid;
  grid-template-columns: minmax(300px, 390px) 1fr;
  min-height: 100vh;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: #fbfcf8;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100vh;
}

.brand h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}

.brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.searchBox {
  display: grid;
  gap: 10px;
}

#searchInput {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--panel);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.segmented.wide,
.segmented.practiceModes {
  max-width: 360px;
}

.segmented.wide {
  grid-template-columns: repeat(2, 1fr);
}

.segmented.practiceModes {
  grid-template-columns: repeat(4, 1fr);
  max-width: 680px;
}

.segmented.practiceRoundModes {
  grid-template-columns: repeat(3, 1fr);
  max-width: 520px;
  margin-top: 10px;
}

.segmented button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.segmented button.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.filters button {
  min-height: 34px;
  border-radius: 8px;
  font-size: 13px;
}

.filters button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef6f1;
}

.resultList {
  overflow: auto;
  display: grid;
  gap: 6px;
  padding-right: 2px;
}

.wordItem {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel);
  text-align: left;
}

.wordItem.active {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.wordItem strong {
  display: block;
  font-size: 17px;
}

.wordItem span {
  color: var(--muted);
  font-size: 13px;
  display: block;
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.detail {
  padding: 22px;
  min-width: 0;
}

.topTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.topTabs button {
  height: 38px;
  border-radius: 8px;
  padding: 0 18px;
}

.navLink,
.navCurrent {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
}

.navLink:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.navCurrent {
  color: var(--accent);
  border-color: var(--accent);
  background: #eef6f1;
}

.hiddenTab {
  display: none;
}

.topTabs button.active {
  color: var(--accent);
  border-color: var(--accent);
  background: #eef6f1;
}

.panel { display: none; }
.panel.active { display: block; }

.wordHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--line);
}

.posTag {
  color: var(--accent2);
  font-size: 14px;
  margin-bottom: 6px;
}

.wordHero h2 {
  margin: 0;
  font-size: clamp(42px, 7vw, 82px);
  line-height: .95;
  letter-spacing: 0;
}

.phonetics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--muted);
}

.phonetics span {
  padding: 6px 8px;
  background: var(--soft);
  border-radius: 6px;
}

.actions {
  display: flex;
  gap: 8px;
}

.iconButton {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--accent);
  font-size: 18px;
}

.meaning {
  font-size: 30px;
  line-height: 1.25;
  padding: 22px 0;
}

.infoBlock {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}

.infoBlock h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--muted);
}

.infoBlock p {
  margin: 0;
  line-height: 1.7;
  max-width: 780px;
}

.examples {
  display: grid;
  gap: 8px;
}

.exampleLine {
  padding: 12px;
  border-radius: 8px;
  background: var(--soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.exampleLine button {
  min-width: 36px;
  border-radius: 6px;
  color: var(--accent);
}

.practiceCard {
  max-width: 760px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
  margin-bottom: 18px;
}

.taskBuilder {
  max-width: 820px;
  border-top: 1px solid var(--line);
  padding: 18px 0 22px;
}

.taskBuilder h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.taskBuilder p,
.taskStatus {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.taskInputRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 12px 0 8px;
}

.taskInputRow input,
.practiceInput {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.taskInputRow input {
  height: 42px;
  padding: 0 12px;
}

.taskInputRow button {
  height: 42px;
  padding: 0 16px;
  border-radius: 8px;
}

.taskList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.taskChip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.taskChip button {
  border: 0;
  min-height: 34px;
  background: transparent;
}

.taskWord {
  padding: 0 10px;
  color: var(--accent);
  font-weight: 650;
}

.taskSpeak,
.taskRemove {
  width: 34px;
  border-left: 1px solid var(--line) !important;
}

.taskRemove {
  color: var(--danger);
  font-size: 18px;
}

.emptyTask {
  width: 100%;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.practiceMeta {
  color: var(--muted);
  margin-bottom: 10px;
}

.practicePrompt {
  min-height: 90px;
}

.practicePromptMain {
  max-width: 900px;
  font-size: 44px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.practicePromptNote {
  margin-top: 12px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.practiceInput {
  width: min(100%, 520px);
  height: 48px;
  padding: 0 13px;
  margin-top: 18px;
  font-size: 20px;
}

.practiceAnswer {
  min-height: 54px;
  margin: 18px 0;
  font-size: 24px;
  color: var(--accent);
  line-height: 1.45;
}

.practiceAnswer.wrong {
  color: var(--danger);
}

.practiceAnswer.correct {
  color: var(--accent);
}

.practiceReviewStatus {
  min-height: 24px;
  margin: -4px 0 18px;
  color: var(--muted);
  font-size: 14px;
}

.practiceControls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.taskCore {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
}

@media (max-width: 640px) {
  .practicePromptMain {
    font-size: 32px;
  }

  .practicePromptNote {
    font-size: 16px;
  }
}

.practiceControls button,
.formActions button,
.importExport button,
.fileButton {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
}

.entryForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
}

.entryForm input,
.entryForm textarea,
.entryForm select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
}

.entryForm textarea {
  min-height: 90px;
  resize: vertical;
  grid-column: span 2;
}

.formActions,
.importExport {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  grid-column: span 2;
}

#deleteEntry {
  color: var(--danger);
}

.fileButton {
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
}

.fileButton input {
  display: none;
}

.importExport {
  margin-top: 18px;
}

.practiceApp {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px;
}

.practiceNav {
  margin-bottom: 20px;
}

.practiceOnly,
.practiceOnlyModes {
  max-width: 900px;
}

.courseApp {
  max-width: 1040px;
}

.courseHeader {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  border-top: 1px solid var(--line);
  padding: 22px 0;
}

.courseHeader h1 {
  margin: 0;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  letter-spacing: 0;
}

.courseHeader p {
  margin: 10px 0 0;
  color: var(--muted);
}

.courseStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 8px;
  min-width: min(100%, 340px);
}

.courseStats div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.courseStats strong,
.courseStats span {
  display: block;
}

.courseStats strong {
  font-size: 24px;
  color: var(--accent);
}

.courseStats span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.coursePanel {
  max-width: 960px;
}

.coursePrompt {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.12;
  min-height: 76px;
}

.courseHint {
  min-height: 30px;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.phraseApp {
  max-width: 1080px;
}

.phrasePanel {
  max-width: 960px;
}

.phrasePrompt {
  min-height: 70px;
}

.phraseListSection {
  max-width: 960px;
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 18px;
}

.phraseListSection h2 {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 18px;
}

.phraseList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.phraseItem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.phraseItem strong,
.phraseItem span {
  display: block;
}

.phraseItem strong {
  font-size: 20px;
  color: var(--accent);
}

.phraseItem span {
  margin-top: 3px;
  color: var(--ink);
}

.phraseItem p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.phraseItem button {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.courseInput {
  width: min(100%, 680px);
}

.fullDayApp {
  max-width: 1120px;
}

.fullDayHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding: 28px 0 20px;
}

.fullDayHeader h1 {
  margin: 6px 0 0;
  max-width: 780px;
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.04;
  letter-spacing: 0;
}

.fullDayStats {
  min-width: 126px;
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 14px;
}

.fullDayStats strong,
.fullDayStats span {
  display: block;
}

.fullDayStats strong {
  color: var(--accent);
  font-size: 26px;
}

.fullDayStats span {
  margin-top: 2px;
  color: var(--muted);
}

.fullDayToolbar,
.fullDayCardTop,
.fullDayTextHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.fullDayToolbar {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.fullDayModes {
  width: min(100%, 540px);
}

.fullDaySections {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.fullDaySectionButton {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  text-align: left;
}

.fullDaySectionButton strong,
.fullDaySectionButton span {
  display: block;
}

.fullDaySectionButton strong {
  color: var(--ink);
  font-size: 17px;
}

.fullDaySectionButton span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.fullDaySectionButton.active {
  border-color: var(--accent);
  background: var(--soft);
}

.fullDayCard {
  max-width: none;
  min-height: 420px;
}

.fullDayCounter {
  margin-top: 3px;
  color: var(--muted);
  font-size: 15px;
}

.fullDayPlayButton {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  color: var(--accent);
  font-size: 21px;
}

.fullDayChinese {
  margin-top: 28px;
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 750;
  line-height: 1.2;
}

.fullDayEnglish {
  margin-top: 20px;
  color: var(--accent);
  font-size: clamp(25px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.28;
}

.fullDayWord {
  display: inline;
  min-width: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  padding: 0 2px;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, text-decoration-color 120ms ease;
}

.fullDayWord:hover,
.fullDayWord:focus-visible {
  outline: none;
  background: #e8f0e8;
  text-decoration-color: currentColor;
}

.fullDayWord.speaking {
  background: #d6e8dc;
  color: #185d50;
  text-decoration-color: currentColor;
}

.fullDayListeningPrompt {
  margin-top: 34px;
  color: var(--muted);
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 700;
}

.fullDayInput {
  width: 100%;
  min-height: 128px;
  margin-top: 26px;
  resize: vertical;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.35;
}

.fullDayFeedback {
  min-height: 44px;
  margin-top: 18px;
  font-size: 20px;
}

.fullDayFeedback.correct {
  color: var(--accent);
}

.fullDayFeedback.wrong {
  color: #a44a3f;
}

.fullDayFeedback.answerShown {
  color: #8a5a20;
}

.fullDayControls {
  margin-top: 22px;
}

.fullDayTextSection {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 26px;
}

.fullDayTextHeader h2 {
  margin: 4px 0 0;
  font-size: 30px;
}

.fullDaySentenceList {
  margin-top: 18px;
}

.fullDaySentence {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.fullDaySentence.current {
  background: var(--soft);
}

.fullDaySentenceNumber,
.fullDaySentencePlay {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  padding: 0;
}

.fullDaySentenceNumber {
  color: var(--muted);
  font-weight: 700;
}

.fullDaySentenceEnglish,
.fullDaySentenceChinese {
  margin: 0;
  line-height: 1.45;
}

.voaApp {
  max-width: 1280px;
}

.voaHeader,
.voaLessonBar,
.voaVideoSection,
.voaVideoInfo,
.voaProgressBox {
  display: flex;
}

.voaHeader {
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 42px 0 28px;
}

.voaHeader h1 {
  margin: 4px 0 8px;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0;
}

.voaHeader p,
.voaCredit {
  color: var(--muted);
}

.voaProgressBox {
  min-width: 130px;
  flex-direction: column;
  align-items: flex-end;
}

.voaProgressBox strong {
  font-size: 28px;
}

.voaLessonBar {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.voaLessonBar label {
  font-weight: 700;
}

.voaLessonBar select {
  min-width: 280px;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font: inherit;
}

.voaVideoSection {
  align-items: stretch;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.voaVideoSection video {
  width: min(72%, 880px);
  aspect-ratio: 16 / 9;
  background: #111;
}

.voaVideoInfo {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.voaVideoInfo h2 {
  margin: 8px 0 18px;
  font-size: 30px;
  letter-spacing: 0;
}

.voaVideoInfo a {
  color: var(--accent);
  font-weight: 700;
}

.voaToolbar {
  margin-top: 24px;
}

.voaPracticeCard {
  margin-top: 24px;
}

.voaSpeakerLabel {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.voaCredit {
  padding: 28px 0 48px;
  font-size: 14px;
}

@media (max-width: 760px) {
  .voaHeader,
  .voaLessonBar,
  .voaVideoSection {
    align-items: stretch;
    flex-direction: column;
  }

  .voaProgressBox {
    align-items: flex-start;
  }

  .voaLessonBar select,
  .voaVideoSection video {
    width: 100%;
    min-width: 0;
  }

  .voaLessonBar {
    display: flex;
  }
}

.fullDaySentenceEnglish {
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
}

.fullDaySentenceEnglish .fullDayWord {
  text-underline-offset: 3px;
}

.fullDaySentenceChinese {
  margin-top: 5px;
  color: var(--muted);
  font-size: 16px;
}

.courseTools {
  max-width: 960px;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.courseTools div {
  display: grid;
  gap: 5px;
}

.courseTools label {
  color: var(--muted);
  font-size: 13px;
}

.courseTools select {
  height: 40px;
  min-width: 210px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 0 10px;
}

.courseTools button,
.courseTools .fileButton {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
}

.courseMap {
  max-width: 960px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.courseMap h2 {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--muted);
}

.levelMap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.levelItem {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.levelItem strong,
.levelItem span,
.levelItem em {
  display: block;
}

.levelItem strong {
  font-size: 14px;
}

.levelItem span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.levelItem em {
  margin-top: 10px;
  color: var(--accent);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.levelItem:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.levelItem.active {
  border-color: var(--accent);
  background: #eef6f1;
}

.levelItem.active em {
  color: #1f2b25;
}

.levelItem.done {
  border-color: #9ab5aa;
  background: #f0f5ef;
}

.thinkingApp {
  max-width: 1120px;
}

.thinkingHeader h1 {
  margin-bottom: 8px;
}

.thinkingPanel {
  display: grid;
  gap: 18px;
}

.thinkingPrompt {
  font-size: clamp(34px, 6vw, 74px);
  line-height: 1.08;
}

.thinkingBlocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.thinkingBlocks div {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.thinkingBlocks span {
  color: var(--muted);
  font-size: 14px;
}

.thinkingBlocks strong {
  font-size: clamp(20px, 3vw, 30px);
  color: var(--muted);
  line-height: 1.15;
}

.thinkingBlocks.hintShown strong {
  color: var(--accent);
}

.thinkingTools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.thinkingTools button {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 14px;
}

.thinkingTools button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef6f1;
}

.thinkingGuide {
  padding-top: 18px;
}

.thinkingGuide h2 {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 18px;
}

.thinkingGuideGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.thinkingGuideGrid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  display: grid;
  gap: 6px;
}

.thinkingGuideGrid span {
  color: var(--muted);
  line-height: 1.35;
}

.audiobookApp {
  max-width: 900px;
  padding-bottom: 56px;
}

.audiobookHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 8px 0 18px;
}

.audiobookHeader h1 {
  margin: 8px 0 4px;
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.02;
}

.audiobookHeader p {
  margin: 0;
  color: var(--muted);
  font-size: 22px;
}

.audiobookActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.audiobookActions button,
.linePlay,
.shadowLine {
  border-radius: 8px;
}

.audiobookActions button {
  min-height: 46px;
  padding: 0 18px;
  font-weight: 700;
}

.audiobookPanel {
  border-top: 1px solid var(--line);
  padding: 22px 0 6px;
}

.audiobookPanel h2 {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 18px;
}

.offlineAudio {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.offlineAudio audio {
  width: 100%;
}

.downloadAudio {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  background: #eef6f1;
  font-weight: 800;
  text-decoration: none;
}

.storyLines {
  display: grid;
  gap: 14px;
}

.sectionList {
  display: grid;
  gap: 24px;
}

.listeningSection {
  display: grid;
  gap: 12px;
}

.listeningSectionHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.listeningSectionHeader h3 {
  margin: 0;
  font-size: clamp(22px, 4.8vw, 34px);
  line-height: 1.12;
}

.listeningSectionHeader p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.sectionPlay {
  min-height: 42px;
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 0 14px;
  color: var(--accent);
  font-weight: 800;
}

.storyLine {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.sentencePair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: start;
}

.sentencePair + .sentencePair {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sentenceText {
  min-width: 0;
}

.storyEnglish {
  margin: 0;
  font-size: clamp(27px, 5.8vw, 42px);
  line-height: 1.18;
}

.storyChinese {
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 4.4vw, 26px);
  line-height: 1.32;
}

.speakerTag {
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.linePlay {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-weight: 800;
}

.linePlay.playing,
.sectionPlay.playing,
.shadowLine.playing,
.audiobookActions button:active {
  border-color: var(--accent);
  background: #eef6f1;
}

.phraseMark {
  border-radius: 6px;
  padding: 0 .12em;
  color: #6f2d1f;
  background: #ffe9d6;
}

.dailyListeningApp {
  max-width: 940px;
  padding-bottom: 64px;
}

.dailyListeningHeader h1 {
  max-width: 760px;
}

.dailyAudioPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 16px;
  align-items: center;
  margin: 8px 0 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
}

.dailyAudioPanel h2,
.targetWordsPanel h2 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--accent);
}

.dailyAudioPanel p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.4;
}

.dailyAudioPanel audio {
  width: 100%;
}

.targetWordsPanel {
  border-top: 1px solid var(--line);
  padding: 20px 0 4px;
}

.wordGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.wordPill,
.chunkChip {
  min-height: 74px;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  background: #ffffff;
}

.wordPill strong {
  color: #245f55;
  font-size: 21px;
  line-height: 1.15;
}

.wordPillTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wordPillPlay {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #b9ccc3;
  border-radius: 999px;
  color: #245f55;
  background: #eef6f1;
  font-size: 14px;
  line-height: 1;
}

.wordPillMeaning {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
}

.dailyStoryLine {
  background: linear-gradient(180deg, #ffffff, #fbfcf8);
}

.wordMark,
.chunkMark {
  border-radius: 6px;
  padding: 0 .12em;
  cursor: pointer;
}

.wordMark {
  color: #245f55;
  background: #dff2ec;
}

.chunkMark {
  color: #704818;
  background: #ffe7bd;
}

.wordPill.playing,
.wordPill:focus-visible,
.wordMark:focus-visible,
.chunkMark:focus-visible {
  outline: 3px solid rgba(46, 111, 99, .22);
  outline-offset: 3px;
}

.wordPill.playing .wordPillPlay,
.wordMark.playing,
.chunkMark.playing {
  border-color: var(--accent);
  background: #cfe9df;
}

.chunkList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.chunkChip {
  min-height: 54px;
  color: var(--ink);
  font-size: clamp(18px, 3.8vw, 24px);
  line-height: 1.18;
}

.shadowPanel {
  padding-bottom: 28px;
}

.shadowLines {
  display: grid;
  gap: 10px;
}

.shadowLine {
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  text-align: left;
  background: #fbfcf8;
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1.18;
}

.nativeListeningApp {
  max-width: 1040px;
  padding-bottom: 64px;
}

.nativeHeader h1 {
  max-width: 760px;
}

.nativeMediaPanel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: stretch;
  margin: 8px 0 22px;
}

.nativeMediaPanel video,
.nativeAudioBox,
.nativePracticePanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.nativeMediaPanel video {
  width: 100%;
  min-height: 260px;
  object-fit: contain;
  background: #111;
}

.nativeAudioBox {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 16px;
}

.nativeAudioBox h2 {
  margin: 0;
  color: var(--accent);
  font-size: 20px;
}

.nativeAudioBox audio {
  width: 100%;
}

.nativeAudioBox p,
.nativeNotes p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.nativePracticePanel {
  display: grid;
  gap: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.nativeProgress,
.nativeSpeaker {
  color: var(--muted);
  font-weight: 800;
}

.nativeSpeaker {
  color: var(--accent);
  font-size: 18px;
}

.nativePrompt {
  font-size: clamp(30px, 6vw, 58px);
  line-height: 1.12;
  font-weight: 800;
}

.nativeControls {
  margin-top: 0;
}

.nativeLineList {
  display: grid;
  gap: 10px;
}

.nativeLineItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.nativeLineButton {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  text-align: left;
  background: #fbfcf8;
}

.nativeLineButton.active {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.nativeLineItem.active .nativeLineButton {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.nativeLinePlayButton {
  min-width: 88px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}

.nativeLinePlayButton:hover,
.nativeLinePlayButton:focus {
  border-color: var(--accent);
  background: #eef7f1;
}

.nativeLineButton span {
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}

.nativeLineButton strong {
  font-size: clamp(20px, 4vw, 30px);
  line-height: 1.15;
}

.nativeLineButton small {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}

.nativeNotes {
  display: grid;
  gap: 10px;
}

.sheldonLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  margin: 8px 0 22px;
}

.sheldonApp {
  max-width: 1280px;
}

.sheldonVideoPanel,
.sheldonSidePanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.sheldonVideoPanel {
  overflow: hidden;
}

.sheldonVideoWrap {
  position: relative;
  background: #111;
}

.sheldonVideoPanel video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
}

.sheldonSubtitleOverlay {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 54px;
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .58);
  text-align: center;
  pointer-events: none;
}

.sheldonSubtitleOverlay.empty {
  display: none;
}

.overlayEnglish {
  color: #fff;
  font-size: clamp(18px, 2.8vw, 30px);
  line-height: 1.2;
  font-weight: 800;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .7);
}

.overlayChinese {
  color: #f4f8e8;
  font-size: clamp(16px, 2.4vw, 25px);
  line-height: 1.25;
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .7);
}

.overlaySpeaker {
  color: #9ee2d4;
}

.sheldonSidePanel {
  display: grid;
  gap: 14px;
  padding: 16px;
  position: static;
}

.sheldonSidePanel .nativePrompt {
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
}

.sheldonBilingualCard {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
}

.sheldonSidePanel .practiceControls {
  max-width: 760px;
}

.sheldonSpeaker {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.sheldonChinese {
  color: var(--accent);
  font-size: clamp(24px, 4.5vw, 42px);
  line-height: 1.28;
  font-weight: 800;
}

.sheldonAnswerInput {
  width: 100%;
  min-height: 118px;
  padding: 14px;
  resize: vertical;
  line-height: 1.35;
  font-size: clamp(22px, 3.4vw, 32px);
}

.sheldonAnswerCard {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #c8b58f;
  border-radius: 8px;
  background: #fff7e8;
}

.sheldonAnswerCard.hiddenAnswer {
  display: none;
}

.sheldonAnswerLabel {
  color: #8a5f2a;
  font-size: 14px;
  font-weight: 800;
}

.sheldonAnswerText {
  color: var(--ink);
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.16;
  font-weight: 800;
}

.sheldonListHeader {
  display: grid;
  grid-template-columns: auto minmax(220px, 360px);
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.sheldonListHeader h2 {
  margin: 0;
}

.sheldonSearch {
  height: 44px;
}

.sheldonLineList {
  max-height: 680px;
  overflow: auto;
  padding-right: 4px;
}

@media (max-width: 820px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .resultList {
    max-height: 260px;
  }

  .detail {
    padding: 18px;
  }

  .entryForm {
    grid-template-columns: 1fr;
  }

  .entryForm textarea,
  .formActions,
  .importExport {
    grid-column: span 1;
  }

  .topTabs {
    flex-wrap: wrap;
  }

  .audiobookHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .audiobookActions {
    justify-content: stretch;
  }

  .audiobookActions button {
    flex: 1;
  }

  .dailyAudioPanel {
    grid-template-columns: 1fr;
  }

  .nativeMediaPanel {
    grid-template-columns: 1fr;
  }

  .sheldonLayout,
  .sheldonListHeader {
    grid-template-columns: 1fr;
  }

  .nativeLineItem {
    grid-template-columns: 1fr;
  }

  .nativeLinePlayButton {
    min-height: 50px;
  }

  .sheldonSidePanel {
    position: static;
  }

  .sheldonSubtitleOverlay {
    left: 10px;
    right: 10px;
    bottom: 46px;
    padding: 8px 10px;
  }

  .nativeMediaPanel video {
    min-height: 220px;
  }

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

  .listeningSectionHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .sectionPlay {
    width: 100%;
  }

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

  .courseHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .fullDayHeader,
  .fullDayToolbar {
    align-items: stretch;
    flex-direction: column;
  }

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

  .courseStats,
  .levelMap,
  .phraseList,
  .thinkingGuideGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .thinkingBlocks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .phraseList,
  .levelMap,
  .thinkingGuideGrid,
  .wordGrid,
  .chunkList {
    grid-template-columns: 1fr;
  }

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

  .fullDayCard {
    padding: 18px;
  }

  .fullDayControls button {
    flex: 1 1 calc(50% - 8px);
  }

  .fullDaySentence {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 9px;
  }

  .fullDaySentenceNumber,
  .fullDaySentencePlay {
    width: 36px;
    height: 36px;
  }

  .fullDayWord {
    padding: 2px;
  }
}

/* Drama study */
.dramaBody {
  margin: 0;
  color: #eef3ef;
  background: #101412;
}

.dramaApp {
  width: min(1540px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 22px 36px;
  box-sizing: border-box;
}

.dramaNav {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -22px;
  padding: 14px 22px;
  border-bottom: 1px solid #2a322e;
  background: rgba(16, 20, 18, 0.96);
  backdrop-filter: blur(16px);
}

.dramaNav .navLink,
.dramaNav .navCurrent {
  color: #c7d0ca;
  border-color: #38413c;
  background: #171d1a;
}

.dramaNav .navCurrent {
  color: #101412;
  border-color: #71d39f;
  background: #71d39f;
}

.dramaTopbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 2px 18px;
}

.dramaEyebrow {
  margin-bottom: 5px;
  color: #91a099;
  font-size: 14px;
}

.dramaTopbar h1 {
  margin: 0;
  color: #f7faf8;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
}

.dramaTopActions,
.dramaStatusActions,
.dramaAnswerButtons,
.dramaTransport,
.dramaSettings {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dramaApp button,
.dramaApp select,
.dramaApp input,
.dramaApp textarea {
  font: inherit;
  letter-spacing: 0;
}

.dramaApp button {
  color: #e8eeea;
  border: 1px solid #3a443e;
  border-radius: 7px;
  background: #1b221e;
  cursor: pointer;
}

.dramaApp button:hover,
.dramaApp button:focus-visible {
  border-color: #71d39f;
}

.iconTextButton {
  min-height: 40px;
  padding: 0 14px;
}

.dramaStage {
  overflow: hidden;
  border: 1px solid #2d3631;
  border-radius: 8px;
  background: #080a09;
}

.dramaVideoShell {
  position: relative;
  width: 100%;
  min-height: 360px;
  aspect-ratio: 16 / 8.15;
  background: #000;
}

.dramaVideoShell video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.dramaSubtitleOverlay {
  position: absolute;
  right: 4%;
  bottom: 62px;
  left: 4%;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 2px 8px #000, 0 1px 2px #000;
}

.dramaSubtitleOverlay.empty {
  display: none;
}

.dramaEnglish {
  color: #fff;
  font-size: clamp(22px, 2.3vw, 38px);
  font-weight: 700;
  line-height: 1.3;
}

.dramaChinese {
  margin-top: 7px;
  color: #f3f0de;
  font-size: clamp(17px, 1.6vw, 26px);
  line-height: 1.35;
}

.dramaRevealButton {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: none;
  min-height: 38px;
  padding: 0 13px;
  background: rgba(12, 16, 14, 0.82) !important;
}

.dramaRevealButton.visible {
  display: block;
}

.dramaControlBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border-top: 1px solid #2d3631;
  background: #171d1a;
}

.squareButton {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  font-size: 24px !important;
}

.playButton {
  min-width: 126px;
  height: 40px;
  padding: 0 16px;
  color: #0f1712 !important;
  border-color: #71d39f !important;
  background: #71d39f !important;
  font-weight: 700 !important;
}

.compactSelect {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9eaaa3;
  font-size: 13px;
}

.compactSelect select {
  min-height: 36px;
  padding: 0 28px 0 9px;
  color: #e8eeea;
  border: 1px solid #3a443e;
  border-radius: 6px;
  background: #101512;
}

.subtitleSegments,
.dramaModeTabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border: 1px solid #343d38;
  border-radius: 7px;
  background: #101512;
}

.subtitleSegments button,
.dramaModeTabs button {
  min-width: 58px;
  min-height: 32px;
  padding: 0 10px;
  color: #aeb8b2;
  border: 0;
  background: transparent;
}

.subtitleSegments button.active,
.dramaModeTabs button.active {
  color: #0e1711;
  background: #71d39f;
}

.dramaStudyGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  min-height: 520px;
  margin-top: 16px;
  border: 1px solid #2d3631;
  border-radius: 8px;
  background: #151b18;
}

.dramaPractice {
  min-width: 0;
  padding: 28px;
}

.dramaProgressRow,
.dramaListHeader,
.dramaDialogHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dramaProgress {
  color: #91a099;
  font-size: 15px;
  font-weight: 700;
}

.dramaStatusActions button,
.dramaAnswerButtons button {
  min-height: 38px;
  padding: 0 13px;
}

.dramaStatusActions button.active {
  color: #9ae5ba;
  border-color: #4c9c70;
  background: #183325;
}

.dramaModeTabs {
  width: min(540px, 100%);
  margin: 26px 0 28px;
}

.dramaModeTabs button {
  min-height: 40px;
}

.dramaSpeaker {
  min-height: 22px;
  color: #71d39f;
  font-size: 14px;
  font-weight: 700;
}

.dramaPrompt {
  margin-top: 10px;
  color: #8f9b94;
  font-size: 15px;
}

.dramaStudyEnglish {
  margin-top: 20px;
  color: #f7faf8;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 650;
  line-height: 1.32;
}

.dramaStudyChinese {
  margin-top: 16px;
  color: #c5cec8;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.45;
}

.fillSentence .missingWord {
  color: #71d39f;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dramaAnswerArea {
  margin-top: 28px;
}

.dramaAnswerArea.hidden {
  display: none;
}

.dramaAnswerArea textarea {
  width: 100%;
  min-height: 116px;
  resize: vertical;
  box-sizing: border-box;
  padding: 16px;
  color: #eff5f1;
  border: 1px solid #3b463f;
  border-radius: 7px;
  outline: none;
  background: #0d1210;
  font-size: 22px;
  line-height: 1.45;
}

.dramaAnswerArea textarea:focus {
  border-color: #71d39f;
  box-shadow: 0 0 0 3px rgba(113, 211, 159, 0.16);
}

.dramaAnswerButtons {
  margin-top: 10px;
}

.dramaFeedback {
  min-height: 26px;
  margin-top: 16px;
  color: #93dcb2;
  line-height: 1.5;
}

.dramaKeyboardHint {
  margin-top: 28px;
  color: #68746d;
  font-size: 13px;
}

.dramaDialoguePanel {
  min-width: 0;
  border-left: 1px solid #2d3631;
  background: #111613;
}

.dramaListHeader {
  padding: 16px;
  border-bottom: 1px solid #2d3631;
}

.dramaListHeader strong,
.dramaListHeader span {
  display: block;
}

.dramaListHeader strong {
  color: #f1f5f2;
}

.dramaListHeader span {
  margin-top: 3px;
  color: #77837c;
  font-size: 12px;
}

.dramaListHeader input {
  width: 190px;
  min-height: 38px;
  padding: 0 11px;
  color: #e9efeb;
  border: 1px solid #354039;
  border-radius: 6px;
  outline: none;
  background: #0d1210;
}

.dramaDialogueList {
  height: 600px;
  overflow: auto;
}

.dramaDialogueItem {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px 13px;
  text-align: left;
  border: 0 !important;
  border-bottom: 1px solid #252d29 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.dramaDialogueItem.active {
  box-shadow: inset 3px 0 #71d39f;
  background: #1b2720 !important;
}

.dramaLineNumber {
  color: #66726b;
  font-size: 12px;
}

.dramaLineText {
  min-width: 0;
}

.dramaLineText strong,
.dramaLineText small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dramaLineText strong {
  color: #e8eee9;
  font-size: 14px;
  line-height: 1.4;
}

.dramaLineText small {
  margin-top: 5px;
  color: #87938c;
  font-size: 12px;
}

.dramaLineState {
  color: #71d39f;
  font-size: 11px;
  white-space: nowrap;
}

.dramaDialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  color: #eef3ef;
  border: 1px solid #3a443e;
  border-radius: 8px;
  background: #151b18;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

.dramaDialog::backdrop {
  background: rgba(3, 5, 4, 0.76);
}

.dramaDialog form {
  padding: 22px;
}

.dramaDialogHeader {
  margin-bottom: 20px;
}

.dramaDialogHeader h2 {
  margin: 0;
  font-size: 24px;
}

.dramaLibraryItem {
  width: 100%;
  display: block;
  padding: 18px !important;
  text-align: left;
}

.dramaLibraryItem span,
.dramaLibraryItem strong,
.dramaLibraryItem small {
  display: block;
}

.dramaLibraryItem span,
.dramaLibraryItem small {
  color: #8f9b94;
}

.dramaLibraryItem strong {
  margin: 5px 0;
  color: #f2f6f3;
  font-size: 18px;
}

.dramaFileField {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: #9da9a2;
}

.dramaFileField input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 8px 10px;
  color: #e7ede9;
  border: 1px solid #38433c;
  border-radius: 6px;
  background: #0e1311;
}

.primaryWideButton {
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  color: #0e1711 !important;
  border-color: #71d39f !important;
  background: #71d39f !important;
  font-weight: 700 !important;
}

@media (max-width: 980px) {
  .dramaControlBar,
  .dramaTopbar {
    align-items: stretch;
    flex-direction: column;
  }

  .dramaSettings {
    flex-wrap: wrap;
  }

  .dramaStudyGrid {
    grid-template-columns: 1fr;
  }

  .dramaDialoguePanel {
    border-top: 1px solid #2d3631;
    border-left: 0;
  }

  .dramaDialogueList {
    height: 420px;
  }
}

@media (max-width: 640px) {
  .dramaApp {
    padding: 0 12px 24px;
  }

  .dramaNav {
    margin: 0 -12px;
    padding: 10px 12px;
  }

  .dramaVideoShell {
    min-height: 220px;
    aspect-ratio: 16 / 9;
  }

  .dramaControlBar {
    padding: 10px;
  }

  .dramaTransport,
  .dramaSettings,
  .dramaTopActions {
    width: 100%;
  }

  .playButton,
  .iconTextButton {
    flex: 1;
  }

  .subtitleSegments {
    width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
  }

  .dramaPractice {
    padding: 20px 16px;
  }

  .dramaProgressRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .dramaModeTabs {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }

  .dramaKeyboardHint {
    display: none;
  }

  .dramaListHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .dramaListHeader input {
    width: 100%;
  }

  .dramaFileField {
    grid-template-columns: 1fr;
  }
}