/* 大模型入门书籍样式：phone-first，亮暗双主题 */
:root {
  --bg: #faf9f6; --paper: #ffffff; --ink: #1f2328; --dim: #6a7180;
  --accent: #0f6b5c; --accent-soft: #e3f1ee; --line: #e4e2dc;
  --code-bg: #f2f1ec; --demo-bg: #f6f5f1;
}
[data-theme="dark"] {
  --bg: #14161a; --paper: #1c1f24; --ink: #e6e4de; --dim: #9aa2ad;
  --accent: #4ec9a9; --accent-soft: #1e322d; --line: #2c3138;
  --code-bg: #23272e; --demo-bg: #20242a;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  line-height: 1.75; font-size: 16px;
}

/* 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.brand { color: var(--ink); text-decoration: none; font-weight: 700; white-space: nowrap; }
.crumb { color: var(--dim); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.icon-btn {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 8px; padding: .25rem .55rem; font-size: 1rem; cursor: pointer;
}

/* file:// 提示 */
.file-warn {
  margin: .8rem; padding: .7rem 1rem; border: 1px solid #c77; border-radius: 10px;
  background: #fdeeee; color: #8a2b2b; font-size: .9rem;
}
.file-warn code { background: var(--code-bg); padding: 0 .3em; border-radius: 4px; }

/* 目录抽屉 */
.toc-drawer {
  position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; width: min(85vw, 20rem);
  background: var(--paper); border-right: 1px solid var(--line);
  overflow-y: auto; padding: 1rem;
}
.toc-mask { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.35); }
.toc-drawer h3 { font-size: .95rem; color: var(--dim); margin: 1.1rem 0 .3rem; }
.toc-drawer a {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .3rem .5rem; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: .92rem;
}
.toc-drawer a:hover { background: var(--accent-soft); }
.toc-drawer a.read::after { content: "✓"; color: var(--accent); }

/* 正文 */
.content { max-width: 46rem; margin: 0 auto; padding: 1.2rem 1.1rem 3rem; }
.content h1 { font-size: 1.5rem; line-height: 1.35; }
.content h2 { font-size: 1.25rem; margin-top: 2.2em; padding-bottom: .25em; border-bottom: 1px solid var(--line); }
.content h3 { font-size: 1.08rem; margin-top: 1.8em; }
.content h4 { font-size: 1rem; color: var(--dim); }
.muted { color: var(--dim); }
a { color: var(--accent); }
code { background: var(--code-bg); padding: .1em .35em; border-radius: 5px; font-size: .92em; }
pre { background: var(--code-bg); padding: .8em 1em; border-radius: 10px; overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote {
  margin: 1.2em 0; padding: .7em 1em; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 10px 10px 0;
}
blockquote p { margin: .3em 0; }
blockquote.heknow { border-left-color: #b8860b; background: color-mix(in srgb, #b8860b 12%, var(--paper)); }
blockquote.case { border-left-color: var(--dim); background: var(--demo-bg); }

/* 表格（基准数据高频出现） */
.table-wrap { overflow-x: auto; margin: 1.2em 0; }
table { border-collapse: collapse; font-size: .9rem; min-width: 60%; }
th, td { border: 1px solid var(--line); padding: .4em .7em; text-align: left; white-space: nowrap; }
th { background: var(--code-bg); }
tr:nth-child(even) td { background: color-mix(in srgb, var(--code-bg) 40%, transparent); }

/* 列表 */
.content ul, .content ol { padding-left: 1.4em; }
.content li { margin: .25em 0; }

/* 动画卡 */
.demo {
  margin: 1.4em 0; padding: .9em; background: var(--demo-bg);
  border: 1px solid var(--line); border-radius: 12px;
}
.demo canvas { width: 100%; display: block; border-radius: 8px; touch-action: none; }
.demo .demo-controls { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; margin-top: .7em; }
.demo label { font-size: .88rem; display: flex; align-items: center; gap: .5rem; }
.demo input[type="range"] { width: 9rem; accent-color: var(--accent); }
.demo input[type="text"] {
  flex: 1; min-width: 8rem; padding: .35em .6em; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink);
}
.demo .demo-note { font-size: .82rem; color: var(--dim); margin-top: .5em; }
.demo .demo-val { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }

/* 前后章 */
.pager { max-width: 46rem; margin: 0 auto 3rem; padding: 0 1.1rem; display: flex; justify-content: space-between; gap: 1rem; }
.pager a {
  flex: 1; text-decoration: none; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: .6em .9em; font-size: .92rem;
}
.pager a.next { text-align: right; }
.pager a span { display: block; color: var(--dim); font-size: .8rem; }

/* 首页卷卡 */
.home-vol { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0; }
.home-vol h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.home-vol .vol-progress { color: var(--dim); font-size: .85rem; }
.home-vol ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.home-vol li { margin: .15rem 0; }
.home-vol li.read a::after { content: " ✓"; color: var(--accent); }