/* 课堂笔记 —— 视觉
 *
 * 取向：安静的学习工具，不是后台管理面板。
 *   · 底色用暖中性灰（#faf9f7），不用冷灰 —— 长时间盯着字幕时眼睛舒服得多
 *   · 全局只有一个主强调色，重点/提问各用一条细色条区分，不靠大色块
 *   · 字幕是主要阅读面，给它最大的字号和行高；元信息一律退到次要层级
 *   · 图标全部内联 SVG，跟随 currentColor 变色（emoji 跨平台画风不统一）
 */

:root{
  /* 暖中性 */
  --bg:#faf9f7;  --surface:#fff;  --surface-2:#f4f2ef;
  --line:#e7e3dd;  --line-soft:#f0ece6;
  --ink:#1c1a17;  --ink-2:#4a453e;  --dim:#7d776d;  --faint:#a9a299;

  --accent:#4338ca;  --accent-ink:#fff;  --accent-soft:#eef0fd;  --accent-line:#c7cbf5;
  --key:#a15c00;     --key-soft:#fdf6e8;  --key-line:#e0a350;
  --ask:#0f6d64;     --ask-soft:#eaf6f4;  --ask-line:#7dc3ba;
  --live:#d4380d;    --ok:#0a7d55;  --warn:#a15c00;

  --r:14px; --r-sm:9px;
  --sh:0 1px 2px rgba(28,26,23,.05), 0 0 0 1px var(--line);
  --sh-up:0 6px 20px rgba(28,26,23,.10);
  --safe-b:env(safe-area-inset-bottom,0px);
  --tabs-h:58px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#14161c;  --surface:#1b1e26;  --surface-2:#232733;
  --line:#2c313d;  --line-soft:#242832;
  --ink:#e9e7e3;  --ink-2:#c3bfb8;  --dim:#928d85;  --faint:#6b675f;
  --accent:#8b95f7;  --accent-ink:#14161c;  --accent-soft:#1e2237;  --accent-line:#3a4170;
  --key:#e7b25f;   --key-soft:#2b2417;  --key-line:#6b5220;
  --ask:#6fc8bc;   --ask-soft:#152a29;  --ask-line:#2f5f59;
  --live:#f26c4a;  --ok:#4ec08e;  --warn:#e7b25f;
  --sh:0 1px 2px rgba(0,0,0,.35), 0 0 0 1px var(--line);
  --sh-up:0 8px 26px rgba(0,0,0,.45);
}}
:root[data-theme=dark]{
  --bg:#14161c;  --surface:#1b1e26;  --surface-2:#232733;
  --line:#2c313d;  --line-soft:#242832;
  --ink:#e9e7e3;  --ink-2:#c3bfb8;  --dim:#928d85;  --faint:#6b675f;
  --accent:#8b95f7;  --accent-ink:#14161c;  --accent-soft:#1e2237;  --accent-line:#3a4170;
  --key:#e7b25f;   --key-soft:#2b2417;  --key-line:#6b5220;
  --ask:#6fc8bc;   --ask-soft:#152a29;  --ask-line:#2f5f59;
  --live:#f26c4a;  --ok:#4ec08e;  --warn:#e7b25f;
  --sh:0 1px 2px rgba(0,0,0,.35), 0 0 0 1px var(--line);
  --sh-up:0 8px 26px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
/* .panel 用了 display:flex，会盖过 HTML 的 hidden 属性 */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 8px);
}
h1,h2{margin:0;font-weight:600}
p{margin:0}
svg{width:1em;height:1em;display:block;flex:none}

