/* ============================================================
   初中数学提分实操教程 · 网页版样式
   左菜单 / 右内容 · 单章独立切换 · 响应式 · 动效
   ============================================================ */
:root{
  --navy:#1f3a5f; --blue:#2e6da4; --teal:#2a9d8f; --orange:#e76f51;
  --purple:#7b6cf6; --gold:#e9b949; --pink:#f06595;
  --ink:#20303f; --muted:#5c6b7a; --line:#e6edf3;
  --bg:#eef3f8; --card:#ffffff; --soft:#f2f7fb;
  --code-bg:#f8f9fa; --code-ink:#1e3a5f; --code-border:#d9e3f0;
  --shadow:0 10px 30px rgba(31,58,95,.08), 0 2px 8px rgba(31,58,95,.06);
  --radius:16px; --sb-w:300px;
  --grad:linear-gradient(135deg,#2e6da4,#2a9d8f);
  --grad2:linear-gradient(135deg,#7b6cf6,#2e6da4);
  --sb-grad:linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%);
}
[data-theme="dark"]{
  --navy:#cfe0f2; --blue:#7db4e6; --teal:#5fd0c2; --orange:#ff9576;
  --purple:#a99bff; --gold:#f0c96a; --pink:#ff8fb1;
  --ink:#e7eef6; --muted:#9fb2c4; --line:#243244;
  --bg:#0d1826; --card:#132234; --soft:#182a40;
  --code-bg:#101f33; --code-ink:#d6e4f5; --code-border:#26374d;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --sb-grad:linear-gradient(180deg,#101f33 0%,#0d1826 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","微软雅黑",sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
/* 顶部进度条 */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:var(--grad);transition:width .15s ease;box-shadow:0 0 8px rgba(42,157,143,.6)}

/* ============ 顶栏（移动端） ============ */
#topbar{position:fixed;top:0;left:0;right:0;height:56px;z-index:45;
  display:none;align-items:center;gap:12px;padding:0 14px;
  background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
#topbar .tb-title{font-weight:700;color:var(--navy);flex:1;text-align:center;font-size:16px}
#topbar button{border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--ink);
  width:40px;height:40px;border-radius:10px}
#topbar button:active{background:var(--soft)}

/* ============ 侧边栏 ============ */
#sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sb-w);z-index:50;
  background:var(--sb-grad);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:20px 14px;overflow-y:auto;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
