/* ============================================================
   文脉山河（人文素养学科子栏目）· 专属样式
   ------------------------------------------------------------
   · 本文件只写两件事：
       ① 把通用件的容器宽度、纵向节奏按 #hum-root 重新界定；
       ② 人文栏目专属的图形件（长卷 / 字形 / 水墨小景 / 成分树 /
          诵读行 / 关系图谱 / 雷达批改 / 流程 / 进度条）。
   · 卡片 / 页签 / 按钮 / 表格 / 弹窗 / 轻提示等通用件一律复用
     public/math/style.css 里的 .m-* 组件（四栏共用同一套契约），
     本文件**不重写**它们，否则菜单样式会在栏目之间漂移。
   · 颜色一律取站点主题变量（themes.css 各套皮肤自动适配），不写死面色。
   · 唯一的例外是「水墨小景」：它是一幅画，画画用的墨色不随皮肤变化 ——
     就像照片不会因为换了深色模式就反转。所以 --hm-ink / --hm-pale 是定值。
   ============================================================ */

/* 根选择器必须是 #hum-root —— 人文页的真实容器是 index.html 里的 <div id="hum-root">。 */
#hum-root .m-wrap { max-width: 1100px; margin: 0 auto; padding-bottom: 40px; }

/* 画里用的墨色（定值，不随皮肤走） */
#hum-root { --hm-ink: #26303c; --hm-pale: #ffffff; }

/* ---- 纵向节奏：相邻块之间必须留出真实间距 ----
   与非整数 DPR 机型（折叠屏）上的「模块重叠」是同一个问题：
   间距不能只靠某个盒子的 padding 撑着，要显式给到相邻兄弟。 */
#hum-root .m-head { margin-bottom: 0; }
#hum-root .m-head + *,
#hum-root .m-segbtn + *,
#hum-root .m-segbtn + .m-segbtn,
#hum-root .m-pane > * + * { margin-top: 16px; }

/* ---- 引言装饰 ---- */
.hm-slogan-deco { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.hm-slogan-deco span { font-family: var(--serif); font-size: 22px; color: var(--accent2);
  border: 1px solid var(--line); border-radius: 10px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; background: var(--panel2); }

/* ---- 通用小字条 ---- */
#hum-root .m-slip { font-size: 12px; color: var(--tx3); line-height: 1.85; margin-top: 12px;
  border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel2); }

/* ---- 文脉地图 ---- */
.hm-track { display: inline-block; font-size: 12px; color: var(--tx2); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; margin: 2px 4px 2px 0; }
.hm-poem-title { font-family: var(--serif); font-size: 17px; color: var(--accent); letter-spacing: 1px; margin: 4px 0 6px; }
.hm-poem-title span { font-size: 12.5px; color: var(--tx3); letter-spacing: 0; }
.hm-poem-line { font-family: var(--serif); font-size: 16px; color: var(--tx); line-height: 1.9;
  background: rgba(var(--accentRGB), .12); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
  letter-spacing: 1px; }

/* ---- 长卷 / 树 / 轮：所有 SVG 图共用一个「可横向滚动」的壳 ----
   超窄屏（折叠屏外屏 320px 左右）下 SVG 会缩到看不清字，
   这里允许横向滚动而不是继续压缩。 */