/* ─── 顶栏 ─── */
.bar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line-soft);
}
.bar h1{font-size:17px;letter-spacing:-.01em}
.grow{flex:1}
.chip{
  font-size:12px; padding:3.5px 10px; border-radius:99px;
  color:var(--dim); background:var(--surface-2); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.chip.live{color:#fff;background:var(--live)}
.chip.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.chip.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}

.lvl{display:flex;align-items:center;gap:7px}
.lvl-bar{width:56px;height:4px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.lvl-bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .08s linear}
.lvl.low .lvl-bar i{background:var(--live)}
.lvl-num{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:44px}

.wrap{max-width:1240px;margin:0 auto;padding:16px 18px 0}

/* ─── 按钮 ─── */
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:not-allowed}

.icon{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  color:var(--dim); font-size:18px; transition:background .15s,color .15s;
}
.icon:hover{background:var(--surface-2);color:var(--ink)}
.icon[aria-expanded=true]{background:var(--accent-soft);color:var(--accent)}

.primary{
  padding:11px 22px;border-radius:11px;background:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:15px;transition:filter .15s,transform .06s;
}
.primary:hover:not(:disabled){filter:brightness(1.1)}
.primary:active:not(:disabled){transform:translateY(1px)}
.primary:disabled{opacity:.4}

.ghost{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:9px;color:var(--ink-2);
  border:1px solid var(--line);background:var(--surface);
  font-size:14px;font-weight:500;transition:border-color .15s,color .15s,background .15s;
}
.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ghost.sm{padding:5px 10px;font-size:13px;gap:5px}
.ghost.danger:hover{border-color:var(--live);color:var(--live);background:color-mix(in srgb,var(--live) 8%,transparent)}

