/* ══════════════════════════════════════════════════════════════════
   帮助中心样式（S12）。配色一律用 app.css 的变量，这里只定义版式与组件。
   ────────────────────────────────────────────────────────────────── */

/* ── 骨架 ─────────────────────────────────────────────────────────── */
.help-body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.help-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 1000; pointer-events: none;
}
.help-progress i {
  display: block; height: 100%; width: 0;
  background: var(--pri);
  transition: width .12s linear;
}

.help-top {
  position: sticky; top: 0; z-index: 900;
  background: var(--surface-blur);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bd);
}
.help-top-in {
  max-width: 1280px; margin: 0 auto; padding: 0 20px;
  height: 56px; display: flex; align-items: center; gap: 14px;
}
.help-top .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.help-top .brand img { width: 24px; height: 24px; }
.help-top-link {
  color: var(--mut); text-decoration: none; font-size: 14.5px;
  padding: 6px 10px; border-radius: var(--r-sm);
}
.help-top-link:hover { color: var(--txt); background: var(--surface-hover); }
.help-top-link.on { color: var(--pri-txt); font-weight: 600; }

.help-search {
  flex: 1; max-width: 380px; margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 0 10px; height: 36px;
}
.help-search svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.help-search input { flex: 1; font-size: 14px; color: var(--txt); min-width: 0; }
.help-search kbd {
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  border: 1px solid var(--bd); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; line-height: 18px;
}
.help-search:focus-within { border-color: var(--pri-bd); box-shadow: var(--sh-ring); }

.help-top-right { display: flex; align-items: center; gap: 10px; }
.help-top-cta {
  font-size: 14px; color: var(--txt); text-decoration: none;
  border: 1px solid var(--bd-strong); border-radius: var(--r-sm);
  padding: 5px 12px; white-space: nowrap;
}
.help-top-cta:hover { border-color: var(--pri); }

.help-wrap { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 20px 60px; }
.help-foot { border-top: 1px solid var(--bd); padding: 18px 0; color: var(--faint); font-size: 13px; }
.help-foot a { color: var(--mut); }
.help-foot-sep { margin: 0 6px; }

/* 窄屏抽屉（复用 nav-toggle 外观） */
.help-nav-toggle { display: none; }
/* 无侧栏页面（首页/分类/搜索）的兜底抽屉：桌面永远不显示，≤820 才激活 */
.hp-side-fb { display: none; }

/* ── 首页 hero ────────────────────────────────────────────────────── */
.hp-hero { text-align: center; padding: 46px 0 30px; }
.hp-hero-title { font-size: 30px; margin: 0 0 10px; letter-spacing: .01em; }
.hp-hero-sub { color: var(--mut); margin: 0 0 26px; font-size: 15.5px; }
.hp-hero-search {
  max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--bd);
  border-radius: var(--r-lg); padding: 4px 6px 4px 16px; height: 52px;
  box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
}
.hp-hero-search svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.hp-hero-search input, .help-search input {
  outline: none;
  /* app.css 的 input:not([type=…])×10 规则特异性 (0,10,1)，普通声明压不死它——
     不带 !important 的话输入框会带着自己的边框+底色渲染，整个搜索框变成多层套框 */
  border: 0 !important; border-radius: 0; background: transparent !important;
  box-shadow: none !important; padding: 0 !important;
  /* type=search 在 WebKit 上有原生 searchfield 外观（自带白底圆角框+放大镜），
     无视 border/background —— 必须 appearance:none 并关掉原生装饰 */
  -webkit-appearance: none; appearance: none;
}
.hp-hero-search input::-webkit-search-decoration,
.hp-hero-search input::-webkit-search-cancel-button,
.help-search input::-webkit-search-decoration,
.help-search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
/* 兜底：手册搜索框自带图标+按钮，已用 data-no-wc-search 退出全局 .wc-search 套壳；
   万一壳还是被套上，至少撑满胶囊宽度（默认 width:260px 会把提交按钮挤到中间） */
.hp-hero-search .wc-search, .help-search .wc-search { flex: 1; width: auto; min-width: 0; }
.hp-hero-search input { flex: 1; min-width: 0; font-size: 15.5px; color: var(--txt); }
.hp-hero-search .btn { flex: none; height: 40px; padding: 0 22px; border-radius: var(--r); }
.hp-hero-search:focus-within { border-color: var(--pri-bd); box-shadow: var(--sh-ring); }

