:root {
  --bg: #faf9f7;
  --bg-soft: #f1efeb;
  --card: #ffffff;
  --fg: #2b2a28;
  --fg-dim: #8a867e;
  --line: #e4e1da;
  --accent: #b3372f;
  --must: #b3372f;
  --must-bg: #fdeeed;
  --skim: #9a6b15;
  --skim-bg: #faf3e2;
  --ref: #2b5f8f;
  --ref-bg: #eaf2f9;
  --skip: #8a867e;
  --skip-bg: #efedea;
  --topbar-h: 52px;
}
html[data-theme="dark"] {
  --bg: #191918;
  --bg-soft: #141413;
  --card: #222220;
  --fg: #d9d6cf;
  --fg-dim: #8f8c85;
  --line: #33322f;
  --accent: #e06b60;
  --must: #e06b60;
  --must-bg: #3a2320;
  --skim: #d9a44a;
  --skim-bg: #332a1a;
  --ref: #6fa3d1;
  --ref-bg: #1e2c3a;
  --skip: #8f8c85;
  --skip-bg: #262523;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.75 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

/* ---------- 顶栏 ---------- */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
#progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s; }
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 50;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
#book-title {
  flex: 1; min-width: 0; font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { display: flex; gap: 6px; }
button {
  font: inherit; color: var(--fg); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; cursor: pointer;
}
button:hover { border-color: var(--fg-dim); }
.icon-btn { width: 34px; padding: 5px 0; text-align: center; }
#btn-font { font-weight: 700; }
#btn-focus.on { background: var(--must); border-color: var(--must); color: #fff; }

/* ---------- 布局 ---------- */
#layout { display: flex; padding-top: var(--topbar-h); min-height: 100vh; }
#sidebar {
  width: 296px; flex: none; position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  border-right: 1px solid var(--line); background: var(--bg-soft);
  padding: 14px 10px 40px;
}
#backdrop { display: none; }
#main { flex: 1; min-width: 0; max-width: 860px; margin: 0 auto; padding: 26px 34px 120px; }

/* ---------- 目录 ---------- */
.toc-item {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 8px; border-radius: 7px; cursor: pointer;
  color: var(--fg); font-size: 13.5px; line-height: 1.45;
}
.toc-item:hover { background: var(--card); }
.toc-item.active { background: var(--card); box-shadow: inset 2px 0 0 var(--accent); }
.toc-item.t2 { padding-left: 22px; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.toc-item.t3 { padding-left: 38px; font-size: 12.5px; color: var(--fg-dim); }
.toc-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-badge {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); align-self: center;
}
.toc-badge.lv-must { background: var(--must); }
.toc-badge.lv-skim { background: var(--skim); }
.toc-badge.lv-ref { background: var(--ref); }
.toc-badge.lv-skip { background: var(--skip); opacity: .55; }
body.focus .toc-item.is-skip { opacity: .45; }

/* ---------- AI 导读卡 ---------- */
#summary-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin: 0 0 26px;
}
#summary-card h2 { margin: 0 0 8px; font-size: 15px; color: var(--accent); }
#summary-card p { margin: 0 0 12px; font-size: 14.5px; }
#summary-card .legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent;
}
.chip.lv-must { color: var(--must); background: var(--must-bg); border-color: var(--must); }
.chip.lv-skim { color: var(--skim); background: var(--skim-bg); border-color: var(--skim); }
.chip.lv-ref { color: var(--ref); background: var(--ref-bg); border-color: var(--ref); }
.chip.lv-skip { color: var(--skip); background: var(--skip-bg); border-color: var(--skip); }
.chip.hint { color: var(--fg-dim); border: none; background: none; }

/* ---------- 正文 ---------- */
#content.loading { color: var(--fg-dim); }
#content h1 { font-size: 1.6em; margin: 2.2em 0 .8em; line-height: 1.35; }
#content h1:first-child { margin-top: .4em; }
#content h2 { font-size: 1.32em; margin: 2em 0 .7em; }
#content h3 { font-size: 1.12em; margin: 1.6em 0 .6em; }
#content h1, #content h2, #content h3 { scroll-margin-top: calc(var(--topbar-h) + 14px); }
#content p, #content ul, #content ol { margin: .7em 0; }
#content li { margin: .3em 0; }
#content img { max-width: 100%; height: auto; border-radius: 6px; }
#content blockquote {
  margin: 1em 0; padding: .2em 1em; border-left: 3px solid var(--line);
  color: var(--fg-dim);
}
#content table { border-collapse: collapse; width: 100%; font-size: .92em; margin: 1em 0; display: block; overflow-x: auto; }
#content th, #content td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
#content code { background: var(--bg-soft); border-radius: 4px; padding: 1px 5px; font-size: .9em; }
#content pre { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-x: auto; }
#content pre code { background: none; padding: 0; }
#content hr { border: none; border-top: 1px solid var(--line); margin: 2.2em 0; }

/* ---------- 分级标注 ---------- */
.lv-must { color: var(--must); }
.lv-skim { color: var(--skim); }
.lv-ref { color: var(--ref); }
.lv-skip { color: var(--skip); }
#content h1.lv-must, #content h2.lv-must, #content h3.lv-must { color: var(--must); }
.sec-banner {
  display: flex; align-items: baseline; gap: 10px;
  margin: -.4em 0 1em; padding: 6px 12px;
  border-radius: 8px; font-size: 13px; line-height: 1.6;
}
.sec-banner .badge { flex: none; font-weight: 700; }
.sec-banner .reason { color: var(--fg-dim); }
.sec-banner.lv-must { background: var(--must-bg); border-left: 3px solid var(--must); }
.sec-banner.lv-must .badge { color: var(--must); }
.sec-banner.lv-skim { background: var(--skim-bg); border-left: 3px solid var(--skim); }
.sec-banner.lv-skim .badge { color: var(--skim); }
.sec-banner.lv-ref { background: var(--ref-bg); border-left: 3px solid var(--ref); }
.sec-banner.lv-ref .badge { color: var(--ref); }
.sec-banner.lv-skip { background: var(--skip-bg); border-left: 3px solid var(--skip); }
.sec-banner.lv-skip .badge { color: var(--skip); }

#content .hl-must {
  background: var(--must-bg); border-left: 3px solid var(--must);
  padding: 6px 12px; border-radius: 0 8px 8px 0; color: var(--must);
  font-weight: 500;
}
#content .hl-skim {
  background: var(--skim-bg); border-left: 3px solid var(--skim);
  padding: 6px 12px; border-radius: 0 8px 8px 0;
}
#content .hl-ref { background: var(--ref-bg); border-left: 3px solid var(--ref); padding: 6px 12px; border-radius: 0 8px 8px 0; }
#content .hl-skip { opacity: .6; }

/* ---------- 只看重点 ---------- */
body.focus .folded { display: none !important; }
body.focus .sec-dim { opacity: .55; font-size: .95em; margin-block: .9em; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  #sidebar {
    position: fixed; left: 0; top: var(--topbar-h); bottom: 0; z-index: 45;
    transform: translateX(-102%); transition: transform .22s ease; width: min(320px, 84vw);
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }
  body.menu-open #sidebar { transform: translateX(0); }
  #backdrop {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 40;
    background: rgba(0,0,0,.38); border: none; padding: 0;
  }
  #main { padding: 18px 18px 90px; }
  #content h1 { font-size: 1.38em; }
  #content h2 { font-size: 1.2em; }
  .sec-banner { flex-wrap: wrap; gap: 4px 10px; }
}