/* ============ 物理乐园 · 全局样式（游戏化卡通风） ============ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FFF6E7; --ink:#3A3226; --line:rgba(58,50,38,.12);
  --orange:#FF8A3D; --orange-d:#E0702A;
  --blue:#4A97DE;  --blue-d:#3577B5;
  --green:#53B96B; --green-d:#3E9A54;
  --purple:#9B6DD6;--purple-d:#7E52B8;
  --red:#E85D5D;   --red-d:#C94646;
  --yellow:#FFC93C;--yellow-d:#E3A81C;
  --teal:#3BB5A7;  --teal-d:#2E948A;
  --shadow:0 6px 0 rgba(58,50,38,.08);
  --r:18px;
}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  background:var(--bg);
  background-image:radial-gradient(rgba(255,138,61,.07) 2px,transparent 2.5px);
  background-size:26px 26px;
  color:var(--ink);line-height:1.75;font-size:16px;
}
.wrap{max-width:960px;margin:0 auto;padding:0 16px 90px}
a{color:var(--blue-d)}
img,svg,canvas{max-width:100%}
canvas{display:block;width:100%;height:clamp(190px,46vw,340px);border-radius:14px}

/* ---------- 内联 SVG 图标（icon() 输出，随文字颜色/大小自适应） ---------- */
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.14em;flex:0 0 auto}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:12px;padding:16px 0 6px;flex-wrap:wrap}
.backbtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--line);
  border-radius:999px;padding:7px 16px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;
  box-shadow:var(--shadow);transition:transform .12s}
