/* 想法蒸馏机 · 共享样式
   一套 token 管四个页面。改颜色只改这里，别再往模板里塞 <style>。 */

/* ── 设计 token ───────────────────────────────────────────── */
:root {
  /* 纸与墨 */
  --paper: #f3efe6;
  --paper-2: #ebe5d7;
  --card: #fbf8f2;
  --ink: #2a2723;
  --ink-2: #6b6459;
  --ink-3: #9a9182;
  --rule: #e3dbc9;
  --rule-2: #d3c8b1;

  /* 朱砂：可点、当前、主动作 */
  --accent: #a8492c;
  --accent-ink: #fff;
  --accent-soft: #f1e1d8;

  /* 靛：数据——时长、编号、可信度、统计。故意与朱砂分工，界面才不会一片红 */
  --data: #3f5a6b;
  --data-soft: #e3e9ed;

  /* 状态 */
  /* 精读稿分章用的四个色相：朱砂 / 靛 / 松绿 / 赭黄，循环使用 */
  /* 绿和黄压得比"好看"更深一档：它们要当正文里的高亮字用，
     在纸色底上得过 4.5:1，浅一点就只剩好看、读不清 */
  --chapter-1: #a8492c;
  --chapter-2: #3f5a6b;
  --chapter-3: #566f45;
  --chapter-4: #8a6416;

  --ok: #4a6b3d;      --ok-soft: #e4ecdd;
  --warn: #8a6a1c;    --warn-soft: #f5ecd4;
  --bad: #a5432f;     --bad-soft: #f6e3dc;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(60, 50, 30, .05), 0 8px 24px -16px rgba(60, 50, 30, .35);
  --shadow-lift: 0 2px 4px rgba(60, 50, 30, .07), 0 14px 34px -18px rgba(60, 50, 30, .4);

  /* 故意不列 "Source Han Serif SC"：Windows 上常只装了 Heavy 一个字重，
     一旦命中，整站标题会变成糊成一团的黑体块 */
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", SimSun, ui-serif, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas,
               "Noto Sans Mono", monospace;

  --shell: 1180px;
  --aside: 216px;
  color-scheme: light;
}

/* 暗色：不是把纸反过来，是换成夜里的暖灯书房 */
:root[data-theme="dark"] {
  --paper: #171512;
  --paper-2: #201d18;
  --card: #211e19;
  --ink: #ece5d7;
  --ink-2: #a89e8c;
  --ink-3: #7b7263;
  --rule: #383128;
  --rule-2: #4b4337;
  --accent: #d1795a;
  --accent-ink: #1a1512;
  --accent-soft: #3a2a22;
  --data: #8fb2c6;
  --data-soft: #232c33;
  --chapter-1: #d1795a;
  --chapter-2: #8fb2c6;
  --chapter-3: #9dbd8c;
  --chapter-4: #d3b263;
  --ok: #9dbd8c;      --ok-soft: #26301f;
  --warn: #d3b263;    --warn-soft: #322a17;
  --bad: #dd8b74;     --bad-soft: #382019;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -16px rgba(0, 0, 0, .8);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 34px -18px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

/* ── 基础 ─────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  /* 中文标点挤压：让「」、。这类符号不再撑出突兀的空档 */
  text-spacing-trim: space-first;
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.mono { font-family: var(--font-mono); font-size: .82em; letter-spacing: .01em; }

.serif { font-family: var(--font-serif); }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--accent); color: var(--accent-ink);
  padding: 8px 16px; border-radius: var(--radius-sm); z-index: 200;
}
.skip:focus { left: 12px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── 通用控件 ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border: 1px solid transparent; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: 14px; line-height: 1.4;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter .15s, background .15s, border-color .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: progress; }

.btn-ghost {
  background: var(--card); color: var(--ink-2); border-color: var(--rule-2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }

.btn-danger { background: var(--card); color: var(--bad); border-color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); filter: none; }

