/* ============================================================
   语文模块 · 只放"语文自己多出来的那一小块"
   ------------------------------------------------------------
   凡是**英语 / 数学也有的**东西，一律复用 assets/style.css 里已经有的类
   （`.card` / `.btn` / `.chips` / `.chip` / `.tbl` / `.pill` / `.stat-grid` /
    `.bars` / `.unit-table` / `.u-head` / `.u-row` / `.u-name` / `.u-acc` /
    `.u-track` / `.u-fill` / `.u-meta` / `.u-due` / `.u-cnt` / `.u-go` /
    `.empty` / `.field` / `.page-head` / `.dense` / `.home-cols` …），
   不在这个文件里抄第二遍 —— 抄了将来就两边各改各的、越走越远。
   ⚠️ 动效与颜色**一律用 :root 的 token**，不硬编码。
   ============================================================ */

/* ============================ 首页「单元一览」的分组行 ============================
   `.unit-table` 那一套（表头 / 行 / 四列）在 style.css 里，是英语与本模块共用的。
   语文这边多出来的只有「一条课文一组」的**分组行** —— 数学那边章分组也叫 `.u-group`，
   但两份 CSS 互不相干（各自页面各自引），所以这里可以重名。 */
.u-group {
  display: grid;
  grid-template-columns: var(--u-cols);
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease);
}
.u-group:first-child { margin-top: 0; }
.u-group:hover { background: var(--brand-soft); }
.u-group .u-name { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.u-group .u-go { color: var(--brand); }
.u-group .u-go span { transition: transform var(--dur-2) var(--ease); }
.u-group:hover .u-go span { transform: translateX(2px); }

/* 课文名后面那个"体裁"角标（消息 / 特写 / 通讯 / 评论） */
.u-genre {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 500;
  vertical-align: 1px;
}

/* 知识点行的状态文字（已掌握 / 熟悉中 / 要加油 / 刚起步） */
.pt-state { font-weight: 500; }
.pt-state.ok { color: var(--ok); }
.pt-state.bad { color: var(--bad); }
.pt-state.warn { color: var(--warn); }

/* "内容待按课本核对"的小标记 —— 不装成已完成 */
.cn-todo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: 1px;
}

@media (max-width: 900px) {
  /* 宽屏四列，窄屏折两行 —— 分组行要跟着 `.u-row` 一起折，否则会错位 */
  .u-group {
    grid-template-areas: "name acc" "meta go";
    row-gap: 8px;
  }
  .u-group .u-name { grid-area: name; }
  .u-group .u-acc { grid-area: acc; }
  .u-group .u-meta { grid-area: meta; }
  .u-group .u-go { grid-area: go; }
}

/* ============================ 卡片的通用骨架 ============================
   ⚠️ 这一套（`.cl-card` 外框 / `.cl-words`+`.cl-w` 词条表 / `.cl-foot` 底部按钮）
      **课文页和"题库与数据"页都在用** —— 删掉会两处一起塌。
      `.cl-head / .cl-body / .cl-ex / .cl-facts / .cl-group-title` 是 2026-10-10 之前的
      「积累卡」留下的，现在没有页面引用了（保留着，将来加"单元共通文体知识卡"能直接用）。 */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.cl-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cl-card.todo { border-color: var(--warn); }
.cl-head {
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.cl-head .t { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.6; }
.cl-head .c { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.cl-body {
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--text-2);
  white-space: pre-line;
  flex: 1;
}
.cl-body b { color: var(--brand-strong); font-weight: 600; }

/* 卡里的"例子 / 记住这句"小条 */
.cl-ex {
  margin: 0 16px 13px;
  padding: 9px 12px;
  background: var(--brand-soft);
  border-radius: var(--radius-xs);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--brand-strong);
  white-space: pre-line;
}
.cl-foot { padding: 0 16px 13px; }

