/* ============================================================
   元素秘境（化学学科子栏目）· 专属样式
   颜色一律取站点主题变量（themes.css 多套皮肤自动适配），不写死面色。
   布局只作用于 #chem 页内，不影响其他栏目。

   ★ 与「数海探奇」「格物天地」的分工（改样式前先看这段）：
     · .m-* 是**学科子栏目通用件**，定义在 public/math/style.css，
       三栏共用（index.html 同时引入三份 style.css），这里不再重复定义。
     · 本文件只写：① #chem-root 的容器宽度与纵向节奏；② 化学专属图形件
       （.g-pt 周期表 / .g-el 格子 / .g-coef 配平步进器 / .g-pick 点名 / .g-cv 画布 …）。
   ============================================================ */

/* ★ 本页正文一律不用 --tx3。
   实测（无头 Chromium，默认主题，把元素自身算色与祖先背景逐层合成后实算 WCAG 比值）：
   --tx3 落在面板底色上只有 3.53:1，深色描边块上 3.62:1 —— 都低于 AA 对正文的 4.5:1。
   --tx3 的语义是「三级弱化」，用它做**装饰性**描边没问题，但用它写正文就是
   看得见但读不清，所以本文件里凡是用它当文字色的地方统一改 --tx2（实测约 6.7:1）。
   注意：--tx3 本身是 public/style.css + themes.css 的公共令牌，
   全站其它栏目（含 math/style.css 的 .m-sh-tag / .m-sh-why）也有同样的问题。
   ★ 2026-09-29 更新：math/style.css 那一侧已经统一修掉了
   （它自己的 20 处 --tx3 文字色全部改 --tx2，8 处选中态的白字改 --onAccent，
   `background: rgba(255,255,255,.26)` 改 `rgba(var(--hlRGB), .26)`）。
   所以本栏曾经为 .m-head span / .m-tab.m-sel i / .m-stage-chip 加的三条 #chem-root 兜底
   已经冗余，**已删除** —— 现在这三处直接吃 math/style.css 里那份修好的共享契约，
   12 套皮肤下逐条复算最低 4.89:1。本栏只保留自己的语义件（.lv-* / .is-now / .g-cross-to）。
   还有一条兜底留在下面（.g-cross-to），根因在本栏自己用了 --accent 压自己的淡底。

/* ★ 2026-09-29（第二轮）：把「本栏自有文件」在 12 套皮肤下的正文对比度一次扫干净。
   做法：不再只扫默认视图，而是**逐页签**（看/探分子/探实验室/学百科/玩闯关/教课堂/
   用实践/用竞赛强基 8 个）× 12 套皮肤，每个文字元素都按「自身算色 + 祖先背景逐层合成」
   复算 WCAG 比值（共 15888 个元素·皮肤组合）。扫出四类，前三类都在本文件：
     ① 元素周期表格子 .g-el-z（原子序数）/ .g-el-c（中文名）与分类图例 .g-pt-lg
        原来用 --tx2，压在 .g-cat-N 那层「类别色淡染」上；bright 只有 4.35:1、
        最差 2.53:1。→ 全部改用 --tx（这正是下方「分类配色」那段注释原本承诺的
        「文字统一用 var(--tx)」，之前只做到了 .g-el-s，另外两个漏了）。
     ② 格子底色的类别色 alpha 原来 .34（碱金属/碱土金属 .36），spring 皮肤的暗红面板
        被叠亮后连 --tx 都只剩 4.34:1 → 统一降到 .28（全栏实测最低 4.89:1）。
     ③ 地图结果列表 .m-map-item 的悬停/选中态底是「强调色淡染」，
        里面的 .m-mi-s / .m-mi-t 是 --tx2 → 实测 spring 3.94:1、film 4.31:1；
        这个坑与 .m-tab i 是同一个（淡染底会把底整体推离 panel2），
        所以淡染底内的次级文字一律换成 --tx（此底上 12 套皮肤最差 6.35:1）。
   剩下一类不归本栏：3D 画布与「用一句话调参」控件的提示文字（.sai-* / .s3d-*），
   样式在 public/subj-widget.css、由 public/subj-ai-ctrl.js 产出，**三科共用**；
   该文件有 5 处把 --tx3 当正文色（.s3d-hint / .sai-dim / .sai-raw / .sai-pt / .sai-exb），
   实测最差 2.98:1，已上报 team-lead 派单，本栏不动它（改了会影响数学、物理两栏）。 */
/* 根选择器必须是 #chem-root —— 化学页的真实容器是 index.html 里的 <div id="chem-root">。 */
#chem-root .m-wrap { max-width: 1100px; margin: 0 auto; padding-bottom: 40px; }

/* ---- 垂直节奏（折叠屏非整数 DPR 上「模块重叠」的成因，见数学页同款注释） ---- */
#chem-root .m-head { margin-bottom: 0; }

#chem-root .m-head + *,
#chem-root .m-segbtn + *,
#chem-root .m-segbtn + .m-segbtn,
#chem-root .m-pane > * + * { margin-top: 16px; }

