/* ============================================================
   SciFly 设计系统
   深色为默认主题；浅色可切换并记忆在本地
   ============================================================ */

:root[data-theme="dark"] {
  --bg: #0d1014; --bg2: #141920; --bg3: #1b222c; --bg4: #232c38;
  --line: rgba(255,255,255,.085); --line2: rgba(255,255,255,.16);
  --tx: #e7ebf0; --tx2: #98a3b2; --tx3: #68737f;
  --acc: #5b8def; --acc-bg: rgba(91,141,239,.14); --acc-tx: #9cc0ff;
  --paper: #f7f6f2; --paper-tx: #2b2b28;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --warn: #e0a854; --danger: #e2726f; --ok: #4ecfa0;
  --ai: #8b5cf6; --ai-tx: #b9a6ff; --ai-bg: rgba(139,92,246,.14);
}
:root[data-theme="light"] {
  --bg: #f2f3f5; --bg2: #ffffff; --bg3: #f7f8fa; --bg4: #eceef2;
  --line: rgba(0,0,0,.09); --line2: rgba(0,0,0,.18);
  --tx: #1a1d21; --tx2: #5d6672; --tx3: #8b939e;
  --acc: #2f6fd0; --acc-bg: rgba(47,111,208,.1); --acc-tx: #1f5cb8;
  --paper: #ffffff; --paper-tx: #242424;
  --shadow: 0 10px 28px rgba(20,30,50,.14);
  --warn: #a86a12; --danger: #c0392b; --ok: #1a8a63;
  --ai: #7c4ce0; --ai-tx: #6d3fd4; --ai-bg: rgba(124,76,224,.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--tx); overflow: hidden;
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--acc-tx); text-decoration: none; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------- 应用外壳 ---------------------------- */

.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.navbar {
  height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 12px;
  padding: 0 14px; background: linear-gradient(180deg, var(--bg3), var(--bg2));
  border-bottom: 1px solid var(--line); z-index: 60; position: relative;
}
.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.brand .mark {
  width: 25px; height: 25px; border-radius: 7px; flex: 0 0 25px;
  background: linear-gradient(140deg, #5b8def, #8b5cf6); display: flex;
  align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 700;
}
.crumb { display: flex; align-items: center; gap: 2px; font-size: 13.5px; min-width: 0; overflow: hidden; }
.crumb .seg {
  padding: 4px 8px; border-radius: 7px; color: var(--tx2); transition: .14s;
  white-space: nowrap; max-width: 290px; overflow: hidden; text-overflow: ellipsis;
}
.crumb .seg.link { cursor: pointer; }
.crumb .seg.link:hover { background: var(--bg4); color: var(--tx); }
.crumb .seg.cur { color: var(--tx); font-weight: 600; max-width: 340px; }
.crumb .sep { color: var(--tx3); font-size: 12px; flex: 0 0 auto; user-select: none; }
.spacer { flex: 1; }
.nav-ics { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.icbtn {
  width: 33px; height: 33px; border-radius: 9px; border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center; color: var(--tx2); transition: .15s;
}
.icbtn:hover { background: var(--bg4); color: var(--tx); border-color: var(--line); }
.icbtn.ai { color: var(--ai-tx); }
.icbtn.ai:hover { background: var(--ai-bg); border-color: rgba(139,92,246,.3); }
.avatar {
  width: 31px; height: 31px; border-radius: 50%; flex: 0 0 31px;
  background: linear-gradient(140deg, #5b8def, #8b5cf6); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.avatarmenu {
  position: absolute; top: 48px; right: 12px; width: 232px; background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow);
  padding: 6px; z-index: 120; display: none;
}
.avatarmenu.on { display: block; }
.avatarmenu .who { padding: 9px 11px 10px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.avatarmenu .who .n { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.avatarmenu .who .e { font-size: 11.5px; color: var(--tx3); margin-top: 2px; word-break: break-all; }
.avatarmenu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px;
  border-radius: 8px; font-size: 13px; color: var(--tx2); text-align: left; transition: .14s;
}
.avatarmenu button:hover { background: var(--bg4); color: var(--tx); }
.avatarmenu button.dg { color: var(--danger); }
.role-tag {
  font-size: 9.5px; background: rgba(224,168,84,.16); color: var(--warn);
  border: 1px solid rgba(224,168,84,.3); border-radius: 5px; padding: 1px 5px;
}
.role-tag.user { background: var(--bg4); color: var(--tx3); border-color: var(--line); }
.role-tag.member { background: var(--acc-bg); color: var(--acc-tx); border-color: rgba(91,141,239,.3); }
.role-tag.super { background: var(--ai-bg); color: var(--ai-tx); border-color: rgba(139,92,246,.3); }

.stage { flex: 1; overflow: hidden; position: relative; }
.screen { display: none; height: 100%; overflow: auto; }
.screen.on { display: block; }
.screen.flex.on { display: flex; }
.scroll-pad { padding: 26px 32px 60px; max-width: 1340px; margin: 0 auto; }

/* ---------------------------- 通用零件 ---------------------------- */

.card { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; }
.muted { color: var(--tx2); }
.dim { color: var(--tx3); }
.h1 { font-size: 22px; font-weight: 600; letter-spacing: .2px; }
.h2 { font-size: 15px; font-weight: 600; }
.h3 { font-size: 13px; font-weight: 600; }
.sec-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tx3); font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg3); font-size: 13px; transition: .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--line2); background: var(--bg4); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(140deg, #4f83e8, #6d5ce0); border-color: transparent; color: #fff; font-weight: 500; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.ai { background: var(--ai-bg); border-color: rgba(139,92,246,.32); color: var(--ai-tx); }
.btn.ai:hover { background: rgba(139,92,246,.22); }
.btn.dg { color: var(--danger); border-color: rgba(226,114,111,.3); }
.btn.dg:hover { background: rgba(226,114,111,.12); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg4); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px;
  font-size: 12px; border: 1px solid var(--line); background: var(--bg3); color: var(--tx2);
}
.chip.acc { background: var(--acc-bg); color: var(--acc-tx); border-color: rgba(91,141,239,.3); }
.chip.home { background: rgba(224,168,84,.14); color: var(--warn); border-color: rgba(224,168,84,.3); }
.chip.click { cursor: pointer; }
.chip.click:hover { border-color: var(--line2); color: var(--tx); }
.row { display: flex; align-items: center; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; }
.wrap { flex-wrap: wrap; }

