:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
    sans-serif;
  background: #f6f4ee;
  color: #172026;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --panel: #ffffff;
  --panel-soft: #faf9f4;
  --line: #dedbd1;
  --ink: #172026;
  --muted: #667074;
  --brand: #0f766e;
  --brand-ink: #073c39;
  --danger: #b42318;
  --warn: #9a6700;
  --ok: #147a4d;
  --shadow: 0 14px 32px rgba(36, 42, 46, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

body::selection {
  background: #0f766e;
  color: #ffffff;
}

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

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffefa;
  outline: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

textarea {
  min-height: 128px;
  resize: vertical;
}

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

.selector-shell {
  min-height: 100vh;
  background: #f6f4ee;
}

.selector-hero,
.industry-header {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgba(13, 22, 24, 0.88), rgba(13, 22, 24, 0.56), rgba(13, 22, 24, 0.18)),
    var(--cover);
  background-position: center;
  background-size: cover;
}

.selector-hero {
  min-height: 520px;
  padding: 20px 24px 52px;
}

.selector-nav,
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1220px;
  margin: 0 auto;
}

.selector-nav .brand span,
.site-nav .brand span {
  color: rgba(255, 255, 255, 0.74);
}

.selector-nav .brand-mark,
.site-nav .brand-mark {
  background: #ffffff;
  color: #0f3f3b;
}

.selector-copy {
  max-width: 760px;
  margin: 116px auto 0;
  transform: translateX(-230px);
}

.selector-copy h1 {
  max-width: 700px;
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 56px;
  line-height: 1.08;
}

.selector-copy p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 17px;
  line-height: 1.7;
}

.selector-search,
.header-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #2d3b3f;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

.selector-search input,
.header-search input {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.selector-search input:focus,
.header-search input:focus {
  box-shadow: none;
}

.selector-body {
  max-width: 1220px;
  margin: -42px auto 0;
  padding: 0 24px 42px;
}

.cluster-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cluster-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fffefa;
  color: #34444a;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(36, 42, 46, 0.08);
}

.industry-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.industry-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  box-shadow: var(--shadow);
}

.industry-cover {
  min-height: 142px;
  background-color: color-mix(in srgb, var(--accent) 18%, #172026);
  background-position: center;
  background-size: cover;
}

.industry-card-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.cluster-tag {
  width: fit-content;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 75%, #172026);
  background: color-mix(in srgb, var(--accent) 14%, #fffefa);
  font-size: 12px;
  font-weight: 900;
}

.industry-card h2 {
  margin: 0;
}

.industry-card p {
  margin: -4px 0 0;
  color: var(--muted);
}

.industry-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.industry-stats span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 8px;
  background: #f1eee5;
  color: #34444a;
  font-size: 12px;
  font-weight: 800;
}

.wide {
  width: 100%;
}

.industry-site {
  min-height: 100vh;
  background: #f6f4ee;
}

.industry-header {
  min-height: 390px;
  padding: 18px 24px 28px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.industry-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 22px;
  align-items: end;
  max-width: 1220px;
  margin: 74px auto 0;
}

.industry-hero h1 {
  max-width: 760px;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 48px;
}

.industry-hero p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.7;
}

.daily-panel {
  min-height: 168px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
}

.daily-panel span,
.daily-panel p {
  color: rgba(255, 255, 255, 0.78);
}

.daily-panel strong {
  display: block;
  margin: 10px 0;
  color: #ffffff;
  font-size: 54px;
  line-height: 1;
}

.header-search {
  max-width: 1220px;
  margin: 24px auto 0;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: #fffefa;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
  font-weight: 800;
}

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

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

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.sidebar-search input {
  border: 0;
  padding: 0;
  min-width: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar-search input:focus {
  box-shadow: none;
}

.industry-list {
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-right: 4px;
}

.industry-button {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  min-height: 58px;
  border-radius: 8px;
  color: #223036;
  background: transparent;
  text-align: left;
}

.industry-button:hover,
.industry-button.active {
  background: color-mix(in srgb, var(--accent) 11%, #fffefa);
}

.industry-button.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, #dedbd1);
}

.accent-dot {
  width: 10px;
  height: 30px;
  border-radius: 99px;
  background: var(--accent);
}

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

.industry-button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

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

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
}

.eyebrow {
  margin: 0 0 6px;
  color: #64706b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 10px;
  font-size: 31px;
  line-height: 1.16;
}

h2 {
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.24;
}

h3 {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.32;
}

.role-line,
.workflow-pills,
.goal-grid,
.practice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-line span,
.workflow-pills span,
.goal-grid span,
.practice-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffefa;
  color: #405057;
  font-size: 12px;
  line-height: 1.2;
}

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

.status-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.status-ok {
  background: #e5f6ee;
  color: var(--ok);
}

.status-warn {
  background: #fff3d5;
  color: var(--warn);
}

.view-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
}

.view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 7px;
  color: #4d5b60;
  background: transparent;
  white-space: nowrap;
}

.view-tabs button.active {
  color: #fff;
  background: #172026;
}

.view-grid,
.library-page,
.scenario-layout,
.ai-layout,
.listening-layout,
.progress-layout {
  animation: settle 180ms ease-out;
}

@keyframes settle {
  from {
    opacity: 0.68;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 332px;
  align-items: start;
  gap: 16px;
}

.library-page {
  display: grid;
  gap: 16px;
}

.study-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 16px;
}

.word-focus,
.recall-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.word-focus {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 24px;
}

.word-focus::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--accent);
}

.word-focus h2 {
  margin-top: 18px;
  margin-bottom: 8px;
  color: #10191d;
  font-size: 44px;
  line-height: 1.08;
}

.word-focus > strong {
  display: block;
  margin-bottom: 14px;
  color: color-mix(in srgb, var(--accent) 76%, #172026);
  font-size: 22px;
}

.word-focus > p {
  max-width: 720px;
  color: #405057;
  font-size: 16px;
  line-height: 1.65;
}

.word-focus .example-line {
  margin: 24px 0 14px;
  padding: 14px;
  border: 1px solid #ece8dc;
  border-radius: 8px;
  background: #fffefa;
  font-size: 15px;
}

.recall-panel {
  padding: 20px;
}

.recall-panel h3 {
  font-size: 28px;
}

.recall-panel input {
  height: 46px;
  padding: 0 12px;
}

.metric-row,
.section-head,
.term-grid {
  grid-column: 1;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}

.metric-card {
  min-height: 88px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  line-height: 1;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 12px;
}

.section-head.compact {
  margin-top: 0;
  margin-bottom: 12px;
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.term-card,
.quiz-panel,
.scenario-main,
.coach-panel,
.ai-form,
.generated-output,
.listening-form,
.preset-list,
.loop-board,
.progress-columns > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.term-card {
  display: flex;
  flex-direction: column;
  min-height: 282px;
  padding: 14px;
}

.term-card.mastered {
  border-color: #98d3b4;
  background: #fbfffc;
}

.term-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.level,
.task {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.level {
  color: #0b5f59;
  background: #dff5f1;
}

.task {
  overflow: hidden;
  max-width: 150px;
  color: #6d4a00;
  background: #fff1c2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-card h3 {
  margin-bottom: 4px;
  color: #10191d;
  font-size: 19px;
}

.term-card > strong {
  margin-bottom: 10px;
  color: #274246;
}

.term-card p {
  color: #4f5d62;
  line-height: 1.56;
}

.example-line {
  margin-top: auto;
  padding: 10px 0;
  border-top: 1px solid #ece8dc;
  color: #263a40;
  font-size: 13px;
  line-height: 1.5;
}

.term-actions,
.button-row,
.voice-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button,
.soft-button,
.primary,
.button-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border-radius: 8px;
  font-weight: 800;
}

.icon-button {
  width: 36px;
  color: #44545a;
  background: #f1eee5;
}

.icon-button:hover,
.icon-button.active {
  color: #fff;
  background: #172026;
}

.soft-button,
.button-row button {
  padding: 8px 12px;
  color: #1f3136;
  background: #ece7db;
}

.primary {
  padding: 9px 14px;
  color: #fff;
  background: #0f766e;
}

.quiz-panel {
  position: sticky;
  top: 18px;
  grid-column: 2;
  grid-row: 1 / span 4;
  padding: 16px;
}

.quiz-body span {
  display: inline-flex;
  margin-bottom: 10px;
  color: #7a5712;
  font-size: 12px;
  font-weight: 800;
}

.quiz-body input {
  height: 42px;
  padding: 0 12px;
}

.answer-box {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #d7e7e4;
  border-radius: 8px;
  background: #f3fbf8;
}

.answer-box p {
  margin-bottom: 6px;
  color: #405057;
  font-size: 13px;
  line-height: 1.45;
}

.scenario-layout {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr) 326px;
  align-items: start;
  gap: 16px;
}

.scenario-list,
.preset-list {
  display: grid;
  gap: 8px;
}

.scenario-tab,
.preset-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border-radius: 8px;
  color: #34444a;
  background: #fffefa;
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--line);
}

.scenario-tab.active,
.preset-list button:hover {
  color: #fff;
  background: #172026;
  box-shadow: none;
}

.scenario-main,
.coach-panel,
.ai-form,
.generated-output,
.listening-form,
.preset-list,
.progress-columns > div {
  padding: 16px;
}

.briefing-block {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: #f0f7f6;
  color: #163c3a;
}

.briefing-block p {
  margin: 6px 0 0;
  line-height: 1.55;
}

.goal-grid {
  margin: 12px 0;
}

.dialogue-stream {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.dialogue-turn,
.compact-turn {
  max-width: 84%;
  padding: 11px 12px;
  border-radius: 8px;
  background: #f3efe5;
}

.dialogue-turn.alt {
  margin-left: auto;
  background: #e9f3f1;
}

.dialogue-turn span,
.compact-turn span {
  display: block;
  margin-bottom: 5px;
  color: #5c696e;
  font-size: 12px;
  font-weight: 800;
}

.dialogue-turn p,
.compact-turn p {
  margin: 0;
  line-height: 1.55;
}

.coach-input {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.coach-input textarea {
  min-height: 74px;
  padding: 10px;
}

.coach-input select {
  height: 42px;
  padding: 0 10px;
}

.coach-score {
  display: grid;
  gap: 14px;
}

.coach-score div {
  display: grid;
  gap: 6px;
}

.coach-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.coach-score strong {
  font-size: 24px;
}

meter {
  width: 100%;
  height: 10px;
}

.coach-score ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  margin: 0;
  color: #3e4c51;
  line-height: 1.45;
}

.improved-line {
  padding: 12px;
  border-radius: 8px;
  background: #fff6db;
  color: #5f430c;
  line-height: 1.5;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 220px;
  gap: 8px;
  color: #6d777a;
  text-align: center;
}

.empty-state.tall {
  min-height: 440px;
}

.ai-layout {
  display: grid;
  grid-template-columns: 408px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.form-grid {
  display: grid;
  gap: 12px;
}

label span {
  display: block;
  margin-bottom: 6px;
  color: #5a676c;
  font-size: 12px;
  font-weight: 800;
}

label input,
label select {
  height: 42px;
  padding: 0 10px;
}

.manual-box {
  margin-top: 12px;
  min-height: 260px;
  padding: 12px;
  line-height: 1.55;
}

.summary-text {
  color: #3f4f55;
  line-height: 1.58;
}

.mini-term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: 10px;
}

.mini-term {
  min-height: 138px;
  padding: 12px;
  border: 1px solid #e7e1d2;
  border-radius: 8px;
  background: #fffefa;
}

.mini-term strong,
.mini-term span {
  display: block;
}

.mini-term span {
  margin-top: 4px;
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
}

.mini-term p {
  margin: 10px 0 0;
  color: #4b5b60;
  font-size: 13px;
  line-height: 1.48;
}

.text-audio {
  width: fit-content;
  min-height: 30px;
  margin-top: 10px;
  padding: 6px 9px;
  border-radius: 8px;
  color: #0f5f59;
  background: #dff5f1;
  font-size: 12px;
  font-weight: 900;
}

.generated-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.compact-turn {
  max-width: none;
  margin-bottom: 8px;
}

pre {
  min-height: 220px;
  overflow: auto;
  padding: 12px;
  border: 1px solid #e7e1d2;
  border-radius: 8px;
  background: #1c2628;
  color: #f4f0e6;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.55;
  white-space: pre-wrap;
}

.practice-row {
  margin-top: 12px;
}

.listening-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.voice-row {
  margin-bottom: 12px;
}

.voice-row select {
  max-width: 260px;
  height: 42px;
  padding: 0 10px;
}

.voice-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.listening-form textarea {
  min-height: 420px;
  padding: 12px;
  line-height: 1.6;
}

audio {
  width: 100%;
  margin-top: 12px;
}

.preset-list {
  position: sticky;
  top: 18px;
}

.progress-layout {
  display: grid;
  gap: 16px;
}

.progress-layout .metric-row {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.loop-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  padding: 14px;
  overflow-x: auto;
}

.loop-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px;
  border-radius: 8px;
  background: #f4f0e7;
}

.loop-step span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: #0f766e;
  font-weight: 900;
}

.progress-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 16px;
}

.review-list,
.note-list {
  display: grid;
  gap: 10px;
}

.review-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #ece8dc;
}

.review-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.note-list p {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid #ece8dc;
  color: #3d4c51;
  line-height: 1.5;
}

.spin {
  animation: spin 900ms linear infinite;
}

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

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .library-grid,
  .study-stage,
  .scenario-layout,
  .ai-layout,
  .listening-layout,
  .progress-columns {
    grid-template-columns: 1fr;
  }

  .quiz-panel,
  .preset-list {
    position: static;
    grid-column: auto;
    grid-row: auto;
  }

  .metric-row,
  .section-head,
  .term-grid {
    grid-column: auto;
  }

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

  .coach-input {
    grid-template-columns: 1fr;
  }

  .selector-copy {
    margin-left: 0;
    transform: none;
  }

  .industry-hero {
    grid-template-columns: 1fr;
  }

  .daily-panel {
    max-width: 320px;
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    max-height: 52vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .workspace {
    padding: 16px;
  }

  .selector-hero,
  .industry-header {
    padding: 16px;
  }

  .selector-nav,
  .site-nav,
  .topbar,
  .section-head {
    display: grid;
    justify-content: stretch;
  }

  .selector-copy {
    margin-top: 58px;
  }

  .selector-copy h1,
  .industry-hero h1 {
    font-size: 36px;
  }

  .selector-body {
    padding: 0 16px 34px;
  }

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

  .status-strip {
    justify-content: flex-start;
  }

  .metric-row,
  .progress-layout .metric-row,
  .generated-split,
  .loop-board {
    grid-template-columns: 1fr 1fr;
  }

  h1 {
    font-size: 26px;
  }

  .dialogue-turn {
    max-width: 100%;
  }
}

@media (max-width: 540px) {
  .workspace {
    padding: 12px;
  }

  .metric-row,
  .progress-layout .metric-row,
  .generated-split,
  .scenario-list,
  .loop-board {
    grid-template-columns: 1fr;
  }

  .term-grid,
  .mini-term-grid {
    grid-template-columns: 1fr;
  }

  .view-tabs button {
    min-width: 112px;
  }

  .selector-copy h1,
  .industry-hero h1,
  .word-focus h2 {
    font-size: 31px;
  }

  .industry-stats {
    grid-template-columns: 1fr;
  }

  .role-line span,
  .workflow-pills span,
  .goal-grid span,
  .practice-row span {
    max-width: 100%;
  }
}

/* === Goals view === */
.goals-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.goals-intro {
  color: var(--muted);
  margin-top: 6px;
  max-width: 720px;
  line-height: 1.6;
}

.goal-grid-rich {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.goal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--accent, var(--brand));
}

.goal-card.flagship {
  background: linear-gradient(180deg, #ffffff, #fbf8f0);
}

.goal-card .goal-tag {
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--brand-ink);
}

.goal-card.ai .goal-tag {
  background: rgba(55, 125, 255, 0.12);
  color: #224a9b;
}

.goal-card h3 {
  margin: 0;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.35;
}

.goal-card .english-title {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.goal-card .goal-summary {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  font-size: 14px;
}

.goal-outcomes {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.goal-step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.step-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--ink);
}

.step-pill.step-vocab {
  border-color: rgba(15, 118, 110, 0.4);
}
.step-pill.step-read {
  border-color: rgba(184, 121, 19, 0.4);
}
.step-pill.step-dialogue {
  border-color: rgba(55, 125, 255, 0.4);
}
.step-pill.step-produce {
  border-color: rgba(180, 35, 24, 0.4);
}

.goal-card .primary,
.goal-card .soft-button {
  margin-top: auto;
  background: var(--accent, var(--brand));
  color: #fff;
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 600;
}

.goal-card .soft-button {
  background: var(--panel-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 500;
}

/* === Goal detail === */
.goal-detail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.goal-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.goal-detail .source-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--brand-ink);
}

.goal-detail-hero {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  border-left: 5px solid var(--accent, var(--brand));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.goal-detail-hero h2 {
  margin: 0;
  font-size: 26px;
  color: var(--ink);
}

.goal-detail-hero .english-title {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.goal-detail-hero .goal-summary {
  margin: 0;
  line-height: 1.7;
  color: var(--ink);
}

.goal-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.goal-step-block {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
}

.goal-step-block::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -18px;
  bottom: -18px;
  width: 2px;
  background: var(--line);
}

.goal-step-block:first-child::before {
  top: 22px;
}

.goal-step-block:last-child::before {
  bottom: 22px;
}

.step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 1;
}

.step-marker span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent, var(--brand));
  color: #fff;
  font-weight: 700;
}

.step-marker strong {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-body h3 {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
}

.step-brief {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.mini-term.mastered {
  border-color: rgba(20, 122, 77, 0.45);
  background: rgba(20, 122, 77, 0.05);
}

.mini-term-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.read-block {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
}

.read-text {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.read-text p {
  margin: 0;
  line-height: 1.7;
  color: var(--ink);
  font-family:
    "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

.read-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.read-q {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.read-q .q-ask {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.read-q .q-answer {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--panel-soft);
  border-radius: 8px;
  color: var(--ink);
  line-height: 1.6;
  font-size: 14px;
}

.read-q .q-answer.placeholder {
  color: var(--muted);
  font-style: italic;
}

.dialogue-preview {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.briefing-block.compact {
  padding: 10px 14px;
  gap: 10px;
}

.produce-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.structure-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.structure-pills span {
  padding: 4px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-soft);
}

.sample-block {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
}

.sample-block summary {
  cursor: pointer;
  color: var(--brand-ink);
  font-weight: 600;
}

.sample-block pre {
  white-space: pre-wrap;
  font-family:
    "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  font-size: 13px;
  margin: 10px 0 0;
  color: var(--ink);
  line-height: 1.6;
}

.produce-input {
  min-height: 180px;
  padding: 14px;
  border-radius: 10px;
  font-family:
    "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  line-height: 1.6;
}

.rubric-block {
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
}

.rubric-block .eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.rubric-block ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.writing-result {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.writing-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.writing-score-grid > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.writing-score-grid span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.writing-score-grid strong {
  font-size: 18px;
  color: var(--ink);
}

.writing-feedback {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.revised-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}

.revised-block summary {
  cursor: pointer;
  color: var(--brand-ink);
  font-weight: 600;
}

.revised-block pre {
  white-space: pre-wrap;
  font-family:
    "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  font-size: 13px;
  margin: 10px 0 0;
  line-height: 1.6;
}

.empty-inline {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  padding: 10px 14px;
  border-radius: 10px;
}

@media (max-width: 760px) {
  .goal-grid-rich {
    grid-template-columns: 1fr;
  }

  .goal-step-block {
    grid-template-columns: 1fr;
  }

  .goal-step-block::before {
    display: none;
  }

  .read-block {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   通用首页 + 入门测评 (home / onboarding / study placeholder)
   ================================================================= */

.home-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.home-nav-right {
  display: flex;
  gap: 10px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.brand-name {
  font-size: 18px;
  color: var(--brand-ink);
}

.btn-primary,
.btn-ghost,
.btn-link,
.btn-text,
.btn-ghost-light {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 20px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-ink); }
.btn-primary:disabled { background: #b8c0bf; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.28); }
.btn-link {
  background: transparent;
  color: var(--brand-ink);
  padding: 10px 12px;
  font-weight: 500;
}
.btn-link:hover { text-decoration: underline; }
.btn-text {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 8px 4px;
}
.btn-text:hover { color: var(--ink); }
.btn-lg { padding: 14px 28px; font-size: 15px; }

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 0 8px;
}
.home-tag {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brand-ink);
  background: rgba(15, 118, 110, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
}
.home-hero h1 {
  font-size: 52px;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ink);
}
.home-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #0f766e 30%, #14b8a6 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.65;
  margin: 0;
}
.home-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.home-cta-row.big { margin-top: -32px; }

.home-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.home-features.compact .feat { padding: 18px 18px; }
.feat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.feat:hover { transform: translateY(-3px); border-color: var(--brand); }
.feat-tag {
  display: inline-block;
  width: fit-content;
  background: rgba(15, 118, 110, 0.1);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 8px;
}
.feat h3 { margin: 0; font-size: 18px; color: var(--ink); }
.feat p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.home-rationale {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-rationale h2 { margin: 0; font-size: 22px; color: var(--brand-ink); }
.home-rationale p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.7; max-width: 760px; }
.home-rationale strong { color: var(--brand-ink); }

.profile-summary { display: flex; flex-direction: column; gap: 8px; }
.profile-summary h1 { font-size: 36px; margin: 0; font-weight: 700; }
.profile-sub { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.profile-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.pcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow);
}
.pcard span { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.pcard strong { font-size: 26px; color: var(--brand-ink); font-weight: 700; }
.pcard em { font-style: normal; font-size: 12px; color: var(--muted); }

.profile-cards.compact-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px;
}

/* —— 首页词库选择器 —— */
.home-hero.compact { padding-top: 32px; padding-bottom: 16px; }
.home-hero.compact h1 { font-size: 38px; line-height: 1.2; }
.bank-picker { padding: 0 0 64px; }
.bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.bank-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 22px 18px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bank-card:hover:not([disabled]) {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 10px 28px rgba(20, 122, 77, 0.16);
}

.bank-picker,
.home-tools,
.home-features,
.industry-card-grid,
.course-shell,
.rd-shell,
.podcast-shell {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

.loading-shell {
  min-height: 100vh;
  justify-content: center;
}

.mobile-app-home {
  display: none;
}

.mobile-topbar,
.mobile-bottom-nav,
.mobile-page-tabs,
.mobile-swipe-pages,
.mobile-chip-grid {
  letter-spacing: 0;
}

.mobile-screen {
  display: none;
}

.mobile-screen.is-active {
  display: block;
}

.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 10px;
}

.mobile-topbar > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mobile-kicker {
  color: #6a7378;
  font-size: 12px;
  font-weight: 800;
}

.mobile-topbar strong {
  color: #101820;
  font-size: 24px;
  line-height: 1.15;
}

.mobile-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #101820;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.mobile-page-tabs {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 12px 18px 8px;
  scrollbar-width: none;
}

.mobile-page-tabs::-webkit-scrollbar,
.mobile-swipe-pages::-webkit-scrollbar {
  display: none;
}

.mobile-page-tabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 0 0 8px;
  background: transparent;
  color: #7d8589;
  font-size: 18px;
  font-weight: 900;
}

.mobile-page-tabs button.is-active {
  color: #101820;
}

.mobile-page-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: #11a99b;
}

.mobile-swipe-pages {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-swipe-page {
  min-width: 0;
  scroll-snap-align: start;
  padding: 12px 18px 110px;
}

.mobile-today-card,
.mobile-feature-card {
  width: 100%;
  min-height: 154px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
  border: 1px solid #e8ecef;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.82), rgba(240,248,246,0.72)),
    url("/data/book-covers/thinking-fast-and-slow.jpg");
  background-position: center;
  background-size: cover;
  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.08);
  color: #101820;
  text-align: left;
}

.mobile-today-card.industry {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.86), rgba(245,249,252,0.76)),
    url("/data/course/covers/pulse-5.png");
  background-position: center;
  background-size: cover;
}

.mobile-today-card span,
.mobile-feature-card span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17, 169, 155, 0.12);
  color: #07635d;
  font-size: 12px;
  font-weight: 900;
}

.mobile-today-card strong,
.mobile-feature-card strong {
  font-size: 24px;
  line-height: 1.18;
}

.mobile-today-card p,
.mobile-feature-card p {
  margin: 0;
  max-width: 280px;
  color: #536168;
  font-size: 13px;
  line-height: 1.5;
}

.mobile-primary {
  width: fit-content;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #101820;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.mobile-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mobile-course-chip {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e7ecef;
  border-radius: 8px;
  background: #ffffff;
  color: #101820;
  text-align: left;
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.06);
}

.mobile-course-chip span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #eef7f5;
  color: #08665f;
  font-size: 15px;
  font-weight: 900;
}

.mobile-course-chip strong {
  min-width: 0;
  color: #111b22;
  font-size: 16px;
  line-height: 1.25;
}

.mobile-course-chip em {
  min-width: 0;
  color: #69757a;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.mobile-feature-card {
  min-height: 420px;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.92) 64%),
    url("/data/reading-corpus/assets/covers/dd39faa0617bc200a2892f7ba8d4a14f.jpg");
  background-position: center;
  background-size: cover;
}

.mobile-feature-card.comics {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.92) 64%),
    url("/data/reading-corpus/assets/covers/330f13d45d3a9aa4c608481f9f4e42b6.png");
  background-position: center;
  background-size: cover;
}

.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid #e7ecef;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 -10px 26px rgba(16, 24, 32, 0.08);
}

.mobile-bottom-nav button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 4px 0;
  background: transparent;
  color: #9aa3a7;
}

.mobile-bottom-nav span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1.5px solid currentColor;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.mobile-bottom-nav em {
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.mobile-bottom-nav button.is-active {
  color: #101820;
}
.bank-card:active:not([disabled]) { transform: translateY(-1px); }
.bank-card[disabled],
.bank-card.not-ready {
  cursor: not-allowed;
  opacity: 0.55;
}
.bank-emoji { font-size: 32px; line-height: 1; }
.bank-name { font-size: 22px; font-weight: 700; color: var(--brand-ink); }
.bank-en { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.bank-desc { font-size: 14px; color: var(--ink); margin-top: 2px; }
.bank-meta {
  font-size: 12px;
  color: var(--ok);
  margin-top: 6px;
  font-weight: 600;
}
.bank-card.not-ready .bank-meta { color: var(--muted); }

/* —— 行业方向 picker —— */
.brand-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20, 122, 77, 0.12);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}
.industry-card-simple {
  /* 比通用词库卡片更紧凑些（emoji 大一点）*/
}
.industry-summary {
  border-left: 5px solid var(--accent, var(--brand));
  padding-left: 16px;
  margin-bottom: 24px;
}
.industry-subs h3 {
  margin: 32px 0 14px;
  font-size: 16px;
  color: var(--muted);
  font-weight: 600;
}
.sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.sub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.sub-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(20, 122, 77, 0.12);
}
.sub-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.sub-count { font-size: 12px; color: var(--muted); }

/* ============================================ */
/*           Vocabsavvy · Voyage 教材库              */
/* ============================================ */
.vy-shell { padding-bottom: 80px; }
.vy-hero { text-align: center; padding: 32px 0 24px; }
.vy-hero h1 { margin: 0 0 8px; font-size: 36px; }
.vy-hero-sub { color: var(--muted); font-size: 15px; }
.vy-library-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.vy-library-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(20, 122, 77, 0.18);
  background: rgba(20, 122, 77, 0.08);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 700;
}
.vy-library-filter-reset {
  min-height: 38px;
}
.vy-series-jump-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.vy-series-pill {
  border: 1px solid rgba(20, 122, 77, 0.18);
  background: rgba(20, 122, 77, 0.08);
  color: var(--brand-ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.vy-series-pill:hover {
  transform: translateY(-1px);
  background: rgba(20, 122, 77, 0.14);
  border-color: rgba(20, 122, 77, 0.35);
}

.vy-library {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.vy-book-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 20px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  align-items: stretch;
}
.vy-book-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 8px 22px rgba(20, 122, 77, 0.12);
}
.vy-cover {
  width: 100%; height: 280px; object-fit: cover;
  border-radius: 14px;
  display: block;
}
.vy-cover-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}
.vy-book-info { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 4px 0; }
.vy-book-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vy-level {
  display: inline-block;
  padding: 3px 12px;
  background: var(--brand);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
}
.vy-subtitle { font-size: 14px; color: var(--muted); }
.vy-book-info h2 { margin: 4px 0 0; font-size: 30px; font-weight: 800; color: var(--ink); }
.vy-desc { color: var(--ink); font-size: 14px; line-height: 1.55; margin: 4px 0 8px; }
.vy-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0; }
.vy-stat { font-size: 13px; color: var(--muted); }
.vy-stat strong { color: var(--brand-ink); font-weight: 700; }
.vy-stat.vy-cert a { color: var(--brand); text-decoration: underline; cursor: pointer; }
.vy-enter { align-self: flex-start; padding: 10px 22px; font-size: 15px; }

/* —— Book 页（16 单元卡片）—— */
.vy-book-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 16px auto 28px;
  padding: 18px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  border-left: 5px solid var(--book-color, var(--brand));
  align-items: center;
}
.vy-book-hero-cover {
  width: 100%; height: 220px; object-fit: cover; border-radius: 12px;
}
.vy-book-hero-text h1 { margin: 4px 0 8px; font-size: 28px; }

.vy-units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.vy-unit-card {
  display: grid;
  grid-template-columns: 50px 1fr 28px;
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  align-items: center;
  transition: all 0.15s ease;
}
.vy-unit-card:hover:not(.not-ready) {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(20,122,77,0.1);
}
.vy-unit-card.not-ready { opacity: 0.45; cursor: not-allowed; }
.vy-unit-card.complete { border-color: var(--ok); background: rgba(20,122,77,0.04); }
.vy-unit-num { font-size: 24px; font-weight: 800; color: var(--brand); text-align: center; }
.vy-unit-body h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.vy-unit-zh { margin: 2px 0 6px; font-size: 13px; color: var(--muted); }
.vy-unit-progress { display: flex; gap: 4px; align-items: center; }
.vy-mod-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 12px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: var(--muted);
  opacity: 0.55;
}
.vy-mod-dot.done { background: var(--ok); color: white; opacity: 1; }
.vy-mod-counter { margin-left: 6px; font-size: 11px; color: var(--muted); }
.vy-unit-cta { font-size: 18px; color: var(--brand); text-align: center; font-weight: 700; }
.vy-unit-card.complete .vy-unit-cta { color: var(--ok); }