/* 卡片**正文内部**的相邻块也要有间距（.m-card-b 是卡片正文容器，见 chem-mod1.js 的 card()）。
   上面四条只管到「面板直接子元素（卡片之间）」与「卡片头之后」两层；卡片正文里的兄弟块
   （PBL 项目卡网格 → 下方详情面板、可视化画布 → 说明文字、表格 → 备注 …）此前一条规则都没有，
   实测边距为 0 —— 产品方截图里「一排项目卡直接贴在详情面板上」就是这么来的。
   同层兄弟的 margin 会合并（取大值），所以这里统一给 16px 会把正文里原有的 8/10/12/14px
   一并抬到全站口径，不会出现叠加成 20 多 px 的情况。用 margin-top 而不是给卡片加
   height / overflow 去「挡」，否则等于把问题藏起来，窄屏或换主题时还会再露出来。 */
#chem-root .m-card-b > * + * { margin-top: 16px; }

/* ============================================================
   化学专属图形件
   ============================================================ */

/* ---- canvas 画布 ---- */
.g-cv { display: block; width: 100%; height: auto; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); touch-action: manipulation; }
.g-tipbox { font-size: 12.5px; line-height: 1.8; color: var(--tx2);
  background: rgba(var(--accentRGB), .12); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 10px 12px; }

/* ============================================================
   118 元素周期表
   ------------------------------------------------------------
   布局用 CSS Grid：18 列 × 7 行，镧系 / 锕系各占一整行（grid-row 8 / 9）。
   格子的位置由 JS 直接写 style.gridColumn / gridRow（数据里已经存了周期与族），
   所以这里不需要为 118 个元素写 118 条规则。
   ============================================================ */
.g-pt-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.g-pt-search { max-width: 340px; }
.g-pt-hint { font-size: 11.5px; color: var(--tx2); line-height: 1.7; flex: 1 1 260px; }

.g-pt-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
/* 分类图例按钮：底同样是 .g-cat-N 那层类别色淡染（见下方 .g-el-z 那段），
   所以字色也必须是 --tx —— --tx2 压类别色块在 night 只有 3.23:1。 */
.g-pt-lg { border: 1px solid var(--line); background: var(--panel2); color: var(--tx);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 12px; transition: all .15s; }
.g-pt-lg em { font-style: normal; color: var(--tx); margin-left: 5px; font-size: 11px; }
.g-pt-lg.m-off { opacity: .38; text-decoration: line-through; }