/* ─── 录制条 ─── */
.deck{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.deck-main{display:flex;align-items:center;gap:10px;padding:12px}
.deck-main>input{
  flex:1;min-width:0;border:0;background:none;color:var(--ink);
  font-size:17px;font-weight:500;padding:8px 6px;
}
.deck-main>input::placeholder{color:var(--faint);font-weight:400}
.deck-main>input:focus{outline:none}

/* 录制按钮：全页唯一的主角。录制中变红并呼吸，隔着教室一眼能确认在录。 */
.rec{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:11px 20px 11px 16px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:15px;
  transition:background .2s,filter .15s,transform .06s;
}
.rec:hover:not(:disabled){filter:brightness(1.1)}
.rec:active:not(:disabled){transform:translateY(1px)}
.rec-dot{width:9px;height:9px;border-radius:99px;background:currentColor;flex:none}
.rec.on{background:var(--live)}
.rec.on .rec-dot{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.rec:disabled{opacity:.45}

.drawer{border-top:1px solid var(--line-soft);padding:14px 12px 12px;background:var(--surface-2)}
.fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fields label{display:block;font-size:12px;color:var(--dim);font-weight:500}
.fields input,.fields select{
  width:100%;margin-top:5px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  font-size:16px;font-family:inherit;  /* 16px 防 iOS 聚焦时自动放大 */
}
.fields input:focus,.fields select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.drawer-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}
.hint{font-size:12.5px;color:var(--dim)}

/* ─── 面板 ─── */
.cols{display:grid;gap:14px;grid-template-columns:1.45fr 1fr;margin-top:14px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.side{display:grid;gap:14px}
.panel{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden;display:flex;flex-direction:column;min-height:0}
.panel+.panel{margin-top:14px}
.panel-h{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.panel-h h2{font-size:14px;color:var(--ink)}
.panel-h .n{margin-left:auto;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.panel-b{padding:6px 16px 16px}
.scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tall{max-height:62vh;min-height:220px}
.mid{max-height:30vh;min-height:110px}
@media(max-width:900px){.tall{max-height:54vh}.mid{max-height:36vh}}

.blank{padding:34px 12px;text-align:center;color:var(--dim);font-size:13.5px;line-height:1.85}
.blank-t{font-size:15px;color:var(--ink-2);font-weight:600;margin-bottom:6px}
.blank b{color:var(--key)}

/* ─── 字幕：整页最主要的阅读面，字号行高都给足 ─── */
.line{display:flex;align-items:flex-start;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
/* flex 默认 align-items:stretch 会把时间戳和说话人标签拉成和整段一样高的竖条，
   多行字幕时特别难看 */
.line:last-child{border-bottom:0}
.ts{
  flex:none;align-self:flex-start;width:40px;padding-top:3px;
  font:11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--faint);font-variant-numeric:tabular-nums;cursor:pointer;
}
.ts:hover{color:var(--accent)}
/* 说话人做成细标签，不用实心色块——满屏色块很吵 */
.who{
  flex:none;align-self:flex-start;margin-top:2px;font-size:11px;font-weight:600;
  padding:1.5px 7px;border-radius:6px;
  color:var(--dim);background:var(--surface-2);
}
.who.teacher{color:var(--accent);background:var(--accent-soft)}
.who.student{color:var(--ask);background:var(--ask-soft)}
.tx{flex:1;min-width:0;font-size:15.5px;line-height:1.75;word-break:break-word;overflow-wrap:anywhere}

/* 重点：左侧一条琥珀细杠 + 极淡底色。原来整段黄色高亮像浏览器查找结果 */
.line.key{background:var(--key-soft);border-radius:8px;
  margin:4px -10px;padding:9px 10px 9px 12px;border-bottom:0;
  box-shadow:inset 3px 0 0 var(--key-line)}
.line.key+.line{border-top:1px solid var(--line-soft)}
.line.key .tx{color:var(--ink);font-weight:500}
/* 被过滤的闲话：淡掉即可，删除线难读 */
.line.noise{opacity:.4}
.line.noise .tx{color:var(--dim)}
/* 临时字幕：还在说，稍后会更正 */
.line.partial{border-bottom:0}
.line.partial .tx{color:var(--dim)}
.line.partial .ts,.line.partial .who{animation:breathe 1.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.3}50%{opacity:1}}

/* ─── 笔记 ─── */
.note{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.note:last-child{border-bottom:0}
.note b{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}
.note span{color:var(--ink-2);font-size:13.5px;line-height:1.7}

/* ─── 提问 ─── */
.q{margin:11px 0;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--ask-soft);box-shadow:inset 3px 0 0 var(--ask-line)}
.q:first-child{margin-top:4px}
.qt{font-weight:600;font-size:14.5px;line-height:1.6}
.at{margin-left:7px;font-size:11px;font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
details{margin-top:7px}
summary{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none;
  font-size:13px;font-weight:600;color:var(--ask);list-style:none;padding:2px 0;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:0;height:0;flex:none;
  border:4px solid transparent;border-left-color:currentColor;
  transition:transform .18s;transform-origin:2px 50%}
details[open] summary::before{transform:rotate(90deg)}
.ans{margin-top:8px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--ask-line) 40%,transparent);
  font-size:14.5px;line-height:1.75;color:var(--ink)}
.ans.pending{color:var(--dim);font-style:italic}

/* ─── 搜题 ─── */
.drop{
  display:grid;place-items:center;gap:4px;
  padding:48px 22px;border-radius:var(--r);text-align:center;
  border:1.5px dashed var(--line);background:var(--surface);color:var(--dim);
  cursor:pointer;transition:border-color .16s,background .16s,color .16s;
}
.drop:hover,.drop.over,.drop:focus-visible{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent);outline:none}
.drop-ico{font-size:34px;margin-bottom:10px;opacity:.75}
.drop-t{font-size:17px;font-weight:600;color:var(--ink)}
.drop:hover .drop-t,.drop.over .drop-t{color:var(--accent)}
.drop-s{font-size:13px;line-height:1.8}

/* 多图时排成一条，一道大题跨页就拍两张 */
.shots{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}
.shot{position:relative;flex:1 1 200px;max-width:320px}
.shot img{width:100%;height:170px;object-fit:contain;border-radius:var(--r);
  background:var(--surface-2);box-shadow:var(--sh);display:block}
.shot .idx{position:absolute;left:8px;top:8px;font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:6px;background:var(--ink);color:var(--bg);opacity:.75}
.icon.on-img{position:absolute;top:6px;right:6px;width:30px;height:30px;font-size:15px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(8px);box-shadow:var(--sh)}

/* 搜过的题 */
.sh-item{display:flex;gap:11px;align-items:center;width:100%;text-align:left;
  padding:9px 0;border-bottom:1px solid var(--line-soft)}
.sh-item:last-child{border-bottom:0}
.sh-item:hover .sh-q{color:var(--accent)}
.sh-thumb{flex:none;width:46px;height:46px;border-radius:8px;object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line)}
.sh-body{flex:1;min-width:0}
.sh-q{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-m{font-size:12px;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums}

.solve-bar{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.solve-bar input{
  flex:1;min-width:190px;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:16px;font-family:inherit}
.solve-bar input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}

.sol{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-top:12px}
.sol .qnum{font-size:11.5px;font-weight:600;color:var(--dim);letter-spacing:.03em}
.sol .qtext{font-weight:600;font-size:15.5px;line-height:1.65;margin:5px 0 12px}
.answer{background:var(--accent-soft);border-radius:var(--r-sm);
  box-shadow:inset 3px 0 0 var(--accent-line);padding:12px 14px}
.answer b{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;
  color:var(--accent);margin-bottom:4px}
.answer div{font-size:15.5px;line-height:1.7}
.warnbox{margin-top:10px;padding:10px 13px;border-radius:var(--r-sm);
  background:var(--key-soft);color:var(--key);font-size:13px;line-height:1.7;
  box-shadow:inset 3px 0 0 var(--key-line)}
.warnbox b{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;margin-bottom:2px;opacity:.85}

/* ─── 历史 ─── */
.hist-bar{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.item{
  display:block;width:100%;text-align:left;
  background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);
  padding:14px 16px;margin-bottom:10px;transition:box-shadow .16s,transform .08s;
}
.item:hover{box-shadow:0 2px 6px rgba(28,26,23,.08),0 0 0 1px var(--accent-line);transform:translateY(-1px)}
.item-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px;font-weight:600}
.item-m{margin-top:5px;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;
  color:var(--dim);background:var(--surface-2)}
