:root {
  --md-primary: #4051b5;
  --md-primary-deep: #303fa1;
  --md-primary-ink: #27327a;
  --md-primary-bg: rgba(64, 81, 181, .07);
  --md-bg1: #ffffff;
  --md-bg2: #F5F6FA;
  --md-card: #ffffff;
  --md-border: var(--md-gray-4);
  --md-title: rgba(0, 0, 0, .87);
  --md-body: rgba(0, 0, 0, .72);
  --md-sub: var(--md-gray-1);
  --md-code-bg: #0f172a;
  --md-code-fg: #e2e8f0;
  --md-nav-h: 56px;
  --md-kb-h: 46px;

  /* ===== 设计令牌（间距/字号/圆角/阴影/层级/过渡统一管理） ===== */
  --md-content-max: 1344px;
  --md-sidebar-w: 288px;
  --md-toc-w: 256px;
  --md-sp-1: 4px;
  --md-sp-2: 8px;
  --md-sp-3: 12px;
  --md-sp-4: 16px;
  --md-sp-6: 24px;
  --md-r-xs: 4px;
  --md-r-sm: 6px;
  --md-r-md: 8px;
  --md-r-lg: 12px;
  --md-fs-2xs: 11px;
  --md-fs-xs: 12px;
  --md-fs-sm: 13px;
  --md-fs-base: 14px;
  --md-fs-md: 15px;
  --md-fs-lg: 16px;
  --md-fs-xl: 20px;
  --md-fs-2xl: 24px;
  /* 正文标题层级（h1~h6）：**只靠字号 + 字重**区分，不加颜色、边框或图标。
     单独命名而不复用 --md-fs-*，因为后者被导航、表格、正文等共用，
     改值会连带影响别处（尤其 --md-fs-lg 就是正文的大小）。
     阶梯（相对正文 16px）：32 → 25 → 21 → 18 → 16 → 14，
     相邻差值 7/4/3/2/2px，任意两级都能一眼分开。 */
  --md-h1: 32px;
  --md-h2: 25px;
  --md-h3: 21px;
  --md-h4: 18px;
  --md-h5: 16px;
  --md-h6: 14px;
  --md-lh-tight: 1.35;
  --md-lh-normal: 1.6;
  --md-lh-relaxed: 1.8;
  --md-shadow-1: 0 1px 3px rgba(0, 0, 0, .08);
  --md-shadow-2: 0 4px 16px rgba(0, 0, 0, .14);
  --md-shadow-3: 0 8px 32px rgba(0, 0, 0, .24);
  --md-z-nav: 80;
  --md-z-fab: 85;
  --md-z-backdrop: 90;
  --md-z-drawer: 100;
  --md-z-lightbox: 200;
  --md-z-toast: 999;
  --md-ts-fast: .15s ease;
  --md-ts-base: .25s ease;
  --md-ts-slow: .3s ease;
  /* 灰阶：1 最深（次要文字）→ 5 最浅（浅底），统一边框/分隔线/辅助文字层次 */
  --md-gray-1: rgba(0, 0, 0, .55);
  --md-gray-2: rgba(0, 0, 0, .40);
  --md-gray-3: rgba(0, 0, 0, .20);
  --md-gray-4: rgba(0, 0, 0, .10);
  --md-gray-5: rgba(0, 0, 0, .04);
}
/* 深色配色：手动指定（data-theme="dark"）或跟随系统（未显式指定主题时） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-bg1: #101116;
    --md-bg2: #0b0c10;
    --md-card: #16171d;
    --md-border: rgba(255, 255, 255, .12);
    --md-title: rgba(255, 255, 255, .90);
    --md-body: rgba(255, 255, 255, .72);
    --md-sub: rgba(255, 255, 255, .56);
    --md-primary-bg: rgba(64, 81, 181, .18);
  }
}
:root[data-theme="dark"] {
  --md-bg1: #101116;
  --md-bg2: #0b0c10;
  --md-card: #16171d;
  --md-border: rgba(255, 255, 255, .12);
  --md-title: rgba(255, 255, 255, .90);
  --md-body: rgba(255, 255, 255, .72);
  --md-sub: rgba(255, 255, 255, .56);
  --md-primary-bg: rgba(64, 81, 181, .18);
}
/* 响应式断点（全站统一）：1024 = 平板及以下（侧栏/大纲抽屉化）；768 = 手机及以下（导航精简等）；480 = 极窄屏 */
* { box-sizing: border-box; }
html, body { height: 100%; }
/* 抑制移动端的"文字自动放大"，让各浏览器 / 内嵌 WebView 都按 CSS 里写的 px 渲染。
 *
 * 为什么必须有：移动端 Chrome 系列（含微信 Android 的 XWeb 内核）有一套
 * Font Boosting —— 它按"文本块"启发式判断该不该把文字放大，**同一份 CSS
 * 在不同内核里放大的结果可以不同**。这正是"手机系统浏览器看着正常、
 * 微信里看着不一样"的一个常见来源。
 * `100%` 表示不调整（抑制自动放大），同时**保留**用户的缩放能力（无障碍友好），
 * 所以不用 `none`。
 *
 * 注意：系统浏览器此前若确实被放大过，加上这条后会变小一点 —— 那是回到
 * 设计值，而不是被改坏了。
 *
 * ⚠️ 不要删掉这条：本插件页面是独立完整 HTML（不套主题外壳），
 * 主题里的同名设置**不会**作用到这里。 */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  padding-top: var(--md-nav-h);
  background: var(--md-bg2);
  color: var(--md-body);
  /* 字体栈（2026-09-29 按作者指定改为如下顺序）。
   *
   * ⚠️ 关于 "阿里巴巴普惠体 3.0"：它**不是任何平台的系统字体**，
   * 必须先用 @font-face 加载 webfont 才会生效。若未加载，
   * 这一项在几乎所有设备上都会直接跳过（本文件目前**没有**加载它）。
   * 若要真正启用，需要引入该字体的 woff2 并加 @font-face ——
   * 注意中文全字库体积大（数 MB），会显著影响首屏，建议做子集化。
   *
   * ⚠️ 与上一版相比，本栈**去掉了** -apple-system / BlinkMacSystemFont /
   * "Segoe UI" / "PingFang SC" / "Microsoft YaHei" / Roboto。
   * 影响：
   *   - iOS / macOS：拉丁字母不再走 San Francisco（-apple-system）；
   *     中文将由 sans-serif 兜底（iOS 的 sans-serif 中文默认仍是苹方，
   *     所以中文观感一般不变）。
   *   - Windows：中文由 sans-serif 兜底（Chrome 默认即微软雅黑）。
   * 保留 sans-serif 兜底是必要的 —— 否则未命中任何字体时行为不可预期。 */
  font-family: "阿里巴巴普惠体 3.0", "Noto Sans SC", "思源黑体 CN",
    "HarmonyOS Sans SC", sans-serif;
}

