/* ==========================================================================
   VPNBu · deepdoc.css
   完全指南页（manual.html）专属样式
   只补充 base.css / components.css 没有的章节编号、代码块、UI 名称胶囊、
   页头元信息与文末收束块；颜色字体圆角一律引用 :root 令牌。
   ========================================================================== */

/* ------------------------------------------------------------- 页头 */
.doc-head{max-width:820px;margin:0 auto;min-width:0}
.doc-head .eyebrow{margin-bottom:18px}
.doc-head h1{margin:0 0 16px}
.doc-head .lead{margin:0;max-width:720px}
.doc-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:18px 0 0;
  font-size:13px;color:var(--text-faint);
}
.doc-meta .mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.01em}
.doc-meta .meta-sep{color:var(--border)}

/* --------------------------------------------------------- 正文主列 */
.doc-body{margin-inline:auto;min-width:0}

/* 章节编号：h2 不用 flex/grid，编号走 ::before 块级生成内容 */
.doc-body{counter-reset:doc-chap}
.doc-body section[id]{counter-increment:doc-chap}
.doc-body section[id] > h2::before{
  content:"CH." counter(doc-chap,decimal-leading-zero);
  display:block;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--accent);
}
.doc-body section[id]:first-of-type > h2{margin-top:.2em}

/* 章内小节标题与正文的呼吸感 */
.doc-body h3{margin-top:1.9em}
.doc-body h3:first-child{margin-top:0}

/* 正文里的表格与代码块 */
.doc-body .table-scroll{margin:0 0 1.5em}
.doc-body pre{
  background:var(--bg-panel3);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  padding:16px 18px;
  margin:0 0 1.5em;
  font-size:13px;
  line-height:1.75;
  color:var(--text);
}
.doc-body pre code{font-size:13px}
.doc-body .steps{margin:0 0 1.6em}

/* UI 元素名胶囊：可能渲染较长名称，自带宽度防御 */
.ui-chip{
  display:inline-flex;align-items:center;
  padding:1px 8px;border-radius:7px;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  font-size:.9em;font-weight:600;color:var(--text);
  line-height:1.5;
  white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  vertical-align:baseline;
}

/* 平台切换面板里的步骤列表收尾 */
.doc-body .tabpanel .steps{margin-bottom:6px}
.doc-body .tabpanel > p:last-child{margin-bottom:0}

/* ------------------------------------------------------- 文末收束块 */
.doc-outro{
  margin-top:46px;
  padding:28px 26px 26px;
  border-radius:var(--r-card);
  border:1px solid var(--border);
  background:linear-gradient(140deg,var(--accent-soft) 0%,var(--bg-panel) 66%);
  box-shadow:inset 0 1px 0 var(--hi-line),0 22px 44px -28px var(--accent-shadow);
  min-width:0;
}
.doc-outro-lead{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:19px;font-weight:800;letter-spacing:-.015em;
  color:var(--text);
}
.doc-outro p{margin:0 0 16px;font-size:14.5px;color:var(--text-muted);line-height:1.7}
.doc-outro .btn-row{margin-top:2px}
.doc-outro .btn-row .btn{white-space:nowrap;flex-shrink:0}

/* ------------------------------------------------------------ 响应式 */
@media (max-width:768px){
  .doc-head h1{font-size:34px}
  .doc-outro{padding:22px 18px;border-radius:var(--r-panel)}
  .doc-body pre{padding:14px 14px}
}
@media (max-width:640px){
  .doc-outro .btn-row .btn{width:100%;max-width:320px}
  .doc-body .toc-tabs{margin-bottom:20px}
}