/* 六壬课程 · 青金蓝与琥珀
   取汉代六壬式盘的意象：天盘为太阳（琥珀金），地盘为方（青金蓝），底色是漆木。 */
:root{
  --ground:#EEEDF1; --surface:#F5F4F8; --paper:#FAF9FB; --line:#D6D4DE;
  --ink:#191C28; --ink2:#4A4E60; --ink3:#7A7E90;
  --blue:#2C4A70; --blue-s:#E2E7EF; --gold:#8F6412; --gold-s:#F3EAD6;
  --red:#8C2F35; --red-s:#F5E5E5; --green:#2F5B4A;
  --pan-bg:#F4F1E9; --pan-line:#C9C3B4;
  --w-mu:#2E6B4F; --w-huo:#A33228; --w-tu:#8A6A1F; --w-jin:#7A6A46; --w-shui:#2B4A6B;
  --f-disp:"Noto Serif SC",Songti SC,STSong,serif;
  --f-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --safe-b:env(safe-area-inset-bottom,0px); --tabh:60px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#101219; --surface:#171A23; --paper:#1B1E29; --line:#2E3240;
  --ink:#E2E5EE; --ink2:#A9AEBF; --ink3:#787E92;
  --blue:#89AEDA; --blue-s:#1E2836; --gold:#D6A548; --gold-s:#2A2318;
  --red:#D98A8E; --red-s:#2B1D1E; --green:#7FB79F;
  --pan-bg:#1D2029; --pan-line:#3A3F4E;
  --w-mu:#6FBF95; --w-huo:#E08A80; --w-tu:#D8B45C; --w-jin:#C9BC97; --w-shui:#8FB6DE;
}}
:root[data-theme="dark"]{
  --ground:#101219; --surface:#171A23; --paper:#1B1E29; --line:#2E3240;
  --ink:#E2E5EE; --ink2:#A9AEBF; --ink3:#787E92;
  --blue:#89AEDA; --blue-s:#1E2836; --gold:#D6A548; --gold-s:#2A2318;
  --red:#D98A8E; --red-s:#2B1D1E; --green:#7FB79F;
  --pan-bg:#1D2029; --pan-line:#3A3F4E;
  --w-mu:#6FBF95; --w-huo:#E08A80; --w-tu:#D8B45C; --w-jin:#C9BC97; --w-shui:#8FB6DE;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);
  font-size:16px;line-height:1.85;-webkit-text-size-adjust:100%}
/* 顶栏 */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--ground);border-bottom:1px solid var(--line)}
.top h1{flex:1;margin:0;font-family:var(--f-disp);font-size:17px;font-weight:600;
  letter-spacing:.04em;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{all:unset;cursor:pointer;font-size:14px;color:var(--blue);padding:4px 6px;min-width:56px;visibility:hidden}
.back.on{visibility:visible}
.acts{display:flex;gap:6px;min-width:56px;justify-content:flex-end}
.act{all:unset;cursor:pointer;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;color:var(--ink2);background:var(--surface)}
.act:focus-visible,.back:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 屏 */
main{max-width:820px;margin:0 auto;padding:14px 14px calc(var(--tabh) + 26px)}
/* 兜底：任何漏网的宽元素都不许把页面顶出横向滚动。
   ⚠️ 只能用 clip，不能用 hidden —— hidden 会让 position:sticky 失效（吸顶盘直接没了）。 */
main{overflow-x:clip}
.screen{display:none}
.screen.active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.active{animation:none}}
/* 首页 */
.hero{padding:22px 0 8px}
.hero-t{font-family:var(--f-disp);font-size:30px;font-weight:600;letter-spacing:.08em}
.hero-t em{font-style:normal;color:var(--blue)}
.hero-s{margin:8px 0 0;color:var(--ink3);font-size:13.5px}
.stats{display:flex;gap:10px;margin:18px 0 6px}
.stats div{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:10px 8px;text-align:center}
.stats b{display:block;font-family:var(--f-disp);font-size:22px;color:var(--gold)}
.stats span{font-size:11.5px;color:var(--ink3)}
.menu{display:flex;flex-direction:column;gap:8px;margin:16px 0}
/* 首页分组小标题。⚠️ 只是分隔，别做成可折叠——首页要的是一眼看全，不是层层点开 */
.mgrp{font-size:12px;color:var(--ink3);letter-spacing:.08em;margin:14px 2px 2px;
  display:flex;align-items:center;gap:8px}