.g-pt { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.g-el { position: relative; border: 1px solid transparent; border-radius: 6px; padding: 4px 2px 3px;
  background: var(--cardF, var(--panel)); cursor: pointer; text-align: center; min-height: 42px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  transition: transform .12s, box-shadow .12s, opacity .15s; overflow: hidden; }
.g-el:hover { transform: translateY(-2px) scale(1.06); z-index: 3; box-shadow: 0 6px 16px rgba(0,0,0,.16); }
/* .g-el-z（原子序数）/ .g-el-c（中文名）必须用 --tx，不能用 --tx2：
   下面 .g-cat-N 那层「类别色 .34 淡染」会把底整体推离 panel2，
   --tx2 压上去实测 bright 只有 4.35:1、最差 2.53:1（8.5px/10px 也要 4.5:1）。
   这正是本段注释原本承诺的「文字统一用 var(--tx)」—— 之前只做到了 .g-el-s，
   序号与中文名漏了；12 套皮肤 × 9 个类别色块复算后补齐。 */
.g-el-z { font-size: 8.5px; color: var(--tx); line-height: 1; }
.g-el-s { font-size: 13px; font-weight: 700; color: var(--tx); line-height: 1.15; }
.g-el-c { font-size: 10px; color: var(--tx); line-height: 1.15; }
.g-el.m-dim { opacity: .18; }
.g-el.m-hit { box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(var(--accentRGB), .6); z-index: 4; }
.g-el.m-sel { box-shadow: 0 0 0 2px var(--accent2); z-index: 5; }

/* 分类配色：与 themes.css 的变量脱钩（类别固定语义色），但都做了低饱和处理，
   保证在浅色与深色皮肤上文字都读得出来（文字统一用 var(--tx)，理由见下方 .g-el-z 那段）。
   ★ alpha 定在 .28（原先 .34，类别 2/3 是 .36）：spring 皮肤的面板是暗红，
     类别色叠上去会把底往亮里推，连最强的 --tx 压在 .g-cat-3（碱土金属）上都只剩 4.34:1。
     10 个类别 × 12 套皮肤逐档复算后定在 .28 —— 全栏实测最低 4.89:1
     （spring 皮肤 .g-cat-3 上的原子序数），其余皮肤都在这之上。
     为什么统一成一个值、而不是「哪类不行调哪类」：淡染越浅，底就越靠近 --panel2
     （那是主题作者按文字色校准过的一档），对 12 套皮肤都是**单调**往好的方向走；
     而且降的是饱和度不是色相，10 个类别的区分度仍在。 */
.g-cat-0 { background: rgba(122,196,140,.28); }   /* 非金属 */
.g-cat-1 { background: rgba(150,160,220,.28); }   /* 稀有气体 */
.g-cat-2 { background: rgba(226,138,120,.28); }   /* 碱金属 */
.g-cat-3 { background: rgba(226,180,120,.28); }   /* 碱土金属 */
.g-cat-4 { background: rgba(150,205,205,.28); }   /* 类金属 */
.g-cat-5 { background: rgba(130,190,230,.28); }   /* 卤素 */
.g-cat-6 { background: rgba(200,175,140,.28); }   /* 过渡金属 */
.g-cat-7 { background: rgba(190,165,190,.28); }   /* 后过渡金属 */
.g-cat-8 { background: rgba(180,205,150,.28); }   /* 镧系 */
.g-cat-9 { background: rgba(205,170,150,.28); }   /* 锕系 */

.g-pt-detail { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; background: var(--cardF, var(--panel)); min-height: 60px; }
.g-pt-detail:empty { display: none; }
.g-ptd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.g-ptd-big { font-size: 34px; font-weight: 700; color: var(--accent); line-height: 1;
  min-width: 68px; text-align: center; }
.g-ptd-name { font-size: 19px; font-weight: 700; color: var(--tx); }
.g-ptd-name em { font-style: normal; font-size: 13px; color: var(--tx2); margin-left: 8px; font-weight: 400; }
.g-ptd-sub { font-size: 12.5px; color: var(--tx2); margin-top: 3px; }

/* ---- 方程式配平步进器 ---- */
.g-coef { margin-top: 6px; }
.g-coef-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.g-coef-row > span:first-child { flex: 1; font-size: 13px; color: var(--tx2); }
.g-mini { width: 26px; height: 26px; line-height: 1; border: 1px solid var(--line); background: var(--panel2);
  color: var(--tx2); border-radius: 7px; cursor: pointer; font-size: 15px; }
.g-mini:hover { border-color: var(--accent); color: var(--tx); }
.g-coef-v { min-width: 20px; text-align: center; font-weight: 700; color: var(--accent); }

/* ---- 课堂点名 / 计时器 ---- */
.g-pick { text-align: center; padding: 16px; border: 1px dashed var(--line); border-radius: 12px;
  background: var(--panel2); margin-top: 10px; }
.g-pick .g-pick-n { display: block; font-size: 26px; font-weight: 700; color: var(--accent); letter-spacing: 2px; }
.g-pick .g-pick-t { display: block; font-size: 12px; color: var(--tx2); margin-top: 4px; }
.g-pick.m-pop { animation: gPickPop .4s ease; }
@keyframes gPickPop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.g-clock { text-align: center; font-size: 30px; font-weight: 700; color: var(--accent2);
  letter-spacing: 2px; margin-top: 10px; font-variant-numeric: tabular-nums; }

/* ---- 通用图形件（与物理栏同名同义，两栏共用一份视觉语言） ---- */
.g-timeline { position: relative; padding-left: 26px; }
.g-timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(180deg, var(--accent), transparent); }
.g-tl-node { position: relative; margin-bottom: 12px; cursor: pointer; }
.g-tl-dot { position: absolute; left: -24px; top: 14px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--accent); transition: all .18s; }
.g-tl-node.m-sel .g-tl-dot, .g-tl-node:hover .g-tl-dot { background: var(--accent); box-shadow: 0 0 10px rgba(var(--accentRGB), .7); }
.g-tl-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--cardF, var(--panel)); transition: border-color .18s, box-shadow .18s; }
.g-tl-node.m-sel .g-tl-card { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.g-tl-y { font-size: 12px; letter-spacing: 1px; color: var(--accent2); font-weight: 700; }
.g-tl-t { font-size: 14.5px; font-weight: 700; color: var(--tx); margin: 4px 0 6px; }
.g-tl-d { font-size: 12.8px; color: var(--tx2); line-height: 1.8; }
.g-tl-w { font-size: 12px; color: var(--tx2); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.g-tl-h { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding-left: 0; }
.g-tl-h::before { display: none; }
.g-tl-h .g-tl-dot { position: static; display: block; margin: 0 0 8px; }

.g-cross { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.g-cross-item { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  background: var(--panel2); cursor: pointer; transition: transform .16s, border-color .16s; }
.g-cross-item:hover { transform: translateY(-3px); border-color: var(--accent); }
.g-cross-to { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px;
  /* ★ 文字色用 --accent2 而不是 --accent：这个 chip 自带 accent 底色（alpha .18），
     实测默认主题下 --accent #7A6127 压在自己的淡色底 rgb(225,217,197) 上只有 4.18:1，
     而 11.5px 属于正文档、要 4.5:1 —— 差一点点，正是「看着还行、细看费劲」的那类。
     --accent2 就是 themes.css 里为此定义的「次强调」（该文件原话：浅色主题上它比主强调更深、
     深色主题上更亮，方向随底色翻转），换过去后实测 6.04:1，且颜色仍是主题强调色系。 */
  background: rgba(var(--accentRGB), .18); color: var(--accent2); letter-spacing: 1px; }
.g-cross-t { font-size: 14px; font-weight: 700; color: var(--tx); margin: 6px 0 5px; }
.g-cross-d { font-size: 12.5px; color: var(--tx2); line-height: 1.75; }
/* 「前往对应小节 →」提示（与 phys 同一套）：卡片点了会落到对方栏目的具体小节 */
.g-cross-go { margin-top: 9px; font-size: 11.5px; letter-spacing: .5px; color: var(--accent); }

.g-two { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.g-two-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.g-radar-box { text-align: center; }
.g-radar-box canvas { margin: 0 auto; }

.m-rel-chip em { font-style: normal; font-size: 11px; color: var(--tx2); margin-left: 6px; }
/* 选中态 chip 的底色就是 --accent，所以这里必须用「压在强调色上的字」专用令牌 --onAccent
   （themes.css 每套主题都定义了它，浅底主题给近白、深底主题给近黑，方向自动翻转）。
   原先写的 rgba(255,255,255,.75) 实测只有 4.13:1，11px 要 4.5:1 —— 差一点也是差。 */
.m-rel-chip.m-sel em { color: var(--onAccent); }

.g-sprite-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.g-sprite { border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px; text-align: center;
  background: var(--panel2); opacity: .45; filter: grayscale(.7); transition: all .2s; }
.g-sprite.on { opacity: 1; filter: none; }
.g-sprite.cur { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accentRGB), .35); }
.g-spr-form { font-size: 26px; line-height: 1.1; }
.g-spr-name { font-size: 13px; font-weight: 700; color: var(--tx); margin-top: 4px; }
.g-spr-need { font-size: 11.5px; color: var(--tx2); margin-top: 2px; }

.g-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 10px; }
.g-collect { border: 1px dashed var(--line); border-radius: 12px; padding: 13px; background: var(--panel2);
  cursor: pointer; transition: all .18s; opacity: .7; }
.g-collect:hover { border-color: var(--accent); }
.g-collect.owned { border-style: solid; border-color: var(--accent); opacity: 1;
  background: var(--cardF, var(--panel)); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.g-col-e { font-size: 22px; }
.g-col-n { font-size: 13.5px; font-weight: 700; color: var(--tx); margin: 4px 0 4px; }
.g-col-d { font-size: 12px; color: var(--tx2); line-height: 1.7; min-height: 40px; }
.g-col-s { font-size: 11.5px; color: var(--accent); margin-top: 6px; }

/* 等级/档位小标（必做 / 选做 / 危险仿真 / 答题档位）。
   ★ 这里原来是写死的 #2e9e5b / #c9a24a / #d9534f —— 换肤后不跟着变，而且实测
   默认主题下三枚只有 3.08:1 / 2.17:1 / 3.58:1，11px 的正文档要 4.5:1，
   其中「选做」那枚基本看不清。改用主题里现成的「可读变体」令牌
   --jadeTx / --redTx（themes.css 给每套主题都定义了，专治「语义色直接当文字色」），
   中间档用 --accent；三者实测 7.82 / 5.32 / 7.85:1。
   选择器加上 #chem-root 前缀：math/style.css 的 .m-stage-chip 是公共件，
   下面 .is-now 那条（同为 2 个类）否则会被本文件更靠后的规则按层叠顺序压住。 */
#chem-root .m-stage-chip.lv-ok { color: var(--jadeTx); border-color: var(--jadeTx); }
#chem-root .m-stage-chip.lv-mid { color: var(--accent); border-color: var(--accent); }
#chem-root .m-stage-chip.lv-low { color: var(--redTx); border-color: var(--redTx); }
.m-lab-detail { margin-top: 16px; }
.g-danger { font-size: 12.8px; line-height: 1.8; color: var(--tx); border-radius: 10px; padding: 10px 13px;
  background: rgba(217,83,79,.12); border-left: 3px solid #d9534f; margin: 10px 0; }
.g-lab-rep { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.g-rep-row { margin-bottom: 10px; }
.g-rep-row > span { display: block; font-size: 12.5px; color: var(--tx2); margin-bottom: 5px; }

.g-bank { display: flex; flex-direction: column; gap: 10px; }
.g-bank-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); overflow: hidden; }
.g-bank-item.open { border-color: var(--accent); }
.g-bank-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; flex-wrap: wrap; }
.g-bank-i { flex: 0 0 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%;
  background: rgba(var(--accentRGB), .2); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.g-bank-n { font-size: 14px; font-weight: 700; color: var(--tx); }
.g-bank-tier { margin-left: auto; font-size: 11.5px; color: var(--tx2); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; }
.g-bank-q { font-size: 13px; color: var(--tx2); line-height: 1.85; padding: 0 14px 12px; }
.g-bank-key { font-size: 13px; color: var(--tx); line-height: 1.85; padding: 12px 14px;
  border-top: 1px dashed var(--line); background: rgba(var(--accentRGB), .10); }
.g-bank-key b { display: block; color: var(--accent); letter-spacing: 1px; margin-bottom: 4px; }

/* ============================================================
   分子视界 · 3D 分子模型 / 反应机理动画 / 分子乐高
   ------------------------------------------------------------
   这一批是模块二新增的交互件：都是 canvas（.g-cv）或 Subj3D 画布，
   这里只补「控件区」的排布 —— 控件本身用的还是 .m-ctrl / .m-btn / .m-input
   这些通用件，不另造一套按钮。
   颜色一律走主题变量（--accent / --line / --panel2 …），换肤自动跟随。
   ============================================================ */

/* ---- 分子 / 反应下拉：通用 .m-input 已经给了底色与边框，这里只收口尺寸 ---- */
.m-mol-sel { margin-top: 4px; }

/* ---- 一排并列的小按钮（重置视角 / 上一步 / 下一步 …） ---- */
.m-mol-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }

/* ---- 分子乐高 · 元件库 ---- */
.m-lego-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; margin-top: 6px; }
.m-lego-el { display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--tx);
  border-radius: 9px; padding: 7px 4px; font-size: 12.5px; font-weight: 700;
  cursor: grab; touch-action: none; transition: border-color .15s, transform .15s; }