.hm-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-scroll, .hm-tree { display: block; width: 100%; min-width: 520px; height: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.hm-scroll-wrap > svg { display: block; }
/* 行迹折线：四条颜色轮换，避免十几条线糊成一片 */
.hm-line { stroke: var(--accent); }
.hm-line.hm-l1 { stroke: var(--accent2, var(--accent)); opacity: .8; }
.hm-line.hm-l2 { stroke: var(--accent); opacity: .6; }
.hm-line.hm-l3 { stroke: var(--accent2, var(--accent)); opacity: .55; }

/* ---- 声文视界 · 汉字演变 ---- */
.hm-viz { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.hm-hanzi { width: 100%; height: auto; display: block; background: var(--panel); border-radius: 8px;
  aspect-ratio: 1 / 1; }
.hm-glyph { transform-origin: 50% 50%; }
.hm-stroke { transition: stroke-dashoffset .62s ease; }

/* ---- 声文视界 · 水墨小景（一幅画，固定墨色） ---- */
.hm-scene { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); }
.hm-el { display: inline-block; font-size: 11.5px; color: var(--accent); background: rgba(var(--accentRGB), .14);
  border-radius: 6px; padding: 1px 7px; margin: 2px 5px 2px 0; }

/* ---- 声文视界 · 成分树 ---- */
.hm-sent { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.hm-en { font-size: 15px; color: var(--tx); line-height: 1.75; font-family: var(--serif); }
.hm-cn { font-size: 12.5px; color: var(--tx3); margin-top: 6px; line-height: 1.7; }
.hm-treebox { max-height: 200px; overflow: auto; }
.hm-tree-caption { font-size: 12.5px; color: var(--tx2); line-height: 1.9; }
.hm-tree-out { display: flex; flex-direction: column; gap: 8px; }
.hm-node { border-left: 3px solid var(--line); padding: 7px 10px; border-radius: 0 8px 8px 0; background: var(--panel2); }
.hm-node.lv0 { border-left-color: var(--accent); }
.hm-node.lv1 { border-left-color: var(--accent2, var(--accent)); margin-left: 16px; }
.hm-node.lv2 { border-left-color: var(--tx3); margin-left: 32px; }
.hm-nw { font-size: 13.5px; color: var(--tx); }
.hm-nr { display: block; font-size: 11.5px; color: var(--tx3); margin-top: 3px; }

/* ---- 诵读演播厅 ---- */
.hm-rec-meta { font-size: 12.5px; color: var(--tx3); margin-bottom: 10px; }
.hm-rec-lines { display: flex; flex-direction: column; gap: 8px; }
.hm-rec-row { display: flex; align-items: center; gap: 12px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; transition: all .18s; cursor: pointer; }
.hm-rec-row.on { border-color: var(--accent); background: rgba(var(--accentRGB), .14); transform: translateX(4px); }
.hm-row-no { font-size: 11px; color: var(--tx3); min-width: 16px; }
.hm-row-tx { font-family: var(--serif); font-size: 16px; color: var(--tx); letter-spacing: 1px; flex: 1; }
.hm-seg { padding: 0 2px; }
.hm-cut { color: var(--accent); margin: 0 5px; }
.hm-row-beat { font-size: 11.5px; color: var(--tx3); white-space: nowrap; }
.hm-rec-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.hm-rec-ctrl audio { max-width: 240px; vertical-align: middle; }

/* ---- 诵读演播厅 · 逐句语音评测：本节只放**别处没有的**规则 ----
   分数卡（.hm-sc-*）的视觉统一定义在下面「语音评测：选句 + 成绩卡」那一节，
   这里绝不重复。同一个选择器写两遍，后一遍会静默盖掉前一遍，而**只被盖掉一半**的属性
   会变成设计者从没打算要的效果：比如轨道上多留一条 1px 边框，会把 8px 的轨道
   挤成 6px 的可用高度，填充条跟着矮下去 —— 不报错，只是看起来差一点。 */
/* 状态行 / 结果区 / 复核入口 / 合规说明：各自占满一整行落到按钮下面。
   .hm-rec-ctrl 是 flex-wrap，不给 flex-basis:100% 的话它们会挤到按钮那一行去。 */
.hm-rec-ctrl > .m-stat-line,
.hm-rec-ctrl > .hm-rec-eval,
.hm-rec-ctrl > .hm-rec-appeal,
.hm-rec-ctrl > .hm-rec-env,
.hm-rec-ctrl > .m-slip { flex: 1 1 100%; margin-top: 0; }

/* 总分徽标 / 三维分条 / 逐字得分的完整定义在下一节，此处不重复。 */

/* ---- 语音评测：选句 + 成绩卡 ----
   分数色刻意用一套**与皮肤无关**的语义色（好/中/差），而不是主题强调色：
   皮肤换掉之后「85 分」和「60 分」必须还是一眼能分辨。 */
.hm-rec-lab { font-size: 12.5px; color: var(--tx3); }
.hm-rec-row.sel { border-color: var(--accent2, var(--accent)); box-shadow: inset 3px 0 0 var(--accent2, var(--accent)); }
.hm-rec-eval { flex-basis: 100%; }
.hm-rec-eval:empty, .hm-rec-appeal:empty { display: none; }
.hm-sc-total { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 12px; }
.hm-sc-total b { font-size: 34px; line-height: 1; font-family: var(--serif); }
.hm-sc-total span { font-size: 12px; color: var(--tx3); }
.hm-sc-total em { font-style: normal; font-size: 11.5px; color: var(--tx3); margin-left: 6px; }
.hm-sc-total.good b { color: #2f9e6b; }
.hm-sc-total.mid b { color: #d99a2b; }
.hm-sc-total.low b { color: #d9534f; }
.hm-sc-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.hm-sc-n { flex: 0 0 56px; font-size: 12px; color: var(--tx2); }
.hm-sc-t { flex: 1; height: 8px; border-radius: 5px; background: var(--panel2); overflow: hidden; }
.hm-sc-f { display: block; height: 100%; border-radius: 5px; transition: width .4s ease; }
.hm-sc-f.good { background: #2f9e6b; }
.hm-sc-f.mid { background: #d99a2b; }
.hm-sc-f.low { background: #d9534f; }
.hm-sc-bar > b { flex: 0 0 34px; text-align: right; font-size: 12.5px; color: var(--tx); }
.hm-sc-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.hm-sc-w { display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 40px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel2); font-size: 16px; color: var(--tx); font-family: var(--serif); }
.hm-sc-w i { font-style: normal; font-size: 10.5px; color: var(--tx3); }
.hm-sc-w.good { border-color: #2f9e6b; }
.hm-sc-w.good i { color: #2f9e6b; }
.hm-sc-w.mid { border-color: #d99a2b; }
.hm-sc-w.mid i { color: #d99a2b; }
.hm-sc-w.low { border-color: #d9534f; }
.hm-sc-w.low i { color: #d9534f; }
/* 第四档 · 中性：引擎**没给分**的词（MatchTag 多读 / 漏读 / 未录入，PronAccuracy = -1）。
   它不是「读得差」，而是「没有分数」—— 画成红色等于替引擎宣布一个它没说过的结论，
   而这一栏的全部纪律就是不替引擎说话。所以：虚线边 + 默认底色 + 灰色数字。
   JS 里 na 与 good/mid/low 二选一，不会同时出现，故不依赖书写顺序。 */
.hm-sc-w.na { border-style: dashed; border-color: var(--line); }
.hm-sc-w.na i { color: var(--tx3); }

/* ---- 英语口语陪练 ---- */
.hm-speak { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hm-speak-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel2); }
.hm-phon { font-size: 11.5px; color: var(--accent); margin-top: 6px; }
/* 每个句型下面的「录这句 → 提交评测」，与诵读演播厅共用同一套录音/评分件 */
/* ---- 英语口语陪练 · 单句跟读录音 ----
   每个句型下面都挂一组「录这句 + 提交评测」，用一条虚线把它和上一句的讲解分开；
   状态行与结果区各自占满一整行，否则会挤到按钮旁边去。 */
.hm-say { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
  border-top: 1px dashed var(--line); padding-top: 10px; }
.hm-say audio { max-width: 220px; vertical-align: middle; }
.hm-say > .m-stat-line, .hm-say > .hm-rec-eval, .hm-say > .hm-rec-appeal { flex: 1 1 100%; margin-top: 0; }

/* ---- 读写工坊 · 精读追问链 ---- */
.hm-chain { display: flex; flex-direction: column; }
.hm-open { font-size: 13.5px; color: var(--tx); background: var(--panel2); border-left: 3px solid var(--accent2, var(--accent));
  border-radius: 0 10px 10px 0; padding: 10px 14px; line-height: 1.9; }
.hm-questions { margin: 12px 0 0; padding-left: 0; list-style: none; counter-reset: hq; }
.hm-questions li { counter-increment: hq; position: relative; padding: 10px 12px 10px 42px; margin: 8px 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--cardF, var(--panel));
  font-size: 13.5px; color: var(--tx2); line-height: 1.8; }
.hm-questions li::before { content: 'Q' counter(hq); position: absolute; left: 12px; top: 10px;
  font-size: 12px; font-weight: 700; color: var(--accent); }
.hm-askbox { margin-top: 14px; }
.hm-askbox textarea { margin-top: 10px; }

/* ---- 读写工坊 · 写作五步 ---- */
.hm-steps { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.hm-step { display: flex; gap: 12px; align-items: flex-start; }
.hm-step-no { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  /* ★ 原来是写死的 color:#fff。白字压在强调色上，浅色皮肤（ink/bright/kids/scholar/senior）还能到
     5.4~11.5:1，但深色皮肤里 --accent 是亮金/亮橙，白字只剩 night 2.04 / film 2.10 / custom 3.38；
     节日皮更糟（spring 1.50 / midautumn 1.29）。主题早就备好了配对色 --onAccent（按对比度反算出来的），
     凡是「--accent 做底 + 字压在上面」的地方都该用它，别再写 #fff。 */
  color: var(--onAccent); font-size: 12.5px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.hm-step-body { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--panel2); }
.hm-step-t { font-size: 13.5px; font-weight: 700; color: var(--accent); letter-spacing: 1px; }
.hm-step-d { font-size: 12.8px; color: var(--tx2); line-height: 1.85; margin-top: 4px; }
.hm-ai-guide { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }

/* ---- 读写工坊 · 四维批改 ---- */
.hm-mark-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; margin: 12px 0; }
.hm-radar-box { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.hm-radar { width: 100%; height: auto; display: block; }
.hm-sample { font-family: var(--serif); font-size: 15px; color: var(--tx); line-height: 2;
  background: var(--panel2); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.hm-mark-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel2); }
.hm-mark-tag { display: inline-block; font-size: 11.5px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 1px 9px; margin-bottom: 6px; }
.hm-good { font-size: 12.8px; color: var(--tx2); line-height: 1.8; }
.hm-bad { font-size: 12.8px; color: var(--tx2); line-height: 1.8; margin-top: 4px; }
.hm-rubric { margin-top: 8px; }
.hm-rubric-row { border-top: 1px solid var(--line); padding: 10px 0; font-size: 12.8px; color: var(--tx2); }
.hm-rubric-row b { color: var(--accent); font-size: 13.5px; }
.hm-rubric-w { font-size: 11.5px; color: var(--tx3); }
.hm-rubric-d { line-height: 1.85; margin-top: 4px; }

/* ---- 名著阅读 ---- */
.hm-progress { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.hm-progress-lab { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tx2); margin-bottom: 6px; }
.hm-task-title { font-size: 13px; color: var(--accent); letter-spacing: 1px; font-weight: 700; margin: 16px 0 8px; }
.hm-tasks { display: flex; flex-direction: column; gap: 8px; }
.hm-task { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; background: var(--cardF, var(--panel)); cursor: pointer; }
.hm-task.done { border-color: var(--accent); background: rgba(var(--accentRGB), .12); }
.hm-task input { margin-top: 3px; accent-color: var(--accent); }
.hm-task-t { font-size: 13.2px; color: var(--tx2); line-height: 1.8; }
.hm-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.hm-role { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel2); }
.hm-role-n { font-size: 14.5px; font-weight: 700; color: var(--accent); }
.hm-role-t { font-size: 11.5px; color: var(--tx3); margin: 4px 0 8px; }
.hm-role textarea { width: 100%; box-sizing: border-box; }
.hm-opts { display: flex; flex-direction: column; }
.hm-result { text-align: center; padding: 18px 0 8px; }
.hm-result-num { font-size: 46px; color: var(--accent); font-weight: 700; line-height: 1; }
.hm-result-num span { font-size: 18px; color: var(--tx3); }
.hm-result-lab { font-size: 12.5px; color: var(--tx3); margin-top: 6px; letter-spacing: 2px; }

/* ---- 世界语言窗 ---- */
.hm-scroll-wrap .hm-tree + .m-people { margin-top: 16px; }

/* ---- 人文课堂 ---- */
.hm-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.hm-flow-step { font-size: 12.5px; color: var(--tx2); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; }
.hm-flow-arrow { color: var(--accent); font-size: 13px; }
.hm-flow-col { flex-direction: column; align-items: stretch; gap: 8px; }
.hm-flow-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tx2);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; line-height: 1.8; }
.hm-flow-idx { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--accentRGB), .2);
  color: var(--accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hm-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hm-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.8px; color: var(--tx2); }
.hm-bar-n { flex: 0 0 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.hm-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2, var(--accent)), var(--accent)); }
.hm-bar-p { flex: 0 0 42px; text-align: right; color: var(--accent); }
/* 滞留徽标：底色是**固定警示红**（刻意不跟随主题，警示色跨主题认得出）。
   原来用 #d9534f，白字压上去只有 3.96:1，11px 小字要求 ≥4.5:1。
   改成 #C0392B（同色相、压深一档）→ 实测 5.44:1，警示语义不变。 */
.hm-bar-flag { flex: 0 0 auto; font-size: 11px; color: #fff; background: #C0392B; border-radius: 999px; padding: 1px 8px; }
.hm-share { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel2); }
.hm-share-n { font-size: 13.5px; font-weight: 700; color: var(--tx); }
.hm-share-a { font-size: 11.5px; color: var(--tx3); margin: 4px 0; }
.hm-share-s { font-size: 11.5px; color: var(--accent); }
.hm-bar-sub { flex: 0 0 auto; font-size: 11px; color: var(--tx3); }

/* ---- 读写工坊 · 真实批改入口 ---- */
.hm-mark-real { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
.hm-mark-real textarea { margin: 10px 0; }
.hm-mark-sc { float: right; font-size: 12.5px; color: var(--accent); }
.hm-radar-real { width: 100%; height: auto; display: block; }

/* ---- 防代写检测（可复核卡） ---- */
.hm-ghost { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel2); }
.hm-ghost-bars { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.hm-ghost-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--cardF, var(--panel)); font-size: 12.5px; }
.hm-ghost-row.hit { border-color: var(--accent2, var(--accent)); box-shadow: inset 3px 0 0 var(--accent2, var(--accent)); }
.hm-ghost-k { flex: 0 0 92px; font-weight: 700; color: var(--tx); }
.hm-ghost-v { flex: 0 0 96px; color: var(--accent); }
/* ★ --tx3 是「三级弱化」令牌，语义是装饰，**不能当正文色**：
   它落在卡片面上实测只有 3.49~4.30:1（11 套皮肤里 10 套低于 AA 的 4.5，只有 senior 的 --tx3 够深）。
   这里 11px 的备注文字改成 --tx2（逐皮肤实测 5.64~10.53:1）。
   同类问题全站还有（math/style.css 的 .m-sh-tag/.m-sh-why 等），那些文件不归本栏改，已单独报出。 */
.hm-ghost-t { flex: 0 0 auto; font-size: 11px; color: var(--tx2); }
.hm-ghost-row.hit .hm-ghost-t { color: var(--accent2, var(--accent)); }
.hm-ghost-d { flex: 1 1 100%; color: var(--tx2); line-height: 1.8; }

/* ---- 人文课堂 · 作文批量批改工作台 ---- */
.hm-batch { margin-top: 12px; }
.hm-batch textarea { margin: 10px 0; }
.hm-batch-out { margin-top: 14px; }
.hm-batch-sum { font-size: 12.8px; color: var(--tx2); line-height: 1.9; margin: 8px 0 12px; }
.hm-batch-avg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.hm-batch-rows { display: flex; flex-direction: column; gap: 6px; }
.hm-batch-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; background: var(--panel2); }
.hm-batch-row.bad { border-style: dashed; }
.hm-b-n { flex: 0 0 62px; color: var(--tx3); }
.hm-b-sc { flex: 0 0 84px; color: var(--accent); font-weight: 700; }
.hm-b-tags { flex: 1 1 160px; color: var(--tx2); line-height: 1.7; }
.hm-b-ghost { flex: 0 0 auto; font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--tx3); }
.hm-b-ghost.g-high { border-color: var(--accent2, var(--accent)); color: var(--accent2, var(--accent)); }
.hm-b-ghost.g-mid { border-color: var(--accent); color: var(--accent); }

/* 数据没加载时的空态：与「面板白掉」区分开，也要看得出不是功能坏了。
   底纹用虚线框、文字用 --tx2（不是 --tx3）——空态是**要读**的一段说明，
   而 --tx3 是三级弱化令牌（语义是装饰）：实测它落在这张卡片面上只有 3.03~3.88:1，
   12 套皮肤里 11 套低于 AA 4.5（只有 senior 够深）。同一坑在 .hm-ghost-t 上已修过一次。 */
.hm-empty { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 12.8px; line-height: 1.9; color: var(--tx2); background: var(--panel2); }

/* ============================================================
   人文课堂 · 学生端「我收到的作业」
   ------------------------------------------------------------
   一页纸读完一份作业：类型 / 成绩 / 标题与要求 / 提交情况 / 成绩来源。
   成绩徽标刻意**不用**强调色去画「待批改」——「待批改」不是成绩，
   给它上题目色会让人误以为那是分数；只有真的有分时才用 --accent。
   ============================================================ */
.hm-mine { margin-top: 12px; }
.hm-mine-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: var(--panel2); }
.hm-mine-kind { flex: 0 0 auto; font-size: 11px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 1px 9px; }
.hm-mine-sc { flex: 0 0 auto; font-weight: 700; color: var(--accent); }
.hm-mine-sc.wait { font-weight: 400; color: var(--tx2); }
.hm-mine-t { flex: 1 1 200px; font-size: 13.2px; color: var(--tx); line-height: 1.75; }
.hm-mine-t span { display: block; font-size: 11.5px; color: var(--tx2); margin-top: 3px; }
.hm-mine-note { flex: 1 1 100%; font-size: 11px; color: var(--tx2); line-height: 1.7; }
/* 提交状态徽标：12 套皮肤逐格实算后，--tx3 只有 3.03~3.88:1（11 套低于 4.5），
   换成 --tx2 后最低 4.89:1。「还没提交」是**要读**的信息，不是装饰。 */
.hm-mine-sub { flex: 0 0 auto; font-size: 11px; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; color: var(--tx2); }
.hm-mine-sub.done { border-color: var(--accent2, var(--accent)); color: var(--accent2, var(--accent)); }

/* ============================================================
   声文视界 · 古诗意境「炼字实验」
   ============================================================ */
.hm-lian-head { margin-top: 14px; }
.hm-lian { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 6px; }
.hm-lian button { min-width: 44px; font-size: 14px; }
.hm-lian-note { line-height: 1.95; }

/* ============================================================
   声文视界 · 汉字部件 3D 拆解 / 病句诊断
   ============================================================ */
.hm-3d-wrap { display: block; width: 100%; margin: 6px 0 10px; }
.hm-3d-wrap .s3d { display: block; border-radius: 10px; background: var(--panel2); touch-action: none; }
.hm-part-wrap { display: block; }
.hm-part-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.hm-part-cell { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 4px 10px; background: var(--panel2); }
.hm-part-cell b { font-size: 17px; line-height: 1.3; color: var(--tx); }
.hm-part-cell i { font-style: normal; font-size: 11px; color: var(--tx3); }
.hm-part-cell.r-yi { border-color: var(--accent); }
.hm-part-cell.r-yi b { color: var(--accent); }
.hm-part-cell.r-xing { border-color: var(--jade); }
.hm-part-cell.r-xing b { color: var(--jade); }
.hm-part-cell.r-sheng { border-color: var(--blue); }
.hm-part-cell.r-sheng b { color: var(--blue); }
.hm-part-cell.on { box-shadow: inset 0 0 0 2px var(--red); }
.hm-part-cell.on b { color: var(--red); }
.hm-part-info { margin-top: 12px; }
.hm-part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.hm-part-big { font-size: 30px; line-height: 1.1; color: var(--tx); }
.hm-part-py { font-size: 12.5px; color: var(--tx3); letter-spacing: .5px; }
.hm-part-tb { width: 100%; }
.hm-part-td-ch { width: 62px; }
.hm-part-chip { display: inline-block; min-width: 26px; text-align: center; border: 1px solid var(--line);
  border-radius: 8px; padding: 1px 7px; font-size: 13px; line-height: 1.7; color: var(--tx); }
.hm-part-chip.r-yi { border-color: var(--accent); color: var(--accent); }
.hm-part-chip.r-xing { border-color: var(--jade); color: var(--jade); }
.hm-part-chip.r-sheng { border-color: var(--blue); color: var(--blue); }
.hm-part-un { color: var(--tx3); font-size: 11.5px; }
.hm-part-row { cursor: pointer; }
.hm-part-row.on { background: rgba(var(--accentRGB), .12); }
.hm-part-row.on td { color: var(--accent); }

.hm-err-q { font-size: 15.5px; line-height: 2; color: var(--tx); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
.hm-err-tip { font-size: 12px; color: var(--tx3); margin: 8px 0 2px; }
.hm-err-pick { flex-wrap: wrap; }
.hm-err-focus { border-bottom: 2px solid var(--red); color: var(--red); padding-bottom: 1px; }
.hm-err-fixed { border-bottom: 2px solid var(--jade); color: var(--jade); padding-bottom: 1px; }
.hm-err-out { margin-top: 12px; }
.hm-err-verdict { font-size: 13.5px; padding: 7px 11px; border-radius: 9px; margin-bottom: 10px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--tx2); }
.hm-err-verdict.ok { border-color: var(--jade); color: var(--jade); }
.hm-err-verdict.bad { border-color: var(--accent); color: var(--accent); }
.hm-err-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.hm-err-col { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--panel2); }
.hm-err-lab { display: inline-block; font-size: 11px; color: var(--tx3); margin-bottom: 5px; letter-spacing: .5px; }
.hm-err-line { font-size: 14px; line-height: 1.95; color: var(--tx); }
.hm-err-sum { font-size: 13px; color: var(--tx2); line-height: 1.9; border: 1px dashed var(--accent);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }

/* ============================================================
   诵读演播厅 · 节奏网格 / 本机声音分析 / 课本剧语气线
   ============================================================ */
.hm-rec-beat-wrap { margin: 4px 0 14px; }
.hm-rec-beat-cap { font-size: 12px; color: var(--tx3); margin-bottom: 6px; }
.hm-beat-key { color: var(--accent); }
.hm-rec-beat { display: block; width: 100%; min-width: 440px; height: auto; }
.hm-rec-env { margin-top: 10px; }
.hm-env-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.hm-env-cap b { font-size: 13.5px; color: var(--tx); }
.hm-env-cap span { font-size: 11.5px; color: var(--tx3); }
.hm-env-cv { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; }
.hm-drama-head { margin-top: 16px; }
.hm-drama-curve { margin: 10px 0 6px; }
.hm-drama-svg { display: block; width: 100%; min-width: 440px; height: auto; }
.hm-drama-hi { color: var(--accent); }
.m-person.on { border-color: var(--accent); background: rgba(var(--accentRGB), .12); }

/* ============================================================
   闯关路径图（人文闯关答题 / 结果两处共用）
   ------------------------------------------------------------
   节点四态：答对(--green) / 答错(--red) / 当前(--accent) / 未到(--line)，
   全部走主题变量 —— 换皮肤时节点颜色跟着变，不写死色值。
   关卡编号放在圆点**下方**（在面板底色上，用 --tx3），
   所以不必担心「文字压在填充色上」在浅色皮肤里糊成一片。
   ============================================================ */