.mgrp:first-child{margin-top:4px}
.mgrp::after{content:"";flex:1;height:1px;background:var(--line)}
.mi{all:unset;cursor:pointer;display:block;padding:14px 16px;background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px}
.mi:focus-visible{outline:2px solid var(--blue)}
.mi b{display:block;font-family:var(--f-disp);font-size:17px}
.mi span{font-size:12.5px;color:var(--ink3)}
/* ⚠️ 副标题里的计数（189 例 / 137 张表 / 289 条）是 <b>，会被上面那条
   `.mi b{display:block}` 变成块级，数字就单独占一行、读成「课例 / 189 / 例实盘」。
   这里把它压回行内，并让数字稍微醒目一点。 */
.mi span b{display:inline;font-family:inherit;font-size:13px;color:var(--ink2)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:14px 16px;margin:16px 0}
.row{display:flex;align-items:center;gap:8px}.row.spread{justify-content:space-between}
.row.wrap{flex-wrap:wrap;gap:6px;margin-top:12px}
.bar{height:5px;background:var(--surface);border-radius:3px;overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:var(--gold);border-radius:3px;transition:width .3s}
.chip{font-size:11.5px;padding:2px 8px;border-radius:10px;background:var(--surface);color:var(--ink3);border:1px solid var(--line)}
.chip.done{background:var(--gold-s);color:var(--gold);border-color:var(--gold)}
.muted{color:var(--ink3);font-size:12.5px}.center{text-align:center}
.lead{color:var(--ink2);font-size:14.5px;margin:14px 0 18px}
/* 课程列表 */
.part{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--gold);
  margin:22px 0 8px;text-transform:uppercase}
.li{all:unset;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;margin-bottom:7px;width:100%}
.li:focus-visible{outline:2px solid var(--blue)}
.li .n{font-family:var(--f-disp);font-size:19px;color:var(--gold);min-width:26px;line-height:1.3}
.li .t{flex:1;min-width:0}
.li .t b{display:block;font-size:15.5px;font-weight:600;line-height:1.5}
.li .t span{display:block;font-size:12.5px;color:var(--ink3);line-height:1.6;margin-top:2px}
.li.todo{opacity:.5;cursor:default;border-style:dashed}
.li .mark{font-size:11px;color:var(--gold)}
/* 正文 */
.doc{padding-bottom:8px}
.doc h1{font-family:var(--f-disp);font-size:22px;line-height:1.5;font-weight:600;margin:10px 0 18px;
  padding-bottom:12px;border-bottom:2px solid var(--ink);text-wrap:balance}
.doc h2{font-family:var(--f-disp);font-size:18.5px;font-weight:600;margin:34px 0 12px;
  padding-left:11px;border-left:3px solid var(--blue);text-wrap:balance;scroll-margin-top:60px}
.doc h3{font-size:16px;font-weight:700;margin:24px 0 8px;scroll-margin-top:60px}
.doc h4{font-size:14.5px;font-weight:700;color:var(--ink2);margin:18px 0 6px}
.doc p{margin:11px 0}
.doc ul,.doc ol{padding-left:21px;margin:11px 0}
.doc li{margin:5px 0}
.doc hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.doc code{font-family:var(--f-mono);font-size:.86em;background:var(--surface);padding:1px 5px;border-radius:3px}
.doc a.wiki{color:var(--blue);border-bottom:1px dotted var(--blue);cursor:pointer}
.src{font-family:var(--f-mono);font-size:11.5px;color:var(--ink3);white-space:nowrap}
q.yw{quotes:none;color:var(--ink);font-family:var(--f-disp)}
blockquote{margin:15px 0;padding:12px 14px;border-radius:2px;font-size:14.5px;line-height:1.8;
  background:var(--surface);border-left:3px solid var(--line);color:var(--ink2)}
blockquote p{margin:6px 0}
blockquote.cite{background:var(--paper);border-left-color:var(--blue);color:var(--ink);font-family:var(--f-disp)}
blockquote.warn{background:var(--red-s);border-left-color:var(--red)}
blockquote.star{background:var(--gold-s);border-left-color:var(--gold)}
blockquote.tip{background:var(--blue-s);border-left-color:var(--blue)}
.tw{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:3px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th{background:var(--surface);text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);
  font-size:13px;white-space:nowrap}
