/* ============================================================
   初中数学提分实操教程 · 网页版样式
   左菜单 / 右内容 · 单章独立切换 · 响应式 · 动效
   ============================================================ */
:root{
  --navy:#1f3a5f; --blue:#2e6da4; --teal:#2a9d8f; --orange:#e76f51;
  --purple:#7b6cf6; --gold:#e9b949;
  --ink:#20303f; --muted:#5c6b7a; --line:#e6edf3;
  --bg:#eef3f8; --card:#ffffff; --soft:#f2f7fb;
  --code-bg:#0f2036; --code-ink:#d6e4f5;
  --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);
}
[data-theme="dark"]{
  --navy:#cfe0f2; --blue:#7db4e6; --teal:#5fd0c2; --orange:#ff9576;
  --ink:#e7eef6; --muted:#9fb2c4; --line:#243244;
  --bg:#0d1826; --card:#132234; --soft:#182a40;
  --code-bg:#0a1524; --code-ink:#cfe0f5;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{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(--card);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)}
.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)}
#sidebar nav{flex:1}
#navList{list-style:none;margin:0;padding:0}
#navList li{margin:3px 0}
.nav-link{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;
  text-decoration:none;color:var(--ink);transition:.18s;position:relative}
.nav-link:hover{background:var(--soft)}
.nav-ico{width:32px;height:32px;flex:none;border-radius:9px;background:var(--soft);
  display:grid;place-items:center;font-size:17px;transition:.18s}
.nav-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.nav-txt b{font-size:14px;font-weight:600}
.nav-txt small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-link.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(46,109,164,.3)}
.nav-link.active .nav-ico{background:rgba(255,255,255,.22)}
.nav-link.active .nav-txt small{color:rgba(255,255,255,.85)}
.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)}

/* 代码块 / 流程图 / ASCII 思维导图 —— 教程的灵魂，做成"终端卡片" */
.ch-body pre{background:var(--code-bg);border-radius:14px;padding:18px 20px;overflow:auto;
  box-shadow:var(--shadow);position:relative;margin:18px 0;border:1px solid rgba(255,255,255,.06)}
.ch-body pre::before{content:"◍ 拆解 / 流程图";position:sticky;top:0;
  display:inline-block;color:#6f8bb0;font-size:11px;letter-spacing:1px;
  font-family:sans-serif;margin-bottom:6px}
.ch-body pre code{background:transparent;color:var(--code-ink);padding:0;font-size:15px;
  line-height:1.78;display:block;white-space:pre;letter-spacing:.2px}
.ch-body pre code::selection{background:rgba(42,157,143,.4)}

/* 引用块 → 彩色 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-body pre code{font-size:13px}
  .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}
/* 通用文字 */
.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}
/* 打印 */
@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-radius:14px;
  background:var(--card);box-shadow:var(--shadow);overflow:hidden}
details.sol>summary{list-style:none;cursor:pointer;padding:16px 20px;
  font-size:16px;font-weight:700;color:var(--navy);
  background:var(--soft);display:flex;align-items:center;gap:10px;
  transition:background .18s}
details.sol>summary::-webkit-details-marker{display:none}
details.sol>summary::before{content:"▶";color:var(--teal);font-size:13px;
  transition:transform .2s}
details.sol[open]>summary::before{transform:rotate(90deg)}
details.sol>summary::after{content:"点击看详解";margin-left:auto;
  font-size:12px;font-weight:600;color:var(--muted)}
details.sol[open]>summary::after{content:"收起"}
details.sol>summary:hover{background:var(--line)}
details.sol .sol-body{padding:6px 20px 18px}
details.sol .sol-body h3{display:none}