/* ══════════════════════════════════════════════════════════════════
   文言实虚词（classics-drill.js）的样式 —— 类名一律 cl- 前缀。

   ⚠️ 为什么每个显示属性都要小心：
     这个模块用 el.hidden 控制显隐，而 `[hidden]{display:none}` 和
     `.cl-view{display:block}` 优先级相同、我们的样式表在后写的赢 ——
     所以文件底部必须有 `[hidden]{display:none!important}` 兜底
     （check-hidden-css.mjs 会查这一条）。
   ⚠️ 面板 z-index 必须 ≥ 75，且和背单词（75）/背诵训练（73）这些
     独立面板同一层；本模块用 76，保证从入口点开时压在最上面。
   ══════════════════════════════════════════════════════════════════ */

.cl-panel {
  position: fixed;
  inset: 0;
  z-index: 76;                      /* 和背单词同级，独立面板 */
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  color: #111827;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ── 顶栏 ── */
.cl-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}
.cl-back, .cl-export, .cl-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cl-back:active, .cl-export:active, .cl-close:active { background: #e2e8f0; }
.cl-titles { flex: 1 1 auto; min-width: 0; }
.cl-title { font-size: 16px; font-weight: 700; }
.cl-sub { font-size: 12px; color: #64748b; margin-top: 1px; }

/* ── 正文 ── */
.cl-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px 96px;          /* 底部留出底栏高度 */
}
.cl-view { display: block; }

/* ── 列表页：筛选 / 搜索 / 卡片 ── */
.cl-filters { display: flex; gap: 8px; margin-bottom: 10px; }
.cl-filter {
  padding: 6px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 14px;
  cursor: pointer;
}
.cl-filter.is-on {
  background: #4338ca;
  border-color: #4338ca;
  color: #ffffff;
  font-weight: 700;
}

.cl-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  font-size: 15px;
  color: #111827;
}

.cl-cards { display: flex; flex-direction: column; gap: 10px; }