.badge.done{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.badge.running{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.badge.failed{color:var(--live);background:color-mix(in srgb,var(--live) 13%,transparent)}
audio{width:100%;margin-top:12px}

/* ─── Markdown ─── */
.md{font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.md h2{font-size:14.5px;color:var(--ink);margin:20px 0 8px;padding-bottom:6px;
  border-bottom:1px solid var(--line-soft)}
.md h2:first-child{margin-top:4px}
.md h3{font-size:14px;color:var(--ink);margin:14px 0 5px}
.md ul{margin:6px 0;padding-left:19px}
.md li{margin:4px 0}
.md li::marker{color:var(--faint)}
.md p{margin:7px 0}
.md strong{color:var(--ink);font-weight:600}
.md code{background:var(--surface-2);padding:1px 6px;border-radius:5px;font-size:13px}

/* ─── 底部标签栏 ─── */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  height:calc(var(--tabs-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-top:1px solid var(--line-soft);
}
.tabs button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--faint);font-size:11px;font-weight:500;transition:color .15s;
}
.tabs button svg{font-size:21px}
.tabs button.on{color:var(--accent)}
.tabs button:hover{color:var(--ink-2)}
.tabs button.on:hover{color:var(--accent)}

/* ─── 提示条 ─── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabs-h) + var(--safe-b) + 16px);
  transform:translateX(-50%);z-index:90;max-width:min(92vw,420px);
  background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:12px;box-shadow:var(--sh-up);
  font-size:14px;line-height:1.6;text-align:center;
}
.toast b{font-weight:600}
.spin{display:inline-block;width:12px;height:12px;vertical-align:-1px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:99px;
  animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media(max-width:520px){
  .wrap{padding:14px 14px 0}
  .bar{padding:11px 14px}
  .fields{grid-template-columns:1fr}
  .deck-main{flex-wrap:wrap}
  .deck-main>input{flex:1 0 100%;order:-1;font-size:18px}
  .rec{flex:1}
  .drop{padding:38px 18px}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ══════════════════════════════════════════════════════════════
   整屏布局：主要位置留给 Live transcript / Questions / Notes
   ══════════════════════════════════════════════════════════════
   原来是普通文档流，课程输入条和摘要卡各占一段，三个主面板被挤到
   下半屏，手机上还要滚动才能看到 Notes。改成整页 flex：头尾固定，
   中间那块全部给三个面板，页面本身不再滚动，只有面板内部滚。 */
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100dvh}
.wrap{flex:1;display:flex;flex-direction:column;min-height:0;
      padding-bottom:0;width:100%}
.wrap>section{min-height:0}
/* 整屏的两个视图（上课、课本）。写 display:flex 会盖掉 hidden 属性自带的
   display:none，所以必须补一条 [hidden] 规则，否则切走的视图还会占着位置。 */
#viewLive,#viewBook{display:flex;flex-direction:column;min-height:0;flex:1}
#viewLive{gap:14px}
#viewLive[hidden],#viewBook[hidden]{display:none}
.deck{flex:none}

@media(min-width:760px){
  .cols{flex:1;min-height:0;margin-top:0;align-items:stretch}
  .side{min-height:0;grid-template-rows:1fr 1fr}
  .cols .panel{min-height:0}
  /* 面板内部滚动，高度由 flex 分配，不再用写死的 vh */
  .cols .panel-b.scroll{flex:1;min-height:0;max-height:none}
  #summaryCard{flex:none;max-height:30vh}
  #summaryCard .panel-b{overflow-y:auto}
}
/* 手机上竖着排，写死高度反而更好用——三块都看得见，滑动也自然 */
@media(max-width:759px){
  .wrap{overflow-y:auto}
  #viewLive{flex:none}
}

/* ══════════ 课本：书架 ══════════ */
.book-search{display:flex;align-items:center;gap:10px;background:var(--surface);
  border-radius:var(--r);box-shadow:var(--sh);padding:11px 14px;margin-bottom:14px}
.bs-ico{width:18px;height:18px;flex:none;color:var(--faint)}
.book-search input{flex:1;background:none;border:0;color:var(--ink);font:inherit;font-size:15px}
.book-search input:focus{outline:none}
.book-search input::placeholder{color:var(--faint)}

#shelf{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
#shelf[hidden]{display:none}
.shelf-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.bk{display:flex;flex-direction:column;gap:3px;text-align:left;padding:15px 16px;
  background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);
  transition:transform .12s,box-shadow .12s}