.m-lego-el:hover { border-color: var(--accent); transform: translateY(-2px); }
.m-lego-el:active { cursor: grabbing; }
/* 元件库上的小圆点用 var(----x, var(--accent)) 内联给色（元素色不在样式表里）；
   这里只管它的形状 —— 不然 18 个元素要写 18 条规则。 */
.m-lego-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px;
  box-shadow: inset -1px -1px 2px rgba(0,0,0,.28); }

/* 从元件库拖出来时跟随指针的影子（position:fixed，不参与排版） */
.m-lego-ghost { position: fixed; z-index: 9999; pointer-events: none;
  transform: translate(-50%, -50%); min-width: 34px; text-align: center;
  padding: 5px 9px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--onAccent); background: var(--accent); border: 1px solid var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.22); }

/* ---- 价键自检标签：✘ 不代表「分子错了」，而是「这个原子的成键数与常见价不符」 ---- */
.m-lego-tag { display: inline-block; margin: 0 6px 6px 0; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--tx2); }
.m-lego-tag.ok { color: var(--jade); border-color: var(--jade); }
.m-lego-tag.bad { color: var(--red); border-color: var(--red); }

/* ============================================================
   化学时空地图 · 图层开关 / 多维筛选 / 结果列表 / 空态
   ============================================================ */