.cl-card {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
}
.cl-card:active { background: #f1f5f9; }
.cl-card-top { display: flex; align-items: baseline; gap: 10px; }
.cl-card-word { font-size: 30px; font-weight: 800; line-height: 1.15; color: #111827; }
.cl-card-ipa { font-size: 15px; color: #2563eb; }
.cl-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 13px;
  color: #64748b;
}
.cl-card-n { color: #0f766e; font-weight: 700; }
.cl-card-kind {
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
}
.cl-card-kind.is-xu { background: #fef3c7; color: #92400e; }
.cl-card-done { color: #0f766e; }

/* ── 列表顶部：录入进度（已录入 9 / 132） ── */
.cl-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f1f5f9;
  font-size: 13px;
  color: #475569;
}
.cl-progress-t { font-weight: 700; color: #334155; white-space: nowrap; }
.cl-progress-bar {
  flex: 1 1 auto;
  height: 8px;
  min-width: 40px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.cl-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #4338ca);
}
.cl-progress-s { font-size: 12px; color: #94a3b8; white-space: nowrap; }

/* ── 待录入的字（132 个字里还没录内容的） ──
   灰着、写「还没有内容」；照旧能点（点进去给一句提示，不报错）。 */
.cl-card-empty {
  border-style: dashed;
  border-color: #e2e8f0;
  background: #f8fafc;
}
.cl-card-empty .cl-card-word { color: #94a3b8; }
.cl-card-todo {
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 12px;
}

/* 空态（高中还没有内容 / 搜不到） */
.cl-empty { padding: 48px 16px; text-align: center; }
.cl-empty-icon { font-size: 40px; margin-bottom: 10px; }
.cl-empty-t { font-size: 17px; font-weight: 700; color: #334155; }
.cl-empty-s { margin-top: 8px; font-size: 14px; color: #64748b; line-height: 1.6; }

/* ── 背诵页 ── */
.cl-drill { display: flex; flex-direction: column; gap: 14px; }

.cl-hero {
  padding: 18px 16px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  text-align: center;
}
.cl-char {
  font-size: 82px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 2px;
  color: #111827;
}
.cl-pinyin { margin-top: 4px; font-size: 20px; color: #2563eb; }
.cl-orig { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cl-orig-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff7e6;
  border: 1px solid #ffe1a8;
  color: #8a5a00;
  font-size: 12px;
}
.cl-orig-text { font-size: 17px; font-weight: 700; color: #b45309; }
.cl-etym {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 12px;
}
.cl-etym-tag {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
}
.cl-etym-text { font-size: 13px; color: #475569; line-height: 1.6; }

/* 义项 */
.cl-senses { display: flex; flex-direction: column; gap: 10px; }
.cl-senses-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
}
.cl-senses-count { font-weight: 700; color: #4338ca; }
.cl-senses-page { color: #94a3b8; }

.cl-pos {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.cl-pos-t {
  padding: 3px 10px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
}
/* 多音字的读音标签（被 bèi / pī）—— 和词性标签分开，别混成一个 */
.cl-read-tag {
  padding: 3px 10px;
  border-radius: 8px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #4338ca;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}

.cl-sense {
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.cl-sense-h { display: flex; align-items: flex-start; gap: 8px; }
.cl-sense-no {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: #4338ca;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.cl-sense-def {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #111827;
}
.cl-sense-say {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #eef2ff;
  font-size: 15px;
  cursor: pointer;
}
.cl-sense-say:active { background: #e0e7ff; }

.cl-ex {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 8px;
  padding-left: 30px;
  flex-wrap: wrap;
}
.cl-ex-en { font-size: 15px; line-height: 1.6; color: #334155; }
.cl-ex-src { font-size: 12px; color: #94a3b8; }
/* 例句的白话翻译：占整行、带青绿底色和左边线 —— 学生一眼看出"这句人话是解释"。
   ⚠️ 用户第 10 轮抱怨的就是"只有文言看不懂"，所以这一行必须**显眼**，
      不能做成一串灰色小字（那等于白做）。 */
.cl-ex-tr {
  flex: 1 0 100%;
  margin-top: 2px;
  padding: 3px 8px;
  border-left: 3px solid #14b8a6;
  border-radius: 4px;
  background: #f0fdfa;
  font-size: 13.5px;
  line-height: 1.65;
  color: #0f766e;
}
.cl-ex.is-extra { margin-top: 4px; }

/* 故事助记 */
.cl-story {
  padding: 14px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 16px;
}
.cl-story-title { font-size: 15px; font-weight: 700; color: #92400e; margin-bottom: 8px; }
.cl-story-text { margin: 0; font-size: 16px; line-height: 2; color: #111827; }
.cl-blank {
  display: inline-block;
  min-width: 30px;
  margin: 0 2px;
  padding: 1px 6px;
  border: 0;
  border-bottom: 2px solid #b45309;
  border-radius: 4px;
  background: #fef3c7;
  color: #b45309;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: baseline;
}
.cl-blank.is-open { background: #d1fae5; border-bottom-color: #047857; color: #047857; }
.cl-blank-tip { margin-top: 8px; font-size: 12px; color: #a16207; }
.cl-story-trans-tag {
  margin-top: 12px;
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
}
.cl-story-trans { margin-top: 6px; font-size: 14px; line-height: 1.7; color: #475569; }

/* 口诀速记（白/比 是这种助记；没有挖空，整句给出来） */
.cl-mnem {
  padding: 14px 16px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 16px;
}
.cl-mnem-title { font-size: 15px; font-weight: 700; color: #9f1239; margin-bottom: 8px; }
.cl-mnem-text { margin: 0; font-size: 17px; line-height: 2; color: #7c2d12; letter-spacing: 1px; }
.cl-mnem-say {
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px solid #fecdd3;
  border-radius: 999px;
  background: #ffffff;
  color: #9f1239;
  font-size: 13px;
  cursor: pointer;
}
.cl-mnem-say:active { background: #ffe4e6; }

/* 答题 */
.cl-quiz {
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 16px;
}
.cl-quiz-title { font-size: 15px; font-weight: 700; color: #1e40af; margin-bottom: 8px; }
.cl-quiz-ex {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
}
.cl-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cl-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  font-size: 15px;
  color: #111827;
  cursor: pointer;
}
.cl-opt:disabled { cursor: default; }
.cl-opt-k {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.cl-opt.is-right { background: #ecfdf5; border-color: #34d399; }
.cl-opt.is-right .cl-opt-k { background: #047857; color: #ffffff; }
.cl-opt.is-wrong { background: #fef2f2; border-color: #f87171; }
.cl-opt.is-wrong .cl-opt-k { background: #b91c1c; color: #ffffff; }
.cl-opt-t { flex: 1 1 auto; line-height: 1.5; }

.cl-quiz-fb {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.cl-quiz-fb.is-ok { background: #ecfdf5; color: #047857; }
.cl-quiz-fb.is-no { background: #fef2f2; color: #b91c1c; }
.cl-quiz-fb-t { font-weight: 700; margin-right: 8px; }

.cl-hint { margin-top: 6px; font-size: 13px; color: #64748b; text-align: center; }

/* ── 每个字自己的「刷这个字的题」入口（背诵页，大字下方） ── */
.cl-word-quiz {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 4px;
  padding: 12px 14px;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  text-align: left;
  cursor: pointer;
}
.cl-word-quiz:active { background: #dbeafe; }
.cl-wq-icon { font-size: 22px; }
.cl-wq-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cl-wq-t { font-size: 16px; font-weight: 800; color: #3730a3; }
.cl-wq-s { font-size: 12px; color: #6366f1; }
.cl-wq-go { font-size: 13px; font-weight: 700; color: #4338ca; white-space: nowrap; }

/* ── 列表卡片上的「刷题」小按钮（只有有内容的字才有） ── */
/* 卡片本身从 button 改成了 div role=button：button 里不能再嵌 button，
   否则这个「刷题」点不到（嵌套按钮是无效 HTML）。这里给 div 补上 button 的观感。 */
.cl-card {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.cl-card-quiz {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.cl-card-quiz:active { background: #dbeafe; }
.cl-cq-icon { font-size: 13px; }

/* ── 专项刷题 ── */

/* 列表页顶部的刷题入口：比卡片更醒目（用户点进来最想干的两件事之一） */
.cl-quiz-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid #c7d2fe;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  text-align: left;
  cursor: pointer;
}
.cl-quiz-entry:active { background: #dbeafe; }
.cl-qe-icon { font-size: 24px; }
.cl-qe-t { font-size: 17px; font-weight: 800; color: #3730a3; }
.cl-qe-s { margin-left: auto; font-size: 12px; color: #6366f1; }

/* ── 上传书页（学生端，用户 2026-10-18 需求）──
   入口比刷题入口"轻"（上传不是学习动作），弹层盖在面板之上。 */
.cl-upload-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 11px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
}
.cl-upload-entry:active { background: #f1f5f9; }
.cl-ue-icon { font-size: 19px; }
.cl-ue-t { font-size: 15px; font-weight: 700; color: #334155; }
.cl-ue-s { margin-left: auto; font-size: 12px; color: #94a3b8; }

/* 我上传的书页（有记录才显示） */
.cl-mine {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}
.cl-mine-t { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: #475569; }
.cl-mine-row { display: flex; gap: 10px; padding: 6px 0; align-items: center; }
.cl-mine-row + .cl-mine-row { border-top: 1px dashed #e2e8f0; }
.cl-mine-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  object-fit: cover;
  background: #f1f5f9;
}
.cl-mine-info { flex: 1 1 auto; min-width: 0; }
.cl-mine-line { font-size: 13px; font-weight: 600; color: #334155; }
.cl-mine-note { margin-top: 2px; font-size: 12px; color: #94a3b8; word-break: break-all; }
.cl-chip { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.cl-chip-pending { background: #fef3c7; color: #92400e; }
.cl-chip-approved { background: #dcfce7; color: #166534; }
.cl-chip-rejected { background: #fee2e2; color: #991b1b; }

/* 上传弹层（面板 children 里，z-index 要盖住面板内容） */
.cl-upmodal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 23, 42, .45);
}
.cl-upcard {
  width: 100%;
  max-height: 88%;
  overflow: auto;
  box-sizing: border-box;
  padding: 16px 16px 20px;
  border-radius: 18px 18px 0 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cl-uphead { display: flex; align-items: center; }
.cl-uptitle { font-size: 17px; font-weight: 800; color: #111827; }
.cl-upclose {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 15px;
  cursor: pointer;
}
.cl-uplv { font-size: 12px; line-height: 1.5; color: #64748b; }
.cl-upfilerow { display: flex; align-items: center; }
.cl-upfile { display: none; }

/* ── 批量上传：队列预览 / 计数 / 进度条 / 正在传的那张 / 失败重试 / 断点提示 ──
   用户拍 100 张：队列只显示前 12 张缩略图（再多显示「还有 N 张」），
   进度用「已上传 x / N」+ 进度条；失败可单独重试。 */
.cl-upresume {
  padding: 8px 10px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
}
.cl-upresume-t { font-size: 12px; line-height: 1.5; color: #92400e; }
.cl-upqueue {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-height: 26vh;
  overflow: auto;
}
.cl-upthumb { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; background: #f1f5f9; }
.cl-upthumb-img { display: block; width: 100%; height: 64px; object-fit: cover; }
.cl-upthumb-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, .62);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.cl-upmore { grid-column: 1 / -1; text-align: center; font-size: 12px; color: #64748b; padding: 2px 0; }
.cl-upcount { font-size: 13px; font-weight: 700; color: #334155; }
.cl-upprog { display: flex; flex-direction: column; gap: 4px; }
.cl-upprog-box { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.cl-upprog-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6366f1, #818cf8); transition: width .2s; }
.cl-upprog-t { font-size: 12px; color: #4338ca; font-weight: 700; }
.cl-upcur { min-height: 16px; font-size: 12px; color: #64748b; word-break: break-all; }
.cl-upbtnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-mine-more {
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  cursor: pointer;
}
/* 列表页顶部「M 张失败 [展开重试]」：上传结束后整个弹层收起，只留这一行。
   点「展开重试」才重新打开弹层、展开失败的那几张。 */
.cl-upfail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 9px 12px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fef2f2;
}
.cl-upfail-t { font-size: 13px; font-weight: 700; color: #b91c1c; }
.cl-upfail .cl-btn { margin-left: auto; }

/* 列表页顶部「上次还有 N 张没传完」提示 */
.cl-resume {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 14px;
  background: #fffbeb;
}
.cl-resume-t { font-size: 13px; font-weight: 700; color: #92400e; }
.cl-resume-s { margin-top: 3px; font-size: 12px; color: #b45309; }
.cl-resume-row { display: flex; gap: 8px; margin-top: 8px; }
.cl-upinput {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-size: 15px;
  color: #111827;
  background: #ffffff;
}
.cl-upinput:focus { outline: 2px solid #c7d2fe; border-color: #6366f1; }
.cl-upmsg { min-height: 18px; font-size: 13px; color: #b45309; }

.cl-view-quiz { display: block; }
.cl-quiz-wrap { display: flex; flex-direction: column; gap: 12px; }
.cl-quiz-loading { padding: 40px 0; text-align: center; font-size: 15px; color: #64748b; }

.cl-quiz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
}
.cl-quiz-no { font-weight: 700; color: #4338ca; }
.cl-quiz-score { color: #0f766e; }

/* 题目卡 */
.cl-question {
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
}
.cl-qtype {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 700;
}
.cl-ask { font-size: 17px; font-weight: 700; line-height: 1.5; color: #111827; }
.cl-stem {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border-left: 4px solid #6366f1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cl-stem-t { font-size: 17px; line-height: 1.7; color: #111827; }
.cl-look-answer { margin-top: 14px; width: 100%; }

/* 错题本抽来的题：答案 + 解析 + 自评 */
.cl-answer {
  margin-top: 12px;
  padding: 12px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
}
.cl-answer-t { font-size: 15px; font-weight: 700; color: #047857; line-height: 1.6; }
.cl-answer-a { margin-top: 8px; font-size: 14px; color: #065f46; line-height: 1.7; }
.cl-self { display: flex; gap: 10px; margin-top: 12px; }
.cl-self .cl-btn { flex: 1 1 0; text-align: center; }

/* ── 刷题：进度条 / 连对 / 声音开关 / 重做 / 朗读（第 16 轮） ── */
.cl-quiz-progress { display: flex; flex-direction: column; gap: 8px; }
.cl-quiz-progress-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
}
.cl-quiz-combo {
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  font-size: 12.5px;
  font-weight: 800;
  animation: cl-combo-pop .35s ease-out;
}
@keyframes cl-combo-pop {
  0% { transform: scale(.7); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.cl-quiz-sound {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  cursor: pointer;
}
.cl-quiz-sound[data-on="1"] { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.cl-quiz-bar {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.cl-quiz-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #818cf8, #4338ca);
  transition: width .25s ease-out;
}

/* 选项：按压动画 + 答对/答错标记（答错时正确答案同时标绿） */
.cl-opt { transition: transform .08s ease-out, background .15s, border-color .15s; }
.cl-opt:not(:disabled):active { transform: scale(.985); background: #eef2ff; }
.cl-opt.is-right {
  border-color: #34d399 !important;
  background: #ecfdf5 !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, .35) inset;
}
.cl-opt.is-wrong {
  border-color: #f87171 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, .3) inset;
}
.cl-opt-mark {
  margin-left: auto;
  font-size: 16px;
  font-weight: 900;
}
.cl-opt.is-right .cl-opt-mark { color: #059669; }
.cl-opt.is-wrong .cl-opt-mark { color: #dc2626; }
.cl-retry-hint { color: #b45309; background: #fffbeb; border-radius: 10px; padding: 8px 10px; }

/* 自动播放被拦时的"点一下朗读" */
.cl-quiz-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px dashed #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  animation: cl-voice-pulse 1.6s ease-in-out infinite;
}
@keyframes cl-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .35); }
  50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}

/* 解析 */
.cl-explain {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
}

.cl-quiz-foot { display: flex; gap: 10px; margin-top: 4px; }
.cl-quiz-foot .cl-btn { flex: 1 1 0; text-align: center; }
.cl-quiz-foot .cl-btn:disabled { opacity: .45; cursor: default; }

/* 一组做完 */
.cl-quiz-summary {
  padding: 32px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  text-align: center;
}
.cl-sum-icon { font-size: 40px; }
.cl-sum-t { margin-top: 8px; font-size: 19px; font-weight: 800; color: #111827; }
.cl-sum-s { margin-top: 8px; font-size: 14px; color: #64748b; }
.cl-quiz-summary .cl-quiz-foot { margin-top: 20px; }

/* ── 底栏 ── */
.cl-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}
.cl-btn {
  flex: 0 0 auto;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #334155;
  font-size: 15px;
  cursor: pointer;
}
.cl-btn:active { background: #f1f5f9; }
.cl-btn-main {
  flex: 1 1 auto;
  border-color: #4338ca;
  background: #4338ca;
  color: #ffffff;
  font-weight: 700;
}
.cl-btn-main:active { background: #3730a3; }
.cl-btn-ghost { background: #f8fafc; }

.cl-msg {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 78px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1e293b;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* ── 导出小面板 ── */
.cl-sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  background: rgba(15, 23, 42, .45);
}
.cl-sheet-card {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-radius: 18px 18px 0 0;
}
.cl-sheet-title { font-size: 17px; font-weight: 700; }
.cl-sheet-tip { margin-top: 6px; font-size: 13px; color: #64748b; line-height: 1.6; }
.cl-sheet-row { display: flex; gap: 10px; margin-top: 14px; }
.cl-sheet-row .cl-btn { flex: 1 1 0; text-align: center; }

/* ── 打印 ── */
.cl-print { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  .cl-print {
    display: block !important;
    background: #ffffff;
  }
  .cl-print img {
    display: block;
    width: 100%;
    page-break-after: always;
    break-after: page;
  }
  .cl-print img:last-child { page-break-after: auto; break-after: auto; }
}

/* ⚠️ 兜底必须带 !important（见文件顶部说明 + check-hidden-css.mjs） */
[hidden] { display: none !important; }