.backbtn:hover{transform:translateY(-2px)}
.volpill{font-size:13px;font-weight:800;color:#fff;border-radius:999px;padding:5px 14px}
.volpill.c1{background:var(--blue)} .volpill.c2{background:var(--green)} .volpill.c3{background:var(--orange)}

/* ---------- 章节头 ---------- */
.ch-hero{background:linear-gradient(135deg,#fff,#FFF3DC);border:3px solid var(--line);border-radius:24px;
  padding:26px 26px 22px;margin:14px 0 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.ch-hero .deco{position:absolute;right:-24px;top:-14px;font-size:clamp(110px,24vw,150px);opacity:.10;transform:rotate(15deg);font-weight:900;line-height:1;letter-spacing:-6px}
.ch-hero .deco svg{width:clamp(110px,24vw,150px);height:clamp(110px,24vw,150px);stroke-width:1.2}
.ch-no{display:inline-block;font-size:13px;font-weight:800;color:#fff;background:var(--orange);
  border-radius:999px;padding:4px 14px;margin-bottom:10px}
.ch-hero h1{font-size:30px;line-height:1.3;margin-bottom:8px}
.ch-hero .sub{color:#7A6F5E;font-size:15px}
.ch-hero .seclist{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.ch-hero .seclist span{background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:3px 12px;font-size:13px;font-weight:700;color:#5C5344}

/* ---------- 卡片 ---------- */
.card{background:#fff;border:3px solid var(--line);border-radius:var(--r);padding:22px;margin:18px 0;box-shadow:var(--shadow)}
.block-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.badge{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:25px;flex:0 0 auto;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.badge.b-orange{background:var(--yellow)} .badge.b-blue{background:#CFE6FB}
.badge.b-green{background:#D3F0DA} .badge.b-purple{background:#E7D9F8} .badge.b-red{background:#FBDCDC} .badge.b-teal{background:#CDF0EC}
.block-head h2{font-size:21px;line-height:1.3}
.secref{font-size:12.5px;font-weight:800;color:#fff;background:var(--purple);border-radius:999px;padding:3px 11px}
.block-head .kword{font-size:12.5px;font-weight:800;color:var(--orange-d);background:#FFEAD5;border-radius:999px;padding:3px 11px}

/* ---------- 知识点条目 ---------- */
.klist{list-style:none;margin:10px 0}
.klist li{position:relative;padding:9px 14px 9px 34px;border-radius:12px;margin:7px 0;background:#FBF7EE;border:2px solid rgba(58,50,38,.06)}
.klist li::before{content:"★";position:absolute;left:11px;top:9px;color:var(--yellow-d);font-size:14px}
.klist li.plain::before{content:"•";color:var(--orange);font-size:18px;top:6px}
.klist b, .kwordb{color:var(--orange-d)}
.formula{background:#FFF3D6;border:2.5px dashed #E8B54A;border-radius:14px;padding:13px 16px;text-align:center;
  font-size:1.22em;margin:13px 0;font-family:"Times New Roman","STIXGeneral",serif;font-style:italic}
.formula small{font-style:normal;font-family:inherit;font-size:.62em;color:#8A7A55;display:block;margin-top:2px}
.formula-inline{font-family:"Times New Roman",serif;font-style:italic}

/* ---------- 提示盒 ---------- */
.tipbox{border-radius:14px;padding:13px 16px;margin:13px 0;border:2.5px solid;font-size:15px}
.tipbox .t-head{font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.tipbox.life{background:#EDF9F0;border-color:#BEE3C8;color:#2E5A3B}
.tipbox.link{background:#F4EEFB;border-color:#D9C7F0;color:#4A3A63}
.tipbox.warn{background:#FDF0F0;border-color:#F2C4C4;color:#7A3030}
.tipbox.idea{background:#EFF6FE;border-color:#C4DCF4;color:#2C517A}
.tipbox ul{margin:4px 0 0 20px}

/* ---------- 动画/实验区 ---------- */
.anim-card{background:#fff;border:3px solid #CFE6FB;border-radius:var(--r);padding:18px;margin:15px 0;box-shadow:var(--shadow)}
.anim-card h3{font-size:16.5px;color:var(--blue-d);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.anim-card .stage{background:linear-gradient(#EAF6FF,#F6FBFF);border-radius:14px;padding:10px;border:2px solid #DCEEFB}
.wk-legend{font-size:13px;font-weight:600;color:#5C5344;margin:9px 2px 2px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.wk-legend b{color:#3A3226}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 4px}
.controls label{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
input[type=range]{accent-color:var(--orange);width:150px}
select{font-size:14px;padding:6px 10px;border-radius:10px;border:2.5px solid var(--line);background:#fff;font-weight:700;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;font-weight:800;font-size:15px;
  padding:9px 18px;border-radius:13px;color:#fff;background:var(--orange);
  box-shadow:0 4px 0 var(--orange-d);transition:transform .1s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--orange-d)}
.btn.blue{background:var(--blue);box-shadow:0 4px 0 var(--blue-d)}
.btn.blue:active{box-shadow:0 1px 0 var(--blue-d)}
.btn.green{background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.btn.green:active{box-shadow:0 1px 0 var(--green-d)}
.btn.purple{background:var(--purple);box-shadow:0 4px 0 var(--purple-d)}
.btn.gray{background:#A99F8E;box-shadow:0 4px 0 #8A8172}
.btn.sm{padding:6px 13px;font-size:13.5px;border-radius:11px}
.readout{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.readout .ro{background:#FBF7EE;border:2.5px solid var(--line);border-radius:12px;padding:8px 14px;min-width:110px;text-align:center}
.readout .ro .lb{font-size:12.5px;color:#8A7F6C;font-weight:700}
.readout .ro .vl{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums}
.mission{list-style:none;margin:10px 0}
.mission li{padding:8px 12px 8px 40px;position:relative;border-radius:12px;background:#FBF7EE;margin:6px 0;border:2px solid var(--line);font-size:14.5px}
.mission li::before{content:"○";position:absolute;left:13px;top:7px;font-size:17px;color:#B9AE99;font-weight:900}
.mission li.done{background:#EDF9F0;border-color:#BEE3C8}
.mission li.done::before{content:"✔";color:var(--green-d)}
.mission li.cur{background:#FFF6DE;border-color:#F0D99A}
.mission li.cur::before{content:"▶";color:var(--yellow-d)}
table.data{border-collapse:collapse;margin:10px auto;font-size:14px;background:#fff}
table.data th,table.data td{border:2px solid #D8CBB2;padding:6px 14px;text-align:center;min-width:64px}
table.data th{background:#FFF3D6;font-weight:800}

/* ---------- 关卡小测 & 章末闯关 ---------- */
.quiz{margin:14px 0}
.quiz.compact .qz-body{border-style:dashed;background:#FFFBF0}
.qz-body{background:#fff;border:3px solid var(--yellow);border-radius:var(--r);padding:18px}
.qz-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.qz-badge{background:var(--yellow);color:#6B4E00;font-weight:900;font-size:13.5px;border-radius:999px;padding:4px 13px}
.qz-bar{flex:1;height:12px;background:#F1E7CE;border-radius:999px;overflow:hidden;min-width:80px}
.qz-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:999px;transition:width .4s}
.qz-score{font-weight:900;color:var(--orange-d);font-size:14px}
.qz-q{font-size:17px;font-weight:800;margin:6px 0 12px;line-height:1.6}
.qz-art{text-align:center;margin:10px 0 14px}
.qz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.qz-opts{grid-template-columns:1fr}}
.qz-opt{display:flex;align-items:flex-start;gap:9px;text-align:left;background:#FBF7EE;border:2.5px solid var(--line);
  border-radius:13px;padding:11px 13px;font-size:15px;font-weight:600;cursor:pointer;color:var(--ink);
  transition:transform .1s;font-family:inherit;line-height:1.55}
.qz-opt b{flex:0 0 26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--line);
  display:grid;place-items:center;font-size:13px;font-weight:900;margin-top:1px}
.qz-opt:hover{transform:translateY(-2px);border-color:var(--yellow-d)}
.qz-opt.ok{background:#E5F6E9;border-color:var(--green-d);color:#245A33}
.qz-opt.ok b{background:var(--green);color:#fff;border-color:var(--green-d)}
.qz-opt.bad{background:#FBE3E3;border-color:var(--red-d);color:#7A2B2B;cursor:not-allowed}
.qz-opt.bad b{background:var(--red);color:#fff;border-color:var(--red-d)}
.qz-fb{margin-top:13px;border-radius:13px;padding:12px 15px;font-size:14.5px}
.qz-fb.good{background:#EDF9F0;border:2.5px solid #BEE3C8}
.qz-fb.warn{background:#FFF6DE;border:2.5px solid #F0D99A}
.qz-fb-t{font-weight:900;margin-bottom:3px}
.qz-fb .btn{margin-top:9px}
.qz-end{text-align:center;padding:14px 6px}
.qz-stars{font-size:26px;letter-spacing:6px;color:var(--yellow-d)}
.qz-stars.big{font-size:44px;letter-spacing:10px;margin:8px 0}
.qz-end-score{font-size:19px;font-weight:900;margin:6px 0 2px}
.qz-end-msg{color:#7A6F5E;margin-bottom:14px}
.qz-end .btn{margin:0 6px}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.shake{animation:shakeX .3s}

/* ---------- 换算筹码（单位换算 / 数据速览，各章通用） ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{background:#FBF7EE;border:2px solid var(--line);border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px}
.chip.blue{background:#EAF6FF;border-color:#CFE6FB;color:var(--blue-d)}
.chip.purple{background:#F4EEFB;border-color:#D9C7F0;color:#5B4780}

/* ---------- 知识网 ---------- */
.knet{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.knet a,.knet span.node{display:inline-flex;align-items:center;gap:7px;background:#F4EEFB;border:2.5px solid #D9C7F0;
  color:#5B4780;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;text-decoration:none}
.knet a:hover{background:#E9DCF7;transform:translateY(-1px)}
.knet span.node{opacity:.62}
.knet .dot{width:9px;height:9px;border-radius:50%}

/* ---------- 章间导航 ---------- */
.chnav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.chnav a{flex:1;min-width:220px;background:#fff;border:3px solid var(--line);border-radius:var(--r);
  padding:14px 18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.chnav a:hover{transform:translateY(-2px)}
.chnav .d{font-size:12.5px;color:#9A8F7B;font-weight:800}
.chnav .t{font-weight:900;font-size:16px}
.chnav a.next{text-align:right}

/* ---------- 门户首页 ---------- */
.hero{text-align:center;padding:34px 10px 10px}
.hero h1{font-size:34px;margin:10px 0 6px}
.hero .slogan{color:#7A6F5E;font-size:16px}
.hero .mascot{filter:drop-shadow(0 5px 0 rgba(58,50,38,.08))}
.legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0 6px}
.legend span{background:#fff;border:2.5px solid var(--line);border-radius:999px;padding:6px 15px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.progress-pill{text-align:center;margin:8px 0 4px}
.progress-pill b{display:inline-block;background:#FFEAD5;color:var(--orange-d);border-radius:999px;padding:6px 18px;font-size:14.5px}
.shelf-title{display:flex;align-items:center;gap:10px;margin:30px 0 12px}
.shelf-title .bar{width:14px;height:26px;border-radius:6px}
.shelf-title h2{font-size:21px}
.shelf-title small{color:#9A8F7B;font-weight:700}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px}
.chcard{position:relative;background:#fff;border:3px solid var(--line);border-radius:16px;padding:15px 16px;
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:5px;
  transition:transform .12s;overflow:hidden}
.chcard:hover{transform:translateY(-3px)}
.chcard .no{font-size:12.5px;font-weight:900;color:#fff;border-radius:8px;padding:2px 9px;align-self:flex-start}
.chcard .tt{font-size:17px;font-weight:900}
.chcard .st{font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px}
.chcard.play{border-color:var(--yellow-d);background:linear-gradient(160deg,#fff,#FFF6DE)}
.chcard.play .no{background:var(--orange)}
.chcard.play .st{color:var(--green-d)}
.chcard.lock{opacity:.66}
.chcard.lock .no{background:#B9AE99}
.chcard.lock .st{color:#9A8F7B}
.chcard .stars{position:absolute;right:12px;top:12px;color:var(--yellow-d);font-size:14px;letter-spacing:1px}
.edition-note{font-size:13px;color:#9A8F7B;text-align:center;margin-top:34px;line-height:1.9}
.foot{text-align:center;color:#B3A88F;font-size:13px;margin-top:26px}

/* ---------- 其它 ---------- */
.toc-jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.toc-jump a{font-size:13.5px;font-weight:800;background:#fff;border:2.5px solid var(--line);border-radius:999px;
  padding:5px 13px;text-decoration:none;color:#5C5344}
.toc-jump a:hover{border-color:var(--yellow-d);transform:translateY(-1px)}
hr.sep{border:none;border-top:2.5px dashed var(--line);margin:22px 0}
@media(max-width:620px){
  body{font-size:15px}
  .ch-hero h1{font-size:24px}
  .hero h1{font-size:27px}
  .card{padding:17px}
  .shelf-title{flex-wrap:wrap}
  .shelf-title small{flex-basis:100%;margin-left:24px}
}

/* ============ V2 · 分节导航 / 课本核心概念卡 / 示意图 / 生活动画 ============ */
/* 分节导航：吸顶卡片式分段导航（对标课程类产品）
   · flex:0 0 auto —— 按钮按内容宽度展示，教材完整标题（如"测量：用弹簧测力计测量力"）不截断
   · 空间不足时依靠容器横向滑动（overflow-x:auto），末尾"当前位置 x / N"提示可滑
   · 悬停有原生 tooltip 显示完整标题 */
.jienav{position:sticky;top:10px;z-index:60;display:flex;gap:8px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  background:rgba(255,252,246,.96);backdrop-filter:blur(10px);
  border:3px solid var(--line);border-radius:18px;
  padding:8px;margin:14px 0 18px;
  box-shadow:0 6px 22px rgba(90,70,40,.18),0 2px 0 #fff inset}
.jienav::-webkit-scrollbar{display:none}
.jienav button{flex:0 0 auto;min-width:106px;display:flex;align-items:center;justify-content:center;gap:6px;
  border:none;background:#F6EDDC;color:#6B5E4A;font-weight:800;font-size:14.5px;border-radius:13px;
  padding:9px 10px;cursor:pointer;transition:.18s}
.jienav button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jienav button .n,.jie-foot button .n{font-style:normal;flex:0 0 auto;font-size:11.5px;font-weight:900;color:#fff;
  background:#C9A468;border-radius:8px;padding:2px 7px;letter-spacing:.4px}
.jienav button.prax .n,.jie-foot button.prax .n{background:#3FA35C}
.jienav button.boss .n,.jie-foot button.boss .n{background:#9B6DD6}
.jienav button:hover{background:#FFE3C2;color:#B4530A}
.jienav button.on{background:linear-gradient(180deg,#FF9A4D,var(--orange));color:#fff;
  box-shadow:0 3px 0 #C96A25,0 4px 12px rgba(255,138,61,.38)}
.jienav button.on .n,.jie-foot button.on .n{background:rgba(255,255,255,.3)}
/* "当前位置 x / N" 进度指示 */
.jieprog{flex:0 0 auto;display:flex;align-items:center;padding:0 10px;margin-left:2px;
  font-weight:900;font-size:12.5px;color:#B08A55;white-space:nowrap;
  border-left:2px dashed #E4D5BC}
/* 渐进增强：默认显示全部小节；仅当 JS 成功接管（加 js-on）后才折叠为单节显示。
   这样即使 common.js 加载/执行异常，章节内容也不会整页空白。 */
body.js-on section.jie{display:none}
body.js-on section.jie.on{display:block;animation:jieIn .35s ease}
@keyframes jieIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sec-title{display:flex;align-items:center;gap:10px;font-size:24px;margin:4px 0 14px;color:var(--ink);flex-wrap:wrap}
.sec-title .no{background:var(--blue);color:#fff;border-radius:12px;padding:4px 12px;font-size:15px;font-weight:900}
.sec-title .tip{font-size:13px;color:#9A8F7B;font-weight:700}
.verbatim{background:#fff;border:3px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:0 0 16px;box-shadow:var(--shadow)}
.verbatim .v-head{display:inline-flex;align-items:center;gap:6px;font-weight:900;color:#B4530A;background:#FFF3DF;
  border-radius:999px;padding:4px 14px;font-size:13px;margin-bottom:12px}
.verbatim blockquote{margin:0 0 10px;padding:10px 18px;border-left:6px solid var(--orange);background:#FFFDF8;
  border-radius:0 12px 12px 0;font-size:17.5px;line-height:2;font-weight:600;color:var(--ink)}
.verbatim blockquote:last-child{margin-bottom:0}
.verbatim mark{background:linear-gradient(transparent 62%,#FFD98E 62%);color:inherit;font-weight:900}
.verbatim .src{display:block;color:#9A8F7B;font-size:12px;font-weight:700;margin-top:2px}
.figcard{background:#fff;border:3px solid #CFE6FB;border-radius:var(--r);padding:16px 18px;margin:0 0 16px;box-shadow:var(--shadow)}
.figcard h3{margin:0 0 10px;font-size:16px;color:var(--blue-d)}
.lifecard{background:linear-gradient(135deg,#EAF7FF,#FFF6E7);border:3px dashed #7FB8E6;border-radius:var(--r);
  padding:16px 18px;margin:0 0 16px}
.lifecard h3{margin:0 0 10px;font-size:16px;color:#2C517A}
.lifecard .life-fig{margin:0 0 4px;border-radius:14px;overflow:hidden;background:#fff;
  border:2px solid #D6E9F7;box-shadow:0 2px 8px rgba(74,151,222,.10)}
.lifecard .life-fig img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;background:#fff}
.lifecard .cap{font-size:14.5px;color:#4A4232;line-height:1.9;margin-top:10px}
.lifecard .cap b{color:#B4530A}
/* 厨房里的杠杆：需要较高画布以同时清晰画出开瓶器与筷子两张杠杆受力图 */
#lifeLever{height:clamp(440px,64vw,560px);background:#FDF6E9}
/* 拃的教训：上下两组手掌对比，需要略高画布 */
#lifeSpan{height:clamp(320px,68vw,420px);background:#FDF6E9}
/* 树荫下的圆形光斑：小孔成像需同时看清太阳、树冠小孔与地面光斑，略高画布 */
#lifeHole{height:clamp(250px,54vw,330px);background:#BFE6FF}
/* ---------- 科学家精神卡片（12.4） ---------- */
.spot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.spotcard{background:linear-gradient(135deg,#F7FBFF,#EAF3FF);border:2px solid #D7E8FB;border-radius:12px;padding:10px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s}
.spotcard:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(74,151,222,.18)}
.spotcard svg{width:100%;height:auto;display:block;margin:0 auto}
.sc-cap{font-size:13.5px;color:#33414F;margin-top:8px;line-height:1.5}
.sc-cap b{color:#1F6FB2}
@media(max-width:640px){ .spot-grid{grid-template-columns:repeat(2,1fr)} }
.jie .quiz{margin-top:18px}

/* ---------- 公式卡：公式名 + 逐项符号含义 ---------- */
.fcard{background:#FFFDF4;border:3px dashed var(--yellow-d);border-radius:16px;padding:14px 16px;margin:14px 0}
.fcard .fc-name{font-weight:800;font-size:14px;color:var(--orange-d);margin-bottom:6px}
.fcard .fc-f{font-size:19px;font-weight:800;text-align:center;background:#fff;border:2px solid var(--line);
  border-radius:12px;padding:8px 10px;margin:6px 0 10px;letter-spacing:.5px}
.fcard ul.fc-syms{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 16px}
.fcard ul.fc-syms li{font-size:13.5px;color:#5C5344;line-height:1.7}
.fcard ul.fc-syms b{color:var(--blue-d);margin-right:6px}

/* ---------- 节底快捷跳转 ---------- */
.jie-foot{margin-top:22px;padding-top:14px;border-top:3px dashed var(--line)}
.jie-foot .jf-t{font-size:12.5px;font-weight:800;color:#7A6F5E;margin-bottom:8px}
.jie-foot .jf-btns{display:flex;flex-wrap:wrap;gap:8px}
.jie-foot button{background:#fff;border:2.5px solid var(--line);border-radius:999px;padding:6px 14px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:#5C5344;cursor:pointer;transition:transform .12s}
.jie-foot button:hover{transform:translateY(-2px)}
.jie-foot button.on{background:var(--blue);border-color:var(--blue-d);color:#fff}

/* ---------- 底部进度条 ---------- */
body.has-bar{padding-bottom:92px}
.ppbar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:rgba(255,255,255,.97);
  border-top:3px solid var(--line);box-shadow:0 -6px 0 rgba(58,50,38,.06)}
.ppbar .pb-in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px}
.ppbar .pb-toc{flex:0 0 auto;background:var(--purple);color:#fff;border:none;border-radius:12px;padding:9px 13px;
  font-size:14px;font-weight:800;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);
  display:inline-flex;align-items:center;gap:6px}
.ppbar a.pb-prev,.ppbar a.pb-next,.ppbar span.pb-prev,.ppbar span.pb-next{flex:0 1 170px;min-width:0;background:#fff;
  border:2.5px solid var(--line);border-radius:12px;padding:7px 10px;text-decoration:none;color:var(--ink);
  font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppbar a.pb-next{text-align:right}
.ppbar .pb-mid{flex:1 1 auto;min-width:0;text-align:center}
.ppbar .pb-title{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppbar .pb-title span{color:var(--orange-d)}
.ppbar .pb-prog{height:8px;background:#F1E6D2;border-radius:99px;margin-top:5px;overflow:hidden}
.ppbar .pb-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:99px}

/* ---------- 目录抽屉 ---------- */
.pp-mask{position:fixed;inset:0;background:rgba(58,50,38,.45);z-index:950;opacity:0;pointer-events:none;transition:opacity .2s}
.pp-mask.on{opacity:1;pointer-events:auto}
.pp-drawer{position:fixed;left:0;top:0;bottom:0;width:min(340px,88vw);background:var(--bg);z-index:960;
  transform:translateX(-105%);transition:transform .25s;overflow-y:auto;padding:18px 16px 30px;border-right:3px solid var(--line)}
.pp-drawer.on{transform:none}
.pp-drawer h3{font-size:18px;margin-bottom:4px}
.pp-drawer .pd-sub{font-size:12.5px;color:#7A6F5E;margin-bottom:12px}
.pp-drawer .pd-vol{font-size:13px;font-weight:800;color:#fff;border-radius:999px;padding:4px 12px;display:inline-block;margin:12px 0 6px}
.pp-drawer a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;text-decoration:none;
  color:var(--ink);font-size:14px;font-weight:700}
.pp-drawer a:hover{background:#fff}
.pp-drawer a.cur{background:var(--orange);color:#fff}
.pp-drawer a .st{margin-left:auto;font-size:12px;color:var(--yellow-d)}
.pp-drawer a.cur .st{color:#fff}

/* ============ 在线系统 · 用户条 / 登录注册 / 我的档案 / 排行榜 ============ */
.userbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:3px solid var(--line);
  border-radius:16px;padding:9px 16px;margin:12px 0 0;box-shadow:var(--shadow);font-size:14px;font-weight:700}
.userbar .ub-logo{font-weight:900;color:var(--blue-d);display:inline-flex;align-items:center;gap:6px;font-size:15px;text-decoration:none}
.userbar .ub-logo:hover{opacity:.8}
.userbar .ub-logo .ico{width:19px;height:19px}
.userbar .ub-user{color:#5C5344;display:inline-flex;align-items:center;gap:5px}
.userbar .ub-points{color:var(--orange-d);background:#FFEAD5;border-radius:999px;padding:3px 12px;display:inline-flex;align-items:center;gap:5px}
.userbar .ub-link{color:var(--blue-d);text-decoration:none;border:2px solid var(--line);border-radius:999px;padding:3px 12px;display:inline-flex;align-items:center;gap:5px;transition:transform .12s}
.userbar .ub-link:hover{transform:translateY(-2px);border-color:var(--blue)}
.userbar .ub-guest{color:#9A8F7B;font-size:13px}
.userbar .ub-form{display:inline;margin-left:auto}
.userbar .ub-btn{border:none;background:#F1E7CE;border-radius:999px;padding:4px 13px;font-weight:800;cursor:pointer;color:#7A6F5E;display:inline-flex;align-items:center;gap:4px}
.userbar .ub-btn:hover{background:#E8D9B5}

.auth-card{background:#fff;border:3px solid var(--line);border-radius:24px;padding:30px 28px;margin:26px auto;max-width:460px;box-shadow:var(--shadow)}
/* 注册/登录切换分段控件（同卡就地切换，不换页；无 JS 时两表单叠放） */
.seg{display:grid;grid-template-columns:1fr 1fr;background:#F6EDDC;border-radius:14px;padding:4px;gap:4px;margin:16px 0 6px}
.seg .seg-item{display:flex;justify-content:center;align-items:center;padding:9px 6px;border-radius:11px;font-weight:800;font-size:15px;color:#6B5E4A;border:none;background:none;font-family:inherit;cursor:pointer;transition:.15s}
.seg .seg-item:hover{color:var(--ink)}
.seg .seg-item.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(58,50,38,.14)}
.ac-fh{display:block;font-weight:900;font-size:13.5px;color:#9A8F7B;margin:2px 0 4px}
.auth-card.ac-js .ac-form{display:none}
.auth-card.ac-js .ac-form.on{display:block}
.ac-form + .ac-form{margin-top:12px;padding-top:12px;border-top:2.5px dashed var(--line)}
.auth-card.ac-js .ac-form + .ac-form{margin-top:0;padding-top:0;border-top:none}
/* 表态反馈（登录/注册错误等） */
.alert{display:flex;gap:9px;align-items:flex-start;background:#FDF0F0;border:2.5px solid #F2C4C4;color:#7A3030;border-radius:12px;padding:11px 13px;font-size:14px;font-weight:600;margin:12px 0 0;line-height:1.6}
.alert .ico{margin-top:2px}
.auth-card label{display:block;font-weight:800;font-size:14.5px;margin:13px 0}
.auth-card input{display:block;width:100%;margin-top:6px;padding:11px 14px;font-size:16px;border:2.5px solid var(--line);border-radius:12px;background:#FBF7EE;transition:border-color .15s,box-shadow .15s}
.auth-card input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,151,222,.16)}
.auth-card .btn{width:100%;justify-content:center;margin-top:18px}
/* 密码可见切换 */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;color:#8A7F6C;padding:7px;border-radius:9px;line-height:0}
.pw-eye:hover{color:var(--ink);background:#F1E7CE}
.pw-eye .ico{width:18px;height:18px}
.pw-eye .ico:last-child{display:none}
.pw-eye.off .ico:first-child{display:none}
.pw-eye.off .ico:last-child{display:inline}

.home-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.home-stats .hs{background:#fff;border:3px solid var(--line);border-radius:18px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.home-stats .lb{font-size:13px;color:#8A7F6C;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.home-stats .vl{font-size:24px;font-weight:900;color:var(--orange-d);font-variant-numeric:tabular-nums}

/* 档案页 hero 昵称：click-to-edit（平时显示态，点击展开编辑态） */
.ch-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ch-top .ch-no{margin-bottom:0}
.nick-line{display:inline-flex;align-items:center}
.nick-view{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:#5C5344}
.nick-view.unset{color:#B9AE99}
.nick-view[hidden],.nick-form[hidden]{display:none}
.nick-btn{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--line);background:#fff;border-radius:999px;
  padding:4px 11px;font-size:12.5px;font-weight:800;color:#5C5344;cursor:pointer;font-family:inherit;transition:transform .12s,border-color .12s,color .12s}
.nick-btn:hover{transform:translateY(-1px);border-color:var(--blue);color:var(--blue-d)}
.nick-form{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.nick-form input{width:220px;max-width:64vw;padding:6px 13px;font-size:13.5px;font-weight:700;border:2.5px solid var(--blue);border-radius:999px;background:#fff;font-family:inherit;color:var(--ink)}
.nick-form input:focus{outline:none;box-shadow:0 0 0 3px rgba(74,151,222,.16)}
.nick-cancel{border:none;background:none;padding:4px 6px;font-size:13px;font-weight:800;color:#9A8F7B;cursor:pointer;font-family:inherit}
.nick-cancel:hover{color:var(--ink)}
.nick-msg{font-size:12.5px;font-weight:800;color:var(--green-d)}
.nick-msg.bad{color:var(--red-d)}
.nick-msg{font-size:12.5px;font-weight:800;color:var(--green-d);flex-basis:100%}
.nick-msg.bad{color:var(--red-d)}

.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px}
.prog-item{display:flex;align-items:center;gap:9px;background:#FBF7EE;border:2.5px solid var(--line);border-radius:14px;
  padding:11px 14px;text-decoration:none;color:var(--ink);transition:transform .12s;flex-wrap:wrap}
.prog-item:hover{transform:translateY(-2px);border-color:var(--yellow-d)}
.prog-item .pi-deco{font-size:20px}
.prog-item .pi-t{font-weight:800;font-size:14px;flex:1;min-width:120px}
.prog-item .pi-stars{color:var(--yellow-d);letter-spacing:2px;font-size:15px}
.prog-item .pi-score{font-size:12px;color:#9A8F7B;font-weight:700;width:100%;padding-left:29px}

.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-row{display:flex;align-items:center;gap:14px;background:#FBF7EE;border:2.5px solid var(--line);border-radius:13px;padding:10px 16px;font-weight:800}
.rank-row .rk-no{width:36px;text-align:center;font-size:16px}
.rank-row .rk-name{flex:1}
.rank-row .rk-pts{color:var(--orange-d);display:inline-flex;align-items:center;gap:5px}
.rank-row.gold{background:#FFF6D9;border-color:#E8C34A}
.rank-row.silver{background:#F4F4F2;border-color:#C9C9C2}
.rank-row.bronze{background:#FBEFE3;border-color:#DCA96F}
.rank-row.me{box-shadow:0 0 0 3px rgba(74,151,222,.35)}

.userchip{margin-left:auto;font-size:13px;font-weight:700;color:#7A6F5E;background:#FBF7EE;border:2px solid var(--line);border-radius:999px;padding:4px 13px}
.userchip a{color:var(--blue-d);text-decoration:none;font-weight:800}
.userchip b{color:var(--orange-d)}

/* 密度分层排序小游戏：点击反馈样式（原先缺失，导致点击无任何变化） */
.match-grid{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.match-card{border:3px solid var(--line);background:#FBF7EE;color:var(--ink);border-radius:16px;
  padding:14px 18px;font-size:15px;font-weight:800;cursor:pointer;transition:transform .12s,background .2s,border-color .2s}
.match-card:hover{transform:translateY(-2px);border-color:#E8C34A}
.match-card.done{background:#2E7D43;color:#fff;border-color:#2E7D43}
.match-card.wrong{animation:shake .4s;border-color:#C94646;background:#FCE9E9}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ============ 响应式修复：移动端 / 窄屏适配 ============ */
@media (max-width:620px){
  /* 底部进度条：窄屏隐藏上一章/下一章入口（目录抽屉与页内 .chnav 已可跳转），
     避免 5 块内容挤在一行被压成空白省略号；预留高度随之减小 */
  .ppbar .pb-prev,.ppbar .pb-next{display:none}
  body.has-bar{padding-bottom:78px}
  /* 触摸目标放大：以下控件原高约 26~36px，低于移动端 44px 建议值 */
  .jienav{top:8px;padding:7px;gap:6px;border-radius:16px}
  .jienav button{min-width:92px;padding:10px 8px;font-size:14px;border-radius:12px}
  .jieprog{font-size:11.5px;padding:0 8px;flex-basis:auto}
  .jie-foot button{padding:9px 15px;font-size:13.5px}
  .toc-jump a{padding:8px 14px}
  .userbar .ub-link{padding:6px 13px}
  .btn.sm{padding:9px 15px;font-size:14px}
  select{padding:9px 12px;font-size:16px}
  /* 数据表（如 ch02 分贝等级表）：小屏收窄单元格，防止卡片内横向溢出 */
  table.data th,table.data td{min-width:0;padding:6px 9px}
}

/* ---------- 章节门禁（游客访问第 2 章起）：价值点 + 内嵌注册/登录卡，一页完成 ---------- */
.gate{max-width:800px;margin:34px auto 60px}
.gate-hero{text-align:center;margin-bottom:18px}
.gate-ico{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;background:#FFEAD5;color:var(--orange-d);border:3px solid var(--line);box-shadow:var(--shadow)}
.gate-ico .ico{width:30px;height:30px}
.gate-hero h1{font-size:26px;margin:14px 0 6px;color:var(--ink)}
.gate-sub{color:#5C5344;font-size:15px;max-width:540px;margin:0 auto;line-height:1.8}
.auth-wrap{display:grid;grid-template-columns:1fr 460px;gap:20px;align-items:start}
.gate .auth-card{margin:26px 0 0}
.gate-props{background:#fff;border:3px solid var(--line);border-radius:24px;padding:20px 22px 12px;box-shadow:var(--shadow);margin:26px 0 0}
.gp{display:flex;gap:13px;align-items:flex-start;padding:11px 0}
.gp-ico{flex:0 0 auto;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.gp-ico .ico{width:22px;height:22px}
.gp-orange{background:var(--yellow);color:#8A6100}
.gp-blue{background:#CFE6FB;color:#2C517A}
.gp-green{background:#D3F0DA;color:#2E5A3B}
.gp b{display:block;font-size:15px}
.gp small{color:#9A8F7B;font-weight:700;font-size:12.5px}
.gate-links{display:flex;flex-direction:column;gap:8px;margin:12px 0 2px}
.gate-try,.gate-home{display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:12px;font-weight:800;font-size:14px;text-decoration:none}
.gate-try{color:var(--blue-d);background:#F4F9FE;border:2px dashed #C4DCF4}
.gate-try:hover{border-color:var(--blue)}
.gate-home{color:#5C5344;background:#fff;border:2px dashed var(--line)}
.gate-home:hover{border-color:var(--orange)}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}}

/* ============ 用户中心（user/home.php）：档案卡 / KPI / 章节记录升级 ============ */

/* 红色危险按钮变体（重置进度） */
.btn.red{background:var(--red);box-shadow:0 4px 0 var(--red-d)}
.btn.red:active{box-shadow:0 1px 0 var(--red-d)}

/* 档案卡：首字母头像 + 信息列 */
.ch-hero.profile{display:flex;align-items:center;gap:20px}
.pfp{flex:0 0 auto;width:86px;height:86px;border-radius:26px;border:3px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:900;color:#fff;
  box-shadow:var(--shadow);text-shadow:0 2px 0 rgba(0,0,0,.14)}
.pinfo{flex:1;min-width:0}
.ch-hero.profile h1{margin:6px 0 6px}
.ch-hero.profile .sub{font-size:13.5px}
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.lvl-badge,.acct-chip,.rank-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;
  padding:4px 12px;border-radius:999px;border:2.5px solid var(--line);background:#fff;color:#7A6F5E}
.rank-chip{color:var(--orange-d)}
.lvl-badge .ico,.acct-chip .ico,.rank-chip .ico{width:14px;height:14px}
.lvl-badge.lv0{background:#F1E7CE;color:#8A8172}
.lvl-badge.lv1{background:#DFF3E6;color:var(--green-d)}
.lvl-badge.lv2{background:#E7F3FD;color:var(--blue-d)}
.lvl-badge.lv3{background:#F1E8FC;color:var(--purple-d)}
.lvl-badge.lv4{background:#FFEAD5;color:var(--orange-d)}
.lvl-badge.lv5{background:#FFF3C9;color:#A97B00;border-color:var(--yellow-d)}

/* KPI 卡：数值 + 迷你进度条 + 注释 */
.home-stats .hs{display:flex;flex-direction:column;align-items:center;gap:5px}
.home-stats .vl small{font-size:13px;font-weight:800;color:#B3A88F}
.kpi-bar{width:100%;height:10px;background:#F1E7CE;border-radius:999px;overflow:hidden}
.kpi-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--yellow),var(--orange))}
.kpi-note{font-size:11.5px;font-weight:700;color:#B3A88F}

/* 总进度横条 */
.overall-strip{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--line);
  border-radius:999px;padding:10px 18px;margin:0 0 18px;box-shadow:var(--shadow)}
.overall-strip .os-lb{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:800;color:#7A6F5E;white-space:nowrap}
.overall-bar{flex:1;height:12px;background:#F1E7CE;border-radius:999px;overflow:hidden}
.overall-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--yellow),var(--orange))}
.overall-strip .os-pc{font-size:15px;font-weight:900;color:var(--orange-d);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 章节记录卡：标题列 + 得分进度条 + 状态胶囊；"下一关"金边高亮 */
.block-head{flex-wrap:wrap}
.block-head .nextcta{margin-left:auto}
.alldone-chip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:#FFF3C9;color:#A97B00;
  border:2.5px solid var(--yellow-d);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:800}
.prog-item .pi-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.prog-item .pi-t{flex:0 0 auto;min-width:0}
.prog-item .pi-stars{font-size:13.5px}
.prog-item .pi-score{width:auto;padding-left:0}
.pi-bar{width:100%;height:8px;background:#EFE4CB;border-radius:999px;overflow:hidden}
.pi-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--yellow),var(--orange))}
.pi-pill{flex:0 0 auto;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;border:2px solid var(--line);background:#fff;color:#9A8F7B}
.pi-pill.blue{background:#E7F3FD;color:var(--blue-d);border-color:rgba(74,151,222,.4)}
.pi-pill.green{background:#DFF3E6;color:var(--green-d);border-color:rgba(83,185,107,.4)}
.pi-pill.gold{background:#FFF3C9;color:#A97B00;border-color:var(--yellow-d)}
.pi-pill.orange{background:#FFEAD5;color:var(--orange-d);border-color:rgba(224,112,42,.45)}
.prog-item.next{border-color:var(--yellow-d);background:#FFFBEF}

/* 危险区文案 */
.danger-note{color:#7A6F5E;font-size:15px}
.warn-text{color:var(--red-d)}

/* 窄屏：档案卡竖排居中，记录区标题行整行换行 */
@media (max-width:620px){
  .ch-hero.profile{flex-direction:column;text-align:center;gap:14px;padding:22px 18px}
  .ch-hero.profile .ch-top{justify-content:center}
  .ch-hero.profile .pmeta{justify-content:center}
  .block-head .nextcta,.alldone-chip{margin-left:0;flex-basis:100%;justify-content:center}
  .overall-strip{padding:9px 14px}
  .overall-strip .os-lb{font-size:12.5px}
  .home-stats .vl{font-size:22px}
}