.btn-quiet {
  background: none; border: none; color: var(--ink-3);
  font: inherit; font-size: 12.5px; padding: 2px 6px; border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-quiet:hover { color: var(--bad); background: var(--bad-soft); }

.field {
  width: 100%; padding: 9px 14px;
  border: 1px solid var(--rule-2); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 14px;
}
.field::placeholder { color: var(--ink-3); }
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

textarea.field { resize: vertical; min-height: 60px; line-height: 1.6; }

select.field { cursor: pointer; padding-right: 32px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 10px; border-radius: 999px;
  font-size: 12px; line-height: 1.8; white-space: nowrap;
  background: var(--paper-2); color: var(--ink-2); text-decoration: none;
}
a.chip:hover { background: var(--accent-soft); color: var(--accent); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-bad { background: var(--bad-soft); color: var(--bad); }
.chip-busy { background: var(--warn-soft); color: var(--warn); }

.note { color: var(--ink-3); font-size: 12.5px; line-height: 1.65; }

.banner {
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 14px; margin-bottom: 16px;
}
.banner-ok { background: var(--ok-soft); color: var(--ok); }
.banner-bad { background: var(--bad-soft); color: var(--bad); }

.panel {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 20px 24px;
  margin-bottom: 16px; box-shadow: var(--shadow);
}
/* 用后代选择器：工具行里的 h2 也要跟着走小标题样式，
   否则它会掉回浏览器默认的大粗黑标题 */
.panel h2 {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .08em; margin-bottom: 12px;
}

/* ── 页面骨架 ─────────────────────────────────────────────── */
.shell {
  max-width: var(--shell); margin: 0 auto;
  padding: 0 20px 96px;
  display: grid; grid-template-columns: var(--aside) 1fr; gap: 36px;
  align-items: start;
}

.reading { max-width: 780px; margin: 0 auto; padding: 24px 20px 96px; }
/* 阅读型页面窄一档，顶栏跟着收窄才对得齐 */
body.reading-page { --shell: 820px; }

/* 顶栏：窄屏是唯一的导航入口，宽屏只留返回和主题切换 */
.topbar {
  position: sticky; top: 0; z-index: 40;
  padding: 10px 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
/* 顶栏内容跟正文同宽同起始，别一个贴屏幕边、一个居中 */
.topbar-in {
  max-width: var(--shell); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.topbar .spacer { flex: 1; }
.topbar a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.topbar a:hover { color: var(--accent); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--rule-2); background: var(--card);
  color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── 书架侧栏 ─────────────────────────────────────────────── */
/* 书架比屏幕高时必须能自己滚：粘顶又不给滚动条的话，
   分类和作者列表的下半截永远够不着 */
.shelf {
  padding: 28px 0 24px;
  position: sticky; top: 56px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}
.shelf::-webkit-scrollbar { width: 8px; }
.shelf::-webkit-scrollbar-thumb {
  background: var(--rule-2); border-radius: 999px;
  border: 2px solid var(--paper); background-clip: padding-box;
}
.shelf::-webkit-scrollbar-track { background: transparent; }

.brand { margin-bottom: 22px; }
.brand h1 {
  font-family: var(--font-serif); font-size: 25px; font-weight: 600;
  letter-spacing: .14em; line-height: 1.3;
}
.brand .tagline { color: var(--ink-3); font-size: 12.5px; letter-spacing: .04em; }

/* 馆藏统计：这个产品的说明书就是这一行——多少小时口播换来多少条要点 */
.stat {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--card);
}
.stat b {
  display: block; font-family: var(--font-mono);
  font-size: 21px; font-weight: 600; color: var(--data); line-height: 1.2;
}
.stat .arrow { color: var(--ink-3); font-size: 12px; letter-spacing: .1em; margin: 3px 0; }
.stat small { color: var(--ink-3); font-size: 12px; }

.shelf section { margin-bottom: 26px; }
.shelf h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .2em; margin-bottom: 8px;
}
.shelf h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.shelf-link {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: 14px;
  border-left: 2px solid transparent;
}
.shelf-link:hover { background: var(--paper-2); }
.shelf-link .n { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.shelf-link[aria-current] {
  background: var(--accent-soft); color: var(--accent);
  border-left-color: var(--accent); font-weight: 600;
}
.shelf-link[aria-current] .n { color: var(--accent); }
.shelf-link .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.subtags { margin: 2px 0 8px 14px; border-left: 1px solid var(--rule); padding-left: 6px; }
.subtags .shelf-link { font-size: 13px; padding: 3px 8px; color: var(--ink-2); }

/* ── 投递 + 工具条 ────────────────────────────────────────── */
.masthead { padding: 28px 0 18px; }

.compose { display: flex; gap: 10px; align-items: flex-start; }
.compose textarea { flex: 1; }

.toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 14px 0 18px;
}
.toolbar .search { display: flex; gap: 8px; flex: 1 1 260px; min-width: 200px; }
.toolbar .search .field { flex: 1; min-width: 0; }

.filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px; font-size: 13px; color: var(--ink-2);
}
.filterbar .chip { background: var(--accent-soft); color: var(--accent); }

/* ── 进度面板 ─────────────────────────────────────────────── */
/* 进度面板复用 .panel，模板上写 class="panel progress" */
.progress .top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.progress .top b { font-family: var(--font-serif); font-size: 15px; letter-spacing: .06em; }
.progress .nums { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.progress .nums em { font-style: normal; color: var(--accent); font-weight: 600; }
.bar { height: 6px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px;
  transition: width .6s ease; }
.progress .now {
  margin-top: 10px; font-size: 13px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.steps { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.steps span {
  font-size: 11.5px; font-family: var(--font-mono);
  padding: 1px 10px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-3);
}
.steps span.did { background: var(--ok-soft); color: var(--ok); }
.steps span.doing { background: var(--accent); color: var(--accent-ink); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

.queue {
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--rule);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--ink-3);
}
.queue .who {
  display: flex; align-items: center; gap: 6px;
  background: var(--paper-2); border-radius: 999px; padding: 2px 6px 2px 12px;
}
.queue .who b { font-weight: 500; color: var(--ink-2); }
.queue .who button {
  border: none; background: var(--rule); color: var(--bad);
  font: inherit; font-size: 11.5px; padding: 1px 10px; border-radius: 999px; cursor: pointer;
}
.queue .who button:hover { background: var(--bad-soft); }

/* ── 藏书卡片 ─────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 18px 22px 16px;
  margin-bottom: 14px; box-shadow: var(--shadow);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.card:hover { box-shadow: var(--shadow-lift); border-color: var(--rule-2); }
/* 书脊：左侧一条窄色带，状态一眼可辨，兼当"这是一本书"的隐喻 */
.card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--rule-2);
}
.card.done::before { background: var(--ok); }
.card.fail::before { background: var(--bad); }
.card.busy::before { background: var(--warn); }

