:root {
  /* 与官网 www.le-tan.cn 完全对齐的设计令牌（取自官网 :root） */
  --brand: #0066ca;
  --brand-dark: #004a9c;
  --brand-light: #d6efff;
  --ink: #0c121a;
  --muted: #5d646f;
  --line: #dfe6eb;
  --bg: #fafcfe;
  --grad: linear-gradient(135deg, #006edb 0%, #3d3cc1 100%);  /* 官网 bg-brand-gradient */
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --toc-w: 340px;
  --topbar-h: 64px;   /* 官网 h-16 */
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}

/* ===== 顶栏：与官网导航栏 1:1 对齐（h-16 / bg-white/80 / backdrop-blur-xl / 蓝色下边框） ===== */
.topbar {
  height: var(--topbar-h);
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid rgba(219,234,254,.5);
}
.topbar-inner {
  height: 100%; max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-logo { height: 40px; width: auto; object-fit: contain; display: block; }

/* 导航项：text-sm/medium、foreground/70、hover 主色 + 渐变色下划线（与官网一致） */
.topnav { display: flex; align-items: center; gap: 4px; }
.nav-item {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 16px; font-size: 14px; font-weight: 500; line-height: 1.4;
  color: rgba(12,18,26,.7); text-decoration: none; white-space: nowrap;
  transition: color .15s;
}
.nav-item:hover { color: var(--brand); }
.nav-item .chev { width: 14px; height: 14px; transition: transform .2s; }
.nav-ul {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 2px; width: 0; background: var(--grad); border-radius: 2px;
  transition: width .2s;
}
.nav-item:hover .nav-ul { width: 24px; }
.nav-item.active { color: var(--ink); font-weight: 500; }
.nav-item.active .nav-ul { width: 24px; }

/* 服务领域下拉菜单 */
.nav-drop { position: relative; }
.nav-drop:hover .nav-item { color: var(--brand); }
.nav-drop:hover .chev { transform: rotate(180deg); }
.nav-drop:hover .nav-ul { width: 24px; }
.nav-drop-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 8px; display: none; z-index: 50; }
.nav-drop:hover .nav-drop-panel { display: block; }
.nav-drop-box {
  width: 256px; padding: 8px; border-radius: 16px;
  border: 1px solid #dbeafe; background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 20px 44px rgba(30,58,138,.14);
}
.drop-item { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 12px; text-decoration: none; transition: background .15s; }
.drop-item:hover { background: #eff6ff; }
.di-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.drop-item:hover .di-title { color: var(--brand); }
.di-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.topbar-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.btn-consult {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap;
  background: var(--grad); box-shadow: 0 10px 20px rgba(59,130,246,.30);
  transition: opacity .15s;
}
.btn-consult:hover { opacity: .9; }

/* ===== 手册搜索：从导航栏移到阅读区右上角的悬浮控件（不影响导航与官网一致） ===== */
.search-box { position: relative; }
.float-search { position: absolute; top: 14px; right: 14px; z-index: 14; }
.float-search input {
  width: 230px; max-width: 46vw; height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; outline: none;
  background: rgba(255,255,255,.9); color: var(--ink);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 6px 20px rgba(20,40,80,.12);
  transition: border-color .15s, box-shadow .15s;
}
.float-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.search-results {
  position: absolute; top: 46px; right: 0; left: auto;
  width: min(360px, 86vw);
  background: #fff; color: var(--ink); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(20,40,80,.18);
  max-height: 360px; overflow: auto; z-index: 60;
}
.search-results .sr-item { padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.search-results .sr-item:hover { background: var(--brand-light); }
.search-results .sr-page { color: var(--brand); font-weight: 700; margin-right: 8px; }
.search-results .sr-snippet { color: var(--muted); font-size: 12px; display: block; margin-top: 3px; }
.search-results .sr-empty { padding: 12px 14px; color: var(--muted); }

/* ===== 布局：内容区占满（不再有固定侧栏挤压观看面积） ===== */
.layout { display: flex; height: calc(100% - var(--topbar-h)); }
.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.viewer-wrap {
  position: relative; flex: 1; display: flex; min-height: 0; isolation: isolate;
  /* 对齐官网首屏 hero 的底色：bg-gradient-to-br from-blue-50 via-white to-cyan-50。
     书本两侧/上下原本是大面积死白，才会显得"空旷"，用这层浅渐变补上层次。 */
  background: linear-gradient(to bottom right, #eff6ff 0%, #ffffff 52%, #ecfeff 100%);
}
/* 注意：这里**不要**再铺官网的 .bg-grid 网格纹理。
   用户明确要求"背景不要格纹"——网格在手册页四周过于抢眼、像草稿纸。 */
/* 两枚浮动光斑（官网 blue-400/20 左上 + cyan-400/20 右下，blur-3xl + animate-float）
   放在留白区，给空旷的四角补上颜色与呼吸感（保留，用户只要求去格纹） */
.viewer-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 240px at 4% 6%, rgba(81,162,255,.30), rgba(81,162,255,0) 72%),
    radial-gradient(circle 260px at 99% 98%, rgba(34,211,238,.30), rgba(34,211,238,0) 72%);
  animation: floatBlob 6s ease-in-out infinite;
}
@keyframes floatBlob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-wrap::after { animation: none; }
}

/* ===== 阅读舞台 =====
   注意：perspective 只作用在「正在翻动的叶片」自身 transform 上，
   不要放在 .stage 上——否则放大后整本书处于透视语境，左右两页会被
   透视拉伸成梯形（用户看到的“画面歪了”）。
   居中一律交给 .stage 的 margin:auto，**不要用 justify-content:center**：
   当书本比可视区大（放大后）时，center 会把溢出的部分**左右各切一半**，
   左侧那半永远滚不到（scrollLeft 不能为负）→ 表现为"放大后拖不动/左边看不到"。
   margin:auto 则相反：有富余空间时居中，溢出时自动变成 0、贴左排列，整本书都能滚到。 */
.viewer {
  position: relative; z-index: 1;   /* 盖在背景之上，自身透明以透出背景 */
  flex: 1; overflow: auto;
  /* --pad-x：左右基础内边距（JS 也用同一数值算书本基准尺寸，见 app.js 的 viewerPadX()）。
     padding-left 里的 --drawer-inset 由 JS 按"目录抽屉是否展开"赋值 = 抽屉实际宽度：
     目录展开时书本整体右移、在"目录右侧的剩余区域"里居中；点 ✕ 收起后归零、重回整屏居中。
     （书本**尺寸**不受它影响——fitSize() 只用 --pad-x 算，所以开关目录不会缩放页面。）
     过渡时长与 .toc-drawer 的 .26s 对齐，让"抽屉滑出"和"书本让位"同步，不脱节。
     上下内边距只留"操作条所需的最小安全区"：100% 时书本是**高度受限**的
     （横向必然有余量），所以上下每收回 1px，书就大一点 → 这里收到最小。 */
  --pad-x: 24px;
  padding: 6px var(--pad-x) 42px calc(var(--pad-x) + var(--drawer-inset, 0px));
  /* 留白的过渡动画**只在开关目录时**开（见下方 .inset-anim）：
     窗口缩放时留白必须立刻到位，否则 260ms 过渡期内箭头/拖动状态会按"中间位置"
     算一次就定下来，落点会偏一整个抽屉的半个宽度（实测偏 182px）。 */
  display: flex; justify-content: flex-start; align-items: safe center;
  background: transparent;
  user-select: none; touch-action: none;
  /* 关键：预留垂直滚动条槽位，避免翻页时滚动条出现/消失导致 flex 居中内容整体左右/上下跳动 */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.viewer.zoomed { cursor: grab; }
.viewer.grabbing { cursor: grabbing; }
/* 只要横向/纵向能拖动就给抓手光标，提示"这里能拖"（由 JS 按实际溢出情况切换） */
.viewer.panning-enabled { cursor: grab; }
.viewer.panning-enabled.grabbing { cursor: grabbing; }

/* ===== 目录让位动画（仅在开关目录时挂上 .inset-anim）=====
   书本、左下翻页条、顶部板块描述三者都随 --drawer-inset 移动，
   必须用同一个时长，才能"抽屉滑出 ↔ 正文让位"同步，不脱节。
   不挂 .inset-anim 时（窗口缩放 / 首次进入）这些属性瞬间到位，箭头与拖动状态才不会被
   过渡中间值带偏。 */
.viewer-wrap.inset-anim .viewer { transition: padding-left .26s ease; }
.viewer-wrap.inset-anim .page-nav { transition: left .26s ease; }
.viewer-wrap.inset-anim .cur-section { transition: left .26s ease; }
.stage {
  position: relative; display: inline-block;
  margin: auto;            /* 有富余空间→居中；溢出→归 0 贴左，放大后不裁切、两侧都能滚到 */
  overflow: visible;
}
.book {
  position: relative; display: flex; background: #fbfbfd;
  border-radius: 4px; box-shadow: 0 12px 48px rgba(20,40,80,.30);
}
/* 中缝阴影 */
.book::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 22px; transform: translateX(-50%);
  background: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 45%,
    rgba(0,0,0,.14) 50%, rgba(0,0,0,.10) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none; z-index: 6;
}
.page-slot {
  position: relative; background: #fff; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: stretch; justify-content: center;
}
.page-slot.left { box-shadow: inset -1px 0 0 #dfe4ec; }
.page-slot canvas { display: block; width: 100%; height: 100%; }
.solo {
  display: block; background: #fff; border-radius: 4px;
  box-shadow: 0 12px 48px rgba(20,40,80,.30);
}
.hidden { display: none !important; }

/* 控件条：组间距 */
.ctl-group { display: inline-flex; align-items: center; gap: 2px; }

/* ===== 翻页叶片（3D）=====
   perspective 写在叶片自身 transform 里，3D 翻页效果不变，
   但阅读中的书页（.book / .solo）不会再被透视歪斜。 */
.flip-leaf {
  position: absolute; top: 0; height: 100%; width: 50%;
  transform-style: preserve-3d; pointer-events: none; z-index: 10;
  /* 提前提升到合成层，翻页时只做 transform，避免每帧重排/重绘导致的掉帧 */
  will-change: transform;
}
.flip-leaf.right { left: 50%; transform-origin: left center; }
.flip-leaf.left { left: 0; transform-origin: right center; }
.flip-leaf .face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; backface-visibility: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}
.flip-leaf .face.back { transform: rotateY(180deg); }
/* 翻动时的明暗变化 */
.flip-leaf.right .face.front::after,
.flip-leaf.right .face.back::after,
.flip-leaf.left .face.front::after,
.flip-leaf.left .face.back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.flip-leaf.right .face.front::after { background: linear-gradient(to left, rgba(0,0,0,0) 55%, rgba(0,0,0,.22)); }
.flip-leaf.right .face.back::after  { background: linear-gradient(to right, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 45%); }
.flip-leaf.left .face.front::after  { background: linear-gradient(to right, rgba(0,0,0,0) 55%, rgba(0,0,0,.22)); }
.flip-leaf.left .face.back::after   { background: linear-gradient(to left, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 45%); }

.loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); background: rgba(255,255,255,.6); z-index: 20;
}
/* 占位封面已显示、但正文仍在后台按需取时用。
   此时**不能**再盖住画面（那会挡住刚画好的封面），改成底部居中的小胶囊提示——
   否则用户以为已经加载完，点翻页却没反应，会当成坏了。 */