.hm-trail-box { margin: 8px 0 10px; }
.hm-trail { display: block; width: 100%; min-width: 380px; height: auto; }
.hm-trail-rail { stroke: var(--line); stroke-width: 2; }
.hm-trail-node { fill: var(--panel2); stroke: var(--line); stroke-width: 2; }
.hm-trail-node.cur { fill: var(--accent); stroke: var(--accent); }
.hm-trail-node.ok { fill: var(--green, var(--jade)); stroke: var(--green, var(--jade)); }
.hm-trail-node.no { fill: var(--red); stroke: var(--red); }
.hm-trail-t { font-size: 11px; fill: var(--tx3); }
.hm-trail-cap { font-size: 12px; color: var(--tx3); line-height: 1.7; }
.hm-trail-cap b { color: var(--tx2); }

/* ============================================================
   断点：与全站一致（1023 切移动布局、720 单列、480 收窄）
   ============================================================ */
@media (max-width: 1023px) {
  .hm-viz { grid-template-columns: 1fr; }
  .hm-mark-grid { grid-template-columns: 1fr; }
  .hm-radar-box { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .hm-scroll, .hm-tree { min-width: 460px; }
  /* 病句的「病句 / 改后」对照在窄屏改上下排 —— 并排的话每列只剩 150px，
     一句 14px 的中文会被折成五六行，反而看不出对照关系 */
  .hm-err-cmp { grid-template-columns: 1fr; }
  .hm-bar-n { flex: 0 0 84px; }
  .hm-rec-row { padding: 9px 11px; gap: 8px; }
  .hm-row-tx { font-size: 15px; }
  .hm-slogan-deco span { width: 36px; height: 36px; font-size: 19px; }
  /* 评测结果在窄屏：分条标签收窄、折算说明另起一行，不横向挤压分数 */
  .hm-sc-n { flex: 0 0 44px; }
  .hm-sc-total b { font-size: 28px; }
  .hm-sc-total em { margin-left: 0; flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .hm-scroll, .hm-tree { min-width: 400px; }
  .hm-rec-beat, .hm-drama-svg { min-width: 380px; }
  .hm-trail { min-width: 360px; }
  .hm-bar-row { flex-wrap: wrap; }
  .hm-bar { flex: 1 1 100%; order: 3; }
}

/* ============================================================
   文言闯关 · AI 互译（M.views.classic 的第五件工具）
   需求出处：「逐句注释、通假/词类活用高亮」「文言词卡闯关」。

   ★ 高亮的重点不是「加了类名」，而是**画面上要真的看得出差别**：
     六类考点各给一种底色 + 一种下边框色。颜色全部取自主题变量并做 alpha
     叠加，浅色 / 深色 / 十二套皮肤下都不会落成透明。
   ★ 用 border-bottom 而不是左右竖线：中文是连排的，竖线会把句子切断；
     下划线既醒目又不打断行内的阅读节奏。
   ★ 每一处「考点色」都写了**两条**：一条是 `.wy-hit`（句中的字），
     一条是 `.wy-hitlg`（图例色块）/ `.wy-k`（注释上的类型标）。
     只写一条会「图例有颜色、句子里没颜色」，或反过来。
   ============================================================ */
.wy-srcnote {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  border: 1px dashed var(--line); background: rgba(var(--blueRGB), .06);
  font-size: .82rem; line-height: 1.95; color: var(--tx2);
}
.wy-srcnote b { color: var(--blue); margin-right: 8px; letter-spacing: 1px; }

.wy-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 12px 0 4px; }
.wy-lg { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--tx2); }
.wy-hitlg {
  width: 15px; height: 12px; border-radius: 3px; display: inline-block;
  border-bottom: 2px solid transparent; background: rgba(var(--accentRGB), .16);
}

