/* 视觉参考 kartu-kosakata：暖米纸底 + 苔绿 + 丁香棕 + 金，衬线标题配无衬线正文。 */

:root {
  --paper: #f2efe6;
  --card: #fbf9f2;
  --card-2: #f0ece0;
  --ink: #16211d;
  --ink-2: #4a4d42;
  --mute: #7b7768;
  --line: #e2ddce;
  --moss: #2f5d4f;
  --moss-soft: #e3ece7;
  --clove: #b4552d;
  --clove-soft: #f4e6dd;
  --gold: #c9a227;
  --shadow: 0 1px 2px rgba(22, 33, 29, .05), 0 10px 30px rgba(22, 33, 29, .06);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "PingFang SC", "Noto Sans SC",
    "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161b17;
    --card: #1e2420;
    --card-2: #262d27;
    --ink: #ece6d6;
    --ink-2: #b6b3a2;
    --mute: #8a8776;
    --line: #2e352d;
    --moss: #6fae98;
    --moss-soft: #1c2a24;
    --clove: #db8a60;
    --clove-soft: #2b211a;
    --gold: #d4b44b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .28);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; }

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }

:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

.stack { padding: 14px; max-width: 720px; margin: 0 auto; }

.crumb, .card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.crumb .back, .card-head .back, .card-head .play-all {
  font-size: 14px;
  color: var(--moss);
  padding: 6px 12px;
  background: var(--moss-soft);
  border-radius: 999px;
}

.crumb > span, .card-head > span:not(.back) {
  font-size: 15px;
  color: var(--mute);
  font-weight: 500;
}

/* 顶栏的「← 返回」不许折行。教材听力的标题比别处长（Simakan 1.1 早上问好：…），
   一挤就把返回键压成上下两行的「← 返 / 回」。 */
.card-head .back, .crumb .back { white-space: nowrap; }

.card-head .play-all { margin-left: auto; color: var(--clove); background: var(--clove-soft); }
/* 顶栏里若已有「全文」按钮把空间推开了，桌面键就不再抢 margin-left:auto */
.card-head .play-all ~ .home-key { margin-left: 0; }

.error { padding: 40px 16px; text-align: center; color: var(--clove); }

/* 试用横幅：status === 'trial' 且未过期时，mount() 在主界面顶部统一加这一条 */
.trial-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--moss-soft);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}

.trial-banner-text { flex: 1; min-width: 200px; }

.trial-banner-text a { color: var(--moss); font-weight: 600; }

.trial-banner-btn {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--clove);
  background: var(--clove-soft);
  padding: 6px 14px;
  border-radius: 999px;
}

/* 缺印尼语音色提示：安卓没装 Google TTS 印尼语数据包时，朗读是纯静音不报错 */
.voice-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--clove-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
}

.voice-hint-text { flex: 1 1 100%; font-weight: 600; }

/* 两种手机分开折叠：国行机没有 Google 套件，照着「去 Google 语音服务下载」
   那套做只会更懵，所以各给各的路子，默认都收起来不占地方。 */
.voice-hint-fix { flex: 1 1 100%; }

.voice-hint-fix > summary {
  cursor: pointer;
  padding: 5px 0;
  color: var(--clove);
  font-weight: 600;
  list-style: none;
}

.voice-hint-fix > summary::-webkit-details-marker { display: none; }
.voice-hint-fix > summary::before { content: '▸ '; }
.voice-hint-fix[open] > summary::before { content: '▾ '; }
.voice-hint-fix p { margin: 4px 0 8px; padding-left: 14px; color: var(--ink-2); }

.voice-hint-close {
  flex: none;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
}

/* 桌面键：挂在顶栏返回键的右边，跟着页面滚，不悬浮 */
.home-key {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--moss);
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}

.home-key:active { transform: scale(.96); }

.home-key-glyph { font-size: 15px; line-height: 1; }
.home-key-text { font-size: 13px; }

/* 激活成功后的鼓励页 */
.activated { text-align: center; }

.activated-burst { font-size: 60px; animation: pop .4s ease; }

@media (prefers-reduced-motion: reduce) { .activated-burst { animation: none; } }

.activated-line { color: var(--ink-2); font-size: 15px; margin: 6px 0 18px; }

