/* chinese-basics.css — 语文基础（17 专题框架） */
.cb-panel { position: fixed; inset: 0; z-index: 135; background: #f8fafc; display: flex; flex-direction: column; }
.cb-panel[hidden] { display: none !important; }
.cb-head { flex: 0 0 auto; background: linear-gradient(135deg, #312e81, #4338ca); color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.cb-headwrap { flex: 1 1 auto; min-width: 0; }
.cb-title { font-size: 19px; font-weight: 800; }
.cb-sub { font-size: 12px; color: #c7d2fe; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 40px; }
.cb-btn { border: 1px solid #c7d2fe; background: #fff; color: #312e81; border-radius: 9px; padding: 6px 11px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.cb-btn.is-on { background: #4338ca; border-color: #4338ca; color: #fff; font-weight: 700; }
.cb-btn.is-main { background: #4338ca; border-color: #4338ca; color: #fff; font-weight: 700; }
.cb-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.cb-topic { border: 1px solid #e0e7ff; background: #fff; border-radius: 14px; padding: 14px 8px; cursor: pointer; text-align: center; }
.cb-topic.is-empty { opacity: .72; }
.cb-topic-icon { font-size: 26px; }
.cb-topic-name { font-size: 15px; font-weight: 800; color: #1e1b4b; margin-top: 6px; }
.cb-topic-n { font-size: 12px; color: #6366f1; margin-top: 4px; }
.cb-topic.is-empty .cb-topic-n { color: #9ca3af; }
.cb-note { font-size: 12px; color: #64748b; margin-top: 14px; }
.cb-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.cb-search { flex: 1 1 200px; min-width: 140px; padding: 8px 10px; font-size: 14px; border: 1px solid #c7d2fe; border-radius: 9px; }
.cb-cards { display: flex; flex-direction: column; gap: 10px; }
.cb-card { background: #fff; border: 1px solid #e0e7ff; border-radius: 12px; padding: 12px 14px; }
.cb-card-head { display: flex; align-items: center; gap: 8px; }
.cb-stage { font-size: 11px; background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.cb-front { font-size: 22px; font-weight: 800; color: #0f172a; }
.cb-back { font-size: 15px; color: #1e293b; margin: 8px 0 4px; }
.cb-line { font-size: 14px; color: #334155; margin: 4px 0; line-height: 1.6; }
.cb-wrong { color: #b45309; background: #fffbeb; border-left: 3px solid #f59e0b; padding: 4px 8px; border-radius: 6px; }
.cb-rhyme { color: #0f766e; }
.cb-py { color: #64748b; }
.cb-one .cb-front { font-size: 30px; }
.cb-one { border-width: 2px; }
.cb-one .cb-back { font-size: 18px; }
.cb-one .cb-line { font-size: 17px; }
.cb-one.is-speaking, .cb-speak-seg.is-speaking { background: #fef9c3; }
.cb-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.cb-count { font-size: 13px; color: #64748b; }
.cb-hint { font-size: 12px; color: #94a3b8; text-align: center; margin-top: 8px; }
.cb-empty { padding: 26px; color: #64748b; text-align: center; }
.cb-msg { font-size: 13px; color: #b91c1c; margin-top: 8px; min-height: 18px; }
.cb-quiz-type { font-size: 12px; color: #6366f1; font-weight: 700; }
.cb-quiz-q { font-size: 18px; font-weight: 800; color: #0f172a; margin: 8px 0 10px; }
.cb-opt { display: block; width: 100%; text-align: left; border: 1px solid #c7d2fe; background: #fff; border-radius: 9px; padding: 10px 12px; font-size: 15px; margin: 6px 0; cursor: pointer; }
.cb-opt.is-right { background: #dcfce7; border-color: #16a34a; }
.cb-opt.is-wrong { background: #fee2e2; border-color: #dc2626; }
.cb-explain { font-size: 14px; color: #334155; margin-top: 8px; }
.cb-fb { font-size: 15px; font-weight: 800; color: #4338ca; margin-top: 6px; }
.cb-next-q { margin-top: 10px; }
@media (max-width: 600px) { .cb-body { padding: 10px 10px 30px; } .cb-front { font-size: 20px; } .cb-one .cb-front { font-size: 26px; } }

/* ══════════ 4 种学习模式：模式入口 ══════════ */
.cb-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 12px; }
.cb-mode { min-height: 38px; touch-action: manipulation; }
/* [hidden] 在 flex/display 类样式下会失效，统一兜底（手机上尤其明显） */
.cb-panel [hidden] { display: none !important; }
.cb-card, .cb-flip, .cb-flash, .cb-level-home, .cb-level-play, .cb-blank, .cb-level-result { max-width: 100%; box-sizing: border-box; }
.cb-opt { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* ══════════ ① 卡片翻转（CSS 3D，手机优先） ══════════ */
.cb-flip { perspective: 1200px; }
.cb-flip-card {
  position: relative;
  height: clamp(300px, 56vh, 440px);
  transform-style: preserve-3d;
  transition: transform .45s ease;
  will-change: transform;
  cursor: pointer;
  touch-action: pan-y;
}
.cb-flip-card.is-flipped { transform: rotateY(180deg); }
.cb-flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.cb-flip-face {
  position: absolute; inset: 0;
  background: #fff;
  border: 2px solid #e0e7ff;
  border-radius: 16px;
  padding: 18px;
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cb-flip-back { transform: rotateY(180deg); background: #f8faff; }
.cb-flip-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.cb-flip-front-text { font-size: clamp(34px, 9vw, 56px); font-weight: 900; color: #1e1b4b; line-height: 1.25; overflow-wrap: anywhere; }
.cb-flip-py { color: #6366f1; font-size: 16px; }
.cb-flip-back-text { font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1.6; overflow-wrap: anywhere; }
.cb-flip-back .cb-line { font-size: 15px; }
.cb-flip-cue { color: #94a3b8; font-size: 13px; }
.cb-flip-nav { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .cb-flip-card { transition: none; } }

/* ══════════ ② 挖空回忆 ══════════ */
.cb-blank-front { font-size: clamp(30px, 8vw, 44px); font-weight: 900; color: #1e1b4b; text-align: center; margin: 10px 0 16px; overflow-wrap: anywhere; }
.cb-blank-line { font-size: 17px; line-height: 1.95; color: #1e293b; overflow-wrap: anywhere; }
.cb-hole {
  display: inline-block; min-width: 44px; padding: 0 6px;
  border-bottom: 3px solid #4338ca; color: #4338ca;
  font-weight: 800; text-align: center;
}
.cb-hole.is-revealed { background: #dcfce7; border-bottom-color: #16a34a; color: #166534; border-radius: 5px; }
.cb-blank-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cb-blank-marked { font-size: 12px; color: #64748b; margin-top: 8px; }

/* ══════════ ③ 快速记忆（快闪）—— 2026-10-20 改版：记忆友好的竖版卡 ══════════
   版式（从上到下）：专题·学段 + 第 3/726 条 · 状态 ／ 细进度条 ／ 正面大字 + 拼音
   ／ 分割线 ／ 释义·例句·易错·考点·考频·口诀·出处·解析 ／ 底部工具条。
   记忆友好的四条硬约束（测试会量）：
     · 正面 40~56px（长词条自动降到 30/22px，不撑破屏）
     · 拼音 18~24px 浅色、紧跟正面
     · 易错整块警示色（橙底 + 左边框），关键差异（不读 fèn / 错写：威协）加粗标红
     · 正文行距 1.8，深色主题单独给一套变量，375 宽不横滚
   动效只用淡入淡出（进度条），不做旋转/弹跳。 */
.cb-panel.is-flash .cb-head,
.cb-panel.is-flash .cb-bar,
.cb-panel.is-flash .cb-modes,
.cb-panel.is-flash .cb-tools,
.cb-panel.is-flash .cb-msg { display: none !important; }
.cb-panel.is-flash .cb-body { padding: 0; overflow: hidden; }
.cb-panel.is-flash .cb-cards { display: block; }

.cb-flash {
  --fl-ink: #1e1b4b;
  --fl-ink2: #4338ca;
  --fl-muted: #5c6579;
  --fl-line: rgba(67, 56, 202, .16);
  --fl-chip: #eef2ff;
  --fl-warn-bg: #fff7ed;
  --fl-warn-line: #f59e0b;
  --fl-warn-ink: #9a3412;
  --fl-em: #b91c1c;
  --fl-rhyme: #0f766e;
  --fl-source: #7c3aed;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 10px 16px 118px;
  text-align: left;
  overflow: hidden;
  transition: background .3s ease;
}
/* 顶栏：第 3 / 726 条 + 状态 */
.cb-flash-top { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cb-flash-tag {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--fl-line); background: rgba(255, 255, 255, .72);
  font-size: 12px; font-weight: 800; color: var(--fl-ink2);
}
.cb-flash-count {
  flex: 0 0 auto; font-size: 13px; font-weight: 900; letter-spacing: .02em;
  color: var(--fl-ink2); font-variant-numeric: tabular-nums;
}
.cb-flash-state {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 12px; color: var(--fl-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 最后 1 秒的细进度条：朗读时不出现，暂停时停在原处 */
.cb-flash-meter {
  flex: 0 0 auto; height: 4px; margin: 8px 2px 0; border-radius: 999px;
  background: rgba(67, 56, 202, .12); overflow: hidden;
  opacity: 0; transition: opacity .15s ease;
}
.cb-flash.is-tail .cb-flash-meter,
.cb-flash.is-paused .cb-flash-meter { opacity: 1; }
.cb-flash-meter-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: #4338ca; }
.cb-flash.is-paused .cb-flash-meter-fill { background: #94a3b8; }

/* 卡片主体（点一下 = 跳过） */
.cb-flash-stage {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column;
  cursor: pointer; touch-action: manipulation;
}
.cb-flash-hero { flex: 0 0 auto; text-align: center; padding: clamp(8px, 2vh, 22px) 0 12px; }
.cb-flash-front {
  font-size: clamp(40px, 10.5vw, 56px);
  font-weight: 900; line-height: 1.16; letter-spacing: .01em;
  color: var(--fl-ink); overflow-wrap: anywhere; word-break: break-word;
  /* 正面是主角：不能被选中态/长按菜单盖住，但**文字仍可选**（选中问 AI 要用） */
  -webkit-user-select: text; user-select: text;
}
.cb-flash-front.is-mid { font-size: clamp(30px, 7.6vw, 44px); }
.cb-flash-front.is-long { font-size: clamp(22px, 5.4vw, 30px); line-height: 1.35; }
.cb-flash-py {
  margin-top: 4px;
  font-size: clamp(20px, 5vw, 24px);
  line-height: 1.45; font-weight: 600; letter-spacing: .06em;
  color: var(--fl-ink2); opacity: .78; overflow-wrap: anywhere;
}
.cb-flash-rule {
  flex: 0 0 auto; height: 1px; margin: 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--fl-line) 18%, var(--fl-line) 82%, transparent);
}
/* 分割线以下：释义 / 例句 / 易错 / … */
.cb-flash-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 2px 2px 6px;
}
.cb-flash-sec { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 5px 2px; }
.cb-flash-label {
  flex: 0 0 auto; min-width: 42px; margin-top: 2px; padding: 1px 7px;
  border-radius: 6px; background: var(--fl-chip); color: var(--fl-ink2);
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
.cb-flash-text {
  flex: 1 1 auto; min-width: 0;
  font-size: 17px; line-height: 1.8; color: var(--fl-ink);
  overflow-wrap: anywhere; word-break: break-word;
  -webkit-user-select: text; user-select: text;
}
.cb-flash-sec.is-back .cb-flash-text { font-size: 18px; font-weight: 600; }
/* 易错点：整块警示色，一眼看到（视觉锚点） */
.cb-flash-sec.is-wrong {
  margin: 5px 0; padding: 8px 10px;
  background: var(--fl-warn-bg);
  border-left: 4px solid var(--fl-warn-line);
  border-radius: 8px;
}
.cb-flash-sec.is-wrong .cb-flash-label { background: #ffedd5; color: #9a3412; }
.cb-flash-sec.is-wrong .cb-flash-text { color: var(--fl-warn-ink); font-weight: 600; }
/* 关键差异（不读 fèn / 错写：威协）加粗标红 */
.cb-flash-em {
  color: var(--fl-em); font-weight: 900;
  background: rgba(220, 38, 38, .09);
  border-radius: 3px; padding: 0 2px;
}
.cb-flash-sec.is-rhyme .cb-flash-text { color: var(--fl-rhyme); font-weight: 700; }
.cb-flash-sec.is-exam .cb-flash-text { font-size: 14px; color: var(--fl-muted); }
.cb-flash-sec.is-source .cb-flash-text { font-size: 14px; color: var(--fl-source); }

/* 底部：提示 + 工具条（暂停 / 读全部 / 下一条 / 退出） */
.cb-flash-hint {
  position: absolute; left: 0; right: 0;
  bottom: calc(74px + env(safe-area-inset-bottom));
  padding: 0 12px; text-align: center;
  font-size: 11px; line-height: 1.4; color: var(--fl-muted);
  pointer-events: none;
}
.cb-flash-ctrl {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .86);
  border-top: 1px solid var(--fl-line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cb-flash-ctrl .cb-btn { min-height: 44px; font-size: 14px; touch-action: manipulation; }
.cb-flash-ctrl .cb-btn.is-on { background: #4338ca; border-color: #4338ca; color: #fff; font-weight: 700; }

/* 深色主题：整张卡换成深底 + 浅字，专题色只当顶部细线的点缀 */
html[data-theme="dark"] .cb-flash {
  background: #14161d !important;
  --fl-ink: #e9ecf3;
  --fl-ink2: #c7d2fe;
  --fl-muted: #98a2b8;
  --fl-line: rgba(148, 163, 255, .22);
  --fl-chip: #232738;
  --fl-warn-bg: #2b1f10;
  --fl-warn-line: #f59e0b;
  --fl-warn-ink: #fcd34d;
  --fl-em: #fca5a5;
  --fl-rhyme: #5eead4;
  --fl-source: #c4b5fd;
}
html[data-theme="dark"] .cb-flash-tag { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .cb-flash-sec.is-wrong .cb-flash-label { background: rgba(245, 158, 11, .22); color: #fcd34d; }
html[data-theme="dark"] .cb-flash-em { background: rgba(248, 113, 113, .16); }
html[data-theme="dark"] .cb-flash-ctrl { background: rgba(20, 22, 29, .9); }
html[data-theme="dark"] .cb-flash-meter { background: rgba(148, 163, 255, .18); }
html[data-theme="dark"] .cb-flash-meter-fill { background: #818cf8; }

/* ══════════ ④ 闯关 ══════════ */
.cb-level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 12px 0; }
.cb-level-cell {
  min-height: 60px; padding: 8px;
  border: 1px solid #c7d2fe; border-radius: 12px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
}
.cb-level-cell.is-passed { background: #dcfce7; border-color: #16a34a; }
.cb-level-cell.is-open { border-color: #4338ca; box-shadow: inset 0 0 0 2px #e0e7ff; }
.cb-level-cell.is-locked { opacity: .55; background: #f1f5f9; }
.cb-level-no { font-size: 14px; font-weight: 800; color: #1e1b4b; }
.cb-level-tag { font-size: 11px; color: #64748b; }
.cb-level-play .cb-opt { font-size: 14px; line-height: 1.55; }

@media (max-width: 600px) {
  .cb-btn, .cb-mode, .cb-opt, .cb-level-cell { min-height: 44px; }
  .cb-mode { padding: 8px 10px; font-size: 13px; }
  .cb-flip-card { height: clamp(300px, 52vh, 480px); }
  .cb-flip-face { padding: 16px; }
  .cb-flip-front-text { font-size: clamp(32px, 10vw, 48px); }
  .cb-blank-front { font-size: clamp(30px, 10vw, 40px); }
  .cb-blank-line { font-size: 16px; }
  .cb-level-grid { grid-template-columns: repeat(3, 1fr); }
  .cb-level-cell { min-height: 64px; }
  .cb-flash { padding: 8px 12px 120px; }
  .cb-flash-front { font-size: clamp(42px, 12vw, 56px); }
  .cb-flash-text { font-size: 16px; line-height: 1.8; }
  .cb-flash-sec.is-back .cb-flash-text { font-size: 17px; }
  .cb-flash-label { min-width: 38px; font-size: 11px; }
  .cb-flash-ctrl { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 7px; }
  .cb-flash-ctrl .cb-btn { min-height: 44px; padding: 5px 9px; font-size: 13px; }
  .cb-flash-hint { bottom: calc(70px + env(safe-area-inset-bottom)); font-size: 10.5px; }
}

/* ══════════ 名句默写入口（单独一张宽卡，不算进 17 个专题） ══════════ */
.cb-mingju-entry {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 12px; padding: 14px 16px; box-sizing: border-box;
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
  border: 1px solid #fed7aa; border-radius: 14px;
  cursor: pointer; text-align: left; touch-action: manipulation;
}
.cb-mingju-entry.is-empty { opacity: .72; }
.cb-mingju-icon { font-size: 30px; flex: 0 0 auto; }
.cb-mingju-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cb-mingju-name { font-size: 17px; font-weight: 900; color: #7c2d12; }
.cb-mingju-desc { font-size: 12px; color: #9a3412; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-mingju-n { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #c2410c; }
.cb-source { color: #7c3aed; }

/* ══════════ 题型选择页 ══════════ */
.cb-typepick { padding: 12px 14px; }
.cb-typepick-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 8px 0; padding: 12px 14px; box-sizing: border-box;
  border: 1px solid #c7d2fe; border-radius: 12px; background: #fff;
  cursor: pointer; text-align: left; touch-action: manipulation;
}
.cb-typepick-icon { font-size: 22px; flex: 0 0 auto; }
.cb-typepick-name { flex: 1 1 auto; font-size: 16px; font-weight: 800; color: #1e1b4b; min-width: 0; }
.cb-typepick-n { flex: 0 0 auto; font-size: 12px; color: #6366f1; }
.cb-typepick-item.is-empty { opacity: .55; background: #f8fafc; cursor: default; }
.cb-typepick-item.is-empty .cb-typepick-n { color: #9ca3af; }

/* ══════════ 填空题 / 默写题 ══════════ */
.cb-fill-box { margin: 4px 0 10px; }
.cb-fill-input {
  width: 100%; box-sizing: border-box; min-height: 48px;
  padding: 12px 14px; font-size: 18px; color: #0f172a;
  border: 2px solid #c7d2fe; border-radius: 10px; background: #fff;
  outline: none;
}
.cb-fill-input:focus { border-color: #4338ca; box-shadow: 0 0 0 3px #e0e7ff; }
.cb-fill-input.is-right { border-color: #16a34a; background: #f0fdf4; }
.cb-fill-input.is-wrong { border-color: #dc2626; background: #fef2f2; }
.cb-fill-echo { font-size: 13px; color: #64748b; margin-top: 6px; overflow-wrap: anywhere; }
.cb-fill-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cb-fill-actions .cb-btn { touch-action: manipulation; }

/* ══════════ 连线题（点左 → 点右，手机不拖拽） ══════════ */
.cb-match-tip { font-size: 12px; color: #64748b; margin: 2px 0 8px; }
.cb-match { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.cb-match-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cb-match-head { font-size: 12px; font-weight: 700; color: #6366f1; text-align: center; }
.cb-match-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  min-width: 0; min-height: 48px; box-sizing: border-box;
  padding: 8px 9px; border: 1px solid #c7d2fe; border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left;
  touch-action: manipulation;
}
.cb-match-no {
  flex: 0 0 auto; width: 20px; height: 20px; line-height: 20px;
  border-radius: 50%; background: #eef2ff; color: #4338ca;
  font-size: 11px; font-weight: 800; text-align: center;
}
.cb-match-text { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; color: #1e293b; }
.cb-pair-badge {
  flex: 0 0 auto; min-width: 18px; height: 18px; line-height: 18px;
  border-radius: 9px; background: #4338ca; color: #fff;
  font-size: 11px; font-weight: 800; text-align: center; padding: 0 4px;
}
.cb-match-item.is-sel { border-color: #4338ca; box-shadow: inset 0 0 0 2px #c7d2fe; background: #eef2ff; }
.cb-match-item.is-paired { border-color: #a5b4fc; background: #f5f3ff; }
.cb-match-item.is-right { border-color: #16a34a; background: #dcfce7; }
.cb-match-item.is-wrong { border-color: #dc2626; background: #fee2e2; }
.cb-match-item:disabled { cursor: default; opacity: 1; }

/* 错题卡：4 种新题型也能看答案 + 重做 */
.cb-wrongcard .cb-quiz-q { font-size: 16px; }
.cb-wrongcard .cb-explain { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .cb-mingju-entry { min-height: 62px; padding: 12px 13px; gap: 10px; }
  .cb-mingju-name { font-size: 16px; }
  .cb-typepick-item { min-height: 52px; }
  .cb-fill-input { min-height: 50px; font-size: 17px; }
  .cb-fill-actions .cb-btn { min-height: 44px; }
  .cb-match { gap: 6px; }
  .cb-match-item { min-height: 52px; padding: 7px 8px; }
  .cb-match-text { font-size: 13px; }
  .cb-match-no { width: 18px; height: 18px; line-height: 18px; font-size: 10px; }
  .cb-match-tip { font-size: 11px; }
}

/* ══════════ 工具行：上传书页 / 导出 ══════════ */
.cb-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.cb-tools .cb-btn { min-height: 38px; touch-action: manipulation; }
@media (max-width: 600px) { .cb-tools .cb-btn { min-height: 44px; } }

/* ══════════ ⑦ 上传书页 ══════════ */
.cb-up-form { display: flex; flex-direction: column; gap: 10px; }
.cb-up-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cb-up-label { font-size: 12px; font-weight: 700; color: #4338ca; }
.cb-select {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  min-height: 38px; padding: 6px 10px; font-size: 14px; color: #1e1b4b;
  border: 1px solid #c7d2fe; border-radius: 9px; background: #fff;
}
.cb-select:focus { outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px #e0e7ff; }
.cb-up-note-input { width: 100%; box-sizing: border-box; }
.cb-file { display: none; }
.cb-file[hidden] { display: none !important; }
.cb-up-pick { align-self: flex-start; }
.cb-up-msg { font-size: 13px; color: #4338ca; min-height: 18px; overflow-wrap: anywhere; }
.cb-up-head { font-size: 14px; font-weight: 800; color: #1e1b4b; margin: 16px 0 8px; }
.cb-up-list { display: flex; flex-direction: column; gap: 8px; }
.cb-up-empty { font-size: 12px; color: #64748b; padding: 10px 0; }
.cb-up-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border: 1px solid #e0e7ff; border-radius: 12px; padding: 10px;
  min-width: 0;
}
.cb-up-thumb {
  flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; background: #eef2ff; border: 1px solid #e0e7ff;
}
.cb-up-main { flex: 1 1 auto; min-width: 0; }
.cb-up-topic { font-size: 14px; font-weight: 800; color: #1e1b4b; }
.cb-up-status { font-size: 12px; margin-top: 4px; }
.cb-up-status.is-wait { color: #b45309; }
.cb-up-status.is-ok { color: #166534; }
.cb-up-status.is-bad { color: #b91c1c; }
.cb-up-note { font-size: 12px; color: #64748b; margin-top: 4px; overflow-wrap: anywhere; }
.cb-up-done { font-size: 12px; color: #166534; margin-top: 4px; }

/* ══════════ ⑧ 导出 ══════════ */
.cb-exp-card { display: flex; flex-direction: column; gap: 10px; }
.cb-exp-label { font-size: 14px; font-weight: 800; color: #1e1b4b; }
.cb-exp-scopes { display: flex; flex-direction: column; gap: 8px; }
.cb-exp-scope {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; box-sizing: border-box; text-align: left; padding: 10px 12px;
  white-space: normal; touch-action: manipulation;
}
.cb-exp-scope-name { font-size: 14px; font-weight: 700; }
.cb-exp-scope-note { font-size: 12px; color: #64748b; }
.cb-exp-scope.is-on { background: #eef2ff; border-color: #4338ca; box-shadow: inset 0 0 0 2px #c7d2fe; }
.cb-exp-scope.is-empty { opacity: .55; cursor: default; }
.cb-exp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-exp-actions .cb-btn { touch-action: manipulation; }
.cb-exp-msg { font-size: 13px; color: #b91c1c; min-height: 18px; overflow-wrap: anywhere; }
.cb-exp-info { background: #f0fdf4; border: 1px solid #86efac; border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.cb-exp-info-title { font-size: 14px; font-weight: 800; color: #166534; }
.cb-exp-info-meta { font-size: 12px; color: #15803d; margin-top: 4px; }
.cb-exp-preview-title { font-size: 12px; color: #64748b; margin: 14px 0 6px; }
.cb-exp-preview { display: block; width: 100%; max-width: 620px; height: auto; border: 1px solid #e0e7ff; border-radius: 10px; background: #fff; }
@media (max-width: 600px) {
  .cb-exp-actions .cb-btn { min-height: 44px; }
  .cb-up-pick { min-height: 44px; }
  .cb-select { min-height: 44px; }
}

/* ══════════ ⑨ 语音作答（读音题） ══════════ */
.cb-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cb-voice-btn {
  min-height: 44px; padding: 8px 16px;
  border: 1px solid #a5b4fc; border-radius: 999px;
  background: #eef2ff; color: #312e81;
  font-size: 15px; font-weight: 800; cursor: pointer;
  touch-action: none;            /* 按住说话：别让浏览器把长按当滚动/选择 */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.cb-voice-btn.is-listening {
  background: #dc2626; border-color: #dc2626; color: #fff;
  box-shadow: 0 0 0 4px #fee2e2;
}
.cb-voice-msg { flex: 1 1 180px; min-width: 0; font-size: 12px; color: #64748b; overflow-wrap: anywhere; }
.cb-voice-msg:empty { display: none; }