/* 顶部导航 */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--md-nav-h);
  z-index: var(--md-z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--md-sp-6);
  background: var(--md-bg1);
  border-bottom: 1px solid var(--md-border);
}
.nav-brand { display: flex; align-items: center; gap: var(--md-sp-3); text-decoration: none; color: var(--md-title); }
.nav-brand img { width: 30px; height: 30px; border-radius: var(--md-r-md); object-fit: cover; }
.nav-logo-fallback {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--md-fs-md); font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #4051b5, #303fa1);
  border-radius: var(--md-r-md);
}
.nav-title { font-size: var(--md-fs-lg); font-weight: 700; letter-spacing: .2px; }
.nav-user { display: flex; align-items: center; gap: var(--md-sp-2); color: var(--md-sub); font-size: var(--md-fs-base); }
.nav-user .dot { width: 8px; height: 8px; border-radius: 50%; background: #4051b5; }
.nav-trails { display: flex; align-items: center; gap: var(--md-sp-2); }
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sp-2);
  height: 32px;
  padding: 0 var(--md-sp-3);
  font-size: var(--md-fs-sm);
  color: var(--md-sub);
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-sm);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--md-ts-fast), border-color var(--md-ts-fast), background var(--md-ts-fast);
}
.nav-btn:hover {
  color: var(--md-primary-deep);
  border-color: var(--md-primary);
  background: var(--md-primary-bg);
}
.nav-btn.icon-only { width: 32px; padding: 0; justify-content: center; }
.nav-btn svg { width: 16px; height: 16px; }
.nav-right { display: flex; align-items: center; gap: var(--md-sp-4); }
.nav-btn--kb { color: #303fa1; border-color: #C5CAE9; background: #EDEFF8; }
.nav-btn--kb:hover { color: #27327a; border-color: #9FA8DA; background: #E0E4F3; }
.nav-btn--sh { color: #303fa1; border-color: #C5CAE9; background: #EDEFF8; }
.nav-btn--sh:hover { color: #27327a; border-color: #9FA8DA; background: #E0E4F3; }

/* ================= 三栏布局：撑满视口高度，各栏内部滚动 ================= */
.md-read {
  display: flex;
  height: calc(100vh - var(--md-nav-h));
  padding: var(--md-sp-2);
  gap: var(--md-sp-1);
  min-width: 0;
  max-width: var(--md-content-max);
  margin: 0 auto;
}

/* 左侧目录 */
.md-sb {
  flex: 0 0 auto;
  width: var(--md-sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-md);
}
.md-sb-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--md-sp-3);
  padding: var(--md-sp-3) var(--md-sp-4) var(--md-sp-3);
  border-bottom: 1px solid var(--md-border);
}
.md-sb-logo {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--md-r-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.md-sb-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.md-sb-logo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--md-fs-md);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4051b5, #303fa1);
}
.md-sb-name { min-width: 0; }
.md-sb-name h2 {
  margin: 0;
  font-size: var(--md-fs-md);
  font-weight: 700;
  color: var(--md-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-sb-name p {
  margin: 3px 0 0;
  font-size: var(--md-fs-xs);
  color: var(--md-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-sb-search {
  position: relative;
  flex: 0 0 auto;
  margin: var(--md-sp-3) var(--md-sp-3) 4px;
}
.md-sb-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--md-sub);
  pointer-events: none;
}
.md-sb-search input {
  width: 100%;
  padding: var(--md-sp-2) var(--md-sp-3) var(--md-sp-2) 32px;
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-sm);
  background: var(--md-bg2);
  color: var(--md-title);
  font-size: var(--md-fs-sm);
  outline: none;
  transition: border-color var(--md-ts-fast), box-shadow var(--md-ts-fast);
}
.md-sb-search input:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-primary-bg);
}
.md-tree-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--md-sp-2) var(--md-sp-3) var(--md-sp-4);
}
.md-tree, .md-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.md-tree ul {
  padding-left: 14px;
  margin-left: 9px;
  border-left: 1px solid var(--md-border);
}
.md-tree li { margin: 1px 0; position: relative; }
.md-tree a {
  display: flex;
  align-items: center;
  gap: var(--md-sp-2);
  padding: var(--md-sp-2) var(--md-sp-2);
  border-radius: var(--md-r-sm);
  color: var(--md-body);
  text-decoration: none;
  font-size: var(--md-fs-sm);
  line-height: 1.4;
  transition: background var(--md-ts-fast), color var(--md-ts-fast);
}
.md-tree a:hover { background: var(--md-gray-5); color: var(--md-title); }
.md-tree a.active {
  background: rgba(0, 0, 0, .07);
  color: var(--md-title);
  font-weight: 600;
}
.md-tree-caret {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sub);
  border-radius: var(--md-r-xs);
  cursor: pointer;
  transition: transform var(--md-ts-base), background var(--md-ts-fast), color var(--md-ts-fast);
}
.md-tree-caret:hover { background: var(--md-primary-bg); color: var(--md-primary-deep); }
.md-tree-caret svg { width: 12px; height: 12px; }
li.md-fold > a > .md-tree-caret { transform: rotate(-90deg); }
li.md-fold > ul { display: none; }
li.md-leaf > a { padding-left: 6px; }
.md-tree .md-title-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-tree li.md-has-child > a .md-title-text { font-weight: 600; }
.md-tree .md-lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #d97706;
  margin-left: 4px;
}
.md-tree .md-lock svg { width: 12px; height: 12px; }