.bk:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.14)}
.bk:disabled{opacity:.5;transform:none;box-shadow:var(--sh);cursor:not-allowed}
.bk-n{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
.bk-m{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.bk-m i{font-style:normal;color:var(--key)}

#bookHits{margin-bottom:14px}
.hit{display:block;width:100%;text-align:left;padding:11px 14px;border-radius:10px;
  background:var(--surface);box-shadow:var(--sh);margin-bottom:7px}
.hit:hover{background:var(--surface-2)}
.hit-h{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--dim);margin-bottom:3px}
.hit-h b{color:var(--ink-2);font-size:12.5px}
.hit-s{font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.hit-s mark{background:color-mix(in srgb,var(--key) 26%,transparent);color:var(--ink);
  border-radius:3px;padding:0 2px}

/* ══════════ 课本：阅读器 ══════════ */
#reader{display:flex;flex-direction:column;flex:1;min-height:0}
.reader-bar{display:flex;align-items:center;gap:8px;padding:0 0 10px}
.bk-title{font-size:14.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}
.bk-page{width:56px;text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);font:inherit;font-size:13px;padding:6px 4px;
  font-variant-numeric:tabular-nums}
.bk-page:focus{outline:none;border-color:var(--accent)}
.bk-of{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:38px}

/* stage 本身不滚：它只是定位容器，工具条和字幕浮在上面。
   真正滚动的是里面的 .stage-scroll——原来两件事合在一个元素上，
   放大之后一往下滚，左上角的工具条就跟着内容滚出可视区了。 */
.stage{position:relative;flex:1;min-height:0;background:var(--surface-2);
  border-radius:var(--r);overflow:hidden}
.stage-scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;
  display:flex;align-items:flex-start;justify-content:center;padding:14px;
  -webkit-overflow-scrolling:touch}
