/* ============================================================
   VPN-LG · deepdoc.css
   深度指南页(AI 工具指南)专属样式。仅本页引入。
   设计值一律引用 base.css 的令牌,不新增硬编码颜色。
   ============================================================ */

/* ---------- 页头 ---------- */
.doc{
  position:relative;
  max-width:860px;
  padding-top:44px;
  padding-bottom:88px;
}
.doc-head{position:relative;z-index:1}
.doc-head .kicker{margin-bottom:16px}
.doc-head h1{font-size:clamp(32px,4.2vw,56px);line-height:1.1}
.doc-lede{
  margin-top:18px;max-width:60ch;
  font-size:16.5px;line-height:1.8;color:var(--text-muted);
}
.doc-meta{
  margin-top:20px;
  display:flex;flex-wrap:wrap;align-items:center;
  font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
}
.doc-meta li{display:flex;align-items:center;min-width:0}
.doc-meta li + li::before{content:"·";margin:0 12px;color:var(--border-strong);font-weight:700}
.doc-facts{margin-top:20px}
.doc-act{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 纯装饰光斑(视差配方作用对象) ---------- */
.doc-decor{
  position:absolute;left:0;right:0;top:0;height:460px;
  overflow:clip;pointer-events:none;z-index:0;
}
.doc-glow{
  position:absolute;left:50%;top:-210px;
  width:min(860px,100%);height:440px;
  transform:translateX(-50%);
  background:radial-gradient(48% 52% at 50% 46%,var(--accent-07),transparent 72%);
}

/* ---------- 章节目录条 ---------- */
.doc .toc-tabs{margin-top:34px}

/* ---------- 章节节奏 ---------- */
.doc-sec{position:relative;z-index:1;padding-top:60px}
.doc-sec + .doc-sec{border-top:1px solid var(--border)}
.doc-sec > h2{
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.32;
}
.doc-sec > h2::before{
  content:"";display:block;
  width:22px;height:3px;border-radius:2px;margin-bottom:14px;
  background:linear-gradient(90deg,var(--accent),var(--honey));
}
.doc-sec .prose{margin-top:18px}
.doc-sec .table-scroll{margin-top:20px}
.doc-sec .prose + .table-scroll,
.doc-sec .table-scroll + .prose{margin-top:22px}

/* ---------- 正文里的行内链接 ---------- */
.prose p a,.prose li a,.prose blockquote a,.doc-lede a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-decoration-color:var(--accent-30);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.prose p a:hover,.prose li a:hover,.doc-lede a:hover{text-decoration-color:var(--accent)}

/* ---------- 步骤列表(正文内) ---------- */
.doc .steps{list-style:none;padding-left:0}
.doc .steps > li + li{margin-top:0}
.doc .steps h3{margin-top:0;font-size:16px}
.doc .steps p{margin-top:6px;font-size:14.5px;line-height:1.7;color:var(--text-muted)}

/* ---------- 相关阅读 ---------- */
.doc-next{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin-top:18px;
}
.doc-next a{
  display:flex;flex-direction:column;gap:5px;
  padding:15px 16px;border-radius:var(--r);
  background:var(--bg-panel);box-shadow:var(--shadow-card);
  min-width:0;
}
.doc-next .dn-t{
  display:flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:700;color:var(--text);
}
.doc-next .dn-t svg{color:var(--accent-dark);flex:none}
.doc-next .dn-d{font-size:12.5px;line-height:1.6;color:var(--text-muted)}
.doc-next a:hover .dn-t{color:var(--accent-dark)}

/* ---------- 窄屏 ---------- */
@media (max-width:768px){
  .doc{padding-top:28px;padding-bottom:60px}
  .doc-sec{padding-top:46px}
  .doc-next{grid-template-columns:1fr}
}

@media (max-width:640px){
  .doc-lede{font-size:15.5px}
  .doc-meta{font-size:11.5px}
  .doc-meta li + li::before{margin:0 9px}
}