/* —— Unit 详情（侧栏 + 当前模块）—— */
.vy-unit-shell { max-width: 1200px; margin: 0 auto; }
.vy-unit-head { padding: 16px 20px 8px; }
.vy-unit-head h1 { margin: 4px 0; font-size: 26px; }
.vy-unit-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  padding: 0 16px;
}
.vy-unit-sidebar {
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 16px; align-self: start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.vy-mod-nav {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: all 0.12s ease;
  align-items: center;
}
.vy-mod-nav:hover { border-color: var(--brand); }
.vy-mod-nav.active { background: var(--brand); color: white; border-color: var(--brand); }
.vy-mod-nav.done:not(.active) { background: rgba(20,122,77,0.05); border-color: rgba(20,122,77,0.4); }
.vy-mod-nav.done .vy-mod-check { color: var(--ok); font-weight: 800; }
.vy-mod-nav.active.done .vy-mod-check { color: white; }
.vy-mod-icon { font-size: 18px; }
.vy-mod-name { font-size: 14px; font-weight: 600; }

.vy-unit-pane {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  min-height: 60vh;
}
.vy-tag {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(20,122,77,0.12);
  color: var(--brand);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 6px;
}
.vy-unit-pane header h3 { margin: 0; font-size: 22px; }
.vy-unit-pane .vy-name-zh { font-weight: 400; font-size: 15px; color: var(--muted); margin-left: 6px; }
.vy-unit-pane h4 { margin: 18px 0 8px; font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
.vy-explain { padding: 12px 14px; background: rgba(0,0,0,0.03); border-radius: 10px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.vy-mod-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* dialogue, lines */
.vy-dialogue { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.vy-scene { font-style: italic; color: var(--muted); margin: 4px 0 12px; }
.vy-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vy-line { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding: 8px 12px; border-radius: 10px; }
.vy-line:hover { background: rgba(0,0,0,0.02); }
.vy-line-play, .vy-listen-big {
  background: var(--brand); color: white; border: none; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.vy-listen-big { width: auto; height: auto; padding: 10px 22px; border-radius: 999px; font-size: 14px; }
.vy-line-speaker { display: inline-block; font-size: 11px; color: var(--muted); font-weight: 700; }
.vy-line-en { margin: 2px 0 0; font-size: 15px; color: var(--ink); }
.vy-line-zh { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* mcq */
.vy-mcq { margin: 16px 0; padding: 12px 14px; background: rgba(0,0,0,0.02); border-radius: 10px; }
.vy-q { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.vy-q-zh { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.vy-mcq-options { display: flex; flex-direction: column; gap: 6px; }
.vy-opt { display: flex; gap: 6px; padding: 6px 10px; border-radius: 8px; cursor: pointer; align-items: center; font-size: 14px; }
.vy-opt:hover { background: rgba(0,0,0,0.04); }
.vy-mcq-result { margin: 6px 0 0; font-size: 13px; }
.vy-mcq-result.ok { color: var(--ok); }
.vy-mcq-result.no { color: var(--danger); }

/* grammar drills */
.vy-drills { padding-left: 22px; }
.vy-drills li { margin-bottom: 12px; }
.vy-drill-input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; min-width: 200px; }
.vy-drill-result { margin-left: 8px; font-weight: 700; }
.vy-drill-result.ok { color: var(--ok); }
.vy-drill-result.no { color: var(--danger); font-size: 12px; font-weight: 500; }
.vy-grammar-example { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(20,122,77,0.05); border-radius: 10px; }

/* pron */
.vy-pron-drills { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.vy-pron-drills li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.vy-pron-text { font-size: 15px; color: var(--ink); }

/* interactive */
.vy-task-prompt { padding: 14px 18px; background: rgba(255,196,0,0.08); border-radius: 12px; border-left: 4px solid #f59e0b; margin: 10px 0; }
.vy-prompt-en { margin: 0 0 4px; font-weight: 600; }
.vy-prompt-zh { margin: 0; color: var(--muted); }
.vy-tips { padding-left: 22px; font-size: 14px; color: var(--ink); line-height: 1.6; }

/* listening */
.vy-audio-block { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
.vy-listen-toggle { padding: 8px 16px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; cursor: pointer; }
.vy-transcript { padding: 14px 18px; background: rgba(0,0,0,0.03); border-radius: 10px; }
.vy-transcript.hidden { display: none; }

/* reading */
.vy-passage { padding: 14px 18px; background: var(--panel-soft); border-radius: 10px; line-height: 1.7; font-size: 15px; }
.vy-passage-zh { padding: 12px 16px; font-size: 13px; color: var(--muted); }
.vy-passage-zh-toggle, .vy-model-toggle { margin: 10px 0; }
.vy-passage-zh-toggle summary, .vy-model-toggle summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* writing */
.vy-write-area { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; line-height: 1.55; resize: vertical; box-sizing: border-box; }
.vy-write-area:focus { outline: none; border-color: var(--brand); }
.vy-write-actions { display: flex; gap: 10px; margin-top: 10px; }
.vy-length-hint { color: var(--muted); font-size: 12px; }
.vy-write-feedback { margin-top: 14px; }
.vy-model-answer { padding: 12px 16px; background: rgba(20,122,77,0.05); border-radius: 10px; font-size: 14px; line-height: 1.6; }

/* ============== certificate ============== */
.vy-cert-shell { padding: 24px; }
.cert-frame {
  max-width: 920px;
  margin: 24px auto;
  perspective: 1000px;
}
.cert-border {
  background: linear-gradient(135deg, #f5e7c4 0%, #e8d199 50%, #f5e7c4 100%);
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.25);
}
.cert-inner {
  background: #fbf6e7;
  border: 4px double #b08c4f;
  padding: 50px 60px 40px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  position: relative;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(176, 140, 79, 0.12) 0%, transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(176, 140, 79, 0.12) 0%, transparent 30%);
}
.cert-top { margin-bottom: 18px; }
.cert-seal {
  display: inline-block;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b08c4f, #7d5d2d);
  color: #fbf6e7;
  font-size: 30px;
  line-height: 56px;
  text-align: center;
  margin-bottom: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.cert-issuer-en {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #7d5d2d;
  text-transform: uppercase;
}
.cert-issuer-zh { margin: 2px 0 0; font-size: 13px; color: #8a6c3f; }
.cert-title {
  margin: 18px 0 4px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2b2014;
}
.cert-title-zh { margin: 0 0 22px; font-size: 16px; color: #6b5538; letter-spacing: 0.2em; }
.cert-body { margin: 8px 0; color: #4a3a23; font-size: 15px; line-height: 1.65; }
.cert-name {
  margin: 18px 0;
  font-size: 38px;
  font-style: italic;
  font-weight: 600;
  color: #2b2014;
  border-bottom: 1px solid #b08c4f;
  display: inline-block;
  padding: 0 30px 8px;
}
.cert-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(176, 140, 79, 0.4);
}
.cert-bottom-col p { margin: 2px 0; }
.cert-date, .cert-signature, .cert-id { font-size: 16px; color: #2b2014; font-weight: 600; }
.cert-signature { font-style: italic; }
.cert-id { font-size: 12px; font-family: monospace; color: #6b5538; }
.cert-label { font-size: 10px; color: #8a6c3f; letter-spacing: 0.1em; text-transform: uppercase; }
.cert-actions { text-align: center; margin: 20px 0 60px; display: flex; gap: 12px; justify-content: center; }

@media print {
  .home-nav, .cert-actions { display: none !important; }
  .cert-frame { margin: 0 auto; }
  body { background: white; }
}

/* ═══════════════════════════════════════════════════════════ */
/*    NEW Voyage UI — typographic covers, redesigned cards,    */
/*    multi-scene unit pages, custom MCQ buttons               */
/* ═══════════════════════════════════════════════════════════ */

/* ── 印刷感封面 ── */
.vy-typo-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--c-top, #fff) 0%, var(--c-bot, #999) 100%);
  color: var(--c-ink, #1f2937);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  font-family: Georgia, "Times New Roman", serif;
}
.vy-typo-cover::before {
  content: "";
  position: absolute; inset: 12px;
  border: 1.5px double var(--c-ink);
  opacity: 0.18;
  border-radius: 3px;
  pointer-events: none;
}
.vy-typo-band-top, .vy-typo-band-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--c-ink);
  opacity: 0.85;
}
.vy-typo-band-bot {
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.vy-typo-band-bot span { font-size: 9px; }
.vy-typo-brand { font-style: italic; letter-spacing: 0.2em; }
.vy-typo-level {
  background: var(--c-ink);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.18em;
  font-size: 11px;
}
.vy-typo-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 18px;
  gap: 4px;
}
.vy-typo-num {
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
}
.vy-typo-series {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--c-ink);
  margin: 4px 0 0;
}
.vy-typo-divider {
  width: 32px; height: 2px; background: var(--c-ink);
  margin: 8px 0;
}
.vy-typo-subtitle-en {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-ink);
}
.vy-typo-subtitle-zh {
  font-size: 18px;
  color: var(--c-ink);
  margin-top: 2px;
  font-family: -apple-system, system-ui, sans-serif;
}
/* size variants */
.vy-typo-lg { width: 100%; max-width: 240px; aspect-ratio: 3/4; }
.vy-typo-md { width: 200px; aspect-ratio: 3/4; }
.vy-typo-sm { width: 100px; aspect-ratio: 3/4; }
.vy-typo-md .vy-typo-num { font-size: 52px; }
.vy-typo-md .vy-typo-series { font-size: 26px; }
.vy-typo-md .vy-typo-subtitle-zh { font-size: 16px; }

/* ── library card with goals ── */
.vy-book-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: stretch;
}
.vy-book-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vy-goals {
  list-style: none;
  padding: 0;
  margin: 8px 0 4px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}
.vy-goals li {
  display: grid;
  grid-template-columns: 22px 38px 1fr;
  gap: 6px;
  font-size: 13px;
  align-items: start;
  line-height: 1.45;
}
.vy-goal-icon { font-size: 14px; }
.vy-goal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand);
  background: rgba(20, 122, 77, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  text-align: center;
  height: fit-content;
}
.vy-goal-text { color: var(--ink); }
.vy-goals.compact { grid-template-columns: 1fr; gap: 4px; margin: 6px 0; }
.vy-goals.compact li { grid-template-columns: 22px 1fr; font-size: 12px; }

/* ── Unit cards (book page) — rebuilt ── */
.vy-units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.vy-unit-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  /* override the older grid-based layout */
  grid-template-columns: none !important;
}
.vy-unit-card:hover:not(.not-ready) {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(20, 122, 77, 0.12);
}
.vy-unit-card.not-ready { opacity: 0.45; cursor: not-allowed; }
.vy-unit-card.complete { border-color: var(--ok); background: rgba(20, 122, 77, 0.04); }
.vy-unit-card-head { display: flex; justify-content: space-between; align-items: center; }
.vy-unit-num {
  font-size: 22px; font-weight: 800; color: var(--brand);
  text-align: left !important;
}
.vy-unit-status {
  font-size: 11px; font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.vy-unit-card.complete .vy-unit-status { background: rgba(20, 122, 77, 0.12); color: var(--ok); }
.vy-unit-title {
  margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4;
  word-break: break-word;
}
.vy-unit-zh { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; word-break: break-word; }
.vy-progress-bar {
  height: 6px; background: rgba(0, 0, 0, 0.06); border-radius: 999px; overflow: hidden;
}
.vy-progress-bar > span {
  display: block; height: 100%; background: var(--brand);
  transition: width 0.3s ease;
  border-radius: 999px;
}
.vy-unit-mods { display: flex; gap: 4px; }
.vy-mod-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
  opacity: 0.55;
  filter: grayscale(0.7);
}
.vy-mod-dot.done { background: var(--ok); color: white; opacity: 1; filter: none; }

/* ── Book hero ── */
.vy-book-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 16px auto 28px;
  padding: 24px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  align-items: center;
}

/* ── Unit banner (modules-list scene) ── */
.vy-unit-shell { max-width: 1100px; margin: 0 auto; padding: 16px 20px 60px; }
.vy-unit-nav { padding: 0 4px; margin-bottom: 8px; }
.vy-unit-banner {
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(20, 122, 77, 0.08), rgba(255, 255, 255, 0.5));
  border: 1.5px solid rgba(20, 122, 77, 0.18);
  border-radius: 16px;
  margin-bottom: 22px;
}
.vy-unit-banner-cefr {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--brand);
  color: white;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.vy-unit-banner-title { margin: 0 0 4px; font-size: 28px; font-weight: 700; color: var(--ink); }
.vy-unit-banner-zh { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.vy-unit-banner-progress { display: flex; align-items: center; gap: 14px; }
.vy-unit-banner-progress .vy-progress-bar { flex: 1; height: 8px; }
.vy-progress-meta { font-size: 12px; color: var(--muted); white-space: nowrap; font-weight: 600; }

/* ── Module grid (the new module list) ── */
.vy-mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.vy-mod-card {
  display: grid;
  grid-template-columns: 36px 38px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: all 0.15s ease;
}
.vy-mod-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(20, 122, 77, 0.1);
}
.vy-mod-card.done { background: rgba(20, 122, 77, 0.04); border-color: rgba(20, 122, 77, 0.4); }
.vy-mod-card-num {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.04em;
}
.vy-mod-card-icon { font-size: 28px; }
.vy-mod-card-body h3 { margin: 0; font-size: 16px; font-weight: 700; }
.vy-mod-card-body p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.vy-mod-card-cta {
  grid-column: 1 / -1;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.vy-mod-card.done .vy-mod-card-cta { color: var(--ok); }
.vy-unit-finish {
  margin-top: 28px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(20, 122, 77, 0.1), rgba(255, 196, 0, 0.1));
  border-radius: 14px;
  text-align: center;
}
.vy-unit-finish h2 { margin: 0 0 4px; }

/* ── Section page header / shared cards ── */
.vy-section { padding: 0 4px; }
.vy-section-head { margin-bottom: 18px; }
.vy-section-head h1 { margin: 6px 0 4px; font-size: 26px; }
.vy-section-head .vy-name-zh { font-weight: 400; font-size: 16px; color: var(--muted); margin-left: 8px; }
.vy-section-sub { color: var(--muted); font-size: 14px; margin: 4px 0; }
.vy-section-title { font-size: 26px; margin: 0 0 8px; }
.vy-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.vy-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
}
.vy-card .vy-explain {
  background: rgba(0, 0, 0, 0.03);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.vy-tag {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(20, 122, 77, 0.12);
  color: var(--brand);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-radius: 999px;
}
.vy-mod-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.vy-mod-actions.inline { margin-top: 14px; justify-content: flex-start; }

/* ── Series blocks / image covers / vocabulary cards ── */
/* Series switcher dropdown (mountBook header — lets user jump between
   Voyage / Pulse / etc. without going back to the library) */
.vy-series-switcher { position: relative; display: inline-block; }
.vy-series-toggle { white-space: nowrap; }
.vy-series-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
}
.vy-series-menu[hidden] {
  display: none;
}
.vy-series-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.15s ease;
}
.vy-series-menu-item:hover {
  background: rgba(99, 102, 241, 0.08);
}
.vy-series-menu-item.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.35);
  font-weight: 600;
}
.vy-series-menu-item em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
}

.vy-series-block {
  max-width: 1100px;
  margin: 0 auto 34px;
  scroll-margin-top: 96px;
}
.vy-series-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 0 4px;
  margin: 0 0 14px;
}
.vy-series-kicker {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(20, 122, 77, 0.1);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.vy-series-head h2 {
  margin: 0 0 6px;
  font-size: 28px;
}
.vy-series-desc {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 760px;
}
.vy-image-cover {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}
.vy-image-lg { width: 100%; max-width: 240px; aspect-ratio: 3 / 4; }
.vy-image-md { width: 200px; aspect-ratio: 3 / 4; }
.vy-image-cover .vy-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vy-image-cover-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.82) 56%, rgba(15, 23, 42, 0.96) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vy-image-cover-series {
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.82;
}
.vy-image-cover-overlay strong {
  font-size: 18px;
  line-height: 1.2;
}
.vy-image-cover-overlay span:last-child {
  font-size: 12px;
  opacity: 0.88;
}
.vy-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.vy-vocab-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}
.vy-vocab-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 8px;
}
.vy-vocab-head h3 {
  margin: 0;
  font-size: 18px;
}
.vy-vocab-ipa {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.vy-vocab-zh {
  margin: 0 0 10px;
  color: var(--brand-ink);
  font-size: 14px;
  line-height: 1.5;
}
.vy-vocab-examples {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vy-vocab-examples li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.vy-vocab-examples li:first-child {
  padding-top: 0;
  border-top: none;
}
.vy-vocab-examples p {
  margin: 0;
  line-height: 1.55;
}

/* ── Dialogue list (page) ── */
.vy-dlg-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.vy-dlg-card {
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  gap: 16px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  align-items: center;
  transition: all 0.15s ease;
}
.vy-dlg-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.vy-dlg-card.done { border-color: rgba(20,122,77,0.4); background: rgba(20,122,77,0.04); }
.vy-dlg-num {
  width: 40px; height: 40px;
  background: var(--brand); color: white;
  font-size: 20px; font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.vy-dlg-card.done .vy-dlg-num { background: var(--ok); }
.vy-dlg-body h3 { margin: 0; font-size: 17px; }
.vy-dlg-zh { margin: 2px 0 4px; font-size: 13px; color: var(--muted); }
.vy-dlg-scene { margin: 4px 0 6px; font-size: 13px; color: var(--ink); font-style: italic; }
.vy-dlg-meta { font-size: 12px; color: var(--muted); }
.vy-dlg-cta { font-size: 22px; color: var(--brand); font-weight: 700; }
.vy-dlg-card.done .vy-dlg-cta { color: var(--ok); }

/* ── Walkthrough (dialogue step-by-step) ── */
.vy-walk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 18px;
}
.vy-walk-step-meta { font-size: 12px; color: var(--muted); letter-spacing: 0.05em; }
.vy-walk-dots { display: flex; gap: 8px; }
.vy-walk-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
}
.vy-walk-dot.active { background: var(--brand); width: 26px; border-radius: 999px; }
.vy-walk-dot.done { background: var(--ok); }
.vy-walk-page {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px;
}
.vy-walk-h2 { margin: 0 0 14px; font-size: 22px; color: var(--brand-ink); }
.vy-walk-text { font-size: 16px; line-height: 1.65; margin: 8px 0; color: var(--ink); }
.vy-walk-text-zh { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 6px 0; }
.vy-walk-hook {
  margin: 18px 0;
  padding: 16px 20px;
  background: rgba(255, 196, 0, 0.08);
  border-radius: 12px;
  border-left: 4px solid #f59e0b;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.vy-walk-hook > div { flex: 1; }
.vy-walk-hookq { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.vy-walk-hookq-zh { margin: 0; font-size: 13px; color: var(--muted); }
.vy-walk-subq { padding-left: 20px; margin: 12px 0; }
.vy-walk-subq li { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.vy-walk-zh-inline { color: var(--muted); font-size: 13px; }
.vy-walk-scene { margin: 6px 0 12px; font-style: italic; color: var(--muted); }
.vy-line-play.tiny { width: 22px; height: 22px; font-size: 9px; }

/* ── Dialogue lines (in walkthrough) ── */
.vy-lines { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.vy-line {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  align-items: start;
  background: rgba(0, 0, 0, 0.02);
}
.vy-line:hover { background: rgba(0, 0, 0, 0.04); }
.vy-line-play, .vy-listen-big {
  background: var(--brand); color: white; border: none; border-radius: 50%;
  width: 32px; height: 32px;
  cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vy-line-play:hover { background: var(--brand-ink); }
.vy-listen-big {
  width: auto; height: auto; padding: 14px 28px;
  border-radius: 999px; font-size: 15px; font-weight: 600;
}
.vy-line-body { min-width: 0; }
.vy-line-speaker {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.04em;
}
.vy-line-en { margin: 4px 0 2px; font-size: 16px; color: var(--ink); line-height: 1.5; }
.vy-line-zh { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ── New MCQ buttons (replaces broken radio approach) ── */
.vy-mcq-list { display: flex; flex-direction: column; gap: 18px; }
.vy-mcq {
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.vy-q { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.vy-q-zh { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.vy-mcq-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vy-opt {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: all 0.12s ease;
  width: 100%;
}
.vy-opt:hover:not(:disabled) { border-color: var(--brand); background: rgba(20, 122, 77, 0.04); }
.vy-opt-letter {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-weight: 700;
  color: var(--brand);
  background: white;
  font-size: 13px;
}
.vy-opt-text { font-size: 14.5px; line-height: 1.5; }
.vy-mcq.answered .vy-opt { cursor: default; }
.vy-mcq.answered .vy-opt.correct {
  border-color: var(--ok);
  background: rgba(20, 122, 77, 0.06);
}
.vy-mcq.answered .vy-opt.correct .vy-opt-letter {
  background: var(--ok); color: white; border-color: var(--ok);
}
.vy-mcq.answered .vy-opt.wrong {
  border-color: var(--danger);
  background: rgba(180, 35, 24, 0.04);
}
.vy-mcq.answered .vy-opt.wrong .vy-opt-letter {
  background: var(--danger); color: white; border-color: var(--danger);
}
.vy-mcq.answered .vy-opt.dim { opacity: 0.5; }
.vy-mcq-result { margin: 12px 0 0; font-size: 13px; font-weight: 600; }
.vy-mcq-result.ok { color: var(--ok); }
.vy-mcq-result.no { color: var(--danger); }

/* ── Listening / reading / writing card variants ── */
.vy-listen-card {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.vy-listen-toggle { padding: 10px 18px; }
.vy-transcript {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.65;
}
.vy-transcript.hidden { display: none; }

.vy-passage-card { padding: 24px 28px; }
.vy-passage { line-height: 1.75; font-size: 15px; }
.vy-passage p { margin: 8px 0; }
.vy-passage-zh-toggle { margin-top: 14px; }
.vy-passage-zh-toggle summary {
  cursor: pointer; font-size: 13px; color: var(--muted);
  padding: 6px 0;
}
.vy-passage-zh { padding: 12px 16px; background: rgba(0,0,0,0.03); border-radius: 8px; font-size: 13px; line-height: 1.65; color: var(--muted); margin-top: 8px; }

.vy-task-card { background: rgba(255, 196, 0, 0.05); border-color: #fbd38b; }
.vy-task-card .vy-prompt-en { font-size: 16px; font-weight: 600; margin: 8px 0; }
.vy-task-card .vy-prompt-zh { color: var(--muted); margin: 4px 0; }
.vy-tips { padding-left: 22px; line-height: 1.65; }

.vy-grammar-example {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px;
  background: rgba(20, 122, 77, 0.05);
  border-radius: 10px;
  margin: 8px 0;
}
.vy-patterns { padding-left: 22px; }
.vy-patterns code { background: rgba(0,0,0,0.06); padding: 3px 8px; border-radius: 6px; font-size: 14px; }
.vy-drills { padding-left: 22px; }
.vy-drills li { margin-bottom: 14px; }
.vy-drill-input {
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 14.5px;
  min-width: 220px;
  margin-top: 6px;
}
.vy-drill-input:focus { outline: none; border-color: var(--brand); }
.vy-drill-result { margin-left: 10px; font-weight: 700; }
.vy-drill-result.ok { color: var(--ok); }
.vy-drill-result.no { color: var(--danger); font-size: 12px; font-weight: 500; }

.vy-pron-drills {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.vy-pron-drills li {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.vy-pron-text { font-size: 15px; }

.vy-write-area {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}
.vy-write-area:focus { outline: none; border-color: var(--brand); }
.vy-length-hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.vy-write-feedback { margin-top: 14px; }
.vy-model-toggle { padding: 14px 18px; }
.vy-model-toggle summary {
  cursor: pointer; font-weight: 600; color: var(--muted);
  list-style: none;
}
.vy-model-toggle summary::before { content: "▸ "; }
.vy-model-toggle[open] summary::before { content: "▾ "; }
.vy-model-answer {
  margin-top: 12px;
  padding: 14px 18px;
  background: rgba(20, 122, 77, 0.05);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .vy-book-card, .vy-book-hero { grid-template-columns: 1fr; }
  .vy-typo-lg { max-width: 100%; aspect-ratio: 4/3; }
  .vy-goals { grid-template-columns: 1fr; }
  .vy-walk-page { padding: 18px 16px; }
  .vy-mod-card { grid-template-columns: 28px 32px 1fr; }
  .vy-mod-card-cta { font-size: 11px; }
}
@media (max-width: 720px) {
  .vy-book-card, .vy-book-hero { grid-template-columns: 1fr; }
  .vy-cover, .vy-book-hero-cover { height: 200px; }
  .vy-unit-layout { grid-template-columns: 1fr; }
  .vy-unit-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .cert-inner { padding: 30px 24px; }
  .cert-name { font-size: 26px; padding: 0 8px 6px; }
  .cert-bottom { grid-template-columns: 1fr; }
}

/* Onboarding shell */
.ob-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 28px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
.ob-steps {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ob-steps li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.ob-steps li.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}
.ob-steps li.done { color: var(--brand-ink); border-color: rgba(15, 118, 110, 0.4); }

.ob-step h1 { font-size: 32px; margin: 0 0 6px; color: var(--ink); font-weight: 700; }
.ob-sub { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.ob-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Goal step */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.goal-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px 18px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.goal-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.goal-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12), var(--shadow);
  background: rgba(15, 118, 110, 0.04);
}
.goal-emoji { font-size: 28px; }
.goal-card strong { font-size: 20px; color: var(--ink); }
.goal-card em {
  font-style: normal;
  font-size: 12px;
  color: var(--brand-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.goal-card p { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Test step */
.ob-progress {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-bar { height: 6px; background: var(--panel-soft); border-radius: 999px; overflow: hidden; }
.ob-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #0f766e);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.ob-progress-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }

.qcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow);
}
.qhead .qtype {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: rgba(15, 118, 110, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.word-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 12px 8px;
}
.word-en { font-size: 44px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.word-ipa { font-size: 16px; color: var(--muted); }
.word-display.zh .word-zh { font-size: 30px; color: var(--ink); font-weight: 600; }

.listen-block { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; }
.btn-listen {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 16px 36px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.25);
}
.btn-listen:hover { background: var(--brand-ink); }
.btn-listen:active { transform: scale(0.97); }
.listen-hint { font-size: 13px; color: var(--muted); }

.opt-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opt {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.opt:hover { border-color: var(--brand); }
.opt.right {
  background: rgba(20, 122, 77, 0.1);
  border-color: var(--ok);
  color: var(--ok);
  font-weight: 600;
}
.opt.wrong {
  background: rgba(180, 35, 24, 0.08);
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}
.opt.dim { opacity: 0.5; }

.spell-form { display: flex; gap: 10px; }
.spell-input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  font-size: 18px;
  background: var(--panel-soft);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.spell-input:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.spell-input.right { border-color: var(--ok); background: rgba(20, 122, 77, 0.06); color: var(--ok); }
.spell-input.wrong { border-color: var(--danger); background: rgba(180, 35, 24, 0.06); color: var(--danger); }

.qfeedback {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.qfeedback.ok { border-color: rgba(20, 122, 77, 0.4); background: rgba(20, 122, 77, 0.06); }
.qfeedback.no { border-color: rgba(180, 35, 24, 0.35); background: rgba(180, 35, 24, 0.05); }
.qfeedback.big { padding: 18px 22px; }
.qfeedback.big .qfb-icon { font-size: 32px; }
.qfeedback.big .qfb-body strong { font-size: 18px; }
.spell-next-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.sentence-mode-toggle { margin: 6px 0 14px; }
.sentence-row.voice-mode {
  align-items: center;
}
.voice-input-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.voice-mic-big {
  padding: 12px 22px;
  font-size: 16px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 122, 77, 0.25);
}
.voice-mic-big:hover { background: var(--brand-ink); }
.voice-mic-big.rec {
  background: var(--danger);
  box-shadow: 0 0 0 6px rgba(180, 35, 24, 0.16);
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.voice-heard {
  margin: 0;
  padding: 10px 14px;
  background: rgba(20, 122, 77, 0.06);
  border: 1px solid rgba(20, 122, 77, 0.2);
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink);
}
.voice-hint { margin: 0; font-style: italic; }
.study-actions.inline { margin-top: 12px; gap: 10px; }
.translate-section .trans-task {
  margin: 10px 0 14px;
  padding: 12px 16px;
  background: var(--panel-soft);
  border-radius: 12px;
  border-left: 4px solid var(--brand);
}
.translate-section .trans-task .big-line.zh {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5;
}
.trans-summary { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 12px; }
.trans-summary-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.trans-summary-item.ok { border-color: rgba(20, 122, 77, 0.35); background: rgba(20, 122, 77, 0.04); }
.trans-summary-item.fail { border-color: rgba(180, 35, 24, 0.25); background: rgba(180, 35, 24, 0.03); }
.trans-summary-item .ts-icon { font-size: 22px; line-height: 1; }
.trans-summary-item .ts-zh { margin: 0; font-size: 14px; color: var(--ink); font-weight: 600; }
.trans-summary-item .ts-ref { margin: 4px 0 0; font-size: 13px; color: var(--brand-ink); }
.trans-summary-item .ts-heard { margin: 4px 0 0; font-size: 12px; }

/* 翻译题序号小圆点导航 */
.trans-dots {
  display: flex;
  gap: 8px;
  margin: 8px 0 14px;
}
.trans-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.trans-dot:hover { transform: translateY(-1px); }
.trans-dot.active { background: var(--brand); color: white; border-color: var(--brand); }
.trans-dot.done.ok { background: rgba(20, 122, 77, 0.12); color: var(--ok); border-color: var(--ok); }
.trans-dot.done.fail { background: rgba(180, 35, 24, 0.08); color: var(--danger); border-color: var(--danger); }
.trans-dot.todo { opacity: 0.65; }

/* 历史学习痕迹折叠卡 */
.history-section details { border: 1px solid var(--line); border-radius: 14px; padding: 0; background: var(--panel-soft); }
.history-section summary { list-style: none; padding: 12px 18px; cursor: pointer; user-select: none; }
.history-section summary::-webkit-details-marker { display: none; }
.history-section summary::before { content: "▸ "; color: var(--muted); margin-right: 6px; transition: transform 0.15s; display: inline-block; }
.history-section details[open] summary::before { content: "▾ "; }
.history-section .history-summary { display: inline; margin: 0; font-size: 16px; }
.history-section .history-summary .hint { font-weight: normal; }
.history-body { padding: 0 18px 16px; }
.history-sub { margin: 14px 0 8px; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.history-item {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 14px;
}
.history-item.ok { border-left: 3px solid var(--ok); }
.history-item.fail { border-left: 3px solid var(--danger); }
.history-item .hist-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.history-item .hist-icon { font-size: 16px; }
.history-item .hist-time { font-size: 11px; color: var(--muted); }
.history-item p { margin: 2px 0; line-height: 1.45; }
.history-item .hist-zh { font-weight: 600; color: var(--ink); }
.history-item .hist-heard { color: var(--ink); }
.history-item .hist-ref { color: var(--brand-ink); }
.history-item .hist-corrected em { font-style: italic; color: var(--brand-ink); }
.history-item .hist-original { font-weight: 600; color: var(--ink); }
.history-item .hist-polished em { font-style: italic; color: var(--brand-ink); }
.trans-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.trans-input-row .speak-input { flex: 1; min-width: 200px; padding: 10px 14px; font-size: 15px; }
.speak-heard {
  margin: 6px 0 0;
  padding: 10px 14px;
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
}
.reference-answer {
  margin: 12px 0 4px;
  padding: 12px 16px;
  background: rgba(20, 122, 77, 0.08);
  border: 1px solid rgba(20, 122, 77, 0.3);
  border-radius: 10px;
}
.ref-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 700;
}
.reference-answer p { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.sf-tag {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 2px 8px;
  background: rgba(255, 196, 0, 0.18);
  color: #7a5b00;
  border-radius: 999px;
  font-size: 12px;
}
.qfb-icon { font-size: 22px; }
.qfb-body { flex: 1; }
.qfb-body strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--ink); }
.qfb-body p { margin: 0; font-size: 14px; color: var(--muted); }
.qfb-body em { font-style: normal; color: var(--brand-ink); font-weight: 600; }

/* Skills step */
.skill-list { display: flex; flex-direction: column; gap: 18px; }
.skill-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skill-label { font-size: 15px; color: var(--ink); }
.skill-label strong {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 8px;
  margin-right: 10px;
  font-size: 14px;
  vertical-align: middle;
}
.skill-scale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skill-anchor { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.skill-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.12s ease;
}
.skill-dot:hover { border-color: var(--brand); color: var(--brand-ink); }
.skill-dot.active { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.06); }

/* Result step */
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow);
}
.rcard.accent {
  background: linear-gradient(140deg, rgba(15, 118, 110, 0.95), rgba(20, 184, 166, 0.85));
  color: #fff;
  border: none;
}
.rcard.accent span,
.rcard.accent em { color: rgba(255, 255, 255, 0.78); }
.rcard.accent strong { color: #fff; }
.rcard span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rcard strong { font-size: 26px; color: var(--brand-ink); font-weight: 700; }
.rcard em { font-style: normal; font-size: 13px; color: var(--muted); }

.ratio-row,
.daily-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.ratio-row label,
.daily-row label { font-weight: 600; color: var(--ink); font-size: 14px; }
.ratio-control { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 460px; justify-content: flex-end; }
.ratio-control input[type="range"] { flex: 1; accent-color: var(--brand); }
.ratio-control span {
  font-size: 13px;
  color: var(--brand-ink);
  font-weight: 600;
  min-width: 160px;
  text-align: right;
}
.daily-control { display: flex; align-items: center; gap: 14px; }
.daily-control button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  color: var(--brand-ink);
}
.daily-control button:hover { border-color: var(--brand); }
.daily-control span {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-ink);
  min-width: 36px;
  text-align: center;
}

/* Study placeholder */
.study-stub {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}
.study-stub h1 { margin: 0; font-size: 28px; color: var(--brand-ink); }
.study-stub-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }

/* Selector header extra nav */
.selector-nav-actions { display: flex; gap: 8px; margin-left: auto; margin-right: 16px; }

@media (max-width: 760px) {
  body {
    background: #fbfcfc;
  }
  .home-shell {
    max-width: none;
    min-height: 100vh;
    padding: 0;
    gap: 0;
  }
  .home-shell:has(.mobile-app-home) > :not(.mobile-app-home) {
    display: none !important;
  }
  .home-shell .mobile-app-home {
    display: block;
    min-height: 100vh;
    background: #fbfcfc;
  }
  .home-hero h1 { font-size: 36px; }
  .home-features,
  .profile-cards,
  .study-stub-cards { grid-template-columns: repeat(2, 1fr); }
  .result-grid { grid-template-columns: 1fr; }
  .opt-list { grid-template-columns: 1fr; }
  .word-en { font-size: 36px; }
  .ratio-row,
  .daily-row { flex-direction: column; align-items: stretch; }
}

/* =================================================================
   Phase 3 学习闭环 (study.js)
   ================================================================= */

.study-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.study-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
}
.study-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.study-bar { height: 6px; background: var(--panel-soft); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.study-bar span { display: block; height: 100%; background: linear-gradient(90deg, #14b8a6, #0f766e); transition: width 0.3s ease; }
.study-meta { font-size: 12px; color: var(--muted); text-align: center; }
.study-step-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.step-tab {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
}
.step-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.step-tab.done {
  background: rgba(20, 122, 77, 0.1);
  color: var(--ok);
  border-color: rgba(20, 122, 77, 0.3);
}

.study-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow);
}

.study-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.study-actions.center { justify-content: center; }

/* —— Dict step —— */
.dict-card { gap: 22px; }
.dict-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 18px;
}
.dict-word { font-size: 42px; margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.dict-ipa { margin: 0; color: var(--muted); font-size: 18px; }
.btn-listen.small {
  padding: 6px 14px;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(15, 118, 110, 0.18);
  margin-left: auto;
}
.btn-listen.tiny {
  padding: 4px 10px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.2);
  flex: 0 0 auto;
}
.dict-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.pos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pos-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pos-tag {
  display: inline-block;
  background: rgba(15, 118, 110, 0.1);
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  font-style: italic;
}
.pos-trans {
  background: var(--panel-soft);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  border: 1px solid var(--line);
}
.colloc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.colloc {
  background: rgba(15, 118, 110, 0.06);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--brand-ink);
  border: 1px solid rgba(15, 118, 110, 0.2);
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
.example-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.example-list li {
  display: flex;
  gap: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  align-items: flex-start;
}
.ex-en { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.5; }
.ex-zh { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* —— Pronounce step —— */
.pronounce-target { text-align: center; padding: 18px 0 8px; }
.pronounce-word { font-size: 42px; font-weight: 700; margin: 0; color: var(--ink); }
.pronounce-ipa { margin: 4px 0 0; font-size: 16px; color: var(--muted); }
.pronounce-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.btn-listen.recording {
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.6);
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(180, 35, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0); }
}
.score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.score-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.score-card span { font-size: 12px; color: var(--muted); }
.score-card strong { font-size: 28px; color: var(--brand-ink); font-weight: 700; }
.score-card em { font-style: normal; font-size: 12px; color: var(--muted); }
.score-card.pass {
  background: rgba(20, 122, 77, 0.1);
  border-color: rgba(20, 122, 77, 0.4);
}
.score-card.pass strong { color: var(--ok); }
.score-card.fail {
  background: rgba(180, 35, 24, 0.06);
  border-color: rgba(180, 35, 24, 0.3);
}
.score-card.fail strong { color: var(--danger); }
.word-scores { display: flex; flex-wrap: wrap; gap: 8px; }
.ws {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.ws em { font-style: normal; color: var(--muted); font-size: 11px; }
.ws.good { background: rgba(20, 122, 77, 0.08); border-color: rgba(20, 122, 77, 0.35); color: var(--ok); }
.ws.ok { background: rgba(154, 103, 0, 0.08); border-color: rgba(154, 103, 0, 0.3); color: var(--warn); }
.ws.bad { background: rgba(180, 35, 24, 0.08); border-color: rgba(180, 35, 24, 0.35); color: var(--danger); }

/* —— Sentence step —— */
.sentence-prompt p { margin: 0 0 6px; color: var(--ink); font-size: 14px; line-height: 1.6; }
.sentence-tip { color: var(--muted) !important; font-size: 13px !important; }
.sentence-list { display: flex; flex-direction: column; gap: 10px; }
.sentence-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sentence-num {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--brand-ink);
  width: 24px;
  padding-top: 14px;
  text-align: right;
}
.sentence-input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--panel-soft);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
  color: var(--ink);
}
.sentence-input:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.btn-mic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  cursor: pointer;
  font-size: 18px;
  margin-top: 4px;
  transition: all 0.15s ease;
}
.btn-mic:hover { border-color: var(--brand); background: rgba(15, 118, 110, 0.06); }

.sentence-feedback {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sf-overall {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.sf-overall > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(140deg, rgba(15, 118, 110, 0.95), rgba(20, 184, 166, 0.85));
  color: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  min-width: 80px;
}
.sf-overall strong { font-size: 28px; font-weight: 700; }
.sf-overall em { font-style: normal; font-size: 11px; opacity: 0.8; letter-spacing: 0.05em; }
.sf-overall p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.sf-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-item header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sf-num {
  background: var(--brand);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 13px;
  font-weight: 600;
}
.sf-scores { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.sf-pill {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}
.sf-original { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.sf-polished { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.sf-polished em { font-style: normal; font-weight: 500; color: var(--brand-ink); }
.sf-notes { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sf-praise {
  margin: 6px 0 0;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(154, 103, 0, 0.25);
  color: var(--warn);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.sf-reused { margin: 0; font-size: 12px; color: var(--brand-ink); }
.sf-tag {
  display: inline-block;
  background: rgba(15, 118, 110, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 4px;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
}

/* —— Done step —— */
.done-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow);
}
.done-card h1 { margin: 0; font-size: 28px; color: var(--brand-ink); }
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.challenge-card {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}
.challenge-card:hover { border-color: var(--brand); transform: translateY(-2px); background: var(--panel); }
.challenge-card strong { font-size: 16px; color: var(--ink); }
.challenge-card p { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .study-header { grid-template-columns: 1fr; gap: 10px; }
  .score-grid { grid-template-columns: repeat(2, 1fr); }
  .challenge-grid { grid-template-columns: 1fr; }
  .dict-word { font-size: 32px; }
  .pronounce-word { font-size: 32px; }
}

/* =================================================================
   Phase 4 挑战 (challenges.js)
   ================================================================= */
.study-header.simple {
  grid-template-columns: auto 1fr auto;
}
.ch-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-ink);
  text-align: center;
}
.ch-section-title {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--ink);
  font-weight: 700;
}

/* —— Dictation —— */
.dict-wrong {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}
.dict-wrong h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.dict-wrong ul { margin: 0; padding-left: 20px; }
.dict-wrong li { font-size: 14px; color: var(--ink); margin: 4px 0; }
.dict-wrong li em { font-style: normal; color: var(--danger); margin-left: 8px; font-size: 13px; }

/* —— New Dialogue (Lisa-style) —— */
.dialogue-shell {
  max-width: 760px;
}
.dlg-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dlg-tutor {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dlg-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(140deg, #14b8a6, #0f766e);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25);
}
.dlg-avatar.small {
  width: 36px;
  height: 36px;
  font-size: 16px;
}
.dlg-tutor-meta {
  display: flex;
  flex-direction: column;
}
.dlg-tutor-meta strong {
  font-size: 18px;
  color: var(--ink);
}
.dlg-tutor-meta span {
  font-size: 13px;
  color: var(--muted);
}
.dlg-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(140deg, #10b981, #059669);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dlg-phone-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.35);
}
.dlg-phone-ico {
  font-size: 16px;
}
.dlg-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dlg-progress-track {
  flex: 1;
  height: 10px;
  background: var(--panel-soft);
  border-radius: 999px;
  overflow: hidden;
}
.dlg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #10b981);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.dlg-progress-text {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.dlg-progress-text b {
  color: var(--brand-ink);
  font-size: 15px;
}
.dlg-words-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  background: var(--panel-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.dlg-words-pool .chat-word {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  border: 1px solid var(--line);
  transition: all 0.15s ease;
}
.dlg-words-pool .chat-word.used {
  background: linear-gradient(140deg, #14b8a6, #0f766e);
  color: #fff;
  border-color: transparent;
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.55);
}

.dlg-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}
.dlg-turn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.dlg-turn.ai {
  justify-content: flex-start;
}
.dlg-turn.user {
  justify-content: flex-end;
}
.dlg-turn.user .dlg-bubble {
  margin-left: auto;
}
.dlg-bubble {
  max-width: 80%;
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.55;
  position: relative;
}
.dlg-bubble.ai {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  border-top-left-radius: 6px;
}
.dlg-bubble.user {
  background: linear-gradient(140deg, #d8f1a8, #c3e88d);
  color: #1d3a09;
  border-top-right-radius: 6px;
}
.dlg-bubble-text {
  word-break: break-word;
}
.dlg-bubble-text mark {
  background: rgba(20, 184, 166, 0.18);
  color: inherit;
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 600;
}
.dlg-bubble.user mark {
  background: rgba(15, 118, 110, 0.22);
}
.dlg-bubble-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.dlg-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all 0.12s ease;
}
.dlg-bubble.ai .dlg-action-pill {
  background: var(--panel);
  border-color: var(--line);
}
.dlg-action-pill:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.dlg-action-pill.active {
  background: var(--brand-ink);
  color: #fff;
  border-color: var(--brand-ink);
}

.dlg-analysis {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255, 251, 235, 0.92);
  border: 1px solid rgba(202, 138, 4, 0.2);
  border-radius: 12px;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.6;
  animation: dlgFadeIn 0.25s ease;
}
@keyframes dlgFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dlg-analysis.error {
  background: rgba(254, 226, 226, 0.65);
  border-color: rgba(220, 38, 38, 0.3);
}
.dlg-analysis-head {
  font-weight: 700;
  font-size: 13px;
  color: var(--brand-ink);
  margin-bottom: 8px;
}
.dlg-analysis-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dlg-analysis-section {
  background: rgba(255,255,255,0.65);
  border-radius: 10px;
  padding: 10px 12px;
}
.dlg-analysis-section.dlg-polished {
  background: rgba(187, 247, 208, 0.5);
}
.dlg-analysis-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}
.dlg-analysis-bigtext {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}
.dlg-alt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dlg-alt-list li {
  font-size: 14px;
  line-height: 1.5;
}
.dlg-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dlg-tips li {
  padding-left: 14px;
  position: relative;
  font-size: 13px;
  color: #4b5563;
}
.dlg-tips li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand);
}
.dlg-fineprint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.dlg-skel {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: dlgSkel 1.2s linear infinite;
  border-radius: 6px;
  margin: 4px 0;
}
@keyframes dlgSkel {
  from { background-position: 0% 50%; }
  to   { background-position: -200% 50%; }
}
.dlg-pron-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dlg-pron-score {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}
.dlg-pron-score b {
  font-size: 18px;
  color: var(--brand-ink);
  display: block;
}
.dlg-pron-score em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}
.dlg-pron-issues {
  margin-top: 8px;
}
.dlg-pron-issues ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.dlg-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--panel-soft);
  border-radius: 14px;
  border: 1px solid var(--line);
}
.dlg-form textarea {
  border: 0;
  background: var(--panel);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  resize: vertical;
  font-family: inherit;
  color: var(--ink);
  min-height: 48px;
}
.dlg-form textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.dlg-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.dlg-mic-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1.5px solid var(--line);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.dlg-mic-btn:hover {
  border-color: var(--brand);
  background: rgba(20, 184, 166, 0.06);
}
.dlg-send-btn {
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(140deg, #14b8a6, #0f766e);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(20, 184, 166, 0.28);
}
.dlg-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.dlg-end {
  text-align: center;
  padding: 18px;
}
.dlg-end-stat {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 6px;
}
.dlg-end-stat b {
  font-size: 32px;
}
.dlg-pick .scenario-grid {
  margin-top: 14px;
}

.dlg-phone-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
  animation: dlgFadeIn 0.18s ease;
}
.dlg-phone-panel {
  background: var(--panel);
  border-radius: 20px;
  padding: 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dlg-phone-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(140deg, #14b8a6, #0f766e);
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(20, 184, 166, 0.35);
  animation: dlgPulse 2s ease-in-out infinite;
}
@keyframes dlgPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.dlg-phone-panel h2 { margin: 6px 0 0; font-size: 20px; }

/* Avatar img + sizes */
.dlg-avatar-img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.2);
}
.dlg-avatar-img.lg, .dlg-avatar.lg { width: 48px; height: 48px; font-size: 20px; }
.dlg-avatar-img.sm, .dlg-avatar.sm { width: 36px; height: 36px; font-size: 16px; }
.dlg-tutor.dlg-tutor-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  border-radius: 12px;
  transition: background 0.15s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dlg-tutor.dlg-tutor-btn:hover {
  background: var(--panel-soft);
}
.dlg-tutor-edit {
  margin-left: 6px;
  font-size: 14px;
  color: var(--muted);
}
.dlg-flag {
  font-size: 14px;
  margin-left: 4px;
}

