@charset "utf-8";
/* ============================================================================
   VPNTA · deepdoc.css
   完全指南页专属：页首、长文正文排版、章节节奏、文末块
   只引用 base.css 的设计令牌，不新增颜色。
   ========================================================================== */

/* —— 页首 —— */
.doc-hero{
  position:relative;
  z-index:1;
  max-width:100%;
  overflow-x:clip;
  padding-top:clamp(30,4.2vw,60px);
  padding-bottom:clamp(18px,2.6vw,32px);
}
.doc-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:420px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(560px 340px at 12% 0%,var(--accent-12),rgba(11,111,130,0) 70%),
    radial-gradient(460px 300px at 88% 6%,var(--violet-13),rgba(111,91,214,0) 74%);
}
.doc-hero-inner{max-width:920px;}
.doc-kicker{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.doc-h1{
  font-family:var(--font-display);
  font-size:clamp(2.125rem,1.35rem + 2.3vw,3.375rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
}
.doc-h1 .h1-brand,
.doc-h1 .h1-line{display:block;}
.doc-lede{margin-top:18px;}
.doc-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 18px;
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-muted);
}
.doc-meta span{display:inline-flex;align-items:center;gap:6px;}
.doc-meta span + span::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--border);
  flex:none;
}

/* —— 正文容器 —— */
.doc-body{padding-top:clamp(8px,1.4vw,16px);}

.prose{
  max-width:940px;
  margin-inline:auto;
  min-width:0;
}

.prose > section{
  padding-top:clamp(30px,3.6vw,48px);
  padding-bottom:clamp(10px,1.6vw,20px);
  border-top:1px solid var(--hairline);
}
.prose > section:first-of-type{
  border-top:0;
  padding-top:clamp(16px,2vw,24px);
}

.prose .mono-label{margin-bottom:8px;}

.prose h2{
  font-size:clamp(1.5rem,1.15rem + 1.15vw,2.0625rem);
  line-height:1.24;
  margin-bottom:14px;
}
.prose h3{
  margin-top:24px;
  margin-bottom:8px;
  font-size:clamp(1.0625rem,1rem + .32vw,1.25rem);
  line-height:1.45;
}

.prose p{
  font-size:15.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.prose p + p{margin-top:12px;}
.prose h2 + p,
.prose h3 + p{margin-top:0;}

.prose strong{color:var(--text);font-weight:600;}
.prose em{font-style:normal;font-weight:600;color:var(--accent-dark);}

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

.prose ul,
.prose ol{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.prose ul > li{
  position:relative;
  padding-left:18px;
  font-size:15px;
  line-height:1.8;
  color:var(--text-muted);
}
.prose ul > li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:1px;
  background:var(--accent-30);
}
.prose ol{counter-reset:docstep;}
.prose ol > li{
  position:relative;
  padding-left:28px;
  counter-increment:docstep;
  font-size:15px;
  line-height:1.8;
  color:var(--text-muted);
}
.prose ol > li::before{
  content:counter(docstep,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.2em;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--accent-dark);
}

.prose .callout{margin-top:18px;}
.prose .table-scroll{margin-top:18px;}
.prose pre{margin-top:16px;}
.prose .stat-band{margin-top:22px;}

.prose .chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

/* —— 文末块 —— */
.doc-end{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(20px,2.6vw,28px);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(120deg,var(--bg-panel-2),var(--glass-95));
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--surface);
}
.doc-end-body{flex:1 1 280px;min-width:0;}
.doc-end-title{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--text);
}
.doc-end-line{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.doc-end .btn{flex-shrink:0;white-space:nowrap;}
.doc-end .btn-primary{color:var(--flag-white);text-decoration:none;}
.doc-end .btn-secondary,
.doc-end .btn-ghost{color:var(--text);text-decoration:none;}

/* —— 响应式 —— */
@media (max-width:768px){
  .doc-h1{font-size:clamp(1.875rem,1.4rem + 2vw,2.5rem);}
  .prose p{font-size:15px;}
}

@media (max-width:640px){
  .prose > section{padding-top:26px;}
  .prose h3{margin-top:20px;}
  .prose ul > li,
  .prose ol > li{font-size:14.5px;}
  .doc-meta{font-size:10.5px;gap:6px 12px;}
  .doc-end .btn{width:100%;}
}