.hp-latest {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--pri-soft); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 9px 16px; margin: 18px 0 8px; font-size: 13.5px;
}
.hp-latest .hp-ico { width: 15px; height: 15px; color: var(--pri); }
.hp-latest-label { font-weight: 600; color: var(--pri-txt); }
.hp-latest a { color: var(--link); }
.hp-latest-sep { color: var(--faint); }
.hp-latest-all { margin-left: auto; white-space: nowrap; }

/* ── 区块与卡片 ───────────────────────────────────────────────────── */
.hp-section { margin-top: 42px; }
.hp-section-title { font-size: 19px; margin: 0 0 16px; }

.hp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hp-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--bd);
  border-radius: var(--r-lg); padding: 18px;
  text-decoration: none; color: var(--txt);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.hp-card:hover { border-color: var(--pri-bd); transform: translateY(-1px); }
/* 整卡是 <a>：全局 a:hover{text-decoration:underline} 会把下划线传播到卡内
   所有行内文字（标题/简介/角标全画线）——同 a.kpi 的处理，卡靠浮起表达可点 */
.hp-card:hover, .hp-card:hover *,
.hp-cat:hover, .hp-cat:hover *,
.hp-art-link:hover, .hp-art-link:hover *,
.hp-pn-item:hover, .hp-pn-item:hover * { text-decoration: none; }
.hp-card-icon { color: var(--pri); }
.hp-card-icon .hp-icon { width: 20px; height: 20px; }
.hp-card-title { font-weight: 600; font-size: 15px; }
.hp-card-sum { color: var(--mut); font-size: 13px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-card-meta { margin-top: auto; color: var(--faint); font-size: 12px; }

.hp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hp-cat {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--bd);
  border-radius: var(--r-lg); padding: 16px 18px; text-decoration: none; color: var(--txt);
  transition: border-color .15s var(--ease);
}
.hp-cat:hover { border-color: var(--pri-bd); }
.hp-cat-icon { flex: none; width: 40px; height: 40px; border-radius: var(--r);
  background: var(--pri-soft); color: var(--pri);
  display: flex; align-items: center; justify-content: center; }
.hp-cat-icon .hp-ico-lg { width: 20px; height: 20px; }
.hp-cat-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-cat-title { font-weight: 600; }
.hp-cat-sum { color: var(--mut); font-size: 13px; line-height: 1.5; }
.hp-cat-n { color: var(--faint); font-size: 12px; margin-top: 2px; }

.hp-faq-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.hp-faq-list li { margin: 0 0 10px; break-inside: avoid; }
.hp-faq-list a { color: var(--link); text-decoration: none; }
.hp-faq-list a:hover { text-decoration: underline; }

.hp-contact {
  margin-top: 46px; text-align: center;
  background: var(--surface); border: 1px solid var(--bd);
  border-radius: var(--r-lg); padding: 28px;
}
.hp-contact p { color: var(--mut); margin: 6px 0 14px; }

/* ── 分类页 / 列表 ────────────────────────────────────────────────── */
.hp-crumb { font-size: 13px; color: var(--faint); margin-bottom: 20px; }
.hp-crumb a { color: var(--mut); text-decoration: none; }
.hp-crumb a:hover { color: var(--txt); }
.hp-crumb-sep { margin: 0 7px; }

.hp-cat-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.hp-cat-head-icon { width: 48px; height: 48px; }
.hp-cat-head-icon .hp-ico-lg { width: 24px; height: 24px; }
.hp-cat-title { font-size: 24px; margin: 0; }
.hp-cat-sum { color: var(--mut); margin: 6px 0 0; }