.loading.mini {
  inset: auto;
  left: 50%; bottom: 58px;
  transform: translateX(-50%);
  display: block; width: max-content;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(20,40,80,.14);
  font-size: 13px; white-space: nowrap;
  color: var(--muted); z-index: 16;
  pointer-events: none;
}
/* 用户在"正文还没就绪"时点了翻页/目录/缩放 → 胶囊变蓝并轻微跳动一下，
   明确告诉用户"点到了，正在处理"。静默无反应最容易被当成页面坏了。 */
.loading.mini.ack {
  color: #fff; font-weight: 600;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 8px 26px rgba(0,102,202,.42);
  animation: ackPop .5s ease;
}
@keyframes ackPop {
  0%   { transform: translateX(-50%) scale(1); }
  35%  { transform: translateX(-50%) scale(1.06); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ===== 悬浮控件：白色毛玻璃胶囊 ===== */
.float-pill, .float-bar {
  position: absolute; z-index: 14;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(20,40,80,.14);
  border-radius: 12px;
}
/* 左上角：目录按钮 */
.float-pill {
  top: 14px; left: 14px;
  padding: 9px 15px; font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
.float-pill:hover { color: var(--brand); border-color: var(--brand); background: #fff; }

/* 底部角标控件条。
   高度必须 ≤ .viewer 的 padding-bottom 减去底部偏移（当前 42-5=37px 可用），
   否则 100% 时会压住书页右下角/页码。桌面收紧到 ~37px 换取更大的书；
   窄屏（书是宽度受限、底部留白不影响大小）在下面的媒体查询里恢复成舒适点按尺寸。 */
.float-bar { display: flex; align-items: center; gap: 2px; padding: 4px; }
/* 左下翻页条要跟书本一起让位：抽屉 z-index(45) 高于悬浮控件(14)，
   若不加这段留白，"上一页/下一页"会被抽屉整条盖住 → 既看不见也点不动。 */
.page-nav { left: calc(12px + var(--drawer-inset, 0px)); bottom: 5px; }
.zoom-ctl { right: 12px; bottom: 5px; }
.fbtn {
  border: none; background: transparent; color: var(--ink);
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s;
}
.fbtn:hover { background: var(--brand-light); color: var(--brand); }
.fbtn:active { background: var(--brand-light); }
.page-info { padding: 0 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.zoom-label { padding: 0 4px; font-size: 12.5px; color: var(--muted); min-width: 42px; text-align: center; }

/* 顶部居中：当前板块描述。
   放在书页顶部正中——那里是页面的白边留白，所以**不需要**为它预留上下内边距 */
.cur-section {
  /* 居中的是"书本所在的阅读区"而不是裸视口：阅读区整体右移了 --drawer-inset，
     它的中心 = 视口中心 + 留白/2（不跟着走的话，抽屉一开它就偏出书本中心半个抽屉宽）。 */
  position: absolute; top: 10px; left: calc(50% + var(--drawer-inset, 0px) / 2); transform: translateX(-50%);
  z-index: 13; max-width: 52%;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(20,40,80,.12);
  font-size: 13px; font-weight: 600; color: var(--brand);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cur-section:empty { display: none; }

/* 左右翻页箭头：白色玻璃质感、品牌色描边。
   位置由 JS 动态计算，紧贴书（或单页）的左右两侧；
   仅当放大溢出、书比视口还宽时，才被钳制到视口边缘。 */
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--ink);
  border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer; z-index: 12;
  box-shadow: 0 4px 16px rgba(20,40,80,.18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .15s, transform .15s, color .15s;
}
.nav-arrow:hover { background: #fff; color: var(--brand); }
.nav-arrow:active { transform: translateY(-50%) scale(.94); }
.nav-arrow.left { left: 16px; }
.nav-arrow.right { right: 16px; }
.nav-arrow.disabled { opacity: .3; pointer-events: none; }
.nav-arrow.disabled:hover { background: rgba(255,255,255,.85); color: var(--ink); }
.nav-arrow svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

.mobile-hint {
  position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 14;
  background: rgba(31,39,51,.85); color: #fff; font-size: 13px; padding: 8px 14px;
  border-radius: 18px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* ===== 悬浮目录抽屉（浮层，常开，不占观看面积；仅点 ✕ / Esc 收起，无变暗遮罩） ===== */
.toc-drawer {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
  width: min(var(--toc-w), 88vw);
  background: #fff; border-right: 1px solid var(--line);
  box-shadow: 0 12px 48px rgba(20,40,80,.25);
  transform: translateX(-102%); transition: transform .26s ease;
  z-index: 45; display: flex; flex-direction: column;
}
.toc-drawer.open { transform: translateX(0); }
/* 首屏「占位封面」阶段专用：抽屉直接就位，不播 .26s 滑入。
   否则用户第一眼看到的是"书本已让位、抽屉还在往左滑"的半成品画面；
   双 rAF 之后由 JS 摘掉本类，此后用户手动开合仍有动画。 */
.toc-drawer.no-anim { transition: none; }
.toc-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--line);
}
.toc-drawer-title { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.toc-close {
  border: none; background: transparent; color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px;
  flex: 0 0 auto; transition: background .15s, color .15s;
}
.toc-close:hover { background: var(--brand-light); color: var(--brand); }
.toc { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 40px; }

/* 目录顶部直达（首页 / 尾页） */
.toc-leads { margin: 2px 0 4px; }
.toc-lead {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 14px; font-size: 13.5px; font-weight: 700;
  color: var(--brand-dark); cursor: pointer; border-radius: 6px;
  background: linear-gradient(90deg, var(--brand-light), #fff 70%);
  border-left: 3px solid var(--brand);
}
.toc-lead:hover { background: var(--brand-light); }
.toc-lead.active { background: var(--brand); color: #fff; }
.toc-lead .ti-name { flex: 1; }
.toc-sep { height: 1px; background: var(--line); margin: 4px 10px 8px; }

/* 目录：板块 + 条目 */
.toc-chapter { margin-bottom: 4px; }
.toc-chapter > .ch-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px;
  color: var(--brand-dark); background: var(--brand-light);
}
.toc-chapter > .ch-head .arrow { transition: transform .15s; font-size: 11px; }
.toc-chapter.collapsed > .ch-head .arrow { transform: rotate(-90deg); }
.toc-chapter > .ch-head:hover { background: #DDE8FB; }
.toc-chapter > .ch-head.active { background: var(--brand); color: #fff; }
.toc-chapter > .ch-head.active .arrow { color: #fff; }
.toc-items { padding: 2px 0 6px 10px; margin-left: 12px; border-left: 2px solid var(--line); }
.toc-chapter.collapsed .toc-items { display: none; }
.toc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px 7px 22px; font-size: 13px;
  color: var(--ink); cursor: pointer; border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  position: relative;
}
.toc-item::before {
  content: ""; position: absolute; left: 8px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%; background: #C7D3E6;
  transform: translateY(-50%);
}
.toc-item .ti-name { flex: 1; }
.toc-item .ti-pg { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.toc-item:hover { background: #F2F6FD; color: var(--brand); }
.toc-item.active {
  background: var(--brand-light); color: var(--brand);
  border-left-color: var(--brand); font-weight: 600;
}
.toc-item.active .ti-pg { color: var(--brand); }

/* ===== 窄屏（手机）适配 ===== */
@media (max-width: 860px) {
  .topnav { display: none; }        /* 与官网一致：窄屏收起主导航 */
  .topbar-inner { padding: 0 16px; gap: 12px; }
  .brand-logo { height: 34px; }
  .float-search { top: 10px; right: 10px; }
  .float-search input { width: 150px; height: 34px; font-size: 13px; }
  /* 窄屏：单页模式下书是"宽度受限"，所以底部留白不影响书的大小 → 恢复舒适的 48px 点按区，
     并且左右基础内边距收紧到 12px（JS 的 viewerPadX() 会读到同一个 --pad-x，保持一致） */
  .viewer { --pad-x: 12px; padding: 16px var(--pad-x) 62px calc(var(--pad-x) + var(--drawer-inset, 0px)); }
  .nav-arrow { width: 52px; height: 52px; }
  .nav-arrow.left { left: 8px; }
  .nav-arrow.right { right: 8px; }
  .nav-arrow svg { width: 26px; height: 26px; }
  .float-pill { top: 10px; left: 10px; padding: 8px 12px; font-size: 13px; }
  .float-bar { padding: 5px; }
  .page-nav { left: calc(10px + var(--drawer-inset, 0px)); bottom: 12px; }
  .zoom-ctl { right: 10px; bottom: 12px; }
  .fbtn { padding: 7px 10px; font-size: 13px; }
  .page-info { padding: 0 4px; font-size: 12.5px; }
  .cur-section { top: 10px; max-width: 44%; font-size: 12px; padding: 7px 12px; }
  .mobile-hint { bottom: 62px; }
}