/* =============================================================================
   VPNZM · deepdoc.css
   深度指南页(troubleshooting.html)专属样式:页头、正文排版、排错流程卡、
   相关链接块。所有颜色取自 base.css 的 :root 令牌,不新增色值。
   ========================================================================== */

/* ------------------------------------------------------------- 页头 ------ */
.doc-hero{
  position:relative;
  background:linear-gradient(180deg,var(--hero-top) 0%,var(--hero-mid) 62%,var(--hero-bottom) 100%);
  border-bottom:1px solid var(--border);
  padding-top:calc(var(--sec-y) + 6px);
  padding-bottom:var(--sec-y);
  overflow-x:clip;
}
.doc-halo{
  position:absolute;
  right:-8%;
  top:-38%;
  width:min(600px,78vw);
  height:min(600px,78vw);
  border-radius:50%;
  background:radial-gradient(circle,var(--halo-amber) 0%,transparent 68%);
  pointer-events:none;
  z-index:0;
}
.doc-hero .wrap{z-index:1}
.doc-hero h1{
  margin-top:12px;
  font-size:clamp(32px,4.2vw,56px);
  line-height:1.1;
  letter-spacing:-.03em;
}
.doc-lede{
  margin-top:14px;
  max-width:62ch;
  font-size:16.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.doc-hero .stat-band{
  margin-top:26px;
  justify-content:flex-start;
}

/* ------------------------------------------------------------- 正文 ------ */
.prose{
  max-width:880px;
  margin:0 auto;
  font-size:15.5px;
  line-height:1.85;
  color:var(--text);
}
.prose section{min-width:0}
.prose h2{
  margin:0 0 16px;
  font-size:clamp(23px,2.3vw,31px);
  line-height:1.25;
  letter-spacing:-.02em;
}
.prose h3{
  margin:30px 0 10px;
  font-size:17.5px;
  line-height:1.42;
  letter-spacing:-.01em;
  color:var(--text);
}
.prose p{margin:0 0 16px}
.prose p:last-child{margin-bottom:0}

.prose ul,
.prose ol{margin:0 0 18px;display:grid;gap:9px}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{
  content:"";
  position:absolute;
  left:3px;
  top:.78em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  opacity:.55;
}
.prose ol{counter-reset:docstep}
.prose ol li{
  counter-increment:docstep;
  position:relative;
  padding-left:36px;
  min-height:26px;
}
.prose ol li::before{
  content:counter(docstep);
  position:absolute;
  left:0;
  top:.1em;
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent-ghost);
  border:1px solid var(--accent-line);
  color:var(--accent);
  font-family:var(--font-m);
  font-size:11px;
  font-weight:700;
}

.prose a{
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.prose a:hover{color:var(--accent-dark)}

.prose blockquote{
  margin:0 0 20px;
  padding:14px 18px;
  background:var(--bg-panel-2);
  border-left:3px solid var(--accent-line);
  border-radius:var(--r-sm);
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}

.prose .callout{margin:0 0 20px}
.prose .table-scroll{margin:0 0 22px}
.prose .stat-band{margin:0 0 22px}
.prose pre{margin:0 0 20px}

/* 章节小标与分隔 */
.sec-label{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--accent);
}
.prose section + section{
  margin-top:46px;
  padding-top:26px;
  border-top:1px dashed var(--border);
}

/* ------------------------------------------------------- 排错流程卡 ------ */
.flow{display:grid;gap:12px;margin:0 0 24px}
.flow-step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  padding:16px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);
}
.flow-no{
  width:34px;
  height:34px;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
}
.flow-body{min-width:0}
.flow-body h3{margin:2px 0 6px;font-size:16px}
.flow-body p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
}

/* ------------------------------------------------------- 相关链接块 ------ */
.doc-links{
  margin-top:32px;
  padding:20px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);
}
.doc-links h2{
  margin:0 0 12px;
  font-size:16px;
  letter-spacing:-.01em;
}
.doc-links ul{margin:0;display:grid;gap:8px}
.doc-links li{padding-left:0}
.doc-links li::before{display:none}
.doc-links a{font-size:14px}

.prose .promo-block{margin-top:30px}
.prose .promo-block p{margin:0}

/* --------------------------------------------------------- 响应式 ------- */
@media (max-width:900px){
  .prose{max-width:100%}
}
@media (max-width:760px){
  .doc-hero{
    padding-top:calc(var(--sec-y) + 4px);
    padding-bottom:calc(var(--sec-y) - 8px);
  }
  .doc-hero h1{font-size:clamp(30px,7vw,40px)}
  .doc-lede{font-size:15px}
  .prose{font-size:15px;line-height:1.8}
  .prose h2{font-size:clamp(21px,5.4vw,26px)}
  .prose h3{font-size:16.5px;margin-top:26px}
  .prose section + section{margin-top:36px;padding-top:22px}
  .flow-step{grid-template-columns:1fr;gap:10px}
  .flow-no{width:30px;height:30px;font-size:12px}
  .doc-links{padding:16px 18px}
}