/* 图层开关：本质是「可多选的按钮」，因此不用 checkbox 而是按钮 + 圆点，
   与全站的 .m-rel-chip / .m-segbtn 视觉一致。 */
.m-map-layers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m-map-layer { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--tx2);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; }
.m-map-layer i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); transition: background .15s; }
.m-map-layer.m-sel { color: var(--tx); border-color: var(--accent); background: rgba(var(--accentRGB), .10); }
.m-map-layer.m-sel i { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accentRGB), .8); }

/* 多维筛选：元素 / 矿物 / 反应三个下拉 + 一个关键词框 + 清除按钮，
   窄屏自动折行（见文件末尾的断点）。 */
.m-map-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; align-items: end; margin-top: 12px; }
.m-map-field { min-width: 0; }
.m-map-field > label { display: block; font-size: 12px; color: var(--tx2); margin-bottom: 4px; letter-spacing: .5px; }
.m-map-field-q { grid-column: span 2; }
.m-map-clear { align-self: end; }
/* 结果计数 / 列表标题与地图之间留白，避免「数字直接贴在底图上」 */
.m-map-list { max-height: 320px; overflow: auto; border: 1px solid var(--line);
  border-radius: 12px; background: var(--panel2); margin-top: 8px; }
.m-map-list:empty { display: none; }
.m-map-item { display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 10px 13px; cursor: pointer; border-bottom: 1px dashed var(--line);
  border-left: 3px solid transparent; transition: background .15s, border-color .15s; }
.m-map-item:last-child { border-bottom: none; }
.m-map-item:hover { background: rgba(var(--accentRGB), .08); }
.m-map-item.m-sel { background: rgba(var(--accentRGB), .14); border-left-color: var(--accent); }
.m-mi-n { font-size: 13.5px; font-weight: 700; color: var(--tx); }
.m-mi-s { font-size: 12px; color: var(--tx2); }
.m-mi-t { font-size: 11.5px; color: var(--tx2); }
/* 悬停/选中项的底是「强调色淡染」—— 同 .m-tab i 的坑（见 math/style.css:272 那段）：
   淡染把底往强调色拉近，--tx2 压上去 spring 只剩 3.94:1、film 4.31:1（要 4.5:1），
   而 spring 把 alpha 降到 .06 也才 4.48:1，靠调淡染浓度到不了头。
   所以淡染底内的次级文字一律换成 --tx（此底上 12 套皮肤最差 spring 6.35:1）。 */