.card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px;
}
.card-meta a { color: var(--ink-2); text-decoration: none; }
.card-meta a:hover { color: var(--accent); }
.card-meta .grow { flex: 1; }

/* 蒸馏比：X 秒口播 → Y 条要点。这个产品的核心承诺，放在每张卡片上 */
.ratio {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--data);
  background: var(--data-soft); padding: 1px 8px; border-radius: 999px;
}
.ratio .to { opacity: .6; margin: 0 2px; }

/* 可信度：正常分数不该比正文还抢眼，只用浅底区分档位 */
.score {
  font-size: 11.5px; font-weight: 600; text-decoration: none;
  padding: 1px 9px; border-radius: 999px; white-space: nowrap;
}
.score.high { color: var(--ok); background: var(--ok-soft); }
.score.mid { color: var(--warn); background: var(--warn-soft); }
.score.low { color: var(--accent); background: var(--accent-soft); }
.score.bad { color: var(--bad); background: var(--bad-soft); }

.card h3 {
  font-family: var(--font-serif); font-size: 17px; font-weight: 600;
  line-height: 1.6; margin-bottom: 10px; letter-spacing: .01em;
}
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--accent); text-decoration: underline;
  text-decoration-color: var(--rule-2); text-underline-offset: 4px; }

.points { padding-left: 18px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.points li { margin: 2px 0; }
.points li::marker { color: var(--rule-2); }

/* 要点折叠：默认露 2 条，剩下的收进 details，扫读时一屏能装下更多条目 */
.fold { margin-top: 2px; }
.fold > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-3); padding: 2px 0;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { color: var(--accent); }
.fold > summary::after { content: "▾"; font-size: 10px; }
.fold[open] > summary::after { content: "▴"; }
.fold[open] > summary .more-label { display: none; }
.fold > summary .less-label { display: none; }
.fold[open] > summary .less-label { display: inline; }

.tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

.card-err { color: var(--bad); font-size: 12.5px; margin-top: 8px; }

.card-actions {
  display: flex; gap: 4px; align-items: center;
  opacity: .35; transition: opacity .15s;
}
.card:hover .card-actions, .card:focus-within .card-actions { opacity: 1; }
@media (hover: none) { .card-actions { opacity: 1; } }

.empty {
  text-align: center; color: var(--ink-3);
  padding: 72px 20px; border: 1px dashed var(--rule-2); border-radius: var(--radius);
}
.empty b { display: block; font-family: var(--font-serif); font-size: 17px;
  color: var(--ink-2); margin-bottom: 6px; }

/* ── 翻页 ─────────────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 28px; font-size: 13.5px;
}
.pager a, .pager span {
  padding: 6px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--rule); background: var(--card);
  color: var(--ink-2); text-decoration: none;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .at { font-family: var(--font-mono); border-color: transparent; background: none; color: var(--ink-3); }
.pager .off { opacity: .4; pointer-events: none; }

/* ── 详情页 ───────────────────────────────────────────────── */
.doc-head { margin: 20px 0 24px; }
.doc-head h1 {
  font-family: var(--font-serif); font-size: 26px; font-weight: 600;
  line-height: 1.55; letter-spacing: .01em; margin-bottom: 12px;
}
.doc-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--ink-3); font-size: 13px;
}