/* ---- 逐句 ---- */
.wy-segs { display: grid; gap: 10px; margin-top: 8px; }
.wy-seg { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.wy-orig {
  font-family: var(--serif); font-size: 1.06rem; line-height: 2.15;
  letter-spacing: .5px; color: var(--tx); cursor: text;
}
.wy-trans { margin-top: 6px; font-size: .86rem; line-height: 1.95; color: var(--tx2); }
.wy-ptrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wy-pt {
  font: inherit; font-size: .76rem; line-height: 1; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--tx2);
}
.wy-pt:hover { border-color: var(--accent); color: var(--tx); }
.wy-pt.is-on { background: var(--accent); border-color: var(--accent); color: var(--onAccent); font-weight: 700; }
.wy-note {
  margin-top: 9px; padding: 9px 11px; border-radius: 10px;
  font-size: .84rem; line-height: 2; color: var(--tx);
  background: rgba(var(--accentRGB), .08); border-left: 3px solid var(--accent);
}
.wy-note .wy-ch { font-family: var(--serif); margin: 0 2px; }
/* 类型标（注释上的小徽标 / 一览的类名）—— 只写版式，颜色统一由下面那组变量给 */
.wy-k {
  display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: .74rem; letter-spacing: 1px; border: 1px solid transparent;
  background: rgba(var(--wkRGB, var(--accentRGB)), .16);
  color: var(--wk, var(--accent));
  border-color: rgba(var(--wkRGB, var(--accentRGB)), .42);
}