.hp-art-list { list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r-lg); }
.hp-art-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--bd);
}
.hp-art-item:last-child { border-bottom: 0; }
.hp-art-link { flex: 1; min-width: 0; text-decoration: none; }
.hp-art-title { display: block; color: var(--txt); font-weight: 600; font-size: 15px; }
.hp-art-link:hover .hp-art-title { color: var(--pri); }
.hp-art-sum { display: block; color: var(--mut); font-size: 13px; margin-top: 3px; line-height: 1.5; }
.hp-art-sum mark { background: var(--warn-soft); color: var(--warn-txt); padding: 0 1px; border-radius: 3px; }
.hp-art-min { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.hp-art-crumb { font-size: 12px; }
.hp-art-crumb a { color: var(--faint); text-decoration: none; }

.hp-empty { color: var(--mut); padding: 24px 0; }
.hp-count { color: var(--mut); font-size: 13.5px; margin: 4px 0 14px; }
.hp-sug-h { margin: 18px 0 10px; font-weight: 600; }

/* ── 文章页三栏 ───────────────────────────────────────────────────── */
.hp-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr) 210px; gap: 34px; align-items: start; }

.hp-tree { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow: auto; font-size: 13.5px; }
.hp-tree-cat { margin-bottom: 16px; }
.hp-tree-cat-name {
  display: flex; align-items: center; gap: 7px;
  color: var(--txt); font-weight: 600; text-decoration: none; padding: 4px 0;
}
.hp-tree-cat-name .hp-ico { width: 14px; height: 14px; color: var(--mut); }
.hp-tree-list { list-style: none; margin: 4px 0 0; padding: 0 0 0 21px;
  border-left: 1px solid var(--bd); }
.hp-tree-list a {
  display: block; color: var(--mut); text-decoration: none;
  padding: 4.5px 0 4.5px 12px; border-left: 2px solid transparent; margin-left: -1px;
  line-height: 1.4;
}
.hp-tree-list a:hover { color: var(--txt); }
.hp-tree-list a.cur { color: var(--pri-txt); font-weight: 600; border-left-color: var(--pri); }

.hp-article { min-width: 0; max-width: 760px; }
.hp-art-head h1 { font-size: 27px; margin: 0 0 10px; line-height: 1.3; }
.hp-art-lead { color: var(--mut); font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; }
.hp-art-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--faint); font-size: 13px;
  border-bottom: 1px solid var(--bd); padding-bottom: 18px; margin-bottom: 26px; }
.hp-meta-sep { color: var(--bd-strong); }
.hp-fallback { color: var(--warn-txt); }

/* 正文版式：行长 760px、行高 1.8 —— 手册是"读"不是"扫" */
.hp-body { font-size: 15.5px; line-height: 1.8; color: var(--txt); }
.hp-body > :first-child { margin-top: 0; }
.hp-body p { margin: 0 0 16px; }
.hp-body h2 { font-size: 20px; margin: 36px 0 14px; padding-top: 6px;
  display: flex; align-items: center; gap: 8px; }
.hp-body h3 { font-size: 16.5px; margin: 28px 0 10px;
  display: flex; align-items: center; gap: 8px; }
.hp-body h2 .hp-anchor, .hp-body h3 .hp-anchor {
  opacity: 0; text-decoration: none; color: var(--faint); font-weight: 400;
  transition: opacity .12s;
}
.hp-body h2:hover .hp-anchor, .hp-body h3:hover .hp-anchor { opacity: 1; }
.hp-body ul, .hp-body ol { margin: 0 0 16px; padding-left: 1.6em; }
.hp-body li { margin: 5px 0; }
.hp-body li > ul, .hp-body li > ol { margin: 5px 0 0; }
.hp-body a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
.hp-body a:hover { border-bottom-color: var(--link); }
.hp-body a[href^="http"]::after { content: "↗"; font-size: .8em; margin-left: 2px; color: var(--faint); }
.hp-body strong { font-weight: 650; }
.hp-body blockquote {
  margin: 0 0 16px; padding: 10px 16px;
  border-left: 3px solid var(--bd-strong); color: var(--mut);
  background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.hp-body blockquote p:last-child { margin-bottom: 0; }
.hp-body hr { border: 0; border-top: 1px solid var(--bd); margin: 28px 0; }
.hp-body img.hp-img { max-width: 100%; border-radius: var(--r); border: 1px solid var(--bd); }
.hp-body .hp-img-ref { color: var(--faint); font-size: .9em; }

.hp-code {
  font-family: var(--mono); font-size: .88em;
  background: var(--pri-soft); border-radius: 4px; padding: 1px 5px;
}
.hp-pre {
  position: relative; background: var(--pri); color: #e8edf1;
  border-radius: var(--r); padding: 14px 16px; margin: 0 0 16px;
  overflow-x: auto; font-size: 13.5px; line-height: 1.6;
}
.hp-pre code { font-family: var(--mono); }
.hp-copy {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,.12); color: #e8edf1; border: 0;
  border-radius: 5px; font-size: 12px; padding: 3px 9px; cursor: pointer;
}
.hp-copy:hover { background: rgba(255,255,255,.22); }