#sidebar::-webkit-scrollbar{width:7px}
#sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:7px}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 14px}
.brand-logo{width:44px;height:44px;border-radius:12px;background:var(--grad);
  color:#fff;font-size:24px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(46,109,164,.35)}
.brand-txt b{display:block;font-size:16px;color:var(--navy)}
.brand-txt small{color:var(--muted);font-size:12px}
.sb-note{font-size:12.5px;color:var(--muted);background:var(--soft);
  border-radius:10px;padding:8px 12px;margin:0 4px 14px;border-left:3px solid var(--teal)}
.sib-nav{display:flex;gap:6px;margin:0 4px 14px;flex-wrap:wrap}
.sib-nav a{flex:1;text-align:center;min-width:60px;font-size:12.5px;font-weight:600;
  padding:7px 8px;border-radius:10px;text-decoration:none;color:var(--muted);
  background:var(--soft);border:1px solid var(--line);transition:.18s}
.sib-nav a:hover{color:var(--blue);border-color:var(--teal)}
.sib-nav a.cur{background:var(--grad);color:#fff;border-color:transparent}
#sidebar nav{flex:1}
#navList{list-style:none;margin:0;padding:0}
#navList li{margin:2px 0}
/* 分组小标题：把 16 项按主线 5 阶段分区，减少"一堆字"的拥挤感 */
.nav-sec{margin:14px 0 4px;padding:0 12px;font-size:11px;font-weight:800;
  letter-spacing:1px;color:var(--muted);text-transform:none}
.nav-sec:first-child{margin-top:2px}
/* 菜单项：单行短标题 + emoji + 每章配色，清爽不拥挤 */
.nav-link{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:10px;
  text-decoration:none;color:var(--ink);transition:.16s;position:relative}
.nav-link .nav-ico{width:26px;height:26px;flex:none;border-radius:8px;font-size:15px;
  display:grid;place-items:center;transition:.16s;
  background:color-mix(in srgb,var(--nav,var(--teal)) 15%,transparent)}
.nav-link:hover{background:var(--card);box-shadow:0 3px 10px rgba(31,58,95,.07)}
.nav-link:hover .nav-ico{background:color-mix(in srgb,var(--nav,var(--teal)) 28%,transparent);transform:scale(1.08)}
.nav-txt{flex:1;font-size:13.5px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-link.active{background:var(--nav,var(--blue));color:#fff;
  box-shadow:0 5px 14px color-mix(in srgb,var(--nav,var(--blue)) 40%,transparent)}
.nav-link.active .nav-ico{background:rgba(255,255,255,.25)}
.nav-link.active .nav-txt{font-weight:700}
[data-theme="dark"] .nav-link.active{color:#fff}
.sb-foot{font-size:11px;color:var(--muted);text-align:center;padding-top:14px;border-top:1px dashed var(--line)}

#overlay{position:fixed;inset:0;background:rgba(15,32,54,.45);z-index:46;display:none;
  backdrop-filter:blur(2px)}

/* ============ 主内容 ============ */
#main{margin-left:var(--sb-w);min-height:100vh;padding:38px clamp(16px,5vw,64px) 90px}
#content{max-width:860px;margin:0 auto}
.chapter{display:none;animation:fadeUp .45s cubic-bezier(.2,.7,.3,1)}
.chapter.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 章标题头 */
.ch-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px;
  padding-bottom:22px;border-bottom:2px solid var(--line);position:relative}
.ch-head::after{content:"";position:absolute;left:0;bottom:-2px;width:90px;height:2px;
  background:var(--grad)}
.ch-badge{width:64px;height:64px;flex:none;border-radius:18px;background:var(--grad2);
  color:#fff;font-size:32px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(123,108,246,.32)}
.ch-kicker{font-size:12px;letter-spacing:2px;color:var(--teal);font-weight:700;text-transform:uppercase}
.ch-title{margin:4px 0 6px;font-size:clamp(21px,3.4vw,29px);color:var(--navy);line-height:1.3}
.ch-hook{margin:0;color:var(--muted);font-size:14.5px}

/* ============ 正文排版 ============ */
.ch-body{font-size:16px}
.ch-body h3{margin:30px 0 12px;font-size:20px;color:var(--blue);
  padding-left:14px;border-left:5px solid var(--teal);line-height:1.4}
.ch-body h4{margin:22px 0 10px;font-size:17px;color:var(--navy);
  display:flex;align-items:center;gap:8px}
.ch-body h4::before{content:"▶";color:var(--orange);font-size:12px}
.ch-body p{margin:12px 0}
.ch-body strong{color:var(--navy);font-weight:700}
[data-theme="dark"] .ch-body strong{color:#fff}
.ch-body ul,.ch-body ol{margin:12px 0;padding-left:24px}
.ch-body li{margin:7px 0}
.ch-body ul li::marker{color:var(--teal)}
.ch-body ol li::marker{color:var(--blue);font-weight:700}
.ch-body a{color:var(--blue)}
.ch-body hr{border:0;border-top:1px dashed var(--line);margin:28px 0}

/* 行内代码 */
.ch-body code{background:var(--soft);color:var(--orange);padding:2px 6px;border-radius:6px;
  font-family:"SF Mono",Consolas,"Cascadia Code",monospace;font-size:.9em}
[data-theme="dark"] .ch-body code{color:var(--gold)}

/* 根号横线：.rad 包裹 √ 号后面的内容，用上划线标出根号覆盖范围 */
/* 根号横线：√ 后紧跟 .rad 包裹被开方数，上划线标出根号覆盖范围（手写标准写法）*/
.ch-body .rad{border-top:1.6px solid currentColor;padding:1px 2px 0 1px;margin-left:-1px}
/* 代码块/ASCII 图内：去掉横向 padding，避免破坏等宽对齐 */
.ch-body pre .rad{padding:1px 0 0 0;margin:0;border-top-width:1.4px}

/* 代码块 / 流程图 / ASCII 思维导图 —— 教程的灵魂
   彩色渐变卡片：青蓝渐变底 + 左侧粗彩条 + 顶部渐变标签，不再是白块 */
.ch-body pre{
  background:linear-gradient(135deg,#eef6fb 0%,#e9f3f0 55%,#f0edfb 100%);
  border-radius:14px;padding:40px 20px 18px;overflow:auto;
  box-shadow:0 8px 22px rgba(46,109,164,.13);position:relative;margin:20px 0;
  border:1px solid var(--code-border);border-left:6px solid var(--teal)}
[data-theme="dark"] .ch-body pre{
  background:linear-gradient(135deg,#122438 0%,#0f2a26 55%,#181633 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.35);border-left-color:var(--teal)}
.ch-body pre::before{content:"✏️ 拆解 · 流程图";position:absolute;top:0;left:0;right:0;
  padding:7px 16px;color:#fff;font-size:11.5px;letter-spacing:1px;font-weight:800;
  font-family:sans-serif;background:linear-gradient(90deg,var(--teal),var(--blue) 60%,var(--purple));
  border-radius:14px 14px 0 0}
.ch-body pre code{background:transparent;color:var(--code-ink);padding:0;font-size:17px;
  line-height:2.05;display:block;white-space:pre;letter-spacing:.3px;font-weight:400;
  font-family:"Cascadia Code","JetBrains Mono","SF Mono",Consolas,"Microsoft YaHei",monospace}
.ch-body pre code::selection{background:rgba(42,157,143,.25)}
[data-theme="dark"] .ch-body pre code{font-weight:400}
/* pre 里的 Unicode 分数字符放大：⅔ ½ ¾ 这类先天小字形，单独再放大一档并抬高基线 */
.ch-body pre code .bigfrac,.ch-body code .bigfrac{font-size:1.35em;font-weight:800;
  vertical-align:-.06em;letter-spacing:0}
@media(max-width:820px){.ch-body pre code{font-size:15px;line-height:1.95}}
/* 变体：题目/清单类 pre 用蓝色主调（.pre-q），答案/结论类用绿色（.pre-ans） */
.ch-body pre.pre-q{border-left-color:var(--blue);
  background:linear-gradient(135deg,#eaf3fb 0%,#e3eefa 100%)}
.ch-body pre.pre-q::before{content:"📋 题目 · 清单";
  background:linear-gradient(90deg,var(--blue),var(--purple))}
[data-theme="dark"] .ch-body pre.pre-q{background:linear-gradient(135deg,#0f2338 0%,#131a3a 100%)}
.ch-body pre.pre-ans{border-left-color:#0f9d58;
  background:linear-gradient(135deg,#e9f7ef 0%,#e3f4ec 100%)}
.ch-body pre.pre-ans::before{content:"✅ 解答 · 结论";
  background:linear-gradient(90deg,#0f9d58,var(--teal))}
[data-theme="dark"] .ch-body pre.pre-ans{background:linear-gradient(135deg,#0d2b1e 0%,#0a2420 100%)}

/* 章节导语条 tip-bar（试题/教程页顶部提示）—— 金色渐变，醒目不刺眼 */
.ch-body .tip-bar,.tip-bar{margin:0 0 20px;padding:13px 18px;border-radius:14px;
  background:linear-gradient(100deg,#fff9db,#ffeccc);border-left:6px solid var(--gold);
  color:#7a5600;font-size:14.5px;line-height:1.75;box-shadow:0 4px 14px rgba(233,185,73,.18)}
.ch-body .tip-bar strong,.tip-bar strong{color:#a35a00}
[data-theme="dark"] .ch-body .tip-bar,[data-theme="dark"] .tip-bar{
  background:linear-gradient(100deg,#33290c,#2e2109);color:#f0c96a}
[data-theme="dark"] .tip-bar strong{color:#ffd98a}

/* 引用块 → 彩色 callout 卡片 */
.callout{margin:18px 0;padding:14px 16px 14px 18px;border-radius:12px;
  background:var(--soft);border-left:5px solid var(--blue);color:var(--ink);
  box-shadow:0 2px 10px rgba(31,58,95,.05)}
.callout p{margin:6px 0}
.callout p:first-child{margin-top:0}.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--navy)}
.callout-key{border-left-color:var(--orange);background:linear-gradient(90deg,rgba(231,111,81,.1),transparent)}
.callout-key::before{content:"🔑 突破口";display:block;font-size:12px;font-weight:800;
  color:var(--orange);margin-bottom:4px;letter-spacing:1px}
.callout-tip{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(233,185,73,.13),transparent)}
.callout-tip::before{content:"💡 口诀 / 记忆点";display:block;font-size:12px;font-weight:800;
  color:#c69214;margin-bottom:4px;letter-spacing:1px}
.callout-example{border-left-color:var(--teal);background:linear-gradient(90deg,rgba(42,157,143,.1),transparent)}
.callout-example::before{content:"✎ 例 / 母题";display:block;font-size:12px;font-weight:800;
  color:var(--teal);margin-bottom:4px;letter-spacing:1px}

/* 表格 → 卡片化 */
.table-wrap{overflow-x:auto;margin:18px 0;border-radius:12px;box-shadow:var(--shadow)}
.ch-body table{border-collapse:collapse;width:100%;background:var(--card);font-size:14.5px;min-width:440px}
.ch-body th{background:var(--grad);color:#fff;padding:11px 14px;text-align:left;font-weight:600;white-space:nowrap}
.ch-body td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.ch-body tbody tr:nth-child(even){background:var(--soft)}
.ch-body tbody tr:hover{background:rgba(42,157,143,.08)}

/* 章内翻页 */
.ch-foot{display:flex;justify-content:space-between;gap:12px;margin-top:40px;
  padding-top:22px;border-top:2px solid var(--line)}
.pg-btn{flex:1;display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:14px;
  background:var(--card);box-shadow:var(--shadow);cursor:pointer;text-decoration:none;
  color:var(--ink);border:1px solid var(--line);transition:.2s}
.pg-btn:hover{transform:translateY(-2px);border-color:var(--teal)}
.pg-btn small{font-size:11px;color:var(--muted)}
.pg-btn b{font-size:14px;color:var(--navy)}
.pg-btn.next{text-align:right}
.pg-btn.disabled{opacity:.35;pointer-events:none}

/* 回到顶部 */
#toTop{position:fixed;right:22px;bottom:24px;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--grad);color:#fff;font-size:20px;cursor:pointer;z-index:40;
  box-shadow:0 8px 20px rgba(46,109,164,.4);opacity:0;transform:scale(.6);transition:.25s}
#toTop.show{opacity:1;transform:scale(1)}

/* ============ 响应式 ============ */
@media (max-width:1024px){:root{--sb-w:260px}}
@media (max-width:820px){
  #topbar{display:flex}
  #sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.25);width:min(84vw,320px)}
  body.nav-open #sidebar{transform:none}
  body.nav-open #overlay{display:block}
  #main{margin-left:0;padding:74px 16px 80px}
  .ch-badge{width:52px;height:52px;font-size:26px;border-radius:14px}
  .ch-foot{flex-direction:column}
}
@media (max-width:420px){
  body{font-size:15px}
  .ch-head{gap:12px}
  .ch-body h3{font-size:18px}
}
/* ============================================================
   SVG 可视化图（思维导图 / 流程图 / 几何图）
   ============================================================ */
:root{
  --vz-line:#9db4c9; --vz-axis:#5c6b7a; --vz-fill:rgba(46,109,164,.14);
  --vz-box:#ffffff; --vz-boxln:#cddbe8;
}
[data-theme="dark"]{
  --vz-line:#54708c; --vz-axis:#8ea1b4; --vz-fill:rgba(125,180,230,.18);
  --vz-box:#182a40; --vz-boxln:#2a3d54;
}
figure.viz{
  margin:22px 0; padding:16px 14px 10px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
figure.viz figcaption{
  font-weight:700; color:var(--blue); font-size:14px; margin-bottom:8px;
  padding-left:12px; border-left:4px solid var(--teal);
}
figure.viz svg.svgd{width:100%; height:auto; display:block}
/* 几何小图：限宽居中，避免撑满整行显得过大 */
/* 年级徽章：标注该题对应人教版年级（与技巧页统一：青/蓝/紫/橙） */
.gr{display:inline-block; font-size:11px; font-weight:800; padding:2px 9px; border-radius:8px;
  margin-right:8px; vertical-align:middle; letter-spacing:.5px; color:#fff; white-space:nowrap}
.gr-g7{background:#2a9d8f}    /* 七年级 · 青 */
.gr-g8{background:#2e6da4}    /* 八年级 · 蓝 */
.gr-g9{background:#7b6cf6}    /* 九年级 · 紫 */
.gr-all{background:#e76f51}   /* 跨年级 / 综合压轴 · 橙 */
[data-theme="dark"] .gr{color:#0d1826}
details.sol>summary .gr{flex:none}
/* 通用文字 */
.vz-t{fill:#fff; font-size:15px; font-weight:700; text-anchor:middle; dominant-baseline:middle}
.vz-tsub{fill:rgba(255,255,255,.85); font-size:11px; text-anchor:middle}
.vz-num{fill:#fff; font-size:20px; font-weight:800; text-anchor:middle}
.vz-lbl{fill:#fff; font-size:15px; font-weight:700; text-anchor:middle}
.vz-cap{fill:var(--muted); font-size:12px; text-anchor:middle}
.vz-cap2{fill:var(--ink); font-size:12px; font-weight:600}
.vz-side{fill:var(--teal); font-size:12px; font-weight:600}
.vz-side2{fill:var(--muted); font-size:13px; font-weight:600}
.vz-hot{fill:var(--orange); font-size:12px; font-weight:700}
.vz-cool{fill:var(--teal); font-size:12px; font-weight:700}
/* 五步法节点入场动画 */
figure.viz .node{opacity:0; transform:translateY(10px); transform-box:fill-box; transform-origin:center;
  animation:vzpop .5s ease forwards; animation-delay:var(--d)}
@keyframes vzpop{to{opacity:1; transform:none}}
/* 决策流程框 */
.vz-start{fill:var(--teal)} .vz-end{fill:var(--orange)}
.vz-box{fill:var(--vz-box); stroke:var(--vz-boxln); stroke-width:1.5}
.vz-box2{fill:var(--vz-fill); stroke:var(--blue); stroke-width:1.5}
.vz-flow .vz-box text,.vz-flow .vz-box2 text{fill:var(--ink)}
.vz-flow rect.vz-box+text,.vz-flow rect.vz-box2+text{fill:var(--ink)}
.vz-flow text.vz-t{fill:var(--ink)}
.vz-flow .vz-start~text,.vz-flow .vz-end~text{fill:#fff}
/* 让 start/end 上的文字为白，其余为墨色：单独覆盖 */
.vz-flow text{fill:var(--ink)}
/* 几何点 */
.vz-pt{fill:var(--blue)} .vz-pt2{fill:var(--muted)} .vz-ptp{fill:var(--orange)}
.vz-fill{fill:var(--vz-fill); stroke:var(--blue); stroke-width:1.5}
/* 知识树 / 母题 */
.vz-root{fill:var(--blue)}
.vz-leaf rect{fill:var(--vz-box); stroke:var(--vz-boxln); stroke-width:1.5}
.vz-leaf rect.warn{stroke:var(--orange)}
.vz-lt{fill:var(--blue); font-size:13px; font-weight:700}
.vz-lt2{fill:var(--ink); font-size:13.5px; font-weight:700; dominant-baseline:middle}
.vz-lsub{fill:var(--muted); font-size:11.5px}
.vz-chip rect{fill:var(--soft); stroke:var(--vz-boxln); stroke-width:1.2}
.vz-ct{fill:var(--ink); font-size:12px; font-weight:600; text-anchor:middle}

/* ============================================================
   几何图形 SVG 元素（三角形/四边形/圆/坐标系）
   规范：主体边框用实线(g-line/g-fill)，虚线仅用于辅助线(g-aux)
   ============================================================ */
figure.viz svg .g-fill{fill:var(--vz-fill);stroke:var(--blue);stroke-width:2}
figure.viz svg .g-fill2{fill:rgba(231,111,81,.14);stroke:var(--orange);stroke-width:2}
figure.viz svg .g-line{fill:none;stroke:var(--blue);stroke-width:2}
figure.viz svg .g-line2{fill:none;stroke:var(--orange);stroke-width:2.5}
figure.viz svg .g-aux{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-dasharray:6 5}
figure.viz svg .g-aux2{fill:none;stroke:var(--purple);stroke-width:1.8;stroke-dasharray:2 4}
figure.viz svg .g-grid{stroke:var(--vz-boxln);stroke-width:1}
figure.viz svg .g-axis{stroke:var(--vz-axis);stroke-width:1.6}
figure.viz svg .g-pt{fill:var(--blue)}
figure.viz svg .g-pt2{fill:var(--orange)}
figure.viz svg .g-pt3{fill:var(--teal)}
figure.viz svg .g-lbl{fill:var(--ink);font-size:14px;font-weight:700;font-family:"Times New Roman",serif;font-style:italic}
figure.viz svg .g-lbl2{fill:var(--muted);font-size:12.5px;font-weight:600}
figure.viz svg .g-num{fill:var(--teal);font-size:13px;font-weight:700}
figure.viz svg .g-num2{fill:var(--orange);font-size:13px;font-weight:700}
figure.viz svg .g-mk{fill:none;stroke:var(--orange);stroke-width:2}
figure.viz svg .g-mk2{fill:none;stroke:var(--teal);stroke-width:2}
figure.viz svg .g-ang{fill:none;stroke:var(--purple);stroke-width:1.8}
figure.viz svg .g-angf{fill:rgba(123,108,246,.16);stroke:var(--purple);stroke-width:1.5}
figure.viz svg .g-cap{fill:var(--muted);font-size:12.5px;text-anchor:middle}
figure.viz svg .g-eq{fill:var(--ink);font-size:13.5px;font-family:"Times New Roman",serif}

/* 打印 */
@media print{
  #sidebar,#topbar,#toTop,#progress,#overlay,.ch-foot{display:none!important}
  #main{margin:0}
  .chapter{display:block!important;page-break-after:always}
  figure.viz .node{opacity:1!important; transform:none!important; animation:none!important}
}

/* ============================================================
   附录 · 详解折叠卡（默认收起，逼学生先自己做）
   ============================================================ */
details.sol{margin:16px 0;border:1px solid var(--line);border-left:5px solid var(--blue);
  border-radius:14px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
details.sol>summary{list-style:none;cursor:pointer;padding:15px 20px;
  font-size:16px;font-weight:700;color:var(--navy);
  background:linear-gradient(100deg,#eaf3fb,#e6eefb);display:flex;align-items:center;gap:10px;
  transition:background .18s}
[data-theme="dark"] details.sol>summary{background:linear-gradient(100deg,#122438,#151a38)}
details.sol[open]>summary{background:linear-gradient(100deg,#e3eefa,#ddeafc);
  border-bottom:1px solid var(--line)}
details.sol>summary::-webkit-details-marker{display:none}
details.sol>summary::before{content:"▶";color:var(--blue);font-size:13px;
  transition:transform .2s;flex:none}
details.sol[open]>summary::before{transform:rotate(90deg)}
details.sol>summary::after{content:"点击看详解";margin-left:auto;flex:none;
  font-size:12px;font-weight:800;color:#fff;background:var(--blue);
  padding:3px 12px;border-radius:20px}
details.sol[open]>summary::after{content:"收起 ▲";background:var(--teal)}
details.sol>summary:hover{filter:brightness(.98)}
details.sol[open]{border-left-color:var(--teal)}
details.sol .sol-body{padding:6px 20px 18px}
details.sol .sol-body h3{display:none}

/* ============================================================
   视觉组件库 v2 —— 高亮 / 彩色卡片 / 四色知识框 / 主线路径 /
   知识树 / 即时自测 / 双栏对比 / 大白话徽章
   （对齐英语教程的富视觉体系，配数学青-蓝-紫-橙-金配色）
   ============================================================ */

/* ① 黄色重点高亮（本教程的灵魂标记）—— 正文里最该记的话都刷上它 */
/* 提高选择器权重，保证在 card-body / callout 里高亮色也不被覆盖 */
.ch-body .hl,.ch-body .card-body strong.hl,.ch-body .box-body strong.hl{
  color:#8a5a00; font-weight:800;
  background:linear-gradient(transparent 58%, #ffe066 58%);
  padding:0 2px; border-radius:2px;
}
[data-theme="dark"] .ch-body .hl,
[data-theme="dark"] .ch-body .card-body strong.hl,
[data-theme="dark"] .ch-body .box-body strong.hl{
  color:#ffe89e;
  background:linear-gradient(transparent 58%, rgba(233,185,73,.42) 58%);
}
/* 次级高亮：青色（用于"结论/口诀"以外的次重点） */
.ch-body .hl2{
  color:#0b6b60; font-weight:800;
  background:linear-gradient(transparent 58%, #a9ecd9 58%);
  padding:0 2px; border-radius:2px;
}
[data-theme="dark"] .ch-body .hl2{
  color:#7fe9d4; background:linear-gradient(transparent 58%, rgba(42,157,143,.4) 58%);
}
/* 箭头连接符：把"由此推出"可视化 */
.ch-body .arw{color:var(--orange); font-weight:900; padding:0 3px}

/* 黄色波浪线：比实心高亮更轻，像手写划重点（重要处点睛用） */
.ch-body .wl{font-weight:700; color:inherit;
  text-decoration:underline wavy #f5b301; text-decoration-thickness:2px;
  text-underline-offset:3px; text-decoration-skip-ink:none}
[data-theme="dark"] .ch-body .wl{text-decoration-color:#ffd43b}

/* ============================================================
   母题派生卡 vary —— 把"一道母题变N道子题"的 ASCII 块
   换成彩色卡片：顶部主干题 + 每个招式一条彩色分支
   ============================================================ */
.ch-body .vary{margin:20px 0; display:grid; gap:0}
/* 主干题头 */
.ch-body .vary-root{display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,#2e6da4,#7b6cf6); color:#fff;
  border-radius:14px 14px 0 0; padding:14px 18px; box-shadow:0 6px 16px rgba(46,109,164,.2)}
.ch-body .vary-root .vr-tag{flex:0 0 auto; font-size:12px; font-weight:800;
  background:rgba(255,255,255,.22); padding:3px 11px; border-radius:20px; letter-spacing:1px}
.ch-body .vary-root .vr-body{font-size:16px; font-weight:700}
.ch-body .vary-root .vr-body code{background:rgba(255,255,255,.2); color:#fff}
/* 分支容器 */
.ch-body .vary-branches{display:grid; gap:10px; padding:14px;
  background:var(--soft); border-radius:0 0 14px 14px; border:1px solid var(--line); border-top:none}
/* 单条分支 */
.ch-body .vary-item{display:flex; align-items:flex-start; gap:12px; background:var(--card);
  border-radius:12px; padding:12px 15px; box-shadow:0 3px 10px rgba(31,58,95,.06);
  border-left:6px solid var(--vc,var(--blue))}
.ch-body .vary-badge{flex:0 0 auto; font-size:12.5px; font-weight:800; color:#fff;
  background:var(--vc,var(--blue)); padding:3px 12px; border-radius:8px;
  white-space:nowrap; margin-top:1px}
.ch-body .vary-tx{flex:1; min-width:0; line-height:1.75; font-size:15.5px}
.ch-body .vary-tx .vt-q{font-weight:700; color:var(--navy); display:block; margin-bottom:2px}
.ch-body .vary-tx .vt-note{font-size:14px; color:var(--muted)}
[data-theme="dark"] .ch-body .vary-tx .vt-q{color:#cfe0f2}
/* 五个招式配色 */
.ch-body .vary-item.v1{--vc:#2a9d8f}.ch-body .vary-item.v2{--vc:#2e6da4}
.ch-body .vary-item.v3{--vc:#7b6cf6}.ch-body .vary-item.v4{--vc:#e76f51}
.ch-body .vary-item.v5{--vc:#e9b949}

/* ② 彩色标签卡片 —— 图标 + 徽章 + 正文，一眼分清"这是什么信息" */
.ch-body .card{
  display:flex; align-items:flex-start; gap:12px;
  border-radius:14px; padding:14px 16px; margin:16px 0;
  position:relative; box-shadow:0 4px 14px rgba(31,58,95,.07); line-height:1.8;
}
.ch-body .card-icon{font-size:22px; flex:0 0 auto; margin-top:1px}
.ch-body .card-tag{
  flex:0 0 auto; font-size:12px; font-weight:800; padding:3px 11px;
  border-radius:20px; align-self:flex-start; white-space:nowrap; color:#fff;
}
.ch-body .card-body{flex:1; min-width:0}
.ch-body .card-body strong{color:inherit}
/* 💡 口诀 / 记忆点 —— 金 */
.card-tip{background:linear-gradient(100deg,#fff9db,#fff3bf); border-left:6px solid #e9b949}
.card-tip .card-tag{background:#d9a400}
.card-tip .card-body{color:#7a5600}
/* 🤔 为什么 —— 紫 */
.card-why{background:linear-gradient(100deg,#f1efff,#e9e4ff); border-left:6px solid #7b6cf6}
.card-why .card-tag{background:#7b6cf6}
.card-why .card-body{color:#4b3fb0}
/* ⚠️ 易错陷阱 —— 橙 */
.card-trap{background:linear-gradient(100deg,#fff1e9,#ffe3d3); border-left:6px solid #e76f51}
.card-trap .card-tag{background:#e76f51}
.card-trap .card-body{color:#a13c22}
/* 🔑 突破口 —— 蓝 */
.card-key{background:linear-gradient(100deg,#e7f2fb,#d7e9f7); border-left:6px solid #2e6da4}
.card-key .card-tag{background:#2e6da4}
.card-key .card-body{color:#1c4e78}
/* ✎ 例 / 母题 —— 青 */
.card-eg{background:linear-gradient(100deg,#e6f7f3,#d3f2ea); border-left:6px solid #2a9d8f}
.card-eg .card-tag{background:#2a9d8f}
.card-eg .card-body{color:#146055}
[data-theme="dark"] .card-tip{background:linear-gradient(100deg,#3a2f10,#2e2609)}
[data-theme="dark"] .card-tip .card-body{color:#ffe9a8}
[data-theme="dark"] .card-why{background:linear-gradient(100deg,#241f44,#1d1836)}
[data-theme="dark"] .card-why .card-body{color:#cfc6ff}
[data-theme="dark"] .card-trap{background:linear-gradient(100deg,#3a2413,#2e1c0e)}
[data-theme="dark"] .card-trap .card-body{color:#ffcbb2}
[data-theme="dark"] .card-key{background:linear-gradient(100deg,#122a3f,#0e2233)}
[data-theme="dark"] .card-key .card-body{color:#b8dcf7}
[data-theme="dark"] .card-eg{background:linear-gradient(100deg,#0e2e28,#0a241f)}
[data-theme="dark"] .card-eg .card-body{color:#a6ecdd}

/* ③ 四色知识框 —— 带小标题，用于"为什么/关键/步骤/陷阱" */
.ch-body .box{border-radius:14px; padding:13px 16px 13px 18px; margin:16px 0;
  line-height:1.8; border-left:6px solid var(--bx); background:var(--bxbg)}
.ch-body .box-h{font-size:13.5px; font-weight:800; color:var(--bx);
  margin-bottom:5px; display:flex; align-items:center; gap:6px; letter-spacing:.5px}
.ch-body .box-body{font-size:15px; color:var(--ink)}
.ch-body .box-body>*:first-child{margin-top:0}
.ch-body .box-body>*:last-child{margin-bottom:0}
.box-why{--bx:#7b6cf6; --bxbg:linear-gradient(100deg,#f1efff,#e9e4ff)}
.box-key{--bx:#2a9d8f; --bxbg:linear-gradient(100deg,#e6f7f3,#d3f2ea)}
.box-step{--bx:#2e6da4; --bxbg:linear-gradient(100deg,#e7f2fb,#d7e9f7)}
.box-trap{--bx:#e76f51; --bxbg:linear-gradient(100deg,#fff1e9,#ffe3d3)}
[data-theme="dark"] .box-why{--bxbg:linear-gradient(100deg,#241f44,#1d1836)}
[data-theme="dark"] .box-key{--bx:#5fd0c2; --bxbg:linear-gradient(100deg,#0e2e28,#0a241f)}
[data-theme="dark"] .box-step{--bx:#7db4e6; --bxbg:linear-gradient(100deg,#122a3f,#0e2233)}
[data-theme="dark"] .box-trap{--bx:#ff9576; --bxbg:linear-gradient(100deg,#3a2413,#2e1c0e)}

/* ④ 主线学习路径 roadmap —— 一条线从易到难，点一步跳一章 */
.ch-body .roadmap{display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin:18px 0}
.rm-step{flex:1 1 150px; min-width:142px; background:var(--card); border-radius:16px;
  padding:14px 15px; border-top:5px solid var(--rm); box-shadow:var(--shadow);
  cursor:pointer; transition:.18s; text-align:center}
.rm-step:hover{transform:translateY(-4px);
  box-shadow:0 14px 28px color-mix(in srgb,var(--rm) 32%,transparent)}
.rm-badge{display:inline-block; font-size:11px; font-weight:800; color:#fff;
  background:var(--rm); padding:2px 12px; border-radius:10px; margin-bottom:8px}
.rm-name{font-size:15.5px; font-weight:800; color:var(--navy); margin-bottom:3px}
[data-theme="dark"] .rm-name{color:#e8f0f8}
.rm-chs{font-size:12px; font-weight:700; color:var(--rm)}
.rm-note{font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.5}
.rm-arrow{display:flex; align-items:center; font-size:22px; color:var(--orange); font-weight:900}
@media(max-width:860px){.rm-arrow{transform:rotate(90deg); justify-content:center; width:100%; height:16px}}

/* ⑤ 知识树 mindmap —— 中心圆 + 分支，形成"体系感" */
.ch-body .mindmap{display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin:22px 0; box-shadow:var(--shadow)}
.mm-center{flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; width:150px; height:150px; border-radius:50%;
  color:#fff; font-weight:800; font-size:13.5px; line-height:1.25; text-align:center;
  padding:14px; background:radial-gradient(circle at 30% 30%,#ffffff55,transparent 60%),var(--grad2);
  box-shadow:0 8px 22px rgba(123,108,246,.4)}
.mm-emoji{font-size:26px}
.mm-branches{flex:1; min-width:240px; display:flex; flex-wrap:wrap; gap:10px}
.mm-branch{display:flex; align-items:center; gap:8px; background:var(--soft);
  border-left:5px solid var(--bc,var(--teal)); padding:9px 15px; border-radius:0 12px 12px 0;
  font-size:13.5px; font-weight:700; color:var(--ink); box-shadow:0 3px 9px rgba(31,58,95,.05);
  transition:.16s}
.mm-branch:hover{transform:translateX(4px)}
.mm-dot{width:9px; height:9px; border-radius:50%; background:var(--bc,var(--teal)); flex:0 0 auto}

/* ⑥ 想一想·即时自测 —— 点击展开答案，逼你先想再看 */
.ch-body .quiz-box{margin:22px 0; padding:16px 18px; border-radius:16px;
  background:linear-gradient(135deg,#eef4fb,#eae6ff); box-shadow:0 5px 18px rgba(46,109,164,.1)}
[data-theme="dark"] .ch-body .quiz-box{background:linear-gradient(135deg,#132234,#1d1836)}
.quiz-box-h{font-size:15px; font-weight:800; color:var(--blue); margin-bottom:12px;
  display:flex; align-items:center; gap:7px}
.quiz{margin:10px 0; border-radius:12px; background:var(--card); border-left:5px solid var(--gold);
  padding:12px 15px; box-shadow:0 2px 10px rgba(31,58,95,.05)}
.quiz-q{font-size:14.5px; font-weight:700; color:var(--navy); display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; line-height:1.7; cursor:pointer}
[data-theme="dark"] .quiz-q{color:#ffe89e}
.quiz-badge{flex:0 0 auto; background:var(--gold); color:#3a2b00; font-size:12px;
  font-weight:800; padding:2px 10px; border-radius:10px}
.quiz-toggle{margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  background:var(--blue); color:#fff; font-size:12px; font-weight:700;
  padding:5px 14px; border-radius:20px; transition:.18s; white-space:nowrap}
.quiz.open .quiz-toggle{background:var(--teal)}
.quiz-a{max-height:0; overflow:hidden; padding:0 14px; background:var(--soft); border-radius:10px;
  font-size:14.5px; line-height:1.75; color:var(--ink);
  transition:max-height .3s ease,padding .3s ease,margin-top .3s ease}
.quiz.open .quiz-a{max-height:1600px; margin-top:12px; padding:12px 14px}

/* ⑦ 双栏对比 —— "对 vs 错" / "会做 vs 不会做" 一眼看清差别 */
.ch-body .duo{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0}
.duo-col{background:var(--card); border-radius:14px; padding:14px 16px;
  box-shadow:0 4px 14px rgba(31,58,95,.06); border-top:5px solid var(--dc,var(--blue))}
.duo-h{font-size:15px; font-weight:800; color:var(--dc,var(--blue)); margin-bottom:8px;
  display:flex; align-items:center; gap:7px}
.duo-col ul{list-style:none; display:grid; gap:6px; margin:0; padding:0}
.duo-col li{position:relative; padding:5px 6px 5px 20px; font-size:14px; line-height:1.7; margin:0}
.duo-col li::before{content:"·"; position:absolute; left:7px; top:2px;
  color:var(--dc,var(--blue)); font-weight:900; font-size:16px}
.duo-bad{--dc:#e76f51}.duo-good{--dc:#2a9d8f}
@media(max-width:640px){.ch-body .duo{grid-template-columns:1fr}}

/* ⑧ 首页 hero + 学习地图卡片网格 */
.hero{text-align:center; padding:40px 24px; border-radius:26px; margin-bottom:26px;
  background:linear-gradient(135deg,#dbeafe 0%,#e9e4ff 50%,#d3f2ea 100%);
  box-shadow:0 12px 34px rgba(46,109,164,.18); position:relative; overflow:hidden}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#132a42,#1d1836 55%,#0e2e28)}
.hero-emoji{font-size:52px}
.hero-title{font-size:clamp(26px,4.6vw,36px); color:var(--navy); letter-spacing:1px; margin:6px 0}
[data-theme="dark"] .hero-title{color:#e8f0f8}
.hero-sub{font-size:17px; color:var(--blue); font-weight:700}
.hero-tag{font-size:13.5px; color:var(--muted); margin-top:10px}
.hero-goal{display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:22px; flex-wrap:wrap}
.goal-item{background:var(--card); border-radius:16px; padding:12px 20px;
  box-shadow:0 6px 16px rgba(31,58,95,.08); min-width:92px}
.goal-num{display:block; font-size:28px; font-weight:900; color:var(--blue)}
.goal-mid .goal-num{color:var(--gold)}.goal-final .goal-num{color:var(--teal)}
.goal-label{font-size:12px; color:var(--muted)}
.goal-sep{font-size:24px; color:var(--purple); font-weight:900}
.sec-h2{font-size:21px; color:var(--navy); margin:32px 0 14px; padding-left:14px;
  border-left:7px solid var(--teal); line-height:1.4}
[data-theme="dark"] .sec-h2{color:#e8f0f8}
.lead{font-size:15px; color:var(--muted); background:var(--card); border-radius:14px;
  padding:14px 18px; margin-bottom:18px; box-shadow:0 4px 12px rgba(31,58,95,.05)}
.home-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:16px; margin:18px 0 26px}
.home-card{background:var(--card); border-radius:18px; padding:18px 16px; cursor:pointer;
  text-align:center; border:2px solid transparent; box-shadow:0 6px 18px rgba(31,58,95,.07);
  transition:.2s; position:relative; overflow:hidden}
.home-card::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--hc)}
.home-card:hover{transform:translateY(-6px); border-color:var(--hc);
  box-shadow:0 14px 30px rgba(31,58,95,.14)}
.home-emoji{font-size:34px}
.home-num{font-size:12px; color:#fff; background:var(--hc); display:inline-block;
  padding:2px 12px; border-radius:20px; margin:6px 0}
.home-title{font-size:15px; font-weight:800; color:var(--navy)}
[data-theme="dark"] .home-title{color:#e8f0f8}
.home-desc{font-size:11.5px; color:var(--muted); margin-top:4px}
.divider{border:none; height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 26px); margin:26px 0}

/* ⑨ 📌 便签卡 card-quote —— 用于"总纲/口诀原文/一句话总结" */
.ch-body .card-quote{background:var(--soft); border-left:6px solid var(--muted);
  display:flex; align-items:flex-start; gap:12px; border-radius:14px; padding:14px 16px;
  margin:16px 0; box-shadow:0 4px 14px rgba(31,58,95,.06); line-height:1.8}
.ch-body .card-quote .card-body{color:var(--ink)}
[data-theme="dark"] .ch-body .card-quote{background:#0f1c2e}

/* ⑩ 小节次级标题 sec-h3（比 h3 更轻，用于方法内部的小步骤标题） */
.ch-body .sec-h3{font-size:16.5px; color:var(--purple); margin:22px 0 10px; font-weight:800}
.ch-body .sec-h3::before{content:"▸ "; color:var(--teal)}

/* ⑪ 花瓣列表 .bullets —— 带图标的卡片式清单，替代干巴巴的圆点 */
.ch-body ul.bullets{list-style:none; margin:14px 0; padding:0; display:grid; gap:8px}
.ch-body ul.bullets li{position:relative; padding:9px 14px 9px 40px; margin:0;
  background:var(--card); border-radius:12px; box-shadow:0 3px 10px rgba(31,58,95,.05);
  border:1px solid var(--line)}
.ch-body ul.bullets li::before{content:"✔"; position:absolute; left:14px; top:9px;
  color:var(--teal); font-weight:900; font-size:14px}
.ch-body ul.bullets li::marker{content:""}

/* ⑫ 箭头符 .arrow（与 .arw 同义，兼容英语写法） */
.ch-body .arrow{color:var(--orange); font-weight:900; padding:0 3px}

/* ⑬ 本章口诀速记 chapter-tips —— 每章结尾的金色总结卡 */
.ch-body .chapter-tips{margin-top:32px; background:linear-gradient(135deg,#fff9db,#ffeccc);
  border-radius:20px; padding:18px 22px; box-shadow:0 6px 18px rgba(233,185,73,.2)}
[data-theme="dark"] .ch-body .chapter-tips{background:linear-gradient(135deg,#33290c,#2e2109)}
.ch-body .chapter-tips .sec-h2{border:none; padding:0; margin:0 0 10px; color:#b07d00}
[data-theme="dark"] .ch-body .chapter-tips .sec-h2{color:#f0c96a}
.ch-body .tip-list{list-style:none; display:grid; gap:9px; margin:6px 0 0; padding:0}
.ch-body .tip-list li{display:flex; align-items:flex-start; gap:10px; background:var(--card);
  border-radius:12px; padding:10px 14px; font-size:14.5px; box-shadow:0 3px 9px rgba(31,58,95,.05); margin:0}
.tip-check{color:var(--teal); font-weight:900; flex:0 0 auto}

/* ⑭ 术语速通 term-flash —— 生词/术语一句话说人话 */
.ch-body .terms{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px; margin:16px 0}
.term{background:var(--card); border-radius:14px; padding:13px 15px; border-top:4px solid var(--blue);
  box-shadow:0 4px 14px rgba(31,58,95,.06)}
.term-w{font-size:15px; font-weight:800; color:var(--blue); margin-bottom:4px;
  display:flex; align-items:center; gap:6px}
.term-w .term-en{font-size:12px; color:var(--muted); font-weight:600}
.term-d{font-size:13.5px; color:var(--ink); line-height:1.7}
[data-theme="dark"] .term-w{color:var(--blue)}

/* ============================================================
   ⑮ 彩色解题步骤 solve —— 试题解答不再一坨同色
   参考英语"彩色积木"：每步一个色号，读题/列式/计算/结论分色
   ============================================================ */
/* 外层：一道题一个整体框（不再是散开的独立卡片），顶部一条彩色标签栏 */
.ch-body .solve{margin:22px 0; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:52px 20px 10px; box-shadow:0 6px 20px rgba(31,58,95,.09);
  position:relative; overflow:hidden}
/* 默认身份 = 试题「解答过程」：绿色顶栏 */
.ch-body .solve::before{content:"✏️ 解答过程"; position:absolute; top:0; left:0; right:0;
  padding:11px 18px; color:#fff; font-size:14px; font-weight:800; letter-spacing:1.5px;
  font-family:sans-serif; background:linear-gradient(90deg,#0f9d58,var(--teal));
  box-shadow:0 2px 10px rgba(15,157,88,.28)}
/* 教程身份 = 「解题思路」：青蓝顶栏 + 淡渐变底 + 左侧时间线，一眼区别于试题解答 */
.ch-body .solve-think{border:none;
  background:linear-gradient(158deg,#f0f8fb 0%,#eef4fb 55%,#f3f0fc 100%);
  box-shadow:0 8px 26px rgba(46,109,164,.16)}
[data-theme="dark"] .ch-body .solve-think{
  background:linear-gradient(158deg,#12283c 0%,#131f39 55%,#1a1636 100%);
  box-shadow:0 8px 26px rgba(0,0,0,.4)}
.ch-body .solve-think::before{content:"💡 解题思路 · 怎么想到的";
  font-size:14px; letter-spacing:1.5px;
  background:linear-gradient(90deg,var(--teal),var(--blue) 55%,var(--purple));
  box-shadow:0 2px 10px rgba(46,109,164,.3)}
/* 每一步：不再是独立卡片，而是框内连续的一行 */
.solve-step{display:flex; align-items:flex-start; gap:13px; padding:13px 2px;
  border-top:1px dashed var(--line)}
.solve-step:first-of-type{border-top:none}
[data-theme="dark"] .solve-step{border-top-color:rgba(255,255,255,.08)}
/* 解题思路框内：左侧一条贯穿的时间线，把各步串成一条思路链 */
.ch-body .solve-think .solve-step{border-top:none; padding:9px 2px 9px 0; position:relative}
.ch-body .solve-think .solve-step:not(:last-child)::after{content:""; position:absolute;
  left:23px; top:34px; bottom:-9px; width:2px;
  background:linear-gradient(var(--sc,var(--blue)),transparent); opacity:.35}
/* 序号徽章：自适应宽度的胶囊，容得下「倒①」「榨②」这种多字标签，不再挤 */
.solve-n{flex:0 0 auto; min-width:34px; height:34px; padding:0 10px; border-radius:11px;
  color:#fff; background:var(--sc,var(--blue)); font-weight:800; font-size:15px;
  letter-spacing:1px; display:inline-flex; align-items:center; justify-content:center;
  gap:1px; white-space:nowrap; margin-top:1px; z-index:1;
  box-shadow:0 3px 9px color-mix(in srgb,var(--sc,var(--blue)) 40%,transparent)}
.solve-b{flex:1; min-width:0; line-height:1.8; font-size:15.5px; padding-top:3px}
.solve-b .solve-h{font-weight:800; color:var(--sc,var(--blue)); margin-right:6px}
/* 四类步骤配色：读题=青 / 列式=蓝 / 计算=紫 / 结论=绿(teal) / 陷阱=橙 */
.solve-read{--sc:#2a9d8f}.solve-set{--sc:#2e6da4}.solve-calc{--sc:#7b6cf6}
.solve-ans{--sc:#0f9d58}.solve-trap{--sc:#e76f51}
[data-theme="dark"] .solve-ans{--sc:#3ddc84}

/* 结论行：绿色高亮"答" */
.ch-body .ans-line{background:color-mix(in srgb,#0f9d58 12%,transparent);
  border-radius:8px; padding:2px 10px; display:inline-block; font-weight:700; color:#0a7d46}
[data-theme="dark"] .ch-body .ans-line{color:#3ddc84}

/* ⑯ 行内彩色标签 tag —— 已知(蓝)/求(橙)/答(绿)/坑(红)/设(紫) */
.ch-body .tg{display:inline-block; font-size:12.5px; font-weight:800; color:#fff;
  padding:1px 9px; border-radius:7px; margin:0 3px 0 0; vertical-align:baseline;
  line-height:1.7; letter-spacing:.5px}
.tg-given{background:#2e6da4}   /* 已知 */
.tg-find{background:#e76f51}    /* 求 */
.tg-ans{background:#0f9d58}     /* 答 */
.tg-set{background:#7b6cf6}     /* 设 */
.tg-trap{background:#e03131}    /* 坑/易错 */
.tg-key{background:#2a9d8f}     /* 突破口 */

/* ⑰ 彩色数学量：给"数/图形/结论"上色，替代同色黑字（图4 思路） */
.ch-body .m-know{color:#2e6da4; font-weight:700}   /* 已知量·蓝 */
.ch-body .m-find{color:#e76f51; font-weight:700}   /* 待求量·橙 */
.ch-body .m-res{color:#0f9d58; font-weight:700}    /* 结果·绿 */
[data-theme="dark"] .ch-body .m-know{color:#7db4e6}
[data-theme="dark"] .ch-body .m-find{color:#ff9576}
[data-theme="dark"] .ch-body .m-res{color:#3ddc84}

/* ============================================================
   语文各页共用补充（在数学统一组件之上，只加语文特有的东西）
   —— 侧栏保留语文的粉紫识别色；正文一律用上面的青蓝紫橙金语义色
   ============================================================ */

/* 语文侧栏识别色：粉→紫→薄荷渐变（区别于数学的蓝青），但结构沿用 #sidebar */
:root{
  --yw-sb:linear-gradient(168deg,#ff8fb1 0%,#b39ddb 55%,#5fd0c2 100%);
}
[data-theme="dark"]{
  --yw-sb:linear-gradient(168deg,#3d1f4e 0%,#1e1533 55%,#0f2027 100%);
}
#sidebar.yw{background:var(--yw-sb);border-right:none;box-shadow:4px 0 24px rgba(155,117,250,.18)}
#sidebar.yw::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45)}
#sidebar.yw .brand-logo{background:rgba(255,255,255,.22);color:#fff}
#sidebar.yw .brand-txt b,#sidebar.yw .brand-txt small,
#sidebar.yw .brand b,#sidebar.yw .brand span{color:#fff}
#sidebar.yw .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 12px;color:#fff}
#sidebar.yw .brand-emoji{font-size:28px}
#sidebar.yw .brand-text b{display:block;font-size:16px;letter-spacing:.5px}
#sidebar.yw .brand-text span{font-size:11px;opacity:.9}
/* 顶部小工具行：返回导航 + 六页互跳 + 主题 */
#sidebar.yw .home-link{display:flex;align-items:center;gap:6px;margin:0 4px 10px;padding:8px 12px;
  border-radius:14px;background:rgba(255,255,255,.18);color:#fff;text-decoration:none;
  font-size:12.5px;font-weight:600;transition:.2s}
#sidebar.yw .home-link:hover{background:rgba(255,255,255,.32)}
#sidebar.yw .sis-nav{display:flex;flex-wrap:wrap;gap:5px;margin:0 4px 12px}
#sidebar.yw .sis-nav a{flex:1 1 auto;text-align:center;padding:6px 8px;border-radius:10px;
  background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:11.5px;
  font-weight:600;white-space:nowrap;transition:.18s}
#sidebar.yw .sis-nav a:hover{background:rgba(255,255,255,.3)}
#sidebar.yw .sis-nav a.cur{background:#fff;color:#c02772}
#sidebar.yw .theme-toggle{display:flex;align-items:center;justify-content:center;gap:6px;
  margin:0 4px 12px;padding:8px;border-radius:14px;background:rgba(255,255,255,.15);
  cursor:pointer;color:#fff;font-size:12px;font-weight:600;transition:.2s;border:0;width:calc(100% - 8px);
  font-family:inherit}
#sidebar.yw .theme-toggle:hover{background:rgba(255,255,255,.3)}
/* 语文侧栏导航项：白字，深色识别 */
#sidebar.yw .nav-link{color:#fff}
#sidebar.yw .nav-link .nav-ico{background:rgba(255,255,255,.22)}
#sidebar.yw .nav-link:hover{background:rgba(255,255,255,.2);box-shadow:none}
#sidebar.yw .nav-link:hover .nav-ico{background:rgba(255,255,255,.34)}
#sidebar.yw .nav-link.active{background:#fff;color:#c02772;box-shadow:0 6px 16px rgba(0,0,0,.14)}
#sidebar.yw .nav-link.active .nav-ico{background:var(--pink);color:#fff}
#sidebar.yw .nav-link.active .nav-txt{color:#c02772}
#sidebar.yw .sb-foot{color:rgba(255,255,255,.85);border-top-color:rgba(255,255,255,.25)}
[data-theme="dark"] #sidebar.yw .nav-link.active{color:#ff8fb1;background:#20142e}
[data-theme="dark"] #sidebar.yw .sis-nav a.cur{color:#20142e}

/* 阅读材料块（试题页的原文/题面）—— 虚线卡，青色导语条 */
.ch-body .material{background:var(--soft);border:1px dashed var(--line);
  border-left:5px solid var(--teal);border-radius:12px;padding:14px 18px;margin:16px 0;
  font-size:15px;line-height:1.9}
.ch-body .material strong{color:var(--navy)}
[data-theme="dark"] .ch-body .material{background:#0f1c2e}

/* 题目清单 ol.q —— 每题一块，选项另起淡色 */
.ch-body ol.q{margin:12px 0;padding-left:26px}
.ch-body ol.q>li{margin:14px 0;line-height:1.85}
.ch-body ol.q>li::marker{color:var(--blue);font-weight:800}
.ch-body .opts{margin:6px 0 0;color:var(--muted);line-height:2}

/* 引用块 blockquote → 金色便签（多用于"方法小结/一句话真相"）*/
.ch-body blockquote{margin:16px 0;padding:13px 18px;border-radius:14px;
  background:linear-gradient(100deg,#fff9db,#ffeccc);border-left:6px solid var(--gold);
  color:#7a5600;font-size:14.5px;line-height:1.8}
.ch-body blockquote strong{color:#a35a00}
[data-theme="dark"] .ch-body blockquote{background:linear-gradient(100deg,#33290c,#2e2109);color:#f0c96a}
[data-theme="dark"] .ch-body blockquote strong{color:#ffd98a}

/* 兼容旧命名：.box-tag（试题页详解里的徽章）映射到统一 box 体系 */
.ch-body .box .box-tag{display:inline-block;padding:3px 12px;border-radius:12px;
  font-size:12px;font-weight:800;margin-bottom:8px;color:#fff;letter-spacing:.5px}
.ch-body .box-why .box-tag{background:#7b6cf6}
.ch-body .box-step .box-tag{background:#2e6da4}
.ch-body .box-key .box-tag{background:#2a9d8f}
.ch-body .box-trap .box-tag{background:#e76f51}
.ch-body .box-story .box-tag{background:#e9b949}
/* box-story（讲字源/背景故事）—— 金色，补进统一体系 */
.box-story{--bx:#c69214; --bxbg:linear-gradient(100deg,#fff9db,#fff3bf)}
[data-theme="dark"] .box-story{--bx:#f0c96a; --bxbg:linear-gradient(100deg,#33290c,#2e2109)}
.ch-body .box-story .box-tag{color:#fff}

/* details.sol 详解里的内部小标题/列表（试题页答案） */
.ch-body details.sol .sol-body h4{margin:16px 0 6px;font-size:15px;color:var(--blue);
  padding-left:10px;border-left:4px solid var(--teal)}
.ch-body details.sol .sol-body h4:first-child{margin-top:4px}
.ch-body details.sol .sol-body em{color:var(--muted);font-style:normal;font-size:13.5px}

/* 做题自评条 selfcheck（JS 自动注入到每个 details.sol 末尾） */
.selfcheck{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--soft);
  border:1px dashed var(--line)}
.selfcheck .sc-q{font-size:13px;color:var(--muted);margin-bottom:10px;font-weight:600}
.selfcheck .sc-btns{display:flex;flex-wrap:wrap;gap:8px}
.sc-btn{border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;
  transition:.18s;font-family:inherit}
.sc-btn:hover{transform:translateY(-2px);border-color:var(--teal)}
.sc-btn.on-right{background:#0f9d58;color:#fff;border-color:#0f9d58}
.sc-btn.on-half{background:var(--gold);color:#3a2b00;border-color:var(--gold)}
.sc-btn.on-wrong{background:var(--orange);color:#fff;border-color:var(--orange)}
/* ---- 兼容 jiaocheng 旧结构类名：别名到统一外观（零内容改动） ---- */
.chapter-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px;
  padding-bottom:22px;border-bottom:2px solid var(--line);position:relative}
.chapter-head::after{content:"";position:absolute;left:0;bottom:-2px;width:90px;height:2px;
  background:var(--ch-color,var(--grad))}
.chapter-head .ch-badge{width:64px;height:64px;flex:none;border-radius:18px;
  background:var(--ch-color,var(--grad2));color:#fff;font-size:32px;display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(123,108,246,.28)}
.chapter-head .ch-label{font-size:12px;letter-spacing:2px;color:var(--teal);font-weight:700}
.chapter-title{margin:4px 0 6px;font-size:clamp(21px,3.4vw,29px);color:var(--navy);line-height:1.3}
[data-theme="dark"] .chapter-title{color:#e8f0f8}
/* 正文容器：等同 .ch-body */
.chapter-body{font-size:16px}
.chapter-body h2.sec-h2{font-size:21px;color:var(--navy);margin:30px 0 14px;padding-left:14px;
  border-left:7px solid var(--teal);line-height:1.4}
[data-theme="dark"] .chapter-body h2.sec-h2{color:#e8f0f8}
.chapter-body h3{margin:26px 0 12px;font-size:19px;color:var(--blue);
  padding-left:12px;border-left:5px solid var(--teal);line-height:1.4}
.chapter-body h4{margin:22px 0 10px;font-size:17px;color:var(--navy);display:flex;align-items:center;gap:8px}
.chapter-body h4::before{content:"▶";color:var(--orange);font-size:12px}
.chapter-body p{margin:12px 0}
.chapter-body strong{color:var(--navy);font-weight:700}
[data-theme="dark"] .chapter-body strong{color:#fff}
.chapter-body ul,.chapter-body ol{margin:12px 0;padding-left:24px}
.chapter-body li{margin:7px 0}
.chapter-body ul li::marker{color:var(--teal)}
.chapter-body ol li::marker{color:var(--blue);font-weight:700}
.chapter-body a{color:var(--blue)}
.chapter-body hr{border:0;border-top:1px dashed var(--line);margin:28px 0}
.chapter-body code{background:var(--soft);color:var(--orange);padding:2px 6px;border-radius:6px;
  font-family:"SF Mono",Consolas,"Cascadia Code",monospace;font-size:.9em}
[data-theme="dark"] .chapter-body code{color:var(--gold)}
/* 旧正文里的 pre/table/blockquote 复用统一皮肤 */
.chapter-body pre{background:linear-gradient(135deg,#eef6fb 0%,#e9f3f0 55%,#f0edfb 100%);
  border-radius:14px;padding:40px 20px 18px;overflow:auto;position:relative;margin:20px 0;
  box-shadow:0 8px 22px rgba(46,109,164,.13);border:1px solid var(--code-border);border-left:6px solid var(--teal)}
[data-theme="dark"] .chapter-body pre{background:linear-gradient(135deg,#122438 0%,#0f2a26 55%,#181633 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.chapter-body pre::before{content:"✏️ 拆解 · 流程图";position:absolute;top:0;left:0;right:0;
  padding:7px 16px;color:#fff;font-size:11.5px;letter-spacing:1px;font-weight:800;
  font-family:sans-serif;background:linear-gradient(90deg,var(--teal),var(--blue) 60%,var(--purple));
  border-radius:14px 14px 0 0}
.chapter-body pre code{background:transparent;color:var(--code-ink);padding:0;font-size:16px;
  line-height:2;display:block;white-space:pre;font-weight:400;
  font-family:"Cascadia Code","JetBrains Mono","SF Mono",Consolas,"Microsoft YaHei",monospace}
@media(max-width:820px){.chapter-body pre code{font-size:14px;line-height:1.9}}
.chapter-body table{border-collapse:collapse;width:100%;background:var(--card);font-size:14.5px;min-width:440px}
.chapter-body th{background:var(--grad);color:#fff;padding:11px 14px;text-align:left;font-weight:600;white-space:nowrap}
.chapter-body td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.chapter-body tbody tr:nth-child(even){background:var(--soft)}
.chapter-body tbody tr:hover{background:rgba(42,157,143,.08)}
.chapter-body blockquote{margin:16px 0;padding:13px 18px;border-radius:14px;
  background:linear-gradient(100deg,#fff9db,#ffeccc);border-left:6px solid var(--gold);
  color:#7a5600;font-size:14.5px;line-height:1.8}
.chapter-body blockquote strong{color:#a35a00}
[data-theme="dark"] .chapter-body blockquote{background:linear-gradient(100deg,#33290c,#2e2109);color:#f0c96a}
[data-theme="dark"] .chapter-body blockquote strong{color:#ffd98a}
/* 旧翻页栏/按钮 → 统一底栏 */
.chapter-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;
  padding-top:22px;border-top:2px solid var(--line)}
.cn-btn{flex:1;padding:14px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  color:var(--ink);cursor:pointer;font-size:14px;font-weight:700;transition:.2s;font-family:inherit}
.cn-btn:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--blue)}
.cn-btn.cn-next{text-align:right}
.cn-btn.disabled{opacity:.35;pointer-events:none}
/* 旧卡片：.card-tag 在旧结构里是块级徽章 */
.chapter-body .card-tag{display:inline-block;padding:3px 11px;border-radius:20px;
  font-size:12px;font-weight:800;margin-bottom:6px;color:#fff}
.chapter-body .card-tip{background:linear-gradient(100deg,#fff9db,#fff3bf);border-left:6px solid var(--gold)}
.chapter-body .card-tip .card-tag{background:#d9a400}
.chapter-body .card-tip .card-body{color:#7a5600}
.chapter-body .card-why{background:linear-gradient(100deg,#fff1e9,#ffe3d3);border-left:6px solid var(--orange)}
.chapter-body .card-why .card-tag{background:var(--orange)}
.chapter-body .card-why .card-body{color:#a13c22}
.chapter-body .card-tip,.chapter-body .card-why{border-radius:14px;padding:14px 18px;margin:16px 0;
  box-shadow:0 4px 14px rgba(31,58,95,.07);line-height:1.8}
[data-theme="dark"] .chapter-body .card-tip{background:linear-gradient(100deg,#3a2f10,#2e2609)}
[data-theme="dark"] .chapter-body .card-tip .card-body{color:#ffe9a8}
[data-theme="dark"] .chapter-body .card-why{background:linear-gradient(100deg,#3a2413,#2e1c0e)}
[data-theme="dark"] .chapter-body .card-why .card-body{color:#ffcbb2}
.chapter-body .arrow{color:var(--orange);font-weight:900;padding:0 3px}

/* 兼容 jiaocheng 旧卡片写法：.card-tip / .card-why 不带 .card 基类也渲染成卡 */
.ch-body .card-tip,.ch-body .card-why{border-radius:14px;padding:14px 16px;margin:16px 0;
  box-shadow:0 4px 14px rgba(31,58,95,.07);line-height:1.8}
.ch-body .card-tip>.card-tag,.ch-body .card-why>.card-tag{display:inline-block;margin-bottom:6px}
.ch-body .card-tip>.card-body,.ch-body .card-why>.card-body{display:block}

/* 侧栏做题统计 */
#sidebar.yw .sb-stat{margin:0 4px 10px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.16);color:#fff;font-size:12px;line-height:1.6}
#sidebar.yw .sb-stat b{font-size:15px}
.sb-stat .stat-empty{opacity:.85}
.sb-stat .stat-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.25);margin:6px 0 4px;overflow:hidden}
.sb-stat .stat-bar i{display:block;height:100%;background:#fff;border-radius:6px;transition:width .3s}
.sb-stat .stat-legend{font-size:11px;opacity:.92}
.sb-stat .stat-legend a{color:#fff;text-decoration:underline;margin-left:2px}

/* 技巧页 .sister 跨页互跳（等同 .sis-nav） */
#sidebar.yw .sister{display:flex;flex-wrap:wrap;gap:5px;margin:0 4px 12px}
#sidebar.yw .sister a{flex:1 1 40%;text-align:center;padding:7px 6px;border-radius:11px;
  background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:11.5px;
  font-weight:600;white-space:nowrap;transition:.18s}
#sidebar.yw .sister a:hover{background:rgba(255,255,255,.3)}
#sidebar.yw .sister a.cur{background:#fff;color:#c02772;box-shadow:0 4px 12px rgba(0,0,0,.14)}
[data-theme="dark"] #sidebar.yw .sister a.cur{color:#20142e}

/* ============================================================
   字词/口诀/作文/技巧四页专属组件（在统一体系之上补齐）
   ============================================================ */

/* 侧栏两行导航项（b 大标题 + small 副标题）—— 兼容 shiti/zici 等页写法 */
#sidebar.yw .nav-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
#sidebar.yw .nav-txt b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar.yw .nav-txt small{font-size:11px;opacity:.85;color:#fff}
#sidebar.yw .nav-link.active .nav-txt b,#sidebar.yw .nav-link.active .nav-txt small{color:#c02772}
[data-theme="dark"] #sidebar.yw .nav-link.active .nav-txt b,
[data-theme="dark"] #sidebar.yw .nav-link.active .nav-txt small{color:#ff8fb1}
/* 单色 nav-ico（技巧/口诀页用纯背景色徽章，非 color-mix 皮肤） */
#sidebar.yw .nav-ico{width:30px;height:30px;flex:none;border-radius:9px;
  display:grid;place-items:center;font-size:15px}

/* 对比双栏 split / cell（字词拆字、作文对比）—— 统一体系语义色 */
.ch-body .split{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.ch-body .split .cell{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.8;
  box-shadow:0 3px 10px rgba(31,58,95,.05)}
.ch-body .split .cell b{color:var(--blue);font-size:15px}
[data-theme="dark"] .ch-body .split .cell b{color:#7db4e6}
.ch-body .zi{font-size:15px;color:var(--purple);font-weight:700}

/* 口诀卡 kj-*（口诀页每条口诀一张卡）—— 金色左条 + 圆号 */
.ch-body .kj-list{display:grid;gap:14px;margin:16px 0}
.ch-body .kj-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border-radius:16px;padding:16px 18px;border-left:5px solid var(--gold);
  box-shadow:0 4px 16px rgba(31,58,95,.08);transition:transform .2s,box-shadow .2s}
.ch-body .kj-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(31,58,95,.14)}
.ch-body .kj-num{flex:none;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--orange));color:#fff;
  font-weight:800;font-size:14px;display:grid;place-items:center;margin-top:2px}
.ch-body .kj-body{min-width:0}
.ch-body .kj-sec{display:inline-block;font-size:11.5px;font-weight:700;color:var(--purple);
  background:var(--soft);padding:2px 10px;border-radius:10px;margin-bottom:6px}
.ch-body .kj-body p{margin:0;font-size:15px;line-height:1.85}
.ch-body .kj-body strong{color:var(--navy);font-weight:700}
[data-theme="dark"] .ch-body .kj-body strong{color:#fff}
.ch-body .kj-body code{background:var(--soft);color:var(--orange);padding:2px 6px;border-radius:6px;
  font-family:Consolas,monospace;font-size:.92em}
.ch-body .kj-verse{display:block;margin-top:8px;padding:10px 14px;border-radius:12px;
  background:linear-gradient(100deg,#fff9db,#ffeccc);color:#7a5600;font-weight:700;
  font-size:14.5px;letter-spacing:.3px}
[data-theme="dark"] .ch-body .kj-verse{background:linear-gradient(100deg,#33290c,#2e2109);color:#f0c96a}

/* 技巧页 box-formula（万能公式·紫）/ box-example（范例·青）—— 并入 box 体系 */
.box-formula{--bx:#7b6cf6; --bxbg:linear-gradient(100deg,#f1efff,#e9e4ff)}
.box-example{--bx:#2a9d8f; --bxbg:linear-gradient(100deg,#e6f7f3,#d3f2ea)}
[data-theme="dark"] .box-formula{--bxbg:linear-gradient(100deg,#241f44,#1d1836)}
[data-theme="dark"] .box-example{--bx:#5fd0c2; --bxbg:linear-gradient(100deg,#0e2e28,#0a241f)}
.ch-body .box-formula .box-tag{background:#7b6cf6}
.ch-body .box-example .box-tag{background:#2a9d8f}

/* 作文页独立 card-tip（不带 .card 基类）—— 金色提示卡 */
.ch-body .card-tip{margin:16px 0;padding:14px 18px;border-radius:16px;
  background:linear-gradient(100deg,#fff9db,#fff3bf);border-left:6px solid var(--gold);
  box-shadow:0 4px 14px rgba(31,58,95,.07);line-height:1.8}
.ch-body .card-tip>.card-tag{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;
  font-weight:800;margin-bottom:6px;background:#d9a400;color:#fff}
.ch-body .card-tip>.card-body{font-size:14.5px;line-height:1.75;color:#7a5600}
[data-theme="dark"] .ch-body .card-tip{background:linear-gradient(100deg,#3a2f10,#2e2609)}
[data-theme="dark"] .ch-body .card-tip>.card-body{color:#ffe9a8}