/* Tutor picker modal */
.dlg-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 18px;
  animation: dlgFadeIn 0.18s ease;
}
.dlg-tutor-picker, .dlg-azure-modal {
  background: var(--panel);
  border-radius: 20px;
  width: min(640px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 22px 60px rgba(0,0,0,0.3);
}
.dlg-tutor-picker header, .dlg-azure-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.dlg-tutor-picker header h2, .dlg-azure-modal header h2 { margin: 0; font-size: 18px; }
.dlg-modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
}
.dlg-tutor-picker footer {
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.dlg-tutor-grid {
  padding: 16px 22px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .dlg-tutor-grid { grid-template-columns: 1fr; }
}
.dlg-tutor-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: all 0.12s ease;
}
.dlg-tutor-card:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}
.dlg-tutor-card.active {
  border-color: var(--brand);
  background: rgba(20, 184, 166, 0.08);
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.15);
}
.dlg-tutor-card .dlg-avatar-img, .dlg-tutor-card .dlg-avatar {
  width: 56px; height: 56px; font-size: 22px;
}
.dlg-tutor-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dlg-tutor-card-meta strong {
  font-size: 16px;
  color: var(--ink);
}
.dlg-tutor-card-tag {
  font-size: 11px;
  color: var(--brand-ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dlg-tutor-card-desc {
  font-size: 12px;
  color: var(--muted);
}
.dlg-tutor-card-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.dlg-tutor-card-preview:hover { transform: scale(1.05); }

/* Azure pronunciation modal */
.dlg-azure-body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dlg-azure-ref {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}
.dlg-azure-mic-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dlg-azure-mic {
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(140deg, #ef4444, #b91c1c);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}
.dlg-azure-mic:disabled { opacity: 0.7; cursor: default; }
.dlg-azure-status {
  font-size: 13px;
  color: var(--muted);
}
.dlg-azure-result {
  background: rgba(255, 251, 235, 0.92);
  border: 1px solid rgba(202, 138, 4, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dlg-azure-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* Phone modal: avatar + transcript */
.dlg-phone-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(20, 184, 166, 0.4);
  animation: dlgPulse 2s ease-in-out infinite;
}
.dlg-phone-transcript {
  max-height: 220px;
  overflow-y: auto;
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.phone-line {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.phone-line.phone-user {
  background: rgba(187, 247, 208, 0.45);
  align-self: flex-end;
  max-width: 90%;
}
.phone-line.phone-ai {
  background: var(--panel-soft);
  align-self: flex-start;
  max-width: 90%;
}
.dlg-phone-actions {
  margin-top: 12px;
}
.dlg-phone-hangup {
  padding: 12px 32px;
  border-radius: 999px;
  background: linear-gradient(140deg, #ef4444, #b91c1c);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.3);
}

@media (max-width: 640px) {
  .dlg-card { padding: 16px 14px; gap: 12px; }
  .dlg-bubble { max-width: 88%; padding: 10px 12px; }
  .dlg-pron-scores { grid-template-columns: repeat(2, 1fr); }
  .dlg-phone-btn span:last-child { display: none; }
}

/* —— Dialogue (legacy compatibility — keep scenario-grid + chat-word) —— */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.scenario-card {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.scenario-card:hover {
  border-color: var(--brand);
  background: rgba(15, 118, 110, 0.04);
  transform: translateY(-2px);
}
.scenario-card strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.scenario-card p { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
.scenario-card-loading {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}
.scenario-card-loading:hover {
  transform: none;
  background: var(--panel-soft);
  border-color: var(--line);
}
.scenario-words {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.scenario-word-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border-radius: 999px;
  font-style: normal;
  font-weight: 600;
}
.scenario-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.chat-card { gap: 14px; }
.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.chat-head strong { font-size: 16px; color: var(--brand-ink); }
.chat-meta { font-size: 12px; color: var(--muted); }
.chat-words-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-word {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: "SF Mono", ui-monospace, monospace;
}
.chat-word.used {
  background: rgba(20, 122, 77, 0.1);
  border-color: var(--ok);
  color: var(--ok);
  text-decoration: line-through;
  font-weight: 600;
}
.chat-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.chat-turn {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-turn .who {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chat-turn p {
  margin: 0;
  background: var(--panel);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  align-self: flex-start;
  max-width: 90%;
}
.chat-turn.user p {
  background: rgba(15, 118, 110, 0.08);
  border-color: rgba(15, 118, 110, 0.3);
  color: var(--brand-ink);
  align-self: flex-end;
}
.chat-turn .who { align-self: flex-start; }
.chat-turn.user .who { align-self: flex-end; }
.chat-fb {
  font-style: italic;
  font-size: 12px;
  color: var(--brand-ink);
  background: rgba(15, 118, 110, 0.05);
  padding: 4px 8px;
  border-radius: 6px;
  align-self: flex-end;
  max-width: 90%;
}
.chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-form textarea {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  background: var(--panel-soft);
  color: var(--ink);
}
.chat-form textarea:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.chat-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.chat-end {
  text-align: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}
.chat-end-score {
  display: inline-block;
  background: linear-gradient(140deg, rgba(15, 118, 110, 0.95), rgba(20, 184, 166, 0.85));
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 14px;
}
.chat-end p { margin: 14px 0; color: var(--ink); }

/* —— Writing —— */
.writing-topic {
  margin: 0 0 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--ink);
  font-style: italic;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.writing-area {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  background: var(--panel-soft);
  color: var(--ink);
  line-height: 1.65;
  resize: vertical;
}
.writing-area:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.writing-area:disabled { opacity: 0.85; }
.writing-meta {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.writing-result {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.polished-essay {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink);
  margin: 0;
}

/* —— Reading —— */
.reading-meta { font-size: 12px; color: var(--muted); margin: 0; }
.reading-passage {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
}
.reading-passage mark {
  background: rgba(15, 118, 110, 0.18);
  color: var(--brand-ink);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
}
.reading-questions { display: flex; flex-direction: column; gap: 14px; }
.rq {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rq header { display: flex; align-items: baseline; gap: 10px; }
.rq-num {
  background: var(--brand);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.rq header p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.5; }
.rq-opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rq-opt {
  width: 100%;
  text-align: left;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}
.rq-opt:hover { border-color: var(--brand); }
.rq-opt.picked { border-color: var(--brand); background: rgba(15, 118, 110, 0.06); }
.rq-opt.right { background: rgba(20, 122, 77, 0.1); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.rq-opt.wrong { background: rgba(180, 35, 24, 0.08); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.rq-opt.dim { opacity: 0.5; }
.rq-explain {
  margin: 6px 0 0;
  background: var(--panel-soft);
  padding: 8px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--muted);
}
.reading-score {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-right: auto;
}

.loading-shimmer {
  height: 80px;
  background: linear-gradient(90deg, var(--panel-soft) 25%, var(--line) 50%, var(--panel-soft) 75%);
  background-size: 400% 100%;
  border-radius: 12px;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

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

/* =================================================================
   行内跟读评测 + ASR 麦克风状态
   ================================================================= */
.dict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 14px;
}
.dict-word-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.dict-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pron-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pron-btn {
  font: inherit;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: rgba(15, 118, 110, 0.06);
  color: var(--brand-ink);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.15s ease;
}
.pron-btn:hover { background: var(--brand); color: #fff; }
.pron-btn.primary { background: var(--brand); color: #fff; }
.pron-btn.primary:hover { background: var(--brand-ink); }
.pron-btn.rec {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  animation: pulse 1.2s infinite;
}
.pron-btn.small {
  padding: 4px 10px;
  font-size: 12px;
}
.pron-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.pron-summary strong {
  font-size: 16px;
  color: var(--brand-ink);
  font-weight: 700;
}
.pron-summary em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
}
.pron-summary.pass { background: rgba(20,122,77,0.08); border-color: var(--ok); color: var(--ok); }
.pron-summary.pass strong { color: var(--ok); }
.pron-summary.fail { background: rgba(180,35,24,0.06); border-color: rgba(180,35,24,0.35); }
.pron-summary.fail strong { color: var(--danger); }
.pron-err {
  font-size: 12px;
  color: var(--danger);
  background: rgba(180,35,24,0.06);
  padding: 4px 10px;
  border-radius: 8px;
}
.word-scores.small { gap: 4px; margin-top: 4px; }
.word-scores.small .ws { font-size: 11px; padding: 3px 8px; }

/* 例句行：标准布局 */
.example-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.example-list li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ex-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ex-text { flex: 1; }

/* 搭配带翻译 */
.colloc-list.bigger {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.colloc-list.bigger li {
  background: rgba(15, 118, 110, 0.05);
  border: 1px solid rgba(15, 118, 110, 0.18);
  padding: 8px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.colloc-list.bigger .colloc {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  color: var(--brand-ink);
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 600;
}
.colloc-zh {
  color: var(--ink);
  font-size: 13px;
  margin-left: auto;
}

/* =================================================================
   听音识词新版 + 设置页 + 造句卡片 + 搭配展开 + 更多例句
   ================================================================= */

/* 顶部模式切换 */
.listen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.seg-toggle {
  display: inline-flex;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.seg-toggle button {
  font: inherit;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.seg-toggle button.active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.seg-toggle.small button { padding: 5px 12px; font-size: 12px; }

/* 听音 block */
.listen-block.big {
  align-items: center;
  gap: 14px;
}
.btn-dontknow {
  font-size: 13px;
  padding: 8px 16px;
}

/* 拼写音标提示 */
.ipa-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.ipa-hint em {
  font-style: normal;
  color: var(--brand-ink);
  font-weight: 600;
}

/* 选择 4 选 1 */
.choice-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.choice-opt {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  transition: all 0.12s ease;
}
.choice-opt:hover { border-color: var(--brand); }
.choice-opt.picked { border-color: var(--brand); background: rgba(15,118,110,0.06); }
.choice-opt.right {
  background: rgba(20,122,77,0.1);
  border-color: var(--ok);
  color: var(--ok);
  font-weight: 600;
}
.choice-opt.wrong {
  background: rgba(180,35,24,0.08);
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}
.choice-opt.dim { opacity: 0.5; }

/* 设置页 */
.settings-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 14px;
  box-shadow: var(--shadow);
}
.settings-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.settings-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.settings-stepper { justify-content: flex-start; }
.goal-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.goal-card.small {
  padding: 12px 10px;
  text-align: center;
  align-items: center;
}
.goal-card.small strong { font-size: 14px; }
.goal-card.small em { font-size: 10px; }
.goal-card.small p { display: none; }
.goal-card.small .goal-emoji { font-size: 22px; }
.ratio-control.wide { max-width: none; flex: 1; }

/* 搭配展开 */
.colloc-list.bigger li.colloc-row {
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  display: block;
}
.colloc-list.bigger li.colloc-row.open {
  background: rgba(15, 118, 110, 0.04);
  border-color: rgba(15, 118, 110, 0.22);
}
.colloc-toggle {
  width: 100%;
  background: rgba(15, 118, 110, 0.05);
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  flex-wrap: wrap;
  transition: background 0.12s ease;
}
.colloc-toggle:hover { background: rgba(15, 118, 110, 0.1); }
.colloc-row.open .colloc-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: rgba(15, 118, 110, 0.1);
}
.chev {
  color: var(--brand);
  font-size: 14px;
  width: 14px;
  flex: 0 0 auto;
}
.colloc-examples {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed rgba(15, 118, 110, 0.2);
}
.colloc-ex-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}

/* 例句标题 + 难度切换 */
.examples-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.examples-head h3 { margin: 0; }

/* 更多例句按钮 */
.more-ex-row {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.more-ex-btn {
  font-size: 13px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.more-ex-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}
.more-ex-spinner {
  display: inline-block;
  animation: rdSpin 1.4s linear infinite;
}
@keyframes rdSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.more-ex-error {
  color: #dc2626;
  font-size: 12px;
}

/* 造句卡片 — 重新设计：更紧凑、灰底胶囊麦克风按钮 */
.sentences-section { gap: 14px; }
.sentences-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sentences-head h3 { margin: 0; }
.must-write-pill {
  background: rgba(154, 103, 0, 0.1);
  color: var(--warn);
  border: 1px solid rgba(154, 103, 0, 0.32);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.sentence-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sentence-row.card {
  position: relative;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px 12px 44px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.sentence-row.card:focus-within {
  border-color: var(--brand);
  background: var(--panel);
}
.sentence-row.card .sentence-num {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--brand);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}
.sentence-row.card .sentence-input {
  flex: 1;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--panel);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  resize: vertical;
  min-height: 56px;
  max-height: 220px;
  font-family: inherit;
}
.sentence-row.card .sentence-input:focus {
  outline: none;
  border-color: var(--brand);
}
.sentence-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-icon {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.btn-icon:hover { border-color: var(--danger); color: var(--danger); background: rgba(180,35,24,0.04); }
.btn-add-sentence {
  align-self: flex-start;
  background: rgba(15, 118, 110, 0.04);
  border: 1.5px dashed rgba(15, 118, 110, 0.32);
  color: var(--brand-ink);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  transition: background 0.12s ease;
}
.btn-add-sentence:hover { background: rgba(15, 118, 110, 0.1); }

/* hint 小字 */
.dict-section h3 .hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 8px;
}

/* ============================================================
   听说课程预览（Stage A）
   ============================================================ */
.course-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.course-hero {
  background: linear-gradient(140deg, rgba(15,118,110,0.08), rgba(20,184,166,0.04));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.course-pill {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--brand-ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.course-pill.grammar {
  background: rgba(15,118,110,0.1);
  border-color: rgba(15,118,110,0.3);
}
.course-hero h1 { margin: 4px 0 4px; font-size: 28px; font-weight: 700; color: var(--ink); }
.course-warmup-zh { margin: 0; color: var(--brand-ink); font-size: 14px; }
.course-cta { margin-top: 8px; }

.course-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}
.course-section h2 { margin: 0; font-size: 18px; color: var(--brand-ink); }
.course-section h3 { margin: 12px 0 6px; font-size: 14px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.course-section.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.course-section.split > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
}
.course-section.dim {
  background: var(--panel-soft);
  border-style: dashed;
  box-shadow: none;
  font-size: 13px;
  color: var(--muted);
}

/* Dialogue */
.dialogue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: dt;
}
.dialogue-turn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px 14px 56px;
  border-radius: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dialogue-turn::before {
  counter-increment: dt;
  content: counter(dt);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialogue-turn.b::before { background: var(--brand-ink); }
.dialogue-turn.active {
  background: rgba(15,118,110,0.06);
  border-color: var(--brand);
}
.dt-head { display: flex; align-items: baseline; gap: 8px; }
.dt-speaker { font-weight: 700; color: var(--brand-ink); font-size: 13px; }
.dt-voice { font-size: 11px; color: var(--muted); }
.dt-line { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.dt-zh { margin: 0; font-size: 13px; color: var(--muted); }
.dialogue-turn .btn-listen.tiny { position: absolute; right: 14px; top: 12px; }

/* Vocab + expression lists */
.vocab-list, .expr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vocab-list li, .expr-list li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.vocab-list strong, .expr-list strong { color: var(--brand-ink); font-size: 15px; margin-right: 6px; }
.vocab-ipa { color: var(--muted); font-size: 12px; margin-right: 6px; }
.vocab-pos { background: rgba(15,118,110,0.1); color: var(--brand-ink); font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-right: 6px; font-style: italic; }
.vocab-zh { color: var(--ink); font-size: 13px; }
.vocab-ex { margin: 4px 0 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
.vocab-ex em { color: var(--muted); font-style: normal; margin-left: 6px; }

/* Grammar */
.grammar-quote {
  margin: 0;
  background: var(--panel-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
}
.grammar-quote p { margin: 0; font-size: 15px; color: var(--ink); }
.grammar-quote em { font-style: normal; color: var(--muted); font-size: 13px; }
.pattern-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pattern-list code {
  background: rgba(15,118,110,0.06);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--brand-ink);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}

/* Q&A */
.qa-list {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-list li { font-size: 14px; color: var(--ink); line-height: 1.5; }
.qa-list em.zh { color: var(--muted); font-style: normal; margin-left: 8px; font-size: 12px; }
.qa-list p { margin: 4px 0 0; color: var(--brand-ink); }

/* ============================================================
   听说课程 · Stage B 步进 UI
   ============================================================ */
.course-progress {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
}
.cp-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-step { font-size: 13px; color: var(--brand-ink); font-weight: 600; }
.cp-bar {
  height: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.cp-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #0f766e);
  transition: width 0.3s ease;
}

.lesson-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
  margin-top: 16px;
}
.lesson-step h2 { margin: 0; font-size: 22px; color: var(--brand-ink); }

/* AI 老师对话气泡 */
.teacher-bubble {
  background: linear-gradient(135deg, rgba(15,118,110,0.08), rgba(20,184,166,0.04));
  border: 1px solid rgba(15,118,110,0.25);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.teacher-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.teacher-bubble p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* —— 5 · 语音讲解：画布 —— */
.phonetic-canvas-wrap {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.canvas-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tool-btn {
  font: inherit;
  background: var(--panel);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}
.tool-btn:hover { border-color: var(--brand); }
.tool-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}
.tool-btn.ghost {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  margin-left: auto;
}
.canvas-stage {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 18px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-sentence {
  margin: 0;
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.02em;
  user-select: none;
  pointer-events: none;
}
.phonetic-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.phonetic-markup-preview {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  justify-content: center;
}
.phonetic-markup-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; }

/* —— 6 · 操练 · 情绪表演 —— */
.emotion-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.emotion-pills button {
  font: inherit;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
}
.emotion-pills button.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}
.scenario-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scenario-list li {
  background: rgba(15,118,110,0.06);
  border: 1px solid rgba(15,118,110,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink);
}
.lesson-step p.ob-sub { margin: 0; }
.ob-sub.small { font-size: 12px; }
.intro-image-wrap { display: flex; justify-content: center; }
.intro-image {
  max-width: 100%;
  max-height: 320px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.intro-q {
  background: rgba(15,118,110,0.06);
  border-left: 3px solid var(--brand);
  margin: 0;
  padding: 14px 18px;
  border-radius: 0 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intro-q-en { margin: 0; font-size: 17px; color: var(--ink); font-weight: 500; }
.intro-q em { color: var(--muted); font-style: normal; font-size: 13px; }

.speak-zone { display: flex; flex-direction: column; gap: 10px; }
.speak-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.speak-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  font-size: 14px;
  font-family: inherit;
}
.speak-input:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.speak-heard {
  flex: 1;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--brand-ink);
  min-height: 24px;
  font-style: italic;
}

.step-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 6px;
}

.reveal-line {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.big-line { margin: 0; font-size: 20px; line-height: 1.5; color: var(--ink); }
.big-line.zh { font-size: 15px; color: var(--muted); }
.reveal-line mark { background: rgba(15,118,110,0.18); color: var(--brand-ink); padding: 0 4px; border-radius: 4px; }
.focus-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.stress-hint { margin: 0; }
.stress-hint mark {
  background: rgba(15,118,110,0.18);
  color: var(--brand-ink);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.review-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-q { margin: 0; color: var(--muted); font-size: 13px; }
.review-hints {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pattern-history {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pattern-history li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
}
.pattern-history li p { margin: 0; }

/* Sentence points */
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-list li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.sp-line { margin: 0; font-size: 14px; color: var(--ink); }
.sp-focus, .sp-notes, .sp-link, .sp-stress { margin: 0; color: var(--muted); font-size: 12px; }
.sp-focus em { color: var(--ink); font-style: normal; margin-left: 4px; }
.sp-stress mark { background: rgba(15,118,110,0.18); color: var(--brand-ink); padding: 0 4px; border-radius: 4px; }

@media (max-width: 760px) {
  .course-section.split { grid-template-columns: 1fr; }
}

/* 词汇量测评 · 各级别表现 */
.level-breakdown {
  margin-top: 18px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.level-breakdown h3 {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.level-breakdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-row {
  display: grid;
  grid-template-columns: 36px 100px 1fr 100px;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  font-size: 13px;
}
.lb-row.empty { opacity: 0.45; }
.lb-row.passed .lb-level { background: var(--ok); }
.lb-level {
  background: var(--brand);
  color: #fff;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
}
.lb-size { color: var(--muted); font-size: 12px; }
.lb-bar {
  height: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.lb-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #0f766e);
  border-radius: 999px;
}
.lb-row.passed .lb-bar span { background: linear-gradient(90deg, #22c55e, var(--ok)); }
.lb-stat { font-size: 12px; color: var(--ink); text-align: right; font-family: "SF Mono", ui-monospace, monospace; }
.lb-note {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* 生词本星按钮 */
.btn-star {
  font: inherit;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.12s ease;
}
.btn-star:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-star.on {
  background: rgba(154,103,0,0.1);
  border-color: rgba(154,103,0,0.4);
  color: var(--warn);
  font-weight: 600;
}

/* ============================================================
   Account 页 + "我的" 页
   ============================================================ */
.account-shell { max-width: 480px; }
.account-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 36px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.account-card h1 { margin: 0; font-size: 28px; }
.account-card a { color: var(--brand-ink); text-decoration: underline; }
.account-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.account-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.account-form input {
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  background: var(--panel-soft);
  color: var(--ink);
  font-family: inherit;
}
.account-form input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--panel);
}
.account-fineprint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.account-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-form .field label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.account-form .agree-line, .account-card .agree-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 4px 0;
  font-size: 14px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.6;
  user-select: none;
}
.account-form .agree-line input[type="checkbox"],
.account-card .agree-line input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
  /* large tappable area on mobile */
  margin: 0 4px 0 0;
}
/* When the agree-line itself is a <label> wrapping the checkbox + text,
   the whole row is clickable (native label behavior). Cursor: pointer
   on the wrapper makes that explicit on desktop. */
.agree-line-wrap {
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.agree-line-wrap:hover {
  background: rgba(99, 102, 241, 0.04);
}
.agree-line-wrap .agree-text {
  flex: 1;
  line-height: 1.55;
}
.account-form .agree-line .agree-check-target,
.account-card .agree-line .agree-check-target {
  cursor: pointer;
  padding: 6px 4px;
  /* expand tappable region around the label text */
  -webkit-tap-highlight-color: rgba(20, 184, 166, 0.12);
}
.account-form .agree-line .agree-link,
.account-card .agree-line .agree-link {
  color: var(--brand-ink);
  text-decoration: underline;
  padding: 6px 2px;
  cursor: pointer;
}

/* Phone / Username tabs */
.auth-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
  background: var(--panel-soft);
  border-radius: 12px;
  padding: 4px;
}
.auth-tab {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}
.auth-tab.active {
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.account-form button[type="submit"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.account-err {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
}
.legal-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}
.legal-modal {
  background: var(--panel);
  border-radius: 18px;
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}
.legal-modal header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.legal-modal header h2 { margin: 0; font-size: 20px; }
.legal-modal .legal-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.legal-modal .legal-body {
  padding: 18px 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.legal-modal .legal-body h3 {
  margin: 18px 0 6px;
  font-size: 15px;
}
.legal-modal footer {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

/* Industry exam picker cards */
.industry-exams {
  margin: 18px 0 8px;
}
.industry-exams h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--brand-ink);
}
.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.exam-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1.5px solid var(--brand);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.exam-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.12);
}
.exam-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exam-card-head strong {
  font-size: 15px;
  color: var(--ink);
}
.exam-card-en {
  font-size: 11px;
  color: var(--brand-ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.exam-card-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.exam-card-count {
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.exam-card-pct {
  font-weight: 400;
  color: var(--muted);
}
.exam-card-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(202, 138, 4, 0.18);
  color: #b45309;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  animation: pulse-badge 1.8s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.exam-card-progress {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}
.exam-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #0f766e);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ─── Home tools section ─── */
.home-tools {
  margin-top: 22px;
}
.home-tools h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.home-tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.home-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  border-color: var(--brand);
}
.ht-icon { font-size: 24px; margin-bottom: 2px; }
.ht-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.ht-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ─── Reading feature ─── */
.rd-shell, .rd-view-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 18px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rd-header, .rd-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--line);
}
.rd-header h1 { margin: 0; font-size: 22px; flex: 1; }
.rd-level-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(140deg, #0891b2, #06b6d4);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}
.rd-generate-btn {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, #6366f1, #4f46e5);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.32);
}
.rd-generate-btn:disabled { opacity: 0.6; cursor: default; }
.rd-hint-card {
  background: linear-gradient(140deg, #ecfeff, #f0fdfa);
  border: 1px solid #a5f3fc;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-hint-tag {
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(140deg, #0891b2, #06b6d4);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.rd-hint-card p { margin: 0; font-size: 13px; line-height: 1.6; color: #0e7490; }
.rd-list { display: flex; flex-direction: column; gap: 12px; }
.rd-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rd-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.rd-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rd-card h2 { margin: 0; font-size: 17px; flex: 1; }
.rd-level-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(8, 145, 178, 0.12);
  color: #0e7490;
  font-size: 11px;
  font-weight: 600;
}
.rd-preview { margin: 8px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rd-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rd-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-vocab-pill {
  padding: 2px 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
}
.rd-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* ─── Article-view reader prefs (theme/font/size) ─── */
.rd-view-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 20px 100px;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}
.rd-rd-theme-light  { background: var(--bg); color: var(--ink); }
.rd-rd-theme-sepia  { background: #f3eddc; color: #4a3a25; }
.rd-rd-theme-dark   { background: #14151a; color: #e6e6ea; }

/* Body-level theme — the shell is a centered narrow column; the body
   shows on either side and behind it. Match the page chrome to the theme. */
body.rd-body-light  { background: #fafafa; }
body.rd-body-sepia  { background: #ede4cc; }
body.rd-body-dark   { background: #14151a; color: #e6e6ea; }

/* Dark theme overrides — the article card, paragraph text, header label
   chip, and the hint banner all need explicit colors so the page is fully
   dark (not just the outer shell). */
.rd-rd-theme-dark .rd-view-article {
  background: #1c1d22;
  border-color: #2b2d33;
  color: #e6e6ea;
}
.rd-rd-theme-dark .rd-view-article h1 { color: #f5f5f7; }
.rd-rd-theme-dark .rd-para-en { color: #e6e6ea; }
.rd-rd-theme-dark .rd-para-zh {
  background: #2b2d33;
  border-left-color: #6366f1;
  color: #c7c7cc;
}
.rd-rd-theme-dark .rd-level-pill {
  background: rgba(99, 102, 241, 0.22);
  color: #c7d2fe;
}
.rd-rd-theme-dark .rd-hl-hint {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.10), rgba(99, 102, 241, 0.12));
  border-color: rgba(99, 102, 241, 0.30);
  color: #c7c7cc;
}
.rd-rd-theme-dark .rd-wiki-attribution {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border-left-color: #22c55e;
}
.rd-rd-theme-dark .rd-wiki-attribution a { color: #86efac; }

/* Sepia variant — keep the article card matching the warm background */
.rd-rd-theme-sepia .rd-view-article {
  background: #faf3e0;
  border-color: #d8c89a;
  color: #4a3a25;
}
.rd-rd-theme-sepia .rd-view-article h1 { color: #2a2014; }
.rd-rd-theme-sepia .rd-para-en { color: #3b2e16; }

.rd-rd-font-system     .rd-view-article { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif; }
.rd-rd-font-serif      .rd-view-article { font-family: Georgia, "Source Serif Pro", "Source Serif 4", serif; }
.rd-rd-font-newsreader .rd-view-article { font-family: "Newsreader", "Source Serif Pro", Georgia, serif; }
/* Additional curated fonts — all use widely-available system fonts so the
   choice is reflected even when the device has nothing extra installed. */
.rd-rd-font-pingfang   .rd-view-article { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
.rd-rd-font-songti     .rd-view-article { font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif; }
.rd-rd-font-kaiti      .rd-view-article { font-family: "Kaiti SC", "STKaiti", "KaiTi", "FZKai-Z03S", serif; }
.rd-rd-font-yahei      .rd-view-article { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.rd-rd-font-sourcehan-sans  .rd-view-article { font-family: "Source Han Sans SC", "PingFang SC", "Noto Sans CJK SC", sans-serif; }
.rd-rd-font-sourcehan-serif .rd-view-article { font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", serif; }
.rd-rd-font-inter      .rd-view-article { font-family: "Inter", -apple-system, "Helvetica Neue", sans-serif; }
.rd-rd-font-merriweather .rd-view-article { font-family: "Merriweather", Georgia, serif; }
.rd-rd-font-charter    .rd-view-article { font-family: "Charter", "Iowan Old Style", Georgia, serif; }
.rd-rd-font-helvetica  .rd-view-article { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Custom font slot — applied via inline style when the user picks a local-only font. */
.rd-rd-font-custom .rd-view-article { font-family: var(--rd-custom-font, inherit); }

/* CSS variables used by the font-grid swatch buttons so each label is
   rendered IN its own font (so the user can see what they'll get). */
.rd-rd-prefs {
  --rd-font-system: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --rd-font-pingfang: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --rd-font-songti: "Songti SC", "STSong", "SimSun", serif;
  --rd-font-kaiti: "Kaiti SC", "STKaiti", "KaiTi", serif;
  --rd-font-yahei: "Microsoft YaHei", "PingFang SC", sans-serif;
  --rd-font-sourcehan-sans: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --rd-font-sourcehan-serif: "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --rd-font-serif: Georgia, "Source Serif Pro", serif;
  --rd-font-newsreader: "Newsreader", Georgia, serif;
  --rd-font-inter: "Inter", -apple-system, sans-serif;
  --rd-font-merriweather: "Merriweather", Georgia, serif;
  --rd-font-charter: "Charter", "Iowan Old Style", Georgia, serif;
  --rd-font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.rd-rd-pref-row-stack { flex-direction: column; align-items: stretch; }
.rd-rd-pref-row-stack > span { margin-bottom: 6px; }
.rd-rd-pref-opts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.rd-rd-pref-opts-grid button {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.rd-rd-pref-opts-grid button.active {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
  background: #eef2ff;
}
.rd-rd-font-local-btn { font-family: inherit !important; font-weight: 500; }

/* Local-fonts picker modal */
.rd-fontpicker-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.rd-fontpicker-card {
  width: min(620px, 92vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}
.rd-fontpicker-card header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f7;
}
.rd-fontpicker-card header h3 { font-size: 15px; margin: 0; flex: 0 0 auto; }
.rd-fontpicker-search {
  flex: 1; padding: 6px 10px;
  border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;
}
.rd-fontpicker-close {
  border: none; background: none; font-size: 20px; cursor: pointer;
  color: #94a3b8; padding: 0 4px;
}
.rd-fontpicker-list {
  flex: 1; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
}
.rd-fontpicker-list li {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.rd-fontpicker-list li:hover { background: #f8fafc; }
.rd-fontpicker-sample { font-size: 16px; color: #0f172a; }
.rd-fontpicker-name { font-size: 12px; color: #64748b; }

/* Font size — controls only font-size; line-height is applied via .rd-rd-lh-*  */
.rd-rd-size-small  .rd-para-en { font-size: 14.5px; }
.rd-rd-size-medium .rd-para-en { font-size: 16px;   }
.rd-rd-size-large  .rd-para-en { font-size: 18px;   }
.rd-rd-size-xlarge .rd-para-en { font-size: 21px;   }
/* Line-height — 3 presets that the user picks independently of size */
.rd-rd-lh-compact .rd-para-en { line-height: 1.55; }
.rd-rd-lh-normal  .rd-para-en { line-height: 1.85; }
.rd-rd-lh-loose   .rd-para-en { line-height: 2.15; }

/* Top-right toolbar (3 buttons: 标注 / Aa / 日夜) */
.rd-rd-toolbar {
  display: flex;
  gap: 4px;
}
.rd-rd-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
  font-size: 16px;
  opacity: 0.85;
  transition: all 0.15s ease;
}
.rd-rd-tool-btn:hover {
  opacity: 1;
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}
.rd-rd-tool-btn.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #4338ca;
}
.rd-rd-theme-dark .rd-rd-tool-btn { border-color: rgba(255,255,255,0.12); }
.rd-rd-theme-dark .rd-rd-tool-btn:hover { background: rgba(255,255,255,0.08); }
.rd-rd-tool-label {
  font-size: 12px;
  font-weight: 600;
  margin-left: 2px;
}
.rd-rd-tool-aa {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.04em;
}
.rd-rd-tool-aa::first-letter {
  font-size: 22px;
}

.rd-rd-icon-btn {
  width: 36px; height: 36px;
  border: none; background: transparent;
  font-size: 18px; cursor: pointer;
  border-radius: 8px; color: inherit;
  opacity: 0.7;
}
.rd-rd-icon-btn:hover { opacity: 1; background: rgba(0,0,0,0.05); }
.rd-rd-theme-dark .rd-rd-icon-btn:hover { background: rgba(255,255,255,0.08); }

.rd-rd-prefs {
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.rd-rd-theme-dark .rd-rd-prefs { background: rgba(255,255,255,0.05); }
.rd-rd-pref-row {
  display: grid; grid-template-columns: 50px 1fr; gap: 10px;
  align-items: center; margin: 4px 0;
}
.rd-rd-pref-row > span { font-size: 12px; opacity: 0.7; }
.rd-rd-pref-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-rd-pref-opts button {
  padding: 4px 10px; font-size: 12px;
  border: 1px solid rgba(0,0,0,0.1);
  background: transparent; border-radius: 6px;
  cursor: pointer; color: inherit;
}
.rd-rd-theme-dark .rd-rd-pref-opts button { border-color: rgba(255,255,255,0.15); }
.rd-rd-pref-opts button.active {
  background: #6366f1; color: #fff; border-color: #6366f1;
}
.rd-rd-theme-btn.active { box-shadow: 0 0 0 2px #6366f1; }

/* Cover image inside article view */
.rd-view-cover {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 18px;
  display: block;
}
.rd-view-subtitle-zh {
  margin: -4px 0 14px;
  color: #475569;
  font-size: 15px;
  line-height: 1.55;
}
.rd-rd-theme-dark .rd-view-subtitle-zh { color: rgba(255,255,255,0.7); }
.rd-rd-theme-sepia .rd-view-subtitle-zh { color: #6b563a; }
.rd-view-follow {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.rd-view-follow.is-followed {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.rd-view-follow:hover { background: #f1f5f9; }
.rd-view-follow.is-followed:hover { background: #4f46e5; }

/* ─── Search box (P10-G) ─── */
.rd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.rd-search:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.rd-search-icon { font-size: 15px; color: #94a3b8; flex: 0 0 auto; }
.rd-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #0f172a;
  padding: 2px 0;
}
.rd-search-input::placeholder { color: #94a3b8; }
.rd-search-clear {
  border: 0;
  background: #f1f5f9;
  color: #475569;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.rd-search-clear:hover { background: #e2e8f0; }

/* ─── Section head with "查看历史" link (P10-F) ─── */
.rd-events-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rd-events-section-head h3 { margin: 0; }
.rd-history-link {
  border: 0;
  background: transparent;
  color: #6366f1;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.rd-history-link:hover { background: rgba(99,102,241,0.08); }

/* ─── History page ─── */
.rd-history-list { display: flex; flex-direction: column; gap: 28px; }
.rd-history-month-head {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
  letter-spacing: 1px;
}
.rd-history-rows { display: flex; flex-direction: column; gap: 12px; }
.rd-history-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.rd-history-row:hover { transform: translateY(-1px); border-color: #c7d2fe; }
.rd-history-cover {
  width: 140px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  position: relative;
}
.rd-history-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-history-cover .rd-event-cover-gradient { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.rd-history-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-history-meta { display: flex; align-items: center; gap: 8px; }
.rd-history-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.rd-history-badge-headline { background: #fee2e2; color: #b91c1c; }
.rd-history-badge-major    { background: #dbeafe; color: #1e40af; }
.rd-history-badge-minor    { background: #f1f5f9; color: #475569; }
.rd-history-badge-closed   { background: #f3e8ff; color: #6b21a8; }
.rd-history-badge-archived { background: #e5e7eb; color: #4b5563; }
.rd-history-date { font-size: 12px; color: #94a3b8; }
.rd-history-body h4 { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: #0f172a; }
.rd-history-en { margin: 0; font-size: 12px; color: #64748b; }
.rd-history-summary { margin: 4px 0 0; font-size: 13px; color: #475569; line-height: 1.5; }

/* ─── Embedded Bilibili video tab (P8-2) ─── */
.rd-evd-video-list { display: flex; flex-direction: column; gap: 18px; }
.rd-evd-video-hint {
  margin: 0 0 4px;
  color: #64748b;
  font-size: 12px;
}
.rd-evd-video-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-evd-video-label {
  display: inline-block;
  padding: 2px 8px;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 999px;
  font-size: 11px;
  width: fit-content;
}
.rd-evd-video-card h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.rd-evd-video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;   /* 16:9 */
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.rd-evd-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.rd-evd-video-note { margin: 0; color: #475569; font-size: 13px; line-height: 1.5; }
.rd-evd-video-hint-small {
  margin: 4px 0 0;
  font-size: 11px;
  color: #94a3b8;
}
.rd-evd-video-link {
  align-self: flex-start;
  font-size: 12px;
  color: #0ea5e9;
  text-decoration: none;
}
.rd-evd-video-link:hover { text-decoration: underline; }
.rd-view-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.rd-rd-theme-dark .rd-view-meta { color: rgba(255,255,255,0.55); }

/* ─── Vocab-level tagging — black + bold (no color tint) ─── */
/* When the user selects a level in the prefs panel, every word/phrase that
   appears in that exam's vocab bank renders bold + slightly darker. Same look
   across all five levels so the body stays readable. */
.rd-vocab-tag {
  font-weight: 700;
  color: #0f172a;
}
.rd-rd-theme-dark .rd-vocab-tag { color: #f5f5f7; }
.rd-rd-theme-sepia .rd-vocab-tag { color: #2a2014; }

/* Vocab picker row in the prefs sheet */
.rd-vocab-row button {
  font-weight: 600;
}
.rd-vocab-row button.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}
.rd-rd-vocab-hint {
  margin: 6px 4px 0;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;
}

/* ─── Underline rendering (matches Aixie's .inline-underline) ─── */
.inline-underline {
  --underline-accent: #8c61ff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.inline-underline.underline-highlight {
  background: color-mix(in srgb, var(--underline-accent) 26%, transparent);
  border-radius: 0.22em;
  box-shadow: inset 0 -0.16em 0 color-mix(in srgb, var(--underline-accent) 26%, transparent);
}
.inline-underline.underline-line {
  text-decoration: underline 2px solid var(--underline-accent);
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}
.inline-underline.underline-line .rd-word { padding: 0; }
.inline-underline.underline-wave .rd-word { padding: 0; }
.inline-underline.underline-wave {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--underline-accent);
  text-decoration-thickness: 1.7px;
  text-underline-offset: 4px;
}
/* Preview swatch (used inside the picker buttons) */
.underline-preview {
  --underline-accent: #8c61ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #1f2329;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.underline-preview.underline-highlight {
  background: color-mix(in srgb, var(--underline-accent) 22%, rgba(31, 35, 41, 0.06));
}
.underline-preview.underline-line {
  text-decoration: underline 2px var(--underline-accent);
  text-underline-offset: 3px;
}
.underline-preview.underline-wave {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--underline-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.action-menu-style-btn.active {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

/* ─── Selection toolbar v2 — two stacked white pills ─── */
.action-menu-v2 {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
}
.action-menu-v2 .am-row {
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rd-rd-theme-dark .action-menu-v2 .am-row {
  background: #2a2c34;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.action-menu-v2 .am-row-styles { gap: 4px; }
.action-menu-v2 .am-row-actions {
  border-radius: 18px;
  padding: 6px 8px;
  gap: 0;
  justify-content: space-around;
}
.action-menu-v2 .am-style-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  color: #1f2329;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
}
.action-menu-v2 .am-style-btn.active {
  background: #f3f4f9;
  outline: none;
}
.rd-rd-theme-dark .action-menu-v2 .am-style-btn {
  background: #3a3d47; border-color: #4a4d57; color: #f5f5f7;
}
.action-menu-v2 .am-sep {
  width: 1px; height: 22px;
  background: rgba(0,0,0,0.10);
  margin: 0 6px;
}
.rd-rd-theme-dark .action-menu-v2 .am-sep { background: rgba(255,255,255,0.18); }
.action-menu-v2 .am-color-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--swatch-color);
  cursor: pointer;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-menu-v2 .am-color-btn.active {
  outline: 2px solid #fff;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px var(--swatch-color);
}
.am-check { width: 14px; height: 14px; display: block; }

.action-menu-v2 .am-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: #3b3f46;
  font-size: 11.5px;
  font-weight: 500;
  min-width: 56px;
}
.rd-rd-theme-dark .action-menu-v2 .am-action { color: #d4d4d8; }
.action-menu-v2 .am-action:hover {
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
}
.action-menu-v2 .am-action-ico {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-menu-v2 .am-action-ico svg { width: 22px; height: 22px; }

/* Inline translation panel (replaces toolbar after 翻译 is clicked) */
.am-trans-loading {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  padding: 16px 22px;
  font-size: 13px;
  color: #3b3f46;
  text-align: center;
}
.am-trans-result {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  padding: 14px 18px;
  max-width: 360px;
}
.am-trans-en { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: #1f2329; font-style: italic; }
.am-trans-zh { margin: 0; font-size: 14px; line-height: 1.6; color: #3b3f46; }
.am-trans-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 10px;
}
.am-trans-actions button {
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  color: #3b3f46;
}
.am-trans-actions button:hover { background: #f9fafb; }
.rd-rd-theme-dark .am-trans-loading,
.rd-rd-theme-dark .am-trans-result { background: #2a2c34; color: #e6e6ea; }
.rd-rd-theme-dark .am-trans-en { color: #f5f5f7; }
.rd-rd-theme-dark .am-trans-zh { color: #c7c7cc; }
.rd-rd-theme-dark .am-trans-actions button { background: #3a3d47; border-color: #4a4d57; color: #e6e6ea; }

/* ─── Selection action menu (legacy) ─── */
.rd-hl-popup {
  position: fixed;
  z-index: 1000;
}
.action-menu {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.rd-rd-theme-dark .action-menu {
  background: #262626;
  border-color: #3a3a3a;
  color: #e0e0e0;
}
.action-menu-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.rd-rd-theme-dark .action-menu-toolbar { border-bottom-color: rgba(255,255,255,0.08); }
.action-menu-style-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.action-menu-color-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.action-menu-color-btn {
  --swatch-color: #8c61ff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch-color);
  cursor: pointer;
  padding: 0;
}
.action-menu-color-btn.active {
  border-color: #1f2329;
  box-shadow: 0 0 0 2px #fff inset;
}
.action-menu-actions {
  display: flex;
  gap: 2px;
  padding: 2px;
}
.action-menu-actions button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font-size: 11px;
}
.action-menu-actions button:hover {
  background: rgba(99, 102, 241, 0.08);
}
.action-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  font-weight: 700;
  font-size: 13px;
}
.rd-rd-theme-dark .action-menu-icon {
  background: rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
}

/* Share-sheet tab bar — switch between 原文版 / 彩虹卡 / 笔记版 */
.rd-share-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  background: #fff;
}
.rd-share-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}
.rd-share-tab:hover { background: rgba(99, 102, 241, 0.06); color: #4338ca; }
.rd-share-tab.active {
  color: #4338ca;
  border-bottom-color: #6366f1;
  background: rgba(99, 102, 241, 0.06);
}

/* Poster wrapper inside the share sheet — canvas fits responsively */
.rd-share-card-poster {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rd-share-poster-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #f4ecda;
  padding: 14px;
  display: flex;
  justify-content: center;
}
.rd-share-canvas {
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 1080 / 1350;
  background: #fefbf3;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* Share sheet (阅读手帐) */
.rd-share-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.rd-share-card {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1a1a1a;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.rd-share-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}
.rd-share-close {
  width: 30px; height: 30px;
  border: none; background: transparent;
  font-size: 22px; cursor: pointer;
  color: #888; line-height: 1;
}
.rd-share-preview {
  flex: 1;
  margin: 0;
  padding: 18px;
  font-size: 13px;
  font-family: -apple-system, "PingFang SC", sans-serif;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.6;
  background: #f8f9fb;
  overflow: auto;
}
.rd-share-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #eee;
  flex-wrap: wrap;
}
.rd-share-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-weight: 600;
}
.rd-share-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
}

/* Highlight hint banner — explains how to highlight */
.rd-hl-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 12px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(99, 102, 241, 0.08));
  border: 1px dashed rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  color: var(--muted);
}
.rd-hl-hint-dismiss {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

/* ─── AI 精讲 / 完整词典 modal sheet (matches Aixie's .article-brief-sheet) ─── */
.overlay-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  padding: 24px;
}
.sheet-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fffbf4;
  color: #2c2419;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.article-brief-sheet { background: linear-gradient(180deg, #fffbf4 0%, #f7eddf 100%); }
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(184, 167, 145, 0.5);
}
.sheet-head h3 {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: #3b2f20;
}
.pill {
  display: inline-block;
  padding: 3px 10px;
  background: #f4d76b;
  color: #5c3e0a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.icon-btn {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: #93887a;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
}
.icon-btn:hover { background: rgba(0,0,0,0.06); color: #3b2f20; }

.sheet-block {
  padding: 14px 22px;
  border-bottom: 1px dashed rgba(184, 167, 145, 0.4);
  overflow-y: auto;
}
.sheet-block:last-child { border-bottom: none; }
.sheet-block h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #6b5a3e;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.example-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.example-card {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(216, 205, 191, 0.7);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.65;
}
.example-card strong {
  display: block;
  font-weight: 600;
  color: #2c2419;
}
.example-card .small-zh,
.example-card p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6b5a3e;
  line-height: 1.6;
}
.example-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.dict-jump-btn {
  padding: 3px 10px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.dict-jump-btn:hover { background: #4f46e5; }
.pattern-example-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(184, 167, 145, 0.4);
}
.pattern-example-item {
  padding: 8px 10px;
  background: #fef9ec;
  border-radius: 8px;
}
.pattern-example-en {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: #3b2f20;
}
.pattern-example-zh {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b5a3e;
}
.muted { color: #93887a; font-size: 13px; }
.rd-brief-loading {
  padding: 40px 22px;
  text-align: center;
}
.rd-brief-error {
  padding: 20px 22px;
  color: #dc2626;
  background: #fef2f2;
  margin: 0;
}

/* Full-dict-specific styling */
.rd-full-ipa {
  font-size: 14px;
  color: #6b5a3e;
  margin-left: 6px;
  font-weight: 400;
}
.rd-full-senses {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-full-senses li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.rd-full-pos {
  font-style: italic;
  font-weight: 600;
  color: #b08c4f;
  min-width: 36px;
}
.rd-full-trans {
  color: #2c2419;
}
.rd-full-collocs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-full-colloc {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid rgba(216, 205, 191, 0.7);
  border-radius: 999px;
  font-size: 12px;
  color: #3b2f20;
}
.rd-full-foot {
  display: flex;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid rgba(184, 167, 145, 0.5);
}

/* AI 精讲 inline explanation (deprecated, kept for legacy) */
.rd-para-explain {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(99, 102, 241, 0.06);
  border-left: 3px solid #6366f1;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
}
.rd-rd-theme-dark .rd-para-explain { background: rgba(99, 102, 241, 0.15); }
.rd-para-explain p { margin: 4px 0; }
.rd-ex-sum strong { color: #4338ca; }
.rd-ex-grammar strong { color: #b45309; }
.rd-ex-phrases strong { color: #047857; }
.rd-ex-phrases em { font-style: italic; font-weight: 600; }
.rd-rd-theme-dark .rd-ex-sum strong,
.rd-rd-theme-dark .rd-ex-grammar strong,
.rd-rd-theme-dark .rd-ex-phrases strong { color: #c7d2fe; }

/* ─── Big tab bar (文章 / 书籍) ─── */
.rd-tab-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel-soft);
  border-radius: 14px;
  margin: 14px 0;
}
.rd-big-tab {
  flex: 1;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.rd-big-tab em {
  font-style: normal;
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.7;
  font-weight: 500;
}
.rd-big-tab:hover { color: var(--ink); }
.rd-big-tab.active {
  background: var(--panel);
  color: var(--brand-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ─── Article card with cover image (Aixie-style) ─── */
.rd-article-list { display: flex; flex-direction: column; gap: 14px; }
.rd-article-card {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 14px;
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rd-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.rd-art-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rd-art-topic-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rd-art-topic {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.rd-art-title {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-art-preview {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-art-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.rd-art-diff, .rd-art-words, .rd-art-source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.rd-art-cover {
  width: 130px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-soft);
  position: relative;
}
.rd-art-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rd-art-cover-fail {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}
.rd-art-cover-fail::after {
  content: "📄";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  color: rgba(255,255,255,0.8);
}
.rd-art-cover-gradient {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  color: rgba(255,255,255,0.95);
}
.rd-grad-news     { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.rd-grad-culture  { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.rd-grad-life     { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.rd-grad-growth   { background: linear-gradient(135deg, #84cc16, #65a30d); }
.rd-grad-science  { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.rd-grad-nature   { background: linear-gradient(135deg, #10b981, #047857); }
.rd-grad-health   { background: linear-gradient(135deg, #ec4899, #be185d); }
.rd-grad-business { background: linear-gradient(135deg, #6366f1, #4338ca); }
.rd-grad-arts     { background: linear-gradient(135deg, #f43f5e, #be123c); }

@media (max-width: 480px) {
  .rd-article-card { grid-template-columns: 1fr 90px; }
  .rd-art-cover { width: 90px; height: 80px; }
}

/* ─── Book grid (扇贝 书架) ─── */
.rd-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.rd-book-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.rd-book-card:hover { transform: translateY(-4px); }
.rd-book-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #8B4513, #5d2e08);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-book-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.rd-cover-fallback {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.6);
}
.rd-book-title {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-book-author {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.rd-book-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
}
.rd-book-chapters {
  font-size: 10.5px;
  color: var(--muted);
}

/* ─── Book reader (沉浸式) ─── */
.rd-bk-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 20px 100px;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rd-bk-theme-light  { background: #fdfdfb; color: #2a2a2a; }
.rd-bk-theme-sepia  { background: #f3eddc; color: #4a3a25; }
.rd-bk-theme-dark   { background: #1a1a1a; color: #e0e0e0; }

.rd-bk-font-newsreader { font-family: "Newsreader", "Source Serif Pro", Georgia, serif; }
.rd-bk-font-playfair   { font-family: "Playfair Display", Georgia, serif; }
.rd-bk-font-plex       { font-family: "IBM Plex Sans", -apple-system, sans-serif; }

.rd-bk-size-small  .rd-bk-content { font-size: 15px; line-height: 1.75; }
.rd-bk-size-medium .rd-bk-content { font-size: 17px; line-height: 1.85; }
.rd-bk-size-large  .rd-bk-content { font-size: 19px; line-height: 1.9; }
.rd-bk-size-xlarge .rd-bk-content { font-size: 22px; line-height: 1.95; }

.rd-bk-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0 14px;
}
.rd-bk-back {
  font-size: 13px;
}
.rd-bk-theme-dark .rd-bk-back { color: #93c5fd; }
.rd-bk-title-bar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rd-bk-title-bar strong {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-bk-sub {
  font-size: 11px;
  opacity: 0.7;
}
.rd-bk-icon-btn {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
  color: inherit;
  opacity: 0.7;
  transition: all 0.15s ease;
}
.rd-bk-icon-btn:hover { opacity: 1; background: rgba(0,0,0,0.05); }
.rd-bk-theme-dark .rd-bk-icon-btn:hover { background: rgba(255,255,255,0.08); }

.rd-bk-progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}
.rd-bk-theme-dark .rd-bk-progress { background: rgba(255, 255, 255, 0.08); }
.rd-bk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transition: width 0.4s ease;
}

.rd-bk-toc {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  max-height: 320px;
  overflow-y: auto;
}
.rd-bk-theme-dark .rd-bk-toc { background: rgba(255, 255, 255, 0.05); }
.rd-bk-toc h3 { margin: 0 0 8px; font-size: 13px; opacity: 0.7; }
.rd-bk-toc ul { list-style: none; padding: 0; margin: 0; }
.rd-bk-toc li {
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
}
.rd-bk-toc li:hover { background: rgba(0,0,0,0.04); }
.rd-bk-theme-dark .rd-bk-toc li:hover { background: rgba(255,255,255,0.06); }
.rd-bk-toc li.active { background: rgba(99, 102, 241, 0.15); color: #6366f1; font-weight: 700; }
.rd-bk-toc-n { color: inherit; opacity: 0.6; min-width: 60px; }
.rd-bk-toc-t {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rd-bk-prefs {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.rd-bk-theme-dark .rd-bk-prefs { background: rgba(255, 255, 255, 0.05); }
.rd-bk-prefs h3 { margin: 0 0 8px; font-size: 13px; opacity: 0.7; }
.rd-bk-pref-row {
  display: grid; grid-template-columns: 60px 1fr; gap: 10px;
  align-items: center; margin: 6px 0;
}
.rd-bk-pref-row > span { font-size: 12px; opacity: 0.7; }
.rd-bk-pref-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-bk-pref-opts button {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,0.1);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
}
.rd-bk-theme-dark .rd-bk-pref-opts button { border-color: rgba(255,255,255,0.15); }
.rd-bk-pref-opts button.active {
  background: #6366f1; color: #fff; border-color: #6366f1;
}
.rd-bk-theme-btn { font-size: 11px !important; }
.rd-bk-theme-btn.light  { background-color: #fdfdfb; color: #2a2a2a; }
.rd-bk-theme-btn.sepia  { background-color: #f3eddc; color: #4a3a25; }
.rd-bk-theme-btn.dark   { background-color: #1a1a1a; color: #e0e0e0; }
.rd-bk-theme-btn.active { box-shadow: 0 0 0 2px #6366f1; }

.rd-bk-page {
  padding: 10px 0;
}
.rd-bk-chapter-title {
  font-size: 22px;
  margin: 0 0 24px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid currentColor;
  padding-bottom: 14px;
  opacity: 0.95;
}
.rd-bk-chapter-title em {
  display: block;
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  margin-top: 4px;
  opacity: 0.7;
}
.rd-bk-content { letter-spacing: 0.01em; }
.rd-bk-para { margin: 0 0 18px; text-indent: 1.6em; }
.rd-bk-word { cursor: pointer; padding: 0 1px; border-radius: 3px; }
.rd-bk-word:hover { background: rgba(99, 102, 241, 0.18); }

.rd-bk-dict-popup {
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  z-index: 999;
  color: var(--ink);
}

.rd-bk-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding: 16px 0;
  border-top: 1px solid currentColor;
  border-top-color: rgba(0, 0, 0, 0.08);
}
.rd-bk-theme-dark .rd-bk-footer { border-top-color: rgba(255, 255, 255, 0.1); }
.rd-bk-nav-btn {
  padding: 8px 16px;
  font-size: 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 600;
}
.rd-bk-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.rd-bk-page-info { font-size: 12px; opacity: 0.6; }

/* ─── 多维度筛选条 (CEFR · 主题 · 来源 · 排序) ─── */
.rd-filters {
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-filter-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: start;
}
.rd-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 6px;
}
.rd-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 500;
}
.rd-chip em {
  font-style: normal;
  font-size: 10.5px;
  opacity: 0.7;
  padding-left: 2px;
}
.rd-chip:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.4);
}
.rd-chip.active {
  background: linear-gradient(135deg, var(--brand), #8b5cf6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
}
.rd-chip.active em { opacity: 0.85; }
.rd-chip-cefr { font-weight: 700; letter-spacing: 0.02em; }

/* Corpus card style — slightly richer than the old rd-card */
.rd-card-corpus {
  position: relative;
  cursor: pointer;
  background: var(--panel);
}
.rd-card-corpus .rd-preview {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CEFR level pill — color-coded */
.rd-level-A1 { background: #d1fae5 !important; color: #065f46 !important; }
.rd-level-A2 { background: #ccfbf1 !important; color: #115e59 !important; }
.rd-level-B1 { background: #dbeafe !important; color: #1e40af !important; }
.rd-level-B2 { background: #ede9fe !important; color: #5b21b6 !important; }
.rd-level-C1 { background: #fce7f3 !important; color: #9d174d !important; }
.rd-level-C2 { background: #fee2e2 !important; color: #991b1b !important; }

/* ─── (kept) CEFR difficulty tab bar (legacy class for AI list) ─── */
.rd-cefr-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 14px 0 18px;
  background: var(--panel-soft);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.rd-cefr-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 8px 4px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s ease;
}
.rd-cefr-tab:hover { background: rgba(255,255,255,0.5); color: var(--ink); }
.rd-cefr-tab strong { font-size: 14px; font-weight: 700; }
.rd-cefr-tab em { font-style: normal; font-size: 11px; opacity: 0.75; }
.rd-cefr-tab.active {
  background: linear-gradient(135deg, var(--brand), #6366f1);
  color: #fff;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}
.rd-cefr-tab.active em { opacity: 0.95; }

/* Two-section reading list */
.rd-list-section { margin: 16px 0 22px; }
.rd-list-section > h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rd-card-ai {
  background: linear-gradient(180deg, rgba(99,102,241,0.04), var(--panel));
  border-color: rgba(99,102,241,0.25);
}
.rd-card-wiki { position: relative; }
.rd-card-wiki.rd-loading { pointer-events: none; opacity: 0.7; }
.rd-card-loading {
  padding: 30px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Source/topic pills inside catalog cards */
.rd-source-pill {
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.rd-topic-pill {
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border-radius: 6px;
  font-size: 11px;
}
.rd-card-est {
  padding: 2px 8px;
  background: var(--panel-soft);
  color: var(--muted);
  border-radius: 6px;
  font-size: 11px;
}
.rd-card-open {
  font-size: 12px;
  color: var(--brand);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Wikipedia attribution footer inside article */
.rd-wiki-attribution {
  margin: 22px 0 0;
  padding: 10px 14px;
  background: rgba(34, 197, 94, 0.08);
  border-left: 3px solid #22c55e;
  border-radius: 6px;
  font-size: 12px;
  color: #166534;
  line-height: 1.55;
}
.rd-wiki-attribution a {
  color: #166534;
  text-decoration: underline;
}

.rd-view-article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 32px;
}
.rd-view-article h1 { margin: 0 0 18px; font-size: 24px; line-height: 1.3; }
.rd-paragraphs { display: flex; flex-direction: column; gap: 18px; }
.rd-para-en {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.rd-para-zh {
  margin: 4px 0 0;
  padding: 10px 14px;
  background: var(--panel-soft);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
}
.rd-word { cursor: pointer; padding: 0 1px; border-radius: 3px; }
.rd-word:hover { background: rgba(99, 102, 241, 0.12); }
/* Legacy `.rd-hl` (AI-curated highlights from older articles) — now styled
   the same as vocab-tag so the reader has a SINGLE consistent annotation
   style: black + bold, no colored background. */
.rd-word.rd-hl {
  font-weight: 700;
  color: #0f172a;
  background: transparent;
}
.rd-rd-theme-dark .rd-word.rd-hl { color: #f5f5f7; }
.rd-rd-theme-sepia .rd-word.rd-hl { color: #2a2014; }
.rd-view-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.rd-act-btn {
  flex: 1;
  min-width: 100px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}
.rd-act-btn.primary {
  background: linear-gradient(140deg, #14b8a6, #0f766e);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}

.rd-dict-popup {
  position: fixed;
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  z-index: 1000;
  overflow: hidden;
}
.rd-dict-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}
.rd-dict-head strong { font-size: 16px; }
.rd-dict-ipa { color: var(--muted); font-size: 13px; flex: 1; }
.rd-dict-play, .rd-dict-close {
  width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--brand-ink);
}
.rd-dict-body { padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.rd-dict-pos { color: var(--muted); font-size: 12px; margin: 0 0 4px; }
.rd-dict-zh { font-weight: 600; margin: 0 0 6px; }
.rd-dict-en { color: #475569; margin: 0 0 6px; font-style: italic; }
.rd-dict-eg { color: var(--muted); margin: 0; font-size: 13px; }
.rd-dict-foot {
  display: flex;
  border-top: 1px solid var(--line);
}
.rd-dict-link {
  flex: 1;
  padding: 10px;
  border: 0;
  background: transparent;
  font-size: 12px;
  color: var(--brand-ink);
  cursor: pointer;
}
.rd-dict-link:hover { background: var(--panel-soft); }
.rd-dict-loading, .rd-dict-error { padding: 16px; text-align: center; color: var(--muted); }

.rd-questions, .rd-vocab-sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
}
.rd-questions h3, .rd-vocab-sheet h3 { margin: 0 0 14px; }
.rd-questions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.rd-q-stem { font-size: 15px; line-height: 1.6; }
.rd-q-options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rd-q-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-align: left;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}
.rd-q-option:hover { border-color: var(--brand); }
.rd-q-option.correct { background: rgba(16, 185, 129, 0.15); border-color: #10b981; }
.rd-q-option.wrong { background: rgba(239, 68, 68, 0.12); border-color: #ef4444; }
.rd-q-opt-letter {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.rd-q-feedback { font-size: 13px; padding: 8px 12px; background: var(--panel-soft); border-radius: 8px; margin: 8px 0 0; }
.rd-q-ok { color: #10b981; font-weight: 600; }
.rd-q-no { color: #ef4444; font-weight: 600; }
.rd-q-speak-btn {
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(140deg, #ef4444, #b91c1c);
  color: #fff;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.rd-q-status { font-size: 13px; color: var(--muted); margin: 8px 0; }
.rd-speak-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.rd-speak-scores span {
  background: var(--panel-soft);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.rd-speak-scores b { display: block; font-size: 18px; color: var(--brand-ink); }
.rd-speak-scores em { font-style: normal; font-size: 11px; color: var(--muted); }
.rd-speak-heard, .rd-speak-model { font-size: 13px; margin: 6px 0; line-height: 1.5; }
.rd-vocab-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-vocab-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rd-vocab-list strong { font-size: 15px; }

/* ─── Comics page ─── */
.cx-shell, .cx-view-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 18px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cx-header, .cx-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--line);
}
.cx-header h1 { margin: 0; font-size: 22px; flex: 1; }
.cx-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}
.cx-hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
.cx-cat-bar {
  display: flex; gap: 8px; padding: 10px 0;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cx-cat-bar::-webkit-scrollbar { display: none; }
.cx-cat-pill {
  padding: 6px 16px; height: 32px;
  border-radius: 999px; border: 1px solid;
  font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  background: var(--panel); color: var(--ink);
  border-color: var(--line);
  transition: all 0.12s ease;
}
.cx-cat-pill:hover { color: #fb7299; background: #fff0f5; }
.cx-cat-active {
  background: #fb7299; color: #fff;
  border-color: #fb7299;
}
.cx-cat-active:hover { background: #fb7299; color: #fff; }
.cx-empty {
  text-align: center; color: var(--muted);
  font-size: 14px; padding: 40px 0;
}
.cx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.cx-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cx-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,0.12); }
.cx-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--panel-soft); }
.cx-cover-fallback {
  width: 100%; aspect-ratio: 2/3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #c084fc, #7c3aed);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}
.cx-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cx-card-body strong { font-size: 14px; }
.cx-card-body em { font-style: italic; color: var(--muted); font-size: 12px; }
.cx-pages { font-size: 11px; color: var(--brand-ink); margin-top: 4px; }

.cx-view-header h2 { margin: 0; font-size: 18px; flex: 1; }
.cx-page-num { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cx-page {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cx-page-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.cx-page h3 { margin: 0; font-size: 18px; }
.cx-page-sub { margin: 0; color: var(--muted); font-style: italic; }
.cx-dialogue { display: flex; flex-direction: column; gap: 6px; }
.cx-line { margin: 0; font-size: 14px; line-height: 1.6; }
.cx-line strong { color: var(--brand-ink); }
.cx-narrative {
  padding: 12px 14px;
  background: var(--panel-soft);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
}
.cx-highlights h4 { margin: 8px 0 6px; font-size: 13px; color: var(--muted); }
.cx-hl-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-hl-pill {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
}
.cx-view-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}
.cx-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.cx-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #6d28d9);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.cx-loading, .cx-error { text-align: center; color: var(--muted); padding: 40px 0; }
.cx-vol-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.cx-card { position: relative; }
.cx-vol-card .cx-card-body strong { color: var(--brand-ink); }

/* ─── Immersive Reader (沉浸阅读) ─── */
.cx-ir-root {
  position: fixed; inset: 0;
  background: #000; color: #fff;
  transition: filter 0.15s ease;
}
.cx-ir-scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;          /* let clicks pass through to bars below */
}
.cx-ir-scroll::-webkit-scrollbar { display: none; }
.cx-ir-scroll { scrollbar-width: none; }
.cx-ir-pages-wrap {
  max-width: 720px; margin: 0 auto;
  pointer-events: auto;           /* re-enable for scroll + interaction */
}
.cx-ir-page {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.cx-ir-page-inner { position: relative; background: #f0f0f0; min-height: 200px; }
.cx-ir-page-img {
  width: 100%; display: block;
  pointer-events: none;
}
.cx-ir-page-no {
  position: absolute; bottom: 10px; right: 10px; z-index: 20;
  min-width: 32px; height: 26px; padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.4);
}
.cx-ir-bubbles-layer {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none;           /* don't block clicks on narration below */
}
.cx-ir-narration-bar {
  padding: 14px 18px;
  background: #fff; color: #1a1a1a;
  font-size: 15px; line-height: 1.65;
  border-top: 1px solid #e5e5e5;
  pointer-events: auto;           /* ensure narration is clickable */
}
.cx-ir-narration-bar b { font-weight: 800; }

/* Bubbles */
.cx-ir-bubble {
  position: absolute; z-index: 10;
  pointer-events: auto;           /* individual bubbles are clickable */
}
.cx-ir-bubble-wrap {
  position: relative;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.cx-ir-bubble-inner {
  border-radius: 28px; padding: 12px 18px;
  border: 2px solid #111827;
  background: #fff; color: #111827;
  max-width: 200px;
}
.cx-ir-bubble-speaker {
  font-size: 13px; font-weight: 700; margin-bottom: 2px;
  color: #fb7299;
}
.cx-ir-bubble-text {
  font-size: 17px; line-height: 1.35; font-weight: 600;
}
.cx-ir-bubble-inner.orange {
  background: #ff8a3d; border-color: #c2410c; color: #fff;
}
.cx-ir-bubble-speaker.orange { color: #fff7ed; }
.cx-ir-bubble-tail {
  position: absolute; width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 16px solid #111827;
}
.cx-ir-bubble-tail-inner {
  position: absolute; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 14px solid #fff;
}
.cx-ir-bubble-tail.orange { border-top-color: #c2410c; }
.cx-ir-bubble-tail-inner.orange { border-top-color: #ff8a3d; }

/* End marker */
.cx-ir-end-marker {
  padding: 50px 0 60px; text-align: center;
  color: rgba(255,255,255,.4); font-size: 14px;
}

/* Chrome bars */
.cx-ir-top-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  height: 52px; padding: 0 12px;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; gap: 8px;
  transition: transform 0.25s ease;
  pointer-events: auto;
}
.cx-ir-bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform 0.25s ease;
  pointer-events: auto;
}
.cx-ir-chrome-hidden.cx-ir-top-bar { transform: translateY(-100%); }
.cx-ir-chrome-hidden.cx-ir-bottom-bar { transform: translateY(100%); }

.cx-ir-top-bar .cx-ir-back {
  font-size: 20px; color: #fff; padding: 4px 2px;
  background: none; border: none; cursor: pointer;
}
.cx-ir-title {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-ir-explain-btn {
  padding: 6px 14px; height: 32px;
  border-radius: 999px; border: none; cursor: pointer;
  background: #fb7299; color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.cx-ir-page-counter {
  position: absolute; top: 58px; right: 12px; z-index: 30;
  background: rgba(0,0,0,.6); color: #fff;
  border-radius: 999px; padding: 4px 10px;
  font-size: 12px; font-weight: 700;
  transition: opacity 0.25s;
}

/* Bottom bar controls */
.cx-ir-slider-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 4px;
}
.cx-ir-slider-row input[type="range"] {
  flex: 1; accent-color: #fb7299; height: 4px;
}
.cx-ir-slider-row button {
  font-size: 18px; color: rgba(255,255,255,.8);
  background: none; border: none; cursor: pointer; padding: 2px 4px;
}
.cx-ir-bar-btns {
  display: grid; grid-template-columns: 1fr 1fr;
  height: 48px;
}
.cx-ir-bar-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.8); font-size: 13px; gap: 2px;
}
.cx-ir-bar-btn:hover { color: #fff; }
.cx-ir-bar-btn-icon { font-size: 18px; line-height: 1; }
.cx-ir-bar-btn-label { font-size: 11px; }

/* Sheet overlay (bottom sheet for settings/chapters) */
.cx-ir-sheet-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.6);
}
.cx-ir-sheet-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #1e1f26; color: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  max-height: 75vh; overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}
.cx-ir-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cx-ir-sheet-title {
  font-size: 18px; font-weight: 700;
}
.cx-ir-sheet-close {
  font-size: 18px; color: rgba(255,255,255,.6);
  background: none; border: none; cursor: pointer;
}

/* Settings row */
.cx-ir-row {
  background: rgba(255,255,255,.05);
  border-radius: 12px; padding: 14px;
  margin-bottom: 10px;
}
.cx-ir-row-label {
  font-size: 14px; color: rgba(255,255,255,.7);
  margin-bottom: 8px;
}
.cx-ir-row-content {
  display: flex; align-items: center; gap: 12px;
}
.cx-ir-row-content input[type="range"] {
  flex: 1; accent-color: #fb7299;
}
.cx-ir-toggle {
  width: 44px; height: 24px; border-radius: 999px;
  background: rgba(255,255,255,.2);
  position: relative; cursor: pointer; border: none;
  transition: background 0.2s;
}
.cx-ir-toggle.active { background: #fb7299; }
.cx-ir-toggle-dot {
  position: absolute; top: 2px; width: 20px; height: 20px;
  border-radius: 999px; background: #fff;
  transition: left 0.2s;
  left: 2px;
}
.cx-ir-toggle.active .cx-ir-toggle-dot { left: 22px; }

/* Quality buttons */
.cx-ir-q-btn {
  padding: 6px 14px; height: 32px;
  border-radius: 8px; border: 1px solid;
  font-size: 13px; cursor: pointer;
  background: transparent;
}
.cx-ir-q-btn.active {
  border-color: #fb7299; color: #fb7299;
}
.cx-ir-q-btn.inactive {
  border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7);
}
.cx-ir-q-btn:disabled {
  opacity: .4; cursor: not-allowed;
}

/* Chapters sheet */
.cx-ir-ch-item {
  width: 100%; text-align: left;
  border-radius: 12px; padding: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid transparent;
  margin-bottom: 8px; cursor: pointer;
  transition: background 0.12s;
}
.cx-ir-ch-item:hover { background: rgba(255,255,255,.1); }
.cx-ir-ch-item.current {
  background: rgba(251,114,153,.15);
  border-color: rgba(251,114,153,.4);
}
.cx-ir-ch-title {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-ir-ch-pages {
  font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px;
}
.cx-ir-ch-reading {
  font-size: 12px; color: #fb7299; font-weight: 700;
}

/* Explain panel (full-screen overlay) */
.cx-ir-explain-full {
  position: fixed; inset: 0; z-index: 50;
  background: #fff; color: #1a1a1a;
  overflow-y: auto;
}
.cx-ir-explain-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e5e5;
  height: 52px; padding: 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.cx-ir-explain-back {
  font-size: 20px; background: none; border: none; cursor: pointer;
}
.cx-ir-explain-title {
  flex: 1; font-size: 16px; font-weight: 700;
}
.cx-ir-explain-model {
  font-size: 12px; color: #999;
}
.cx-ir-explain-body {
  max-width: 640px; margin: 0 auto;
  padding: 20px 16px 40px;
}

.cx-ir-section {
  margin-bottom: 24px;
}
.cx-ir-section-title {
  font-size: 20px; font-weight: 800; margin-bottom: 12px;
}

.cx-ir-sentence-row {
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.cx-ir-sentence-row:last-child { border-bottom: none; }
.cx-ir-sentence-en {
  font-size: 14px; font-weight: 600;
}
.cx-ir-sentence-zh {
  font-size: 14px; color: #666; margin-top: 4px;
}

.cx-ir-word-card {
  margin-bottom: 14px; padding: 14px;
  border-radius: 12px;
  background: #fce4ec; border: 1px solid #f8bbd0;
}
.cx-ir-word-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cx-ir-word-word {
  font-size: 18px; font-weight: 800;
}
.cx-ir-word-pos {
  font-size: 12px; color: #666;
}
.cx-ir-word-ipa {
  font-size: 12px; color: #666;
}
.cx-ir-word-zh {
  font-size: 14px; margin-top: 4px;
}
.cx-ir-word-en {
  font-size: 12px; color: #666; margin-top: 2px;
}

.cx-ir-pattern-card {
  margin-bottom: 12px; padding: 14px;
  border-radius: 12px;
  background: #e8eaf6; border: 1px solid #c5cae9;
}
.cx-ir-pattern-pattern {
  font-size: 16px; font-weight: 700;
}
.cx-ir-pattern-explain {
  font-size: 14px; color: #555; margin-top: 4px;
}

.cx-ir-example-list {
  margin-top: 8px;
}
.cx-ir-example-item {
  font-size: 14px; background: #fff;
  border-radius: 8px; padding: 8px;
  border: 1px solid #e5e5e5;
  margin-bottom: 6px;
}
.cx-ir-example-num {
  font-size: 10px; color: #999;
  width: 16px; flex-shrink: 0;
}
.cx-ir-example-en {
  font-style: italic; color: #1a1a1a;
}
.cx-ir-example-zh {
  font-size: 12px; color: #666; margin-top: 2px;
}
.cx-ir-pattern-card .cx-ir-example-item {
  border-color: #c5cae9;
}

/* Loading spinner */
.cx-ir-loading {
  padding: 60px 0; text-align: center;
}
.cx-ir-spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(251,114,153,.3);
  border-top-color: #fb7299;
  border-radius: 999px;
  animation: cx-ir-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes cx-ir-spin { to { transform: rotate(360deg); } }
.cx-ir-loading-text {
  margin-top: 16px; font-size: 14px; color: #999;
}

.cx-ir-error {
  font-size: 14px; color: #c62828;
}

.cx-ir-empty-hint {
  font-size: 14px; color: rgba(255,255,255,.6);
  padding: 20px 0;
}

.cx-ir-hunzhi .cx-ir-page { background: #fff; color: #1a1a1a; }

/* ─── Stats dashboard (我的) ─── */
.stats-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.stats-big-card {
  padding: 24px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(20, 184, 166, 0.22);
}
.stats-big-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.stats-card-label {
  font-size: 14px;
  opacity: 0.85;
}
.stats-card-bank {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.stats-big-num {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stats-big-sub {
  font-size: 14px;
  opacity: 0.9;
  margin: 6px 0 14px;
}
.stats-bar {
  height: 8px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  overflow: hidden;
}
.stats-bar-fill {
  height: 100%;
  background: #fff;
  border-radius: 999px;
  transition: width 0.5s ease;
}
.stats-mini-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stats-mini {
  padding: 14px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.stats-mini-n {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.stats-mini-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.stats-dist-card, .stats-chart-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.stats-dist-card h3, .stats-chart-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--ink);
}
.dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.dist-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.dist-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dist-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
  height: 160px;
}
.dist-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.dist-bar {
  width: 100%;
  flex: 1;
  background: var(--panel-soft);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.dist-bar-fill {
  width: 100%;
  border-radius: 8px 8px 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
}
.dist-bar-pct {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.dist-bar-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.stats-bar-chart {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 90px;
}
.sbc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.sbc-bar {
  width: 100%;
  background: linear-gradient(180deg, #14b8a6, #0f766e);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.5s ease;
}
.sbc-label {
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
}

/* ─── 我的页面 — 个人主页 redesign ─── */
.prof-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin: 0 0 20px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(99,102,241,0.25);
}
.prof-hero-greet { display: flex; align-items: center; gap: 10px; }
.prof-hero-emoji { font-size: 28px; }
.prof-hero-greet h2 { margin: 0; font-size: 19px; font-weight: 700; }
.prof-hero-sub { margin: 6px 0 0; font-size: 13px; opacity: 0.92; }
.prof-hero-sub strong { font-weight: 700; }
.prof-hero-right {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 18px;
  align-items: center;
}
.prof-hero-stat { display: flex; flex-direction: column; align-items: center; }
.prof-hero-stat .phn { font-size: 22px; font-weight: 800; line-height: 1; }
.prof-hero-stat .phl { font-size: 11px; opacity: 0.85; margin-top: 3px; }

@media (max-width: 640px) {
  .prof-hero { grid-template-columns: 1fr; }
  .prof-hero-right { justify-content: start; gap: 22px; }
}

.prof-block {
  margin: 14px 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.prof-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.prof-block-head h3 {
  margin: 0;
  font-size: 15px;
  color: var(--brand-ink);
  font-weight: 700;
}
.prof-block-hint { font-size: 11px; color: var(--muted); }

/* Cross-bank progress matrix */
.prof-bank-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prof-bank-row {
  display: grid;
  grid-template-columns: 110px 1fr 130px;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-radius: 8px;
}
.prof-bank-row.active { background: rgba(99, 102, 241, 0.06); }
.prof-bank-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.prof-active-dot {
  font-style: normal;
  padding: 1px 6px;
  background: var(--brand);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.prof-bank-bar {
  height: 8px;
  background: var(--panel-soft);
  border-radius: 4px;
  overflow: hidden;
}
.prof-bank-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transition: width 0.5s ease;
}
.prof-bank-stat {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .prof-bank-row { grid-template-columns: 80px 1fr 90px; }
}

/* Achievements */
.prof-achv-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 10px;
}
.prof-achv {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: all 0.25s ease;
}
.prof-achv.got {
  opacity: 1;
  filter: none;
  background: linear-gradient(180deg, #fef3c7, #fff7ed);
  border-style: solid;
  border-color: #f59e0b;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.15);
}
.prof-achv-icon { font-size: 26px; }
.prof-achv-label { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink); }
.prof-achv-hint { margin-top: 2px; font-size: 10px; color: var(--muted); }

/* Activity heatmap */
.prof-heatmap {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: 3px;
}
.prof-heat-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--panel-soft);
  transition: transform 0.15s ease;
}
.prof-heat-cell:hover { transform: scale(1.25); }
@media (max-width: 540px) {
  .prof-heatmap { grid-template-columns: repeat(14, 1fr); }
}

.prof-pref-cards { margin-top: 4px; }

/* ─── Stats: 5-skill pillars (听说读写背) ─── */
.stats-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.pillar-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.pillar-icon {
  font-size: 26px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-soft);
  border-radius: 10px;
  flex-shrink: 0;
}
.pillar-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pillar-n {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pillar-label {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.pillar-hint { font-size: 10.5px; color: var(--muted); }

/* ─── Stats: 拓展学习模块（阅读/听书/漫画） ─── */
.stats-ext-modules { margin: 14px 0; }
.stats-ext-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.stats-ext-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.stats-ext-hint { font-size: 12px; color: var(--muted); }
.stats-ext-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.stats-ext-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  border-left: 3px solid var(--ext-accent, var(--brand));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stats-ext-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.stats-ext-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-soft);
  border-radius: 12px;
  flex-shrink: 0;
}
.stats-ext-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.stats-ext-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.stats-ext-row { display: flex; align-items: baseline; gap: 4px; }
.stats-ext-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--ext-accent, var(--brand-ink));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stats-ext-label { font-size: 11px; color: var(--muted); }

/* Profile tab: 拓展学习 compact cards */
.prof-ext-cards { margin-top: 4px; }
.pcard-ext { border-left: 3px solid var(--brand); }

/* ─── Word list page ─── */
.wl-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 18px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wl-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--line);
}
.wl-header h1 {
  margin: 0;
  font-size: 22px;
  flex: 1;
}
.wl-goal {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(140deg, #14b8a6, #0f766e);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}
.wl-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.wl-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.wl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wl-row-label {
  width: 64px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.seg-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.seg-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.seg-pill.active {
  background: var(--brand-ink);
  color: #fff;
  border-color: var(--brand-ink);
}
.seg-pill:hover:not(.active) {
  border-color: var(--brand);
  color: var(--brand-ink);
}
.wl-search {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  background: var(--panel-soft);
}
.wl-tier-slider {
  flex: 1;
  appearance: none;
  background: linear-gradient(90deg,#cbd5e1,#ef4444,#f59e0b,#84cc16,#10b981);
  height: 8px;
  border-radius: 999px;
  outline: none;
}
.wl-tier-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.wl-tier-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c, var(--line));
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.wl-az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.wl-az-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}
.wl-list { display: flex; flex-direction: column; gap: 16px; }
.wl-group { padding: 0; }
.wl-letter {
  margin: 0 0 6px;
  padding: 4px 12px;
  font-size: 15px;
  color: var(--brand-ink);
  background: var(--panel-soft);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wl-letter-n {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.wl-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wl-item {
  display: grid;
  grid-template-columns: 14px minmax(120px, max-content) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s ease;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.wl-item:hover { background: var(--panel-soft); }
.wl-item.mastered .wl-word { color: var(--muted); text-decoration: line-through; }
.wl-tier-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.wl-word {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
}
.wl-pos {
  font-style: italic;
  color: var(--muted);
  font-size: 12px;
  margin-right: 6px;
}
.wl-meaning {
  font-size: 14px;
  color: #475569;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-used {
  min-width: 32px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(140deg, #14b8a6, #0f766e);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wl-used-zero {
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 400;
}
@media (max-width: 540px) {
  .wl-item { grid-template-columns: 14px minmax(90px, max-content) 1fr auto; }
  .wl-word { font-size: 15px; }
  .wl-meaning { font-size: 13px; }
}
.wl-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
}

/* Per-bank progress block on profile-home */
.bank-progress-block {
  margin: 12px 0 6px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(15, 118, 110, 0.02));
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 16px;
}
.bank-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bank-progress-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.bank-progress-numbers {
  font-size: 14px;
  color: var(--muted);
}
.bank-progress-numbers b {
  color: var(--brand-ink);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bank-progress-numbers em {
  font-style: normal;
  margin-left: 4px;
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
}
.bank-progress-bar {
  height: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.bank-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #0f766e);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.bank-progress-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Sub progression bar on done page (industry mode) */
.sub-progress {
  margin: 12px 0 6px;
  padding: 12px 16px;
  background: var(--panel-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.sub-progress-bar {
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sub-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #0f766e);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.sub-progress-text {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.sub-progress-text b {
  color: var(--brand-ink);
}
[data-act="next-sub"] {
  display: block;
  width: 100%;
  margin: 12px 0;
}

/* Home page challenge buttons */
.home-features .feat-btn {
  display: block;
  text-align: left;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.home-features .feat-btn:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.10);
}
.home-features .feat-btn .feat-tag {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 4px;
}
.home-features .feat-btn p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.me-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.me-header {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(140deg, rgba(15,118,110,0.08), rgba(20,184,166,0.04));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 28px;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(140deg, #14b8a6, #0f766e);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.me-info h1 { margin: 0 0 4px; font-size: 24px; }
.me-info p { margin: 0; color: var(--muted); font-size: 13px; }
.me-email { color: var(--brand-ink) !important; }
.me-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 0 4px;
}
.me-tabs button {
  font: inherit;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
}
.me-tabs button.active {
  color: var(--brand-ink);
  border-bottom-color: var(--brand);
  font-weight: 700;
}
.me-tabs button:hover { color: var(--ink); }
.me-body { display: flex; flex-direction: column; gap: 16px; }
.me-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.me-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.me-section h3 { margin: 0 0 12px; font-size: 16px; color: var(--brand-ink); }
.me-section h3 em { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 8px; }

/* 漫画书架 (我的页面) */
.me-comic-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.me-comic-head h3 { margin: 0; }
.me-comic-go {
  border: none; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
}
.me-comic-go:hover { opacity: 0.9; }
.me-comic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px;
}
.me-comic-card {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  transition: transform 0.15s;
}
.me-comic-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.me-comic-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--panel-soft); }
.me-comic-fallback {
  width: 100%; aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center;
  background: var(--panel-soft); font-size: 24px; font-weight: 800; color: var(--muted);
}
.me-comic-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.me-comic-info strong { font-size: 13px; line-height: 1.3; }
.me-comic-info span { font-size: 11px; color: var(--muted); }

/* 生词本 */
.wb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.wb-item strong { font-size: 15px; color: var(--ink); flex: 1; }
.wb-meta { font-size: 11px; color: var(--muted); }

/* 档案 log */
.log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.log-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  flex-wrap: wrap;
}
.log-date { color: var(--muted); font-family: "SF Mono", ui-monospace, monospace; font-size: 12px; }
.log-list strong { color: var(--ink); }
.log-list em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  background: var(--panel);
  padding: 2px 8px;
  border-radius: 999px;
}
.log-warn { color: var(--warn) !important; background: rgba(154,103,0,0.1) !important; }

/* ASR 麦克风按钮状态 */
.btn-mic.rec-active {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  animation: pulse 1.2s infinite;
}
.btn-mic.rec-busy {
  background: var(--warn);
  color: #fff;
  border-color: var(--warn);
  cursor: progress;
}
.btn-mic.rec-error {
  background: rgba(180,35,24,0.15);
  color: var(--danger);
  border-color: var(--danger);
}



/* ============================================================
   听说课程 Stage C 新增：意群板书 / 中英结合引入 / 发音规则示范
   ============================================================ */
.sg-board {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
  font-size: 22px;
  line-height: 1.6;
  font-family: Inter, ui-sans-serif, system-ui;
}
.sg-block {
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.sg-block.now {
  background: rgba(15, 118, 110, 0.18);
  color: var(--brand-ink);
  font-weight: 700;
}
.sg-block.past { color: var(--ok); }
.sg-block.future { color: var(--muted); }
.sg-sep {
  color: var(--brand);
  font-weight: 700;
  font-size: 24px;
  margin: 0 4px;
}

.intro-headline { display: flex; flex-direction: column; gap: 4px; }
.intro-headline h2 { margin: 0; }
.intro-headline .zh-light { color: var(--muted); font-weight: 500; font-size: 18px; }

.intro-subq-list { display: flex; flex-direction: column; gap: 12px; }
.intro-subq {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.intro-subq.active { opacity: 1; border-color: var(--brand); background: rgba(15,118,110,0.04); }
.intro-subq.answered { opacity: 1; }
.intro-subq header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.subq-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  font-weight: 700;
  flex: 0 0 auto;
}
.intro-subq header > div { flex: 1; }
.intro-q-en { margin: 0; font-size: 16px; color: var(--ink); font-weight: 500; }
.intro-subq em { color: var(--muted); font-style: normal; font-size: 13px; }
.btn-listen.tiny {
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(15, 118, 110, 0.1);
  color: var(--brand-ink);
  border-color: rgba(15, 118, 110, 0.3);
}

.phonetic-example {
  background: rgba(255, 244, 222, 0.5);
  border: 1px solid #f5d99f;
  border-radius: 12px;
  padding: 8px 14px;
}
.phonetic-example summary {
  cursor: pointer;
  font-weight: 600;
  color: #92400e;
  font-size: 13px;
}
.example-card { padding: 8px 0; }
.example-cap {
  margin: 0 0 4px;
  font-size: 13px;
  color: #78350f;
}
.example-cap.small { font-size: 11px; color: var(--muted); margin-top: 4px; }

.comp-q.active { background: rgba(15,118,110,0.05); border: 1px solid var(--brand); }
.comp-q.answered { opacity: 0.85; }
.comp-q-list { display: flex; flex-direction: column; gap: 12px; }
.comp-q-list-title {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.comp-q {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.comp-q p { margin: 0; }
.comp-q p.zh { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }



/* 白板叠层：保留学生在前几步画的笔迹 */
.markup-board { position: relative; }
.markup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: multiply;
}
.markup-overlay.stress { opacity: 0.95; }
.canvas-toolbar.simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
}



/* 权威板书 SVG 容器 */
.spec-board-wrap {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
}
.spec-board {
  width: 100%;
  height: auto;
  display: block;
}
.phonetic-markup-preview {
  margin-top: 6px;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.phonetic-markup-preview summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.phonetic-markup-preview img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 8px;
  filter: contrast(1.2);
}


/* 权威板书 (HTML + 绝对定位 SVG)：浏览器算字宽，标记位置贴合真实文本 */
.spec-board {
  position: relative;
  display: block;
  padding: 28px 14px 40px;
  font-family: Inter, ui-sans-serif, system-ui;
  background: var(--panel-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow-x: auto;
}
.spec-board.compact {
  padding: 16px 10px 28px;
  font-size: 0;
}
.spec-board.compact .spec-line { font-size: 18px; }
.spec-line {
  margin: 0;
  font-size: 24px;
  line-height: 1.6;
  color: #1f2937;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.spec-word {
  display: inline-block;
  padding: 0 1px;
  position: relative;
}
.spec-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 8px 0;
}
.example-item {
  background: #fffaf2;
  border: 1px solid #f5d99f;
  border-radius: 8px;
  padding: 8px 10px 10px;
}
.example-item .spec-board { background: transparent; border: none; padding: 18px 4px 26px; }
.example-item .spec-board .spec-line { font-size: 18px; }
.example-item .example-cap { margin: 4px 0 0; font-size: 11px; }

/* 句型板书 + 参考答案 */
.pattern-board {
  background: linear-gradient(180deg, #fff8e6 0%, #fff3d2 100%);
  border: 1px solid #f5c267;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 8px 0 12px;
}
.pattern-board-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400e;
  font-weight: 700;
}
.pattern-board-en {
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: #92400e;
  letter-spacing: 0.01em;
}
.pattern-board-eg {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.pattern-board-eg em { font-style: italic; color: var(--ink); }

/* ==== 重点短语 5 阶段教学卡片 ==== */
.fp-header {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(20, 122, 77, 0.06), rgba(255, 255, 255, 0.4));
  border: 1px solid rgba(20, 122, 77, 0.18);
  border-radius: 14px;
}
.fp-header h2 { margin: 0 0 6px 0; font-size: 18px; }
.fp-current { margin: 0 0 10px 0; font-size: 16px; color: var(--ink); }
.fp-current strong { color: var(--brand); font-size: 18px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted);
  white-space: nowrap;
}
.fp-chip.now { background: var(--brand); color: white; font-weight: 600; }
.fp-chip.done { background: rgba(20, 122, 77, 0.15); color: var(--ok); }
.fp-chip.future { opacity: 0.55; }

.fp-collocations { margin: 12px 0; padding: 10px 14px; background: rgba(255, 196, 0, 0.08); border-radius: 10px; }
.fp-coll-label { font-size: 12px; color: var(--muted); margin-right: 6px; }
.fp-coll {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 196, 0, 0.18);
  color: #7a5b00;
  font-size: 13px;
}

.fp-examples { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.fp-example {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  align-items: start;
}
.fp-example .btn-listen.tiny {
  grid-row: span 2;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 8px;
  align-self: center;
}
.fp-ex-en { margin: 0; font-size: 15px; color: var(--ink); }
.fp-ex-zh { margin: 2px 0 0 0; font-size: 13px; color: var(--muted); }

.reference-answer {
  margin-top: 10px;
  background: rgba(20, 122, 77, 0.08);
  border: 1px solid rgba(20, 122, 77, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
}
.ref-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 700;
}
.reference-answer p {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}

/* 4SAPI 生成的发音板书图 */
.phonetic-board-img {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fffaf0;
}
.board-placeholder {
  position: relative;
}
.board-placeholder p { margin-top: 8px; color: var(--muted); font-size: 12px; text-align: center; }

/* ── AI Dialogue Class (7-step pipeline) ────────────────────────── */
.dc-container { padding: 24px 20px; max-width: 920px; margin: 0 auto; }
.dc-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.dc-progress-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dc-step-label { font-size: 14px; }
.dc-step-label strong { font-size: 16px; color: var(--accent, #1a73e8); }
.dc-scene-card { background: linear-gradient(180deg, #f8fafc, #fff); border: 1px solid #e4e9f0; border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.dc-h2 { margin: 0 0 4px 0; font-size: 22px; }
.dc-subtitle { color: var(--muted, #6b7585); margin: 0 0 8px 0; font-size: 13px; }
.dc-scene { margin: 0; color: #444; font-size: 14px; line-height: 1.55; }
.dc-stage { margin-bottom: 16px; min-height: 200px; }
.dc-stage-block { background: #fff; border: 1px solid #e4e9f0; border-radius: 14px; padding: 18px 20px; }
.dc-stage-text { font-size: 16px; line-height: 1.6; margin: 0 0 6px 0; }
.dc-stage-text-zh { color: #6b7585; font-size: 13px; margin: 0 0 14px 0; }
.dc-warmup-q { padding: 12px 14px; background: #fff8e1; border-radius: 10px; display: flex; align-items: flex-start; gap: 10px; }
.dc-q-en { font-weight: 600; margin: 0 0 4px 0; }
.dc-q-zh { color: #6b7585; font-size: 13px; margin: 0; }
.dc-instruction { color: #444; margin: 0 0 14px 0; font-size: 14px; }
.dc-lines { list-style: none; padding: 0; margin: 0 0 14px 0; }
.dc-line { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; align-items: flex-start; transition: background 0.15s; }
.dc-line.cur { background: #fff7d8; border: 1px solid #ffe48d; }
.dc-line.done { opacity: 0.55; }
.dc-line-speaker { font-weight: 700; color: var(--accent, #1a73e8); min-width: 60px; }
.dc-line-en { margin: 0; flex: 1; font-size: 15px; line-height: 1.55; }
.dc-line-zh { color: #6b7585; font-size: 13px; margin: 4px 0 0 0; }
.dc-mini-review { margin-top: 14px; padding: 12px 14px; background: #e8f5ff; border-left: 3px solid #1a73e8; border-radius: 8px; font-size: 14px; }
.dc-teacher-bubble { margin: 14px 0; }
.dc-teacher-msg { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: linear-gradient(180deg, #fff8f0, #fff); border: 1px solid #ffd9a8; border-radius: 14px; }
.dc-teacher-icon { font-size: 24px; }
.dc-teacher-msg p { margin: 0; line-height: 1.6; }
.dc-controls { display: flex; gap: 12px; justify-content: flex-end; }
.dc-controls .btn-lg { min-width: 160px; }
.dc-stub { color: #888; font-style: italic; padding: 24px 12px; text-align: center; }
.dc-done-msg { margin-top: 12px; color: #2a8a2a; font-weight: 600; }

/* Dialogue list cards — wrap original button + add AI class launcher */
.vy-dlg-card { display: flex; flex-direction: column; gap: 0; border: 1px solid #e4e9f0; border-radius: 14px; overflow: hidden; }
.vy-dlg-card-main { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: none; cursor: pointer; text-align: left; width: 100%; }
.vy-dlg-card-main:hover { background: #f8fafc; }
.vy-dlg-card.done .vy-dlg-card-main { background: #f1faf5; }
.vy-dlg-class-launch { padding: 10px 14px; background: linear-gradient(135deg, #fff5e6, #fff8f0); color: #d9540a; border: none; border-top: 1px solid #ffd9a8; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.vy-dlg-class-launch:hover { background: linear-gradient(135deg, #ffe8c2, #ffe2b0); }
.vy-dlg-class-launch.live { background: linear-gradient(135deg, #ffe5e5, #fff0f0); color: #c2410c; border-top: 1px solid #ffb4b0; }
.vy-dlg-class-launch.live:hover { background: linear-gradient(135deg, #ffd0d0, #ffd9d9); }

/* AI Class steps 4-8 additions */
.dc-explain-btn { padding: 4px 10px; background: #fff8d5; color: #a06b00; border: 1px solid #ffe49a; border-radius: 8px; font-size: 13px; cursor: pointer; }
.dc-explain-btn.phon { background: #f0f8ff; color: #1a5d8a; border-color: #c2e0ff; }
.dc-explain-btn:hover { filter: brightness(0.95); }
.dc-explain-content { width: 100%; margin-top: 8px; }
.dc-explain-bubble { background: #fffde0; border-left: 3px solid #ffd456; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.55; color: #333; }
.dc-explain-bubble.phon { background: #e8f4ff; border-left-color: #1a73e8; }
.dc-loading { color: #888; font-style: italic; font-size: 13px; }
.dc-error { color: #c2410c; font-size: 13px; }
.dc-drill-btn { padding: 4px 12px; background: #ffe2e0; color: #c2410c; border: 1px solid #ffb4b0; border-radius: 8px; font-size: 13px; cursor: pointer; }
.dc-drill-btn:hover { filter: brightness(0.95); }
.dc-drill-result { width: 100%; margin-top: 8px; }
.dc-drill-result-bubble { background: #fff5f5; border-left: 3px solid #ef4444; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.55; }
.dc-role-pick { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 0; }
.dc-role-pick .btn-primary { padding: 12px 18px; }
.dc-pattern-hints { background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 13px; }
.dc-pattern-hints summary { cursor: pointer; font-weight: 600; color: var(--accent, #1a73e8); }
.dc-pattern-hints ul { margin: 8px 0 0 0; padding-left: 20px; }
.dc-textarea { width: 100%; padding: 12px; border: 1px solid #e4e9f0; border-radius: 10px; font-size: 14px; font-family: inherit; resize: vertical; margin: 10px 0; }
.dc-textarea:focus { outline: none; border-color: var(--accent, #1a73e8); }

/* ── Study Buddy modal ──────────────────────────────────────────────── */
.buddy-modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.buddy-modal { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 28px 32px 24px; position: relative; box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
.buddy-modal-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; font-size: 28px; cursor: pointer; color: #888; }
.buddy-modal-close:hover { color: #222; }
.buddy-h2 { margin: 0 0 6px 0; font-size: 22px; }
.buddy-p { color: var(--muted, #6b7585); margin: 0 0 16px 0; font-size: 14px; }
.buddy-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.buddy-tab { padding: 8px 16px; border: 1px solid #e4e9f0; background: #f8fafc; border-radius: 8px; cursor: pointer; font-weight: 600; color: #6b7585; }
.buddy-tab.active { background: var(--accent, #1a73e8); color: #fff; border-color: var(--accent, #1a73e8); }
.buddy-input { width: 100%; padding: 10px 12px; border: 1px solid #e4e9f0; border-radius: 8px; margin-bottom: 10px; font-size: 14px; }
.buddy-input:focus { outline: none; border-color: var(--accent, #1a73e8); }
.buddy-btn { width: 100%; padding: 12px; }
.buddy-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.buddy-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e4e9f0; }
.buddy-section h3 { margin: 0 0 10px 0; font-size: 15px; color: #444; }
.buddy-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.buddy-search-row .buddy-input { margin-bottom: 0; }
.buddy-search-row button { padding: 10px 14px; }
.buddy-list { list-style: none; padding: 0; margin: 0; }
.buddy-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid #e4e9f0; border-radius: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.buddy-item button { padding: 6px 12px; font-size: 13px; }
.buddy-id { color: #6b7585; font-size: 12px; margin-left: 6px; }
.buddy-ago { color: #aaa; font-size: 11px; margin-left: 6px; }
.buddy-empty { color: #888; font-style: italic; font-size: 13px; padding: 8px 0; }

/* Floating buddy button + invite toast */
.buddy-floating-btn { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #4f8eff, #1a5d8a); color: #fff; font-size: 24px; border: none; box-shadow: 0 6px 16px rgba(0,0,0,0.18); cursor: pointer; z-index: 8500; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; }
.buddy-floating-btn:hover { transform: scale(1.05); }
.buddy-floating-badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.buddy-invite-toast { position: fixed; top: 24px; right: 24px; width: 340px; background: #fff; border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,0.18); padding: 16px 18px; z-index: 9100; border-left: 4px solid #1a73e8; animation: buddyToastIn 0.3s ease-out; }
@keyframes buddyToastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.buddy-invite-toast-body { margin-bottom: 12px; }
.buddy-invite-toast-body strong { display: block; margin-bottom: 4px; font-size: 15px; }
.buddy-invite-toast-body p { margin: 0; color: #6b7585; font-size: 13px; }
.buddy-invite-toast-actions { display: flex; gap: 8px; }
.buddy-invite-toast-actions button { flex: 1; padding: 8px 12px; font-size: 13px; }

/* ── AI Class v2 — students bar, intensive loop, phonetic canvas ─────── */
.dc-students-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: #f0f6ff; border-radius: 10px; margin-bottom: 14px; }
.dc-students-label { font-size: 13px; color: #6b7585; margin-right: 4px; }
.dc-student-badge { padding: 6px 12px; background: #fff; border: 1px solid #c2dbff; border-radius: 18px; font-size: 13px; font-weight: 600; }
.dc-student-badge.active { background: linear-gradient(135deg, #1a73e8, #4f8eff); color: #fff; border-color: transparent; box-shadow: 0 2px 6px rgba(26,115,232,0.35); }
.dc-student-badge.hand { animation: handWave 1s infinite; }
@keyframes handWave { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.dc-call-count { color: rgba(255,255,255,0.7); font-size: 11px; margin-left: 4px; }
.dc-student-badge:not(.active) .dc-call-count { color: #aaa; }
.dc-hand-raise { padding: 6px 12px; background: #fff8d5; color: #a06b00; border: 1px solid #ffe49a; border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dc-hand-raise:hover { background: #ffe49a; }

.dc-sentence-meta { color: #1a73e8; font-size: 13px; margin-left: 8px; }
.dc-call-actions { padding: 12px 0; }
.dc-callee { padding: 14px; background: #fff8e1; border: 1px solid #ffd456; border-radius: 12px; margin-top: 10px; }
.dc-callee strong { color: #a06b00; }
.dc-mic-btn { margin-left: 12px; padding: 8px 16px; background: linear-gradient(135deg, #ef4444, #c53d3d); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.dc-mic-btn:hover { filter: brightness(1.05); }
.dc-mic-result { margin-top: 12px; }
.dc-mic-transcript { background: #fff5f5; padding: 10px 14px; border-left: 3px solid #ef4444; border-radius: 6px; font-size: 14px; }
.dc-teacher-feedback { margin-top: 8px; background: #fffdee; padding: 10px 14px; border-left: 3px solid #ffd456; border-radius: 6px; font-size: 14px; }

.dc-warmup-img-wrap { width: 100%; max-width: 480px; margin: 0 auto 16px; }
.dc-warmup-img { display: block; width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.dc-img-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff5e6, #fff8f0); border: 1px dashed #ffd9a8; border-radius: 12px; color: #a06b00; font-style: italic; min-height: 180px; padding: 16px; }

.dc-intensive-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #e4e9f0; margin-bottom: 14px; }
.dc-intensive-phase { font-weight: 700; color: var(--accent, #1a73e8); }
.dc-intensive-speaker { padding: 4px 10px; background: #f0f6ff; border-radius: 12px; font-size: 12px; color: #1a5d8a; }
.dc-line-en-big { font-size: 22px; line-height: 1.5; padding: 16px; background: #fff8e1; border-radius: 10px; margin: 12px 0; }
.dc-line-zh-big { font-size: 16px; color: #6b7585; padding: 0 16px; }
.dc-vocab-ol { padding-left: 24px; }
.dc-vocab-ol li { margin: 8px 0; font-size: 15px; }
.dc-vocab-zh-hint { color: #aaa; font-size: 13px; margin-left: 8px; }

.dc-comp-q { padding: 14px; background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; margin: 10px 0; }
.dc-q-zh { color: #6b7585; font-size: 13px; margin: 4px 0 8px; }
.dc-q-options { list-style: none; padding: 0; }
.dc-q-options li { margin: 6px 0; }
.dc-q-options label { cursor: pointer; }
.dc-q-check { margin-top: 8px; }
.dc-q-result { margin-left: 8px; font-weight: 600; }

.dc-timer { display: inline-block; padding: 6px 14px; background: #fff5e6; border: 1px solid #ffb060; border-radius: 14px; font-weight: 700; color: #d9540a; margin: 10px 0; font-size: 16px; }
.dc-phon-canvas { display: block; width: 100%; height: 200px; background: #fff; border: 2px dashed #c2dbff; border-radius: 10px; margin: 10px 0; cursor: crosshair; }
.dc-phon-tools { display: flex; gap: 10px; margin-bottom: 10px; }
.dc-snowball-list { padding-left: 24px; }
.dc-snowball-list li { margin: 8px 0; }
.dc-pattern-card { padding: 12px 14px; background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 10px; margin: 10px 0; }
.dc-pattern-card ul { margin: 6px 0 0 0; padding-left: 20px; }
.dc-pattern-card li { font-size: 13px; margin: 3px 0; }
.dc-drill-modes { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }

/* Big clickable step strip — 10 step pills */
.dc-step-strip { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.dc-step-pill { flex: 0 1 auto; min-width: 56px; padding: 8px 10px; background: #fff; border: 2px solid #e4e9f0; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.15s; font-size: 18px; font-weight: 600; color: #6b7585; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1; }
.dc-step-pill:hover { border-color: #1a73e8; }
.dc-step-pill.cur { background: linear-gradient(135deg, #1a73e8, #4f8eff); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(26,115,232,0.3); }
.dc-step-pill.done { background: #f1faf5; border-color: #b8e6cd; color: #2a8a2a; }
.dc-step-pill.done::after { content: "✓"; font-size: 10px; }
.dc-step-num { font-size: 11px; font-weight: 700; opacity: 0.85; }
.dc-step-pill-sub { font-weight: 400; font-size: 11px; opacity: 0.8; }
.dc-mode-badge { display: inline-block; padding: 4px 12px; background: linear-gradient(135deg,#ef4444,#ff7846); color:#fff; border-radius:14px; font-weight:700; font-size:12px; }
.dc-skip-q { margin-top: 8px; font-size: 12px; }

/* Per-sentence stepping context */
.dc-sentence-meta { background: #fff5e6; color:#d9540a; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 13px; margin-left: 10px; }
.dc-intensive-speaker { color:#6b7585; font-size:13px; margin-bottom:6px; }
.dc-line-en-big { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 8px 0 12px; color:#1a2030; }
.dc-line-zh-big { font-size: 16px; color:#5b6470; margin: 4px 0 14px; }
.dc-instruction { font-size: 14px; color:#3a4250; margin: 8px 0 12px; line-height: 1.55; }
.dc-done-msg { font-size: 16px; color:#2a8a2a; padding: 18px; text-align:center; background:#f1faf5; border-radius: 10px; }

/* Vocab list */
.dc-vocab-ol { margin: 8px 0; padding-left: 22px; }
.dc-vocab-ol li { margin: 6px 0; font-size: 14px; }
.dc-vocab-ol strong { color: #1a73e8; }
.dc-vocab-zh { color: #2a8a2a; margin-left: 8px; font-size: 13px; }
.dc-vocab-zh-hint { color: #aaa; margin-left: 8px; font-style: italic; }
.dc-vocab-empty { color:#888; font-style:italic; padding:6px 0; }
.dc-explain-bubble { padding: 12px 14px; background: #fffdee; border-left: 3px solid #ffd456; border-radius: 8px; margin: 8px 0; font-size: 14px; line-height: 1.6; }

/* Phonetic canvas + parts */
.dc-phon-canvas-wrap { background:#fff; border-radius:10px; margin:10px 0; }
.dc-phon-parts { padding-left: 22px; }
.dc-phon-parts li { margin: 10px 0; padding: 10px 12px; background:#f8fafc; border:1px solid #e4e9f0; border-radius:8px; }
.dc-phon-part-text { font-weight: 700; font-size: 15px; color:#1a2030; }
.dc-phon-part-rule { display:inline-block; margin-left:8px; padding:2px 8px; background:#fff5e6; color:#d9540a; border-radius:10px; font-size:11px; }
.dc-phon-part-score { display:block; margin-top:6px; font-size:13px; }
.dc-phon-fb { padding: 12px 14px; border-radius: 8px; margin-top: 10px; font-size: 13px; line-height: 1.55; }
.dc-phon-fb.ok { background:#f1faf5; border-left:3px solid #2a8a2a; }
.dc-phon-fb.warn { background:#fff7ed; border-left:3px solid #d9540a; }
.dc-phon-fb.err { background:#fff5f5; border-left:3px solid #c2410c; color:#c2410c; }
.dc-phon-corrected { color:#444; font-size:12px; margin-top:6px; }
.dc-phon-hint { color:#666; font-size:12px; }
.dc-phon-done { margin-top:6px; color:#2a8a2a; font-weight:700; }

/* Drill UI (4-mode) */
.dc-drill-switcher { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin: 4px 0 14px; padding: 6px 10px; background:#f8fafc; border-radius:8px; font-size:12px; }
.dc-drill-switcher-label { color:#888; margin-right: 4px; }
.dc-drill-mode-pill { padding: 4px 10px; background:#fff; border:1px solid #e4e9f0; border-radius: 14px; cursor:pointer; font-size:12px; color:#555; }
.dc-drill-mode-pill:hover { border-color:#1a73e8; color:#1a73e8; }
.dc-drill-mode-pill.cur { background: linear-gradient(135deg,#1a73e8,#4f8eff); border-color: transparent; color:#fff; font-weight: 600; }
.dc-drill-card { padding: 14px 16px; background:#fffaf0; border:1px solid #ffd9a8; border-radius: 10px; margin: 12px 0; }
.dc-emotion-pills { display:flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.dc-emotion-pills button { padding: 6px 14px; background:#fff; border: 1px solid #e4e9f0; border-radius: 14px; cursor: pointer; font-size: 13px; }
.dc-emotion-pills button.cur { background:#fff5e6; border-color:#d9540a; color:#d9540a; font-weight: 700; }
.dc-perf-actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.dc-scenario-list { padding-left: 22px; margin: 10px 0; }
.dc-scenario-list li { margin: 6px 0; line-height: 1.5; }
.dc-az-score.pass { background:#ecfdf5; border-left-color:#16a34a; }
.dc-az-score.fail { background:#fff7ed; border-left-color:#d9540a; }
.dc-comp-q.answered { background: #f0fff4; border-left: 3px solid #2a8a2a; padding: 12px; border-radius: 6px; margin-bottom: 12px; }
.dc-comp-mic { margin-top: 6px; }

/* Pattern drill (3 zh→en) */
.dc-pattern-ol { margin:8px 0; padding-left: 22px; }
.dc-pattern-ol li { margin: 4px 0; font-size: 14px; color: #3a4250; }
.dc-pattern-zh { font-size: 18px; padding: 12px 14px; background: #fff5e6; border-radius: 8px; color: #1a2030; font-weight: 600; margin: 10px 0; }

/* Mic + score boxes */
.dc-callee { padding: 14px; background:#f8fafc; border:1px solid #e4e9f0; border-radius:10px; margin:10px 0; }
.dc-callee strong { color: #1a73e8; }
.dc-mic-btn { margin: 8px 8px 0 0; padding: 8px 14px; border-radius: 8px; background:#1a73e8; color:#fff; border: none; cursor: pointer; font-weight: 700; }
.dc-mic-btn[data-recording="1"] { background:#ef4444; animation: lkMicPulse 1.4s infinite; }
.dc-mic-result { margin-top: 8px; }
.dc-mic-transcript { padding: 8px 12px; background:#fff; border-left:3px solid #1a73e8; border-radius: 4px; margin: 6px 0; }
.dc-teacher-feedback { padding: 10px 12px; background:#fffdee; border-left:3px solid #ffd456; border-radius:4px; margin: 6px 0; }
.dc-az-score { padding: 8px 12px; background: #f0fff4; border-left:3px solid #2a8a2a; border-radius: 4px; margin: 6px 0; font-size: 13px; }
.dc-az-err { padding: 6px 10px; background: #fff5f5; color:#c2410c; border-radius: 4px; font-size: 12px; }
.dc-loading { color:#888; font-style: italic; }
.dc-error { color:#c2410c; }

/* Per-vocab teaching */
.dc-vocab-progress { color:#666; font-size:13px; margin: -6px 0 12px; padding: 6px 10px; background:#f8fafc; border-radius:6px; }
.dc-vocab-cur { color:#1a73e8; }
.dc-term-hl { background: #fff5e6; color: #c2410c; padding: 1px 4px; border-radius: 4px; font-weight: 700; }
.dc-play-status { display:inline-block; padding: 8px 14px; background:#fff5e6; border:1px solid #ffd9a8; border-radius:14px; color:#d9540a; font-weight:600; font-size:14px; }
.dc-vocab-repeat { display: flex; gap: 8px; margin: 8px 0; }

/* Live class teaching-stage embed */
.lk-controls-mini { display:flex; gap:10px; margin: 10px 0 14px; align-items:center; flex-wrap: wrap; }
.lk-conn-status { color:#2a8a2a; font-size: 12px; }
.lk-teaching-stage { margin-top: 16px; }

/* ── LiveKit Live Class room ─────────────────────────────────────────── */
.lk-container { padding: 24px 20px; max-width: 920px; margin: 0 auto; }
.lk-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #e4e9f0; margin-bottom: 18px; }
.lk-title { margin: 0; font-size: 20px; flex: 1; }
.lk-room-meta { font-size: 12px; color: #888; }
.lk-room-meta code { background: #f0f6ff; padding: 2px 6px; border-radius: 4px; }
.lk-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 720px) { .lk-stage { grid-template-columns: 1fr; } }
.lk-participants { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lk-participant { padding: 16px 12px; background: #fff; border: 2px solid #e4e9f0; border-radius: 14px; text-align: center; transition: all 0.2s; position: relative; }
.lk-participant.lk-self { background: linear-gradient(135deg, #f0f6ff, #fff); border-color: #1a73e8; }
.lk-participant.called { animation: lkCalled 1.5s 4; }
@keyframes lkCalled { 0%,100%{box-shadow:0 0 0 0 rgba(255,179,0,0)} 50%{box-shadow:0 0 0 8px rgba(255,179,0,0.4)} }
.lk-pavatar { font-size: 36px; margin-bottom: 4px; }
.lk-pname { font-weight: 700; font-size: 14px; }
.lk-pmeta { font-size: 11px; color: #6b7585; margin-top: 2px; }
.lk-pmic { position: absolute; bottom: 6px; right: 8px; font-size: 14px; opacity: 0.3; }
.lk-pmic.active { opacity: 1; color: #ef4444; animation: lkMicPulse 1.5s infinite; }
@keyframes lkMicPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

.lk-teacher-area { background: linear-gradient(180deg, #fff8f0, #fff); border: 1px solid #ffd9a8; border-radius: 14px; padding: 16px; }
.lk-teacher-box { display: flex; gap: 12px; align-items: flex-start; }
.lk-teacher-icon { font-size: 32px; }
.lk-teacher-box strong { font-size: 15px; }
.lk-teacher-box p { margin: 2px 0 0; font-size: 12px; color: #888; }
.lk-teacher-bubble { margin-top: 12px; padding: 12px 14px; background: #fffdee; border-left: 3px solid #ffd456; border-radius: 8px; min-height: 60px; font-size: 14px; line-height: 1.5; }
.lk-teacher-bubble:empty::before { content: "AI 老师等待中…"; color: #aaa; font-style: italic; }

.lk-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lk-controls .btn-primary.active { background: #ef4444; }
.lk-log { background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 14px; max-height: 180px; overflow-y: auto; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.lk-log-line { margin: 2px 0; color: #555; }
.lk-error { padding: 24px; background: #fff5f5; border: 1px solid #ffb4b0; border-radius: 12px; color: #c2410c; text-align: center; }

/* Fullscreen LiveKit mount for invite-accept flow */
.lk-fullscreen-mount { position: fixed; inset: 0; background: #fff; z-index: 9500; overflow-y: auto; padding: 20px; }

/* ── Examples section — now collapsible by default ───────────────────── */
.dict-examples-collapsible { background: #fcfcfd; }
.dict-examples-collapsible .examples-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #1a2030; text-align: left;
  font-family: inherit;
}
.dict-examples-collapsible .examples-toggle:hover { background: #f5f7fb; }
.dict-examples-collapsible .examples-toggle-caret { display: inline-block; width: 14px; color: #888; }
.dict-examples-collapsible .examples-head { padding: 4px 14px 8px; display:flex; justify-content:flex-end; }
.dict-examples-collapsible .example-list { padding: 0 14px; }
.dict-examples-collapsible .more-ex-row { padding: 8px 14px 14px; }

/* ── Sentence-making section — cleaner, more inviting layout ─────────── */
.sentences-section {
  background: linear-gradient(180deg, #fff, #f9fbff);
  border: 1px solid #e4e9f0;
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 14px;
}
.sentences-section .sentences-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sentences-section .sentences-head h3 { margin: 0; }
.sentences-section .sentence-tip { color: #5b6470; font-size: 13px; margin: 4px 0 12px; line-height: 1.55; }
.sentences-section .sentence-mode-toggle { margin-bottom: 14px; }
.sentence-row.card.voice-mode {
  padding: 18px 16px 18px 52px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #e4e9f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.sentence-row.card.voice-mode .voice-input-area {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 84px; justify-content: center;
}
.sentence-row.card.voice-mode .voice-mic-big {
  background: linear-gradient(135deg, #1a73e8, #4f8eff);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 52px; height: 52px;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(26,115,232,0.28);
  transition: transform 0.12s, box-shadow 0.12s;
}
.sentence-row.card.voice-mode .voice-mic-big:hover { transform: scale(1.06); box-shadow: 0 8px 18px rgba(26,115,232,0.34); }
.sentence-row.card.voice-mode .voice-mic-big.rec { background: linear-gradient(135deg, #ef4444, #ff7846); animation: micPulse 1.4s infinite; }
@keyframes micPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.sentence-row.card.voice-mode .voice-hint { color: #8a93a3; font-size: 13px; text-align: center; margin: 0; }
.sentence-row.card.voice-mode .voice-heard {
  background: #f0f6ff; padding: 8px 12px; border-radius: 8px; border-left: 3px solid #1a73e8;
  width: 100%; box-sizing: border-box; margin: 0;
}

/* sticky-style action bar so buttons aren't visually jumbled */
.sentences-section .study-actions {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding-top: 12px; margin-top: 12px; border-top: 1px solid #eef0f5;
  flex-wrap: wrap;
}
.sentences-section .study-actions .btn-ghost { padding: 8px 16px; }
.sentences-section .study-actions .btn-primary { padding: 10px 22px; font-weight: 700; }
.sentences-section .study-actions .btn-primary.btn-lg { padding: 12px 24px; }

/* ── Ebbinghaus badge + memory stats modal ───────────────────────────── */
.ebb-badge { display: inline-block; padding: 2px 10px; margin-left: 10px; background: linear-gradient(135deg, #fff5e6, #ffe8c2); color: #c2410c; border-radius: 12px; font-size: 12px; font-weight: 700; }
.ebb-stats-btn { margin-left: 8px; padding: 3px 10px; background: transparent; border: 1px solid #e4e9f0; color: #5b6470; border-radius: 12px; font-size: 12px; cursor: pointer; font-family: inherit; }
.ebb-stats-btn:hover { background: #f0f6ff; border-color: #1a73e8; color: #1a73e8; }
.ebb-modal { position: fixed; inset: 0; z-index: 9998; display: none; }
.ebb-modal.open { display: block; }
.ebb-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.ebb-modal-card { position: relative; max-width: 540px; margin: 8vh auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); overflow: hidden; }
.ebb-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e4e9f0; }
.ebb-modal-head strong { font-size: 16px; }
.ebb-modal-body { padding: 18px; }
.ebb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ebb-stat { background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 10px; padding: 12px 8px; text-align: center; }
.ebb-stat-num { display: block; font-size: 22px; font-weight: 700; color: #1a2030; }
.ebb-stat-emph { color: #2a8a2a; }
.ebb-stat-due { color: #d9540a; }
.ebb-stat-lbl { display: block; font-size: 11px; color: #6b7585; margin-top: 4px; }
.ebb-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 120px; align-items: end; padding: 0 4px; }
.ebb-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.ebb-bar-fill { width: 70%; min-height: 4px; background: linear-gradient(180deg, #4f8eff, #1a73e8); border-radius: 4px 4px 0 0; }
.ebb-bar-num { font-size: 11px; font-weight: 700; color: #1a2030; }
.ebb-bar-lbl { font-size: 11px; color: #6b7585; }

/* inline error pill instead of intrusive alert() */
.inline-error-pill {
  display: inline-block; padding: 4px 12px; background: #fff5f5; color: #c2410c;
  border: 1px solid #ffb4b0; border-radius: 14px; font-size: 12px;
  margin-left: 8px; animation: shake 0.4s;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* ── Real-examples section (Tatoeba + TED + future OpenSubtitles) ─────── */
.real-examples-section { background: linear-gradient(180deg, #f7faff, #fff); border: 1px solid #d8e3f5; border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.real-examples-section h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.real-examples-section .hint { color: #6b7585; font-weight: 400; }
.real-examples-section.loading p, .real-examples-section.empty p { color:#8a93a3; font-style: italic; margin: 4px 0; }
.real-example-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.real-example-list li { background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 12px; }
.real-example-list .ex-row { display: flex; gap: 8px; align-items: flex-start; }
.real-example-list .ex-en { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: #1a2030; }
.real-example-list .ex-zh { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #5b6470; }
.ex-source { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 10px; border-radius: 12px; background: #f0f6ff; color: #1a73e8; width: fit-content; }
.ex-source.src-ted { background: linear-gradient(135deg, #ffe5e5, #fff0f0); color: #c2410c; }
.ex-source.src-tatoeba { background: linear-gradient(135deg, #ecfdf5, #f0fff4); color: #16a34a; }
.ex-source.src-opensubs { background: linear-gradient(135deg, #fff5e6, #fff8f0); color: #d9540a; }
.ex-source.src-pubmed { background: linear-gradient(135deg, #e0f2fe, #f0f9ff); color: #0284c7; }
.ex-source.src-arxiv { background: linear-gradient(135deg, #fce7f3, #fdf2f8); color: #be185d; }
.ex-source.src-exam { background: linear-gradient(135deg, #fef3c7, #fffbeb); color: #92400e; font-weight: 700; }
.ex-source.src-exam-cert { background: linear-gradient(135deg, #fce7f3, #fff1f8); color: #9d174d; font-weight: 700; }
.ex-source.src-ai { background: linear-gradient(135deg, #ddd6fe, #ede9fe); color: #5b21b6; font-weight: 700; }
.ex-source.src-voa { background: linear-gradient(135deg, #dbeafe, #eff6ff); color: #1d4ed8; }
.ex-source.src-wikinews { background: linear-gradient(135deg, #d1fae5, #ecfdf5); color: #047857; }
.ex-source.src-wikipedia { background: linear-gradient(135deg, #e5e7eb, #f3f4f6); color: #374151; }
.ex-source.src-medlineplus { background: linear-gradient(135deg, #fee2e2, #fef2f2); color: #b91c1c; }
.ex-source.src-govdocs { background: linear-gradient(135deg, #e0e7ff, #eef2ff); color: #3730a3; }
.ex-source.src-stackexchange { background: linear-gradient(135deg, #fed7aa, #fff7ed); color: #c2410c; }

/* Commercial-safety pill — gives users (and you) visibility into license */
.ex-license-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 1.4; }
.ex-license-pill.commercial-safe { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.ex-license-pill.ai-original { background: linear-gradient(135deg, #ddd6fe, #ede9fe); color: #5b21b6; border: 1px solid #c4b5fd; }
.ex-license-pill.non-commercial { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ex-source.src-sec { background: linear-gradient(135deg, #fef9c3, #fefce8); color: #a16207; }
.ex-source.src-caselaw { background: linear-gradient(135deg, #ede9fe, #f5f3ff); color: #6d28d9; }
.ex-source.src-gutenberg { background: linear-gradient(135deg, #f3e8ff, #faf5ff); color: #7c3aed; }

/* Source row: badge + deep-link + YouGlish button laid out inline */
.ex-source-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.ex-source-link { color: #aab; font-size: 11px; text-decoration: none; }
.ex-source-link:hover { color: #1a73e8; text-decoration: underline; }
.ex-youglish { margin-left: auto; padding: 3px 10px; border: 1px solid #e4e9f0; background: #fff; color: #444; border-radius: 12px; font-size: 11px; cursor: pointer; transition: all 0.12s; }
.ex-youglish:hover { background: #f0f6ff; border-color: #1a73e8; color: #1a73e8; }

/* YouGlish modal */
.yg-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.yg-modal.open { display: block; }
.yg-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.yg-modal-card { position: relative; max-width: 760px; margin: 4vh auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.yg-modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e4e9f0; }
.yg-modal-head strong { font-size: 15px; }
.yg-modal-hint { color: #6b7585; font-size: 12px; flex: 1; }
.yg-modal-hint em { color: #1a73e8; font-style: normal; font-weight: 600; }
.yg-modal-close { padding: 4px 10px; }
#yg-frame { width: 100%; height: 70vh; border: 0; background: #000; }
.ex-source-id { color: #aab; font-size: 10px; margin-left: 4px; }

/* ══════════════════════════════════════════════════════
   英文播客（听英文书）模块 — from aixienglish.com/ic
   ══════════════════════════════════════════════════════ */
.podcast-page-shell{min-height:100vh;background:#f5f7fa}
.podcast-page-header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50}
.podcast-back-btn{border:none;background:none;font-size:15px;font-weight:700;color:#0f4564;cursor:pointer;padding:6px 10px;border-radius:8px}
.podcast-back-btn:hover{background:#edf2f3}
.podcast-page-title{font-size:20px;font-weight:800;color:#0e3550;margin:0}

.blink-home,.blink-detail{display:grid;gap:16px;color:#0b314a;font-family:"Avenir Next","Avenir","SF Pro Text","Segoe UI",system-ui,sans-serif}
.blink-home{padding:14px 16px 10px}
.blink-search{display:flex;align-items:center;gap:10px;border-radius:14px;background:#eef2f3;border:1px solid #dce5e9;padding:11px 14px}
.blink-search span{color:#0c3f5a;font-size:16px;font-weight:700}
.blink-search input{border:none;background:transparent;width:100%;outline:none;color:#10324b;font-size:16px;font-weight:500}
.blink-home h2{font-size:20px;line-height:1.2;margin:2px 0 0;color:#0e3550;font-weight:900;letter-spacing:-.01em}
.blink-cats{display:grid;grid-template-rows:repeat(3,minmax(0,auto));grid-auto-flow:column;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;align-items:start}
.blink-cats::-webkit-scrollbar{display:none}
.blink-cat{border:none;display:inline-flex;align-items:center;gap:6px;border-radius:12px;background:#edf2f3;border:1px solid #e0e6ea;color:#0f3854;font-size:13px;font-weight:700;padding:8px 12px;white-space:nowrap;cursor:pointer}
.blink-cat-icon{font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.blink-cat.on{background:#0f4564;color:#fff;border-color:#0f4564}
.blink-sec{display:grid;gap:10px}
.blink-sec-head{display:flex;align-items:baseline;justify-content:space-between}
.blink-sec-head h3{margin:0;font-size:34px;line-height:1.05;color:#0f3550;letter-spacing:-.02em}
.blink-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;padding:2px}
.blink-empty{grid-column:1/-1;border-radius:12px;border:1px dashed #cddde7;background:#f8fbfd;color:#5a768a;font-size:14px;font-weight:700;padding:18px 12px;text-align:center}
.blink-card{background:#fdfefe;border-radius:14px;padding:8px;border:1px solid #e5edf2;box-shadow:0 6px 16px rgba(7,39,62,.07);display:grid;gap:7px;cursor:pointer}
.blink-card-cover-wrap{border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:#dbe8ec}
.blink-card-cover-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.blink-card-title{font-size:16px;line-height:1.28;color:#0f3550;font-weight:800;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blink-card-author{font-size:13px;color:#3a6077;font-weight:700}
.blink-card-sub{font-size:11px;color:#637f93;line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;min-height:1.5em}
.blink-card-foot{display:flex;align-items:center;justify-content:space-between;color:#668092;font-size:11px}

/* Player */
.blink-player{position:fixed;inset:0;z-index:160;display:grid;grid-template-rows:auto auto auto auto auto auto;gap:10px;overflow:hidden;padding:12px 18px calc(env(safe-area-inset-bottom) + 12px);color:#fff;font-family:"Avenir Next","Avenir","SF Pro Display","Segoe UI",sans-serif;overscroll-behavior-y:none}
.blink-player.theme-green{--blink-bg:#155a35;--blink-bg-2:#145230;--blink-soft:#f3f8f5;--blink-ac:#2bf189;--blink-ink:#e6f7ef;--blink-ui:rgba(236,249,242,.87)}
.blink-player.theme-ivory{--blink-bg:#f3efe3;--blink-bg-2:#ece3cf;--blink-soft:#fff;--blink-ac:#0e4867;--blink-ink:#13364e;--blink-ui:rgba(19,54,78,.72)}
.blink-player.theme-navy{--blink-bg:#212d6a;--blink-bg-2:#1b255a;--blink-soft:#f2f4fb;--blink-ac:#49f0a6;--blink-ink:#e9eefc;--blink-ui:rgba(233,238,252,.78)}
.blink-player.theme-black{--blink-bg:#11191b;--blink-bg-2:#0c1316;--blink-soft:#f4f6f7;--blink-ac:#2ce38a;--blink-ink:#e8f0f3;--blink-ui:rgba(232,240,243,.76)}
.blink-player{background:linear-gradient(180deg,var(--blink-bg),var(--blink-bg-2))}
.blink-player-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center}
.blink-player-top button{border:none;background:transparent;color:var(--blink-ink);font-size:24px;line-height:1;font-weight:700;width:40px;height:40px;cursor:pointer}
.blink-player-top .right{display:flex;gap:6px}
.blink-player-top .right button{font-size:24px}
.blink-top-title{text-align:center;color:var(--blink-ink);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.96}
.blink-player-cover{display:grid;justify-items:center;gap:8px;position:relative;padding-top:4px}
.blink-player-cover-shell{position:relative;width:min(260px,68vw);display:grid;justify-items:center;padding-bottom:8px}
.blink-player-cover-base{position:absolute;bottom:0;width:min(310px,80vw);height:104px;border-radius:180px 180px 0 0;background:rgba(236,247,241,.95);z-index:0}
.blink-player-cover img{width:min(176px,46vw);aspect-ratio:3/4;border-radius:6px;object-fit:cover;box-shadow:0 14px 26px rgba(0,0,0,.27);z-index:1}
.blink-player-cover h3{margin:2px 0 0;font-size:32px;line-height:1.22;letter-spacing:-.01em;font-weight:800;color:var(--blink-ink);text-align:center;max-width:90vw;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.blink-player-cover p{margin:0;font-size:21px;color:var(--blink-ui);opacity:.95}
.blink-progress-wrap{display:grid;gap:8px}
.blink-progress-track{height:6px;border-radius:999px;background:rgba(255,255,255,.27);overflow:hidden;position:relative}
#blink-progress-fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:inherit;background:var(--blink-ac)}
#blink-progress{position:absolute;inset:-6px 0;width:100%;opacity:0;cursor:pointer}
.blink-time{display:flex;justify-content:space-between;font-size:13px;color:var(--blink-ui)}
.blink-controls{display:grid;grid-template-columns:1fr 1fr 1.35fr 1fr 1fr;align-items:center;gap:8px}
.blink-controls button{border:none;background:transparent;color:var(--blink-ink);font-size:24px;font-weight:700;height:46px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer}
.blink-main-play{width:72px!important;height:72px!important;min-width:72px;min-height:72px;max-width:72px;max-height:72px;aspect-ratio:1/1;margin:auto;padding:0;border-radius:50%;background:#fff!important;color:#155133!important;display:grid;place-items:center;box-shadow:0 12px 26px rgba(0,0,0,.28);cursor:pointer}
.bicon-play{width:0;height:0;border-left:16px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.bicon-pause{width:12px;height:20px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.blink-nav-btn span{position:relative;display:block;width:28px;height:22px}
.blink-nav-btn.prev span::before,.blink-nav-btn.prev span::after,.blink-nav-btn.next span::before,.blink-nav-btn.next span::after{content:"";position:absolute;top:50%;transform:translateY(-50%)}
.blink-nav-btn.prev span::before{left:4px;width:2px;height:20px;border-radius:2px;background:currentColor}
.blink-nav-btn.prev span::after{left:9px;width:0;height:0;border-right:11px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.blink-nav-btn.next span::before{right:4px;width:2px;height:20px;border-radius:2px;background:currentColor}
.blink-nav-btn.next span::after{right:9px;width:0;height:0;border-left:11px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.blink-seek-btn{position:relative}
.blink-seek-btn .blink-seek-num{position:relative;z-index:2;font-weight:700;font-size:18px;letter-spacing:.01em}
.blink-seek-btn::before{content:"";position:absolute;left:50%;top:50%;width:35px;height:35px;border-radius:50%;border:1.2px solid currentColor}
.blink-seek-btn::after{content:"";position:absolute;width:6px;height:6px;border-right:1.2px solid currentColor;border-top:1.2px solid currentColor}
.blink-seek-btn.rewind::before{transform:translate(-50%,-50%) rotate(136deg);border-left-color:transparent;border-bottom-color:transparent}
.blink-seek-btn.rewind::after{left:calc(50% - 12px);top:calc(50% - 12px);transform:rotate(-135deg)}
.blink-seek-btn.forward::before{transform:translate(-50%,-50%) rotate(-46deg);border-right-color:transparent;border-top-color:transparent}
.blink-seek-btn.forward::after{left:calc(50% + 6px);top:calc(50% - 12px);transform:rotate(45deg)}
.blink-sub-controls{display:flex;align-items:center;justify-content:space-between}
.blink-rate-chip,.blink-cast-chip{border:none;background:transparent;color:var(--blink-ink);font-size:17px;font-weight:800;cursor:pointer}
.blink-cast-chip{font-size:20px}
.blink-controls-reading{display:none}
.blink-swipe-tip{justify-self:center;color:var(--blink-ui);font-size:13px;line-height:1;letter-spacing:.01em;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.08);cursor:pointer}
.blink-transcript{display:none;background:#fff;border-radius:0;color:#0f3550;padding:12px 20px 18px;overflow:auto;overscroll-behavior-y:contain;box-shadow:none;-webkit-overflow-scrolling:touch;user-select:text;-webkit-user-select:text}
.blink-transcript-loading{display:flex;align-items:center;justify-content:center;min-height:42vh;padding:24px 12px;text-align:center;color:#6d8194;font-size:16px;line-height:1.65}
.blink-chapter-block{display:grid;gap:10px;margin:0 0 28px}
.blink-chapter-time{justify-self:start;font-size:13px;color:#2b73a9;background:#dcecff;border-radius:999px;padding:5px 12px;font-weight:800}
.blink-chapter-block h4{margin:0;font-size:34px;line-height:1.12;color:#0d3450;letter-spacing:-.015em;font-weight:900}
.blink-sent-line{margin:0 0 .7em;user-select:text;-webkit-user-select:text}
.blink-sent-line:last-child{margin-bottom:0}
.blink-sent-translation{margin:0 0 1.05em;padding:8px 10px;border-left:3px solid #f1c16b;border-radius:8px;background:#f7f9ff;color:#3f5d7a;font-size:14px;line-height:1.7}
.blink-sent{display:inline;border-radius:4px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .2s ease,color .2s ease}
.blink-sent.on{background:#dff0ff;color:#0f3550}
.blink-word:active{color:#0f8b53}

/* Reading mode */
.blink-player.reading-mode{grid-template-rows:auto 1fr auto;gap:0;background:#f8fbfc;color:#123850;padding:0 0 calc(env(safe-area-inset-bottom) + 8px)}
.blink-player.reading-mode .blink-player-cover,.blink-player.reading-mode .blink-progress-wrap,.blink-player.reading-mode .blink-controls-player,.blink-player.reading-mode .blink-sub-controls,.blink-player.reading-mode .blink-swipe-tip{display:none}
.blink-player.reading-mode .blink-player-top{background:#fff;border-bottom:1px solid #e5edf2;padding:12px 16px}
.blink-player.reading-mode .blink-player-top button{color:#0f4564}
.blink-player.reading-mode .blink-top-title{color:#173e57;font-size:13px;font-weight:600}
.blink-player.reading-mode .blink-controls-reading{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:3;background:#155a35;color:#fff;border-radius:22px 22px 0 0;padding:14px 16px calc(env(safe-area-inset-bottom) + 20px);grid-template-columns:1fr 1.35fr 1fr;align-items:center;box-shadow:0 -10px 24px rgba(0,0,0,.2);overflow:visible}
.blink-player.reading-mode .blink-controls-reading::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:46px;height:5px;border-radius:999px;background:rgba(255,255,255,.55)}
.blink-player.reading-mode .blink-controls-reading button{color:#fff;font-size:21px}
.blink-player.reading-mode .blink-controls-reading .blink-main-play{color:#155a35!important}
.blink-player.reading-mode .blink-controls-reading .blink-dock-handle{position:absolute;left:50%;top:-48px;transform:translateX(-50%);width:106px;height:44px;border:none;background:transparent;color:transparent}
.blink-player.reading-mode .blink-controls-reading .blink-dock-handle::after{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:42px;height:6px;border-radius:999px;background:rgba(255,255,255,.64)}
.blink-player.reading-mode .blink-transcript{display:block;height:calc(100dvh - 74px);border-radius:0;background:#fff;box-shadow:none;padding:16px 22px 172px}
.blink-player:not(.reading-mode) .blink-transcript{display:none}
.blink-player.reading-focus .blink-player-top,.blink-player.reading-focus .blink-controls-reading{display:none!important}
.blink-player.reading-focus .blink-transcript{height:100dvh;padding:18px 22px 24px}

/* Panels */
.blink-panel{position:fixed;inset:0;z-index:190;display:none;align-items:flex-end;justify-content:center;background:rgba(8,16,24,.4)}
.blink-panel.on{display:flex}
.blink-panel .panel-card,.blink-panel .chapter-card,.blink-panel .more-card{width:min(760px,100vw);background:#fff;border-radius:24px 24px 0 0;padding:16px;color:#143a53;max-height:76vh;overflow:auto}
.themes{display:flex;gap:12px;margin-bottom:10px}
.themes button{width:44px;height:44px;border-radius:999px;border:2px solid #d8e2ea;background:#fff;cursor:pointer}
.themes button:nth-child(2){background:#f3ebd4}
.themes button:nth-child(3){background:#0f4564}
.themes button:nth-child(4){background:#000}
.panel-card input[type=range]{width:100%;margin-top:8px}
.panel-card .reset{margin-top:16px;border:none;background:#eef3f7;color:#2d5b78;font-size:18px;font-weight:800;border-radius:999px;padding:10px 16px;cursor:pointer}
.chapter-card .head{display:flex;align-items:center;gap:8px;font-size:19px}
.chapter-card .head button{border:none;background:none;font-size:24px;color:#0f3550;cursor:pointer}
.chapter-card .citem{width:100%;border:none;background:none;border-top:1px solid #e3ebf2;padding:14px 0;display:grid;grid-template-columns:auto 1fr;gap:10px;text-align:left;cursor:pointer}
.chapter-card .citem span{font-size:14px;color:#2f73a8;background:#d8eaff;border-radius:999px;padding:4px 8px;height:fit-content}
.chapter-card .citem em{font-style:normal;font-size:16px;color:#173f59}
.more-card h4{margin:0 0 8px;font-size:22px}
.more-card button{width:100%;text-align:left;border:none;border-top:1px solid #e3ebf2;background:#fff;color:#153e58;font-size:17px;padding:16px 0;cursor:pointer}

/* Translate FAB */
.content-translate-fab.podcast{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 156px);z-index:170;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #dae6ec;box-shadow:0 6px 18px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;font-weight:800;color:#0f4564}
.translate-fab-stack{display:flex;flex-direction:column;align-items:center;line-height:1.1;font-size:11px}

@media (max-width:768px){
  .blink-home{gap:14px}
  .blink-search input{font-size:14px}
  .blink-home h2{font-size:18px}
  .blink-sec-head h3{font-size:28px}
  .blink-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 9px}
  .blink-card-title{font-size:15px}
  .blink-player{padding:8px 14px calc(env(safe-area-inset-bottom) + 12px);gap:8px}
  .blink-player-top{grid-template-columns:36px 1fr auto}
  .blink-player-top button{width:34px;height:34px;font-size:22px}
  .blink-player-cover-shell{width:min(240px,70vw)}
  .blink-player-cover-base{height:90px}
  .blink-player-cover img{width:min(156px,44vw)}
  .blink-player-cover h3{font-size:20px}
  .blink-player-cover p{font-size:14px}
  .blink-time{font-size:12px}
  .blink-controls button{font-size:18px;height:38px}
  .blink-main-play{width:62px!important;height:62px!important;min-width:62px;min-height:62px;max-width:62px;max-height:62px}
  .blink-chapter-block h4{font-size:16px}
  .blink-player.reading-mode .blink-transcript{padding:14px 16px 136px}
  .content-translate-fab.podcast{right:10px;bottom:calc(env(safe-area-inset-bottom) + 130px)}
}

/* ─── Sentence-pattern annotation (句型) in the article reader ───────── */
/* Wrapper that spans across word spans + inter-word text so the underline
   paints CONTINUOUSLY. Bold + solid underline by default, green when
   the user has practiced and mastered the pattern. */
.rd-pattern-wrap {
  font-weight: 700;
  text-decoration: underline 2px solid #2f7df4;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Descendant .rd-word has its own 1px horizontal padding for tap-target
   width — that padding makes each word a separate inline box, breaking the
   underline into per-word segments. Zero it out inside pattern wraps so the
   underline paints as one continuous line across the pattern span. */
.rd-pattern-wrap .rd-word { padding: 0; }
.rd-pattern-wrap.rd-pattern-mastered {
  text-decoration-color: #2ea76a;
  color: #2ea76a;
}
.rd-rd-theme-dark .rd-pattern-wrap { text-decoration-color: #6aa7ff; color: #cfe1ff; }
.rd-rd-theme-dark .rd-pattern-wrap.rd-pattern-mastered { color: #6ee0a5; text-decoration-color: #6ee0a5; }
.rd-pattern-loading {
  margin: 12px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  font-size: 13px;
}

/* ─── Sentence-pattern study overlay ────────────────────────────────── */
.rd-pattern-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.rd-pattern-modal {
  background: #fff;
  border-radius: 14px;
  width: min(640px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.rd-pattern-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f3;
}
.rd-pattern-modal-title { font-weight: 600; color: #1f2329; }
.rd-pattern-pattern {
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0));
  border-bottom: 1px solid #eef0f3;
}
.rd-pattern-pat-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; font-weight: 600;
  color: #1f2329;
  line-height: 1.4;
}
.rd-pattern-pat-zh { margin-top: 6px; color: #5a6573; font-size: 13px; }
.rd-pattern-tabs {
  display: flex; gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #eef0f3;
}
.rd-pattern-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #5a6573;
  font-size: 14px;
  cursor: pointer;
}
.rd-pattern-tabs button.active {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 600;
}
.rd-pattern-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}
.rd-pattern-section h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #2f3640;
}
.rd-pattern-example-en {
  font-family: Georgia, "Times New Roman", serif;
  background: #f8f9fb;
  padding: 12px 14px;
  border-radius: 10px;
  color: #1f2329;
  line-height: 1.55;
}
.rd-pattern-example-hint { margin-top: 6px; font-size: 12px; color: #94a3b8; }
.rd-pattern-task-zh {
  font-size: 16px;
  color: #1f2329;
  background: #fffaf2;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ffe5c2;
}
.rd-pattern-task-hint { margin: 8px 0 12px; color: #94a3b8; font-size: 12px; }
.rd-pattern-input {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e3e6ec;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: #fff;
  color: #1f2329;
}
.rd-pattern-feedback {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8f9fb;
  border: 1px solid #eef0f3;
  font-size: 14px;
  color: #2f3640;
  line-height: 1.5;
}
.rd-pattern-fb-row { margin-bottom: 6px; }
.rd-pattern-fb-row:last-child { margin-bottom: 0; }
.rd-pattern-fb-row.ok { color: #157f4a; }
.rd-pattern-fb-row.warn { color: #b45309; }
.rd-pattern-foot {
  border-top: 1px solid #eef0f3;
  padding: 10px 16px;
  display: flex; justify-content: flex-end;
}

/* ─── Article comments section ─────────────────────────────────────── */
.rd-comments {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #eef0f3;
}
.rd-comments-h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  margin: 0 0 12px;
}
.rd-comments-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 500;
}
.rd-comment-compose { margin-bottom: 18px; }
.rd-comment-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e3e6ec;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: #fff;
  color: #1f2329;
  min-height: 60px;
}
.rd-comment-compose-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.rd-comment-hint { color: #94a3b8; font-size: 12px; }
.rd-comment-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.rd-comment-item {
  padding: 12px 14px;
  background: #f8f9fb;
  border-radius: 10px;
  border: 1px solid #eef0f3;
}
.rd-comment-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.rd-comment-name { color: #1f2329; font-weight: 600; }
.rd-comment-date { color: #94a3b8; font-size: 12px; }
.rd-comment-del {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.rd-comment-del:hover { color: #ef5a6f; }
.rd-comment-text {
  color: #2f3640;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.rd-comment-empty {
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
}
.rd-rd-theme-dark .rd-comments { border-top-color: rgba(255,255,255,0.08); }
.rd-rd-theme-dark .rd-comments-h3 { color: #f5f5f7; }
.rd-rd-theme-dark .rd-comment-input,
.rd-rd-theme-dark .rd-comment-item {
  background: #1f2329;
  color: #e8eaee;
  border-color: rgba(255,255,255,0.08);
}
.rd-rd-theme-dark .rd-comment-name { color: #f5f5f7; }
.rd-rd-theme-dark .rd-comment-text { color: #c8ced8; }

/* ─── Podcast transcript: per-sentence translate toggle + hl popup ───── */
.blink-sent-translate {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
}
.blink-sent-translate:hover { background: rgba(99, 102, 241, 0.18); }
.blink-player .blink-sent .rd-word {
  /* Transcript is rendered inside Aixie player theme; match its text color */
  color: inherit;
}
.podcast-hl-popup {
  display: inline-flex;
  background: #1f2329;
  color: #fff;
  border-radius: 8px;
  padding: 4px;
  z-index: 9100;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.podcast-hl-popup button {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
}
.podcast-hl-popup button:hover { background: rgba(255,255,255,0.12); }
/* The .blink-sent active-line highlight has its own background; make sure
   our inline-underline-wrap doesn't get visually swallowed by it. */
.blink-sent .inline-underline-wrap.podcast-hl {
  /* Use a stronger contrast against the active-line background */
  text-decoration-color: #4f46e5;
}


/* ─── Event cards + detail page (Phase 3) ─────────────────────────────── */
.rd-events-section { margin: 20px 0 26px; }
.rd-events-section > h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-event-cards { display: flex; flex-direction: column; gap: 14px; }
.rd-event-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.rd-event-card {
  cursor: pointer;
  background: var(--surface, #fff);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rd-event-card:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,0.08); }

/* Headline (hero) card */
.rd-event-card-headline {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 200px;
}
.rd-event-card-headline .rd-event-cover {
  position: relative;
  overflow: hidden;
  background: #111;
}
.rd-event-card-headline .rd-event-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.rd-event-card-headline .rd-event-body {
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.rd-event-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-secondary, #6b7280);
}
.rd-event-priority {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff; padding: 3px 9px; border-radius: 999px;
  font-weight: 700; font-size: 11px;
}
.rd-event-status {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.rd-event-status-closed {
  background: rgba(107, 114, 128, 0.14);
  color: #4b5563;
}
.rd-event-fresh { font-size: 11px; color: #9ca3af; }
.rd-event-title {
  font-size: 17px; font-weight: 800; margin: 2px 0 0;
  color: var(--text-primary, #111827); line-height: 1.35;
}
.rd-event-title-zh {
  font-size: 15px; font-weight: 600; margin: 0;
  color: var(--text-primary, #111827);
}
.rd-event-summary {
  margin: 6px 0 4px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary, #4b5563);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-event-stats {
  display: flex; gap: 14px; font-size: 12px; color: #6b7280;
  margin-top: auto;
}
.rd-event-stats em { font-style: normal; color: #111827; font-weight: 700; margin-left: 2px; }
.rd-event-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-event-tag {
  background: rgba(99, 102, 241, 0.10);
  color: #4f46e5;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
.rd-event-cta {
  align-self: flex-start;
  margin-top: 4px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff; border: none; padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}

/* Major (smaller) card */
.rd-event-card-major {
  display: grid;
  grid-template-columns: 100px 1fr;
  min-height: 110px;
}
.rd-event-card-major .rd-event-cover-sm {
  background: #111; overflow: hidden;
}
.rd-event-card-major .rd-event-cover-sm img {
  width: 100%; height: 100%; object-fit: cover;
}
.rd-event-card-major .rd-event-body {
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.rd-event-meta-sm {
  display: flex; gap: 8px; align-items: center; font-size: 11px;
}
.rd-event-priority-sm {
  background: rgba(99,102,241,0.12); color: #4338ca;
  padding: 2px 7px; border-radius: 999px; font-weight: 600;
}
.rd-event-title-sm { font-size: 14px; font-weight: 700; margin: 2px 0 0; line-height: 1.3; color: var(--text-primary, #111827); }
.rd-event-title-zh-sm { font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0; }
.rd-event-stats-sm { display: flex; gap: 10px; font-size: 11px; color: #9ca3af; margin-top: auto; }

/* Cover gradient fallback */
.rd-event-cover-gradient {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
}
.rd-event-cover-fail .rd-event-cover-gradient,
.rd-event-cover-fail { background: linear-gradient(135deg, #94a3b8, #64748b); }
.rd-evd-cover-fail img { display: none; }

@media (max-width: 640px) {
  .rd-event-card-headline { grid-template-columns: 1fr; }
  .rd-event-card-headline .rd-event-cover { aspect-ratio: 16/9; }
  .rd-event-cards-grid { grid-template-columns: 1fr; }
}

/* ─── Event detail page (#/reading/event/<id>) ────────────────────────── */
.rd-evd-shell { padding-bottom: 60px; }

.rd-evd-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(99, 102, 241, 0.05));
  border: 1px solid rgba(0,0,0,0.06);
}
.rd-evd-cover {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: #111;
  overflow: hidden;
}
.rd-evd-cover img { width: 100%; height: 100%; object-fit: cover; }
.rd-evd-headline { padding: 18px 22px 20px; }
.rd-evd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.rd-evd-title-zh { font-size: 22px; font-weight: 800; margin: 4px 0; line-height: 1.3; color: var(--text-primary, #111827); }
.rd-evd-title-en { font-size: 15px; font-weight: 600; color: var(--text-secondary, #4b5563); margin: 0 0 10px; line-height: 1.4; }
.rd-evd-summary { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: var(--text-primary, #1f2937); }
.rd-evd-summary-en { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary, #6b7280); font-style: italic; }

.rd-evd-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin: 8px 0 16px;
  scrollbar-width: none;
}
.rd-evd-tabs::-webkit-scrollbar { display: none; }
.rd-evd-tab {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.rd-evd-tab.active {
  color: #dc2626;
  border-bottom-color: #dc2626;
}
.rd-evd-tab em { font-style: normal; font-size: 11px; background: rgba(0,0,0,0.06); border-radius: 999px; padding: 1px 6px; margin-left: 4px; color: #4b5563; }
.rd-evd-tab.active em { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

.rd-evd-tabpane { padding: 4px 4px 0; }
.rd-evd-placeholder { padding: 30px 12px; text-align: center; color: #9ca3af; font-size: 14px; }

.rd-evd-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.rd-evd-timeline::before {
  content: ""; position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: rgba(0,0,0,0.08);
}
.rd-evd-tl-item {
  position: relative;
  padding: 0 0 18px 26px;
  display: block;
}
.rd-evd-tl-dot {
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #6366f1;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.rd-tl-dot-update   { background: #ef4444; }
.rd-tl-dot-official { background: #2563eb; }
.rd-tl-dot-rescue   { background: #f59e0b; }
.rd-tl-dot-analysis { background: #8b5cf6; }
.rd-evd-tl-meta {
  font-size: 12px; color: #9ca3af;
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 4px;
}
.rd-evd-tl-kind {
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  color: #4b5563;
}
.rd-evd-tl-headline-zh { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary, #111827); line-height: 1.45; }
.rd-evd-tl-headline-en { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary, #6b7280); line-height: 1.5; }

.rd-evd-article-list { display: flex; flex-direction: column; gap: 10px; }
.rd-evd-article-card {
  display: grid; grid-template-columns: 1fr 90px;
  background: var(--surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rd-evd-article-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.rd-evd-article-card:has(.rd-evd-article-cover:empty) { grid-template-columns: 1fr; }
.rd-evd-article-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.rd-evd-article-level { font-size: 11px; color: #6b7280; }
.rd-evd-article-card h4 { font-size: 15px; font-weight: 700; margin: 2px 0; line-height: 1.35; color: var(--text-primary, #111827); }
.rd-evd-article-card p { font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-evd-article-meta { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.rd-evd-article-cover { background: #111; overflow: hidden; }
.rd-evd-article-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   In Use 教材 — A/B/C/D 分节 + 编号练习样式
   ============================================================ */

/* —— Presentation 分节 —— */
.vy-iu-section {
  background: var(--panel, #ffffff);
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.vy-iu-section-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.12);
}
.vy-iu-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand, #f59e0b);
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  font-family: Georgia, "Times New Roman", serif;
  flex-shrink: 0;
}
.vy-iu-section-head h2 {
  margin: 4px 0 4px;
  font-size: 22px;
  line-height: 1.3;
}
.vy-iu-section-zh {
  margin: 0;
  color: var(--muted, #6b7280);
  font-size: 15px;
}
.vy-iu-explain {
  margin: 12px 0 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary, #111827);
}
.vy-iu-explain-zh {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted, #6b7280);
}

/* —— Mini-text 块 —— */
.vy-iu-mini {
  margin: 14px 0;
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 14px 16px;
}
.vy-iu-mini p {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.65;
  color: #1f2937;
}
.vy-iu-mini .vy-line-zh {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

/* —— Labels 块（如 \"parts of a book\"）—— */
.vy-iu-labels {
  margin: 14px 0;
}
.vy-iu-labels h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--brand-ink, #92400e);
}
.vy-iu-label-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
}
.vy-iu-label-list li {
  font-size: 15px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.vy-iu-label-list li strong { color: #111827; }
.vy-iu-label-list li span { color: var(--muted, #6b7280); margin-left: 4px; }

/* —— 词汇表（替代了 <ul>，更像教材左页）—— */
.vy-iu-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 4px;
  font-size: 16px;
}
.vy-iu-table thead th {
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
  padding: 8px 10px;
  border-bottom: 1.5px solid var(--line, #e5e7eb);
  font-weight: 600;
}
.vy-iu-table tbody tr {
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.vy-iu-table tbody tr:last-child { border-bottom: none; }
.vy-iu-table td {
  padding: 12px 10px;
  vertical-align: top;
  line-height: 1.55;
}
.vy-iu-word {
  width: 28%;
  white-space: normal;
}
.vy-iu-word strong {
  font-size: 17px;
  color: #111827;
  display: inline-block;
  margin-left: 4px;
  margin-right: 6px;
}
.vy-iu-ipa {
  display: block;
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
  margin-left: 30px;
}
.vy-iu-zh {
  width: 22%;
  font-size: 15px;
  color: var(--brand-ink, #92400e);
}
.vy-iu-eg {
  width: 50%;
}
.vy-iu-eg-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  padding: 4px 0;
}
.vy-iu-eg-row span {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: #1f2937;
}
.vy-iu-eg-row em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}
.vy-iu-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: #b45309;
  background: #fef3c7;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-block;
}

/* —— 练习区 —— */
.vy-iu-ex {
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: #fafaf9;
}
.vy-iu-ex-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.vy-iu-ex-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  background: #1e293b;
  color: #fef3c7;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  flex-shrink: 0;
}
.vy-iu-ex-head h3 {
  margin: 4px 0 2px;
  font-size: 18px;
  line-height: 1.35;
}
.vy-iu-ex-inst {
  margin: 4px 0 2px;
  font-size: 15px;
  color: #374151;
  line-height: 1.5;
}
.vy-iu-ex-head .vy-line-zh {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #6b7280);
}

/* —— 练习：题目列表 —— */
.vy-iu-ex-items {
  margin: 8px 0 4px;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.9;
  color: #1f2937;
}
.vy-iu-ex-items li {
  padding: 2px 0;
}
.vy-iu-ex-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 6px;
}
.vy-iu-opt {
  display: inline-block;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 4px 10px;
  color: #374151;
}

/* —— 配对题双列 —— */
.vy-iu-ex-pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 8px 0 4px;
}
.vy-iu-ex-col h5 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
}
.vy-iu-ex-col ol {
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.8;
  color: #1f2937;
}
.vy-iu-ex-col li { padding: 2px 0; }

/* —— 分类题 —— */
.vy-iu-ex-categorize {
  font-size: 15px;
  line-height: 1.7;
  color: #1f2937;
}
.vy-iu-ex-categorize p { margin: 4px 0; }

/* —— 答案折叠区 —— */
.vy-iu-ex-answers {
  margin-top: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 8px 14px;
}
.vy-iu-ex-answers.hidden { display: none; }
.vy-iu-ex-answers summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #047857;
  padding: 4px 0;
}
.vy-iu-ex-answers ul,
.vy-iu-ex-answers ol {
  margin: 6px 0 4px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.8;
  color: #065f46;
}

/* —— 按钮：查看答案 / 隐藏答案 —— */
.vy-iu-ex-head button.btn-ghost {
  margin-left: auto;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* —— 互动答题 —— */
.vy-iu-input {
  font-size: 15px;
  padding: 8px 12px;
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  min-width: 160px;
}
.vy-iu-input:focus {
  outline: none;
  border-color: var(--brand, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.vy-iu-fill-row,
.vy-iu-match-row,
.vy-iu-cat-row,
.vy-iu-tf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.vy-iu-fill-q { flex: 1 1 60%; font-size: 16px; line-height: 1.55; color: #1f2937; min-width: 240px; }
.vy-iu-fill-row input[type=text].vy-iu-input { flex: 1 1 200px; min-width: 180px; }
.vy-iu-match-left { flex: 1 1 50%; font-size: 16px; min-width: 200px; }
.vy-iu-cat-item { flex: 1 1 40%; font-size: 16px; min-width: 160px; font-weight: 600; }
.vy-iu-tf-q { flex: 1 1 60%; font-size: 16px; min-width: 240px; }

.vy-iu-mc-row {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.vy-iu-mc-row:last-child { border-bottom: none; }
.vy-iu-mc-q { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: #1f2937; }
.vy-iu-mc-opts { display: flex; flex-direction: column; gap: 6px; }
.vy-iu-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.4;
}
.vy-iu-radio:hover { background: rgba(245, 158, 11, 0.08); }
.vy-iu-radio input[type=radio] { margin: 0; }

.vy-iu-mark {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  min-width: 32px;
  padding: 2px 6px;
  border-radius: 6px;
}
.vy-iu-mark.ok { color: #047857; background: #d1fae5; }
.vy-iu-mark.no { color: #b91c1c; background: #fee2e2; }

.vy-iu-fill-row.ok input,
.vy-iu-match-row.ok select,
.vy-iu-cat-row.ok select {
  border-color: #10b981;
  background: #ecfdf5;
}
.vy-iu-fill-row.no input,
.vy-iu-match-row.no select,
.vy-iu-cat-row.no select {
  border-color: #ef4444;
  background: #fef2f2;
}

.vy-iu-ex-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
  flex-wrap: wrap;
}
.vy-iu-ex-score {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink, #92400e);
}
.vy-iu-ex-wordbox {
  margin: 6px 0 12px;
  padding: 8px 12px;
  background: #fffbeb;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #78350f;
}

/* —— 小屏幕：表格转列 —— */
@media (max-width: 720px) {
  .vy-iu-table thead { display: none; }
  .vy-iu-table tbody tr {
    display: block;
    padding: 12px 6px;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.12);
  }
  .vy-iu-table td {
    display: block;
    width: 100% !important;
    padding: 4px 2px;
  }
  .vy-iu-zh { font-size: 14px; color: var(--brand-ink, #92400e); }
  .vy-iu-ipa { margin-left: 0; }
  .vy-iu-ex-pairs { grid-template-columns: 1fr; gap: 12px; }
  .vy-iu-section { padding: 18px 16px; }
  .vy-iu-letter { width: 36px; height: 36px; font-size: 20px; }
  .vy-iu-section-head h2 { font-size: 19px; }
}

/* =========================================================================
   Business Vocabulary In Use — mobile-first per-reading flow (bvu-* prefix)
   Goals: large readable type, comfortable line-height, one screen one focus.
   ========================================================================= */
.bvu-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 18px 120px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.7;
}
.bvu-screen { min-height: 100vh; }
.bvu-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 10px;
  flex-wrap: wrap;
}
.bvu-top-title { flex: 1; min-width: 0; }
.bvu-top-title strong { display: block; font-size: 16px; line-height: 1.35; }
.bvu-top-sub { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }
.bvu-back, .bvu-step-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.bvu-back:hover { background: #e2e8f0; }
.bvu-step-pill { background: #ecfeff; border-color: #cffafe; color: #0c4a6e; }
.bvu-progress {
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 18px;
}
.bvu-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6);
  border-radius: 999px;
  transition: width .35s ease;
}

/* Hero on book index */
.bvu-hero {
  background: linear-gradient(180deg, #f0f9ff, #fff);
  border: 1px solid #e0f2fe;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.bvu-hero-line { font-size: 14px; color: #0c4a6e; margin: 0 0 6px; line-height: 1.55; }
.bvu-hero-line.muted { color: #64748b; }

/* Unit cards on book index */
.bvu-units {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.bvu-unit-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bvu-unit-card:hover:not([disabled]) {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}
.bvu-unit-card.is-pending { opacity: .55; cursor: not-allowed; }
.bvu-unit-card.is-done { border-color: #bbf7d0; background: #f0fdf4; }
.bvu-unit-num { font-weight: 700; font-size: 20px; color: #0ea5e9; }
.bvu-unit-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.bvu-unit-en { font-size: 16px; font-weight: 600; line-height: 1.3; }
.bvu-unit-zh { font-size: 13px; color: #64748b; line-height: 1.4; }
.bvu-unit-meta { font-size: 12px; color: #64748b; text-align: right; min-width: 80px; }
.bvu-bar { display: block; height: 3px; background: #e2e8f0; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.bvu-bar > span { display: block; height: 100%; background: #0ea5e9; }

/* Reading screen */
.bvu-section-tag {
  display: inline-block;
  background: #ecfeff;
  border: 1px solid #cffafe;
  color: #0c4a6e;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.bvu-section-h { font-size: 22px; line-height: 1.35; margin: 0 0 14px; }
.bvu-passage {
  font-size: 18px;
  line-height: 1.85;
  color: #1e293b;
  margin: 0 0 16px;
  /* Improve CJK + Latin mixed text readability */
  word-spacing: .02em;
}
.bvu-target {
  background: linear-gradient(transparent 55%, #fef08a 55%);
  font-weight: 700;
  color: #0f172a;
  padding: 0 1px;
  border-radius: 2px;
}
.bvu-zh {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  margin: 0 0 14px;
}
.bvu-zh summary { cursor: pointer; font-size: 14px; color: #475569; }
.bvu-zh p { font-size: 16px; line-height: 1.8; color: #334155; margin-top: 8px; }
.bvu-meta-row { font-size: 13px; color: #64748b; }

/* Sticky action bar */
.bvu-actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
}
.bvu-actions .bvu-btn-primary { flex: 1; }
.bvu-btn-primary, .bvu-btn-ghost {
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0 18px;
}
.bvu-btn-primary {
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  color: #fff;
  border-color: #0284c7;
  box-shadow: 0 6px 16px rgba(14, 165, 233, .25);
}
.bvu-btn-primary:hover { filter: brightness(1.05); }
.bvu-btn-ghost {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
.bvu-btn-ghost:hover { background: #f8fafc; }

/* Quiz */
.bvu-quiz-intro {
  font-size: 14px;
  color: #475569;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.bvu-quiz-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.bvu-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  user-select: none;
  min-height: 96px;
  display: grid;
  align-items: center;
}
.bvu-card-front, .bvu-card-back { display: flex; flex-direction: column; gap: 6px; }
.bvu-card-hint { font-size: 12px; color: #64748b; letter-spacing: .04em; }
.bvu-card-prompt { font-size: 22px; line-height: 1.3; color: #0f172a; }
.bvu-card-ipa { font-size: 13px; color: #64748b; }
.bvu-card-tap { font-size: 12px; color: #94a3b8; align-self: flex-end; margin-top: 6px; }
.bvu-card-answer { font-size: 20px; color: #0c4a6e; line-height: 1.35; }
.bvu-card-ex { font-size: 15px; color: #334155; margin: 6px 0 0; }
.bvu-card-ex-zh { font-size: 13px; color: #64748b; margin: 0; }
.hidden { display: none !important; }

/* Sentence-making */
.bvu-sentence-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.bvu-sentence-card > header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bvu-sentence-card > header strong { font-size: 18px; }
.bvu-sentence-hint { font-size: 13px; color: #64748b; margin: 0 0 8px; }
.bvu-sentence-input {
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
  background: #f8fafc;
}
.bvu-sentence-input:focus { outline: none; border-color: #0ea5e9; background: #fff; box-shadow: 0 0 0 3px #e0f2fe; }

/* Exercises */
.bvu-ex-section { display: grid; gap: 14px; }
.bvu-ex-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}
.bvu-ex-head { display: grid; grid-template-columns: 48px 1fr; gap: 12px; margin-bottom: 10px; }
.bvu-ex-num { font-weight: 700; color: #0ea5e9; font-size: 18px; }
.bvu-ex-head h3 { font-size: 15px; margin: 0; line-height: 1.45; }
.bvu-ex-zh { font-size: 13px; color: #64748b; margin: 4px 0 0; }
.bvu-ex-wordbox { font-size: 14px; background: #f1f5f9; border-radius: 8px; padding: 8px 12px; }
.bvu-ex-items, .bvu-ex-answers { padding-left: 22px; margin: 8px 0; font-size: 15px; line-height: 1.7; }
.bvu-ex-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bvu-ex-cols h5 { font-size: 12px; color: #64748b; margin: 0 0 4px; letter-spacing: .04em; }
.bvu-ex-cols ol { padding-left: 22px; font-size: 14px; line-height: 1.7; margin: 0; }
.bvu-ex-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bvu-ex-opt { background: #f1f5f9; border-radius: 6px; padding: 3px 8px; font-size: 13px; color: #334155; }
.bvu-reveal-btn { height: 36px; padding: 0 14px; font-size: 14px; margin-top: 8px; }
.bvu-line-zh { color: #64748b; font-size: 14px; }

/* Empty / Done */
.bvu-empty, .bvu-done {
  text-align: center;
  padding: 40px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.bvu-done-emoji { font-size: 56px; }
.bvu-done h1 { font-size: 26px; margin: 6px 0 8px; }
.bvu-done .muted { color: #64748b; font-size: 14px; margin: 6px 0 18px; }
.bvu-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Mobile tuning */
@media (max-width: 480px) {
  .bvu-shell { padding: 14px 14px 130px; font-size: 17px; }
  .bvu-section-h { font-size: 20px; }
  .bvu-passage { font-size: 17.5px; line-height: 1.85; }
  .bvu-card-prompt { font-size: 20px; }
  .bvu-card-answer { font-size: 18px; }
  .bvu-ex-cols { grid-template-columns: 1fr; }
  .bvu-unit-card { grid-template-columns: 38px 1fr; }
  .bvu-unit-meta { grid-column: 1 / -1; text-align: left; padding-top: 4px; }
}

/* === Business In Use — listen-and-choose dictation === */
.bvu-dict-section { display: grid; gap: 14px; }
.bvu-dict-list { display: grid; gap: 14px; }
.bvu-dict-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
}
.bvu-dict-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.bvu-dict-num { font-size: 12px; color: #64748b; min-width: 38px; }
.bvu-dict-play, .bvu-dict-slow {
  background: #0ea5e9; color: #fff; border: none;
  border-radius: 999px; padding: 8px 14px; font-size: 15px;
  cursor: pointer; font-weight: 600;
}
.bvu-dict-slow { background: #64748b; }
.bvu-dict-hint { font-size: 13px; color: #64748b; }
.bvu-dict-choices { display: grid; gap: 8px; }
.bvu-dict-choice {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
  transition: border-color .15s ease, background .15s ease;
}
.bvu-dict-choice:hover { border-color: #94a3b8; background: #f8fafc; }
.bvu-dict-choice.picked { border-color: #0ea5e9; background: #e0f2fe; font-weight: 600; }
.bvu-dict-item.locked .bvu-dict-choice { cursor: not-allowed; }
.bvu-dict-choice.is-correct {
  border-color: #16a34a; background: #f0fdf4; color: #166534; font-weight: 700;
}
.bvu-dict-choice.is-correct::after { content: "  ✓"; }
.bvu-dict-choice.is-wrong {
  border-color: #dc2626; background: #fef2f2; color: #991b1b; font-weight: 700;
}
.bvu-dict-choice.is-wrong::after { content: "  ✗"; }
.bvu-dict-reveal {
  margin-top: 10px; padding: 10px 12px;
  background: #f8fafc; border-radius: 10px; font-size: 14px;
}
.bvu-dict-word { font-size: 18px; margin: 0 0 4px; font-weight: 700; }
.bvu-dict-meaning { color: #0c4a6e; margin: 4px 0 6px; font-weight: 600; }
.bvu-dict-ex { font-size: 14px; color: #334155; margin: 4px 0; }
.bvu-dict-ex-zh { font-size: 13px; color: #64748b; margin: 0; }
.bvu-dict-score, .bvu-ex-total {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px;
  padding: 12px 16px; color: #0c4a6e; font-size: 15px; line-height: 1.6;
  margin: 8px 0;
}
.bvu-ex-total { background: #fef3c7; border-color: #fde68a; color: #854d0e; font-size: 16px; text-align: center; }

/* === Dictionary popup (tap a target word) === */
.bvu-target {
  background: linear-gradient(transparent 55%, #fef08a 55%);
  font-weight: 700;
  color: #0f172a;
  padding: 0 2px;
  border: none;
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
  transition: background .15s ease;
}
.bvu-target:hover { background: linear-gradient(transparent 0%, #fde047 0%); }
.bvu-dict-pop-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
  z-index: 200; display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}
@media (min-width: 720px) { .bvu-dict-pop-backdrop { align-items: center; } }
.bvu-dict-pop {
  background: #fff; border-radius: 18px; padding: 18px;
  max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.bvu-dict-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.bvu-dict-pop-title strong { font-size: 22px; }
.bvu-dict-pop-tools { display: flex; gap: 6px; }
.bvu-dict-pop-btn {
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 8px 12px; font-size: 16px; cursor: pointer; line-height: 1;
}
.bvu-dict-pop-btn:hover { background: #e2e8f0; }
.bvu-dict-pop-mean { font-size: 17px; font-weight: 700; color: #0c4a6e; margin: 6px 0; }
.bvu-dict-pop-ex { font-size: 15px; color: #334155; margin: 6px 0 2px; }
.bvu-dict-pop-ex-zh { font-size: 13px; color: #64748b; margin: 0 0 12px; }
.bvu-dict-pop-label { display: block; font-size: 14px; color: #475569; margin: 12px 0 6px; }
.bvu-dict-pop-ta {
  width: 100%; min-height: 80px; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px; font-size: 16px; line-height: 1.6; resize: vertical;
  font-family: inherit; background: #f8fafc;
}
.bvu-dict-pop-ta:focus { outline: none; border-color: #0ea5e9; background: #fff; box-shadow: 0 0 0 3px #e0f2fe; }
.bvu-dict-pop-actions { display: flex; gap: 10px; margin-top: 12px; justify-content: flex-end; }
.bvu-dict-pop-actions .bvu-btn-primary, .bvu-dict-pop-actions .bvu-btn-ghost { height: 40px; font-size: 15px; padding: 0 14px; }

/* === Interactive exercise inputs === */
.bvu-input {
  border: 1.5px solid #cbd5e1; border-radius: 8px;
  padding: 6px 10px; font-size: 15px; background: #fff;
  font-family: inherit; line-height: 1.4;
}
.bvu-input:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px #e0f2fe; }
.bvu-input:disabled { background: #f8fafc; color: #475569; }

.bvu-match-bank {
  background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; margin: 6px 0 12px;
}
.bvu-bank-label { color: #64748b; }
.bvu-bank-chip {
  display: inline-block; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 3px 8px; margin: 3px;
  font-size: 13px; color: #334155;
}
.bvu-match-rows, .bvu-gap-rows, .bvu-cat-rows, .bvu-tf-rows, .bvu-choose-rows, .bvu-write-rows {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 14px;
}
.bvu-match-row, .bvu-cat-row {
  display: grid; gap: 8px;
  border-bottom: 1px dashed #e2e8f0; padding-bottom: 12px;
}
.bvu-match-row:last-child, .bvu-cat-row:last-child { border-bottom: none; padding-bottom: 0; }
.bvu-match-q, .bvu-tf-q, .bvu-write-q { font-size: 15px; line-height: 1.55; margin: 0; }
.bvu-match-select, .bvu-cat-select { width: 100%; min-height: 40px; }
.bvu-cat-row { grid-template-columns: 1fr 140px auto; align-items: center; gap: 12px; }
.bvu-cat-term { font-weight: 600; font-size: 15px; }
.bvu-cat-hint { font-size: 13px; color: #475569; background: #f1f5f9; padding: 8px 10px; border-radius: 8px; margin: 0 0 12px; }

.bvu-gap-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed #f1f5f9; }
.bvu-gap-row:last-child { border-bottom: none; }
.bvu-gap-text { font-size: 15.5px; line-height: 1.85; }
.bvu-gap-input {
  display: inline-block;
  width: 110px;
  min-width: 70px;
  margin: 0 3px;
  padding: 4px 8px;
  font-size: 15px;
  border-bottom: 2px solid #0ea5e9;
  border-radius: 4px 4px 0 0;
  border-top: none; border-left: none; border-right: none;
  background: #f0f9ff;
}
.bvu-gap-input:focus { background: #fff; }
.bvu-gap-input.is-correct { background: #f0fdf4; border-color: #16a34a; color: #166534; font-weight: 700; }
.bvu-gap-input.is-wrong { background: #fef2f2; border-color: #dc2626; color: #991b1b; }

.bvu-tf-row, .bvu-choose-row { padding-bottom: 12px; border-bottom: 1px dashed #f1f5f9; }
.bvu-tf-row:last-child, .bvu-choose-row:last-child { border-bottom: none; }
.bvu-tf-opts, .bvu-choose-opts { display: grid; gap: 6px; margin-top: 8px; }
.bvu-radio {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 15px; line-height: 1.5; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff;
}
.bvu-radio:hover { border-color: #94a3b8; background: #f8fafc; }
.bvu-radio input { margin-top: 3px; }

.bvu-match-mark {
  font-size: 13px; font-weight: 700;
  display: inline-block;
  padding: 4px 10px; border-radius: 999px;
  background: transparent;
  min-height: 22px;
  transition: background-color .15s, color .15s;
}
.bvu-match-mark.is-picked   { background: #dbeafe; color: #1e40af; }
.bvu-match-mark.is-correct  { background: #dcfce7; color: #166534; }
.bvu-match-mark.is-wrong    { background: #fee2e2; color: #991b1b; }

/* 选中态——让 radio/select/input 答完即刻有清晰反馈 */
.bvu-radio.is-picked {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.bvu-match-row.is-picked,
.bvu-cat-row.is-picked,
.bvu-tf-row.is-picked,
.bvu-choose-row.is-picked,
.bvu-gap-row.is-picked {
  background: linear-gradient(180deg, rgba(37, 99, 235, .04), transparent);
  border-radius: 8px;
}
.bvu-match-row.is-picked select.bvu-input,
.bvu-cat-row.is-picked select.bvu-input {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.bvu-gap-row.is-picked .bvu-gap-input:not(.is-correct):not(.is-wrong) {
  background: #eff6ff;
  border-bottom-color: #2563eb;
}

.bvu-write-hint { font-size: 13px; color: #64748b; background: #f1f5f9; padding: 8px 10px; border-radius: 8px; margin: 0 0 10px; }
.bvu-write-ta {
  width: 100%; min-height: 60px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px; font-size: 15px; line-height: 1.55; resize: vertical;
  font-family: inherit; background: #f8fafc;
}
.bvu-write-ta:focus { outline: none; border-color: #0ea5e9; background: #fff; box-shadow: 0 0 0 3px #e0f2fe; }
.bvu-write-model { margin-top: 6px; font-size: 13px; color: #475569; }
.bvu-write-model summary { cursor: pointer; }

.bvu-ex-score { font-size: 14px; padding: 8px 12px; border-radius: 8px; background: #f0f9ff; border: 1px solid #bae6fd; color: #0c4a6e; margin: 10px 0 0; }

/* Mobile tuning for new components */
@media (max-width: 480px) {
  .bvu-cat-row { grid-template-columns: 1fr; }
  .bvu-gap-text { font-size: 16px; }
  .bvu-gap-input { width: 96px; font-size: 16px; }
  .bvu-dict-pop { padding: 16px; }
}