.doc-body { font-size: 15.5px; }
.doc-body p { margin: 0 0 14px; color: var(--ink); line-height: 1.9; text-align: justify; }

/* 精读稿分章：每节一个色相，编号和左边线同色。
   一整屏纯黑正文最劝退，把结构件着色、正文留墨色，既有落点又不花。 */
.chapter {
  position: relative; padding-left: 22px;
  margin: 30px 0; scroll-margin-top: 64px;
}
.chapter:first-of-type { margin-top: 10px; }
.chapter::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--hue); opacity: .55;
  transition: opacity .2s;
}
.chapter:hover::before { opacity: 1; }
.chapter h3 {
  font-family: var(--font-serif); font-size: 18.5px; font-weight: 600;
  margin: 0 0 12px; line-height: 1.5;
}
.chapter h3 .no {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--hue); margin-right: 9px;
}
/* 中文一行 40 字往上就开始费眼，收到 38 字左右，行末回到行首不容易串行 */
.chapter p { max-width: 38em; }
/* 每节第一段是这节的主张，给它稍大的字，扫读时先看到它 */
.chapter .lede { font-size: 16.5px; line-height: 1.85; }

/* 正文里按语义高亮：引号术语、书名、带单位的数字。
   术语跟着本节色相走，同一节里颜色是一套；书名和数字属于引用类信息，
   四节统一用靛色，不跟着变 */
.mk-term { color: var(--accent); font-weight: 600; }
.chapter .mk-term { color: var(--hue); }
.mk-book { color: var(--data); font-weight: 600; }
.mk-num {
  font-family: var(--font-mono); font-size: .9em; font-weight: 600;
  color: var(--data); padding: 0 1px;
}

/* 四色循环：章节、脉络图共用，两处一一对应 */
.hue-1 { --hue: var(--chapter-1); }
.hue-2 { --hue: var(--chapter-2); }
.hue-3 { --hue: var(--chapter-3); }
.hue-4 { --hue: var(--chapter-4); }

.keypoints { padding-left: 20px; font-size: 15px; line-height: 1.85; }
.keypoints li { margin: 4px 0; }
.keypoints li::marker { color: var(--accent); }

.transcript { font-size: 14.5px; color: var(--ink-2); white-space: pre-wrap; line-height: 1.95; }

details.raw > summary {
  cursor: pointer; color: var(--ink-3); font-size: 13px; letter-spacing: .05em;
}
details.raw .transcript { margin-top: 12px; }

.tool-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tool-row h2 { margin: 0; }

/* 脉络图：左标题 + 大括号 + 右要点 */
.map-row { display: flex; align-items: stretch; gap: 12px; margin: 12px 0; }
.map-head {
  flex: 0 0 130px; display: flex; align-items: center; justify-content: flex-end;
  text-align: right; font-family: var(--font-serif); font-size: 14.5px; font-weight: 600;
}
.map-head a { color: var(--ink); text-decoration: none; }
.map-head a:hover { color: var(--hue, var(--accent)); }
/* 大括号用本节的色相：脉络图和下面的精读稿靠颜色一一对应 */
.map-brace { flex: none; width: 14px; min-height: 46px; color: var(--hue, var(--rule-2)); opacity: .55; }
.map-points { list-style: none; padding: 4px 0; margin: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.map-points li { font-size: 13px; color: var(--ink-2); }

/* 可信度徽章 */
.cred-badge {
  position: fixed; top: 14px; right: 16px; z-index: 45;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid currentColor; cursor: pointer;
  box-shadow: var(--shadow); font: inherit; padding: 0;
}
.cred-badge b { font-family: var(--font-mono); font-size: 19px; line-height: 1; }
.cred-badge small { font-size: 9.5px; letter-spacing: .1em; color: var(--ink-3); }
.cred-badge.high { color: var(--ok); }
.cred-badge.mid { color: var(--warn); }
.cred-badge.low { color: var(--accent); }
.cred-badge.bad { color: var(--bad); }
.cred-badge.unscored { color: var(--ink-3); width: auto; height: auto;
  border-radius: 999px; padding: 6px 14px; font-size: 12px; border-width: 1px; }

dialog.modal {
  border: none; border-radius: var(--radius); padding: 24px 28px;
  max-width: 540px; width: calc(100vw - 40px);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift);
}
dialog.modal::backdrop { background: rgba(30, 25, 20, .5); backdrop-filter: blur(2px); }
.modal .head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.modal .head b { font-family: var(--font-mono); font-size: 30px; }
.modal .head b.high { color: var(--ok); } .modal .head b.mid { color: var(--warn); }
.modal .head b.low { color: var(--accent); } .modal .head b.bad { color: var(--bad); }
.modal .head .close { margin-left: auto; }
.modal h4 { font-size: 12px; color: var(--ink-3); font-weight: 600;
  letter-spacing: .1em; margin: 16px 0 6px; }
