/* ===== 3-6年级译林英语学习系统 ===== */
:root {
  --bg: #fdf6e9;
  --card: #ffffff;
  --ink: #4a3f6b;
  /* 学习内容用的中文/音标/释义色：都按 4.5:1 以上对比度取，孩子长时间读不费眼；
     --ink-soft 只留给「第 3 个词」这类元信息，别再拿它写释义 */
  --ink-soft: #7a6f97;
  --ink-cn: #5d5280;
  --ipa: #1f6fbf;
  --accent-ink: #b45309;
  --primary: #4faaf7;
  --primary-deep: #2f89e0;
  --accent: #ff9f43;
  --good: #2ecc71;
  --bad: #ff7043;
  --hero-a: #4facfe;
  --hero-b: #b06ef0;
  --pop: #ffd93d;
  --pink: #ff7eb3;
  --radius: 22px;
  --shadow: 0 6px 18px rgba(120, 100, 200, 0.14);
  --press: 4px;
}

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

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  background: linear-gradient(120deg, var(--hero-a), var(--hero-b));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.topnav { display: flex; gap: 6px; flex-wrap: wrap; }
.topnav a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.15s, transform 0.12s;
}
.topnav a:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.topnav a.active { background: rgba(255, 255, 255, 0.32); font-weight: 700; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  border: none;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.32); transform: scale(1.08); }
.icon-btn:active { transform: scale(0.94); }
.rate-label { font-size: 0.85rem; color: rgba(255,255,255,0.9); }
.rate-label select {
  margin-left: 6px;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.85rem;
}