td{padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:top}
td.nw,th:first-child,td:first-child{white-space:nowrap}
tr:last-child td{border-bottom:0}
pre.board{font-family:var(--f-mono);background:var(--pan-bg);border:1px solid var(--pan-line);
  border-radius:3px;padding:12px 14px;overflow-x:auto;font-size:13px;line-height:1.9;margin:15px 0}
mark.hit{background:var(--gold-s);color:var(--ink);border-radius:2px;padding:0 2px}
/* 五行本色 */
.w-mu{color:var(--w-mu)}.w-huo{color:var(--w-huo)}.w-tu{color:var(--w-tu)}
.w-jin{color:var(--w-jin)}.w-shui{color:var(--w-shui)}
/* ── 方形式盘 ── */
.panwrap{margin:20px 0;display:flex;justify-content:center}
.pan{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);
  width:min(330px,100%);aspect-ratio:1;background:var(--pan-bg);border:1.5px solid var(--pan-line)}
.gong{border:.5px solid var(--pan-line);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:2px}
.gong .tj{font-size:10.5px;color:var(--gold);line-height:1.2}
.gong .tp{font-family:var(--f-disp);font-size:21px;font-weight:600;line-height:1.15}
.gong .dp{font-family:var(--f-mono);font-size:9.5px;color:var(--ink3);line-height:1.2}
.gong.hi{background:var(--gold-s)}
.panmid{grid-row:2/4;grid-column:2/4;border:.5px solid var(--pan-line);display:flex;
  align-items:center;justify-content:center;text-align:center;font-family:var(--f-mono);
  font-size:11px;color:var(--ink3);padding:6px;line-height:1.7}
/* ── 四课（从右到左，最右是第一课） ── */
.sike{display:flex;gap:6px;justify-content:center;margin:18px 0;flex-wrap:nowrap;overflow-x:auto;max-width:100%}
.ke{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:8px 6px;
  min-width:66px;text-align:center;display:flex;flex-direction:column;gap:2px}
.ke .tj{font-size:11px;color:var(--gold)}
.ke .lb{font-family:var(--f-mono);font-size:9.5px;color:var(--ink3);letter-spacing:.06em}
.ke .up{font-family:var(--f-disp);font-size:21px;font-weight:600}
.ke .dn{font-family:var(--f-disp);font-size:18px;padding-top:3px;border-top:1px solid var(--line)}
.ke .nt{font-size:10px;color:var(--ink3);line-height:1.4}
/* ── 三传 ── */
.sanchuan{display:flex;flex-direction:column;gap:5px;margin:18px auto;max-width:min(340px,100%)}
/* ⚠️ 三传是**列向 flex**，justify-content 管的是竖直方向，横向居中只能靠 margin:auto。
   方盘走 .panwrap 的 flex 居中、四课走自身的 justify-content:center，唯独这里当初漏了，
   宽屏下就只有三传贴着左边（2026-08-25 用户截图报的正是这个）。
   ⚠️ max-width 必须保持 min(340px,100%)：写死 340px 会让 360 宽的安卓整页左右拖动。 */
.cr{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:3px;padding:7px 12px;min-width:0}
.cr .lb{font-family:var(--f-mono);font-size:11px;color:var(--gold);min-width:32px}
.cr .z{font-family:var(--f-disp);font-size:21px;font-weight:600;min-width:26px}
.cr .ex{font-size:12.5px;color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 起盘台 */
.ctrl{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px;padding:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:4px}
.fld{display:flex;flex-direction:column;gap:4px;flex:1;min-width:96px}
.fld label{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--gold)}
.fld select{font-family:var(--f-body);font-size:15px;padding:6px 8px;border:1px solid var(--line);
  border-radius:3px;background:var(--surface);color:var(--ink);width:100%}
.fld select:focus-visible{outline:2px solid var(--blue)}
.readout{font-size:14px;color:var(--ink2);margin:14px 0;padding:12px 14px;background:var(--blue-s);border-radius:3px}
.readout b{color:var(--ink)}
/* 搜索 */
.sbox{margin:12px 0 16px}
/* ⚠️ 原先只写了 #q（全文搜索），速查 #rq、象法 #xq、金锁玉匙 #jsq 三个框一直是浏览器默认的窄框——统一按 .sbox 选 */
.sbox input{width:100%;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;
  background:var(--paper);color:var(--ink);font-family:var(--f-body);box-sizing:border-box}
