:root{
  --bg:#F5F6F8;
  --card:#FFFFFF;
  --line:#E7E9ED;
  --line2:#F0F2F5;
  --t1:#1A1F27;
  --t2:#5B6472;
  --t3:#98A1AE;
  --blue:#185FA5;   --blue-bg:#E6F1FB;  --blue-bd:#B5D4F4;
  --teal:#0F6E56;   --teal-bg:#E1F5EE;  --teal-bd:#9FE1CB;
  --purple:#534AB7; --purple-bg:#EEEDFE;--purple-bd:#CECBF6;
  --amber:#854F0B;  --amber-bg:#FAEEDA; --amber-bd:#FAC775;
  --coral:#993C1D;  --coral-bg:#FAECE7; --coral-bd:#F5C4B3;
  --green:#3B6D11;  --green-bg:#EAF3DE; --green-bd:#C0DD97;
  --pink:#993556;   --pink-bg:#FBEAF0;  --pink-bd:#F4C0D1;
  --gray:#444441;   --gray-bg:#F1EFE8;  --gray-bd:#D3D1C7;
  --red:#A32D2D;    --red-bg:#FCEBEB;
  --r:14px;
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--t1);
  font:15px/1.62 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  overscroll-behavior-y:none;
}
#app{max-width:600px;margin:0 auto;min-height:100vh;background:var(--bg)}

/* ---------- top bar ---------- */
#topbar{
  position:sticky;top:0;z-index:30;height:52px;display:flex;align-items:center;gap:6px;
  padding:0 8px 0 6px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
  height:calc(52px + env(safe-area-inset-top));
}
.ttl{flex:1;font-size:16px;font-weight:500;letter-spacing:.2px;text-align:center}
.iconbtn{
  width:38px;height:38px;border:0;background:transparent;color:var(--t2);
  display:flex;align-items:center;justify-content:center;border-radius:10px;
}
.iconbtn:active{background:var(--line2)}

/* ---------- main ---------- */
#view{padding:14px 14px calc(84px + env(safe-area-inset-bottom))}
.sec{margin:0 0 12px}
.sec-h{
  display:flex;align-items:center;justify-content:space-between;
  margin:20px 2px 10px;font-size:13px;color:var(--t2);font-weight:500;letter-spacing:.3px;
}
.sec-h:first-child{margin-top:4px}

/* ---------- card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.card+.card{margin-top:10px}
.card.tight{padding:12px}
.tap{cursor:pointer}
.tap:active{background:var(--line2)}

/* ---------- text ---------- */
h1{font-size:17px;font-weight:500;margin:0 0 6px}
h2{font-size:15px;font-weight:500;margin:0 0 8px}
p{margin:0 0 8px}
.muted{color:var(--t2);font-size:13px}
.dim{color:var(--t3);font-size:12px}
.sm{font-size:13px}
.center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.b{font-weight:500}
.hl{color:var(--blue)}
.nowrap{white-space:nowrap}

/* ---------- 倒计时 ---------- */
.hero{
  background:linear-gradient(180deg,#EAF2FB 0%,#FFFFFF 78%);
  border:1px solid var(--blue-bd);border-radius:18px;padding:20px 18px;text-align:center;
  box-shadow:var(--sh);
}
.hero .lbl{font-size:13px;color:var(--blue);letter-spacing:.5px}
.hero .num{font-size:56px;line-height:1.05;font-weight:500;color:#0C447C;letter-spacing:-1px;margin:2px 0 2px;font-variant-numeric:tabular-nums}
.hero .num small{font-size:16px;font-weight:400;margin-left:4px;letter-spacing:0}
.hero .date{font-size:13px;color:var(--t2)}
.hero .bar{height:6px;border-radius:3px;background:#DCE6F2;overflow:hidden;margin:14px 0 8px}
.hero .bar i{display:block;height:100%;background:var(--blue);border-radius:3px;transition:width .4s}

/* ---------- 打卡 ---------- */
.ci{display:flex;align-items:center;gap:12px}
.ci .n{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
.btn{
  border:0;border-radius:11px;padding:11px 16px;font-size:15px;font-family:inherit;
  background:var(--blue);color:#fff;font-weight:500;
}
.btn:active{opacity:.85}
.btn.ghost{background:var(--blue-bg);color:var(--blue)}
.btn.line{background:#fff;color:var(--t1);border:1px solid var(--line)}
.btn.sm{padding:8px 13px;font-size:13.5px;border-radius:9px}
.btn.block{display:block;width:100%}
.btn.done{background:var(--green-bg);color:var(--green)}
.btn[disabled]{opacity:.45}

/* ---------- 统计格 ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 12px;text-align:center;box-shadow:var(--sh)}
.stat .v{font-size:21px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2}
.stat .k{font-size:12px;color:var(--t2);margin-top:3px}

/* ---------- 列表行 ---------- */
.row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line2)}
.row:last-child{border-bottom:0}
.row .g{flex:1;min-width:0}
.row .t{font-size:14.5px}
.row .s{font-size:12.5px;color:var(--t2);margin-top:2px}
.row .go{color:var(--t3);flex:none}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid var(--line);background:#fff;color:var(--t2);
  border-radius:999px;padding:6px 13px;font-size:13px;font-family:inherit;
}
.chip.on{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);font-weight:500}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;line-height:1.7}