.reason { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
.reason b { color: var(--ink); margin-right: 8px; }
.doubts { background: var(--bad-soft); border-radius: var(--radius-sm); padding: 10px 16px; }
.doubts li { font-size: 13.5px; color: var(--bad); margin: 4px 0 4px 16px; }

/* ── 表格（批量收录） ─────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 14px; }
th, td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
th { background: var(--paper-2); font-weight: 600; color: var(--ink-2); font-size: 12.5px;
  letter-spacing: .04em; }
tr:last-child td { border-bottom: none; }
tr.already { color: var(--ink-3); }
td.dur { white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--data); }

/* ── 模型链清单（设置页） ─────────────────────────────────── */
.chain { list-style: none; padding: 0; counter-reset: chain; }
.chain li {
  counter-increment: chain; position: relative; padding: 4px 0 4px 32px;
  color: var(--ink-3); font-size: 13.5px;
}
.chain li::before {
  content: counter(chain, decimal-leading-zero);
  position: absolute; left: 0; top: 4px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
}
.chain li.used { text-decoration: line-through; opacity: .6; }
.chain li.active { color: var(--ink); font-weight: 600; }
.chain li.active::before { color: var(--accent); }
.chain li .now { color: var(--accent); font-size: 12px; margin-left: 8px; }

/* ── 馆员 AI ──────────────────────────────────────────────── */
#ai-ball {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  border: none; background: var(--accent); color: var(--accent-ink);
  font-size: 22px; cursor: pointer; box-shadow: var(--shadow-lift);
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s;
}
#ai-ball:hover { transform: scale(1.07); }

#ai-panel[hidden] { display: none; }
#ai-panel {
  position: fixed; right: 24px; bottom: 88px; z-index: 60;
  width: min(370px, calc(100vw - 48px)); height: min(460px, calc(100vh - 140px));
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; overflow: hidden;
}
.ai-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--accent); color: var(--accent-ink); font-size: 13.5px;
}
.ai-head button { background: none; border: none; color: inherit; font-size: 18px;
  cursor: pointer; line-height: 1; padding: 0 2px; }
#ai-msgs { flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 86%; padding: 8px 13px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; }
.ai-msg.bot { background: var(--paper-2); align-self: flex-start; }
.ai-msg.user { background: var(--accent); color: var(--accent-ink); align-self: flex-end; }
.ai-msg.err { background: var(--bad-soft); color: var(--bad); align-self: flex-start; }
.ai-items { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.ai-items a {
  display: block; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 8px 11px;
  font-size: 12.5px; color: var(--ink); text-decoration: none; line-height: 1.5;
}
.ai-items a:hover { border-color: var(--accent); }
.ai-items .who { color: var(--ink-3); }
#ai-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--rule); }
#ai-form .field { flex: 1; min-width: 0; }

/* ── 响应式 ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 0; padding-bottom: 80px; }
  /* 窄屏：书架变抽屉，默认收起，点顶栏「书架」滑出 */
  .shelf {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: 270px; max-width: 84vw; padding: 20px 18px 40px; max-height: none;
    background: var(--paper); border-right: 1px solid var(--rule);
    overflow-y: auto; box-shadow: var(--shadow-lift);
    transform: translateX(-102%); transition: transform .22s ease;
  }
  body.drawer-open .shelf { transform: none; }
  body.drawer-open::after {
    content: ""; position: fixed; inset: 0; z-index: 45;
    background: rgba(30, 25, 20, .45);
  }
  .masthead { padding-top: 18px; }
  .cred-badge { position: static; margin-bottom: 14px; }
}

@media (min-width: 901px) {
  .drawer-toggle { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .compose { flex-direction: column; }
  .compose .btn { width: 100%; justify-content: center; }
  .card { padding: 16px 16px 14px; }
  .map-row { flex-direction: column; gap: 4px; }
  .map-head { flex: none; justify-content: flex-start; text-align: left; }
  .map-brace { display: none; }
  .map-points { padding-left: 12px; border-left: 1px solid var(--rule); }
  .doc-head h1 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .topbar, .shelf, #ai-ball, #ai-panel, .card-actions, .pager { display: none !important; }
  body { background: #fff; }
}