/* zh_mobile: 移动端优先的现代排版 */
:root {
  --bg: #f7f6f2; --fg: #1f2328; --muted: #6b7280;
  --accent: #0a7a3d; --cmd: #c0392b; --cmd-bg: rgba(192,57,43,.07);
  --card: #ffffff; --card-bd: #e3e1da; --code-bg: #f0efe9;
  --hint-bg: #fbf7e0; --hint-bd: #e5d9a0;
  --note-bg: #eef7ee; --note-bd: #cfe3cf;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#15171a; --fg:#d8dbe0; --muted:#8b9199;
    --accent:#4cc38a; --cmd:#ff8a75; --cmd-bg:rgba(255,138,117,.10);
    --card:#1d2024; --card-bd:#2c3035; --code-bg:#22262b;
    --hint-bg:#26241a; --hint-bd:#4a4530;
    --note-bg:#1a241c; --note-bd:#31452f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC",
    "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  font-size: clamp(16px, 4.3vw, 19px); line-height: 1.85; }

/* 顶栏 */
.topbar { position: sticky; top: 0; z-index: 50; display: flex;
  align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--card-bd); }
.tb-brand { font-weight: 700; color: var(--accent); text-decoration: none; }
.book-nav { position: relative; }
.book-nav > summary { cursor: pointer; list-style: none; font-size: .9em;
  color: var(--muted); border: 1px solid var(--card-bd); border-radius: 8px;
  padding: 4px 12px; background: var(--card); user-select: none; }
.nav-panel { position: fixed; top: 52px; right: 8px; left: 8px;
  max-height: 72vh; overflow-y: auto; background: var(--card);
  border: 1px solid var(--card-bd); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 14px 16px; }
.nav-group { margin-bottom: 12px; }
.nav-group > span { font-size: .8em; font-weight: 700; color: var(--muted);
  letter-spacing: .1em; }
.nav-group ul { list-style: none; margin: 6px 0 0; padding: 0;
  columns: 2; column-gap: 18px; }
.nav-group li { padding: 3px 0; break-inside: avoid; }
.nav-group a { color: var(--fg); text-decoration: none; font-size: .92em; }
.nav-group a:active { color: var(--accent); }

/* 正文容器 */
main { max-width: 44rem; margin: 0 auto; padding: 18px 16px 8px;
  overflow-wrap: break-word; }

p.chapter-number { margin: 8px 0 2px; color: var(--muted); font-size: .9em; }
p.chapter-title { margin: 0 0 18px; font-size: 1.55em; font-weight: 800;
  line-height: 1.35; }
h2.section-title { margin: 2em 0 .9em; padding: 10px 16px;
  font-size: 1.18em; font-weight: 700; line-height: 1.5;
  color: var(--accent); background: var(--card);
  border: 1px solid var(--card-bd); border-left: 5px solid var(--accent);
  border-radius: 10px; }
p.text, p.text-hanging-indent-bullet, p.text-hanging-indent-number { margin: 1em 0; }
p.text-hanging-indent-bullet, p.text-hanging-indent-number {
  margin-left: 1.4em; text-indent: -1.4em; }

/* 章首小节导航 */
ul.section-links { background: var(--card); border: 1px solid var(--card-bd);
  border-radius: 12px; padding: 12px 12px 12px 32px; margin: 0 0 1.6em;
  font-size: .93em; }
ul.section-links li { margin: .3em 0; }

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

/* 代码与命令 */
p.listing, p.hint-listing, p.footnote-listing, p.wian-listing,
p.figure-listing-text, pre { font-family: "SF Mono", ui-monospace, Menlo,
  Consolas, "Noto Sans Mono CJK SC", monospace; font-size: .82em;
  line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  background: var(--code-bg); border-radius: 10px; padding: 10px 12px;
  margin: 1em 0; }
b.cmd, span.cmd, span.bold-mono { font-family: ui-monospace, Menlo, Consolas,
  "Noto Sans Mono CJK SC", monospace; font-size: .92em; color: var(--cmd);
  background: var(--cmd-bg); border-radius: 5px; padding: .05em .3em; }
p.listing b.cmd, pre b.cmd { background: none; padding: 0; }

/* 提示 / 脚注 / 专栏卡片 */
div.hint, div.footnote, div.wian { border-radius: 12px; padding: 14px 16px;
  margin: 1.6em 0; page-break-inside: avoid; }
div.hint { background: var(--hint-bg); border: 1px solid var(--hint-bd); }
div.footnote { background: var(--note-bg); border: 1px solid var(--note-bd); }
div.wian { background: var(--card); border: 1px solid var(--card-bd); }
p.hint-title, p.footnote-title { margin: 0 0 6px; font-weight: 700;
  text-align: center; font-size: .95em; }
p.hint-text, p.footnote-text, p.wian-text { margin: .5em 0; font-size: .93em; }

/* 表格: 横向滚动适配窄屏 */
.table-scroll { overflow-x: auto; margin: 1.2em 0;
  border: 1px solid var(--card-bd); border-radius: 12px;
  background: var(--card); -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 0; border: none; }
table { border-collapse: collapse; width: max-content; min-width: 100%;
  font-size: .85em; }
table td, table th { padding: 8px 10px; border: 1px solid var(--card-bd);
  vertical-align: top; overflow-wrap: anywhere; }
table.figure-command-summary-heading td, table.figure-table-heading td,
table.figure-box-heading td, table.section-title td { font-weight: 700; }

/* 插图 */
img { max-width: 100%; height: auto; display: block; margin: 1em auto;
  border-radius: 8px; }
p.figure-table-caption, p.figure-table-title { text-align: center;
  font-size: .85em; color: var(--muted); margin: .6em 0; }
div.centered { text-align: center; }

/* 术语表 / 年表 */
p.glossary-term { margin: 1.4em 0 .3em; font-weight: 700; }
p.glossary-text, li.glossary-text { font-size: .95em; }
p.timeline-date { margin: 1.2em 0 .2em; font-weight: 700; color: var(--accent); }

/* 版权行 */
p.copyright-info { margin: 3em 0 1em; padding-top: 1em; font-size: .78em;
  color: var(--muted); text-align: center; border-top: 1px solid var(--card-bd); }

/* 底部导航 */
.bottom-nav { position: sticky; bottom: 0; display: flex; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--card-bd); }
.bottom-nav a, .bottom-nav span.dim { flex: 1; display: block; text-align: center;
  text-decoration: none; color: var(--fg); background: var(--card);
  border: 1px solid var(--card-bd); border-radius: 12px; padding: 8px 6px;
  font-size: .85em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bottom-nav a:active { border-color: var(--accent); color: var(--accent); }
.bottom-nav span.dim { color: var(--muted); }
.bottom-nav a span { display: block; font-size: .78em; color: var(--muted); }
.bn-toc { max-width: 5em; }