/* 中间正文 */
.md-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-md);
  padding: var(--md-sp-4) var(--md-sp-6) var(--md-sp-6);
}
.md-crumb {
  display: flex;
  align-items: center;
  gap: var(--md-sp-2);
  font-size: var(--md-fs-sm);
  color: var(--md-sub);
  margin-bottom: 12px;
}
.md-crumb a { color: var(--md-primary-deep); text-decoration: none; }
.md-crumb a:hover { text-decoration: underline; }
.md-crumb .sep { color: var(--md-gray-3); }

.md-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--md-sp-4);
  margin-bottom: 8px;
}
.md-title {
  margin: 0;
  font-size: var(--md-fs-2xl);
  line-height: 1.3;
  font-weight: 800;
  color: var(--md-title);
}
.md-actions { display: flex; gap: var(--md-sp-2); flex: 0 0 auto; }
.md-act {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-sm);
  background: var(--md-card);
  color: var(--md-sub);
  cursor: pointer;
  transition: color var(--md-ts-fast), border-color var(--md-ts-fast),
    background var(--md-ts-fast), transform var(--md-ts-fast);
}
.md-act:hover {
  color: var(--md-primary-deep);
  border-color: var(--md-primary);
  background: var(--md-primary-bg);
}
.md-act.on { color: var(--md-primary-deep); }
.md-act svg { width: 16px; height: 16px; }

