/* 专升本·计算机基础 通用样式(教材风格:顶栏+左侧全书目录+正文+右侧本页目录) */
:root{
  --bg:#ffffff; --bg2:#f5f7f8; --card:#ffffff; --ink:#2b3036; --muted:#6a737d; --line:#e4e8eb;
  --brand:#0e9a8d; --brand-ink:#0a7a70; --brand-soft:#e4f5f3;
  --accent:#7c5cf0;
  --ok:#168a4a; --ok-soft:#e5f6ec; --bad:#d6343a; --bad-soft:#fdecec;
  --warn:#a86300; --warn-soft:#fff5e0;
  --edge:#1f9d74; --edge-soft:#e0f5ec; --core:#e0701a; --core-soft:#fff0e0;
  --c1:#2f6fed; --c2:#7c5cf0; --c3:#e0701a; --c4:#0e9a8d; --c5:#d6409f;
  --shadow:0 1px 3px rgba(20,30,40,.08);
  --code:#f1f3f5;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1b1f27; --bg2:#222732; --card:#222732; --ink:#dfe3ea; --muted:#99a2b0; --line:#323946;
    --brand:#35c9ba; --brand-ink:#5fe0d2; --brand-soft:#173b3a; --accent:#a48bff;
    --ok:#4cd08a; --ok-soft:#173226; --bad:#ff7378; --bad-soft:#3b2024;
    --warn:#ffb54d; --warn-soft:#3a2f17;
    --edge:#3fd2a2; --edge-soft:#17362c; --core:#ff9a4d; --core-soft:#3d2b19;
    --c1:#6e93ff; --c2:#a48bff; --c3:#ff9a4d; --c4:#35c9ba; --c5:#ff7bc4;
    --shadow:0 1px 3px rgba(0,0,0,.4); --code:#161a22;
  }
}
:root[data-theme="dark"]{
  --bg:#1b1f27; --bg2:#222732; --card:#222732; --ink:#dfe3ea; --muted:#99a2b0; --line:#323946;
  --brand:#35c9ba; --brand-ink:#5fe0d2; --brand-soft:#173b3a; --accent:#a48bff;
  --ok:#4cd08a; --ok-soft:#173226; --bad:#ff7378; --bad-soft:#3b2024;
  --warn:#ffb54d; --warn-soft:#3a2f17;
  --edge:#3fd2a2; --edge-soft:#17362c; --core:#ff9a4d; --core-soft:#3d2b19;
  --c1:#6e93ff; --c2:#a48bff; --c3:#ff9a4d; --c4:#35c9ba; --c5:#ff7bc4;
  --shadow:0 1px 3px rgba(0,0,0,.4); --code:#161a22;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.85 "Noto Sans SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.4;margin:0;font-weight:700}
p{margin:.7em 0}
ul{padding-left:1.4em}
code,.mono{font-family:Consolas,"Cascadia Mono",monospace;background:var(--code);padding:1px 6px;border-radius:4px;font-size:.9em}

/* ===== 顶栏 ===== */
.hd{position:fixed;top:0;left:0;right:0;height:56px;z-index:100;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px}
.hd .logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:17px;text-decoration:none!important}
.hd .logo i{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#17b3a3,#0a7a70);color:#fff;display:grid;place-items:center;font-style:normal;font-size:16px}
.hd .grow{flex:1}
.hd .burger{display:none;border:0;background:none;color:var(--ink);font-size:22px;cursor:pointer;padding:4px 6px}
.hd .iconbtn{border:0;background:none;color:var(--muted);cursor:pointer;font-size:18px;width:36px;height:36px;border-radius:8px}
.hd .iconbtn:hover{background:var(--bg2);color:var(--ink)}
.hd .rd{position:absolute;left:0;bottom:-1px;height:2px;background:var(--brand);width:0}
.search{position:relative;width:min(320px,34vw)}
.search input{width:100%;height:36px;border:0;border-radius:10px;background:var(--bg2);color:var(--ink);padding:0 54px 0 36px;font:inherit;font-size:14px;outline:none}
.search input:focus{box-shadow:0 0 0 2px var(--brand)}
.search .sicon{position:absolute;left:11px;top:9px;color:var(--muted);font-size:14px}
.search kbd{position:absolute;right:9px;top:8px;font:11px/18px Consolas,monospace;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--muted);background:var(--bg)}
.sres{position:absolute;top:44px;left:0;right:0;min-width:320px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);max-height:60vh;overflow:auto;padding:6px;z-index:120}
.sres a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none!important;font-size:14px;line-height:1.5}
.sres a:hover,.sres a.hl{background:var(--brand-soft)}
.sres a b{display:block;color:var(--brand-ink);font-size:13px}
.sres a span{color:var(--muted);font-size:13px}
.sres .none{padding:12px;color:var(--muted);font-size:14px}