.activated-cheer {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  color: var(--clove);
  margin: 0 0 6px;
}

.activated-sub { font-size: 13px; color: var(--mute); margin: 0 0 26px; }

.activated .next {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 650;
  color: #fff;
  background: var(--moss);
  border-radius: 14px;
}

@media (prefers-color-scheme: dark) { .activated .next { color: #10130f; } }

/* 首页 */
.home { max-width: 560px; margin: 0 auto; padding: 40px 18px 32px; }
.home-hero { text-align: center; margin-bottom: 34px; }
.hero-mark { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--clove); letter-spacing: .02em; }
.hero-title { font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: -.01em; margin: 2px 0 4px; text-wrap: balance; }
.hero-sub { margin: 0; color: var(--mute); font-size: 14px; letter-spacing: .04em; }
.home-cards { display: flex; flex-direction: column; gap: 14px; }

.home-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 20px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
}

.home-card:active { transform: scale(.985); }

.home-glyph {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--moss);
  background: var(--moss-soft);
  border-radius: 14px;
}

.home-card-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.home-card-title { font-size: 19px; font-weight: 650; }
.home-card-sub { font-size: 13px; color: var(--mute); }
.home-arrow { color: var(--gold); font-size: 20px; }

/* 分级页 */
.level-cards { display: flex; flex-direction: column; gap: 14px; }

.level-card {
  position: relative;
  text-align: left;
  padding: 22px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.level-card.soon { opacity: .82; }

.level-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--moss);
  background: var(--moss-soft);
}

.level-card.soon .level-badge { color: var(--mute); background: var(--card-2); }
.level-title { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.level-sub { font-size: 14px; color: var(--ink-2); }
.level-meta { font-size: 12px; color: var(--gold); margin-top: 6px; }

/* 词根包列表顶上的说明：跟「准备中」那条同一个外观，多一条行距，
   因为它比一句话长——里头还带一句「配合语法词缀篇一起看」的用法建议。 */
.soon-note, .root-note {
  margin: 0 2px 14px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--mute);
  background: var(--card-2);
  border-radius: 12px;
}

.root-note { line-height: 1.7; }

/* 听力转写的说话人写的是人名（Santi、Harnita），不是情境对话里的 A/B，
   塞不进那个 24px 的圆圈，改成句子上方的一行小字。 */
.listen-view .line { flex-direction: column; gap: 6px; position: relative; padding-right: 44px; }

.listen-view .who {
  width: auto;
  height: auto;
  display: inline-block;
  padding: 2px 9px;
  background: var(--moss-soft);
  border-radius: 999px;
  font-size: 11px;
}

.listen-view .speak-line { position: absolute; top: 10px; right: 10px; }

/* —— 教材听力 —— */
.listen-list { list-style: none; margin: 0 0 18px; padding: 0; }

.listen-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 8px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.listen-code {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--moss);
  background: var(--moss-soft);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.listen-name { font-size: 15px; font-weight: 600; }
.listen-meta { font-size: 12px; color: var(--mute); white-space: nowrap; }

.player {
  padding: 14px;
  background: var(--card-2);
  border-radius: 14px;
  margin-bottom: 12px;
}

.player .audio { width: 100%; }

.player-actions { display: flex; gap: 8px; margin-top: 10px; }