.md-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--md-sp-2) var(--md-sp-4);
  font-size: var(--md-fs-sm);
  color: var(--md-sub);
  margin-bottom: 6px;
}
.md-meta .item { display: inline-flex; align-items: center; gap: var(--md-sp-2); }
.md-meta svg { width: 14px; height: 14px; }
.md-meta .tags { display: inline-flex; gap: var(--md-sp-2); }
.md-meta .tag {
  font-size: var(--md-fs-xs);
  color: var(--md-primary-deep);
  background: var(--md-primary-bg);
  border-radius: 999px;
  padding: 2px var(--md-sp-2);
}

.md-content {
  margin-top: 14px;
  font-size: var(--md-fs-lg);
  line-height: 1.8;
  color: var(--md-body);
  word-wrap: break-word;
}
.md-content h1, .md-content h2, .md-content h3,
.md-content h4, .md-content h5, .md-content h6 {
  color: var(--md-title);
  line-height: 1.35;
  margin: 1.5em 0 .55em;
  /* 锚点跳转时留出固定头部的高度，避免标题被盖住 */
  scroll-margin-top: calc(var(--md-nav-h) + 16px);
}
.md-content h1 { font-size: var(--md-h1); font-weight: 700; }
.md-content h2 {
  font-size: var(--md-h2);
  font-weight: 700;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--md-border);
}
.md-content h3 { font-size: var(--md-h3); font-weight: 700; }
/* h4~h6 此前没有定义，会落到浏览器默认值：h4 默认 1em（与正文同为 16px，
   且字重是 bold），导致 h3 与 h4 字号完全相同、h4 甚至比 h3 更粗。
   这里补齐，使六级标题各自有明确、单调递减的字号。
   字重（2026-09-29 按作者最终决定）：**六级统一 700**。
   ⇒ 字重不再区分层级，**层级完全靠字号承担**（32/25/21/18/16/14）。
   这样做的好处：不依赖 500/600 这类"可能没有独立字面"的中间档，
   跨设备（尤其微信 XWeb vs 系统 Chrome）表现更一致。
   代价：h4~h6 与正文粗体 strong（也是 700）在字重上不再有区分。
   （历史：曾短暂改为 h1~h3=700 / h4~h6=600，已按作者要求撤销。） */
.md-content h4 { font-size: var(--md-h4); font-weight: 700; }
.md-content h5 { font-size: var(--md-h5); font-weight: 700; }
.md-content h6 { font-size: var(--md-h6); font-weight: 700; }
.md-content p { margin: .85em 0; }
.md-content a { color: var(--md-primary-deep); }
.md-content ul, .md-content ol { padding-left: 1.4em; }
.md-content li { margin: .28em 0; }
.md-content strong { color: var(--md-title); }
.md-content img { max-width: 100%; border-radius: var(--md-r-md); }
.md-content hr {
  border: none;
  border-top: 1px solid var(--md-border);
  margin: 1.8em 0;
}
.md-content blockquote {
  margin: 1em 0;
  padding: var(--md-sp-3) 15px;
  background: var(--md-primary-bg);
  border-left: 4px solid var(--md-primary);
  border-radius: 0 var(--md-r-md) var(--md-r-md) 0;
  color: var(--md-body);
}
.md-content blockquote > * { margin: .5em 0; }
.md-content blockquote > :first-child { margin-top: 0; }
.md-content blockquote > :last-child { margin-bottom: 0; }
.md-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: var(--md-fs-sm);
}
.md-content th, .md-content td {
  border: 1px solid var(--md-border);
  padding: var(--md-sp-2) var(--md-sp-3);
}
.md-content th { background: var(--md-bg2); color: var(--md-title); font-weight: 600; }