/* 表格外包滚动容器 */
.hp-table { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--bd); border-radius: var(--r); }
.hp-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hp-table th, .hp-table td { padding: 9px 14px; border-bottom: 1px solid var(--bd);
  text-align: left; white-space: nowrap; }
.hp-table th { background: var(--surface-hover); font-weight: 600; }
.hp-table tr:last-child td { border-bottom: 0; }

/* 提示框（图标+文字双重线索，不只靠颜色区分 —— 色觉无障碍）
   标记由 HelpMarkdown 产出：.hp-callout.hp-co-{type} > .hp-co-head(svg+title) + .hp-co-body */
.hp-callout { margin: 0 0 16px; padding: 13px 16px;
  border: 1px solid var(--bd); border-left-width: 4px; border-radius: var(--r);
  background: var(--surface); }
.hp-co-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.hp-co-head svg { flex: none; width: 17px; height: 17px; }
.hp-co-title { font-weight: 650; }
.hp-co-body > :last-child { margin-bottom: 0; }
.hp-co-tip    { border-left-color: var(--ok);   background: var(--ok-soft); }
.hp-co-note   { border-left-color: var(--info);  background: var(--info-soft); }
.hp-co-warning{ border-left-color: var(--warn);  background: var(--warn-soft); }
.hp-co-danger { border-left-color: var(--err);   background: var(--err-soft); }
.hp-co-tip .hp-co-head     { color: var(--ok-txt); }
.hp-co-note .hp-co-head    { color: var(--link); }
.hp-co-warning .hp-co-head { color: var(--warn-txt); }
.hp-co-danger .hp-co-head  { color: var(--err-txt); }

/* 正文外链的「新窗口」小角标 */
.hp-ext-ico { width: 12px; height: 12px; margin-left: 2px; vertical-align: -1px; }

/* 步骤卡：序号圆点 + 连接线 */
.hp-steps { margin: 0 0 16px; border: 1px solid var(--bd); border-radius: var(--r);
  background: var(--surface); padding: 6px 18px; }
.hp-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: hpstep; }
.hp-steps > ol > li {
  counter-increment: hpstep; position: relative;
  padding: 12px 0 12px 40px; min-height: 28px;
}
.hp-steps > ol > li::before {
  content: counter(hpstep); position: absolute; left: 0; top: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pri); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 26px; text-align: center;
}
.hp-steps > ol > li:not(:last-child)::after {
  content: ""; position: absolute; left: 13px; top: 44px; bottom: 0;
  border-left: 2px solid var(--bd);
}
.hp-steps li li { padding-left: 24px; list-style: disc; }

/* 折叠块 */
.hp-details { border: 1px solid var(--bd); border-radius: var(--r);
  background: var(--surface); margin: 0 0 16px; }
.hp-details > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600;
  list-style: none; position: relative; padding-left: 38px;
}
.hp-details > summary::before {
  content: ""; position: absolute; left: 16px; top: 50%; margin-top: -4px;
  border: solid var(--faint); border-width: 0 2px 2px 0;
  width: 7px; height: 7px; transform: rotate(-45deg); transition: transform .15s;
}
.hp-details[open] > summary::before { transform: rotate(45deg); }
.hp-details > .hp-details-body { padding: 0 16px 14px; color: var(--txt); }