/* ---------- 布局 ---------- */
.view-container {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 18px 40px;
}
.footer {
  text-align: center;
  padding: 14px;
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.loading-hint { text-align: center; color: var(--ink-soft); padding: 60px 0; }
.error-box {
  background: #fdecea;
  color: var(--bad);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}

/* 页面导航条：大返回按钮 + 面包屑药丸，孩子一眼看懂、好按 */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  border-bottom: var(--press) solid rgba(0, 0, 0, 0.18);
  transition: transform 0.12s, background 0.15s;
  flex-shrink: 0;
}
.back-btn:hover { background: var(--primary-deep); transform: translateY(-2px); }
.back-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.crumb-trail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.breadcrumb .crumb {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 2px 8px rgba(120, 100, 200, 0.10);
  color: var(--primary-deep);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.12s, background 0.15s;
}
.breadcrumb a.crumb:hover { background: #eaf4ff; transform: translateY(-1px); }
.breadcrumb .crumb.here { background: #f2ecff; color: var(--ink); }
.breadcrumb .sep { margin: 0 2px; color: #cfc5e6; }

/* 悬浮回首页按钮：非首页常驻右下角 */
.float-home {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  color: #fff;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(120, 100, 200, 0.35);
  transition: transform 0.15s;
}
.float-home:hover { transform: scale(1.1) rotate(-6deg); }
.float-home:active { transform: scale(0.95); }

/* ---------- 按钮：胖乎乎 + 3D 按压 ---------- */
.btn {
  display: inline-block;
  border: none;
  border-radius: 16px;
  padding: 12px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  min-height: 46px;
  cursor: pointer;
  background: #f0ecff;
  color: var(--ink);
  border-bottom: var(--press) solid rgba(0, 0, 0, 0.18);
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
  text-decoration: none;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow); }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-deep); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-good { background: var(--good); color: #fff; }
.btn-bad { background: var(--bad); color: #fff; }
.btn-big { font-size: 1.2rem; padding: 15px 30px; border-radius: 18px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- 首页 ---------- */
.hero {
  background: linear-gradient(120deg, var(--hero-a), var(--hero-b));
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "🌈";
  position: absolute;
  right: 26px;
  top: 18px;
  font-size: 3rem;
  animation: float 3s ease-in-out infinite;
  pointer-events: none;
}
.hero h1 { font-size: 1.9rem; margin-bottom: 6px; }
.hero p { opacity: 0.9; font-size: 0.95rem; }
.hero .hero-stats { margin-top: 14px; display: flex; gap: 22px; flex-wrap: wrap; }
.hero .hero-stat b { font-size: 1.3rem; margin-right: 4px; }
.hero .hero-stat span { font-size: 0.85rem; opacity: 0.85; }

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.book-tile {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.12s;
  position: relative;
}
.book-tile:hover { transform: translateY(-4px) scale(1.03); }
.book-tile:hover .cover { animation: wiggle 0.5s; }
.book-tile .cover { font-size: 2.6rem; display: inline-block; }
.book-tile .b-name { font-size: 1.05rem; font-weight: 700; margin-top: 8px; }
.book-tile .b-sub { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }
.draft-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff3e0;
  color: #e67e22;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
}
.edition-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
/* 首页：同一册的新旧版分组 */
.book-cell { display: flex; flex-direction: column; gap: 6px; }
.book-cell .book-tile { flex: 1; }
.edition-switch {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: color 0.12s;
}
.edition-switch:hover { color: var(--brand, #e67e22); }

/* 官方录音按钮（段落标题内 / 单词表 / 工具栏） */
.official-btn {
  margin-left: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #2e7d32;
  background: #e8f5e9;
  border: 1px solid #b6e0ba;
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s;
}
.official-btn:hover { background: #d3efd6; }
.official-btn.playing { background: #ffe6e0; color: #c0392b; border-color: #f2b8ac; }

/* 官方资料（PDF）链接网格 */
.res-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.res-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.86rem;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 12px;
  padding: 8px 14px;
  transition: transform 0.1s;
}
.res-link:hover { transform: translateY(-2px); color: var(--primary, #6c63ff); }

.unit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.unit-item {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.12s;
}
.unit-item:hover { transform: translateY(-3px) scale(1.02); }
.unit-item .u-no { color: var(--primary); font-weight: 700; font-size: 0.85rem; }
.unit-item .u-en { font-size: 1.1rem; font-weight: 700; margin-top: 2px; }
.unit-item .u-cn { font-size: 0.92rem; color: var(--ink-cn); margin-top: 2px; }
.unit-item .u-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 8px; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.module-tile {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.12s;
}
.module-tile:hover { transform: translateY(-4px) scale(1.03); }
.module-tile:hover .m-icon { animation: wiggle 0.5s; }
.module-tile .m-icon { font-size: 2.4rem; display: inline-block; }
.module-tile .m-name { font-weight: 700; margin-top: 8px; }
.module-tile .m-desc { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }

.goals-box {
  background: #eef7ee;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.9rem;
}
.goals-box li { margin-left: 20px; margin-top: 4px; }

/* ---------- 单词学习 ---------- */
.word-stage { max-width: 560px; margin: 0 auto; }
.word-card {
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 44px 30px;
  text-align: center;
  cursor: pointer;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.word-card:active { transform: scale(0.98); }
.word-card.flipping { animation: card-flip 0.35s; }
.word-card .w-en { font-size: 2.6rem; font-weight: 800; }
.word-card .w-ipa { font-size: 1.05rem; color: var(--ipa); font-family: "Segoe UI", sans-serif; }
.word-card .w-cn { font-size: 1.3rem; color: var(--accent-ink); font-weight: 600; min-height: 1.6em; }
.word-card .w-cn.masked { color: transparent; text-shadow: 0 0 14px rgba(0,0,0,0.35); }
.word-card .flip-hint { font-size: 0.75rem; color: var(--ink-soft); }
.card-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.progress-text { text-align: center; color: var(--ink-soft); margin: 12px 0; font-size: 0.9rem; }

.letters-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.letter-chip {
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--primary-deep);
}
.letter-chip:hover { background: #eef2fb; }

.song-card {
  background: #fff8e7;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 12px;
}
.song-card .s-title { font-weight: 700; margin-bottom: 6px; }
.song-card .s-lyrics { white-space: pre-line; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- 课文点读 ---------- */
.reading-head {
  background: linear-gradient(120deg, var(--hero-a), var(--hero-b));
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 24px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.reading-head .rh-unit { font-size: 0.85rem; opacity: 0.85; letter-spacing: 1px; }
.reading-head .rh-title { font-size: 1.5rem; font-weight: 800; margin-top: 2px; }
.reading-head .rh-cn { font-size: 0.95rem; opacity: 0.9; margin-top: 2px; }

.reading-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
  position: sticky;
  top: 58px;
  z-index: 6;
  background: var(--bg);
  padding: 8px 0;
}
.reading-toolbar .rt-sep { width: 1px; height: 22px; background: #d8deea; margin: 0 4px; }
.reading-tip {
  margin: -8px 0 16px;
  padding: 9px 13px;
  border-radius: 12px;
  background: #fff8dc;
  color: #86641b;
  font-size: 0.9rem;
  line-height: 1.5;
}
.rt-toggle { position: relative; }
.rt-toggle.on { background: var(--primary); color: #fff; }
.rt-toggle.on:hover { background: var(--primary-deep); }

.text-block {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.text-block h3 {
  margin: 4px 6px 10px; font-size: 1.05rem; color: var(--primary-deep);
  border-bottom: 2px solid #eef1f7; padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tb-title { min-width: 0; }
.tb-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.block-toggle {
  min-height: 32px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: #f4f6fa;
  border: 1px solid #d9e1ef;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.block-toggle:hover { background: #e9eef8; }
.text-block.collapsed .sentence { display: none; }
.text-block.collapsed h3 { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.official-player {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef8ef;
  border: 1px solid #c8e4cc;
  flex-wrap: wrap;
}
.official-player.playing { background: #fff0ec; border-color: #f2b8ac; }
.official-play {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
.official-player.playing .official-play { background: #d95c4f; }
.official-progress {
  width: 180px;
  accent-color: var(--primary);
  flex: 1 1 180px;
  min-width: 140px;
}
.official-time, .official-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sentence {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 2px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  border-left: 4px solid transparent;
}
.sentence:hover { background: #f4f7ff; }
/* 连读时靠这一条跟读，所以当前句要一眼能找到 */
.sentence.active {
  background: #e6eeff;
  border-left-color: var(--primary);
  box-shadow: 0 2px 10px rgba(91, 141, 239, 0.18);
}
.sentence .sent-play { font-size: 0.9rem; opacity: 0.45; margin-top: 4px; flex-shrink: 0; }
.sentence:hover .sent-play, .sentence.active .sent-play { opacity: 1; }
.sent-body { flex: 1; }
.sent-en { font-size: var(--read-en, 1.2rem); font-weight: 600; line-height: 2.15; }
.sent-cn {
  font-size: var(--read-cn, 1rem);
  color: var(--ink-cn);
  margin-top: 5px;
  padding-left: 9px;
  border-left: 3px solid #e2dcf1;
  line-height: 1.55;
}
.sentence.active .sent-cn { border-left-color: var(--primary); }
/* 字号档位：低年级看大字，高年级看得多 —— 英文与中文一起放大 */
#r-texts.rsize-s { --read-en: 1rem; --read-cn: .85rem; }
#r-texts.rsize-m { --read-en: 1.15rem; --read-cn: .92rem; }
#r-texts.rsize-l { --read-en: 1.4rem; --read-cn: 1.08rem; }

/* 逐词 + 音标 ruby */
.rw {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border-radius: 6px;
  padding: 0 2px;
  cursor: pointer;
  vertical-align: bottom;
}
.rw:hover { background: #dfe8ff; }
.rw-ipa {
  font-size: 0.82em;
  color: var(--ipa);
  font-family: "Segoe UI", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  height: 1.3em;
}
.rw-en { line-height: 1.25; }
/* 音标关：隐藏 ruby，句子回到单行 */
.ipa-off .rw { display: inline; padding: 0; }
.ipa-off .rw-ipa { display: none; }
.ipa-off .sent-en { line-height: 1.6; }
/* 中文关 */
.cn-off .sent-cn { display: none; }
/* 背诵：遮挡英文，点句显示 */
.recite .sent-en { filter: blur(6px); user-select: none; }
.recite .sentence.revealed .sent-en { filter: none; }
.grammar-block { background: #f3f9f4; }

/* ---------- 练习 / 测验 ---------- */
.quiz-box {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  max-width: 640px;
  margin: 0 auto;
}
.quiz-meta { color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 12px; display: flex; justify-content: space-between; }
.q-prompt { font-size: 1.4rem; font-weight: 700; margin: 10px 0 20px; text-align: center; }
.q-prompt .btn { margin-left: 10px; }
.q-options { display: grid; gap: 12px; }
.q-opt {
  border: 3px solid #e8e2f5;
  border-radius: 16px;
  background: #fbfaff;
  padding: 16px 18px;
  font-size: 1.15rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
  touch-action: manipulation;
}
.q-opt:hover { border-color: var(--primary); transform: translateY(-1px); }
.q-opt:active { transform: scale(0.98); }
.q-opt.correct { border-color: var(--good); background: #eafaf1; animation: pop-good 0.4s; }
.q-opt.wrong { border-color: var(--bad); background: #fff0ec; animation: shake-soft 0.4s; }
.q-opt:disabled { cursor: default; opacity: 0.85; }

.spell-area { text-align: center; }
.spell-hint { font-family: monospace; font-size: 1.3rem; letter-spacing: 2px; color: var(--ink-soft); margin-bottom: 14px; }
.spell-input {
  font-size: 1.3rem;
  padding: 12px 16px;
  min-height: 52px;
  border: 3px solid #e8e2f5;
  border-radius: 16px;
  width: 80%;
  max-width: 360px;
  text-align: center;
  font-family: inherit;
}
.spell-input:focus { outline: none; border-color: var(--primary); }

.token-area { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; min-height: 46px; }
.token-chip {
  background: #eef2fb;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.token-chip:hover { border-color: var(--primary); }
.token-chip:disabled { opacity: 0.35; cursor: default; }
.answer-line {
  min-height: 48px;
  border-bottom: 2px dashed #cdd6e6;
  margin: 0 auto 6px;
  max-width: 540px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 6px;
}
.answer-line .token-chip { background: #e3ecff; }

.quiz-feedback { text-align: center; font-size: 1.3rem; margin-top: 16px; min-height: 1.6em; font-weight: 700; }
.quiz-feedback.ok { color: var(--good); }
.quiz-feedback.no { color: var(--bad); }
.quiz-actions { text-align: center; margin-top: 18px; display: flex; gap: 12px; justify-content: center; }

.quiz-summary { text-align: center; padding: 30px 10px; }
.score-big { font-size: 3.4rem; font-weight: 800; color: var(--primary); margin: 12px 0; animation: bounce-in 0.6s; }
.summary-detail { color: var(--ink-soft); margin-bottom: 20px; }
.type-picker { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 18px 0; }

/* ---------- 复习 ---------- */
.review-card {
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 40px 28px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.review-card .r-en { font-size: 2rem; font-weight: 800; }
.review-card .r-meta { color: var(--ink-soft); font-size: 0.82rem; margin-top: 8px; }
.review-card .r-answer { margin-top: 14px; font-size: 1.2rem; color: var(--accent-ink); font-weight: 600; }
.grade-btns { display: flex; gap: 14px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.empty-box {
  text-align: center;
  color: var(--ink-soft);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 50px 20px;
}
.empty-box .big { font-size: 2.6rem; margin-bottom: 10px; }

/* ---------- 错题本 ---------- */
.wrong-group { margin-bottom: 22px; }
.wrong-group h3 { font-size: 1rem; margin-bottom: 10px; color: var(--primary-deep); }
.wrong-item {
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.wrong-item .w-word { font-weight: 700; font-size: 1.05rem; }
.wrong-item .w-cn { color: var(--ink-cn); }
.wrong-item .w-tag { font-size: 0.72rem; background: #eef2fb; color: var(--primary-deep); border-radius: 999px; padding: 2px 8px; }
.wrong-item .spacer { flex: 1; }

/* ---------- 进度 ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  text-align: center;
}
.stat-card .v { font-size: 1.8rem; font-weight: 800; color: var(--primary); }
.stat-card .k { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }

.book-progress { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; margin-bottom: 20px; }
.bp-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.bp-row .bp-name { width: 110px; font-size: 0.9rem; }
.bp-row .bar { flex: 1; height: 14px; background: #edf1f8; border-radius: 999px; overflow: hidden; }
.bp-row .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--hero-a), var(--hero-b)); border-radius: 999px; }
.bp-row .bp-num { width: 90px; text-align: right; font-size: 0.82rem; color: var(--ink-soft); }

.test-history { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; overflow-x: auto; }
.test-history table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.test-history th, .test-history td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eef1f7; }
.test-history th { color: var(--ink-soft); font-weight: 600; }

/* ---------- 范围选择器（测验/复习多选） ---------- */
.scope-box { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.scope-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.scope-count { color: var(--ink-soft); font-size: 0.9rem; margin-left: auto; }
.scope-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.scope-book { border: 1px solid #eef1f7; border-radius: 12px; padding: 10px 12px; }
.scope-book-head { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; margin-bottom: 6px; }
.scope-units { display: flex; flex-direction: column; gap: 4px; padding-left: 4px; }
.scope-unit { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; padding: 3px 4px; border-radius: 6px; }
.scope-unit:hover { background: #f0f4ff; }
.scope-unit input, .scope-book-head input { width: 22px; height: 22px; cursor: pointer; accent-color: var(--primary); }
.scope-actions { margin-top: 16px; text-align: center; }

/* ---------- 自然拼读模块 ---------- */
.ph-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ph-cat {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 18px; text-decoration: none; color: var(--ink); text-align: center; transition: transform 0.12s;
}
.ph-cat:hover { transform: translateY(-3px); }
.ph-cat .m-icon { font-size: 2rem; }
.ph-cat .ph-cat-name { font-weight: 700; margin-top: 8px; }
.ph-cat .ph-cat-sub { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.ph-pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ph-pat-tile {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; text-align: center; cursor: pointer; transition: transform 0.1s;
}
.ph-pat-tile:hover { transform: translateY(-2px); }
.ph-pat-tile .ph-pat { font-size: 1.6rem; font-weight: 800; color: var(--primary-deep); }
.ph-pat-tile .ph-ipa { font-size: 0.9rem; color: var(--primary); font-family: "Segoe UI", sans-serif; }
.ph-detail { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.ph-detail .ph-big { font-size: 3rem; font-weight: 800; color: var(--primary-deep); text-align: center; }
.ph-detail .ph-big-ipa { text-align: center; font-size: 1.2rem; color: var(--primary); margin-bottom: 6px; }
.ph-note { background: #eef7ee; border-radius: 12px; padding: 12px 16px; margin: 14px 0; font-size: 0.95rem; }
.ph-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ph-word {
  border: none; background: #f7f9fd; border-radius: 10px; padding: 12px; cursor: pointer; text-align: center; transition: background 0.12s;
}
.ph-word:hover { background: #eef4ff; }
.ph-word .pw-en { font-weight: 700; font-size: 1.1rem; }
.ph-word .pw-en b { color: var(--accent); }
.ph-word .pw-cn { font-size: 0.82rem; color: var(--ink-soft); }
.ph-word .pw-decode { font-size: 0.72rem; color: var(--primary); font-family: monospace; margin-top: 3px; }

/* ---------- 单元单词表（音标/释义/拼读/例句） ---------- */
.uw-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px; margin-bottom: 12px; border-radius: 18px;
  background: linear-gradient(135deg, #edf3ff, #f8fbff); border: 1px solid #dbe7fb;
}
.uw-hero h1 { margin: 4px 0; color: var(--primary-deep); font-size: 1.45rem; }
.uw-hero p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.uw-kicker { color: var(--primary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.uw-official { min-width: min(100%, 360px); }
.uw-official .official-player { margin: 0; }
.uw-help { margin: 0 2px 16px; color: var(--ink-soft); font-size: 0.88rem; }
.uw-loading { text-align: center; color: var(--ink-soft); padding: 20px; }
.uw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.uw-card {
  position: relative; background: var(--card); border: 1px solid #e4eaf4; border-radius: 16px;
  box-shadow: 0 5px 16px rgba(41, 74, 125, 0.08); padding: 18px; min-width: 0;
}
.uw-card:hover { border-color: #bed0f5; box-shadow: 0 8px 22px rgba(41, 74, 125, 0.13); }
.uw-order { position: absolute; right: 14px; top: 12px; color: #a6b6d2; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; }
.uw-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.uw-word {
  border: none; background: #eef2fb; color: var(--primary-deep); border-radius: 11px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: background 0.12s; font-family: inherit; text-align: left; max-width: calc(100% - 34px);
}
.uw-word:hover { background: #e3ecff; }
.uw-word .uw-en { font-size: 1.25rem; font-weight: 800; }
.uw-word .uw-ipa { font-size: 0.9rem; color: var(--ipa); font-family: "Segoe UI", sans-serif; }
.uw-word .uw-play { font-size: 0.85rem; }
.uw-cn { margin-top: 10px; font-size: 1.04rem; color: var(--accent-ink); font-weight: 650; }
.uw-label {
  display: inline-block;
  font-size: 0.72rem;
  background: #eaf1ff;
  color: var(--primary-deep);
  border-radius: 6px;
  padding: 2px 8px;
  margin-right: 8px;
  vertical-align: middle;
}
.uw-phonics { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; }
.uw-ph { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: "Segoe UI", monospace; font-size: 0.86rem; color: var(--ink); }
.uw-ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 音节内的色块贴在一起，音节之间用间隔点分开：一个音节 = 一口气读出来的部分 */
.uw-ph-syll { display: inline-flex; flex-wrap: nowrap; gap: 2px; }
.uw-ph-sep { color: var(--ink-soft); font-style: normal; font-weight: 700; padding: 0 1px; }
.uw-ph-divider { width: 1px; height: 22px; background: #cbd6e8; }
.uw-ph-part { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 7px; border-radius: 7px; border: 1px solid transparent; white-space: nowrap; }
.uw-ph-part.tone-0 { color: #2563a8; background: #eaf3ff; border-color: #c9e0fb; }
.uw-ph-part.tone-1 { color: #7a4c15; background: #fff3d7; border-color: #f3dcaa; }
.uw-ph-part.tone-2 { color: #28724b; background: #e8f8ed; border-color: #bfe7cb; }
.uw-ph-part.tone-3 { color: #7d4c9f; background: #f5ecff; border-color: #dfc9f3; }
.uw-sight { color: var(--ink-soft); font-size: 0.9rem; }
.uw-ex { margin-top: 14px; display: flex; gap: 7px; }
.uw-ex-list { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.uw-ex-item {
  display: flex;
  align-items: flex-start; gap: 8px; cursor: pointer; text-align: left; font: inherit; color: inherit;
  width: 100%; background: #f7f9fd; border: 0; border-radius: 8px; padding: 8px 12px; transition: background 0.12s;
}
.uw-ex-item:hover { background: #eef4ff; }
.uw-ex-play { font-size: 0.9rem; flex-shrink: 0; }
.uw-ex-text { flex: 1; }
.uw-ex-en { display: block; font-size: 0.92rem; line-height: 1.35; font-weight: 600; }
.uw-ex-cn { display: block; font-size: 0.8rem; line-height: 1.35; color: var(--ink-soft); }
.uw-ex-src { font-size: 0.72rem; color: var(--primary-deep); background: #eaf1ff; border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }

@media (max-width: 640px) {
  .uw-hero { align-items: stretch; flex-direction: column; padding: 17px; }
  .uw-official { min-width: 0; }
  .uw-grid { grid-template-columns: 1fr; }
  .uw-official .official-progress { min-width: 110px; }
}

/* ---------- 电子课本 ---------- */
.tb-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tb-indicator { color: var(--ink-soft); font-size: 0.9rem; }
.tb-hint { color: var(--ink-soft); font-size: 0.78rem; }
.tb-stage {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  text-align: center;
  overflow: auto;
}
.tb-img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.15s;
}
.tb-img.zoomed { max-height: none; width: 100%; cursor: zoom-out; }

/* 舞台内悬浮翻页按钮（常驻不遮挡，鼠标悬停时更明显） */
.tb-fs-prev, .tb-fs-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(20, 24, 40, 0.28);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-stage:hover .tb-fs-prev,
.tb-stage:hover .tb-fs-next,
.tb-stage.tb-fullscreen .tb-fs-prev,
.tb-stage.tb-fullscreen .tb-fs-next { opacity: 1; }
.tb-fs-prev:hover, .tb-fs-next:hover { background: rgba(20, 24, 40, 0.55); }
.tb-fs-prev { left: 14px; }
.tb-fs-next { right: 14px; }
.tb-fs-ind {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 24, 40, 0.55);
  color: #fff;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.tb-stage.tb-fullscreen .tb-fs-ind { opacity: 1; }

/* 原生全屏（Fullscreen API）：撑满屏幕、图片按比例居中放大 */
.tb-stage:fullscreen,
.tb-stage.tb-immersive {
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #10131f;
  padding: 0;
}
.tb-stage.tb-immersive {
  position: fixed;
  inset: 0;
  z-index: 999;
}
.tb-stage:fullscreen .tb-img,
.tb-stage.tb-immersive .tb-img {
  max-height: 96vh;
  max-width: 96vw;
  cursor: default;
}
.tb-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px;
  margin-top: 4px;
}
.tb-thumb {
  height: 92px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.tb-thumb.active { border-color: var(--primary); }
.tb-thumb:hover { border-color: var(--accent); }

/* ---------- 单词表 ---------- */
.wordlist-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  position: sticky;
  top: 60px;
  background: var(--bg);
  padding: 8px 0;
  z-index: 5;
}
.wl-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--primary-deep);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
}
.wl-jump:hover { background: var(--primary); color: #fff; }
.wordlist-group { margin-bottom: 20px; }
.wl-letter {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  border-bottom: 2px solid #e3e8f2;
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.wl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.wl-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--card);
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s;
}
.wl-item:hover { transform: translateY(-1px); background: #f0f4ff; }
.wl-item .wl-en { font-weight: 700; }
.wl-item .wl-ipa { font-size: 0.82rem; color: var(--primary); font-family: "Segoe UI", sans-serif; }
.wl-item .wl-cn { color: var(--ink-soft); font-size: 0.9rem; flex: 1; }
.wl-item .wl-unit { color: var(--accent); font-size: 0.82rem; font-weight: 700; }

/* ===== 儿童化增强：动画 / 庆祝层 / 响应式 ===== */

/* 视图入场动画（所有页面自动生效） */
.view-container > * { animation: fade-up 0.35s both; }

/* --- 关键帧 --- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes pop-good {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes shake-soft {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}
@keyframes bounce-in {
  0% { opacity: 0; transform: scale(0.3); }
  55% { opacity: 1; transform: scale(1.15); }
  75% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  50% { transform: rotate(8deg); }
  75% { transform: rotate(-5deg); }
}
@keyframes card-flip {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(0.08); }
  100% { transform: scaleX(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes cf-fall {
  0% { transform: translateY(-4vh) rotate(0deg); opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(105vh) rotate(560deg); opacity: 0; }
}
@keyframes praise-rise {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -8px) scale(1.08); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}
@keyframes judge-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  60% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* --- 庆祝层（由 celebrate.js 挂到 body） --- */
.cf-piece {
  position: fixed;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  z-index: 999;
  pointer-events: none;
  will-change: transform;
  animation: cf-fall 1.8s ease-in both;
}
.praise-bubble {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  background: linear-gradient(120deg, var(--pop), var(--accent));
  color: #7a4a00;
  font-size: 1.35rem;
  font-weight: 800;
  padding: 10px 24px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(255, 159, 67, 0.4);
  white-space: nowrap;
  animation: praise-rise 1.6s ease-out both;
}
.judge-mark {
  position: fixed;
  left: 50%;
  top: 45%;
  z-index: 998;
  pointer-events: none;
  font-size: 6rem;
  font-weight: 800;
  animation: judge-pop 0.7s ease-out both;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
.judge-mark.ok { color: var(--good); }
.judge-mark.no { color: var(--bad); }
.star-row { display: flex; justify-content: center; gap: 8px; font-size: 2.3rem; margin: 8px 0 4px; }
.star-row .star { display: inline-block; animation: bounce-in 0.5s both; }
.star-row .star:not(.on) { opacity: 0.35; filter: grayscale(1); }

/* --- 背单词：完整计划视图 --- */
.plan-day {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  padding: 0;
  overflow: hidden;
}
.plan-day summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 44px;
}
.plan-day summary::-webkit-details-marker { display: none; }
.plan-day summary:hover { background: #f6f3ff; }
.plan-day.done summary { color: var(--ink-soft); }
.plan-day.current { border: 2px solid var(--primary); }
.pd-status { font-size: 1.1rem; }
.pd-tag {
  font-size: 0.72rem;
  background: #eafaf1;
  color: var(--good);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
}
.pd-tag.pd-now { background: #eaf4ff; color: var(--primary-deep); }
.pd-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 14px;
}
.plan-word {
  border: none;
  background: #f4f1fd;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s, transform 0.1s;
  min-height: 52px;
}
.plan-word:hover { background: #e9e3fb; transform: translateY(-1px); }
.plan-word .pw-en2 { display: block; font-weight: 700; font-size: 1.2rem; }
.plan-word .pw-cn2 { display: block; font-size: 1rem; color: var(--ink-soft); margin-top: 2px; }

/* --- 减少动态效果偏好 --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- 平板（iPad） --- */
@media (max-width: 1024px) {
  .btn { min-height: 48px; }
  .q-opt { padding: 18px; }
  .topnav a { padding: 10px 16px; }
}

/* --- 手机 --- */
@media (max-width: 640px) {
  .word-card .w-en { font-size: 1.9rem; }
  .q-prompt { font-size: 1.2rem; }
  .topbar { padding: 8px 10px; gap: 8px; }
  .topnav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { white-space: nowrap; }
  .rate-label { display: none; }
  .card-nav .btn { flex: 1; min-width: 120px; }
  .q-options { gap: 14px; }
  .hero::after { font-size: 2.2rem; right: 14px; top: 12px; }
  .float-home { width: 54px; height: 54px; font-size: 1.5rem; right: 14px; bottom: 14px; }
  .back-btn { min-height: 42px; padding: 6px 16px; }
}

/* ===== 清爽学习助手：全站界面系统 ===== */
:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-soft: #f1f5ff;
  --line: #e3eaf6;
  --ink: #263653;
  --ink-soft: #71819c;
  --primary: #3b82f6;
  --primary-deep: #2563eb;
  --accent: #f59e0b;
  --good: #22a06b;
  --bad: #e85d65;
  --hero-a: #3b82f6;
  --hero-b: #8b5cf6;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 24px rgba(36, 57, 94, 0.08);
  --shadow-hover: 0 14px 30px rgba(36, 57, 94, 0.14);
  --press: 3px;
}

body { background: var(--bg); line-height: 1.5; }
a, button, select, input { -webkit-tap-highlight-color: transparent; }
:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.42) !important;
  outline-offset: 3px;
}
.view-container { max-width: 1120px; padding: 28px 22px 52px; }
.footer { color: var(--ink-soft); border-top: 1px solid var(--line); background: rgba(255,255,255,.6); }
.loading-hint, .empty-box, .error-box { box-shadow: var(--shadow); border: 1px solid var(--line); }
.empty-box, .error-box { background: var(--surface); }

/* 顶栏：品牌与工具保持稳定，导航独立成一行 */
.topbar {
  display: block;
  padding: 0;
  background: linear-gradient(105deg, #347fe9, #865ce7);
  box-shadow: 0 5px 18px rgba(52, 96, 180, .22);
}
.topbar-main { display: flex; align-items: center; justify-content: space-between; max-width: 1120px; min-height: 58px; padding: 9px 22px; margin: 0 auto; }
.brand { display: inline-flex; align-items: baseline; gap: 7px; font-size: 1.12rem; letter-spacing: .01em; }
.brand span { font-weight: 800; }
.brand small { font-size: .72rem; font-weight: 600; opacity: .78; }
.topbar-right { margin-left: 0; }
.icon-btn { width: 36px; height: 36px; background: rgba(255,255,255,.16); }
.topnav { max-width: 1120px; margin: 0 auto; padding: 0 22px 9px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { padding: 7px 13px; font-size: .91rem; white-space: nowrap; border: 1px solid transparent; }
.topnav a.active { background: #fff; color: var(--primary-deep); box-shadow: 0 3px 9px rgba(39, 61, 130, .18); }

/* 通用内容组件 */
.btn { min-height: 44px; padding: 10px 18px; border-radius: var(--radius-sm); box-shadow: none; border-bottom-width: 2px; font-size: .98rem; }
.btn:hover { box-shadow: 0 6px 14px rgba(36, 57, 94, .14); transform: translateY(-1px); }
.btn-big { min-height: 50px; padding: 12px 22px; font-size: 1.05rem; }
.section-title { color: var(--ink); margin: 28px 0 14px; font-size: 1.16rem; }
.section-title-spread { justify-content: space-between; }
.section-title-spread small { color: var(--ink-soft); font-size: .82rem; font-weight: 500; }
.breadcrumb { margin-bottom: 20px; gap: 10px; }
.breadcrumb .crumb { min-height: 32px; padding: 4px 11px; border: 1px solid var(--line); box-shadow: none; }
.breadcrumb .crumb.here { background: #eef3ff; color: var(--primary-deep); }
.back-btn { min-height: 40px; padding: 7px 16px; box-shadow: 0 5px 12px rgba(37,99,235,.24); }
.float-home { width: 52px; height: 52px; right: 20px; bottom: 20px; font-size: 1.4rem; box-shadow: 0 10px 22px rgba(63, 98, 180, .3); }
.goals-box, .reading-tip, .ph-note { border: 1px solid #dbeadf; background: #f0faf4; border-radius: var(--radius-sm); }
.reading-toolbar, .tb-toolbar { gap: 9px; padding: 10px 0; }

/* 首页与入口 */
.hero { border-radius: 24px; padding: 30px 32px; box-shadow: 0 12px 30px rgba(66, 89, 184, .2); }
.hero::before { content: ''; position: absolute; width: 190px; height: 190px; right: -50px; bottom: -130px; border: 28px solid rgba(255,255,255,.1); border-radius: 50%; }
.hero h1 { position: relative; font-size: clamp(1.55rem, 3vw, 2rem); letter-spacing: -.02em; }
.hero p { position: relative; max-width: 620px; }
.hero-kicker { position: relative; display: inline-block; margin-bottom: 8px; color: rgba(255,255,255,.84); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero .hero-stats { position: relative; gap: 0; margin-top: 20px; }
.hero-stat { min-width: 92px; padding-right: 18px; margin-right: 18px; border-right: 1px solid rgba(255,255,255,.25); }
.hero-stat:last-child { border-right: 0; }
.hero .hero-stat b { display: block; font-size: 1.45rem; line-height: 1.1; }
.today-focus { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-top: 18px; border: 1px solid #dce8ff; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.today-focus-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; background: #e8f0ff; font-size: 1.35rem; }
.today-focus-copy { min-width: 0; flex: 1; }
.today-focus-copy span { display: block; color: var(--primary-deep); font-size: .74rem; font-weight: 800; letter-spacing: .08em; }
.today-focus-copy strong { display: block; margin-top: 1px; font-size: 1.04rem; }
.today-focus-copy p { margin-top: 1px; color: var(--ink-soft); font-size: .84rem; }
.subtle-action { display: inline-block; margin: 10px 2px 0; color: var(--primary-deep); font-size: .88rem; font-weight: 700; text-decoration: none; }
.book-grid { gap: 16px; }
.book-tile, .module-tile, .unit-item, .stat-card, .book-progress, .test-history, .scope-box, .ph-detail, .quiz-box, .review-card, .word-card, .song-card, .text-block { border: 1px solid var(--line); box-shadow: var(--shadow); }
.book-tile { min-height: 170px; padding: 18px; border-radius: var(--radius); }
.book-tile:hover, .unit-item:hover, .module-tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.book-tile .cover { font-size: 2.3rem; }
.book-tile .b-name { margin-top: 11px; }
.draft-badge, .edition-badge { top: 11px; padding: 3px 8px; font-weight: 700; }
.draft-badge { background: #fff7e8; color: #b66c00; }
.edition-badge { background: #ebf8ef; color: #16834e; }
.edition-switch { padding: 2px 8px; color: var(--ink-soft); text-decoration: none; }
.edition-switch:hover { color: var(--primary-deep); }

/* 册页、单元页 */
.unit-list { gap: 14px; }
.unit-item { padding: 17px 18px; border-radius: var(--radius); }
.unit-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.unit-item .u-no { font-size: .73rem; letter-spacing: .1em; }
.unit-status { padding: 3px 8px; border-radius: 99px; color: var(--primary-deep); background: #edf4ff; font-size: .72rem; font-weight: 800; }
.unit-status.done { color: #14784a; background: #e8f8ef; }
.unit-item .u-en { margin-top: 9px; }
.unit-progress { height: 6px; overflow: hidden; margin: 12px 0 8px; border-radius: 99px; background: #eaf0f8; }
.unit-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hero-a), var(--hero-b)); }
.unit-item .u-meta { display: flex; justify-content: space-between; gap: 8px; }
.unit-item .u-meta span { color: var(--primary-deep); font-weight: 700; }
.module-grid { gap: 14px; }
.module-tile { min-height: 176px; padding: 20px; border-radius: var(--radius); }
.module-tile .m-icon { font-size: 2.2rem; }
.module-tile .m-name { display: flex; flex-direction: column; gap: 4px; margin-top: 11px; font-size: 1.06rem; }
.module-tile .m-name span { color: var(--ink-soft); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.module-arrow { margin-top: 14px; color: var(--primary-deep); font-size: .82rem; font-weight: 800; }
.module-practice .m-icon { filter: hue-rotate(25deg); }
.module-resource { background: #fbfcff; }

/* 学习、阅读、答题 */
.word-card { padding: 36px 28px; border-radius: 24px; background: linear-gradient(145deg, #fff, #f5f8ff); }
.word-card .w-en { color: var(--ink); }
.word-card .w-cn { color: var(--accent-ink); }
.card-nav { gap: 10px; }
.reading-head, .uw-hero { border: 1px solid #dbe6fb; box-shadow: var(--shadow); }
.text-block { border-radius: var(--radius); }
.sentence { border-radius: 10px; }
.sentence.active { background: #edf4ff; }
.official-player { border-color: #dce6f5; background: #f8fbff; }
.quiz-box, .review-card { border-radius: 22px; background: var(--surface); }
.quiz-meta { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.q-prompt { color: var(--ink); }
.q-opt { border-color: var(--line); border-radius: var(--radius-sm); background: #fbfcff; }
.q-opt:hover { background: #f2f6ff; }
.spell-input { border-color: #cfdced; border-radius: var(--radius-sm); }
.spell-input:focus { box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.quiz-feedback { border-radius: var(--radius-sm); }
.type-picker .btn { min-width: 94px; }
.review-card { padding: 30px 24px; }

/* 长内容与工具页 */
.uw-card { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.uw-card:hover { border-color: #bed3fa; box-shadow: var(--shadow-hover); }
.uw-ex-item, .ph-word, .wl-item { border: 1px solid transparent; }
.uw-ex-item:hover, .ph-word:hover, .wl-item:hover { border-color: #d5e2fb; }
.wordlist-nav { top: 109px; padding: 10px 0; background: rgba(246,248,252,.94); backdrop-filter: blur(8px); }
.wl-jump { border: 1px solid var(--line); box-shadow: none; }
.stat-card { border-radius: var(--radius); }
.book-progress, .test-history { border-radius: var(--radius); }
.bp-row { padding: 5px 0; }
.wrong-item { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none; }
.tb-stage { border: 1px solid var(--line); box-shadow: var(--shadow); }
.tb-toolbar { border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  .view-container { padding: 20px 16px 44px; }
  .topbar-main { min-height: 50px; padding: 7px 14px; }
  .brand { font-size: 1rem; }
  .brand small { display: none; }
  .topnav { position: relative; padding: 0 14px 8px; gap: 5px; }
  .topnav::after { content: '›'; position: sticky; right: 0; display: grid; place-items: center; width: 20px; color: rgba(255,255,255,.88); font-size: 1.5rem; pointer-events: none; }
  .topnav a { padding: 7px 11px; font-size: .86rem; }
  .hero { padding: 24px 20px; border-radius: 20px; }
  .hero::after { right: 14px; top: 14px; }
  .hero h1 { max-width: 245px; font-size: 1.55rem; line-height: 1.28; }
  .hero p { font-size: .86rem; }
  .hero .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-stat { min-width: 0; margin: 0; padding: 8px 10px; border: 0; border-radius: 10px; background: rgba(255,255,255,.11); }
  .today-focus { align-items: flex-start; gap: 12px; padding: 14px; }
  .today-focus-icon { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
  .today-focus .btn { flex: 0 0 auto; padding: 9px 12px; font-size: .88rem; }
  .today-focus-copy strong { font-size: .95rem; }
  .today-focus-copy p { font-size: .78rem; }
  .section-title { margin-top: 24px; }
  .section-title-spread { align-items: flex-start; flex-direction: column; gap: 2px; }
  .book-grid, .module-grid, .unit-list { grid-template-columns: 1fr; }
  .book-tile { min-height: 142px; }
  .breadcrumb { gap: 7px; margin-bottom: 16px; }
  .crumb-trail { gap: 4px; }
  .breadcrumb .crumb { font-size: .8rem; }
  .breadcrumb .sep { display: none; }
  .unit-item { padding: 16px; }
  .module-tile { min-height: 138px; display: grid; grid-template-columns: 46px 1fr; column-gap: 13px; align-items: center; }
  .module-tile .m-icon { grid-row: span 3; font-size: 1.85rem; }
  .module-tile .m-name { margin: 0; }
  .module-arrow { margin-top: 6px; }
  .reading-toolbar, .tb-toolbar { align-items: stretch; }
  .reading-toolbar .btn, .tb-toolbar .btn { flex: 1 1 auto; }
  .tb-hint { width: 100%; order: 3; }
  .wordlist-nav { top: 99px; }
  .float-home { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .wrong-item { align-items: flex-start; gap: 8px; }
  .wrong-item .spacer { display: none; }
}

@media (max-width: 420px) {
  .topnav a { padding: 7px 10px; }
  .hero h1 { max-width: 215px; font-size: 1.42rem; }
  .today-focus { display: grid; grid-template-columns: 40px 1fr; }
  .today-focus .btn { grid-column: 2; justify-self: start; margin-top: 2px; }
  .today-focus-copy p { display: none; }
  .card-nav .btn { min-width: 0; font-size: .91rem; }
  .scope-tools { align-items: stretch; flex-wrap: wrap; }
  .scope-count { width: 100%; margin-left: 0; }
}

/* ===== 模块级体验优化 ===== */
/* 单词学习 */
.learning-progress { margin: 4px 0 14px; padding: 0 3px; color: var(--ink-soft); font-size: .82rem; }
.lp-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.lp-meta span { font-weight: 700; }
.lp-meta b { color: var(--ink); font-size: .92rem; }
.lp-bar, .review-session-bar { height: 7px; overflow: hidden; border-radius: 999px; background: #e7eef9; }
.lp-bar i, .review-session-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #49a0ff, #7a6df0); transition: width .25s ease; }
.learning-progress small { display: block; min-height: 1.2em; margin-top: 7px; }
.word-stage .card-nav { margin-top: 12px; }
.word-stage .card-nav:first-of-type .btn { background: #fff; border: 1px solid var(--line); border-bottom: 2px solid #d7e0ef; }
.word-stage .card-nav:first-of-type .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.letters-strip { gap: 8px; }
.letter-chip { min-width: 48px; border: 1px solid #d8e4f7; background: #f9fbff; box-shadow: none; }
.song-card { border-left: 4px solid #9cc3ff; }
.song-card .s-title .btn { min-height: 32px; margin-left: 8px; padding: 5px 10px; font-size: .8rem; }

/* 课文点读 */
.reading-head { position: relative; overflow: hidden; padding: 24px 26px; border-radius: 20px; background: linear-gradient(120deg, #eef5ff, #f8f5ff); color: var(--ink); }
.reading-head::after { content: '🎤'; position: absolute; right: 24px; top: 18px; font-size: 2.1rem; opacity: .45; }
.reading-head .rh-unit { color: var(--primary-deep); font-weight: 800; }
.reading-head .rh-title { max-width: 78%; color: var(--ink); }
#r-toolbar { position: sticky; top: 108px; z-index: 4; padding: 10px; margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.94); box-shadow: 0 8px 16px rgba(37,55,90,.08); backdrop-filter: blur(8px); }
#r-toolbar .btn { min-height: 38px; padding: 7px 11px; font-size: .86rem; }
#r-toolbar .rt-toggle { border: 1px solid var(--line); background: #f8faff; color: var(--ink-soft); }
#r-toolbar .rt-toggle.on { border-color: #c5d9ff; background: #e9f1ff; color: var(--primary-deep); }
.reading-tip { display: flex; align-items: center; margin: 10px 0 16px; padding: 10px 14px; color: var(--ink-soft); font-size: .84rem; }
.text-block { overflow: hidden; margin-bottom: 14px; background: var(--surface); }
.text-block h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fbfcff; }
.tb-title { color: var(--ink); }
.block-toggle { border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--primary-deep); font-weight: 700; }
.official-player { border-radius: 12px; }
.sentence { margin: 8px 10px; padding: 13px 12px; border: 1px solid transparent; border-left: 3px solid transparent; }
.sentence:hover { border-color: #dae7fb; }
.sentence.active { border-color: #c9dcfb; }
.sentence .sent-play { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eaf2ff; }

/* 课文全宽显示，但保持紧凑的行距，方便连续查看。 */
.sentence { margin: 3px 10px; padding: 7px 12px; }
.sent-en { color: #263653; font-size: 1.18rem; line-height: 1.5; }
.sent-cn { font-size: 0.92rem; line-height: 1.4; }
.sent-cn { padding-top: 1px; }
.rw { border-radius: 6px; }
.rw:focus-visible { outline-offset: 1px; }

/* 练习、测验和范围选择 */
.quiz-box { max-width: 740px; padding: 26px; }
.quiz-progress-head { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-items: center; }
.quiz-counter { color: var(--ink-soft); }
.quiz-counter b { color: var(--primary-deep); font-size: 1.2rem; }
.quiz-type { padding: 3px 9px; border-radius: 99px; background: #eef4ff; color: var(--primary-deep); font-weight: 800; font-size: .76rem; }
.quiz-progress-bar { grid-column: 1 / -1; display: block; height: 5px; overflow: hidden; border-radius: 99px; background: #e7edf8; }
.quiz-progress-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #8b5cf6); }
.q-prompt { margin: 24px 0 20px; line-height: 1.45; }
.q-prompt .btn { min-width: 42px; min-height: 40px; padding: 6px 10px; vertical-align: middle; }
.q-options { gap: 10px; }
.q-opt { min-height: 56px; padding: 15px 18px; text-align: left; font-weight: 650; }
.q-opt::before { content: '○'; display: inline-block; margin-right: 10px; color: #9caec9; }
.q-opt.correct::before { content: '✓'; color: var(--good); }
.q-opt.wrong::before { content: '×'; color: var(--bad); }
.spell-area { padding: 12px 0 4px; }
.spell-input { width: min(100%, 420px); min-height: 54px; padding: 10px 15px; background: #fbfcff; }
.spell-hint { padding: 10px 14px; border-radius: 10px; background: #f5f8fc; }
.token-area, .answer-line { padding: 14px; border-radius: 12px; background: #f8faff; }
.answer-line { min-height: 62px; border: 1px dashed #bdcee9; }
.token-chip { border: 1px solid #cfddf2; box-shadow: none; }
.quiz-feedback { margin-top: 14px; padding: 9px 14px; font-size: 1.05rem; }
.quiz-feedback:empty { padding: 0; }
.practice-picker { max-width: 840px; text-align: center; }
.picker-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 6px; border-radius: 16px; background: #eaf1ff; font-size: 1.65rem; }
.practice-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
.practice-types .btn { min-width: 0; text-align: left; background: #fbfcff; border: 1px solid var(--line); border-bottom: 2px solid #d8e3f4; }
.practice-types .btn-primary { background: linear-gradient(135deg, #3b82f6, #6366f1); border-color: transparent; }
.scope-box { padding: 20px; }
.scope-book { border-color: var(--line); background: #fbfcff; }
.scope-book-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.scope-unit { padding: 7px 6px; }
.scope-actions { position: sticky; bottom: 12px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }

/* 复习与背词 */
.review-landing-head, .dashboard-head, .wrongbook-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 22px 24px; margin-bottom: 16px; border: 1px solid #dbe6f8; border-radius: 20px; background: linear-gradient(115deg, #f0f6ff, #faf8ff); }
.review-landing-head > div, .dashboard-head > div, .wrongbook-head > div { min-width: 0; }
.review-landing-head span, .dashboard-head span, .wrongbook-head span { display: block; margin-bottom: 3px; color: var(--primary-deep); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.review-landing-head h1, .dashboard-head h1, .wrongbook-head h1 { margin: 0; font-size: 1.45rem; }
.review-landing-head p, .dashboard-head p, .wrongbook-head p { margin-top: 4px; color: var(--ink-soft); font-size: .88rem; }
.review-entry { width: 100%; border: 1px solid var(--line); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.review-entry-due { background: linear-gradient(145deg, #fff, #f2f8ff); }
.review-entry-scope { background: linear-gradient(145deg, #fff, #fbf6ff); }
.review-entry:hover { border-color: #bcd4f7; }
.review-session-head { max-width: 620px; margin: 0 auto 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 5px 14px rgba(36,57,94,.06); }
.review-session-head > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.review-session-head span { color: var(--primary-deep); font-size: .78rem; font-weight: 800; }
.review-session-head strong { color: var(--ink); font-size: .9rem; }
.review-session-head em { display: block; margin: 3px 0 8px; color: var(--ink-soft); font-size: .76rem; font-style: normal; }
.review-session-head small { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .76rem; }
.review-card { max-width: 620px; border-top: 4px solid #70a8ff; }
.review-card .r-en { letter-spacing: .01em; }
.review-card .r-answer { padding: 12px; border-radius: 12px; background: #fff7e7; }
.grade-btns .btn { min-width: 126px; }
.plan-day { border: 1px solid var(--line); box-shadow: 0 5px 15px rgba(36,57,94,.06); }
.plan-day.current { border-color: #9fc1fa; box-shadow: 0 8px 20px rgba(59,130,246,.12); }
.plan-day summary { background: #fff; }
.plan-day[open] summary { border-bottom: 1px solid var(--line); }
.plan-word { border: 1px solid #dce6f6; background: #fff; }
.plan-word:hover { background: #f3f7ff; }

/* 单词表、自然拼读和资料阅读 */
.ph-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 24px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #f7fbff 0%, #eef4ff 45%, #fbf7ff 100%);
}
.ph-hero::before {
  content: '';
  position: absolute;
  right: -38px;
  bottom: -52px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,170,247,.22), rgba(79,170,247,0) 68%);
  pointer-events: none;
}
.ph-hero::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,159,67,.12), rgba(176,110,240,.10));
  transform: rotate(12deg);
  pointer-events: none;
}
.ph-hero-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--primary-deep);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ph-hero h1 {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 1.8rem;
}
.ph-hero p {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.ph-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.ph-hero-stat {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 4px 10px rgba(58, 76, 122, .06);
}
.ph-hero-stat b {
  display: block;
  color: var(--ink);
  font-size: 1.25rem;
}
.ph-hero-stat span {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: .78rem;
}
.ph-resume {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 14px 16px;
  border: 1px solid #d8e4fb;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #f4f8ff);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}
.ph-resume-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #eaf2ff;
  color: var(--primary-deep);
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.ph-resume-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.ph-resume-main strong { font-size: 1rem; }
.ph-resume-main span { color: var(--ink-soft); font-size: .84rem; }
.ph-resume-meta {
  flex: 0 0 auto;
  color: var(--primary-deep);
  font-size: .78rem;
  font-weight: 800;
}
.ph-study-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ph-path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ph-path-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: #c7dbfa; }
.ph-path-card.active { border-color: #96bdf4; background: linear-gradient(145deg, #fff, #eef5ff); }
.ph-path-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #edf4ff;
  color: var(--primary-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.ph-path-card strong {
  font-size: 1rem;
  line-height: 1.35;
}
.ph-path-card small {
  color: var(--ink-soft);
  font-size: .78rem;
}
.ph-progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef8;
  margin-top: 2px;
}
.ph-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hero-a), var(--hero-b));
}
.ph-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ph-search {
  flex: 1 1 280px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 0 14px;
  color: var(--ink);
  font: inherit;
  box-shadow: var(--shadow);
}
.ph-search:focus {
  outline: none;
  border-color: #95bdf3;
  box-shadow: 0 0 0 4px rgba(79, 170, 247, .12);
}
.ph-summaryline {
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 700;
}
.ph-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary-deep);
  font-size: .72rem;
  font-weight: 700;
}
.ph-empty {
  padding: 24px 18px;
  border: 1px dashed #cdd8ea;
  border-radius: var(--radius);
  color: var(--ink-soft);
  background: #fafcff;
  text-align: center;
}
.ph-cats { gap: 16px; }
.ph-cat {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
  padding: 20px 18px 16px;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ph-cat:nth-child(2n) { background: #fcfaff; }
.ph-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: #c7dbfa; }
.ph-cat .m-icon { font-size: 2rem; position: relative; z-index: 1; }
.ph-cat .ph-cat-name { font-weight: 700; margin-top: 8px; }
.ph-cat .ph-cat-sub { font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.ph-cat .ph-progress { margin-top: 10px; }
.ph-pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.ph-pat-tile {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
}
.ph-pat-tile:hover { transform: translateY(-2px); border-color: #b9d2f7; box-shadow: var(--shadow); }
.ph-pat-tile.is-seen { background: linear-gradient(145deg, #fff, #f6fbff); }
.ph-seen-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8f8ef;
  color: #14784a;
  font-size: .64rem;
  font-weight: 800;
}
.ph-pat-tile .ph-pat { font-size: 1.6rem; font-weight: 800; color: var(--primary-deep); }
.ph-pat-tile .ph-ipa { font-size: 0.9rem; color: var(--primary); font-family: "Segoe UI", sans-serif; }
.ph-pat-sub { margin-top: 10px; color: var(--ink-soft); font-size: .76rem; line-height: 1.45; min-height: 2.2em; }
.ph-pat-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ph-detail { border-top: 4px solid #78a9fb; }
.ph-detail .ph-big { letter-spacing: .05em; }
.ph-rule-card { border-top: 4px solid #78a9fb; }
.ph-rule-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ph-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.ph-tag.alt { background: #fff3e8; color: #c46a00; }
.ph-rule-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .95fr);
  gap: 12px;
  margin-top: 12px;
}
.ph-decode-box {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #f7fbff;
  min-height: 116px;
}
.ph-decode-title {
  margin-bottom: 6px;
  color: var(--primary-deep);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ph-decode-main {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.65;
}
.ph-decode-sub {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.5;
}
.ph-meta-list {
  list-style: none;
  display: grid;
  gap: 8px;
}
.ph-meta-list li {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8faff;
  color: var(--ink-soft);
  font-size: .86rem;
  line-height: 1.55;
}
.ph-meta-list b {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
  font-size: .92rem;
}
.ph-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 10px; margin-top: 16px; }
.ph-word {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  border: 1px solid var(--line);
  background: #fbfcff;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
  min-height: 92px;
}
.ph-word:hover { background: #eef4ff; border-color: #d5e2fb; transform: translateY(-1px); }
.ph-word .pw-tag {
  display: inline-flex;
  align-self: flex-start;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary-deep);
  font-size: .66rem;
  font-weight: 800;
}
.ph-word .pw-en { font-weight: 700; font-size: 1.1rem; min-height: 1.4em; }
.ph-word .pw-en b { color: var(--accent); }
.ph-word .pw-cn { font-size: 0.82rem; color: var(--ink-soft); min-height: 1.2em; }
.ph-word .pw-decode { font-size: 0.72rem; color: var(--primary); font-family: monospace; line-height: 1.35; min-height: 2.2em; margin-top: 2px; }
.ph-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ph-mode-card {
  display: block;
  width: 100%;
  text-align: left;
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 15px 16px;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.ph-mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: #c7dbfa; }
.ph-mode-card.active { border-color: #8ab4f8; background: linear-gradient(145deg, #fff, #eef5ff); }
.ph-mode-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ph-mode-icon { font-size: 1.35rem; }
.ph-mode-card h3 { margin-top: 8px; font-size: 1.02rem; }
.ph-mode-card p { margin-top: 6px; color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.ph-mode-card small { display: block; margin-top: 10px; color: var(--primary-deep); font-size: .75rem; font-weight: 800; }
.ph-quiz-summary { max-width: 760px; }
.ph-quiz-head h1 { margin-top: 8px; font-size: 1.5rem; }
.ph-quiz-head p { margin-top: 6px; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.ph-quiz-banner {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #f6f9ff;
}
.ph-quiz-hint {
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.55;
}
.ph-quiz-word {
  margin: 6px 0 2px;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: .03em;
}
.ph-quiz-actions { justify-content: center; }
.uw-hero { padding: 22px; border-radius: 20px; background: linear-gradient(120deg, #f5f9ff, #fdfaff); }
.uw-help { padding: 10px 13px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.uw-card { overflow: hidden; }
.uw-order { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: #eff4ff; color: var(--primary-deep); }
.uw-word { border-radius: 10px; }
.uw-label { color: #5c79ae; background: #edf4ff; }
.uw-ex { padding-top: 12px; border-top: 1px solid var(--line); }
.uw-ex-item { border-color: #e2eaf6; }
.wordlist-nav { border-bottom: 1px solid var(--line); }
.wl-jump { transition: background .15s, color .15s, transform .15s; }
.wl-jump:hover { transform: translateY(-1px); }
.wordlist-group { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.wl-letter { margin: 0 0 12px; }
.wl-item { border-color: #e2eaf5; box-shadow: none; }
.tb-toolbar { position: sticky; top: 108px; z-index: 4; padding: 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,.95); box-shadow: 0 7px 15px rgba(36,57,94,.08); backdrop-filter: blur(8px); }
.tb-stage { background: #edf2fb; }
.tb-img { box-shadow: 0 4px 12px rgba(25,39,70,.15); }
.tb-thumb { border-width: 3px; opacity: .72; }
.tb-thumb.active { opacity: 1; }

/* 看板、错题与通用状态 */
.dashboard-head .btn, .wrongbook-head .btn { flex: 0 0 auto; }
.stat-card { position: relative; overflow: hidden; min-height: 138px; padding: 18px; }
.stat-card::after { content: ''; position: absolute; right: -20px; bottom: -35px; width: 92px; height: 92px; border: 18px solid #eff4ff; border-radius: 50%; }
.stat-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 8px; border-radius: 10px; background: #eef4ff; font-size: 1rem; }
.stat-card .v, .stat-card .k { position: relative; z-index: 1; }
.book-progress { padding: 18px 20px; }
.bp-row { min-height: 44px; }
.bp-row .bar { height: 9px; }
.test-history { padding: 8px 16px; }
.test-history tr:hover td { background: #f7faff; }
.wrongbook-head { align-items: center; }
.wrong-group { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.wrong-group h3 { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wrong-item { min-height: 54px; padding: 10px 12px; background: #fbfcff; }
.wrong-item .btn { min-height: 34px; padding: 6px 10px; font-size: .8rem; }
.empty-box { padding: 36px 24px; }

@media (max-width: 760px) {
  #r-toolbar, .tb-toolbar { top: 99px; margin-left: -2px; margin-right: -2px; }
  #r-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  #r-toolbar .rt-sep { display: none; }
  #r-toolbar .btn { flex: 0 0 auto; }
  .reading-head { padding: 19px 18px; }
  .reading-head .rh-title { max-width: 76%; font-size: 1.3rem; }
  .text-block h3 { align-items: flex-start; flex-direction: column; }
  .tb-actions { width: 100%; justify-content: space-between; }
  .sentence { margin: 3px 7px; padding: 7px 10px; }
  .sent-en { font-size: 1.1rem; line-height: 1.5; }
  .sent-cn { font-size: 0.88rem; line-height: 1.38; }
  .quiz-box { padding: 20px 16px; }
  .practice-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .practice-types .btn { min-height: 62px; padding: 10px; font-size: .87rem; }
  .q-prompt { margin-top: 20px; font-size: 1.18rem; }
  .q-opt { min-height: 52px; padding: 13px 14px; }
  .review-landing-head, .dashboard-head, .wrongbook-head { align-items: flex-start; flex-direction: column; padding: 18px; }
  .dashboard-head .btn, .wrongbook-head .btn { width: 100%; text-align: center; }
  .review-entry-grid { grid-template-columns: 1fr; }
  .review-entry { min-height: 126px; }
  .grade-btns { gap: 8px; }
  .grade-btns .btn { min-width: 0; flex: 1 1 100px; padding: 10px; }
  .ph-hero { padding: 20px 18px; border-radius: 22px; }
  .ph-hero h1 { font-size: 1.5rem; }
  .ph-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ph-resume { padding: 12px 14px; }
  .ph-study-path { grid-template-columns: 1fr; }
  .ph-mode-grid { grid-template-columns: 1fr; }
  .ph-rule-grid { grid-template-columns: 1fr; }
  .ph-search { flex-basis: 100%; width: 100%; }
  .ph-pattern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-cats, .ph-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-cat { min-height: 138px; padding: 16px 12px; }
  .ph-pat-tile { padding: 14px 12px; }
  .ph-word { min-height: 84px; padding: 10px; }
  .ph-detail { padding: 18px 16px; }
  .ph-detail .ph-big { font-size: 2.4rem; }
  .ph-quiz-word { font-size: 1.6rem; }
  .uw-card { padding: 15px; }
  .wordlist-group { padding: 12px; }
  .wl-items { grid-template-columns: 1fr; }
  .tb-toolbar .btn { min-width: 0; }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 120px; }
  .wrong-group { padding: 12px; }
  .wrong-item { flex-wrap: wrap; }
  .wrong-item .w-word { width: calc(100% - 72px); }
}

/* ==========================================================================
   课文点读页优化：吸顶板块跳转条 + 紧凑排版（放在文件末尾，覆盖前面的规则）
   ========================================================================== */

/* 设置类按钮不再吸顶，交给下面的播放条 */
#r-toolbar { position: static; margin: 12px 0 0; padding: 8px 10px; }

/* 吸顶播放条：连读/停止 + 板块快捷跳转 */
.reading-playbar {
  position: sticky;
  top: var(--rd-top, 108px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 16px rgba(37, 55, 90, .1);
  backdrop-filter: blur(8px);
}
.reading-playbar .btn { flex: 0 0 auto; }
.rt-jump {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.rt-jump::-webkit-scrollbar { display: none; }
.rt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid #d9e1ef;
  border-radius: 999px;
  background: #f4f6fa;
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.rt-chip:hover { background: #e9eef8; }
.rt-chip b { font-weight: 700; opacity: .55; font-size: .76rem; }
.rt-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.rt-chip.on b { opacity: .8; }

/* 首屏更紧凑 */
.reading-head { padding: 14px 20px; margin-bottom: 6px; }
.reading-head .rh-title { font-size: 1.3rem; }
.reading-tip { margin: 0 0 10px; padding: 7px 12px; font-size: .82rem; }

/* 句子压缩：音标不再撑出一整行的空白 */
.sentence { padding: 7px 12px; gap: 9px; border-radius: 10px; }
.sent-en { font-size: var(--read-en, 1.15rem); line-height: 1.4; }
.ipa-off .sent-en { line-height: 1.55; }
.sent-cn { margin-top: 4px; font-size: var(--read-cn, .92rem); line-height: 1.45; }
.rw-ipa { font-size: .72em; line-height: 1.1; height: 1.2em; }
.rw-en { line-height: 1.3; }
.text-block { padding: 8px 12px; margin-bottom: 12px; }
.text-block h3 { margin: 2px 4px 6px; padding-bottom: 6px; }

@media (max-width: 640px) {
  /* 窄屏：播放键一行、板块跳转独占一行，避免 chips 被挤没 */
  .reading-playbar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .reading-playbar .btn { flex: 1 1 auto; min-height: 34px; padding: 5px 10px; font-size: .85rem; }
  .rt-jump { flex: 1 0 100%; }
  .rt-chip { padding: 4px 10px; font-size: .8rem; }
  .reading-head { padding: 13px 15px; }
  .reading-head .rh-title { font-size: 1.15rem; }
  .sent-en { font-size: 1.06rem; }
  .sentence { padding: 4px 7px; }
}

/* ==========================================================================
   单词默写表：屏幕上的设置面板 + A4 横向打印版式（打印时可另存为 PDF）
   ========================================================================== */
.dict-controls {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.dict-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dict-label {
  flex: 0 0 auto;
  min-width: 42px;
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 700;
}
.dict-row #dict-book {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  color: var(--ink);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
}
.dict-row #dict-print { margin-left: auto; }
.dict-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dict-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fbfcff;
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.dict-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dict-chip:hover { border-color: #c5d9ff; }
.dict-chip:has(input:checked) {
  border-color: #9fc1fa;
  background: #e9f1ff;
  color: var(--primary-deep);
}
.btn-mini { min-height: 34px; padding: 5px 12px; font-size: .82rem; border-radius: 10px; }
.dict-tip {
  margin: 10px 0 4px;
  padding: 10px 14px;
  border: 1px solid #dbe6f8;
  border-radius: 12px;
  background: #f4f8ff;
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.6;
}
.dict-tip b { color: var(--primary-deep); }
.dict-preview { margin-top: 12px; }
.dict-empty {
  padding: 30px;
  border: 1px dashed #bdcee9;
  border-radius: 14px;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- 一张 A4 横向默写纸 ---------- */
.dsheet {
  zoom: var(--dsheet-zoom, 1);
  display: flex;
  flex-direction: column;
  width: 281mm;
  min-height: 194mm;
  margin: 0 auto 14px;
  padding: 4mm 3mm;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 6px 18px rgba(37, 55, 90, .12);
}
.dsheet-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8mm;
  padding-bottom: 2mm;
  border-bottom: .6mm solid #2f4a7a;
}
.dsheet-id { display: flex; align-items: baseline; gap: 3mm; min-width: 0; }
.dsheet-id b { color: #2f4a7a; font-size: 5mm; letter-spacing: .3mm; }
.dsheet-id span { color: #4b5563; font-size: 3.4mm; font-weight: 600; }
.dsheet-name { color: #6b7280; font-size: 3.2mm; font-weight: 700; letter-spacing: .5mm; }
.dsheet-meta { display: flex; gap: 5mm; color: #374151; font-size: 3.4mm; font-weight: 700; white-space: nowrap; }
.dsheet-meta i { display: inline-block; width: 22mm; border-bottom: .3mm solid #9ca3af; }
.dsheet-meta i.short { width: 10mm; }
.dsheet-body { display: grid; gap: 6mm; flex: 1; margin-top: 3mm; }
.dsheet-body.cols-2 { grid-template-columns: 1fr 1fr; }
.dsheet-body.cols-1 { grid-template-columns: 1fr; }
.dsheet-ft {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  margin-top: 2mm;
  padding-top: 1.5mm;
  border-top: .2mm solid #d1d5db;
  color: #9ca3af;
  font-size: 2.8mm;
}

/* ---------- 表格 ---------- */
.dtab { width: 100%; table-layout: fixed; border-collapse: collapse; align-self: start; }
.dtab th, .dtab td { border: .2mm solid #cbd5e1; }
.dtab th {
  padding: 1mm 0;
  background: #eef3fb;
  color: #40567c;
  font-size: 2.9mm;
  font-weight: 700;
}
/* 提示列表头：文字随提示项数收紧，始终一行，不撑宽也不折行 */
.dtab th.dt-hint { padding-left: .8mm; padding-right: .8mm; white-space: nowrap; overflow: hidden; }
.dtab th.dt-hint.parts-2 { font-size: 2.7mm; letter-spacing: -.05mm; }
.dtab th.dt-hint.parts-3 { font-size: 2.4mm; letter-spacing: -.1mm; }
.dtab th.dt-no, .dtab td.dt-no { width: 8mm; }
.dtab th.dt-hint, .dtab td.dt-hint { width: 26mm; }
.dtab th.dt-ok, .dtab td.dt-ok { width: 7mm; }
.dsheet-body.cols-1 .dtab th.dt-hint, .dsheet-body.cols-1 .dtab td.dt-hint { width: 42mm; }
.dtab td { height: var(--dt-row, 10mm); padding: 0 1.2mm; vertical-align: middle; }
.dsheet-body.cols-1 .dtab td { height: var(--dt-row, 12mm); }
.dtab td.dt-no { color: #94a3b8; font-size: 3mm; text-align: center; }
.dtab td.dt-hint { line-height: 1.25; }
.dt-cn { display: block; color: #1f2937; font-size: 3.4mm; font-weight: 600; }
.dt-ipa { display: block; color: #94a3b8; font-size: 2.6mm; }
.dt-en {
  display: block;
  color: #1f2937;
  font-family: "Segoe UI", "Century Gothic", system-ui, sans-serif;
  font-size: 3.6mm;
  font-weight: 600;
}
.dtab tr.dt-blank td.dt-no { color: #d1d5db; }

/* 书写区：四线三格 / 单线 / 空格 */
.dt-write { position: relative; }
.dt-line { display: block; position: relative; height: 7.2mm; }
.line-four .dt-line {
  border-top: .2mm solid #a9bcd8;
  border-bottom: .2mm solid #a9bcd8;
}
.line-four .dt-line::before,
.line-four .dt-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
}
.line-four .dt-line::before { top: 2.4mm; border-top: .2mm dashed #cddaea; }
.line-four .dt-line::after { top: 4.8mm; border-top: .25mm solid #7f97bb; }
.line-single .dt-line { border-bottom: .25mm solid #a9bcd8; height: 6mm; }
.line-none .dt-line { border: 0; }

/* ---------- 打印：A4 横向，仅输出默写纸 ---------- */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  html, body { background: #fff !important; }
  .topbar, .footer, .float-home, .breadcrumb, .section-title,
  #dict-panel, .dict-tip, .loading-hint { display: none !important; }
  .view-container { max-width: none !important; padding: 0 !important; }
  .view-container > * { animation: none !important; }
  .dict-preview { margin: 0 !important; }
  .dsheet {
    zoom: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 186mm;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .dsheet:last-child { break-after: auto; page-break-after: auto; }
  .dtab { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dtab th { background: #eef3fb !important; }
}

@media (max-width: 760px) {
  .dict-row #dict-print { width: 100%; margin-left: 0; }
}

/* ---------- 自然拼读色块（英文抄写模式） ---------- */
.dp {
  display: inline-block;
  padding: 0 2px;
  border-radius: 4px;
  font-weight: 700;
}
.dt-en .dp { padding: 0 .5mm; border-radius: .8mm; }
.dp-vowel  { background: #ffe2b8; color: #8a4b00; }   /* 单元音字母 */
.dp-vteam  { background: #ffcf9a; color: #7a3d00; }   /* 元音字母组合 */
.dp-digraph{ background: #cfe3ff; color: #14458c; }   /* 辅音字母组合 */
.dp-blend  { background: #e0d5ff; color: #4a2f9c; }   /* 辅音连缀 */
.dp-silent { background: #eceff3; color: #9aa4b2; text-decoration: line-through; }
.dp-cons   { background: transparent; color: #1f2937; }
.dsheet-legend { display: flex; gap: 2mm; align-items: center; }
.dsheet-legend .dp {
  display: inline-block;
  padding: .2mm 1.2mm;
  border-radius: .8mm;
  font-size: 2.6mm;
  font-style: normal;
  font-weight: 700;
}

@media print {
  .dt-en .dp, .dsheet-legend .dp {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- 逐词挑选面板 ---------- */
.dict-chip.partial {
  border-color: #f0c07a;
  background: #fff6e8;
  color: #a66a12;
}
.dict-chip em { font-style: normal; font-size: .78rem; opacity: .8; }
.dict-note { color: var(--ink-soft); font-size: .78rem; }
.dict-picker {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}
.dict-unit-pick { border-bottom: 1px dashed #e3e9f4; }
.dict-unit-pick:last-child { border-bottom: 0; }
.dict-unit-pick > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 4px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
}
.dict-unit-pick > summary b { color: var(--primary-deep); }
.dict-unit-pick > summary span { color: var(--ink-soft); font-weight: 500; }
.dict-unit-pick > summary em { margin-left: auto; color: var(--ink-soft); font-size: .8rem; font-style: normal; }
.dict-words { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 4px 12px; }
.dict-chip.sm { min-height: 30px; padding: 3px 10px; font-size: .82rem; }
.dict-chip.sm i { margin-left: 5px; color: var(--ink-soft); font-style: normal; font-size: .74rem; font-weight: 500; }

/* 提示列同时显示英文 / 音标 / 中文时的排版 */
.dtab.hint-wide th.dt-hint, .dtab.hint-wide td.dt-hint { width: 34mm; }
.dsheet-body.cols-1 .dtab.hint-wide th.dt-hint,
.dsheet-body.cols-1 .dtab.hint-wide td.dt-hint { width: 52mm; }
.dtab.hint-wide .dt-cn { font-size: 3mm; }
.dtab.hint-wide .dt-en { font-size: 3.4mm; }

/* display:grid 会盖掉浏览器对 hidden 的默认样式，必须显式收起 */
.dict-picker[hidden] { display: none; }

/* 单个单词连续播放按钮 */
.uw-loop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 8px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--primary-deep);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.uw-loop:hover { border-color: #bed3fa; background: #eef4ff; }
.uw-loop.on {
  border-color: transparent;
  background: var(--primary);
  color: #fff;
  animation: loop-pulse 1.4s ease-in-out infinite;
}
.btn-loop.on {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  animation: loop-pulse 1.4s ease-in-out infinite;
}
@keyframes loop-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 170, 247, .45); }
  50% { box-shadow: 0 0 0 7px rgba(79, 170, 247, 0); }
}

/* 拼读色块图例（单词表 / 单元单词表页） */
.dp-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 700;
}
.dp-legend .dp { font-size: .8rem; font-style: normal; }
.dp-legend small { color: var(--ink-soft); font-weight: 500; }
.wl-en .dp, .uw-en .dp { padding: 0 3px; }

/* 单词按钮给 🔁 留出位置，避免换行 */
.uw-card .uw-word { max-width: calc(100% - 86px); }

/* 拼读行的色块（与默写表同一套语义颜色）+ 拼读开关 */
.uw-ph-part.dp-vowel,   .uw-ph-cell.dp-vowel   { color: #8a4b00; background: #ffe2b8; border-color: #f0c07a; }
.uw-ph-part.dp-vteam,   .uw-ph-cell.dp-vteam   { color: #7a3d00; background: #ffcf9a; border-color: #edb271; }
.uw-ph-part.dp-digraph, .uw-ph-cell.dp-digraph { color: #14458c; background: #cfe3ff; border-color: #a9caf7; }
.uw-ph-part.dp-blend,   .uw-ph-cell.dp-blend   { color: #4a2f9c; background: #e0d5ff; border-color: #c6b6f5; }
.uw-ph-part.dp-silent,  .uw-ph-cell.dp-silent  { color: #8b95a3; background: #eceff3; border-color: #d8dee6; }
.uw-ph-part.dp-cons,    .uw-ph-cell.dp-cons    { color: #33415c; background: #f1f4f9; border-color: #dde4ee; }
.uw-ph-part.dp-syll,    .uw-ph-cell.dp-syll    { color: #2563a8; background: #eaf3ff; border-color: #c9e0fb; }

.uw-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.uw-toolbar .dp-legend { margin: 0; flex: 1 1 auto; }
.uw-grid.no-phonics .uw-phonics { display: none; }

/* 词组的拼读：逐个单词分行 */
.uw-ph-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uw-ph-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.uw-ph-word {
  min-width: 0;
  padding: 2px 8px;
  border-radius: 7px;
  background: #f4f7fc;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 700;
}

/* 拼读行整体收紧：色块更小、行距更密（词组卡片不再占半屏） */
.uw-phonics { margin-top: 9px; gap: 6px; }
.uw-ph { gap: 4px; font-size: .76rem; }
.uw-ph-row { gap: 4px; }
.uw-ph-part { min-height: 19px; padding: 1px 5px; border-radius: 5px; font-size: .76rem; }
.uw-ph-divider { height: 15px; }
.uw-ph-list { gap: 5px; }
.uw-ph-line { gap: 6px; }
.uw-ph-word { padding: 1px 6px; border-radius: 5px; font-size: .74rem; }
.uw-label { padding: 1px 7px; font-size: .68rem; }

/* 默写表排版优化：行高由 JS 按行数算好写进 --dt-row（见 dictation.js rowHeightMm），
   页面高度基本铺满又不靠 height:100% 拉伸——拉伸在打印分页时会把多余高度分到表头那一行，
   导致 PDF 里表头忽然变得很厚 */
.dsheet-body .dtab { height: auto; }
.dtab tbody tr { height: auto; }
.dtab thead tr, .dtab th { height: 6.6mm; }
/* 每 5 行加一道稍重的分隔线，方便数题号与对答案 */
.dtab tbody tr:nth-child(5n) td { border-bottom: .4mm solid #aebbcd; }
.dtab tbody tr:last-child td { border-bottom: .2mm solid #cbd5e1; }

/* ---------- 全站音标开关（顶栏 🔡）：关掉后各处单词音标一起隐藏 ---------- */
.icon-btn.off { opacity: 0.55; text-decoration: line-through; }
body.ipa-hidden .w-ipa,
body.ipa-hidden .uw-ipa,
body.ipa-hidden .wl-ipa,
body.ipa-hidden .dt-ipa,
body.ipa-hidden .rw-ipa,
body.ipa-hidden .review-card .r-meta { display: none; }
/* 课文逐词音标藏起来后，句子回到单行行距（和课文页自己的音标开关同一效果） */
body.ipa-hidden .sent-en { line-height: 1.55; }

/* ---------- 单词学习卡片上的拼读行 ---------- */
.word-card .w-phonics {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.word-card.no-phonics .w-phonics { display: none; }
.card-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* 单词学习卡片的拼读：字母组合与它的读音上下对齐成一列 */
.uw-ph-stack { align-items: flex-start; }
.uw-ph-stack .uw-ph-syll { gap: 3px; }
.uw-ph-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 7px;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.uw-ph-cell .uw-ph-g { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.uw-ph-cell .uw-ph-s { font-size: 0.78rem; line-height: 1.2; opacity: 0.9; }
.uw-ph-stack .uw-ph-sep { align-self: center; }

/* ---------- 单词卡：考察方向（英→中 / 中→英） ----------
   盖住的那一面用模糊，点卡片翻面才显示；中→英时把中文提到最上面当题面 */
.word-card:not(.dir-cn2en):not(.revealed) .w-cn { color: transparent; text-shadow: 0 0 14px rgba(0, 0, 0, 0.35); }
.word-card.dir-cn2en { justify-content: center; }
.word-card.dir-cn2en .w-cn { order: -1; font-size: 2rem; color: var(--ink); }
.word-card.dir-cn2en:not(.revealed) .w-en,
.word-card.dir-cn2en:not(.revealed) .w-ipa { color: transparent; text-shadow: 0 0 16px rgba(0, 0, 0, 0.4); }
.word-card.dir-cn2en:not(.revealed) .w-phonics { filter: blur(7px); pointer-events: none; user-select: none; }
.card-tools { gap: 8px; }