/* ---------- 进度条 ---------- */
.track{height:7px;border-radius:4px;background:var(--line2);overflow:hidden}
.track i{display:block;height:100%;border-radius:4px;background:var(--blue)}

/* ---------- 搜索框 ---------- */
.input,textarea.input,select.input{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;
  padding:11px 13px;font-size:15px;font-family:inherit;color:var(--t1);outline:none;
}
.input:focus{border-color:var(--blue-bd);background:#FCFDFF}
textarea.input{resize:vertical;line-height:1.6}
label.f{display:block;font-size:12.5px;color:var(--t2);margin:10px 0 5px}
label.f:first-child{margin-top:0}

/* ---------- 知识地图 ---------- */
.kbd{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin-bottom:10px}
.kbd-h{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--line2)}
.dot{width:9px;height:9px;border-radius:3px;flex:none}
.kbd-b{padding:10px 14px 13px}
.pgrp{display:flex;gap:9px;padding:5px 0;align-items:baseline}
.pgrp .gl{flex:none;width:44px;font-size:11.5px;color:var(--t3)}
.pgrp .pl{flex:1;display:flex;flex-wrap:wrap;gap:6px}
.pchip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 9px;font-size:12.5px;color:var(--t1);font-family:inherit}
.pchip:active{background:var(--line2)}

.mxwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
table.mx{border-collapse:collapse;font-size:11.5px;white-space:nowrap}
table.mx th,table.mx td{border:1px solid var(--line2);padding:5px 7px;vertical-align:top}
table.mx th{background:#FAFBFC;color:var(--t2);font-weight:500;position:sticky;top:0}
table.mx td.first,table.mx th.first{position:sticky;left:0;background:#FAFBFC;z-index:2;font-weight:500}
table.mx td .c{display:block;border-radius:6px;padding:3px 6px;margin:2px 0}

/* ---------- 详情 ---------- */
.dl{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2)}
.dl:last-child{border-bottom:0}
.dl .k{flex:none;width:58px;font-size:12.5px;color:var(--t2);padding-top:2px}
.dl .v{flex:1}
.tagline{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--t1)}
.ul li{margin:3px 0}
.tipbox{background:var(--amber-bg);border:1px solid var(--amber-bd);border-radius:12px;padding:11px 13px;font-size:13.5px;color:#633806}

/* ---------- 答题 ---------- */
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qhead .prog{flex:1}
.qnum{font-size:12.5px;color:var(--t2);font-variant-numeric:tabular-nums;flex:none}
.qstem{font-size:16px;line-height:1.7;margin:6px 0 14px;white-space:pre-wrap}
.opt{
  display:flex;gap:11px;align-items:flex-start;padding:12px 13px;border:1px solid var(--line);
  border-radius:12px;background:#fff;margin-bottom:9px;font-size:14.5px;line-height:1.6;
}
.opt .ok{flex:none;width:22px;height:22px;border-radius:7px;border:1px solid var(--line);background:#FAFBFC;color:var(--t2);font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.opt.sel{border-color:var(--blue-bd);background:var(--blue-bg)}
.opt.sel .ok{background:var(--blue);border-color:var(--blue);color:#fff}
.opt.right{border-color:var(--teal-bd);background:var(--teal-bg)}
.opt.right .ok{background:var(--teal);border-color:var(--teal);color:#fff;border-radius:50%}
.opt.wrong{border-color:#F09595;background:var(--red-bg)}
.opt.wrong .ok{background:var(--red);border-color:var(--red);color:#fff}
.opt.dis{opacity:.95}
.expl{border-radius:12px;padding:13px 14px;font-size:13.5px;line-height:1.7;margin-top:4px}
.expl.ok{background:var(--teal-bg);color:#04342C;border:1px solid var(--teal-bd)}
.expl.no{background:var(--red-bg);color:#501313;border:1px solid #F7C1C1}
.expl .h{font-weight:500;margin-bottom:5px}
.refbox{background:#FAFBFC;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:13.5px;line-height:1.75;white-space:pre-wrap}
.selfbox{background:var(--gray-bg);border:1px solid var(--gray-bd);border-radius:12px;padding:12px;font-size:13.5px;color:#444441}
.actbar{
  position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:20;
  display:flex;gap:9px;margin-top:16px;
}
.actbar .btn{flex:1}

/* ---------- 公式卡 ---------- */
details.acc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;box-shadow:var(--sh)}
details.acc>summary{
  list-style:none;padding:13px 14px;font-size:14.5px;display:flex;align-items:center;gap:9px;
}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary:after{content:"›";margin-left:auto;color:var(--t3);transform:rotate(90deg);transition:transform .2s}
details.acc[open]>summary:after{transform:rotate(-90deg)}
details.acc .body{padding:0 14px 14px;border-top:1px solid var(--line2);padding-top:12px}
.fml{background:#FAFBFC;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:5px 0;color:#0C447C;overflow-x:auto;white-space:nowrap}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--t2)}
.kv .v{font-weight:500;font-variant-numeric:tabular-nums;text-align:right}

/* ---------- 结果 ---------- */
.score{text-align:center;padding:8px 0 4px}
.score .n{font-size:46px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}

/* ---------- 底栏 ---------- */#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  max-width:600px;margin:0 auto;
}
#tabbar button{
  flex:1;min-width:0;border:0;background:transparent;padding:7px 2px 8px;color:var(--t3);
  display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;
  font-family:inherit;white-space:nowrap;
}
#tabbar button.on{color:var(--blue)}
#tabbar svg{width:20px;height:20px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;
  background:rgba(26,31,39,.9);color:#fff;font-size:13.5px;padding:9px 16px;border-radius:10px;
  max-width:80%;text-align:center;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:601px){
  body{background:#EFF1F4}
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* ---------- 按节练习 ---------- */
.pchip .pn{display:inline-block;margin-left:5px;font-size:10.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.secb{background:#FAFCFF;border-color:#D6E6F7}
.sbh{display:flex;align-items:center;gap:10px}
.sbacc{font-size:21px;font-weight:500;font-variant-numeric:tabular-nums;flex:none}
.sbtr{margin-top:10px}
.sbmsg{margin-top:8px}
.secbar{
  display:flex;align-items:center;gap:8px;font-size:12.5px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin-bottom:10px;box-shadow:var(--sh);
}
.sechd{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:16px 2px 8px}
.sechd:first-child{margin-top:4px}
.srow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line2);cursor:pointer}
.srow:last-child{border-bottom:0}
.srow:active{background:var(--line2)}
.srow .sg{flex:1;min-width:0}
.srow .sg .t{font-size:14px;line-height:1.5}
.srow .sr{flex:none;text-align:right;min-width:54px}
.srow .sr .n{font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums}
.srow .sr .p{font-size:11.5px;margin-top:2px}
.notebar{
  background:var(--amber-bg);border:1px solid var(--amber-bd);border-radius:10px;
  padding:8px 11px;font-size:12.5px;color:#633806;margin-bottom:10px;line-height:1.6;
}

/* ---------- 我的课程 ---------- */
.crow{padding:10px 0;border-bottom:1px solid var(--line2)}
.crow:last-child{border-bottom:0}
select.input{appearance:auto;-webkit-appearance:auto}

/* ---------- 教材精讲：概览与目录 ---------- */
.lstat{display:flex;align-items:baseline;gap:7px}
.lnum{font-size:30px;font-weight:600;line-height:1.05;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.lof{font-size:14px;color:var(--t3)}
.lmuted{margin-left:auto;font-size:12.5px;color:var(--t2)}
.lgrp{padding:12px 14px 6px}
.lgrp .chd{margin-bottom:4px}
.lrow{display:flex;align-items:center;gap:9px;padding:9px 2px;border-top:1px solid var(--line2);border-radius:8px}
.lname.off{color:var(--t3)}
.ldot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.ldot.on{background:var(--green)}
.lname{flex:1;font-size:14px;line-height:1.45;min-width:0}
.lmeta{font-size:11.5px;color:var(--t3);flex:none;font-variant-numeric:tabular-nums}

/* ---------- 教材精讲：卡片通用 ---------- */
.chd{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.cdot{width:7px;height:7px;border-radius:50%;flex:none}
.sumbox{background:linear-gradient(180deg,#F7FBFF,#FFFFFF)}
.slist{margin:0;padding:0;list-style:none;counter-reset:sn}
.slist li{position:relative;padding-left:25px;margin:8px 0;font-size:14px;line-height:1.68}
.slist li:before{
  counter-increment:sn;content:counter(sn);position:absolute;left:0;top:3px;
  width:17px;height:17px;border-radius:50%;background:var(--blue-bg);color:var(--blue);
  font-size:10.5px;line-height:17px;text-align:center;font-weight:600;
}
.flist{display:flex;flex-direction:column;gap:9px}
.frow{display:flex;gap:9px;align-items:flex-start}
.flv{flex:none;font-size:11px;padding:2px 7px;border-radius:6px;line-height:1.65;font-weight:500}
.flv.p0{background:var(--red-bg);color:var(--red)}
.flv.p1{background:var(--blue-bg);color:var(--blue)}
.flv.p2{background:var(--amber-bg);color:var(--amber)}
.flv.p3{background:var(--gray-bg);color:var(--gray)}
.fv{font-size:13.5px;line-height:1.68;padding-top:1px}

/* ---------- 教材精讲：本节目录 ---------- */
.lhd{display:flex;align-items:center;gap:8px;font-size:14px}
.lhd-x{margin-left:auto;font-size:12.5px;color:var(--blue)}
.toc{display:flex;flex-direction:column;margin-top:10px;border-top:1px solid var(--line2);padding-top:4px}
.tocb{
  border:0;background:transparent;text-align:left;padding:9px 2px;font-family:inherit;
  font-size:13.5px;color:var(--t2);border-bottom:1px solid var(--line2);line-height:1.5;
}
.tocb:last-child{border-bottom:0}
.tocb:active{color:var(--blue)}

/* ---------- 教材精讲：正文排版 ---------- */
.lbody{padding:18px 16px}
.lh{font-size:15.5px;font-weight:600;color:var(--blue);margin:24px 0 11px;line-height:1.5}
.lbody>.lh:first-child{margin-top:0}
/* 教材原文的四级小标题（如「1. 立项管理文件」）：有字重、不进原文目录 */
.lsub{font-size:14.5px;font-weight:600;color:var(--t1);margin:16px 0 7px;line-height:1.6}
.lp{font-size:14.5px;line-height:1.8;color:var(--t1);margin:0 0 12px}

/* ---------- 教材原文的彩色标记（来自「三色笔记」的配色）----------
   标记由 build/mark-sanhe.py 写入 src/text，且只在教材原文里逐字找得到时才标。
   底色刻意压得很淡：原文里红标密度约 11%，太重会糊成一片反而读不下去。 */
.hl{border-radius:3px;padding:1px 2px;margin:0 -.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-r{background:#FFE6E6;color:#A81616}   /* 红 · 重点 */
.hl-g{background:#E2F6EA;color:#0C6A3C}   /* 绿 · 考过 */
.hl-b{background:#E4EFFB;color:#14538C}   /* 蓝 · 小标题 */
.ll .hl,.ltbl .hl{margin:0}
/* 原文页顶部的配色图例 */
.shlegend{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.shlegend i{font-style:normal;font-size:11.5px;padding:3px 8px;border-radius:20px;font-weight:500}
.ll{margin:0 0 13px;padding-left:21px;font-size:14px;line-height:1.78}
.ll li{margin:5px 0}
.ltbl{overflow-x:auto;margin:2px 0 15px;-webkit-overflow-scrolling:touch}
.ltbl table{width:100%;border-collapse:collapse;font-size:13px}
.ltbl th{background:var(--gray-bg);color:var(--t1);font-weight:600;text-align:left;padding:8px 10px;border:1px solid var(--line);line-height:1.55}
.ltbl td{padding:8px 10px;border:1px solid var(--line);line-height:1.62;vertical-align:top}
.ltbl tbody tr:nth-child(even) td{background:#FCFCFD}
.ltip{display:flex;gap:9px;align-items:flex-start;background:var(--amber-bg);border:1px solid var(--amber-bd);border-radius:11px;padding:11px 12px;margin:2px 0 15px}
.ltagt{flex:none;font-size:11px;background:var(--amber);color:#fff;border-radius:6px;padding:2px 7px;line-height:1.7}
.ltagv{font-size:13.5px;line-height:1.7;color:#633806}
.lkey{background:var(--blue-bg);border-left:3px solid var(--blue);border-radius:0 11px 11px 0;padding:12px 14px;margin:0 0 16px;font-size:14.5px;line-height:1.75;color:#0C447C}
.lq{margin:0 0 15px;padding:8px 0 8px 14px;border-left:3px solid var(--line);color:var(--t2);font-size:13.5px;line-height:1.72}
.ib{border:1px solid var(--ibd);border-radius:12px;padding:11px 12px;margin:0 0 10px;background:#fff}
.ibt{font-size:12px;font-weight:600;color:var(--ic);margin-bottom:8px}
.ibw{display:flex;flex-wrap:wrap;gap:6px}
.ibc{background:var(--ibg);color:var(--ic);border-radius:8px;padding:4px 9px;font-size:12.5px;line-height:1.6}

/* ---------- 讲义入口卡（知识地图 / 过程详情 / 章节要点 / 课程节） ---------- */
.lentry{display:flex;align-items:center;gap:10px}
.lentry.dis{opacity:.62}
.lentl{flex:1;min-width:0}
.lentgo{flex:none;font-size:13px;color:var(--blue);font-weight:500}
.lentry.dis .lentgo{color:var(--t3);font-weight:400}

/* ---------- 教材原版：状态与导入指引 ---------- */
.lnum.dim{color:var(--t3)}
.okstep{display:flex;gap:9px;align-items:flex-start;margin:9px 0;font-size:13.5px;line-height:1.62}
.okn{flex:none;width:18px;height:18px;border-radius:50%;background:var(--amber-bg);color:var(--amber);
  font-size:11px;line-height:18px;text-align:center;font-weight:600;margin-top:2px}
.okstep b{font-weight:600}
/* 原版层与精讲层共用的入口条，靠左侧色条区分两层 */
.lentry[data-act="oread"]{border-left:3px solid var(--amber)}
/* ===== 教材目录骨架：教材真实章 / 节 / 小节 + 页码 ===== */
.tbx .tnote{font-size:12.5px;color:var(--t3);line-height:1.6;margin:2px 0 10px}
.tbx .tsec,.tbx .tsub{display:flex;align-items:baseline;gap:8px;border-radius:7px}
.tbx .tsec{padding:7px 8px;border-top:1px solid var(--line2);font-size:13.5px}
.tbx .tsub{padding:4px 8px 4px 22px;font-size:12.5px}
.tbx .tno{flex:none;min-width:44px;font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.tbx .ttt{flex:1;color:var(--t2);line-height:1.5;word-break:break-word}
.tbx .tpg{flex:none;font-size:11.5px;color:var(--t3);font-variant-numeric:tabular-nums}
.tbx .tsub .tno{font-size:11.5px}
.tbx .tsub .ttt{color:var(--t3)}
.tbx .tsub .tpg{font-size:11px}
.tbx .cur{background:var(--blue-bg)}
.tbx .cur .ttt{color:var(--blue);font-weight:600}
.tbx .cur .tno,.tbx .cur .tpg{color:var(--blue)}

/* ===== 三色笔记：按页看彩色原版面 ===== */
.shbar .shhd{display:flex;align-items:baseline;gap:8px}
.shbar .shhd .b{font-size:14.5px}
.shbar .shhd .dim{margin-left:auto;font-size:12.5px;color:var(--t3);font-variant-numeric:tabular-nums;white-space:nowrap}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.grid3 .btn{padding:9px 4px;font-size:13px}
.shimg{padding:8px;overflow:hidden}
/* 宽度由档位变量驱动：1 = 整页（适应容器），1.9 / 2.7 = 放大后横向拖动查看。
   A4 整页缩到 344px 宽时正文只剩约 6px，放大是看清的唯一办法。 */
.shimg img{display:block;width:calc(100% * var(--z,1));max-width:none;height:auto;border-radius:8px;background:#fff}
.shimg.zoom{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 缩放档分段控件 */
.shzoom{display:flex;gap:0;margin-top:10px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.shzoom .shz{
  flex:1;min-width:0;border:0;background:#fff;color:var(--t2);font-family:inherit;
  padding:7px 4px 6px;font-size:12.5px;line-height:1.25;display:flex;flex-direction:column;align-items:center;gap:1px;
  border-left:1px solid var(--line);
}
.shzoom .shz:first-child{border-left:0}
.shzoom .shz small{font-size:10px;color:var(--t3);font-variant-numeric:tabular-nums}
.shzoom .shz.on{background:var(--blue-bg);color:var(--blue);font-weight:600}
.shzoom .shz.on small{color:var(--blue)}
/* 放大看：容器变成可横向滚动的 2 倍视窗，图片撑到 200% */
.shimg.zoom{overflow-x:auto;-webkit-overflow-scrolling:touch}
.shchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.shchip{border:1px solid var(--line);background:#fff;color:var(--t2);border-radius:999px;
  padding:6px 11px;font-size:12.5px;font-family:inherit;white-space:nowrap;line-height:1.2}
.shchip.on{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);font-weight:600}
.srow{display:flex;align-items:center;gap:9px;padding:10px 6px;border-top:1px solid var(--line2)}
.srow:first-child{border-top:0}
.srn{flex:none;width:22px;height:22px;border-radius:7px;background:var(--gray-bg);color:var(--t3);
  font-size:11.5px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.srt{flex:1;font-size:14px;color:var(--t1);line-height:1.45}
.srr{flex:none;font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}

/* ---------- 排课（驾驶舱） ---------- */
.sec-h .hsub{font-weight:400;color:var(--t3);font-size:11.5px;letter-spacing:0}
.psplit{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line2)}
.psplit i{display:block;height:100%}
.psplit .pa{background:var(--blue)}
.psplit .pb{background:var(--amber-bd)}
.plegend{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}
.pl{display:flex;gap:7px;align-items:flex-start;min-width:0}
.pl .pd{width:8px;height:8px;border-radius:2px;flex:none;margin-top:6px}
.pl .pg{min-width:0}
.pl .pt{font-size:13.5px;font-weight:500;line-height:1.35}
.pl .ps{font-size:11px;color:var(--t3);margin-top:2px;line-height:1.45}

.phead{display:flex;align-items:flex-start;gap:10px}
.pbig{font-size:30px;font-weight:500;line-height:1.06;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pbig small{font-size:13px;font-weight:400;color:var(--t2);margin-left:4px;letter-spacing:0}
.pmeta{font-size:11.5px;color:var(--t3);margin-top:3px}
.pstamp{flex:none;margin-left:auto;background:var(--blue-bg);color:var(--blue);font-size:12px;
  padding:3px 10px;border-radius:999px;white-space:nowrap}
.task{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line2)}
.task .tn{flex:none;width:20px;height:20px;border-radius:6px;background:var(--blue-bg);color:var(--blue);
  font-size:11.5px;display:flex;align-items:center;justify-content:center}
.task .tg{flex:1;min-width:0}
.task .tt{font-size:14px;line-height:1.4}
.task .ts{font-size:11px;color:var(--t3);margin-top:3px;line-height:1.45}
.task .btn{flex:none}

.prow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2)}
.prow:last-child{border-bottom:0}
.prow.on{background:var(--blue-bg);margin:0 -12px;padding:10px 12px;border-radius:9px;border-bottom:0}
.prow .pc{flex:none;width:22px;height:22px;border-radius:7px;background:var(--gray-bg);color:var(--t2);
  font-size:11.5px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.prow.on .pc{background:var(--blue);color:#fff}
.prow .pg{flex:1;min-width:0}
.prow .pt{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pnow{font-size:10.5px;color:var(--blue);margin-left:6px}
.prow .pr{flex:none;text-align:right;min-width:76px}
.prow .pn{font-size:13px;font-variant-numeric:tabular-nums}
.prow .pn small{font-size:10.5px;color:var(--t3)}
.prow .pk{font-size:10.5px;color:var(--t3);margin-top:2px;white-space:nowrap}

.crow{padding:12px 0;border-bottom:1px solid var(--line2)}
.crow:last-child{border-bottom:0}
.crow .ct{font-size:14px}
.crow .cs{font-size:11.5px;color:var(--t3);margin-top:3px;line-height:1.5}

/* ---------- 手机横屏 ----------
   竖屏时 A4 彩页缩到 344px 宽，正文只剩约 6px，必须靠放大档看；
   横屏视口宽约 844px，同一页适宽后约 14.8px —— 整页档就够读了。
   所以横屏要做的是「把宽度还给内容」：解开 #app 的 600px 限制、压矮上下两条栏。
   （注意：manifest 里的 orientation 必须不是 portrait，否则装到桌面后被系统锁竖屏，
   转屏根本不会触发这里 —— 这个坑已经踩过。） */
@media (orientation: landscape) and (max-height: 560px) {
  #app { max-width: none; }
  #topbar { height: 44px; }
  #view { padding: 10px 14px calc(60px + env(safe-area-inset-bottom)); }
  #tabbar { max-width: none; }
  /* 底栏由「上下排」改「左右排」，高度砍掉近一半，把纵向空间留给内容 */
  #tabbar button {
    flex-direction: row; gap: 5px; padding: 6px 2px; font-size: 11px;
    padding-left: max(2px, env(safe-area-inset-left));
    padding-right: max(2px, env(safe-area-inset-right));
  }
  #tabbar svg { width: 17px; height: 17px; }
  .toast { bottom: 68px; }
  /* 三色阅读页：横屏下三个档位按钮可以并排得更松快 */
  .shbar .shzoom { max-width: 420px; }
}

/* ---------- 手动横屏：应用内开关控制，不跟随手机方向自动转 ----------
   为什么不用 Screen Orientation API（screen.orientation.lock）：它只在「已安装 PWA + 全屏」下可用，
   在浏览器标签页里调用会直接抛错；而用户多数时候是从浏览器链接进来的，所以不能依赖它。
   改用「整块 UI 旋转 90°」：把 #app 宽高互换再旋转，视觉上就是横屏，浏览器里同样生效。
   --land-w / --land-h 由 JS 在切换时按真实视口写死，不直接用 100vh ——
   移动浏览器的 100vh 大于可视高度（地址栏占掉一截），直接用会把底部裁掉。 */
html.land, html.land body { overflow: hidden; height: 100%; }
html.land #app {
  position: fixed; top: 0; left: 0; margin: 0;
  width: var(--land-h, 100vh);   /* 旋转后看到的高度 = 原视口高 */
  height: var(--land-w, 100vw);  /* 旋转后看到的宽度 = 原视口宽 */
  max-width: none; min-height: 0;
  /* ⚠️ 这里只写 overflow-y，不要加 -webkit-overflow-scrolling: touch ——
     在无 GPU 的 headless 里它会强制建立合成滚动层，截图/渲染内容整片空白
     （几何全对、文字也在 DOM 里，就是画不出来），排障时极易误判。 */
  overflow-y: auto;
  /* 逆时针转 90°（rotate(-90deg)）：内容的「下」落到屏幕 +x，用户把手机顺时针转 90° 正好读正。
     平移值必须等于旋转前的元素高（--land-h），否则整块会跑到屏幕外。 */
  transform: translateY(var(--land-h, 100vh)) rotate(-90deg);
  transform-origin: top left;
}
/* 下面几条与「系统真横屏」那组保持同一观感：压矮上下两条栏，把宽度还给内容 */
html.land #topbar { height: 44px; padding-top: 0; }
html.land #view { padding: 10px 14px calc(60px + env(safe-area-inset-bottom)); }
html.land #tabbar { max-width: none; }
html.land #tabbar button {
  flex-direction: row; gap: 5px; padding: 6px 2px; font-size: 11px;
  padding-left: max(2px, env(safe-area-inset-left));
  padding-right: max(2px, env(safe-area-inset-right));
}
html.land #tabbar svg { width: 17px; height: 17px; }
html.land .toast { bottom: 68px; }
html.land .shbar .shzoom { max-width: 420px; }

/* 横屏开关：两种状态给不同底色，一眼看出当前在哪种模式 */
.landbtn {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  border: 1px solid var(--line); background: #fff; color: var(--t2);
  border-radius: 9px; padding: 6px 10px; font-size: 12px;
  font-family: inherit; line-height: 1;
}
.landbtn.on { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-bd); }
.landbtn svg { width: 15px; height: 15px; }
/* 横屏按钮靠右收在标题卡里（正文页/工具条），负外边距抵消 .tagline 的下边距 */
.rowend { display: flex; justify-content: flex-end; margin: -4px 0 0; }