/* ---- 卡里的词条表（字词卡用）：词 / 拼音 / 释义 ---- */
.cl-words { padding: 4px 16px 13px; }
.cl-w {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.cl-w:last-child { border-bottom: 0; }
.cl-w .w {
  grid-row: 1 / span 2;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .5px;
}
.cl-w .p {
  font-size: 12px;
  color: var(--brand);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.cl-w .m { font-size: 13px; color: var(--text-2); line-height: 1.7; }
/* 设置里把拼音关掉之后，拼音那行不占位置 */
.cl-words.hide-pinyin .cl-w .p { display: none; }
.cl-words.hide-pinyin .cl-w .w { grid-row: auto; }
/* 设置里把释义关掉，只留"认字" */
.cl-words.hide-mean .cl-w .m { display: none; }
.cl-words.hide-mean .cl-w { grid-template-columns: 84px 1fr; }

/* 卡里"要记的条目"列表（文学常识 / 文体知识用） */
.cl-facts { padding: 0 16px 13px; margin: 0; list-style: none; }
.cl-facts li {
  position: relative;
  padding: 5px 0 5px 16px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-2);
  border-bottom: 1px dashed var(--line);
}
.cl-facts li:last-child { border-bottom: 0; }
.cl-facts li::before {
  content: '';
  position: absolute;
  left: 2px; top: 13px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}
.cl-facts li.warn-line { color: var(--warn); }
.cl-facts li.warn-line::before { background: var(--warn); opacity: .8; }

/* 分组标题（文体知识 / 文学常识 / 字词 / 名句） */
.cl-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
  font-size: 13px;
  color: var(--text-3);
}
.cl-group-title .n {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11.5px;
}
.cl-group-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.cl-group-title:first-child { margin-top: 0; }

/* ============================ 课文（左单元 / 右课文 / 点开看详情） ============================
   对应英语的「语法口诀页」、数学的「公式卡」——
   但语文这一页**主要是看的**，所以版式是"导航 + 阅读"：
     左栏 = 单元列表；右栏 = 这个单元的课文（一行一篇）；点一篇才在下面展开详情。

   ⚠️ 复用 .cl-card（外框）和 .cl-words / .cl-w（生字词表）——
      那两个是通用的"卡 + 词条表"骨架，不用重复实现。
      详情卡只写课文多出来的那几块：标题条、讲解段落、知识点、情感块。
   ⚠️ 2026-10-10 之前这一页是「积累卡」；当天改成"一篇一张可开合的卡"，
      又改成现在这版"左列表右详情"。 */

/* ---- 双栏骨架 ---- */
.tx-panes {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.tx-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tx-pane-h {
  padding: 12px 14px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .4px;
}

/* ---- 左栏：单元列表 ---- */
.tx-units { padding-bottom: 8px; }
#txUnitList { padding: 0 8px 4px; }
.tx-unit {
  display: block;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tx-unit:hover { background: var(--surface-2); }
.tx-unit.on { background: var(--brand-soft); border-color: var(--brand); }
.tx-unit-t { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.tx-unit.on .tx-unit-t { color: var(--brand-strong); }
.tx-unit-s { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); line-height: 1.55; }
.tx-unit-n { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-3); opacity: .9; }

/* ---- 右栏：课文列表（一行一篇，点一下看详情） ---- */
.tx-rows { padding: 6px; }
.tx-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.tx-rows .tx-row:last-child { border-bottom-color: transparent; }
.tx-row:hover { background: var(--surface-2); }
.tx-row.on { background: var(--brand-soft); border-color: var(--brand); border-radius: var(--radius-xs); }
.tx-row-no {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}
.tx-row.todo .tx-row-no { background: var(--warn); }
.tx-row-main { flex: 1; min-width: 0; }
.tx-row-t { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.55; }
.tx-row.on .tx-row-t { color: var(--brand-strong); }
.tx-row-s { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); line-height: 1.55; }
.tx-row-s.tx-row-meta { font-size: 12px; opacity: .85; }
.tx-row-go {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--brand-strong);
  opacity: .75;
  white-space: nowrap;
}
.tx-row.on .tx-row-go { opacity: 1; }

/* 详情区没点开时的提示 */
.tx-empty-hint {
  padding: 26px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  font-size: 13.5px;
  color: var(--text-3);
  background: var(--surface-2);
}

/* ============================ 课文「精读屏」覆盖层 ============================
   点课文列表里的一篇 → 盖住整屏（层级 --z-cover，压过顶栏 / 浮窗 / 小鸟）：
     · 中间一栏 = **原文**（点一段就从那段开始读）
     · 左右两栏 = **讲解**（左：讲了什么 / 怎么写的；右：关键知识点 + 重点情感）
     · 顶栏 = 标题 + 朗读控制（播放 / 停止 / 语速）
   ⚠️ 覆盖层常驻在 DOM 里（`index.html` 末尾那块），只是切 `.hidden` —— 内容是现渲染的。 */
