/* ==========================================================================
   VPNDU · deepdoc.css
   观影指南页(knowledge.html)专属样式:文档头氛围 / 事实行 / 表注 / 正文节奏
   只消费 :root 设计令牌,不新造组件
   ========================================================================== */

.doc-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:40px;
  padding-bottom:30px;
  background:linear-gradient(180deg,var(--bg-panel) 0%,var(--bg) 100%);
}
.doc-hero::before{
  content:"";
  position:absolute;
  inset:-20% -10% 10% 44%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(48% 54% at 26% 22%,rgba(var(--accent-rgb),.11) 0%,rgba(var(--accent-rgb),0) 70%),
    radial-gradient(52% 58% at 82% 84%,rgba(var(--cyan-rgb),.14) 0%,rgba(var(--cyan-rgb),0) 70%);
  animation:breathe 12s ease-in-out infinite;
  will-change:transform,opacity;
}
.doc-hero .container{position:relative;z-index:1}
.doc-hero h1{margin-top:6px}
.doc-hero .lede{margin-top:18px;max-width:720px}

.doc-facts{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin:24px 0 0;
  padding:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--text-muted);
}
.doc-facts li{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.doc-facts .stat-figure{color:var(--text);font-size:16px}

.doc-body{
  padding-top:34px;
  padding-bottom:var(--sec-y);
}
.doc-body .prose{max-width:900px}
.doc-body .prose h2{margin-top:46px}
.doc-body .prose h3{margin-top:26px}
.doc-body .prose > section + section{border-top:1px solid var(--border);padding-top:8px}
.doc-body .prose > section:first-of-type h2{margin-top:34px}

.doc-caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.7;
  color:var(--text-muted);
}

.doc-body .table-scroll{margin:20px 0 6px}
.doc-body .prose pre{
  margin:18px 0;
  padding:16px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  font-size:13px;
  line-height:1.75;
  color:var(--text);
}
.doc-body .prose pre code{color:var(--text-muted)}

.doc-body .prose .btn-row{margin-top:26px}
.doc-body .prose ul a,.doc-body .prose p a{color:var(--accent-dark)}

@media (max-width:900px){
  .doc-hero{padding-top:32px;padding-bottom:24px}
  .doc-hero::before{inset:-14% -20% 20% 10%}
}
@media (max-width:640px){
  .doc-hero{padding-top:26px;padding-bottom:20px}
  .doc-facts{gap:8px 18px;font-size:13px}
  .doc-body{padding-top:26px}
  .doc-body .prose h2{margin-top:36px}
  .doc-body .prose pre{padding:14px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .doc-hero::before{animation:none}
}