.player-actions button {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* 先听后看：这句引导语要显眼，它是这个模块的用法说明。 */
.listen-guide {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.7;
  background: var(--moss-soft);
  border-radius: 12px;
}

.reveal {
  width: 100%;
  padding: 13px;
  margin: 6px 0 14px;
  font-size: 15px;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* 包网格 */
.pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.pack-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 1px 12px;
  text-align: left;
  padding: 14px 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.pack-card[disabled] { opacity: .6; }
/* 编号贴在卡片左上角：背到第几包，一眼就找得回来 */
.pack-card { position: relative; }
.pack-no {
  position: absolute; top: 6px; left: 8px;
  font-family: var(--serif); font-size: 11px; font-weight: 700;
  color: var(--mute); letter-spacing: .5px;
}
.pack-icon { grid-row: 1 / 4; width: 40px; height: 40px; }
.pack-title { font-size: 16px; font-weight: 650; }
.pack-sub { font-size: 12px; color: var(--mute); }
.pack-count { font-size: 11px; color: var(--clove); }

/* 词卡 */
.card-view { padding: 14px; max-width: 620px; margin: 0 auto; }
.card-progress { font-size: 14px; color: var(--mute); }

.word-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
}

.card-face { width: 100%; }
.card-icon { width: 92px; height: 92px; }
.card-word { font-family: var(--serif); margin-top: 18px; font-size: 38px; font-weight: 700; letter-spacing: -.01em; }
.card-tap { margin-top: 14px; font-size: 12px; color: var(--mute); }

.back-word {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--clove);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.card-zh { font-size: 26px; font-weight: 650; }
.card-pos { display: inline-block; margin: 8px 0 16px; padding: 2px 12px; font-size: 12px; color: var(--moss); background: var(--moss-soft); border-radius: 999px; }
.card-example { font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.card-example-zh { font-size: 14px; color: var(--mute); margin-top: 4px; }

/* 词根卡背面的派生词表：这一块是词根背诵法的重点，
   所以给它一条竖线和独立底色，跟例句区分开。 */
.root-derived {
  margin-top: 16px;
  padding: 12px 14px;
  text-align: left;
  background: var(--moss-soft);
  border-left: 3px solid var(--moss);
  border-radius: 0 10px 10px 0;
}

.root-derived-head { font-size: 12px; color: var(--moss); margin-bottom: 8px; }
.root-derived-list { list-style: none; margin: 0; padding: 0; }

.root-derived-list li {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
}

.root-derived-list li::before { content: '·'; position: absolute; left: 2px; color: var(--moss); }

.card-actions { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; margin-top: 16px; }

.card-actions button {
  padding: 13px;
  font-size: 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.card-actions .speak { color: #fff; background: var(--moss); border-color: var(--moss); font-weight: 600; }
.card-actions .done { color: #fff; background: var(--clove); border-color: var(--clove); font-weight: 700; }
.card-actions button:disabled { opacity: .4; }

@media (prefers-color-scheme: dark) {
  .card-actions .speak, .card-actions .done { color: #10130f; }
}

/* 恭喜页 */
.congrats {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 6px;
}

.congrats-burst { font-size: 64px; animation: pop .4s ease; }

@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .congrats-burst { animation: none; } }

.congrats-title { font-family: var(--serif); font-size: 32px; margin: 4px 0 0; }
.congrats-pack { font-family: var(--serif); font-size: 18px; color: var(--clove); margin: 0; }
.congrats-line { color: var(--mute); font-size: 14px; margin: 4px 0 22px; }
.congrats-actions { display: flex; gap: 12px; }

.congrats-actions button { padding: 13px 20px; font-size: 15px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.congrats-actions .primary { color: #fff; background: var(--moss); border-color: var(--moss); font-weight: 650; }

@media (prefers-color-scheme: dark) { .congrats-actions .primary { color: #10130f; } }

/* 对话 */
.dialog-list, .grammar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.dialog-item, .grammar-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 16px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.dialog-zh { font-size: 17px; font-weight: 650; }
.dialog-id { flex: 1; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--mute); }
.dialog-count, .grammar-count { font-size: 12px; color: var(--clove); }

/* 听力页不走 pager（pager-page 自带左右留白），所以要自己留边距，
   否则卡片直接贴着屏幕两侧。 */
.dialog-view, .grammar-view, .listen-view { padding: 16px; max-width: 720px; margin: 0 auto; }

.lines { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.line { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.line.speaker-B { background: var(--moss-soft); }

.who { flex: none; width: 24px; height: 24px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--moss); background: var(--card); border-radius: 50%; }
.line-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.line-id { font-family: var(--serif); font-size: 16px; line-height: 1.45; }
.line-zh { font-size: 13px; color: var(--mute); }
.speak-line, .speak-option { flex: none; font-size: 16px; padding: 2px 4px; background: none; }

.section-title { margin: 22px 0 8px; font-size: 15px; color: var(--mute); }
.key-phrases, .dialog-vocab { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.key-phrases li, .dialog-vocab li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 13px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
.key-phrases b, .dialog-vocab b { font-family: var(--serif); }
.key-phrases span, .dialog-vocab span { color: var(--mute); font-size: 13px; }

/* 语法 */
/* 课程学习：单元列表 → 课列表 → 课文页 */
/* 课程按 CEFR 分级分组，未填内容的单元显示「准备中」 */
.level-head { display: flex; align-items: center; gap: 10px; margin: 20px 4px 10px; }
.level-head:first-of-type { margin-top: 6px; }
.level-tag {
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: #fff;
  background: var(--moss); padding: 3px 12px; border-radius: 999px;
}
@media (prefers-color-scheme: dark) { .level-tag { color: #10130f; } }
.level-meta { font-size: 12.5px; color: var(--mute); }
.unit-item.soon { opacity: .55; }

.unit-list, .lesson-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.unit-item, .lesson-item {
  width: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: left;
  padding: 16px; border-radius: 18px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.unit-item:active, .lesson-item:active { transform: scale(.99); }

.unit-number, .lesson-order {
  flex: none; font-family: var(--serif); font-size: 20px; font-weight: 700;
  color: var(--moss); line-height: 1.2; min-width: 26px;
}
.unit-body, .lesson-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.unit-title, .lesson-name { font-size: 17px; font-weight: 650; color: var(--ink); }
.unit-title-id { font-family: var(--serif); font-size: 13.5px; color: var(--clove); }
.unit-goal, .lesson-task { font-size: 13px; line-height: 1.6; color: var(--mute); }
.unit-count, .lesson-meta { flex: none; font-size: 12px; color: var(--clove); padding-top: 3px; }

/* 语法课列表：一行一课，只有课号和标题。加了课号之后，同一族的课
   （meN- 那 8 课全是 02x）在列表上是连着的一串，一眼看得出是一件事的几个面。 */
.lesson-list.compact { gap: 8px; }
.lesson-list.compact .lesson-item { align-items: center; gap: 12px; padding: 13px 15px; }
.lesson-code {
  flex: none; min-width: 40px;
  font-family: var(--serif); font-size: 15px; font-weight: 700;
  color: var(--moss); letter-spacing: .5px;
}
.lesson-list.compact .lesson-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.lesson-list.compact .lesson-meta { padding-top: 0; }

/* 记法页的补充说明：跟在分枝后面，是另一条独立规则不是最后一项的一部分 */
.mind-foot {
  margin: 16px 0 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.75;
  color: var(--ink-2); background: var(--card-2); border-radius: 10px;
}
/* 条目自带 ①②③ 时不套第二层圈，只留一个淡点 */
.mind-node.plain { border-color: var(--line); color: var(--mute); font-size: 13px; }

.unit-goal-full { font-size: 14px; line-height: 1.7; color: var(--ink-2); padding: 0 4px 4px; }

/* —— 左右翻页容器 —— 一屏一块，字号才放得开 */
.pager { display: flex; flex-direction: column; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

.pager-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; /* 翻到头别把整页往回拽 */
}
.pager-track::-webkit-scrollbar { display: none; }

.pager-page { flex: 0 0 100%; scroll-snap-align: start; padding: 0 12px 8px; }

.pager-page-inner {
  min-height: 62vh;
  padding: 18px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.pager-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: 19px; margin: 0 0 16px;
  color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.pager-icon { font-size: 20px; }

/* 翻页条吸在屏幕底部：内容长的时候不用滚到最底才够得着 */
/* 固定在屏幕底部，不是 sticky。
   sticky 的容器块是 .pager，而这一条正是 .pager 的最后一个子元素——容器块的底边
   跟它自己重合，等于没有可粘的行程：往下滑一段它就跟着内容走了。改成 fixed，
   同时给 .pager 留出等高的下边距，免得最后一条内容被压在条子底下。 */
.pager-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.pager-dot, .pager-step {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--mute); font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
.pager-dot.on { background: var(--moss); border-color: var(--moss); color: #fff; }
@media (prefers-color-scheme: dark) { .pager-dot.on { color: #10130f; } }
.pager-dot:active, .pager-step:active { transform: scale(.94); }
.pager-count { font-size: 15px; color: var(--ink-2); padding: 0 14px; }
.pager-count b { font-family: var(--serif); font-size: 18px; color: var(--moss); }
.dot-icon { line-height: 1; }

/* —— 课文页的四块 —— */
.course-view, .grammar-view { padding-bottom: 8px; }
.course-head-title, .grammar-head-title { flex: 1; min-width: 0; }

.word-chips { list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* 印尼语一行，中文另起一行。原本是左右并排，中文被挤成一列一个字，
   长一点的释义能撑出七八行高。 */
.word-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 2px 10px;
  cursor: pointer;
  padding: 12px 14px; border-radius: 14px; background: var(--moss-soft);
}
.word-chip:active { transform: scale(.98); }
.chip-id { font-family: var(--serif); font-size: 19px; color: var(--moss); font-weight: 650; }
.chip-zh { grid-column: 1; font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.chip-play { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 15px; opacity: .55; }

.scene-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.scene-where { flex: 1; font-size: 14px; color: var(--mute); }
.play-all {
  flex: none; font-size: 13px; color: var(--clove);
  background: var(--clove-soft); padding: 6px 12px; border-radius: 999px;
}

.scene-lines { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.scene-line { display: flex; gap: 10px; align-items: flex-start; }
.line-speaker {
  flex: none; font-size: 11.5px; color: var(--clove); background: var(--clove-soft);
  padding: 4px 9px; border-radius: 999px; margin-top: 3px; max-width: 88px;
}
.line-body { flex: 1; min-width: 0; }
.line-id {
  display: block; width: 100%; text-align: left; font-family: var(--serif);
  font-size: 18px; line-height: 1.55; color: var(--ink);
}
.line-id:active { color: var(--moss); }
.line-zh { font-size: 14px; color: var(--mute); margin-top: 4px; line-height: 1.6; }

/* —— 要点：一根竖脊 + 分枝，读起来像展开的思维导图 —— */
.mind-root {
  display: inline-block; padding: 9px 14px; border-radius: 999px;
  background: var(--moss); color: #fff; font-size: 14.5px; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .mind-root { color: #10130f; } }

.mind-branches { list-style: none; margin: 4px 0 0 15px; padding-left: 20px; border-left: 2px solid var(--line); }
.mind-branch { position: relative; padding: 16px 0 0; }
.mind-node {
  position: absolute; left: -31px; top: 16px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--moss);
  color: var(--moss); font-size: 12px; font-weight: 700;
}
.mind-leaf { padding-left: 2px; }
.point-title { font-size: 16px; font-weight: 650; color: var(--moss); margin-bottom: 5px; }
.point-body { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }

/* —— 小测 —— */
.quiz { padding: 14px 0; border-top: 1px solid var(--line); }
.quiz:first-of-type { border-top: none; padding-top: 0; }
.quiz-prompt { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.6; }
.quiz-context { font-size: 13px; color: var(--mute); margin-top: 5px; }
.quiz-choices { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.choice {
  width: 100%; text-align: left; padding: 13px 15px; border-radius: 14px;
  font-size: 15.5px; background: var(--card-2); border: 1px solid var(--line); color: var(--ink);
}
.choice.picked.right { background: var(--moss-soft); border-color: var(--moss); color: var(--moss); font-weight: 600; }
.choice.picked.wrong { background: var(--clove-soft); border-color: var(--clove); color: var(--clove); }
.quiz-why { font-size: 14px; line-height: 1.7; margin-top: 10px; }
.quiz-why.right { color: var(--moss); }
.quiz-why.wrong { color: var(--clove); }

/* 每一篇配一张手写的概念图：语法讲的是抽象的东西，没有实物可画 */
.grammar-mark { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 46px; }
.grammar-visual { width: 42px; height: 42px; display: block; }
.grammar-number { font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--mute); letter-spacing: .5px; }
.grammar-head-visual { width: 28px; height: 28px; flex: none; }
.grammar-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.grammar-title { font-size: 16px; font-weight: 650; }
.grammar-subtitle { font-size: 12px; color: var(--mute); }

/* 语法一课的正文。现在一课就是翻页里的一张卡，外框由 .pager-page-inner 提供，
   .lesson 那层多余的卡片壳就去掉了。字号整体放大一档——一屏只放一课，放得开。 */
.lesson-base { margin: 0 0 6px; font-family: var(--serif); font-size: 16.5px; color: var(--clove); }
.lesson-instruction { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.lesson-tip {
  margin: 16px 0 0; padding: 11px 13px; font-size: 14px; line-height: 1.75;
  color: var(--ink-2); background: var(--card-2); border-left: 3px solid var(--gold); border-radius: 6px;
}

.options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.option { padding: 14px; background: var(--card-2); border-radius: 14px; }
.option-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.option-label { padding: 3px 10px; font-size: 13px; font-weight: 600; color: #fff; background: var(--moss); border-radius: 999px; }
.option-arrow { color: var(--mute); font-size: 14px; }
.option-result { flex: 1; min-width: 0; font-family: var(--serif); font-size: 19px; font-weight: 650; }
.speak-option { flex: none; font-size: 15px; opacity: .6; }
.option-meaning { font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.option-example { font-family: var(--serif); font-size: 17px; line-height: 1.55; }
.option-translation { font-size: 14px; color: var(--mute); margin-top: 3px; line-height: 1.6; }
.option-note {
  margin-top: 9px; padding: 8px 11px; font-size: 13px; line-height: 1.7;
  color: var(--mute); background: var(--card); border-left: 3px solid var(--gold); border-radius: 4px;
}

/* 注释拆开后的三种块。书里那一整段挤在一起的注释，现在是：
   引文（对话、又例）各占一块，生词一行一个，最后才是零散说明。 */
.note-quote {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}

.note-quote:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.note-tag {
  flex: none;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--clove);
  background: var(--clove-soft);
  border-radius: 999px;
}

.note-quote-text { font-family: var(--serif); font-size: 14px; color: var(--ink); }

.note-vocab { list-style: none; margin: 8px 0 0; padding: 0; }

.note-vocab li {
  padding: 2px 0 2px 12px;
  position: relative;
  font-size: 13px;
}

.note-vocab li::before { content: '·'; position: absolute; left: 2px; }

.note-text { margin-bottom: 6px; }

@media (prefers-color-scheme: dark) { .option-label { color: #10130f; } }

/* 一课单独占一页时的用法块：例句是主角，字号最大，整块可点朗读 */
.option-solo .option-head { margin-bottom: 12px; }
.option-solo .option-meaning { font-size: 16px; margin-bottom: 14px; }
.option-solo .option-example {
  display: block; width: 100%; text-align: left;
  font-family: var(--serif); font-size: 21px; line-height: 1.6;
  color: var(--ink); padding: 14px; border-radius: 14px;
  background: var(--moss-soft); margin-bottom: 10px;
}
.option-solo .option-example:active { transform: scale(.99); }
.speak-mark { font-size: 15px; opacity: .6; }
.option-solo .option-translation { font-size: 15px; }
.option-solo .option-note { font-size: 13.5px; }

.overview-hint { margin: 18px 0 0; font-size: 14px; color: var(--clove); }

/* 进阶课在列表里挂个小标 */
.tag-adv {
  font-style: normal; font-size: 11px; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px;
  color: var(--clove); background: var(--clove-soft);
}

/* 解锁 */
.unlock { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.unlock-logo { font-size: 56px; }
.unlock h1 { font-family: var(--serif); margin: 0; font-size: 30px; }
.unlock-hint { margin: 0; color: var(--mute); font-size: 14px; }
.unlock-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; margin-top: 8px; }

.unlock-form input { padding: 14px 16px; font-size: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); outline: none; }
.unlock-form input:focus { border-color: var(--moss); }
.unlock-form button { padding: 14px; font-size: 16px; font-weight: 600; color: #fff; background: var(--moss); border-radius: 14px; }

@media (prefers-color-scheme: dark) { .unlock-form button { color: #10130f; } }

.unlock-form button:disabled { opacity: .6; }
.unlock-error { margin: 0; min-height: 20px; font-size: 14px; color: var(--clove); }

/* 账号：注册 / 登录 / 激活 */
.auth-form input { margin-bottom: 8px; }
.link-btn {
  margin-top: 12px; background: none; border: none; color: var(--moss);
  font-size: 14px; text-decoration: underline; cursor: pointer;
}
.code-box {
  margin: 16px 0; padding: 14px; font-family: var(--serif); font-size: 20px;
  letter-spacing: 1px; text-align: center; color: var(--ink);
  background: var(--moss-soft); border-radius: 12px; user-select: all;
}
.code-box.highlight { outline: 2px solid var(--clove); outline-offset: 2px; }
.copy-code { width: 100%; }

.home-version {
  margin: 26px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--mute);
  letter-spacing: .5px;
}

.attribution { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); font-size: 11px; color: var(--mute); text-align: center; }
.attribution a { color: var(--mute); }

@media (min-width: 640px) { .pack-grid { grid-template-columns: repeat(3, 1fr); } }

.dialog-situasi {
  margin: 0 0 12px; padding: 10px 13px; font-size: 14px; line-height: 1.55;
  color: var(--ink); background: var(--moss-soft); border-radius: 12px;
}
.key-phrases .ganti { flex-basis: 100%; font-size: 12.5px; color: var(--clove); }
.dialog-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dialog-tips li {
  padding: 10px 13px; font-size: 13.5px; line-height: 1.6; color: var(--mute);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.dialog-tips li::before { content: '· '; color: var(--clove); }

/* —— 使用手册 —— */
/* 铺满整屏的一层，不是弹窗：内容有三大段，弹窗那点高度装不下，
   滚起来也别扭。 */
.guide {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

.guide-sheet { max-width: 620px; margin: 0 auto; padding: 0 18px 40px; }

.guide-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.guide-head h1 { flex: 1; margin: 0; font-family: var(--serif); font-size: 22px; }

.guide-close {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 16px; color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* 开场白：作者自己的话，用衬线体和暖底跟后面的说明书部分分开。 */
.guide-hello {
  margin: 18px 0 24px;
  padding: 16px 18px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.85;
  background: var(--clove-soft);
  border-radius: 16px;
}

.guide-hello p { margin: 0 0 10px; }
.guide-hello p:last-child { margin-bottom: 0; }

.guide-block { margin-bottom: 26px; }

.guide-block h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 17.5px;
}

.guide-num {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 14px; color: var(--paper);
  background: var(--moss);
  border-radius: 50%;
}

.guide-block > p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }

.guide-how {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.8;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.guide-how p { margin: 0 0 8px; }
.guide-how p:last-child { margin-bottom: 0; }
.guide-sub { padding-left: 12px; color: var(--ink-2); }
.mono { font-family: var(--serif); }

/* 学习路线：一步一格，中间的箭头由 li.guide-arrow 单独占一行画出来。
   用箭头而不是 1234 的列表，是因为要表达的是「往下走」，不是「并列几条」。 */
.guide-path { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.step-no {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 14px; color: var(--paper);
  background: var(--clove);
  border-radius: 50%;
}

.step-body { display: flex; flex-direction: column; gap: 3px; }
.step-body b { font-size: 15px; }
.step-body span { font-size: 13.5px; color: var(--mute); line-height: 1.7; }

/* 环形图：四个模块转一圈。宽度跟着容器走，最大不超过一屏宽的大半，
   免得在平板上撑成一张巨图。 */
.cycle {
  display: block;
  width: 100%;
  max-width: 330px;
  margin: 4px auto 14px;
}

/* 选修那一格：虚线框跟实线的四步分开，一眼看得出「用不用都行」。 */
.guide-step.optional {
  margin-top: 10px;
  border-style: dashed;
  background: transparent;
}

.step-no.opt { background: var(--gold); color: #16211d; font-size: 12.5px; }

.guide-note {
  margin: 0;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--moss-soft);
  border-radius: 12px;
}

/* 后续计划：写着日期的一份打算，不是承诺。样式比正文淡一档。 */
.roadmap-date {
  margin: 0 0 10px !important;
  font-size: 12.5px !important;
  color: var(--mute) !important;
}

.guide-roadmap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.guide-roadmap li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 14px;
}

.road-no {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 3px;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--moss);
  background: var(--moss-soft);
  border-radius: 50%;
}

.guide-foot { margin-top: 28px; text-align: center; }

.guide-start {
  width: 100%;
  padding: 15px;
  font-size: 16px;
}

.guide-version { margin: 12px 0 0; font-size: 12px; color: var(--mute); }

/* 首页右下角的「?」。只在首页出现——手册讲的是整个 App 怎么用，
   在深层页面里挂一个入口既挡内容也没必要。 */
.guide-fab {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 30;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--moss);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow);
}

.guide-fab:active { transform: scale(.94); }