.tx-ov {
  position: fixed;
  inset: 0;
  z-index: var(--z-cover);
  display: flex;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 20, 30, .52);
}
.tx-ov.hidden { display: none; }
body.tx-ov-open { overflow: hidden; }

.tx-ov-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1520px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--sh-4);
  overflow: hidden;
}

/* ---- 顶栏 ---- */
.tx-ov-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.tx-ov-close {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tx-ov-close:hover { background: var(--surface-3); color: var(--text); }
.tx-ov-close-x { font-size: 12px; }
.tx-ov-title { flex: 1; min-width: 0; }
.tx-ov-h {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-ov-sub { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }

/* ---- 朗读控制 ---- */
.tx-ov-tts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tx-tts-btn { display: inline-flex; align-items: center; gap: 5px; }
.tx-tts-btn .tx-tts-ic { font-size: 11px; line-height: 1; }
.tx-tts-btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.tx-rate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 4px;
  font-size: 12.5px;
  color: var(--text-3);
}
.tx-rate input[type="range"] { width: 104px; accent-color: var(--brand); }
.tx-rate-val { min-width: 36px; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ---- 三栏身体 ---- */
.tx-ov-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(210px, .88fr) minmax(0, 1.55fr) minmax(210px, .88fr);
}
.tx-ov-side {
  overflow-y: auto;
  padding: 15px 15px 22px;
  background: var(--surface-2);
}
.tx-ov-left { border-right: 1px solid var(--line); }
.tx-ov-right { border-left: 1px solid var(--line); }
.tx-ov-main {
  overflow-y: auto;
  padding: 20px 30px 34px;
  background: var(--surface);
}

/* ---- 中栏：原文 ---- */
.tx-ov-th {
  margin: 6px 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-strong);
  text-align: center;
  line-height: 1.6;
}
.tx-ov-p {
  margin: 0 0 15px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-size: 16.5px;
  line-height: 2.15;
  color: var(--text);
  text-indent: 2em;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease);
}
.tx-ov-p:hover { background: var(--surface-2); }
.tx-ov-p.reading {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 0 var(--brand);
}
.tx-ov-main .tx-empty-hint { margin-top: 40px; }

/* ---- 两侧栏的正文（讲解段落 / 列表 / 小注） ---- */
.tx-ov-side p {
  margin: 0 0 7px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-2);
}
.tx-ov-side p:last-child { margin-bottom: 0; }
.tx-ov-side b { color: var(--brand-strong); font-weight: 600; }
.tx-ov-sec { padding-bottom: 14px; }
.tx-ov-sec + .tx-ov-sec { padding-top: 14px; border-top: 1px dashed var(--line); }
.tx-ov-sh {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-strong);
}
.tx-ov-num {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.tx-ov-right .tx-key { margin-top: 0; }
.tx-ov-right .tx-emo { margin-top: 16px; }

/* ---- 底部横条：生字词 + 练习入口 ---- */
.tx-ov-words {
  max-height: 32%;
  overflow-y: auto;
  padding: 10px 16px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.tx-ov-wd > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-strong);
  list-style: none;
}
.tx-ov-wd > summary::-webkit-details-marker { display: none; }
.tx-ov-wd > summary::before { content: '▸ '; color: var(--text-3); }
.tx-ov-wd[open] > summary::before { content: '▾ '; }
.tx-ov-wd .cl-words { padding: 8px 0 0; }
.tx-ov-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 11px;
}

/* ---- 底栏提示 ---- */
.tx-ov-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
}
.tx-ov-state { color: var(--brand-strong); font-weight: 600; }
.tx-ov-foot b { color: var(--text-2); }