.md-content pre {
  position: relative;
  margin: 1em 0;
  background: var(--md-code-bg);
  color: var(--md-code-fg);
  border-radius: var(--md-r-md);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .18);
}
.md-content pre code {
  display: block;
  padding: var(--md-sp-3) var(--md-sp-4);
  overflow: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--md-fs-sm);
  line-height: 1.65;
}
.md-lang {
  position: absolute;
  top: 8px;
  right: 38px;
  font-size: var(--md-fs-2xs);
  color: #94a3b8;
  font-family: inherit;
}
.md-copy {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 3px var(--md-sp-2);
  font-size: var(--md-fs-xs);
  color: #cbd5e1;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--md-r-sm);
  cursor: pointer;
  transition: background var(--md-ts-fast), color var(--md-ts-fast);
}
.md-copy:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.md-content pre code .comment,
.md-content pre code .token.keyword { color: #9FA8DA; }

.md-empty {
  color: var(--md-sub);
  padding: 60px 0;
  text-align: center;
}

/* 右侧大纲 */
.md-toc {
  flex: 0 0 auto;
  width: var(--md-toc-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-md);
}
.md-toc-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--md-sp-2);
  padding: var(--md-sp-3) 13px;
  font-size: var(--md-fs-sm);
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--md-title);
  border-bottom: 1px solid var(--md-border);
}
.md-toc-title svg { width: 15px; height: 15px; color: var(--md-primary-deep); }
.md-toc-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: var(--md-sp-2) var(--md-sp-2) var(--md-sp-4);
}
.md-toc-list ul {
  list-style: none;
  margin: 2px 0;
  padding-left: 11px;
  border-left: 1px solid var(--md-border);
}
.md-toc-list li { margin: 2px var(--md-sp-1); }
.md-toc-item {
  display: flex;
  align-items: center;
  gap: var(--md-sp-2);
  min-height: 30px;
  padding: 4px var(--md-sp-2);
  border-radius: var(--md-r-sm);
  cursor: pointer;
  transition: background var(--md-ts-fast), color var(--md-ts-fast);
}
.md-toc-item:hover { background: var(--md-gray-5); }
.md-toc-item.active {
  background: rgba(0, 0, 0, .07);
}
.md-toc-item a {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-size: var(--md-fs-sm);
  line-height: 1.4;
  color: var(--md-body);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--md-ts-fast);
}
.md-toc-item:hover a { color: var(--md-title); }
.md-toc-item.active a { color: var(--md-title); font-weight: 600; }
.md-toc-caret {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sub);
  border-radius: var(--md-r-xs);
  transition: transform var(--md-ts-base), color var(--md-ts-fast), background var(--md-ts-fast);
}
.md-toc-caret:hover { background: var(--md-primary-bg); color: var(--md-primary-deep); }
.md-toc-caret svg { width: 11px; height: 11px; }
.md-toc-spacer { flex: 0 0 auto; width: 16px; }
.md-toc-list li.toc-fold > .md-toc-item > .md-toc-caret { transform: rotate(-90deg); }
.md-toc-list li.toc-fold > ul { display: none; }

/* ================= 拖拽手柄 ================= */
.resize-handle {
  flex: 0 0 5px;
  align-self: stretch;
  margin: 0 1px;
  cursor: col-resize;
  border-radius: 3px;
  position: relative;
  transition: background var(--md-ts-fast);
  touch-action: none;
}
.resize-handle:hover, .resize-handle.dragging {
  background: var(--md-primary);
}
.resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: var(--md-border);
  opacity: 0;
  transition: opacity var(--md-ts-fast);
}
.resize-handle:hover::after, .resize-handle.dragging::after {
  opacity: 1;
  background: var(--md-primary);
}