.m-map-item:hover .m-mi-s, .m-map-item:hover .m-mi-t,
.m-map-item.m-sel .m-mi-s, .m-map-item.m-sel .m-mi-t { color: var(--tx); }
/* 详情面板底部的四个维度标签 */
.m-map-dims { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.m-map-dims span { font-size: 11.5px; color: var(--tx2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; background: var(--panel2); }

/* 空态：结果为空时显示在筛选条下方（列表为空时列表本身不占位） */
.m-map-empty { display: none; margin-top: 12px; padding: 16px 18px; text-align: left;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--panel2); }
.m-map-empty:not(:empty) { display: block; }
.m-ee-t { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 6px; }

/* 地图上没有可显示的光点时的叠加提示 */
.m-map-empty-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 5; padding: 8px 16px; border-radius: 999px; font-size: 12.5px;
  color: var(--tx); background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,.12); pointer-events: none; }
/* .m-realmap 本身没有定位上下文，叠加提示需要它 */
.m-realmap { position: relative; }
.m-realmap.m-empty .m-amap { opacity: .45; }

/* 选中点位的地图标记：放大 + 主题色描边（底图上的标记是 HTML 节点，
   颜色必须能跟着换肤走，所以用变量而不是固定色）。 */
.m-pin.m-pin-hi { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accentRGB), .45), 0 0 14px rgba(var(--accentRGB), .85); }

/* ============================================================
   竞赛强基 · 三级分级测评 / 强基面试模拟
   ============================================================ */

/* 三级级别按钮：并列的「级别 + 题量」按钮，推荐级别带小标 */
.m-assess-levels { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.m-assess-btn { display: inline-flex; align-items: center; gap: 7px; }
/* ★ 这个按钮是 .m-btn（math/style.css：底色 --accent、字色写死的纯白），所以按钮**里面**的
   每一段文字都得按「压在强调色上」来配色：
   · 题量 <em> 原写 --tx2，实测只有 1.27:1 —— 等于没字；改用 --onAccent（实测 5.74:1）；
   · 「本学段推荐」小标更糟：.is-now 是 color: var(--accent) + 透明底，落在强调色按钮上
     就是强调色压强调色 = 1:1，整枚消失。下面给它一个 chip 底（--panel2），并用
     --accent2 当字色 —— 这样在卡片里、在强调色按钮里都读得出来（6〜7:1）。 */
.m-assess-btn em { font-style: normal; font-size: 11.5px; color: var(--onAccent); }
.m-assess-btn .m-stage-chip { margin-left: 2px; }
#chem-root .m-stage-chip.is-now { color: var(--accent2); border-color: var(--accent2); background: var(--panel2); }

/* 测评结果分档：三档三种语义色，全部取主题变量（换肤自动跟随） */
.m-assess-res { margin: 6px 0 14px; padding: 13px 15px; border: 1px solid var(--line);
  border-left-width: 4px; border-radius: 10px; background: var(--panel2); }
.m-assess-res .m-ar-t { font-size: 14px; color: var(--tx); }
.m-assess-res .m-ar-d { margin-top: 6px; font-size: 12.8px; color: var(--tx2); line-height: 1.8; }
.m-band-excellent { border-left-color: var(--jade); }
.m-band-pass { border-left-color: var(--accent); }
.m-band-weak { border-left-color: var(--red); }

/* 逐题对错与解析：答错的那一题要能一眼找到 */
.m-assess-detail { margin-top: 8px; }
.m-ad-one { padding: 9px 12px; border: 1px dashed var(--line); border-radius: 9px;
  margin-bottom: 8px; font-size: 12.8px; color: var(--tx2); line-height: 1.8; background: var(--panel2); }
.m-ad-one b { margin-right: 6px; }
.m-ad-one.ok { border-left: 3px solid var(--jade); }
.m-ad-one.ok b { color: var(--jade); }
.m-ad-one.no { border-left: 3px solid var(--red); }
.m-ad-one.no b { color: var(--red); }

/* 面试卡：与物理栏同名同义（phys/style.css 同样是全局加载的），这里再声明一份，
   是为了让元素秘境不依赖物理栏的样式表 —— 物理栏的样式一旦被收窄到 #phys-root，
   化学这边的面试卡不会跟着散掉。 */
.g-iv { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel2); }
.g-iv-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.g-iv-n { font-size: 11.8px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 2px 10px; }
.g-iv-tag { font-size: 12.5px; color: var(--tx2); }
.g-iv-q { font-size: 13.5px; color: var(--tx); line-height: 1.9; }
.g-iv-focus { margin-top: 6px; font-size: 12px; color: var(--tx2); line-height: 1.75; }
.g-iv-fb { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: 0 8px 8px 0; }
.g-iv-fb-h { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--tx); }
.g-iv-fb .m-ol { margin: 6px 0 0 18px; padding-left: 16px; }

/* ============================================================
   元素收集册 · 集齐彩蛋
   ============================================================ */
.m-album { margin-top: 12px; padding: 13px 15px; border: 1px dashed var(--line);
  border-radius: 12px; background: var(--panel2); }