/* ---- 考点高亮：六类各一色。★ 这一组就是「通假活用高亮」本身 ----
   ★ 颜色只在**下面这一处**定义。句中高亮（.wy-hit）、图例色块（.wy-hitlg）、
     注释上的类型标与一览的类型标（.wy-k）、一览里的考点字（.wy-kchip）——
     四个地方都读同一组变量。
     之前是把色值抄了四遍，结果「考点一览」那两处漏抄：图例和句子里有颜色，
     一览里却全是金色，看不出「这个词属于哪一类」。抄 N 遍就一定会漏一处。
   ★ 两个变量都带兜底值：数据里冒出约定之外的类型时走 --accent（金），
     而不是让 rgba(var(--wkRGB), …) 因变量未定义而**整条声明失效**（那会静默变透明）。 */
.wy-hit[data-k], .wy-hitlg[data-k], .wy-k[data-k], .wy-kchip[data-k] {
  --wkRGB: var(--accentRGB); --wk: var(--accent);
}
.wy-hit[data-k="通假"], .wy-hitlg[data-k="通假"], .wy-k[data-k="通假"], .wy-kchip[data-k="通假"] {
  --wkRGB: var(--redRGB); --wk: var(--red);
}
.wy-hit[data-k="活用"], .wy-hitlg[data-k="活用"], .wy-k[data-k="活用"], .wy-kchip[data-k="活用"] {
  --wkRGB: var(--jadeRGB); --wk: var(--jade);
}
.wy-hit[data-k="古今异义"], .wy-hitlg[data-k="古今异义"], .wy-k[data-k="古今异义"], .wy-kchip[data-k="古今异义"] {
  --wkRGB: var(--blueRGB); --wk: var(--blue);
}
.wy-hit[data-k="虚词"], .wy-hitlg[data-k="虚词"], .wy-k[data-k="虚词"], .wy-kchip[data-k="虚词"] {
  --wkRGB: var(--accent2RGB); --wk: var(--accent2);
}
.wy-hit[data-k="实词"], .wy-hitlg[data-k="实词"], .wy-k[data-k="实词"], .wy-kchip[data-k="实词"] {
  --wkRGB: var(--accentRGB); --wk: var(--accent);
}
.wy-hit[data-k="句式"], .wy-hitlg[data-k="句式"], .wy-k[data-k="句式"], .wy-kchip[data-k="句式"] {
  --wkRGB: var(--accent3RGB); --wk: var(--accent3);
}