.sbox input:focus-visible{outline:2px solid var(--blue)}
.sr{all:unset;cursor:pointer;display:block;width:100%;padding:11px 13px;background:var(--paper);
  border:1px solid var(--line);border-radius:4px;margin-bottom:7px}
.sr:focus-visible{outline:2px solid var(--blue)}
.sr b{font-size:14px;display:block}
.sr span{font-size:12.5px;color:var(--ink3);display:block;margin-top:3px;line-height:1.6}
.sr em{font-style:normal;background:var(--gold-s);color:var(--gold);padding:0 2px;border-radius:2px}
/* 翻页 */
.pager{display:flex;gap:10px;margin:26px 0 10px}
.btn{all:unset;cursor:pointer;flex:1;text-align:center;padding:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:4px;font-size:14px;color:var(--ink2)}
.btn:disabled{opacity:.35;cursor:default}
.btn:focus-visible{outline:2px solid var(--blue)}
@media(min-width:700px){body{font-size:16.5px}.doc h1{font-size:25px}.doc h2{font-size:20px}}

/* ── 课内目录 ── */
.fab{position:fixed;right:14px;bottom:calc(var(--tabh) + 18px);z-index:45;display:none;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--ink2);font-size:15px;font-family:var(--f-disp);cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.fab.on{display:block}
.fab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tocmask{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.42);display:none}
/* 底栏：z-index 压在 tocmask(50) 之下，目录弹层要能盖住它 */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:46;
  display:grid;grid-template-columns:repeat(4,1fr);
  height:calc(var(--tabh) + var(--safe-b));padding-bottom:var(--safe-b);
  background:color-mix(in srgb,var(--ground) 94%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.tabbar button{
  border:0;background:none;cursor:pointer;color:var(--ink3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:inherit;transition:color .18s}
.tabbar button b{
  width:30px;height:30px;line-height:30px;border-radius:9px;
  font-family:var(--f-disp);font-size:19px;font-weight:500;
  transition:background .18s,color .18s}
.tabbar button span{font-size:11px;letter-spacing:.5px}
.tabbar button.on{color:var(--blue)}
.tabbar button.on b{background:var(--blue);color:var(--paper)}
.tabbar button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tocmask.on{display:block}
.tocbox{position:absolute;right:0;bottom:0;left:0;max-height:72vh;overflow:auto;
  background:var(--ground);border-top:1px solid var(--line);border-radius:10px 10px 0 0;
  padding:14px 16px calc(20px + var(--safe-b))}
.toch{font-family:var(--f-disp);font-size:15px;font-weight:600;margin-bottom:10px;color:var(--ink)}
.toci{all:unset;cursor:pointer;display:block;width:100%;padding:9px 10px;border-radius:4px;
  font-size:14.5px;color:var(--ink2);border-left:2px solid var(--line)}
.toci:hover,.toci:focus-visible{background:var(--surface);color:var(--ink);border-left-color:var(--gold)}
/* ── 速查 ── */
.refg{margin:22px 0 6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--gold)}
.refi{background:var(--paper);border:1px solid var(--line);border-radius:4px;margin-bottom:8px;overflow:hidden}
.refh{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:8px;width:100%;padding:11px 13px}
.refh:focus-visible{outline:2px solid var(--blue)}
.refh b{font-size:14.5px;font-weight:600;flex:1;min-width:0}
.refh span{font-size:11.5px;color:var(--ink3);white-space:nowrap;font-family:var(--f-mono);
  max-width:42%;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
.refb{display:none;padding:0 13px 12px}
.refi.open .refb{display:block}
.refi.open .refh b{color:var(--gold)}
.refb .tw{margin:6px 0 0}
.refj{all:unset;cursor:pointer;font-size:12.5px;color:var(--blue);margin-top:8px;display:inline-block}
.refj:focus-visible{outline:2px solid var(--blue)}
/* ── 吸顶盘：四课＋三传压成一条（六壬方盘 330px 见方，照搬八字四柱那样吸顶会吃掉半屏） ── */
.stickypan{position:sticky;top:49px;z-index:30;margin:0 -14px 16px;padding:7px 14px;
  background:var(--ground);border-bottom:1px solid var(--line);cursor:pointer;
  display:flex;align-items:center;gap:12px;overflow-x:auto;white-space:nowrap}
.stickypan em{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--gold);margin-right:5px}
.sp-ke{display:flex;align-items:center;gap:5px}
.spc{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;
  padding:1px 5px;border-radius:3px;background:var(--surface)}
.spc.day{background:var(--gold-s)}
.spc i{font-style:normal;font-size:9px;color:var(--gold);line-height:1.1}
.spc .up{font-family:var(--f-disp);font-size:15px;font-weight:600}
.spc s{text-decoration:none;font-size:10px;color:var(--ink3);line-height:1.1}
.sp-sc{display:flex;align-items:center;gap:3px}
.sp-sc .z{font-family:var(--f-disp);font-size:15px;font-weight:600}
.sp-sc b{color:var(--ink3);font-weight:400;font-size:11px}
.sp-more{margin-left:auto;font-size:11px;color:var(--blue);flex-shrink:0}
@media(max-width:420px){.stickypan{gap:8px}.spc{padding:1px 3px}}

/* ── 课例题库 ───────────────────────────────────────── */
/* ⚠️ 变量名核对过：这套皮肤没有 --bg / --topbar。底色是 --ground，
   顶栏高 49px（与 .stickypan 的 top 保持一致，那里也是写死的 49px）。 */
.qbar{position:sticky;top:49px;z-index:20;background:var(--ground);
  padding:10px 14px 8px;border-bottom:1px solid var(--line)}
.qbar .chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.qbar .chips::-webkit-scrollbar{display:none}
.qbar .chip{flex:0 0 auto;cursor:pointer;white-space:nowrap}
.qbar .chip.sel{background:var(--gold-s);color:var(--gold);border-color:var(--gold)}
.qgrp{border-bottom:1px solid var(--line)}
.qgh{display:flex;align-items:center;gap:8px;width:100%;padding:13px 14px;
  background:none;border:0;color:var(--ink);font-size:14.5px;font-weight:600;
  text-align:left;cursor:pointer;font-family:inherit}
.qgh .ar{color:var(--gold);transition:transform .18s;display:inline-block}
.qgrp.open .qgh .ar{transform:rotate(90deg)}
.qgh .nm{flex:1}
.qgh .ct{font-size:11.5px;color:var(--ink3);font-family:var(--f-mono)}
.qgb{display:none}
.qgrp.open .qgb{display:block}
.qrow{display:flex;align-items:center;gap:8px;padding:11px 14px 11px 30px;
  border-top:1px solid var(--line);cursor:pointer;font-size:13.5px}
.qrow:active{background:var(--surface)}
.qrow .qn{flex:0 0 auto;min-width:2.2em;text-align:right;font-size:11.5px;
  color:var(--ink3);font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.qrow .t{flex:1;color:var(--ink2);line-height:1.5}
.qrow .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.qrow .dot.new{background:var(--line)}
.qrow .dot.ok{background:var(--gold)}

/* 学习进度：25 个课号 chip 折叠收纳（进度条与百分比常显） */
.proghd{display:flex;align-items:center;gap:7px;width:100%;padding:0;background:none;
  border:0;color:var(--ink);font-family:inherit;font-size:inherit;cursor:pointer;text-align:left}
.proghd b{flex:1;font-size:15px}
.proghd .ar{color:var(--gold);transition:transform .18s;display:inline-block;font-size:15px}
#progCard.open .proghd .ar{transform:rotate(90deg)}
#progChips{display:none}
#progCard.open #progChips{display:flex}

/* ── 格局详解列表 ───────────────────────────────────── */
.gerow{display:flex;align-items:baseline;gap:9px;padding:13px 14px;
  border-bottom:1px solid var(--line);cursor:pointer}
.gerow:active{background:var(--surface)}
.gerow .gn{flex:0 0 auto;min-width:1.8em;text-align:right;font-size:11.5px;
  color:var(--gold);font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.gerow .gt{flex:0 0 auto;font-size:14.5px;font-weight:600;color:var(--ink)}
.gerow .gl{flex:1;font-size:12px;color:var(--ink3);line-height:1.5}

/* ── 起课练习 ───────────────────────────────────────── */
.drillhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.drillhd span{font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.drillhd em{font-style:normal;font-size:11.5px;color:var(--ink3);font-family:var(--f-mono)}
.dke{margin:10px 0 4px}
.dke em{font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--gold)}
.dke table{width:100%;border-collapse:collapse;margin-top:5px;table-layout:fixed}
.dke td{border:1px solid var(--line);text-align:center;padding:6px 2px;background:var(--paper)}
.dke .n{display:block;font-size:10px;color:var(--ink3);letter-spacing:.06em}
.dke b{display:block;font-size:17px;color:var(--ink);line-height:1.5}
.dke i{display:block;font-style:normal;font-size:12px;color:var(--ink3)}
.dq{margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.dsel{display:flex;gap:8px;margin-top:8px}
.dcol{flex:1;text-align:center}
.dcol span{display:block;font-size:11px;color:var(--ink3);margin-bottom:3px}
.dcol select{width:100%;padding:9px 4px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:16px;font-family:inherit;text-align:center}
.dkes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dkes .chip{cursor:pointer;font-size:13px;padding:6px 11px}
.dkes .chip.sel{background:var(--gold-s);color:var(--gold);border-color:var(--gold)}
.dfb{margin-top:14px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--paper)}
.dfb.good{border-color:var(--green);background:rgba(47,91,74,.06)}
.dfb.bad{border-color:var(--red);background:var(--red-s)}
.dfb>b{font-size:15px}
.dfb.good>b{color:var(--green)} .dfb.bad>b{color:var(--red)}
.dfb table{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px;table-layout:fixed}
.dfb td{border:1px solid var(--line);text-align:center;padding:5px 2px}
.dfb tr:first-child td{font-size:11px;color:var(--ink3);background:var(--surface)}
.dfb td:first-child{font-size:11px;color:var(--ink3)}
.dfb td.y{color:var(--green);font-weight:600}
.dfb td.n{color:var(--red);font-weight:600;text-decoration:line-through}
.dwhy p{margin:6px 0;font-size:12.5px;line-height:1.8;color:var(--ink2)}

/* ⚠️ all:unset 会把第 31 行的 *{box-sizing:border-box} 一并重置回 content-box。
   对 width:auto 的 block（如 .mi）无害——浏览器会自己收缩，不会溢出；
   但对**显式写了 width:100%** 的（.sr / .toci / .refh，以及 flex:1 的 .btn）
   就会把 padding+border 加到 100% 之外，撑出横向滚动。
   这条必须放在**所有 all:unset 规则之后**才压得住（同特异性，后者胜）。
   ⭐ 以后再写 all:unset，要么补 box-sizing，要么把选择器加进下面这一行。 */
.back, .act, .mi, .li, .sr, .btn, .toci, .refh, .refj { box-sizing: border-box }

/* 金锁玉匙：两排 12 字点选。⚠️ 332px 内容宽（360px 安卓）要放下 12 格，格宽只能靠 1fr，别写死像素 */
.jsrow{display:flex;align-items:center;gap:6px;margin:6px 0}
.jsl{flex:0 0 2.2em;font-size:12px;color:var(--ink3);letter-spacing:.06em}
.jsz{flex:1;min-width:0;display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.jz{all:unset;cursor:pointer;text-align:center;font-size:14px;line-height:30px;border-radius:4px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink2);box-sizing:border-box}
.jz.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.jz:focus-visible{outline:2px solid var(--gold)}
.jshit{margin:12px 0 16px}
.jshk{font-family:var(--f-disp);font-size:18px;color:var(--gold);margin:0 0 8px}
.jshk .muted{font-size:12px;margin-left:6px;font-family:inherit}
.jsalt{margin:12px 0 4px}
.jsk{margin:6px 0;font-size:13px;color:var(--ink2)}
.jspoem{margin:10px 0;font-family:var(--f-disp);font-size:16px;line-height:1.9;color:var(--ink)}
.jsnote{margin:6px 0;font-size:12.5px;color:var(--ink3);line-height:1.7}
.jsq{margin:8px 0 2px;font-size:13px}
.jsq summary{cursor:pointer;color:var(--blue);font-size:12.5px}
.jsq blockquote{margin:6px 0 0}
.dlink{margin:10px 0 0}
.lnk{all:unset;cursor:pointer;color:var(--blue);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.lnk:focus-visible{outline:2px solid var(--gold)}