/* 集齐后：虚线变实线 + 主题色 + 一圈柔光 —— 这是「这一块真的变了」最直观的信号 */
.m-album-done { border-style: solid; border-color: var(--accent);
  background: rgba(var(--accentRGB), .10); box-shadow: 0 0 0 3px rgba(var(--accentRGB), .16); }
.m-album-bar { height: 8px; border-radius: 999px; background: var(--line2);
  overflow: hidden; margin: 6px 0 10px; }
.m-album-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .25s; }
.m-album-honor { font-size: 14px; color: var(--tx); line-height: 1.85; }
.m-album-honor b { color: var(--accent); }
/* 集齐那一刻让荣誉条自己亮一下（尊重系统的「减少动效」设置） */
.m-album-done .m-album-honor { animation: mAlbumPop .5s ease-out; }
@keyframes mAlbumPop { 0% { transform: scale(.97); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m-album-done .m-album-honor { animation: none; } }

/* ============================================================
   化合物知识卡
   ============================================================ */
.m-cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 10px; }
.m-cmp { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: var(--panel2); cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s; }
.m-cmp:hover { border-color: var(--accent); transform: translateY(-2px); }
.m-cmp.m-sel { border-color: var(--accent); background: rgba(var(--accentRGB), .12); }
/* 化学式（H₂O 这类）：17px / 700 属于「正文档」（大字要 ≥18.66px 且粗体才算），
   所以要求 4.5:1。原来用 --accent，压在原子 chip 的淡底上实测 4.44:1，
   差 0.06 就够不着 —— 换成 --accent2（同色系更深/更亮，随主题翻转）实测 6.41:1。 */
.m-cmp-f { font-size: 17px; font-weight: 700; color: var(--accent2); letter-spacing: .5px; }
.m-cmp-n { font-size: 13px; font-weight: 700; color: var(--tx); margin-top: 3px; }
/* 俗名可能很长（如「石灰石 / 大理石 / 方解石」），最多两行、超出省略，避免把卡片撑高 */
.m-cmp-a { font-size: 11.5px; color: var(--tx2); margin-top: 3px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-cmp-c { font-size: 11px; color: var(--tx2); margin-top: 6px;
  border-top: 1px dashed var(--line); padding-top: 5px; }
.m-cmp-d { padding: 2px 0; }
.m-cmp-dh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.m-cmp-dh .m-cmp-f { font-size: 26px; }
.m-cmp-dn { font-size: 15px; font-weight: 700; color: var(--tx); }
.m-cmp-ds { font-size: 12px; color: var(--tx2); margin-top: 3px; }

/* ============================================================
   我的成果与互评 · 互评量表
   ------------------------------------------------------------
   互评接口还没接，这里先把真正要用的三维量表摆出来。
   用虚线分隔的行，而不是卡片网格 —— 量表是「逐条读」的东西，
   做成并列卡片会在手机上被压成三条细缝。
   ============================================================ */
.m-rubric { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2); overflow: hidden; }
.m-rubric-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 13px; }
.m-rubric-row + .m-rubric-row { border-top: 1px dashed var(--line); }
.m-rubric-n { font-size: 13px; font-weight: 700; color: var(--tx); flex: 0 0 auto; min-width: 84px; }
.m-rubric-d { font-size: 12px; color: var(--tx2); line-height: 1.75; flex: 1 1 200px; }
.m-rubric-s { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.m-rubric-s i { font-style: normal; font-size: 11.5px; color: var(--tx2);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; background: var(--panel); }

/* ============================================================
   元素课堂 · 课堂互动（匿名投票 / 课堂弹幕）
   ------------------------------------------------------------
   两个都是**本机**工具：投票是在教室这台设备上逐票记录，弹幕只在本机滚动。
   所以它们的样式刻意做得像「一块黑板上的计票板」，不是数据看板 ——
   免得看起来像「全班都在这个页面上投票」。
   ============================================================ */
.m-vote { margin-top: 10px; }
.m-vote-item { margin-bottom: 9px; }
.m-vote-top { display: flex; align-items: center; gap: 10px; }
.m-vote-name { font-size: 13px; color: var(--tx); flex: 0 0 auto; max-width: 44%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-vote-add { flex: 0 0 auto; font-size: 12px; padding: 4px 10px; }
.m-vote-bar { flex: 1 1 auto; height: 10px; border-radius: 999px; background: var(--line2);
  overflow: hidden; margin-top: 6px; }
.m-vote-bar i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .25s ease-out; }
.m-vote-n { flex: 0 0 auto; font-size: 12px; color: var(--tx2); font-variant-numeric: tabular-nums; }

.m-danmu { position: relative; height: 148px; overflow: hidden; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel2); margin-top: 10px; }
.m-danmu-line { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 13px;
  color: var(--tx); padding: 2px 11px; border-radius: 999px;
  background: rgba(var(--accentRGB), .14); will-change: transform; }
.m-danmu-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 12.5px; color: var(--tx2); }
.m-danmu-sent { margin-top: 8px; font-size: 12.5px; color: var(--tx2); line-height: 1.85; }
/* 降低动效偏好：不滚动，改成一条一条静态列出（在 JS 里判断，这里兜底不闪） */
@media (prefers-reduced-motion: reduce) { .m-danmu-line { transition: none !important; } }

