/**
 * 背单词（关系网）—— 独立样式
 *
 * ⚠️ 为什么**不改 chat.css**：用户明确要求这个模块和背句子 / 背作文完全独立。
 *    所有选择器都锁在 `.wd` 前缀下（`.wd-*`），不会碰到 `rd-` / `ed-` / `nb-`；
 *    chat.css 里也没有 .wd 相关规则，两边互不影响。
 *
 * 面板定位：JS 里已经写成 position:fixed; inset:0; z-index:75，
 * 这里只负责"里面长什么样"。现有层级：.nb=60、.rd=65、.ed=68、.modal=70，
 * 75 保证从底部导航打开时盖在它们上面。
 */

.wd {
  position: fixed;
  inset: 0;
  z-index: 75;                       /* 与 JS 里的 Z 保持一致（JS 内联样式是最终生效的那个） */
  display: flex;
  flex-direction: column;
  background: #f5f7fb;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
.wd[hidden] { display: none !important; }

/* ── 顶栏 ── */
.wd-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e6eaf2;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.wd-title { font-size: 17px; font-weight: 700; }
.wd-sub { color: #64748b; font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-back, .wd-close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 0; border-radius: 10px;
  background: #eef2f9; color: #0f172a;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.wd-back[hidden] { display: none !important; }
.wd-back:active, .wd-close:active { background: #dfe6f3; }
.wd-close { margin-left: auto; }

/* ── 顶栏里的导出入口 ──
   放在现有顶栏里而不是另起一条工具条：手机屏幕就那么大，
   多一条工具条会挤掉背诵卡片的高度。 */
.wd-export {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 12px;
  border: 0; border-radius: 10px;
  background: #eef2f9; color: #1d4ed8;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.wd-export[hidden] { display: none !important; }
.wd-export:active { background: #dfe6f3; }

/* ── 主体（唯一滚动区）── */
.wd-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}
.wd-loading { padding: 40px 12px; text-align: center; color: #64748b; }

/* ── 提示条（不用 alert，手机上 alert 很烦）── */
.wd-msg {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px;
  background: #fff7e6;
  border-top: 1px solid #ffe1a8;
  color: #8a5a00;
  font-size: 13px;
}
.wd-msg[hidden] { display: none !important; }

/* ── 底部操作条 ── */
.wd-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border-top: 1px solid #e6eaf2;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.wd-badge { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.wd-badge-w { font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-badge-wrong { color: #dc2626; font-size: 12px; flex: 0 0 auto; }
.wd-nav {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #d9e0ec;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  cursor: pointer;
}
.wd-nav-main {
  background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 700;
}
.wd-nav:active { transform: scale(.98); }

/* ── 底部「✅ 已背出」──
   和主按钮（蓝色「下一关」）**换一个颜色**：绿色系表示"完成/收起来"，
   不抢主流程的视觉焦点，也不会被人当成"下一关"连点。
   高度跟 .wd-nav 一致（44px），三个按钮一排时齐平。 */
.wd-nav-mastered {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
  font-weight: 700;
}
.wd-nav-mastered:active { background: #d1fae5; }

/* 「已背出库」入口 + 计数（底部左侧，点开 = 生词本的「已背出」tab） */
.wd-mastered-lib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #047857;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.wd-mastered-lib:active { background: #d1fae5; }
.wd-mastered-lib:focus-visible { outline: 2px solid #047857; outline-offset: 2px; }
.wd-mastered-lib[hidden] { display: none !important; }

/* ── 「已移至已背出库」toast（带撤销）──
   absolute 定位在面板底部工具条上方；不占文档流，不把卡片挤走。 */
.wd-toast {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 5;                     /* 在内容之上，但低于导出面板（.wd-sheet = 6） */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .94);
  color: #ffffff;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
}
.wd-toast[hidden] { display: none !important; }
.wd-toast-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-toast-undo {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 0; border-radius: 9px;
  background: #ffffff; color: #0f172a;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
}
.wd-toast-undo:active { background: #e2e8f0; }

/* ── 掌握度小圆点（5 级）── */
.wd-dots { display: inline-flex; gap: 3px; align-items: center; }
.wd-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #dbe2ee; display: inline-block;
}
.wd-dot.is-on { background: #22c55e; }

/* ── 打卡条 ── */
.wd-checkin {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px; margin-bottom: 12px;
  background: linear-gradient(135deg, #fff4e5, #ffe9cc);
  border-radius: 14px;
  font-size: 14px; font-weight: 600; color: #8a4b00;
}
.wd-todaycount { color: #b45309; }
.wd-totalcount { color: #a16207; margin-left: auto; }

/* ── 初中 / 高中 ── */
.wd-books { display: flex; gap: 8px; margin-bottom: 12px; }
.wd-book {
  flex: 1;
  min-height: 42px;
  border: 1px solid #d9e0ec; border-radius: 12px;
  background: #ffffff; color: #334155;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.wd-book.is-on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ── 快捷入口 ── */
.wd-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wd-qbtn {
  min-height: 40px; padding: 0 14px;
  border: 1px solid #d9e0ec; border-radius: 999px;
  background: #ffffff; color: #334155;
  font-size: 14px; cursor: pointer;
}
.wd-qbtn-main { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; font-weight: 700; }
.wd-qbtn:active { background: #eef2f9; }

.wd-hint { color: #64748b; font-size: 13px; margin: 6px 2px 10px; }
.wd-empty { padding: 28px 12px; text-align: center; color: #94a3b8; }

/* ── 单元列表 ── */
.wd-units { display: flex; flex-direction: column; gap: 8px; }
.wd-unit {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 12px 14px;
  border: 1px solid #e6eaf2; border-radius: 14px;
  background: #ffffff; cursor: pointer;
  min-height: 44px;
}
.wd-unit:active { background: #f1f5fb; }
.wd-unit-l { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wd-unit-name { font-size: 16px; font-weight: 700; }
.wd-unit-meta { font-size: 12px; color: #64748b; }
.wd-unit-go { color: #94a3b8; font-size: 22px; }

/* ── 背诵卡片 ── */
.wd-drill-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; font-size: 13px; color: #64748b;
}
.wd-stagebar { display: flex; gap: 4px; flex: 1; }
.wd-stage-dot {
  flex: 1; height: 5px; border-radius: 3px;
  background: #e2e8f0; display: block;
}
.wd-stage-dot.is-done { background: #22c55e; }
.wd-stage-dot.is-now { background: #2563eb; }

.wd-card {
  background: #ffffff;
  border: 1px solid #e6eaf2;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
}
.wd-stage-name { font-size: 14px; font-weight: 700; color: #2563eb; margin: 0 0 2px; }
.wd-stage-tip { font-size: 13px; color: #64748b; margin: 0 0 12px; }

/* 单词本体：大字 + 音节分色 */
.wd-word {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: center;
  margin: 12px 0 6px;
  word-break: break-word;
}
.wd-syl { display: inline-block; }
.wd-syl-0 { color: #2563eb; }
.wd-syl-1 { color: #db2777; }
.wd-syl-2 { color: #0d9488; }
.wd-syl-3 { color: #d97706; }
.wd-syl-4 { color: #7c3aed; }
.wd-w-whole { color: #0f172a; }

.wd-ipa { text-align: center; color: #64748b; font-size: 15px; margin: 0 0 10px; }

.wd-speak {
  display: block; margin: 0 auto 12px;
  min-height: 40px; padding: 0 18px;
  border: 1px solid #bfdbfe; border-radius: 999px;
  background: #eff6ff; color: #1d4ed8;
  font-size: 15px; cursor: pointer;
}
.wd-speak:active { background: #dbeafe; }

.wd-tap { text-align: center; color: #94a3b8; font-size: 13px; margin: 8px 0 0; }
.wd-mean { margin-top: 6px; }
.wd-trans { font-size: 19px; font-weight: 700; margin: 4px 0; }

.wd-ex { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e6eaf2; }
.wd-ex-en { font-size: 16px; margin: 0 0 2px; }
.wd-ex-cn { font-size: 13px; color: #64748b; margin: 0; }
.wd-ex-none { color: #94a3b8; font-size: 13px; margin: 0; }

.wd-prompt-cn { font-size: 20px; font-weight: 700; margin: 8px 0 6px; text-align: center; }
/* 字母数 / 分几段记 这类小提示（"会写"那一块用） */
.wd-hintline2 {
  text-align: center; color: #64748b; font-size: 12px; margin: 4px 0;
}

.wd-usesent {
  font-size: 18px; line-height: 1.9; margin: 10px 0;
  text-align: center; word-break: break-word;
}
.wd-blank { color: #2563eb; font-weight: 700; letter-spacing: 2px; }
.wd-use-cn { text-align: center; color: #64748b; font-size: 13px; margin: 0; }

/* 判定结果 */
.wd-verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  font-size: 15px;
}
.wd-verdict.is-ok { background: #e8f9ef; color: #15803d; }
.wd-verdict.is-bad { background: #fdecec; color: #b91c1c; }
.wd-verdict-ans { font-weight: 700; }

/* ── 我认识 / 不认识 / 读对了 ── */
.wd-acts { display: flex; gap: 10px; margin-top: 14px; }
.wd-yes, .wd-no {
  flex: 1; min-height: 48px;
  border-radius: 14px; border: 1px solid transparent;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.wd-yes { background: #e8f9ef; color: #15803d; border-color: #b7ecc9; }
.wd-no { background: #fdecec; color: #b91c1c; border-color: #f7c9c9; }
.wd-yes:active, .wd-no:active { transform: scale(.98); }

/* ── 结果页 ── */
.wd-sum-card { text-align: center; }
.wd-sum-title { font-size: 20px; font-weight: 800; margin: 6px 0 12px; }
.wd-sum-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wd-sum-stats span {
  padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 700;
}
.wd-sum-1 { background: #e8f9ef; color: #15803d; }
.wd-sum-2 { background: #fdecec; color: #b91c1c; }
.wd-sum-3 { background: #eef2f9; color: #475569; }
.wd-sum-checkin { margin: 14px 0 0; color: #b45309; font-weight: 700; }

/* ── 测试 ── */
.wd-test-top {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #64748b; margin-bottom: 10px;
}
.wd-opts { display: flex; flex-direction: column; gap: 8px; }
.wd-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  min-height: 48px; padding: 10px 12px;
  border: 1px solid #e6eaf2; border-radius: 12px;
  background: #ffffff; font-size: 15px; cursor: pointer;
}
.wd-opt-k {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: #eef2f9; color: #475569;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.wd-opt-v { flex: 1; min-width: 0; }
.wd-opt.is-right { background: #e8f9ef; border-color: #86e0a8; }
.wd-opt.is-wrong { background: #fdecec; border-color: #f7c9c9; }
.wd-opt[disabled] { cursor: default; opacity: .95; }

/* ── 生词本 / 已背出 ── */

/* 两个 tab 并列（用户要求"生词本旁边增加一个 已背出"）。
   手机上并排必须做两件事：① 各自 flex:1 平分宽度 + min-width:0，
   否则长文案会把另一个挤没；② min-height:44px，手指点得到。 */
.wd-notetabs { display: flex; gap: 8px; margin: 2px 0 12px; }
.wd-notetab {
  flex: 1 1 0; min-width: 0; min-height: 44px;
  padding: 0 10px;
  border: 1px solid #d9e0ec; border-radius: 12px;
  background: #ffffff; color: #334155;
  font-size: 14px; font-weight: 700; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wd-notetab.is-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.wd-notetab:active { background: #eef2f9; }
.wd-notetab.is-on:active { background: #1d4ed8; }

.wd-notelist { display: flex; flex-direction: column; gap: 6px; }
.wd-noterow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 10px 12px; border-radius: 12px;
  background: #ffffff; border: 1px solid #e6eaf2;
  font-size: 14px;
}
/* 第一行：单词 + 音标 + （错次数 / 标记时间）。允许折行，长单词不会把按钮顶出去 */
.wd-note-main {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  flex: 1 1 auto; min-width: 0;
}
.wd-notew { font-size: 16px; }
.wd-noteipa { color: #64748b; font-size: 12px; }
/* 释义单独占一整行：手机上是 375 宽，和单词挤一行只会被省略号吃掉 */
.wd-notecn {
  flex: 1 1 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #334155;
}
.wd-notecount { color: #b91c1c; font-size: 12px; flex: 0 0 auto; }
.wd-notedate { color: #15803d; font-size: 12px; flex: 0 0 auto; }
.wd-noteacts {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto; flex: 0 0 auto;
}
/* 行内按钮：触控目标 ≥44px（任务要求，375 宽下实测见测试） */
.wd-noterow .wd-mini { width: 44px; height: 44px; }
.wd-act {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #d9e0ec; border-radius: 10px;
  background: #f8fafc; color: #334155;
  font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.wd-act:active { background: #eef2f9; }
.wd-act-out { background: #e8f9ef; border-color: #b7ecc9; color: #15803d; }
.wd-act-back { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.wd-mini {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border: 1px solid #e6eaf2; border-radius: 10px;
  background: #f8fafc; cursor: pointer; font-size: 15px;
}
.wd-mini:active { background: #eef2f9; }

/* ── 关系网 ── */
/* 背诵页里进"这个词的关系网"的入口（每个词、每一关都在，不用退出背诵去找） */
.wd-graph-entry {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.wd-graph-entry:active { background: #e0e7ff; }

/* 提示行：告诉学生"点屏幕任意地方出下一个"。这一版不再放一个大按钮 ——
   用户选的就是"点屏幕任意地方"，多一个按钮反而让人以为只有那儿能点。 */
.wd-graph-tip { margin: 0 0 10px; color: #64748b; font-size: 12px; }

.wd-graph-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.wd-graph-title { font-size: 18px; font-weight: 800; }
.wd-graph-count { flex: 1; min-width: 0; color: #64748b; font-size: 12px; }
.wd-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; font-size: 12px; color: #475569; }
.wd-legend-i { display: inline-flex; align-items: center; gap: 4px; }
.wd-legend-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ── 竖列卡片（放射图整轮删掉之后就是它）──
   最新的卡在最上面，旧的往下挤；中心词那张钉在最上面、长得不一样。 */
.wd-cards { display: flex; flex-direction: column; gap: 8px; }
/* 点这个视图里任意地方都算"出来下一个"，给个手型提示 */
.wd-graph { cursor: pointer; }

/* 中心词卡：不同底色 + 左边一条蓝边，"一眼能认出起点"（用户要求） */
.wd-reveal-card.is-center {
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left: 4px solid #2563eb;
}
.wd-ci-badge {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* 一张卡：词 / 音标 / 中文 / 例句 / 关系类型，缺哪项就不画哪行 */
.wd-reveal-card {
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e6eaf2;
  border-radius: 14px;
}
/* 最新出来的那张闪一下并描个蓝边 —— 手机上点了要马上看到"出来了什么"，
   否则用户以为没反应，会一直点 */
.wd-reveal-card.is-new {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #dbeafe;
  animation: wd-pop .25s ease;
}
@keyframes wd-pop {
  from { transform: scale(.96); opacity: .4; }
  to { transform: scale(1); opacity: 1; }
}
.wd-reveal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wd-reveal-tag {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.wd-reveal-w { font-size: 17px; font-weight: 800; }
.wd-reveal-ipa { color: #64748b; font-size: 12px; }
.wd-reveal-cn { margin: 6px 0 0; font-size: 15px; font-weight: 700; }
.wd-reveal-ex { margin-top: 4px; }
.wd-reveal-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wd-reveal-go {
  margin-top: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
/* 「去背这个词」= 主操作（跳进背诵），配色比"以它为中心"重一档 */
.wd-reveal-drill {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.wd-rem {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 10px; padding: 10px 12px;
  background: #fff7e6; border: 1px solid #ffe1a8; border-radius: 12px;
  font-size: 14px; color: #8a5a00;
}
.wd-rem-tag {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 999px;
  background: #f59e0b; color: #fff; font-size: 12px;
}
.wd-rem-text { flex: 1; min-width: 0; }

/* ── 窄屏 ── */
@media (max-width: 380px) {
  .wd-word { font-size: 32px; }
  .wd-nav { padding: 0 12px; font-size: 14px; }
  .wd-export { padding: 0 8px; font-size: 13px; }
}

/* ── 底部工具条放不下三个按钮时：当前词/计数独占一行，三个按钮平分下一行 ──
   375 宽实测（见 .dsh-tools/test-word-known.mjs）：
   一行硬塞会横向溢出，所以这里让它**换行**而不是缩到点不准。
   三个按钮 flex:1 → 各 1/3 宽、高度仍 44px，拇指点得到，也不横滚。 */
@media (max-width: 560px) {
  .wd-foot { flex-wrap: wrap; gap: 8px; }
  .wd-badge { flex: 1 1 100%; }
  .wd-foot .wd-nav { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .wd-toast { bottom: calc(122px + env(safe-area-inset-bottom, 0px)); }
}
/* 横屏时把图放大一点，别浪费宽度 */
@media (min-height: 500px) and (min-width: 760px) {
  .wd-body { padding: 16px max(16px, calc((100% - 820px) / 2)); }
}

/* ══════════════════════════════════════════════════════════════════
   导出图片 / PDF
   ══════════════════════════════════════════════════════════════════ */

/* ── 导出选择面板（从底部摊开，手机上拇指够得着）── */
.wd-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 6;                    /* 在面板内容之上、不越过别的模块的层级 */
}
.wd-sheet[hidden] { display: none !important; }
.wd-sheet-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.wd-sheet-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 12px 12px;
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .28);
}
.wd-sheet-title { margin: 2px 0 10px; font-size: 16px; font-weight: 800; }
.wd-sheet-note { margin: 0 0 10px; color: #64748b; font-size: 13px; }
.wd-sheet-acts { display: flex; gap: 10px; margin-bottom: 8px; }
.wd-sheet-acts .wd-qbtn { flex: 1; }
.wd-sheet .wd-qbtn:disabled { opacity: .5; cursor: default; }

/* 内容二选一（词表 / 关系网） */
.wd-seg { display: flex; gap: 8px; margin-bottom: 10px; }
.wd-seg-b {
  flex: 1;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #d9e0ec; border-radius: 12px;
  background: #ffffff; color: #334155;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.wd-seg-b.is-on { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.wd-seg-b:disabled { opacity: .45; cursor: default; }

/* ── 「会写会用」一屏里的小分块（① 会写 / ② 会用）──
   用户要求"会拼和会用整合到一个屏幕"，所以两件事在同一个 .wd-card 里，
   中间用一条虚线分开，各自带小标题，不至于糊成一片。 */
.wd-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e6eaf2;
}
.wd-block:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.wd-block-title { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #2563eb; }

/* 「点开核对」：**不要求填写**，点一下自己核对答案 */
.wd-reveal-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 6px 0 2px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.wd-reveal-btn:active { background: #dbeafe; }
.wd-word-sm { font-size: 30px; margin: 6px 0 2px; }

/* 选项排成两列：一屏要装下"会写 + 会用"两件事，得省高度。
   很窄的屏（<360px）退回一列，免得中文选项被挤成两行。 */
.wd-opts-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 360px) {
  .wd-opts-inline { grid-template-columns: 1fr; }
}

/* ── 打印容器 ──
   平时**不能 display:none**：那样图片不会被解码，打印预览会是空白页。
   挪到屏幕外即可（用户看不见，但浏览器照样把它排好版）。 */
#wd-print {
  position: fixed;
  left: -20000px;
  top: 0;
  width: 1240px;
}
.wd-print-img { display: block; width: 100%; height: auto; }

/* ── 打印时：整个页面只留 #wd-print ──
   JS 里也会用内联样式藏一遍（万一这个 CSS 没被引进来）；
   这里再写一遍是为了：① @page 的纸型与页边距 ② 每张图各占一页。 */
@media print {
  @page { size: A4; margin: 0; }
  body.wd-printing { background: #ffffff; }
  body.wd-printing > *:not(#wd-print) { display: none !important; }
  body.wd-printing #wd-print {
    position: static;
    left: auto;
    width: auto;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #wd-print .wd-print-img {
    page-break-after: always;
    break-after: page;
  }
  /* 最后一张后面不能再来一次分页，否则白打一张空纸 */
  #wd-print .wd-print-img:last-child {
    page-break-after: auto;
    break-after: auto;
  }
}