/* ===== 布局 ===== */
.shell{display:grid;grid-template-columns:292px minmax(0,1fr) 236px;max-width:1460px;margin:0 auto;padding-top:56px}
.sb{position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto;padding:16px 12px 40px 20px;font-size:14.5px}
.sb::-webkit-scrollbar,.rt::-webkit-scrollbar{width:6px}.sb::-webkit-scrollbar-thumb,.rt::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.sb-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--ink);text-decoration:none!important;cursor:pointer;line-height:1.5}
.sb-item:hover{background:var(--bg2)}
.sb-item svg{width:18px;height:18px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sb-item .chev{margin-left:auto;color:var(--muted);transition:.2s;font-size:16px}
.sb-item.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.sb-item.on svg{stroke:var(--brand)}
.sb-item.dis{color:var(--muted);cursor:default}.sb-item.dis:hover{background:none}
.sb-item em{margin-left:auto;white-space:nowrap;font-style:normal;font-size:11px;border:1px solid var(--line);border-radius:6px;padding:0 6px;color:var(--muted)}
.ch.open>.sb-item .chev{transform:rotate(90deg)}
.subs{display:none;margin:2px 0 8px 18px;padding-left:8px;border-left:1px solid var(--line)}
.ch.open .subs{display:block}
.subs a{display:block;padding:4px 10px;border-radius:8px;color:var(--muted);text-decoration:none!important;font-size:13.5px;line-height:1.5}
.subs a:hover{color:var(--ink);background:var(--bg2)}
.subs a.act{color:var(--brand-ink);background:var(--brand-soft);font-weight:600}
.main{padding:30px 44px 70px;min-width:0}
.doc{max-width:790px;margin:0 auto}
.rt{position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto;padding:30px 12px 40px 8px;font-size:13.5px}
.rt .rt-t{font-weight:700;color:var(--ink);margin:0 0 8px 10px;font-size:13px;display:flex;align-items:center;gap:6px}
.rt a{display:block;padding:3px 10px;border-left:2px solid var(--line);color:var(--muted);text-decoration:none!important;line-height:1.55;margin:0}
.rt a.l3{padding-left:22px;font-size:13px}
.rt a:hover{color:var(--ink)}
.rt a.act{color:var(--brand-ink);border-left-color:var(--brand);font-weight:600}
.scrim{display:none}
@media (max-width:1200px){.shell{grid-template-columns:292px minmax(0,1fr)}.rt{display:none}}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .hd .burger{display:block}.hd .logo span{display:none}.search{width:auto;flex:1}.search kbd{display:none}
  .sb{position:fixed;left:0;top:56px;bottom:0;width:290px;height:auto;background:var(--bg);z-index:90;transform:translateX(-102%);transition:.25s;box-shadow:4px 0 20px rgba(0,0,0,.2)}
  .sb.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,.35);z-index:80}
  .main{padding:22px 16px 60px}
}