.md-toast {
  position: fixed;
  left: 50%;
  top: calc(var(--md-nav-h) + 16px);
  transform: translate(-50%, -12px);
  background: rgba(0, 0, 0, .87);
  color: #fff;
  padding: var(--md-sp-2) var(--md-sp-4);
  font-size: var(--md-fs-sm);
  border-radius: var(--md-r-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--md-ts-base), transform var(--md-ts-base);
  z-index: var(--md-z-toast);
}
.md-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 移动端：知识库名字（网站头部之下，占文档流，不覆盖正文） */
.nav-left { display: flex; align-items: center; gap: var(--md-sp-2); min-width: 0; }
.kb-bar {
  display: none;
  height: var(--md-kb-h);
  align-items: center;
  padding: 0 var(--md-sp-4);
  background: var(--md-card);
  border-bottom: 1px solid var(--md-border);
}
.kb-bar-name {
  min-width: 0;
  font-size: var(--md-fs-md);
  font-weight: 700;
  color: var(--md-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 正文头部：面包屑 + 抽屉按钮（仅移动端显示） */
.md-head { display: none; flex-direction: column; gap: var(--md-sp-3); margin-bottom: 14px; }
.md-crumb {
  display: flex;
  align-items: center;
  gap: var(--md-sp-2);
  font-size: var(--md-fs-sm);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.md-crumb::-webkit-scrollbar { display: none; }
.md-crumb > span { flex: none; color: var(--md-sub); }
.md-crumb > span.sep { color: var(--md-border); }
.md-crumb > span:last-child { color: var(--md-title); font-weight: 500; }
.md-head-actions { display: none; gap: var(--md-sp-2); flex-wrap: wrap; }
.md-head-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--md-sp-2);
  padding: var(--md-sp-2) var(--md-sp-3);
  font-size: var(--md-fs-sm);
  color: var(--md-sub);
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-sm);
  cursor: pointer;
  transition: color var(--md-ts-fast), border-color var(--md-ts-fast), background var(--md-ts-fast);
}
.md-head-btn:hover { color: var(--md-primary-deep); border-color: var(--md-primary); background: var(--md-primary-bg); }
.md-head-btn svg { width: 15px; height: 15px; }
.md-head-btn--menu,
.md-head-btn--toc { display: none; }

/* 移动端两侧抽屉共用遮罩 */
.md-backdrop { display: none; }

/* 上一篇 / 下一篇 */
.md-doc-nav { display: flex; gap: var(--md-sp-3); margin-top: 26px; }
.md-doc-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--md-sp-3);
  padding: var(--md-sp-3) var(--md-sp-4);
  text-decoration: none;
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-lg);
  transition: border-color var(--md-ts-fast), background var(--md-ts-fast);
}
.md-doc-nav-item:hover { border-color: var(--md-primary); background: var(--md-primary-bg); }
.md-doc-nav-item--next { flex-direction: row-reverse; }
.md-doc-nav-icon { flex: none; width: 18px; height: 18px; color: var(--md-sub); }
.md-doc-nav-content { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.md-doc-nav-item--prev .md-doc-nav-content { align-items: flex-start; }
.md-doc-nav-item--next .md-doc-nav-content { align-items: flex-end; }
.md-doc-nav-label { font-size: var(--md-fs-xs); color: var(--md-sub); }
.md-doc-nav-title {
  max-width: 100%;
  font-size: var(--md-fs-base);
  font-weight: 500;
  color: var(--md-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= 整库目录页（无 docSlug 时正文区展示，像打开一本书） ================= */
.md-kb-toc {
  display: flex;
  flex-direction: column;
  gap: var(--md-sp-4);
}
.md-kb-toc-head {
  padding-bottom: var(--md-sp-4);
  border-bottom: 1px solid var(--md-border);
}
.md-kb-toc-title {
  margin: 0;
  font-size: var(--md-fs-2xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--md-title);
  letter-spacing: -0.01em;
}
.md-kb-toc-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sp-3);
}
.md-kb-toc-tools {
  display: flex;
  align-items: center;
  gap: var(--md-sp-2);
  flex: 0 0 auto;
}
.md-kb-toc-tool {
  padding: 4px 10px;
  font-size: var(--md-fs-xs);
  color: var(--md-sub);
  background: var(--md-bg2);
  border: 1px solid var(--md-border);
  border-radius: var(--md-r-sm);
  cursor: pointer;
  transition: color var(--md-ts-fast), border-color var(--md-ts-fast), background var(--md-ts-fast);
}
.md-kb-toc-tool:hover {
  color: var(--md-primary-deep);
  border-color: var(--md-primary);
  background: var(--md-primary-bg);
}
.md-kb-toc-desc {
  margin: var(--md-sp-2) 0 0;
  color: var(--md-sub);
  font-size: var(--md-fs-base);
  line-height: 1.7;
}
.md-kb-toc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-sp-2) var(--md-sp-4);
  margin-top: var(--md-sp-3);
  color: var(--md-sub);
  font-size: var(--md-fs-sm);
}
/* 目录列表：无圆点；子层靠缩进 + 左侧引导线分层，与抽屉里的文档树（.md-tree ul）一致。
   引导线占 1px，padding 相应减 1px，保证子层箭头仍与父节点文字对齐。 */