input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], textarea, select {
  width: 100%; background: var(--bg3); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; outline: none; transition: .15s; font-size: 13px;
}
input:focus, textarea:focus, select:focus { border-color: var(--acc); background: var(--bg2); }
textarea { resize: vertical; line-height: 1.65; }
.track { height: 4px; border-radius: 4px; background: var(--bg4); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4f83e8, #8b5cf6); }
kbd {
  font: 11px ui-monospace, Menlo, monospace; background: var(--bg4); border: 1px solid var(--line2);
  border-radius: 4px; padding: 1px 5px; color: var(--tx2);
}
mark { background: rgba(91,141,239,.22); color: var(--acc-tx); border-radius: 3px; padding: 0 2px; }
code { font: 12px ui-monospace, Menlo, monospace; background: var(--bg4); padding: 1px 5px; border-radius: 4px; }
.empty { text-align: center; padding: 46px 20px; color: var(--tx3); font-size: 13px; line-height: 1.9; }
.empty .big { font-size: 30px; opacity: .5; margin-bottom: 10px; }
.skeleton { background: linear-gradient(90deg, var(--bg3), var(--bg4), var(--bg3)); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------------------------- L0 认证页 ---------------------------- */

.authwrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
:root[data-theme="dark"] .authwrap {
  background:
    radial-gradient(900px 520px at 22% 12%, rgba(91,141,239,.18), transparent 62%),
    radial-gradient(760px 460px at 82% 82%, rgba(139,92,246,.16), transparent 60%);
}
.authbox {
  width: 396px; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px;
  padding: 32px 32px 26px; box-shadow: var(--shadow);
}
.authbox .lg { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.authbox .lg .mark {
  width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg, #5b8def, #8b5cf6);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px;
}
.authbox .lg .t { font-size: 18px; font-weight: 600; }
.authbox .lg .s { font-size: 11.5px; color: var(--tx3); margin-top: 1px; }
.aseg { display: flex; background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 20px; }
.aseg button { flex: 1; padding: 7px; border-radius: 7px; font-size: 13px; color: var(--tx2); transition: .15s; }
.aseg button.on { background: var(--bg2); color: var(--tx); font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.fld { margin-bottom: 13px; }
.fld label { display: block; font-size: 11.5px; color: var(--tx3); margin-bottom: 5px; letter-spacing: .2px; }
.authfoot { font-size: 11.5px; color: var(--tx3); text-align: center; margin-top: 16px; line-height: 1.8; }
.formmsg { font-size: 12.5px; border-radius: 9px; padding: 9px 12px; margin-bottom: 13px; line-height: 1.6; display: none; }
.formmsg.on { display: block; }
.formmsg.err { background: rgba(226,114,111,.12); color: var(--danger); border: 1px solid rgba(226,114,111,.28); }
.formmsg.ok { background: rgba(78,207,160,.1); color: var(--ok); border: 1px solid rgba(78,207,160,.26); }

/* --------------------------- L1 项目列表 --------------------------- */

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pcard {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 17px;
  cursor: pointer; transition: .18s; position: relative; overflow: hidden;
}
.pcard:hover { transform: translateY(-2px); border-color: var(--line2); box-shadow: var(--shadow); }
.pcard:before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--pc, var(--acc)); opacity: .85; }
.pcard h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.pcard p { font-size: 12.5px; color: var(--tx2); min-height: 34px; line-height: 1.5; }
.pstats { display: flex; gap: 13px; font-size: 12px; color: var(--tx3); margin: 12px 0 10px; flex-wrap: wrap; }
.pstats b { color: var(--tx); font-weight: 600; }
.newcard {
  border: 1px dashed var(--line2); background: transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; color: var(--tx3); min-height: 180px;
}
.newcard:hover { color: var(--acc-tx); border-color: var(--acc); background: var(--acc-bg); }
.recentrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; cursor: pointer; transition: .13s; }
.recentrow:hover { background: var(--bg3); }

/* --------------------------- L2 工作台 --------------------------- */

/* ★ flex:1 + min-width:0 不能删：父级 .screen.flex 是 row 容器，缺了整块工作台会退化成
   内容宽度（窄条）。与 .reader 是同一个坑。 */
.work { flex: 1; min-width: 0; display: flex; height: 100%; overflow: hidden; }
/* 项目工作台左栏。同样不写死 px —— 理由见 .rleft 上面那段说明。 */
.wnav {
  flex: 0 0 auto; width: clamp(244px, 27%, 316px); border-right: 1px solid var(--line); background: var(--bg2);
  display: flex; flex-direction: column; overflow: hidden;
}
.wnav .hd { padding: 14px 14px 11px; border-bottom: 1px solid var(--line); }
.wnav .body { flex: 1; overflow: auto; padding: 10px; }
.wnav .sect { margin-bottom: 16px; }
.wnav .sect > .sl {
  font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tx3);
  font-weight: 700; padding: 4px 8px 6px;
}
.nitem {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  font-size: 13px; color: var(--tx2); cursor: pointer; transition: .13s; border: 1px solid transparent;
}
.nitem:hover { background: var(--bg3); color: var(--tx); }
.nitem.on { background: var(--acc-bg); color: var(--acc-tx); border-color: rgba(91,141,239,.26); }
.nitem .cnt { margin-left: auto; font-size: 11px; color: var(--tx3); }
.homeblock {
  border: 1px solid var(--line2); border-left: 3px solid var(--warn); border-radius: 10px;
  background: linear-gradient(100deg, rgba(224,168,84,.09), transparent 70%);
  padding: 10px 11px; cursor: pointer; transition: .15s; margin-bottom: 5px;
}
.homeblock:hover { border-color: var(--warn); background: linear-gradient(100deg, rgba(224,168,84,.16), transparent 70%); }
.homeblock .tt { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 3px; display: flex; gap: 6px; align-items: baseline; }
.homeblock .tt .star { color: var(--warn); font-size: 12px; }
.homeblock .ss { font-size: 11px; color: var(--tx3); }
.homesub {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 18px; font-size: 12px;
  color: var(--tx3); cursor: pointer; border-radius: 7px; transition: .13s;
}
.homesub:hover { background: var(--bg3); color: var(--tx2); }
.atnode { position: relative; }
.atrow {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px;
  cursor: pointer; transition: .13s; border: 1px solid transparent;
}
.atrow:hover { background: var(--bg3); }
.atrow.on { background: var(--acc-bg); border-color: rgba(91,141,239,.26); }
.atrow .caret { width: 13px; flex: 0 0 13px; color: var(--tx3); font-size: 9px; text-align: center; transition: .15s; }
.atrow .caret.op { transform: rotate(90deg); }
.atrow .tt { font-size: 12.5px; line-height: 1.45; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atrow .mt { font-size: 10.5px; color: var(--tx3); flex: 0 0 auto; }
.atsub { margin-left: 19px; padding-left: 9px; border-left: 1px solid var(--line); }
.atrow.sub .tt { color: var(--tx2); font-size: 12.2px; }
.atrow .kindic { font-size: 11px; flex: 0 0 auto; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.wmain { flex: 1; overflow: auto; padding: 26px 30px 70px; min-width: 0; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin: 18px 0 24px; }
.metric { background: var(--bg3); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.metric .v { font-size: 24px; font-weight: 600; letter-spacing: -.5px; margin-top: 3px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th {
  text-align: left; padding: 9px 12px; color: var(--tx3); font-weight: 500; font-size: 11px;
  letter-spacing: .5px; border-bottom: 1px solid var(--line2); background: var(--bg3); white-space: nowrap;
}
table.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover td { background: var(--bg4); }
.tag { font-size: 11px; color: var(--tx3); background: var(--bg4); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }

/* --------------------------- L3 阅读器 --------------------------- */

/* ★ flex:1 + min-width:0 这两条不能删。父级 .screen.flex 是 flex 容器，
   少了它们，.reader 的宽度会退化成「由内容决定」；而 PDF 画布的宽度又是
   JS 读 .canvas.clientWidth 反推的 —— 两边互相依赖，结果是
   内容越窄 → 容器越窄 → 内容更窄，整块阅读器往左塌成一条细带。 */
.reader { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.atabs {
  height: 41px; flex: 0 0 41px; display: flex; align-items: center; gap: 3px; padding: 0 12px;
  background: var(--bg2); border-bottom: 1px solid var(--line); overflow-x: auto;
}
.atabs::-webkit-scrollbar { height: 0; }
.atab {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 11px; border-radius: 8px;
  font-size: 12.5px; color: var(--tx2); white-space: nowrap; transition: .14s; border: 1px solid transparent;
}
.atab:hover { background: var(--bg4); color: var(--tx); }
.atab.on { background: var(--acc-bg); color: var(--acc-tx); border-color: rgba(91,141,239,.3); }
.atab .x { color: var(--tx3); font-size: 13px; line-height: 1; padding: 0 1px; }
.atab .x:hover { color: var(--danger); }
.atab.add { border: 1px dashed var(--line2); color: var(--tx3); padding: 5px 9px; }
.atab.add:hover { border-color: var(--acc); color: var(--acc-tx); }
.rbar { height: 47px; flex: 0 0 47px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.toolgrp { display: flex; gap: 2px; background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.toolgrp button {
  height: 27px; min-width: 30px; padding: 0 6px; border-radius: 7px; color: var(--tx3);
  display: flex; align-items: center; justify-content: center; transition: .13s; font-size: 12px;
}
.toolgrp button:hover { background: var(--bg4); color: var(--tx); }
.toolgrp button.on { background: var(--acc); color: #fff; }
.rbody { flex: 1; display: flex; overflow: hidden; min-height: 0; }
/* ★ 侧栏宽度必须跟着容器按比例走，不能写死 px。
   以前是 .rleft 258 + .rright 330 = 588px 永久硬占，画布只剩两三百 px，
   PDF 被挤成一条竖带（2026-09-19 现场：视口 885 → 画布 297 → 页面实宽 240）。
   换成 clamp 之后，容器越窄侧栏让得越多，画布永远拿大头；
   也不再依赖媒体查询断点 —— 断点没触发时那种写法会一直挤着正文。 */
/* .rleft（阅读器左栏）与 .dleft（文档视图左栏）是同一块东西 —— 项目目录，
   两个视图共用，宽度规则也必须一致，否则切来切去宽度会跳。 */
.rleft, .dleft { flex: 0 0 auto; width: clamp(236px, 26%, 320px); border-right: 1px solid var(--line); background: var(--bg2); display: flex; flex-direction: column; overflow: hidden; }
/* ------------------- L3 左栏上半：项目导航（项目级目录） -------------------
   和下半的「本文档」工具用一条更亮的边线分开：上半回答「我在项目的哪里」，
   下半回答「我在文章的哪里」。两块合在一个 tab 条里会互相打架，所以拆开。
   顶部那层淡蓝渐变 + 更粗的项目名，是为了让它在左栏里「立起来」——
   它是导航，不是一堆并列的页签之一。 */
.rnav {
  flex: 0 0 auto; max-height: 52%; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-bottom: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(91,141,239,.10), rgba(91,141,239,0) 46%);
}
.rnav.collapsed { max-height: none; }
/* 文档视图左栏里只有这一块，让它铺满整列。
   阅读器那边它压在「本文档工具」上面，所以限高 52%，且要有下边线。 */
.dleft .rnav { flex: 1; max-height: none; border-bottom: none; }
.rnav .rnav-hd {
  display: flex; align-items: center; gap: 7px; padding: 9px 7px 9px 11px;
  cursor: pointer; transition: .13s; flex: 0 0 auto;
}
.rnav .rnav-hd:hover { background: var(--bg3); }
.rnav .rnav-hd .dot { width: 9px; height: 9px; flex: 0 0 9px; }
.rnav .rnav-hd .nm {
  flex: 1; min-width: 0; font-size: 12.8px; font-weight: 700; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rnav .rnav-hd .cnt2 { flex: 0 0 auto; font-size: 10.5px; color: var(--tx3); }
.rnav .rnav-hd .ico {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; border: 1px solid transparent;
  color: var(--tx3); font-size: 11px; line-height: 1; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: .13s;
}
.rnav .rnav-hd .ico:hover { background: var(--bg4); color: var(--tx); border-color: var(--line); }
.rnav .rnav-hd .chev { transition: transform .15s; }
.rnav.collapsed .rnav-hd .chev { transform: rotate(-90deg); }
.rnav .rnav-search { margin: 7px 8px 2px; width: calc(100% - 16px); font-size: 12px; padding: 5px 8px; }
.rnav .rnav-body { flex: 1; overflow: auto; padding: 3px 7px 9px; min-height: 0; }
.rnav.collapsed .rnav-body { display: none; }
.rnav .sl {
  font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tx3);
  font-weight: 700; padding: 9px 7px 5px;
}
.rrow {
  position: relative; display: flex; align-items: center; gap: 5px;
  padding: 5px 7px 5px 6px; border-radius: 7px; cursor: pointer;
  font-size: 12.3px; color: var(--tx2); border: 1px solid transparent; transition: .12s;
}
.rrow:hover { background: var(--bg3); color: var(--tx); }
/* 当前文章：强调色左竖条 + 底色 + 加粗 + 「当前」小签，四重标记，扫一眼就能定位 */
.rrow.on {
  background: var(--acc-bg); color: var(--acc-tx); font-weight: 600;
  border-color: rgba(91,141,239,.26);
}
.rrow.on::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2.5px;
  border-radius: 0 2px 2px 0; background: var(--acc);
}
.rrow .arw { width: 12px; flex: 0 0 12px; text-align: center; font-size: 8.5px; color: var(--tx3); transition: transform .13s; }
.rrow.open .arw { transform: rotate(90deg); }
.rrow .ic { flex: 0 0 auto; font-size: 11.5px; }
.rrow .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rs { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; }
.rrow .pn { flex: 0 0 auto; font-size: 10px; color: var(--tx3); }
.rrow .cur {
  flex: 0 0 auto; font-size: 9.5px; padding: 1px 5px; border-radius: 20px;
  background: var(--acc); color: #fff; font-weight: 600; letter-spacing: .3px;
}
.rsub { margin-left: 12px; padding-left: 6px; border-left: 1px solid var(--line); }
.rtabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 6px; flex: 0 0 auto; }
.rtabs button { padding: 10px 8px; font-size: 12.3px; color: var(--tx3); border-bottom: 2px solid transparent; transition: .15s; white-space: nowrap; }
.rtabs button.on { color: var(--acc-tx); border-color: var(--acc); }
.pinlist { flex: 1; overflow: auto; padding: 9px; }
.pinrow {
  display: flex; gap: 9px; padding: 9px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; margin-bottom: 3px; transition: .13s;
}
.pinrow:hover { background: var(--bg3); }
.pinrow.on { background: var(--acc-bg); border-color: rgba(91,141,239,.28); }
.pinrow .n {
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.pinrow .c { min-width: 0; flex: 1; }
.pinrow .c .l { font-size: 12.5px; font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinrow .c .s { font-size: 11px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas { flex: 1 1 auto; overflow: auto; background: var(--bg); padding: 20px 24px 60px; min-width: 0; position: relative; }
/* ★ 页面尺寸全部由 CSS 算出来，JS 一个 px 都不写。
   以前是「JS 读 .canvas.clientWidth → 折算成一份 px 宽写给 .pagestack →
   这份 px 又反过来参与决定 .canvas 的宽度」，两边互相依赖形成反馈环：
   容器宽度一有不确定，就滚成「内容越窄 → 容器越窄 → 内容更窄」，整块塌成细带。
   现在的规则：
     .pagestack 宽度 = 画布内容宽 × --pg-zoom   （zoom = 1 就是铺满，即「适宽」）
     .pdfpage   高度 = 宽度 × 页面比例          （JS 建占位框时写一次 aspect-ratio）
   容器变宽、缩放变化，浏览器自己重排；JS 只负责重新画 canvas 的位图。 */
.pagestack { position: relative; margin: 0 auto; width: calc(100% * max(0.4, var(--pg-zoom, 1))); }
.pdfpage { position: relative; width: 100%; margin: 0 auto 16px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.pdfpage canvas { display: block; }
.pdfpage .pglabel {
  position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: #8d887e;
  background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 4px;
}
.textlayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; opacity: 1; pointer-events: none; }
/* ★ 容器 pointer-events:none、span 恢复 auto：这样「有文字的格子」能选，
   没有文字的空白处不拦截鼠标 —— 高亮右侧的序号徽标才点得到。 */
.textlayer span, .textlayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; pointer-events: auto; }
.textlayer ::selection { background: rgba(91,141,239,.4); }
.textlayer span::selection { background: rgba(91,141,239,.4); }
/* 划线 / 高亮层。矩形一律用百分比定位，所以容器一变宽、缩放一变化，
   它们自己就跟着走，JS 不需要重算 —— 与 .pdfpage 的高度同一个思路。
   ★ 整层 pointer-events:none，只有序号徽标可以点：既不妨碍选文字，
     又能点中某条划线把它选出来。 */
.hllayer { position: absolute; inset: 0; pointer-events: none; }
.hlbox { position: absolute; border-radius: 2px; pointer-events: none; transition: box-shadow .12s; }
.hlbox.highlight { mix-blend-mode: multiply; }
.hlbox.underline { border-bottom: 2.5px solid; }
/* 删除线画在垂直正中：矩形只有一行文字那么高，用 border-top 会贴到字顶上去 */
.hlbox.strike { display: flex; align-items: center; }
.hlbox.strike::after { content: ''; flex: 1; height: 2px; background: currentColor; }
.hlbox.sel { box-shadow: 0 0 0 2px var(--acc); }
.hlbadge {
  position: absolute; pointer-events: auto; cursor: pointer; z-index: 6;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  box-shadow: 0 1px 5px rgba(0,0,0,.35), 0 0 0 1.5px rgba(255,255,255,.9);
  transform: translate(0, -50%); transition: .13s;
}
.hlbadge:hover { transform: translate(0,-50%) scale(1.18); }
.hlbadge.sel { transform: translate(0,-50%) scale(1.25); box-shadow: 0 1px 8px rgba(0,0,0,.5), 0 0 0 2.5px rgba(91,141,239,.75); }
/* 选中文字后浮出来的标记条：三个样式 + 八个语义色 + 落图钉 */
.markbar {
  position: fixed; z-index: 220; display: flex; align-items: center; gap: 3px;
  padding: 5px 7px; background: var(--bg3); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transform: translate(-50%, 0); animation: markbarIn .15s ease-out;
}
@keyframes markbarIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.markbar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.markbar button { border-radius: 8px; }
.markbar .sw { width: 17px; height: 17px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: .13s; }
.markbar .sw:hover { transform: scale(1.16); }
.markbar .sw.on { border-color: #fff; box-shadow: 0 0 0 1.5px var(--line); }
.pinlayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pinlayer.live { pointer-events: auto; cursor: crosshair; }
.pin {
  position: absolute; transform: translate(-50%,-50%); pointer-events: auto; cursor: grab;
  display: flex; align-items: center; z-index: 5; animation: popIn .22s cubic-bezier(.2,1.5,.5,1);
}
@keyframes popIn { from { transform: translate(-50%,-50%) scale(.2); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
.pin .b {
  width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: 0 0 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.85); transition: .14s;
}
.pin:hover .b { transform: scale(1.22); }
.pin.sel .b { transform: scale(1.3); box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 0 3px rgba(91,141,239,.6); }
.pin.hot .b { animation: pulse 1.1s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.85); } 50% { box-shadow: 0 2px 12px rgba(91,141,239,.9), 0 0 0 5px rgba(91,141,239,.35); } }
.pin .lb {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%); background: #161b22; color: #e7ebf0;
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; max-width: 300px;
  overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: .14s; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); z-index: 8;
}
.pin:hover .lb { opacity: 1; }
.pin.dragging { cursor: grabbing; z-index: 20; }
.minilink { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
.minilink path { pointer-events: stroke; cursor: pointer; }
.hint {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: rgba(20,25,32,.94); color: #cfd6e0; font-size: 12px; padding: 7px 15px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.12); white-space: nowrap;
  transition: .4s; backdrop-filter: blur(8px); z-index: 40; pointer-events: none;
}
.hint.fade { opacity: 0; transform: translateX(-50%) translateY(10px); }
/* 没选中标注时整栏收起：空状态白占三百多 px，就是「右边空一大块」的来源。
   由 reader.js 的 renderRight() 按有没有选中的标注切 .on。 */
.rright { flex: 0 0 auto; width: clamp(252px, 28%, 372px); border-left: 1px solid var(--line); background: var(--bg2); overflow: auto; display: none; }
.rright.on { display: block; }
.sec { padding: 15px 16px; border-bottom: 1px solid var(--line); }
.types { display: flex; flex-wrap: wrap; gap: 5px; }
.tbtn2 { padding: 4px 9px; border-radius: 7px; font-size: 11.5px; border: 1px solid var(--line); background: var(--bg3); color: var(--tx2); transition: .13s; }
.tbtn2:hover { border-color: var(--line2); }
.tbtn2.on { color: #fff; border-color: transparent; font-weight: 500; }
.anchor {
  background: var(--bg3); border-left: 2px solid var(--line2); border-radius: 0 8px 8px 0;
  padding: 9px 11px; font-size: 12px; color: var(--tx2); line-height: 1.6; font-style: italic;
  max-height: 200px; overflow: auto;
}
.backlink { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; font-size: 12px; color: var(--tx2); border-bottom: 1px solid var(--line); line-height: 1.6; }
.backlink:last-child { border: none; }
.backlink.click { cursor: pointer; }
.backlink.click:hover { color: var(--tx); }
.linkrow {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--line); font-size: 12px; margin-bottom: 5px;
}
.rel { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; font-weight: 600; flex: 0 0 auto; }
.rel.conflict { background: rgba(226,75,74,.18); color: #ee8b89; border: 1px solid rgba(226,75,74,.35); }
.rel.support { background: rgba(15,155,155,.18); color: #5cd0d0; border: 1px solid rgba(15,155,155,.35); }
.rel.extend { background: rgba(91,141,239,.18); color: #9cc0ff; border: 1px solid rgba(91,141,239,.35); }
.rel.seealso { background: rgba(107,118,132,.2); color: var(--tx2); border: 1px solid var(--line2); }
.rel.custom { background: rgba(139,92,246,.18); color: #b9a6ff; border: 1px solid rgba(139,92,246,.35); }

/* ---------------------------- doc 文章 ---------------------------- */

/* ★ flex:1 + min-height:0 不能删：父级 .reader 是 column flex（上面还有 41px 的 .atabs），
   用 height:100% 会溢出裁底。 */
.dwrap { flex: 1; min-height: 0; min-width: 0; display: flex; overflow: hidden; }
.dmain { flex: 1; overflow: auto; padding: 24px 30px 80px; min-width: 0; }
.doc {
  max-width: 820px; margin: 0 auto; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 16px; padding: 34px 42px 50px;
}
.doc.editmode { padding: 0; overflow: hidden; }
.doc h1 { font-size: 25px; font-weight: 600; margin-bottom: 8px; letter-spacing: -.3px; }
.doc h2 { font-size: 16px; font-weight: 600; margin: 26px 0 11px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.doc h3 { font-size: 14px; font-weight: 600; margin: 20px 0 9px; }
.doc p { font-size: 13.8px; line-height: 1.8; margin-bottom: 12px; }
.doc ul, .doc ol { margin: 0 0 13px 22px; font-size: 13.5px; line-height: 1.85; }
.doc li { margin-bottom: 3px; }
.doc blockquote {
  border-left: 2px solid var(--line2); padding: 4px 0 4px 14px; margin: 0 0 13px;
  color: var(--tx2); font-size: 13.3px;
}
.doc table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0 0 16px; }
.doc table th { text-align: left; padding: 8px 11px; color: var(--tx3); font-weight: 500; font-size: 11px; border-bottom: 1px solid var(--line2); background: var(--bg3); }
.doc table td { padding: 8px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.doc img { max-width: 100%; border-radius: 8px; }
.doc .weditor { padding: 30px 42px; }
.doc textarea.docbody {
  width: 100%; min-height: 62vh; background: transparent; border: none; padding: 0;
  font: 13.6px/1.85 ui-monospace, Menlo, Consolas, monospace; resize: none;
}
.doc textarea.docbody:focus { background: transparent; }
.srcline {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px;
  background: var(--ai-bg); border: 1px solid rgba(139,92,246,.25); font-size: 12px;
  color: var(--ai-tx); margin-bottom: 18px; line-height: 1.6;
}
.srcline.warn { background: rgba(224,168,84,.1); border-color: rgba(224,168,84,.28); color: var(--warn); }
.refc {
  display: inline-flex; align-items: baseline; gap: 4px; background: var(--acc-bg); color: var(--acc-tx);
  border: 1px solid rgba(91,141,239,.3); border-radius: 6px; padding: 1px 6px; font-size: 13px;
  cursor: pointer; transition: .13s; white-space: nowrap;
}
.refc:hover { background: rgba(91,141,239,.25); }
.refc.pc { background: rgba(186,117,23,.16); color: #e0a854; border-color: rgba(186,117,23,.35); }
.refc.pc:hover { background: rgba(186,117,23,.26); }
.refc.bad { background: rgba(226,114,111,.14); color: var(--danger); border-color: rgba(226,114,111,.35); text-decoration: line-through; }
.directive { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 16px 0; background: var(--bg3); }
.directive > .dhead {
  padding: 8px 13px; font-size: 11px; color: var(--tx3); background: var(--bg4);
  border-bottom: 1px solid var(--line); font-family: ui-monospace, Menlo, monospace;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
table.ev { width: 100%; border-collapse: collapse; font-size: 12.3px; }
table.ev th { text-align: left; padding: 8px 12px; color: var(--tx3); font-weight: 500; font-size: 11px; letter-spacing: .5px; border-bottom: 1px solid var(--line); background: var(--bg3); }
table.ev td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
table.ev tr:last-child td { border-bottom: none; }
table.ev tr:hover td { background: var(--bg4); }
.jump {
  display: inline-flex; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10.5px;
  align-items: center; justify-content: center; font-weight: 700; cursor: pointer; margin-right: 6px;
  vertical-align: middle;
}
.pinedit {
  border-left: 2px solid var(--acc); background: var(--acc-bg); border-radius: 0 6px 6px 0;
  padding: 6px 10px; margin: 0 0 12px; font-size: 12.5px; line-height: 1.7;
}
.pinedit .h { font-size: 11px; color: var(--acc-tx); margin-bottom: 3px; font-weight: 600; }

/* ---------------------------- 后台管理 ---------------------------- */

.admwrap { flex: 1; min-width: 0; display: flex; height: 100%; overflow: hidden; }
.admnav { width: 216px; flex: 0 0 216px; border-right: 1px solid var(--line); background: var(--bg2); padding: 14px 10px; overflow: auto; }
table.usr { width: 100%; border-collapse: collapse; font-size: 13px; }
table.usr th { text-align: left; padding: 10px 12px; color: var(--tx3); font-weight: 500; font-size: 11px; letter-spacing: .5px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
table.usr td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.usr tr:hover td { background: var(--bg3); }
.uav { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.stpill { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid; white-space: nowrap; }
.stpill.ok { background: rgba(29,158,117,.15); color: #4ecfa0; border-color: rgba(29,158,117,.3); }
.stpill.off { background: rgba(107,118,132,.15); color: var(--tx3); border-color: var(--line2); }
.rolepill { font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid; white-space: nowrap; }
.rolepill.admin { background: rgba(224,168,84,.15); color: var(--warn); border-color: rgba(224,168,84,.32); }
.rolepill.super { background: var(--ai-bg); color: var(--ai-tx); border-color: rgba(139,92,246,.32); }
.rolepill.member { background: var(--acc-bg); color: var(--acc-tx); border-color: rgba(91,141,239,.32); }
.rolepill.user { background: var(--bg4); color: var(--tx2); border-color: var(--line); }
.invcode { font: 12.5px ui-monospace, Menlo, monospace; letter-spacing: .5px; background: var(--bg4); padding: 2px 7px; border-radius: 5px; }

/* --------------------------- 命令面板 --------------------------- */

.sovl {
  position: fixed; inset: 0; background: rgba(4,7,11,.6); backdrop-filter: blur(3px);
  z-index: 300; display: none; align-items: flex-start; justify-content: center; padding-top: 88px;
}
.sovl.on { display: flex; }
.spanel {
  width: 680px; max-width: calc(100vw - 40px); max-height: 72vh; background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 26px 70px rgba(0,0,0,.55);
  display: flex; flex-direction: column; overflow: hidden; animation: dropIn .16s ease-out;
}
@keyframes dropIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.sinput { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.sinput input { border: none; background: none; font-size: 15.5px; padding: 0; }
.sinput input:focus { background: none; }
.sres { overflow: auto; padding: 8px; }
.sgrouph { font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tx3); font-weight: 700; padding: 10px 12px 6px; }
.sitem { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 13px; transition: .12s; }
.sitem:hover, .sitem.cur { background: var(--bg4); }
.sitem .ic { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid var(--line); }
.sitem .tx { flex: 1; min-width: 0; overflow: hidden; }
.sitem .tx .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem .tx .d { font-size: 11px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sitem .meta { font-size: 11px; color: var(--tx3); flex: 0 0 auto; }
.sfoot { padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--tx3); display: flex; gap: 14px; background: var(--bg3); }

/* ---------------------------- AI 悬浮窗 ---------------------------- */

.orb {
  position: fixed; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(140deg, #6d5ce0, #a855f7); color: #fff; z-index: 250;
  display: flex; align-items: center; justify-content: center; cursor: grab;
  box-shadow: 0 10px 28px rgba(109,92,224,.5); transition: .2s;
}
.orb:hover { transform: scale(1.06); }
.orb.on { transform: scale(.8); opacity: 0; pointer-events: none; }
.fpanel {
  position: fixed; right: 22px; bottom: 22px; width: min(468px, 92vw); height: min(648px, calc(100vh - 96px)); background: var(--bg2);
  border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 22px 60px rgba(0,0,0,.55);
  z-index: 250; display: none; flex-direction: column; overflow: hidden;
}
.fpanel.on { display: flex; }
.fpanel.min { height: 46px; }
.fpanel.min .ctxbar, .fpanel.min .ftabs, .fpanel.min .fbody, .fpanel.min .quick, .fpanel.min .finput { display: none; }
.fhead {
  padding: 11px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px;
  background: linear-gradient(100deg, rgba(109,92,224,.16), transparent 80%); flex: 0 0 auto;
}
.fhead .dotai {
  width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(140deg, #6d5ce0, #a855f7);
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; font-weight: 700; flex: 0 0 22px;
}
.ctxbar { padding: 7px 13px; font-size: 11px; color: var(--tx3); background: var(--bg3); border-bottom: 1px solid var(--line); line-height: 1.7; flex: 0 0 auto; max-height: 76px; overflow: auto; }
.ctxbar b { color: var(--acc-tx); font-weight: 600; }
.ctxbar .pill { background: var(--bg4); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; color: var(--tx2); font-size: 10.5px; }
.ftabs { display: flex; padding: 0 8px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.ftabs button { padding: 9px 12px; font-size: 12.5px; color: var(--tx3); border-bottom: 2px solid transparent; transition: .15s; }
.ftabs button.on { color: var(--ai-tx); border-color: var(--ai); }
.fbody { flex: 1; min-height: 0; overflow: auto; padding: 13px; display: flex; flex-direction: column; gap: 11px; }
.msg { display: flex; gap: 9px; font-size: 12.8px; line-height: 1.72; }
.msg .ava { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; }
.msg.me .ava { background: var(--bg4); color: var(--tx2); border: 1px solid var(--line); }
.msg.ai .ava { background: linear-gradient(140deg, #6d5ce0, #a855f7); color: #fff; }
.msg .bub { flex: 1; min-width: 0; overflow-wrap: break-word; }
.msg.me .bub { background: var(--bg3); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.msg .bub p { margin-bottom: 8px; }
.msg .bub h2 { font-size: 13.5px; font-weight: 600; margin: 12px 0 6px; }
.msg .bub h3 { font-size: 12.8px; font-weight: 600; margin: 10px 0 5px; }
.msg .bub ul, .msg .bub ol { margin: 0 0 8px 18px; }
.msg .bub table { width: 100%; border-collapse: collapse; font-size: 11.8px; margin: 0 0 9px; }
.msg .bub table th { text-align: left; padding: 5px 7px; color: var(--tx3); border-bottom: 1px solid var(--line2); }
.msg .bub table td { padding: 5px 7px; border-bottom: 1px solid var(--line); }
.acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.act {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px;
  font-size: 11.5px; border: 1px solid rgba(139,92,246,.35); background: rgba(139,92,246,.12);
  color: var(--ai-tx); transition: .14s;
}
.act:hover { background: rgba(139,92,246,.22); }
.act.gray { border-color: var(--line2); background: var(--bg3); color: var(--tx2); }
.act.gray:hover { background: var(--bg4); }
.cand { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg3); }
.cand .ct { font-size: 12.3px; font-weight: 500; margin-bottom: 3px; line-height: 1.5; }
.cand .cm { font-size: 11px; color: var(--tx3); margin-bottom: 6px; }
.cand .why { font-size: 11px; color: var(--ai-tx); line-height: 1.6; margin-bottom: 7px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 13px 9px; flex: 0 0 auto; }
.qk {
  font-size: 11.5px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--bg3); color: var(--tx2); transition: .14s;
}
.qk:hover { border-color: rgba(139,92,246,.4); color: var(--ai-tx); background: var(--ai-bg); }
.finput { padding: 10px 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-end; flex: 0 0 auto; }
.finput textarea { resize: none; height: 78px; min-height: 78px; max-height: 42vh; font-size: 13px; line-height: 1.65; overflow-y: auto; }
.cursor { display: inline-block; width: 7px; height: 13px; background: var(--ai-tx); animation: blink 1s steps(2) infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }
/* 可拖拽改变大小：八向手柄贴在内边缘，避免被 .fpanel 的 overflow:hidden 裁掉 */
.frz { position: absolute; z-index: 6; }
.frz.n, .frz.s { left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.frz.n { top: 0; }
.frz.s { bottom: 0; }
.frz.w, .frz.e { top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.frz.w { left: 0; }
.frz.e { right: 0; }
.frz.nw, .frz.ne, .frz.sw, .frz.se { width: 14px; height: 14px; }
.frz.nw { left: 0; top: 0; cursor: nwse-resize; }
.frz.ne { right: 0; top: 0; cursor: nesw-resize; }
.frz.sw { left: 0; bottom: 0; cursor: nesw-resize; }
.frz.se { right: 0; bottom: 0; cursor: nwse-resize; }
.frzgrip {
  position: absolute; right: 4px; bottom: 4px; width: 11px; height: 11px; z-index: 7;
  pointer-events: none; opacity: .6; border-right: 2px solid var(--tx3);
  border-bottom: 2px solid var(--tx3); border-bottom-right-radius: 4px;
}
.fpanel.min .frz, .fpanel.min .frzgrip { display: none; }
.fpanel.rz { user-select: none; }

/* 历史对话：从头部下面展开的一层抽屉。
   不再套一个弹窗 —— 面板本身只有 468px 宽，弹窗套弹窗会挤成一条缝。 */
.fhist {
  position: absolute; left: 0; right: 0; top: 47px; bottom: 0; z-index: 30;
  background: var(--bg2); display: flex; flex-direction: column;
}
.fhist[hidden] { display: none; }
.fhist-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.fhist-hd .hsub { font-size: 11px; color: var(--dim); margin-top: 2px; }
.fhist-list { flex: 1 1 auto; overflow: auto; padding: 7px; }
.fhist-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  border-radius: 9px; cursor: pointer;
}
.fhist-row:hover { background: rgba(128,128,128,.13); }
.fhist-row.on { background: rgba(91,141,239,.16); }
.fhist-row .ht { flex: 1 1 auto; min-width: 0; }
.fhist-row .htt { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fhist-row .hts { font-size: 11px; color: var(--dim); margin-top: 2px; }
.fhist-row .hx { width: 26px; height: 26px; flex: 0 0 auto; opacity: .4; }
.fhist-row .hx:hover { opacity: 1; color: var(--danger); }
.fhist-row .hx.arm { opacity: 1; width: auto; padding: 0 7px; font-size: 12px; color: var(--danger); }
.fhist-empty { padding: 18px 12px; font-size: 12px; line-height: 1.85; color: var(--dim); }

/* ------------------------------ 弹窗 ------------------------------ */

.modal { position: fixed; inset: 0; background: rgba(4,7,11,.62); backdrop-filter: blur(3px); z-index: 320; display: none; align-items: center; justify-content: center; padding: 30px 20px; }
.modal.on { display: flex; }
.mbox {
  width: 520px; max-width: 100%; max-height: 88vh; background: var(--bg2); border: 1px solid var(--line2);
  border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  animation: dropIn .16s ease-out;
}
.mbox.wide { width: 780px; }
.mhead { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.mbody { padding: 18px; overflow: auto; }
.mfoot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; gap: 9px; justify-content: flex-end; background: var(--bg3); }

/* ------------------------------ Toast ------------------------------ */

.toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 11px; padding: 10px 15px;
  font-size: 13px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px;
  animation: toastIn .2s ease-out; pointer-events: auto; max-width: 620px;
}
.toast.err { border-color: rgba(226,114,111,.45); color: var(--danger); }
.toast.ok { border-color: rgba(78,207,160,.4); color: var(--ok); }
.toast button { color: var(--acc-tx); font-size: 12.5px; }
@keyframes toastIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------- 响应式 ---------------------------- */

@media (max-width: 1100px) {
  /* 侧栏宽度交给 clamp() 自己缩，这里只收紧上限，别再写死 px */
  .rleft, .dleft { width: clamp(172px, 20%, 216px); }
  .rright { width: clamp(196px, 24%, 280px); }
  .wnav { width: clamp(196px, 22%, 244px); }
}
@media (max-width: 860px) {
  .rleft, .dleft, .rright { display: none; }
  .rleft.show, .rright.show { display: flex; position: absolute; top: 88px; bottom: 0; z-index: 50; width: 300px; }
  .rleft.show { left: 0; }
  .rright.show { right: 0; }
  .scroll-pad { padding: 20px 16px 60px; }
  .fpanel { right: 10px; left: 10px; width: auto; bottom: 10px; height: 70vh; }
  .wnav { width: 100%; flex-basis: 100%; }
  .work { flex-direction: column; }
}

/* ==================== doc 编辑器（三视图 + 行内批注） ==================== */

.dmain { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.dthead { flex: 0 0 auto; padding: 15px 30px 12px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.dthead .tinput {
  width: 100%; font-size: 21px; font-weight: 600; letter-spacing: -.2px;
  background: transparent; border: none; padding: 0; color: var(--tx);
}
.dthead .tinput:focus { background: transparent; }
.dthead .sub { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; color: var(--tx3); flex-wrap: wrap; }
.dthead .sub button { font-size: 11.5px; color: var(--acc-tx); }
.dthead .sub button:hover { text-decoration: underline; }

.dview { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.dview > * { flex: 1 1 auto; min-width: 0; }
.dscroll { overflow: auto; padding: 26px 30px 80px; }
.dsplit { display: flex; overflow: hidden; }
.dpane { flex: 1 1 50%; min-width: 0; overflow: auto; }
.dpane.left { border-right: 1px solid var(--line); background: var(--bg3); }
.dpane.left textarea.docbody { display: block; padding: 26px 30px 80px; }
.dpane.right { padding: 24px 30px 70px; background: var(--bg); }
.dright { flex: 0 0 auto; width: clamp(252px, 28%, 360px); border-left: 1px solid var(--line); background: var(--bg2); overflow: auto; }

.dtool button { width: 27px; height: 27px; border-radius: 6px; color: var(--tx2); font-size: 12px; font-weight: 600; padding: 0; }
.dtool button:hover { background: var(--bg4); color: var(--tx); }
.saveflag { font-size: 11.5px; color: var(--tx3); white-space: nowrap; padding: 0 3px; }
.saveflag.dirty { color: var(--warn); }
.saveflag.err { color: var(--danger); }
.saveflag.ok { color: var(--ok); }
.saveflag.local { color: var(--acc); }

/* 本地草稿提示条：文档顶部「有一份没提交的草稿」、标注右栏「有改动没提交成功」 */
.draftbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 15px; border-bottom: 1px solid var(--line);
  background: var(--acc-bg); font-size: 12.5px;
}
.draftbar .msg { flex: 1; min-width: 0; }

.pinmark {
  background: rgba(186,117,23,.18); border-bottom: 1.5px solid rgba(224,168,84,.7);
  border-radius: 3px 3px 0 0; cursor: pointer; padding: 0 1px; transition: background .13s;
}
.pinmark:hover { background: rgba(186,117,23,.3); }
.pinmark.on { background: rgba(91,141,239,.26); border-bottom-color: var(--acc); }
.pinmark b { font-size: 9.5px; vertical-align: super; font-weight: 700; margin-left: 1px; }

/* 全文翻译面板（public/js/translate.js） */
.tlab { font-size: 12px; color: var(--tx3); margin: 12px 0 6px; }
.trow { display: flex; gap: 8px; flex-wrap: wrap; }
.tsel {
  padding: 6px 12px; border-radius: 9px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--line2); color: var(--tx2);
  font-size: 12.5px; transition: all .13s;
}
.tsel:hover { border-color: var(--acc); color: var(--tx); }
.tsel.on { background: rgba(91,141,239,.16); border-color: var(--acc); color: var(--tx); font-weight: 600; }
.tcheck {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; color: var(--tx2); cursor: pointer; line-height: 1.6;
}
.tcheck input { width: auto; margin: 0; }
.tprog { margin-top: 16px; }
.tbar { height: 5px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.tfill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #5b8def, #8b5cf6); transition: width .3s; }
.tstep { margin-top: 7px; font-size: 12px; color: var(--tx3); line-height: 1.6; min-height: 19px; }

/* 深度解读在「文本文章」上的高亮。
   和 PDF 那边的 .insbox 同一个语义：颜色区分七类，垫在字下面、不挡选中。
   鼠标停上去出解读卡（点击也行）—— 以前这里只把字标出来了，什么都不显示。 */
.insmark {
  background: rgba(139,92,246,.16);
  border-bottom: 1.5px dotted #8b5cf6;
  border-radius: 2px;
  padding: 0 1px;
  cursor: help;
  transition: background .13s;
}
.insmark:hover { background: rgba(139,92,246,.3); }
.insmark.term { background: rgba(139,92,246,.16); border-bottom-color: #8b5cf6; }
.insmark.conclusion { background: rgba(29,158,117,.16); border-bottom-color: #1d9e75; }
.insmark.derivation { background: rgba(91,141,239,.15); border-bottom-color: #5b8def; }
.insmark.definition { background: rgba(15,155,155,.15); border-bottom-color: #0f9b9b; }
.insmark.method { background: rgba(186,117,23,.15); border-bottom-color: #ba7517; }
.insmark.data { background: rgba(216,165,52,.18); border-bottom-color: #d8a534; }
.insmark.claim { background: rgba(226,75,74,.14); border-bottom-color: #e24b4a; }

.dempty { text-align: center; padding: 26px 14px; color: var(--tx3); font-size: 12.5px; line-height: 1.8; }
.dmeta { font-size: 11.5px; color: var(--tx3); line-height: 1.7; }
.directive .nitem { border-radius: 8px; }

@media (max-width: 1100px) {
  .dright { width: clamp(200px, 24%, 288px); }
}
@media (max-width: 860px) {
  .dright { display: none; }
  .dview { flex-direction: column; }
  .dsplit { flex-direction: column; }
  .dpane.left { border-right: none; border-bottom: 1px solid var(--line); }
  .dscroll { padding: 18px 14px 60px; }
  .dthead { padding: 12px 14px 10px; }
}

/* ---------------------- 补充：零散元件 ---------------------- */

.crumb-mini { cursor: pointer; }
.crumb-mini:hover { text-decoration: underline; }
code {
  font: 12px ui-monospace, Menlo, Consolas, monospace; background: var(--bg4); color: var(--tx2);
  padding: 1px 5px; border-radius: 4px;
}
.directive code, .doc code { font-size: 12.5px; }
.chip.click.on { background: var(--acc-bg); color: var(--acc-tx); border-color: rgba(91,141,239,.3); }

/* ---------------- AI 面板：思考过程与实时状态（流式期间） ---------------- */
/* 状态行：首字要等一两分钟时，这是唯一在动的东西 */
.streamfoot { margin-top: 7px; font-size: 11.4px; letter-spacing: .2px; }
/* 思考过程：默认折起来，想看再展开。长文里它可能比正文还长 */
.think { margin: 0 0 9px; border-left: 2px solid var(--line2); padding: 1px 0 1px 9px; }
.think > summary { cursor: pointer; font-size: 11.4px; color: var(--tx3); list-style: none; user-select: none; }
.think > summary::-webkit-details-marker { display: none; }
.think > summary::before { content: "▸ "; }
.think[open] > summary::before { content: "▾ "; }
.think[open] > summary { margin-bottom: 6px; }
.think > .tx {
  max-height: 240px; overflow: auto; font-size: 11.6px; line-height: 1.68;
  color: var(--tx3); white-space: pre-wrap;
}
/* 中断 / 截断的说明块：不混进正文，才不会被「复制」带走 */
.warnbox {
  margin-top: 9px; padding: 8px 10px; border-radius: 8px; font-size: 11.8px; line-height: 1.65;
  background: rgba(226,75,74,.10); border: 1px solid rgba(226,75,74,.34); color: var(--tx2);
}

/* ---------------- AI 干活：执行过程与可撤销的改动 ---------------- */
/* 动作卡片全程可见，是「全自动」敢放开手的前提 ——
   用户随时能看见它读了什么、找到几篇、落了什么，而不是等一个黑箱吐结论。 */
.steps { margin-top: 9px; }
.stepswrap { border-left: 2px solid var(--line2); padding: 1px 0 1px 9px; }
.stepswrap > summary {
  cursor: pointer; font-size: 11.4px; color: var(--tx3); list-style: none;
  user-select: none; display: flex; align-items: center; gap: 6px;
}
.stepswrap > summary::-webkit-details-marker { display: none; }
.stepswrap > summary::before { content: "▸"; font-size: 10px; }
.stepswrap[open] > summary::before { content: "▾"; }
.stepswrap[open] > summary { margin-bottom: 6px; }
.sdot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--tx3); }
.sdot.run { background: var(--acc); animation: sfpulse 1.1s ease-in-out infinite; }
.sdot.ok { background: #1d9e75; }
.sdot.err { background: #e24b4a; }
@keyframes sfpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.steplist { display: flex; flex-direction: column; gap: 4px; }
.steprow { display: flex; align-items: baseline; gap: 7px; font-size: 11.6px; line-height: 1.6; color: var(--tx3); }
.steprow .si { flex: none; width: 15px; text-align: center; font-size: 11px; }
.steprow .sl { flex: none; color: var(--tx2); }
.steprow .ss { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steprow.run .ss { color: var(--acc-tx); }
.steprow.err .ss { color: #e24b4a; }
.steprow.note { color: var(--warn); }

/* 「我做了这些」：写入的每一笔都摆出来，连「改成了什么」一起。
   只说「已补全题录」而不给 diff，那个撤销按钮就没法判断该不该点。 */
.didbox {
  margin-top: 10px; border: 1px solid rgba(29,158,117,.3); border-radius: 10px;
  overflow: hidden; background: rgba(29,158,117,.06);
}
.didhd { font-size: 11.4px; color: var(--tx2); padding: 7px 10px; border-bottom: 1px solid rgba(29,158,117,.18); }
.didrow { padding: 7px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.didrow + .didrow { border-top: 1px solid rgba(29,158,117,.12); }
.didrow .dname { flex: 1; min-width: 0; font-size: 12px; color: var(--tx2); }
.ddiff { flex-basis: 100%; margin-top: 2px; padding-left: 2px; display: flex; flex-direction: column; gap: 2px; }
.dline { font-size: 11.2px; line-height: 1.6; color: var(--tx3); display: flex; gap: 6px; flex-wrap: wrap; }
.dline .df { flex: none; min-width: 40px; color: var(--tx3); }
.dold { text-decoration: line-through; opacity: .55; }
.darw { color: var(--tx3); }
.dnew { color: #1d9e75; }

/* ==================== 画笔 / 文本框 / 便签 ==================== */
/* 笔迹层：每页一个 SVG。viewBox 按这一页的真实比例建（JS 只在建页时写一次），
   所以 stroke-width 能随缩放等比变化 —— 纯 CSS 缩放时不会变成一根头发丝。
   整层 pointer-events:none，只有「画笔模式」下由 reader.js 打开 .live。 */
.inklayer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.inklayer.live { pointer-events: auto; cursor: crosshair; }
/* vector-effect 这里写一份、reader.js 里也写在属性上：属性那份管住新建的 path，
   这份管住任何忘了设属性的路径 —— 两处都留着，笔迹才不会在缩放时被拉成发丝。 */
.inklayer path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.inklayer .inkhit { stroke: transparent !important; stroke-width: 14 !important; pointer-events: stroke; cursor: pointer; }
.inklayer path.sel { filter: drop-shadow(0 0 2px var(--acc)); }
/* 画笔 / 文本框 / 便签模式：把文本层的指针事件让出来。
   pdf.js 的 span 是铺满整页的，不让开的话每一笔、每次点击都被它吃掉 ——
   表现就是「画笔模式下一画就变成了选字」。 */
.pagestack.mode-draw .textlayer span { pointer-events: none; }
.pagestack.mode-draw .textlayer { cursor: crosshair; }
/* 文本框 / 便签层：整层不吃事件，只有卡片自己吃 */
.notelayer { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.note {
  position: absolute; pointer-events: auto; border-radius: 8px; padding: 6px 8px;
  font-size: 12px; line-height: 1.55; color: #1d2430; overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,.28); border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.94);
}
.note.sticky { background: rgba(255,238,166,.97); border-color: rgba(186,117,23,.35); }
.note.sel { box-shadow: 0 0 0 2px var(--acc), 0 3px 12px rgba(0,0,0,.3); }
.note .nhead {
  display: flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(0,0,0,.45);
  margin: -6px -8px 4px; padding: 2px 6px; background: rgba(0,0,0,.05); cursor: move;
}
.note .nhead .n { font-weight: 700; }
.note .nbody { white-space: pre-wrap; overflow: auto; max-height: 100%; }
.note .nbody:empty::before { content: '双击写点什么…'; color: rgba(0,0,0,.3); }
.note .ngrip {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.22) 50%);
  border-radius: 0 0 8px 0;
}
.note textarea {
  width: 100%; height: 100%; border: none; background: none; resize: none; outline: none;
  font: inherit; color: inherit; padding: 0;
}

/* ==================== 深度解读 ==================== */
/* 高亮层：几何与 .hlbox 同一套路（百分比定位）。
   ★ 这一层刻意**不设 z-index** —— 于是 .insbox 落在文本层之下（高亮垫在字后面，
   读起来干净），而 .insbadge 自带 z-index 6，照样能冒到文字上被点到。
   设成 z-index:2 会把整层抬到文字之上，半透明色块糊在字上，读着难受。 */
.inslayer { position: absolute; inset: 0; pointer-events: none; }
.insbox {
  position: absolute; border-radius: 2px; pointer-events: none;
  border-bottom: 2px dotted; mix-blend-mode: multiply;
}
.insbox.term { background: rgba(139,92,246,.16); border-color: #8b5cf6; }
.insbox.conclusion { background: rgba(29,158,117,.16); border-color: #1d9e75; }
.insbox.derivation { background: rgba(91,141,239,.15); border-color: #5b8def; }
.insbox.definition { background: rgba(15,155,155,.15); border-color: #0f9b9b; }
.insbox.method { background: rgba(186,117,23,.15); border-color: #ba7517; }
.insbox.data { background: rgba(216,165,52,.18); border-color: #d8a534; }
.insbox.claim { background: rgba(226,75,74,.14); border-color: #e24b4a; }
.insbadge {
  position: absolute; pointer-events: auto; cursor: pointer; z-index: 6;
  width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #fff;
  transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform .12s;
}
.insbadge:hover { transform: translate(-50%, -50%) scale(1.3); }
.insbadge.term { background: #8b5cf6; }
.insbadge.conclusion { background: #1d9e75; }
.insbadge.derivation { background: #5b8def; }
.insbadge.definition { background: #0f9b9b; }
.insbadge.method { background: #ba7517; }
.insbadge.data { background: #d8a534; }
.insbadge.claim { background: #e24b4a; }
/* 解读卡：浮在页面上，点空白处消失 */
.inscard {
  position: fixed; z-index: 240; width: min(420px, 92vw); max-height: 62vh; overflow: auto;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 13px;
  box-shadow: 0 18px 48px rgba(0,0,0,.5); padding: 13px 15px 14px;
  animation: markbarIn .15s ease-out;
}
.inscard .ih { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inscard .ih .k {
  font-size: 10.5px; padding: 2px 7px; border-radius: 20px; color: #fff; font-weight: 600; letter-spacing: .3px;
}
.inscard .ih .k.term { background: #8b5cf6; }
.inscard .ih .k.conclusion { background: #1d9e75; }
.inscard .ih .k.derivation { background: #5b8def; }
.inscard .ih .k.definition { background: #0f9b9b; }
.inscard .ih .k.method { background: #ba7517; }
.inscard .ih .k.data { background: #d8a534; }
.inscard .ih .k.claim { background: #e24b4a; }
.inscard .ih .pg { font-size: 11.5px; color: var(--tx3); }
.inscard .il { font-size: 14px; font-weight: 600; margin-bottom: 7px; line-height: 1.4; }
.inscard .iq {
  font-size: 12.4px; line-height: 1.65; color: var(--tx2); font-style: italic;
  border-left: 2px solid var(--line2); padding: 2px 0 2px 9px; margin-bottom: 9px;
  max-height: 120px; overflow: auto;
}
.inscard .ib { font-size: 13px; line-height: 1.75; color: var(--tx); }
.inscard .ib p { margin: 0 0 8px; }
.inscard .if { display: flex; gap: 6px; margin-top: 11px; }
/* 解读进度条（跑批时显示在工具条右侧） */
.insprog { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tx2); }
.insprog .bar { width: 92px; height: 5px; border-radius: 3px; background: var(--bg4); overflow: hidden; }
.insprog .bar i { display: block; height: 100%; background: var(--acc); border-radius: 3px; transition: width .3s; }
/* 左栏「解读」页签里的一条 */
.insrow { display: flex; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: flex-start; }
.insrow:hover { background: var(--bg3); }
.insrow .k {
  flex: 0 0 auto; width: 6px; align-self: stretch; border-radius: 3px; margin: 1px 0;
}
.insrow .c { flex: 1; min-width: 0; }
.insrow .t { font-size: 12.5px; line-height: 1.45; }
.insrow .s { font-size: 11px; color: var(--tx3); margin-top: 2px; }

/* ==================== L3 分屏多开（同时看 2~4 篇） ====================
   尺寸全部由这里决定，JS 一个数字都不往容器上写（与 .rleft 那段同一个约定）。
   排布规则：
     sp-2 = 左 | 右
     sp-3 = 左边一栏通高，右边上下两栏
     sp-4 = 2 × 2
   上限 4 是产品决定 —— 再分下去每格都窄到读不了正文，那时候该用缩略图/大纲。 */
.split { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.splitbar {
  height: 34px; flex: 0 0 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 13px;
  background: var(--bg3); border-bottom: 1px solid var(--line2);
}
.splitbar .ic { display: flex; align-items: center; color: var(--acc-tx); }
.splitbar .tt { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.splitbar .cnt { font-size: 11px; color: var(--tx3); }

.panes { flex: 1; min-height: 0; display: grid; gap: 1px; background: var(--line2); overflow: hidden; }
.panes.sp-1 { grid-template-columns: 1fr; }
.panes.sp-2 { grid-template-columns: 1fr 1fr; }
/* 三栏：第一栏通高，二三栏在右半边上下排 —— 比「上一下二」更符合阅读习惯
   （左边那篇是主，右边两篇是参照） */
.panes.sp-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.panes.sp-3 > .pane:first-child { grid-row: span 2; }
.panes.sp-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.pane {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden; background: var(--bg);
}
/* height:auto 是有意的：.reader 自带 height:100%，而这一栏上面还有 31px 的 pane 头，
   不归零的话高度会按「整栏」算，底部的画布被顶出去一截（硬约定 1：高度只认 flex，不认 %）。 */
.pane > .reader { flex: 1; min-height: 0; height: auto; }
/* ★ 激活的那一栏要在顶上加一条强调线。
   「激活」不只是视觉：全局键盘、AI 的阅读上下文都只认这一栏（见 split.js）。 */
.pane.active > .pane-hd { box-shadow: inset 0 2px 0 var(--acc); }
.pane.active > .pane-hd .tt { color: var(--tx); }

.pane-hd {
  height: 31px; flex: 0 0 31px; display: flex; align-items: center; gap: 6px;
  padding: 0 5px 0 3px; background: var(--bg2); border-bottom: 1px solid var(--line);
}
.pane-hd .ic {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; background: none; border: none;
  display: flex; align-items: center; justify-content: center; color: var(--tx3); cursor: pointer;
}
.pane-hd .ic:hover { background: var(--bg4); color: var(--tx); }
.pane-hd .ic.x:hover { color: var(--danger); }
.pane-hd .ic2 { font-size: 12px; flex: 0 0 auto; }
.pane-hd .tt {
  font-size: 12px; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- 分屏里的侧栏：默认收起 ---
   侧栏宽度是按视口百分比算的（clamp(236px, 26%, 320px)）。分屏时每栏只有半个
   屏幕宽，26% 会吃掉正文一大块 —— 所以这里直接收起，需要时点该栏头上的 ☰ 再展开。
   宽度必须用 px / 百分比都是相对「栏」而不是相对视口，所以不给它 clamp 视口值。 */
.split .rleft, .split .dleft { display: none; }
.split .pane.showleft .rleft, .split .pane.showleft .dleft {
  display: flex; width: clamp(154px, 24%, 220px); flex: 0 0 auto;
}
.split .rright { width: clamp(190px, 30%, 320px); }
.split .rnav-hd .nm { font-size: 12px; }

/* --- 工具条在窄栏里放不下：允许横滚，但别把按钮压变形 ---
   （.spacer 是 flex:1，不能一起设成 0 0 auto，否则它不再顶开两侧） */
.pane .rbar { overflow-x: auto; overflow-y: hidden; gap: 7px; padding: 0 9px; }
.pane .rbar > .toolgrp, .pane .rbar > .btn, .pane .rbar > .insprog { flex: 0 0 auto; }
.pane .rbar::-webkit-scrollbar { height: 4px; }
.pane .rbar::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }

/* 分屏时文章标签条不会再出现（第一行已经让给了 pane 头），但万一有，别让它撑高 */
.pane > .atabs { height: 34px; flex: 0 0 34px; }

/* -------------------- 「多开」选文章弹窗 -------------------- */
.splitlist {
  max-height: min(46vh, 400px); overflow: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
}
.spick {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  cursor: pointer; border-bottom: 1px solid var(--line); font-size: 13px;
}
.spick:last-child { border-bottom: none; }
.spick:hover { background: var(--bg3); }
.spick.on { background: var(--acc-bg); }
.spick.off { opacity: .42; cursor: not-allowed; }
.spick .bx {
  flex: 0 0 17px; width: 17px; height: 17px; border-radius: 5px; border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff;
}
.spick.on .bx { background: var(--acc); border-color: var(--acc); }
.spick .ic { flex: 0 0 auto; font-size: 12px; }
.spick .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spick .pn { flex: 0 0 auto; font-size: 11px; color: var(--tx3); }
.spick .cur {
  flex: 0 0 auto; font-size: 10.5px; color: var(--acc-tx);
  border: 1px solid rgba(91,141,239,.35); border-radius: 20px; padding: 0 6px;
}
.spick .no { flex: 0 0 16px; text-align: right; font-size: 11px; font-weight: 700; color: var(--acc-tx); }

/* 「多开」入口按钮：和「＋新建子文章」并排，但一眼能看出它不是同一类动作 */
.atab.split-btn { border: 1px solid var(--line2); color: var(--tx2); margin-left: 4px; }
.atab.split-btn:hover { border-color: var(--acc); color: var(--acc-tx); background: var(--acc-bg); }