/* ===== 正文 ===== */
.doc h1{font-size:clamp(28px,4vw,38px);margin-bottom:6px;letter-spacing:.01em}
.doc>h1+.sub{color:var(--muted);margin:0 0 18px}
section.sec{padding-top:34px;margin-top:20px;border-top:1px solid var(--line)}
.sec>h2{font-size:28px;display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.sec>h2 .no{color:var(--brand);font-weight:800;font-variant-numeric:tabular-nums}
.sec>h2 .tag{font-size:12px;font-weight:400}
.sec h3{font-size:20px;margin:34px 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sec h3::before{content:"";width:5px;height:20px;border-radius:3px;background:var(--brand);flex:none}
.lead{color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:12px 0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:12px 0}
.card{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--bg2)}
.card p{margin:.4em 0}
.card h4{font-size:16px;margin-bottom:2px}
.card.edge{background:var(--edge-soft);border-color:transparent}
.card.core{background:var(--core-soft);border-color:transparent}
.card.blue{background:var(--brand-soft);border-color:transparent}
.card.ok{background:var(--ok-soft);border-color:transparent}
.card.bad{background:var(--bad-soft);border-color:transparent}

/* 提示框(Material admonition 风格) */
.callout{border-left:4px solid var(--brand);border-radius:0 10px 10px 0;padding:10px 16px 10px 14px;margin:16px 0;display:flex;gap:10px;align-items:flex-start;background:var(--brand-soft)}
.callout .ic{font-size:17px;line-height:1.85}
.callout>div{min-width:0}
.callout.key{border-left-color:#f0a020;background:var(--warn-soft)}
.callout.tip{border-left-color:var(--brand);background:var(--brand-soft)}
.callout.warn{border-left-color:var(--bad);background:var(--bad-soft)}
.callout.abstract{border-left-color:var(--c1);background:color-mix(in srgb,var(--c1) 9%,var(--bg))}
.callout b.lbl{white-space:nowrap}
.kp{display:inline-block;background:var(--warn-soft);color:var(--warn);border-radius:6px;padding:0 8px;font-size:12px;font-weight:700;vertical-align:middle;line-height:22px;border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.tag{display:inline-block;border-radius:6px;padding:0 8px;font-size:12px;background:var(--brand-soft);color:var(--brand-ink)}
mark{background:color-mix(in srgb,#f5c542 40%,transparent);color:inherit;padding:0 3px;border-radius:3px}

table.t{width:100%;border-collapse:collapse;font-size:14.5px;margin:12px 0}
table.t th,table.t td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top;line-height:1.7}
table.t th{background:var(--bg2);font-weight:700}
.tablewrap{overflow-x:auto}
.formula{background:var(--bg2);border-radius:10px;padding:10px 14px;margin:12px 0;font-size:17px;text-align:center;overflow-x:auto;line-height:1.9}
.formula small{color:var(--muted);font-size:13px;display:block;line-height:1.6}

/* ===== 图解/动画(figure) ===== */
.widget{border:1px solid var(--line);border-radius:14px;padding:0 16px 14px;margin:20px 0;background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.widget>.wtitle{margin:0 -16px 12px;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--line);font-weight:600;font-size:14px;color:var(--ink)}
.widget>.wtitle::before{content:"▶";color:var(--brand);font-size:11px;margin-right:8px}
.widget svg{width:100%;height:auto;display:block}
.ctrl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:10px 0 4px}
.ctrl label{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctrl output{font-weight:700;color:var(--ink);min-width:5em;display:inline-block}
.btn{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:5px 14px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;transition:.15s;line-height:1.6}
.btn:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{filter:brightness(1.07);color:#fff}
.btn.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
input[type=range]{accent-color:var(--brand);width:min(260px,60vw)}
.readout{background:var(--bg2);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;padding:8px 14px;font-size:14.5px;margin-top:10px;line-height:1.75}
.readout b{color:var(--brand-ink)}
.stat{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.stat>div{flex:1 1 150px;background:var(--bg2);border-radius:10px;padding:6px 12px}
.stat small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.stat strong{font-size:18px}
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chiprow span{padding:1px 12px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;background:var(--bg);transition:.2s}
.chiprow span.act{background:var(--brand);color:#fff;border-color:var(--brand)}

/* SVG 通用 */
svg text{font-family:inherit;fill:var(--ink)}
.s-line{stroke:var(--muted);stroke-width:2;fill:none}
.s-host{fill:var(--edge-soft);stroke:var(--edge);stroke-width:2}
.s-router{fill:var(--core-soft);stroke:var(--core);stroke-width:2}
.s-cloud{fill:var(--brand-soft);stroke:var(--brand);stroke-width:1.8}
.s-muted{fill:var(--muted)!important;font-size:12px}
.flow{stroke-dasharray:6 6;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-12}}
.flow.rev{animation-direction:reverse}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* ===== 练习题 ===== */
.q{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0;background:var(--bg)}
.q .qh{font-weight:600;margin-bottom:8px;line-height:1.7}
.q .src{font-size:12px;color:var(--muted);margin-left:8px;font-weight:400;border:1px solid var(--line);border-radius:6px;padding:0 6px}
.opts{display:grid;gap:7px}
.opt{text-align:left;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:7px 12px;cursor:pointer;font:inherit;font-size:15px;line-height:1.6}
.opt:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt:disabled{cursor:default;color:var(--ink)}
.explain{display:none;margin-top:10px;background:var(--bg2);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;padding:8px 14px;font-size:14.5px;line-height:1.75}
.explain.show{display:block}
.blank{display:inline-block;width:8.2em;max-width:100%;border:0;border-bottom:2px solid var(--brand);background:var(--brand-soft);color:var(--ink);font:inherit;padding:1px 6px;margin:0 3px;border-radius:5px 5px 0 0;text-align:center}
.blank.right{border-bottom-color:var(--ok);background:var(--ok-soft)}
.blank.wrong{border-bottom-color:var(--bad);background:var(--bad-soft)}
.numin{border:1.5px solid var(--line);border-radius:8px;padding:4px 10px;font:inherit;width:9em;background:var(--bg);color:var(--ink)}
.numin.right{border-color:var(--ok);background:var(--ok-soft)}.numin.wrong{border-color:var(--bad);background:var(--bad-soft)}
.scorebar{position:sticky;top:64px;z-index:20;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;box-shadow:var(--shadow)}
.progress{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--brand);transition:width .3s}
.scorebar .progress{flex:1;min-width:120px}
.badge{display:inline-block;border-radius:6px;padding:0 8px;font-size:12px;margin-left:6px}
.cheat li{margin:6px 0}
details.ans>summary{cursor:pointer;color:var(--brand-ink);font-weight:600;margin-top:6px}

/* 上一章/下一章 */
.pn{max-width:790px;margin:56px auto 0;display:flex;gap:14px;padding-top:24px;border-top:1px solid var(--line)}
.pn a,.pn span{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 16px;color:var(--ink);text-decoration:none!important;line-height:1.5}
.pn a:hover{border-color:var(--brand);background:var(--brand-soft)}
.pn small{display:block;color:var(--muted);font-size:12px}
.pn .nx{text-align:right}.pn .dis{color:var(--muted);background:var(--bg2)}
.flash{animation:flash 1.6s ease}
@keyframes flash{0%,60%{background:color-mix(in srgb,#f5c542 45%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* 名词提示 */
.term{border-bottom:1.5px dotted var(--brand);cursor:help;outline:none}
.term:hover,.term:focus{background:var(--brand-soft)}
.tip:not(.callout){position:fixed;z-index:200;max-width:min(340px,92vw);background:var(--ink);color:var(--bg);border-radius:10px;padding:9px 13px;font-size:13.5px;line-height:1.65;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none}
.tip:not(.callout) b{display:block;margin-bottom:2px;color:#7ee8dc}
:root[data-theme="dark"] .tip:not(.callout) b,:root:not([data-theme="light"]) .tip:not(.callout) b{color:var(--brand)}
.kpref{display:inline-block;font-size:12px;font-weight:400;margin-left:8px;border-radius:6px;padding:0 8px;background:var(--brand-soft);color:var(--brand-ink)!important;text-decoration:none!important}
.kpref:hover{background:var(--brand);color:#fff!important}
.glossbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0}
.glossbox>div{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--bg2)}
.glossbox>div>b:first-child{color:var(--brand-ink);display:block;font-size:15.5px}
.glossbox p{margin:.2em 0;font-size:14.5px;line-height:1.7}

/* ===== 打印 / 导出 PDF ===== */
.pnote{background:var(--warn-soft);border-left:4px solid #f0a020;padding:8px 14px;border-radius:0 8px 8px 0;font-size:14px}
.pq{margin:10px 0;padding:8px 0;border-bottom:1px dashed var(--line)}
.pqh{font-weight:600;line-height:1.7}.pqh .src{font-size:11px;color:var(--muted);margin-left:8px;border:1px solid var(--line);border-radius:5px;padding:0 5px;font-weight:400}
.pqh .kpref{font-size:11px;margin-left:6px;border-radius:5px;padding:0 6px;background:var(--brand-soft);color:var(--brand-ink)}
.pqo{margin:4px 0 0 22px;line-height:1.75;font-size:15px}
.pblank{display:inline-block;min-width:6em;border-bottom:1.5px solid var(--ink);margin:0 4px}
.pline{margin:6px 0 0 22px}.pwork{height:46px}.pwork.tall{height:90px}
.pans .pa{margin:6px 0;line-height:1.75;font-size:14.5px;padding-left:2px}.pans .pnum{color:var(--brand-ink);margin-right:2px}
.pbreak{break-before:page}.ansh{font-size:22px}
@media print{
  @page{size:A4;margin:11mm 10mm}
  html{font-size:13.5px}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tip:not(.callout),.hd,.sb,.rt,.scrim,.pn,.ctrl,.tabs,.scorebar,button,.btn{display:none!important}
  .shell{display:block!important;padding-top:0!important;max-width:none}
  .main{padding:0!important}.doc{max-width:none!important}
  section.sec{margin-top:6px;padding-top:14px}
  .widget,.card,.callout,.pq,.glossbox>div,.stat>div{break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid}
  .sec>h2{font-size:23px}
  .widget{box-shadow:none}
  .widget>.wtitle::after{content:"  (交互动画,PDF 中为静态示意)";color:var(--muted);font-weight:400;font-size:11.5px}
  .tablewrap{overflow:visible}
  .term{border-bottom:1px dotted var(--brand)}
  .widget .readout{font-size:13px}
  a{color:inherit}
}