/* 尺寸由 book.js 的 fit() 算好写进 style，这里不设 max-width：
   让 CSS 去缩放的话，笔迹画布的像素尺寸对不上图片，画出来是糊的。 */
.page-wrap{position:relative;line-height:0;flex:none;margin:auto;
  box-shadow:0 2px 18px rgba(0,0,0,.18);border-radius:3px;overflow:hidden;background:#fff}
/* 用 margin:auto 居中，不用 align-items:center——后者在内容比容器高时
   （放大后）会把顶部裁掉且滚不上去，这是 flex 的老毛病。 */
.page-wrap img{display:block;user-select:none;-webkit-user-drag:none}
/* 对开：两页并排。竖着的书页配横着的窗口，单页无论怎么放大都只占中间
   一条，两边永远空着——两页并排才把宽度真正用起来。 */
.spread{display:flex;gap:10px;margin:auto;align-items:flex-start}
/* 图还没到：按页面比例先把位置撑开，再显示"第 N 页"。
   原来这里是一片纯白，看起来跟坏了一样。 */
.pw-load{position:absolute;inset:0;display:none;place-items:center;
  font-size:13px;color:var(--faint);background:var(--surface-2);
  background-image:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  background-size:220px 100%;background-repeat:no-repeat;
  animation:pwsh 1.5s linear infinite}
@keyframes pwsh{0%{background-position:-220px 0}100%{background-position:calc(100% + 220px) 0}}
.page-wrap.loading .pw-load{display:grid}
.page-wrap.failed .pw-load{display:grid;animation:none;background-image:none}
.spread .page-wrap{margin:0}
#bkSpread.on{background:var(--accent);color:#fff}
.zoom{display:flex;align-items:center;gap:1px;margin-left:6px;
  background:var(--surface);border-radius:9px;padding:2px}
.zoom .icon{width:28px;height:28px;font-size:15px}
.zoom-lbl{font-size:11.5px;color:var(--dim);min-width:38px;text-align:center;
  font-variant-numeric:tabular-nums}
@media(max-width:759px){.zoom{display:none}}
.page-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.page-wrap canvas.ghost{pointer-events:none}
/* 画笔模式下禁掉浏览器自己的滚动/缩放手势，否则一笔下去页面跟着跑 */
.stage.drawing .stage-scroll{overflow:hidden}
.stage.drawing .page-wrap canvas{cursor:crosshair}

/* 左上角工具条 */
/* 工具栏整条竖着放在左上。高度必须受限并允许内部滚动：
   笔记本和 iPad 分屏时可视区只有六百来像素，不限的话撤销和清除会被挤出屏幕。 */
.tools{position:absolute;top:18px;left:18px;z-index:3;
  max-height:calc(100% - 36px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:3px;align-items:center;padding:6px 5px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.tools button{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  color:var(--dim);transition:background .13s,color .13s}
.tools button svg{width:18px;height:18px}
.tools button:hover{background:var(--surface-2);color:var(--ink-2)}
.tools button.on{background:var(--accent);color:#fff}
.tool-sep{width:22px;height:1px;background:var(--line);margin:3px 0;flex:none}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:1px 0;flex:none}
.sw{width:14px;height:14px;border-radius:50%;cursor:pointer;
  box-shadow:0 0 0 2px var(--surface),0 0 0 2px transparent;transition:box-shadow .12s}
.sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ink)}
/* 粗细用三档圆点而不是滑块：滑块在这个宽度里只有 34px，手指根本按不准 */
.sizes{display:flex;align-items:center;justify-content:center;gap:5px;height:18px;flex:none}
.sizes button{display:grid;place-items:center;width:12px;height:20px;padding:0}
.sizes i{display:block;border-radius:50%;background:var(--faint);transition:background .12s}
.sizes button.on i{background:var(--ink)}
.ink-state{font-size:9.5px;color:var(--faint);letter-spacing:.02em;height:11px}

/* 左下角字幕 */
/* 左下角，但要避开左上角那条工具栏——屏幕矮的时候（笔记本、iPad 横屏
   开着分屏）两者会叠在一起。往右让出一个工具栏的宽度就永远不会撞。 */
.cap{position:absolute;left:112px;bottom:20px;z-index:3;max-width:min(340px,44vw);
  text-align:left;padding:11px 14px;border-radius:14px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,.2);transition:transform .12s}