/* 窄屏：覆盖层铺满，三栏折成一栏（**原文排在最前**） */
@media (max-width: 1000px) {
  .tx-ov { padding: 0; }
  .tx-ov-panel { max-width: none; border-radius: 0; }
  /* ⚠️ 用 flex 列（不是 block）：只有 flex/grid 里的 `order` 才管用 —— 要 原文→左栏→右栏 */
  .tx-ov-body { display: flex; flex-direction: column; overflow-y: auto; }
  .tx-ov-main { order: -1; overflow: visible; padding: 16px 16px 24px; }
  .tx-ov-side { overflow: visible; padding: 14px 16px; }
  .tx-ov-left { border-right: 0; border-top: 1px solid var(--line); }
  .tx-ov-right { border-left: 0; border-top: 1px solid var(--line); }
  .tx-ov-words { max-height: none; }
}

/* 段落里的 `- ` 行 → 列表 */
.tx-ul { margin: 0 0 7px; padding: 0; list-style: none; }
.tx-ul li {
  position: relative;
  padding: 3px 0 3px 15px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-2);
}
.tx-ul li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .5;
}

/* 灰色小注（"这段还没核对"这类） */
.tx-note {
  margin: 8px 0 0;
  padding: 8px 11px;
  background: var(--surface-3);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-3);
}

/* ---- 关键知识点 ---- */
.tx-key { margin-top: 15px; }
.tx-key-h {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .3px;
}
.tx-points {
  margin: 0;
  padding: 10px 13px;
  list-style: none;
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
}
.tx-points li {
  position: relative;
  padding: 4px 0 4px 15px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--brand-strong);
}
.tx-points li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .6;
}
.tx-points li b { font-weight: 600; }
.tx-points li.warn-line { color: var(--warn); }
.tx-points li.warn-line::before { background: var(--warn); opacity: .85; }

/* ---- 重点情感（语文最该记的一块，单独给个底色） ---- */
.tx-emo {
  margin-top: 15px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}
.tx-emo-h {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-strong);
  letter-spacing: .3px;
}
.tx-emo-t { font-size: 14px; line-height: 1.9; color: var(--text); }
.tx-emo-t b { color: var(--brand-strong); font-weight: 600; }
.tx-emo-l { margin: 7px 0 0; padding: 0; list-style: none; }
.tx-emo-l li {
  position: relative;
  padding: 3px 0 3px 15px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-2);
}
.tx-emo-l li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: .5;
}
.tx-emo-l li b { color: var(--brand-strong); font-weight: 600; }

/* ---- 生字词块（复用 .cl-words / .cl-w） ---- */
.tx-words-wrap { margin-top: 15px; }
.tx-words-wrap .cl-words { padding: 0; }

/* ---- 底部按钮行 ---- */
.tx-card .cl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}
.tx-hint { color: var(--text-3); }

/* 窄屏：双栏折成单栏（单元横排在上、课文在下） */
@media (max-width: 900px) {
  .tx-panes { grid-template-columns: 1fr; }
  /* 左栏横过来：单元做成一行几个的小卡 */
  #txUnitList { display: flex; flex-wrap: wrap; gap: 6px; }
  .tx-unit { flex: 1 1 140px; width: auto; margin-bottom: 0; border-color: var(--line); }
}
@media (max-width: 760px) {
  .tx-card .tx-head { padding: 11px 13px; }
  .tx-card .tx-body { padding: 4px 13px 13px; }
  .tx-h1 { font-size: 14.5px; }
  .tx-hwrap { min-width: 0; }
  .tx-row { padding: 10px 10px; gap: 9px; }
  .tx-row-go { display: none; }       /* 窄屏省掉"看讲解 ›"，整行可点已经足够 */
}

/* ============================ 练习页：还没接上的部分 ============================ */
.soon-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-2);
}
.soon-box .ic {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
}
.soon-box b { color: var(--text); }

/* 首页「本单元有什么」的说明条 */
.cn-note {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-3);
}
.cn-note b { color: var(--text-2); }

/* ============================ 柱状图的颜色 ============================
   `.bar` 本体（尺寸 / 渐变 / 入场动画）在 style.css 里，这里只补"按正确率上色"。
   红 = 低、绿 = 高 —— 中国习惯（红=错、绿=对）。
   ⚠️ 只在 `.bars` 里用；语文这边两处：首页「近 7 天」、复习页「未来 7 天到期」。 */
.bar.ok { background: linear-gradient(180deg, #3fbb92, var(--ok)); }
.bar.warn { background: linear-gradient(180deg, #d9a04a, var(--warn)); }
.bar.bad { background: linear-gradient(180deg, #e2706f, var(--bad)); }