.md-kb-toc-list,
.md-kb-toc-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.md-kb-toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--md-sp-1);
}
.md-kb-toc-children {
  display: flex;
  flex-direction: column;
  gap: var(--md-sp-1);
  margin-top: var(--md-sp-1);
  margin-left: var(--md-sp-3);
  padding-left: calc(var(--md-sp-3) - 1px);
  border-left: 1px solid var(--md-border);
}
.md-kb-toc-item { margin: 0; }
.md-kb-toc-link {
  display: flex;
  align-items: center;
  gap: var(--md-sp-2);
  padding: var(--md-sp-2) var(--md-sp-3);
  border-radius: var(--md-r-md);
  color: var(--md-body);
  text-decoration: none;
  font-size: var(--md-fs-md);
  line-height: 1.5;
  transition: background var(--md-ts-fast);
}
.md-kb-toc-link:hover {
  background: var(--md-primary-bg);
}
/* 顶级节点（章）：加粗、稍大字号、深色，视觉上作为「章」 */
.md-kb-toc-list > .md-kb-toc-item > .md-kb-toc-link {
  font-size: var(--md-fs-lg);
  font-weight: 600;
  color: var(--md-title);
  padding-top: var(--md-sp-2);
  padding-bottom: var(--md-sp-2);
}
.md-kb-toc-text {
  min-width: 0;
  flex: 1 1 auto;
}
.md-kb-toc-lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #d97706;
  opacity: .75;
}
.md-kb-toc-lock svg { width: 14px; height: 14px; }
.md-kb-toc-caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--md-sub);
  transition: transform var(--md-ts-fast);
}
.md-kb-toc-caret svg { width: 12px; height: 12px; }
.md-kb-toc-item.md-fold > .md-kb-toc-link > .md-kb-toc-caret { transform: rotate(-90deg); }
.md-kb-toc-item.md-fold > .md-kb-toc-children { display: none; }
.md-kb-toc-link.is-folder { cursor: pointer; }

/* ================= 目录页（无 docSlug）专用布局：隐藏侧栏/大纲/移动端头部，正文目录页独占 ================= */
.md-read.is-toc .md-sb,
.md-read.is-toc .md-toc,
.md-read.is-toc .md-head,
.md-read.is-toc .resize-handle,
.kb-bar.is-toc {
  display: none !important;
}
.md-read.is-toc .md-main {
  padding: var(--md-sp-6);
}
.md-read.is-toc .md-kb-toc {
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
}

/* 正文图片点击放大 */
.md-content img { cursor: zoom-in; }
.md-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--md-z-lightbox);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--md-sp-6);
  background: rgba(0, 0, 0, .9);
  cursor: zoom-out;
}
.md-lightbox.show { display: flex; }
.md-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--md-r-sm);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
}

/* 回到顶部（滚动后出现的浮动按钮） */
.md-fab-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--md-z-fab);
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--md-sub);
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  cursor: pointer;
  transition: color var(--md-ts-fast), border-color var(--md-ts-fast);
}
.md-fab-top:hover { color: var(--md-primary-deep); border-color: var(--md-primary); }
.md-fab-top.show { display: flex; }
.md-fab-top svg { width: 18px; height: 18px; }

/* 窄屏浮动入口（目录 / 本文大纲）。
   为什么需要它：窄屏（≤1024px）改成了整页滚动，位于正文头部的 .md-head 会随内容
   滚走 —— 用户读到一半想看大纲，只能滚回顶部、看完再翻回来。把入口钉在视口右下角即可。
   与「回到顶部」同列堆叠：bottom 取 16（fab-top 的 bottom）+ 40（fab-top 高）+ 8（间隙）。
   默认隐藏，只在窄屏启用（见下方媒体查询）；>1024px 时侧栏与大纲本就常驻。 */
.md-fab-nav {
  position: fixed;
  right: 16px;
  bottom: 64px;
  z-index: var(--md-z-fab);
  display: none;
  flex-direction: column;
  gap: 8px;
}
.md-fab-nav-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--md-sub);
  background: var(--md-card);
  border: 1px solid var(--md-border);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  cursor: pointer;
  transition: color var(--md-ts-fast), border-color var(--md-ts-fast);
}
.md-fab-nav-btn:hover { color: var(--md-primary-deep); border-color: var(--md-primary); }
.md-fab-nav-btn svg { width: 18px; height: 18px; }
/* 「目录」比「大纲」更晚出现：769–1024px 区间左侧文档树仍是常驻面板，
   只有 ≤768px 它才变成抽屉，那时才需要这个入口。断点与 .md-head-btn--menu 一致。 */