/* 当堂测验卷面：像一张纸，而不是又一块卡片 —— 老师要的是能直接投屏的东西 */
.m-paper { border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 14px 16px; margin-top: 10px; }
.m-paper-q { padding: 9px 0; }
.m-paper-q + .m-paper-q { border-top: 1px dashed var(--line); }
.m-paper-q .mp-q { font-size: 13.5px; color: var(--tx); line-height: 1.85; }
.m-paper-q .mp-o { font-size: 12.8px; color: var(--tx2); line-height: 1.8; margin-top: 3px;
  padding-left: 14px; }

/* 缺接口清单：路径用等宽字，说明用正文色 —— 让老师能直接把这份清单转给开发 */
.m-need { border: 1px dashed var(--line); border-radius: 10px; background: var(--panel2);
  margin-bottom: 12px; overflow: hidden; }
.m-need-row { padding: 10px 13px; }
.m-need-row + .m-need-row { border-top: 1px dashed var(--line); }
.m-need-p { display: block; font-family: var(--fontNum); font-size: 12px; color: var(--accent);
  word-break: break-all; }
.m-need-d { display: block; font-size: 12.4px; color: var(--tx2); line-height: 1.8; margin-top: 5px; }

/* ============================================================
   断点
   ============================================================ */
@media (max-width: 1023px) {
  /* 周期表在窄屏放不下 18 列 —— 横向可滚动，而不是把格子压成看不清的细条。
     滚动条容器要能聚焦（tabindex 由模板提供，这里只管滚动行为）。 */
  .g-pt { overflow-x: auto; grid-template-columns: repeat(18, minmax(34px, 1fr)); }
  .g-el { min-height: 38px; }
  .g-el-s { font-size: 11.5px; }
  .g-el-c { font-size: 9px; }
  .g-two { grid-template-columns: 1fr; }
  .g-radar-box { text-align: left; }
  .g-radar-box canvas { margin: 0; }
  .g-tl-h { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  /* 关键词搜索框占满一整行：150px 的栅格里放「搜索：地名 / 资源 / 知识点」会被压成一条 */
  .m-map-field-q { grid-column: 1 / -1; }
  .m-mol-btns { gap: 6px; }
}

@media (max-width: 720px) {
  .g-pt { grid-template-columns: repeat(18, minmax(30px, 1fr)); padding: 6px; gap: 2px; }
  .g-el { min-height: 34px; border-radius: 5px; }
  .g-el-z { font-size: 7.5px; }
  .g-el-s { font-size: 10.5px; }
  .g-el-c { display: none; }          /* 极窄屏只留序号与符号，中文名靠点开看 */
  .g-cross { grid-template-columns: 1fr; }
  .g-card-grid { grid-template-columns: 1fr 1fr; }
  .g-sprite-row { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .g-bank-tier { margin-left: 0; }
  .g-timeline { padding-left: 20px; }
  .g-tl-dot { left: -18px; }
  .g-ptd-big { min-width: 56px; font-size: 28px; }
  /* 手机屏：图层按钮与列表条目收紧，元件库一行放 5～6 个原子 */
  .m-map-layer { padding: 5px 11px; font-size: 12px; }
  .m-map-list { max-height: 260px; }
  .m-map-item { padding: 9px 11px; }
  .m-lego-pal { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
  .m-lego-el { font-size: 11.5px; padding: 6px 3px; }
  /* 手机屏：化合物卡与三级测评按钮收紧，一行放 2 张卡 / 一个级别按钮 */
  .m-cmp-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .m-assess-levels { gap: 8px; }
  .m-assess-btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   元素详情卡 · 四栏（性质 / 用途 / 发现史 / 安全信息）
   需求出处：「118 元素周期表交互查询，点击元素展开详情卡片
             （性质、用途、发现史、安全信息）」。
   ★ 四栏的**版式差别本身就是信息**：安全信息独立一栏并加左侧色条 ——
     它和「性质」不一样，是警告而不是描述，混在正文里会被一眼扫过去。
     中学实验台上真正会伤人的是这一栏（汞、白磷、六价铬、可溶性钡盐…）。
   ★ 每栏标题用左侧竖线而不是加粗（加粗在长段落里读不出层级）。
   ============================================================ */
.g-pt-detail .mmb-sec {
  padding-left: 10px; border-left: 3px solid var(--line); margin-bottom: 10px;
}
.g-pt-detail .mmb-sec > b {
  display: block; font-size: 12.5px; letter-spacing: 1px;
  color: var(--accent2); margin-bottom: 3px;
}
.g-pt-detail .mmb-sec > p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--tx); }
/* 安全信息：换红系色条 + 极浅底色，与其余三栏明显区分 */
.g-pt-detail .g-ptd-safe {
  border-left-color: var(--red);
  background: rgba(var(--redRGB), .05);
  border-radius: 0 8px 8px 0; padding: 8px 10px;
}
.g-pt-detail .g-ptd-safe > b { color: var(--red); }