/* 界面示意组件 */
.hp-nav, .hp-btn, .hp-role, .hp-kbd {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: -2px; white-space: nowrap;
}
.hp-nav {
  background: var(--pri-soft); border: 1px solid var(--bd);
  border-radius: var(--r-sm); padding: 1px 8px; font-size: .92em; font-weight: 600;
}
.hp-nav .hp-ico { width: 13px; height: 13px; }
.hp-btn {
  background: var(--pri); color: #fff; border-radius: var(--r-sm);
  padding: 1px 10px; font-size: .9em; font-weight: 600;
}
.hp-role { border: 1px solid var(--pri-bd); color: var(--pri-txt);
  border-radius: var(--r-pill); padding: 0 8px; font-size: .82em; font-weight: 600; }
.hp-kbd {
  font-family: var(--mono); font-size: .85em;
  background: var(--surface); border: 1px solid var(--bd-strong);
  border-bottom-width: 2px; border-radius: 5px; padding: 0 6px;
}
.hp-broken { color: var(--err-txt); text-decoration: line-through; }

/* ── 右侧目录 ─────────────────────────────────────────────────────── */
.hp-toc-col { font-size: 13px; }
.hp-toc { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow: auto; }
.hp-toc-h { font-weight: 600; color: var(--txt); margin: 0 0 10px; font-size: 13px; }
.hp-toc-list { list-style: none; margin: 0; padding: 0; }
.hp-toc-list a {
  display: block; color: var(--mut); text-decoration: none;
  padding: 4px 0 4px 12px; border-left: 2px solid var(--bd); line-height: 1.45;
}
.hp-toc-list a:hover { color: var(--txt); }
.hp-toc-list a.cur { color: var(--pri-txt); border-left-color: var(--pri); font-weight: 600; }
.hp-toc-list .lv3 a { padding-left: 26px; }
.hp-toc-m { display: none; }

/* ── 反馈 / 翻页 / 相关 ───────────────────────────────────────────── */
.hp-fb { margin-top: 40px; border-top: 1px solid var(--bd); padding-top: 22px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hp-fb-q { font-weight: 600; margin: 0; }
.hp-fb-form { display: flex; gap: 10px; }
.hp-fb .btn { min-height: 34px; }

.hp-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.hp-pn-item {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--bd); border-radius: var(--r);
  padding: 13px 16px; text-decoration: none;
}
.hp-pn-item:hover { border-color: var(--pri-bd); }
.hp-pn-item.next { text-align: right; grid-column: 2; }
.hp-pn-dir { font-size: 12px; color: var(--faint); }
.hp-pn-title { color: var(--txt); font-weight: 600; }

.hp-related { margin-top: 30px; }
.hp-rel-title { font-size: 16px; margin: 0 0 10px; }
.hp-related ul { list-style: none; margin: 0; padding: 0; }
.hp-related li { margin: 7px 0; }
.hp-related a { color: var(--link); text-decoration: none; }
.hp-related a:hover { text-decoration: underline; }

/* ── 更新日志时间线 ───────────────────────────────────────────────── */
.hp-timeline { max-width: 760px; }
.hp-tl-month { margin-bottom: 40px; }
.hp-tl-h { font-size: 15px; color: var(--faint); font-weight: 600;
  border-bottom: 1px solid var(--bd); padding-bottom: 8px; margin: 0 0 18px; }
.hp-tl-item { margin-bottom: 30px; }
.hp-tl-date { color: var(--faint); font-size: 12.5px; font-family: var(--mono); }
.hp-tl-title { font-size: 19px; margin: 4px 0 8px; }
.hp-tl-sum { color: var(--mut); margin: 0 0 10px; }

/* ── 404 ──────────────────────────────────────────────────────────── */
.hp-404 { text-align: center; padding: 60px 0; }
.hp-404 .hp-ico-xl { width: 46px; height: 46px; color: var(--faint); }
.hp-404 h1 { margin: 14px 0 8px; }
.hp-404 p { color: var(--mut); }

/* ── 窄屏 ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hp-cols { grid-template-columns: 200px minmax(0, 1fr); }
  .hp-toc-col .hp-toc { display: none; }
  .hp-toc-m { display: block; margin-bottom: 18px; border: 1px solid var(--bd);
    border-radius: var(--r); background: var(--surface); }
  .hp-toc-m summary { padding: 10px 14px; font-weight: 600; cursor: pointer; }
  .hp-toc-in { padding: 0 14px 12px; }
}
/* app.css 的 ≤900 顶栏重排是全局的：.brand{order:1;flex:1} 和
   .nav-toggle{order:3;border:0} 会泄漏进手册页。手册 DOM 顺序是
   汉堡→品牌→链接→搜索→右组，抽屉从左边出、汉堡就该在最左。
   不复位的话右组（order:0）会排到品牌左边，.langsw-panel{right:0}
   跟着掉到屏幕左外缘——面板大半在视口外，看起来「被遮住」。 */