.cap:hover{transform:translateY(-2px)}
.cap-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.cap-dot{width:6px;height:6px;border-radius:50%;background:var(--rec);
  animation:pulse 1.6s ease-in-out infinite}
.cap-text{display:block;font-size:13.5px;line-height:1.65;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cap-go{display:block;margin-top:6px;font-size:11px;color:var(--accent)}

/* 圈选后的提问面板 */
.ask{position:absolute;right:22px;bottom:22px;z-index:4;width:min(400px,calc(100vw - 44px));
  max-height:min(62vh,540px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.3)}
.ask-h{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--line-soft)}
.ask-h b{font-size:12.5px;font-weight:500;color:var(--dim);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ask-in{display:flex;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.ask-in input{flex:1;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;color:var(--ink);font:inherit;font-size:13.5px}
.ask-in input:focus{outline:none;border-color:var(--accent)}
.ask-b{padding:13px 15px;overflow-y:auto;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.ask-b h4{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);margin:14px 0 5px;font-weight:600}
.ask-b h4:first-child{margin-top:0}
.ask-b .ans{font-size:14.5px;color:var(--ink);line-height:1.7}
.ask-b .src{display:block;width:100%;text-align:left;font-size:12.5px;color:var(--accent);
  padding:5px 0}
.ask-b .src:hover{text-decoration:underline}
.ask-b .beyond{font-size:12.5px;color:var(--dim);border-left:2px solid var(--line);
  padding-left:10px;margin-top:6px}

@media(max-width:759px){
  /* 手机端只看书，不做批注——屏幕太小，画出来的东西自己都认不清 */
  .tools{display:none}
  .cap{left:14px;bottom:14px;max-width:calc(100vw - 28px)}   /* 手机上没有工具栏 */
  .ask{right:14px;left:14px;bottom:14px;width:auto}
  .bk-title{max-width:38vw}
}

/* 未授权时的提示。挡住整屏——这台设备还没拿到 Cookie，什么都做不了，
   与其让人一个个功能去试然后收到一串 401，不如直接说清楚怎么办。 */
.authwall{position:fixed;inset:0;z-index:99;display:grid;place-items:center;padding:24px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.aw-box{max-width:400px;text-align:center;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--sh);padding:26px 24px;font-size:13.5px;line-height:1.8;color:var(--dim)}
.aw-t{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:9px}

/* 第二遍精修把某行的文字换成更准的版本时，轻微高亮一下。
   不加提示的话文字无声无息地变了，人会以为自己看错了。 */
@keyframes just-fixed{from{background:color-mix(in srgb,var(--accent) 22%,transparent)}to{background:transparent}}
.tx.just-fixed{animation:just-fixed 1.1s ease-out;border-radius:4px}