.wy-hit {
  cursor: pointer; padding: 0 1px; border-radius: 3px;
  border-bottom: 2px solid transparent; transition: background .15s ease;
  background: rgba(var(--wkRGB, var(--accentRGB)), .22);
  border-bottom-color: var(--wk, var(--accent));
}
.wy-hit:hover { outline: 2px solid rgba(var(--accentRGB), .5); outline-offset: 1px; }
.wy-hit.is-on {
  background: var(--accent); color: var(--onAccent); font-weight: 700;
  border-bottom-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accentRGB), .32);
}
/* 图例色块、注释上的类型标、一览的类型标、一览的考点字 —— 同一组变量 */
.wy-hitlg {
  background: rgba(var(--wkRGB, var(--accentRGB)), .22);
  border-bottom-color: var(--wk, var(--accent));
}
.wy-k {
  background: rgba(var(--wkRGB, var(--accentRGB)), .16);
  color: var(--wk, var(--accent));
  border-color: rgba(var(--wkRGB, var(--accentRGB)), .42);
}
.wy-kchip {
  border: 1px solid rgba(var(--wkRGB, var(--accentRGB)), .48);
  background: rgba(var(--wkRGB, var(--accentRGB)), .16);
}

/* ---- 通假与词类活用一览 ---- */
.wy-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 8px; }
.wy-kind { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.wy-kind-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
/* ★ 这里不能再写 color：它的特异度（0,1,1）高于 .wy-k（0,1,0），
   会把「按类上色」整个盖掉 —— 那正是「一览里全是一个颜色」的成因。 */
.wy-kind-h b { font-size: .9rem; letter-spacing: 1px; }
.wy-kind-h span { font-size: .74rem; color: var(--tx2); }
.wy-kind-b { display: flex; flex-wrap: wrap; gap: 6px; }
/* ★ 这里**只写版式**：底色与边框色由上面那组 --wkRGB 统一给。
   原来在这里写死 `border: 1px solid var(--line); background: rgba(var(--accentRGB), .07)`，
   而这条规则在源文件里排在后面 —— 同特异度下后写的赢，于是「按类上色」被整条盖掉，
   一览里的考点字全变成同一个金色。着色只能有一个出处。 */
.wy-kchip {
  font: inherit; font-family: var(--serif); font-size: .9rem; cursor: pointer;
  padding: 4px 10px; border-radius: 8px; color: var(--tx);
}
.wy-kchip:hover { background: rgba(var(--wkRGB, var(--accentRGB)), .28); }

/* ---- 文言词卡闯关 ---- */
.wy-cards { display: grid; gap: 10px; margin-top: 8px; }
.wy-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.wy-card.is-ok { border-color: var(--jade); }
.wy-card.is-no { border-color: var(--red); }
.wy-card-q { display: flex; gap: 8px; font-size: .9rem; line-height: 1.95; color: var(--tx); margin-bottom: 8px; }
.wy-card-q i {
  flex: 0 0 auto; font-style: normal; font-weight: 700; color: var(--accent);
  min-width: 20px; text-align: center;
}
.wy-score { margin-top: 10px; font-weight: 600; color: var(--accent); }

/* ---- AI 互译（逐字讲解 + 画面描述） ---- */
.wy-ask { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); }
.wy-ask textarea { width: 100%; box-sizing: border-box; }