@media (max-width: 900px) {
  .help-top-in > * { order: 0; }
  .help-top .brand { flex: none; }
  .help-nav-toggle { border: 1px solid var(--bd); background: var(--surface); }
}
@media (max-width: 820px) {
  /* 汉堡在最右：与主应用顶栏同一手势位置，抽屉也从同侧滑出（按钮在左、
     抽屉从右出来，手感是断的——app.css ≤900 注释里就是这么写的） */
  .help-nav-toggle { display: inline-flex; order: 10; }
  .help-top-link { display: none; }
  /* 顶栏改两行：品牌+语言+主题+汉堡 一行，搜索整行下沉——
     单行里搜索框被挤到不可用的宽度，而搜索是手册的主操作，不能缩成图标 */
  .help-top-in { flex-wrap: wrap; height: auto; min-height: 56px;
    padding: 8px 14px; column-gap: 10px; row-gap: 8px; }
  .help-top-right { margin-left: auto; gap: 8px; }
  .help-search { order: 20; flex-basis: 100%; max-width: none; margin-left: 0; height: 40px; }
  .help-search kbd { display: none; }   /* “/” 快捷键对触屏没意义 */
  .langsw .langsw-name { display: none; }   /* 窄屏只留地球图标 */
  .hp-cols { grid-template-columns: 1fr; }
  /* 遮罩与抽屉同断点（app.css 的 nav-backdrop 断点可能不同，这里按手册自己的来） */
  .help-body .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 940;
    background: rgba(15,20,25,.42); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .help-body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .help-body.nav-open { overflow: hidden; }
  .hp-side { position: fixed; inset: 0 0 0 auto; width: 300px; z-index: 950;
    background: var(--surface); border-left: 1px solid var(--bd);
    transform: translateX(105%); transition: transform .2s var(--ease);
    padding: 18px; overflow: auto; }
  .hp-side.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  /* 兜底抽屉（没侧栏的页面）：同一副抽屉外壳，内容只有顶层链接 */
  .hp-side-fb { display: block; }
  .hp-side-fb a { display: block; padding: 12px 14px; border-radius: var(--r-sm);
    color: var(--txt); text-decoration: none; font-size: 15px; }
  .hp-side-fb a:hover { background: var(--surface-hover); }
  .hp-tree { position: static; max-height: none; }
  .hp-article { max-width: none; }
  .hp-faq-list { columns: 1; }
  .hp-pn { grid-template-columns: 1fr; }
  .hp-pn-item.next { grid-column: 1; }
  .hp-hero-title { font-size: 24px; }
  .help-top-right .help-top-cta { display: none; }
}

/* ── 深色微调 ───────────────────────────────────────────────────────
   --txt(#e8ebf1) 在 #0e1116 上约 15:1——正文 15.5px 没问题，但 27px 加粗的
   文章大标题会显得"晃眼/发光"。展示级标题压一档到 #d8dde5（约 12.5:1），
   仍明显重于正文 --txt-2(#c6cdd9)，层级不塌；正文维持 --txt 不动。 */
html[data-theme=dark] .hp-hero-title,
html[data-theme=dark] .hp-art-head h1,
html[data-theme=dark] .hp-body h2,
html[data-theme=dark] .hp-body h3 { color: #d8dde5; }

/* ── 打印：只留正文 ───────────────────────────────────────────────── */
@media print {
  .help-top, .help-progress, .hp-side, .hp-toc-col, .hp-fb, .hp-pn,
  .help-foot, .hp-crumb, .nav-backdrop { display: none !important; }
  .hp-cols { display: block; }
  .hp-article { max-width: none; }
  .hp-details { border: 0; }
  .hp-details > .hp-details-body { display: block !important; }
  .hp-body a::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--mut); }
  .help-body { background: #fff; }
}