.md-fab-nav-btn--menu { display: none; }

@media (max-width: 1024px) {
  /* 高度交给内容撑开，由页面（而非正文容器）滚动 */
  html, body { height: auto; min-height: 100%; }
  .resize-handle.toc-resize { display: none; }
  .kb-bar { display: flex; }
  .md-head { display: flex; }
  /* 整页滚动：知识库名与正文一起向上滚走（不再固定） */
  .md-read {
    height: auto;
    min-height: calc(100vh - var(--md-nav-h) - var(--md-kb-h));
    min-height: calc(100dvh - var(--md-nav-h) - var(--md-kb-h));
    padding: 0;
    gap: 0;
  }
  .md-main { overflow: visible; }
  .md-head-actions { display: flex; }
  .md-head-btn--toc { display: inline-flex; }

  /* 启用常驻浮动入口；抽屉打开时由 mdBackdropSync 加 .is-cover 收起
     （否则它压在遮罩上，既挡视线又容易误触） */
  .md-fab-nav { display: flex; }
  .md-fab-nav.is-cover { display: none; }

  /* 本页目录改为右侧抽屉（关闭时 visibility 隐藏，避免阴影漏进屏幕） */
  .md-toc {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: var(--md-z-drawer);
    width: min(86vw, 320px);
    border: none;
    border-radius: 0;
    box-shadow: -8px 0 32px rgba(0, 0, 0, .24);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--md-ts-slow), visibility var(--md-ts-slow);
    will-change: transform;
  }
  .md-toc.md-toc--show { transform: translateX(0); visibility: visible; }

  /* 两侧抽屉共用遮罩 */
  .md-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--md-z-backdrop);
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-ts-slow);
  }
  .md-backdrop.show { opacity: 1; pointer-events: auto; }
}
@media (max-width: 768px) {
  /* 顶部导航精简：保留站点标题；仅隐藏登录状态、把「分享」收敛为图标 */
  .site-nav { padding: 0 var(--md-sp-3); }
  .nav-right { gap: var(--md-sp-2); }
  .nav-brand .nav-title { font-size: var(--md-fs-sm); }
  .nav-user { display: none; }
  .nav-trails .nav-btn:not(.icon-only) { padding: 0 var(--md-sp-2); font-size: var(--md-fs-xs); }
  .nav-trails .nav-btn--sh { width: 32px; padding: 0; justify-content: center; }
  .nav-trails .nav-btn--sh > span { display: none; }

  .resize-handle.sb-resize { display: none; }
  .md-main { border: none; border-radius: 0; padding: var(--md-sp-4); }
  .md-title { font-size: var(--md-fs-xl); }

  /* 窄屏只收 **h1/h2** 两个最大的标题，h3~h6 与桌面端一致。
     手机端阶梯：28 / 24 / 21 / 18 / 16 / 14（相邻差 4/3/3/2/2）。
     为什么只收 h1/h2：
       - 32px / 25px 在 390px 宽的屏上占宽最明显，是"看着大"的主因；
       - h3 若也收到 20px，h3 与 h4 只差 2px，而两者字重同为 700
         ⇒ 手机上几乎分不出层级（这正是 2.1.0 时"看不出层级"的原因之一）。
     历史：最早期 24/20/16（h4~h6 无定义、走浏览器默认）→ 2.1.0 提为 32/25/21 并加
     窄屏覆盖 28/23/20 → 2.1.3 取消覆盖（两端一致）→ 本次恢复窄屏覆盖但只收 h1/h2。 */
  .md-content h1 { font-size: 28px; }
  .md-content h2 { font-size: 24px; }

  .md-head-btn--menu { display: inline-flex; }
  /* 左栏到这一档才变抽屉，所以「目录」浮动入口也从这里开始出现 */
  .md-fab-nav-btn--menu { display: flex; }

  /* 文档树改为左侧抽屉：默认藏在屏幕左侧之外，展开时滑入 */
  .md-sb {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--md-z-drawer);
    width: min(86vw, 320px);
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .24);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--md-ts-slow), visibility var(--md-ts-slow);
    will-change: transform;
  }
  .md-sb.md-sb--open { transform: translateX(0); visibility: visible; }

  /* 上一篇 / 下一篇：窄屏竖排堆叠 */
  .md-doc-nav { flex-direction: column; }
}