/* ==========================================================================
   内容页样式（content.css）
   适用：/guide/ 教程页 · /solutions/ 场景页 · /cost/ 选型页
   约定：本文件只负责「读」的页面；产品页（首页/产品价值/增强能力…）仍走 site.css。
         引在 site.css 之后，只做增量覆盖，不改产品页任何规则。

   结构对应关系（CMS 套模板时按这个映射取字段）：
     .doc-hero      → 首屏广告带（通栏）：背景图 + 两行广告语 + 单价；仅文章页有
     .doc-head      → 标题区（在 .doc-main 内）：kicker（栏目）/ h1（标题）/ .doc-lead（一句话答案）/ .doc-meta
     .doc-layout    → 正文区：左 .doc-aside（目录）/ 右 .doc-body（富文本正文）
     .doc-body 内   → h2·h3 / p / ul·ol / .doc-note / .doc-steps / .doc-badgood / .doc-table-wrap / .doc-fig
     .doc-related   → 文末相关阅读（3 卡）
     .cta-band      → 复用产品页的转化条，不放新样式
   ========================================================================== */

/* ---------- 1. 标题区 ---------- */
/* 标题区已在 .doc-main 之内，是内容的开头，不再是页面首屏——
   去掉原来的背景光与大面积内距，只留一条分隔线把它和正文分开。 */
.doc-head {
  padding-block: 0 36px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 42px;
}
.doc-head .container { max-width: 1140px; }

/* 标题区内层：文章页单栏；栏目页（.is-chan）是「左文案 + 右栏目索引」两栏 */
.doc-head-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.doc-head.is-chan .doc-head-in {
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 56px;
}
/* 栏目页首屏比文章页矮一档：索引模块已经给了头部重量，不必再靠 padding 撑 */
.doc-head.is-chan { padding-block: 0 34px; }

.doc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-cyan);
}
.doc-kicker::before {
  content: '';
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
a.doc-kicker { transition: opacity .18s ease; }
a.doc-kicker:hover { opacity: .75; }

.doc-head h1 {
  margin: 16px 0 0;
  max-width: 880px;
  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--tx-1);
}
.doc-head h1 .grad-text { font-weight: 600; }

/* 一句话答案：内容页的核心，搜索摘要与 AI 摘录都从这里取 */
.doc-lead {
  margin: 20px 0 0;
  max-width: 800px;
  font-size: 17.5px;
  line-height: 1.8;
  letter-spacing: .2px;
  color: var(--tx-2);
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin-top: 26px;
  font-size: 13.5px;
  letter-spacing: .2px;
  color: var(--tx-dim);
}
.doc-meta i {
  font-style: normal;
  color: var(--line);
}
.doc-meta a { color: var(--tx-3); border-bottom: 1px solid var(--line); }
.doc-meta a:hover { color: var(--c-cyan); border-bottom-color: currentColor; }

/* 栏目索引：栏目页首屏右侧，列出全站三个内容栏目（当前项高亮）。
   作用有二——给标题区一个块面重量；每页都链到另外两个栏目，内链密度随之提高。 */
.doc-head-idx {
  padding: 2px 0 0 40px;
  border-left: 1px solid var(--line-soft);
}
.doc-head-idx-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--tx-dim);
}
.doc-head-idx a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  transition: opacity .18s ease;
}
.doc-head-idx a:first-of-type { border-top: 0; padding-top: 0; }
.doc-head-idx a:hover { opacity: .78; }
.doc-head-idx .ix-name {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tx-1);
}
.doc-head-idx .ix-n {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--tx-dim);
  font-variant-numeric: tabular-nums;
}
.doc-head-idx .ix-desc {
  grid-column: 1 / -1;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--tx-3);
  text-wrap: balance;
}
.doc-head-idx a.is-on .ix-name { color: var(--c-primary-2); }
.doc-head-idx a.is-on .ix-n { color: var(--c-primary-2); opacity: .8; }

/* H1 里预留的换行点：宽屏隐藏，窄屏生效——宽屏一行读得完，窄屏断在问号后更自然 */
@media (min-width: 901px) {
  .doc-h1-br { display: none; }
}

/* ---------- 2. 正文区：目录 + 文章 ---------- */
.doc-main { padding-block: 56px 88px; }
.doc-main .container { max-width: 1140px; }

.doc-layout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.doc-aside {
  position: -webkit-sticky;
  position: sticky;
  top: 128px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: none;
}
.doc-aside::-webkit-scrollbar { display: none; }

.doc-toc-title {
  margin: 8px 0 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--tx-dim);
}

.doc-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tx-3);
  transition: color .18s ease, border-color .18s ease;
}
.doc-toc a + a { margin-top: 1px; }
.doc-toc a:hover,
.doc-toc a.is-active { color: var(--tx-1); border-left-color: var(--c-primary); }
.doc-toc a.sub { padding-left: 26px; font-size: 13px; color: var(--tx-dim); }
.doc-toc a.sub:hover,
.doc-toc a.sub.is-active { color: var(--tx-2); }

/* 目录下方的要点盒：把左栏从「纯导航」变成「导航 + 结论 + 入口」。
   左栏 208px 若只放目录，右半侧基本空着，这里补一块真正有信息量的内容。 */
.doc-aside-box {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.doc-aside-box-title {
  margin: 0 0 11px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--tx-dim);
}
.doc-aside-box ul { margin: 0; padding: 0; list-style: none; }
.doc-aside-box li {
  position: relative;
  padding-left: 13px;
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--tx-3);
}
.doc-aside-box li + li { margin-top: 7px; }
.doc-aside-box li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: .7;
}
.doc-aside-cta {
  display: inline-block;
  margin-top: 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--c-cyan);
  border-bottom: 1px solid rgba(95, 214, 200, .3);
  transition: border-color .18s ease;
}
.doc-aside-cta:hover { border-bottom-color: currentColor; }

/* ---------- 3. 正文排版 ---------- */
.doc-body {
  min-width: 0;
  font-size: 17px;
  line-height: 1.86;
  letter-spacing: .2px;
  color: var(--tx-2);
}
.doc-body > * + * { margin-top: 20px; }
.doc-body > :first-child { margin-top: 0; }

.doc-body h2 {
  margin-top: 48px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 0;
  color: var(--tx-1);
  scroll-margin-top: 130px;
}
.doc-body h2 + * { margin-top: 18px; }

/* 节编号悬挂在正文左外侧：不占正文宽度，也不改 DOM 顺序
   （序号只是视觉刻度，对搜索引擎没有价值，放伪元素里反而让标题更干净）。 */
.doc-body h2[data-n] { position: relative; }
.doc-body h2[data-n]::before {
  content: attr(data-n);
  position: absolute;
  left: -34px;
  top: .32em;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--tx-dim);
  font-variant-numeric: tabular-nums;
}

.doc-body h3 {
  margin-top: 34px;
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--tx-1);
  scroll-margin-top: 130px;
}
.doc-body h3 + * { margin-top: 12px; }

.doc-body p { margin: 0; }
/* 标题与紧随段落之间必须有间距：.doc-body p 的 margin:0 与 h2 + * 同特异性，
   写在后面会把它盖掉，所以这里用带标签的选择器提一级。 */
.doc-body h2 + p,
.doc-body h3 + p,
.doc-body h2 + ul,
.doc-body h2 + ol,
.doc-body h3 + ul,
.doc-body h3 + ol { margin-top: 18px; }
/* 块与块之间只靠「后一个块自己的 margin-top」撑间距，所以列表、表格、
   步骤块后面接段落时必须补一条，否则会与正文贴死。 */
.doc-body p + p { margin-top: 18px; }
.doc-body ul + p,
.doc-body ol + p { margin-top: 18px; }
.doc-body .doc-table-wrap + p,
.doc-body .doc-rows + p,
.doc-body .doc-steps + p,
.doc-body .doc-note + p,
.doc-body .doc-note + ul,
.doc-body .doc-note + ol { margin-top: 22px; }
.doc-body strong { font-weight: 600; color: var(--tx-1); }
.doc-body em { font-style: normal; color: var(--c-cyan); }

.doc-body a:not(.btn) {
  color: var(--c-cyan);
  border-bottom: 1px solid rgba(95, 214, 200, .32);
  transition: border-color .18s ease;
  /* 同上：行内竖向内距只扩大命中区，不推动行盒 */
  padding-block: 6px;
}
.doc-body a:not(.btn):hover { border-bottom-color: currentColor; }

/* 列表：圆点/序号，不做逐条横线 */
.doc-body ul,
.doc-body ol { margin-top: 20px; padding: 0; list-style: none; }

/* 列表前的小标签：同一节里连着两组列表时，用它分组 */
.doc-label {
  margin: 30px 0 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-cyan);
}
.doc-label + ul,
.doc-label + ol { margin-top: 10px; }
.doc-body li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.8;
}
.doc-body li + li { margin-top: 9px; }
.doc-body ul > li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: .8em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: .85;
}
.doc-body ol { counter-reset: docli; }
.doc-body ol > li { counter-increment: docli; }
.doc-body ol > li::before {
  content: counter(docli) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: inherit;
  color: var(--c-primary-2);
}

/* ---------- 4. 正文组件 ---------- */

/* 4.1 结论 / 提示卡 */
.doc-note {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 3px solid var(--c-primary);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(125, 140, 240, .13) 0%, rgba(125, 140, 240, .035) 68%);
}
.doc-note.is-warn {
  border-left-color: var(--c-warn);
  background: linear-gradient(90deg, rgba(217, 160, 63, .13) 0%, rgba(217, 160, 63, .035) 68%);
}
.doc-note-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-primary);
}
.doc-note.is-warn .doc-note-title { color: var(--c-warn); }
.doc-note p { font-size: 15.5px; line-height: 1.8; color: var(--tx-2); }
.doc-note p + p { margin-top: 10px; }

/* 4.2 步骤：左侧时间线串起编号 */
.doc-steps { margin-top: 28px; }
.doc-step {
  position: relative;
  padding: 0 0 24px 54px;
}
.doc-step:last-child { padding-bottom: 0; }
.doc-step::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(125, 140, 240, .38);
  background: rgba(125, 140, 240, .10);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-primary-2);
  font-variant-numeric: tabular-nums;
}
.doc-step::after {
  content: '';
  position: absolute;
  left: 15.5px;
  top: 40px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.doc-step:last-child::after { display: none; }
.doc-step h4 {
  margin: 0;
  padding-top: 4px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tx-1);
}
.doc-step p {
  margin-top: 7px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--tx-3);
}

/* 4.3 条目行：左侧小标题定宽 + 右侧说明（三条以上并列时用它，比一堆卡片紧凑） */
.doc-rows {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.doc-row {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.doc-row h4 {
  position: relative;
  margin: 0;
  padding-left: 15px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--tx-1);
}
.doc-row h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-danger);
  opacity: .85;
}
.doc-row p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--tx-3);
}

/* 4.4 错 / 对 两栏 */

/* 4.4 表格 */
.doc-table-wrap {
  margin-top: 26px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-card);
}
.doc-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc-table th {
  padding: 13px 18px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-cyan);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  background: rgba(125, 140, 240, .09);
}
.doc-table td {
  padding: 14px 18px;
  vertical-align: top;
  line-height: 1.7;
  color: var(--tx-2);
  border-bottom: 1px solid var(--line-soft);
}
.doc-table td:first-child { white-space: nowrap; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td strong { color: var(--tx-1); font-weight: 600; }

/* 4.5 配图 */
.doc-fig { margin-top: 28px; }
.doc-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.doc-fig figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tx-dim);
}

/* ---------- 5. 相关阅读 ---------- */
/* 下内距必须留够：下面紧接 .cta-band，它的 ::before 是一条整屏渐变线，
   padding-bottom 为 0 时卡片底边会直接压在线上。 */
.doc-related {
  padding-block: 72px;
  border-top: 1px solid var(--line-soft);
}
.doc-related .container { max-width: 1140px; }
.doc-related-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--tx-1);
}
.doc-related-title a {
  font-size: 13px;
  font-weight: 400;
  color: var(--tx-3);
  transition: color .18s ease;
}
.doc-related-title a:hover { color: var(--c-cyan); }

.doc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.doc-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--bg-card);
  transition: border-color .18s ease, transform .18s ease;
}
.doc-card:hover {
  border-color: rgba(125, 140, 240, .42);
  transform: translateY(-2px);
}
.doc-card-tag {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .12em;
  color: var(--c-cyan);
}
.doc-card h3 {
  margin: 9px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--tx-1);
}
.doc-card p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--tx-3);
}
.doc-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 13.5px;
  color: var(--tx-dim);
}

/* ==========================================================================
   6. 栏目列表页（/guide/ · /solutions/ · /cost/ 的栏目首页）
   CMS 里由「栏目 → 文章列表」循环输出：.arc-list 里一行 = 一篇文章，
   条目多少不影响版式，30 条和 3 条长得一样。
   ========================================================================== */

/* 6.1 分类筛选条：对应 CMS 的子栏目或标签，条数与栏目同步 */
.arc-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* button 与 a 同款：分类不足一页时用页内筛选（button），
   文章多了再拆成子栏目（a 指到 /guide/judge/ 这类独立页），两种形态版式一致 */
.arc-bar a,
.arc-bar button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-card);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tx-3);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.arc-bar a:hover,
.arc-bar button:hover { color: var(--tx-1); border-color: var(--line); }
.arc-bar a.is-on,
.arc-bar button.is-on {
  background: rgba(125, 140, 240, .14);
  border-color: rgba(125, 140, 240, .42);
  color: var(--tx-1);
}
.arc-bar b {
  font-weight: 500;
  font-size: 13px;
  color: var(--tx-dim);
  font-variant-numeric: tabular-nums;
}
.arc-bar a.is-on b,
.arc-bar button.is-on b { color: var(--c-primary-2); }

/* 6.2 文章列表：序号 + 标题 + 摘要 + 元信息 */
.arc-list { margin-top: 26px; }
.arc-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  column-gap: 16px;
  align-items: start;
  padding: 19px 0;
  border-top: 1px solid var(--line-soft);
}
.arc-item:last-child { border-bottom: 1px solid var(--line-soft); }
/* 页内筛选时被隐藏的行：类选择器的 display:grid 会盖掉 [hidden]，这里显式兜一层 */
.arc-item[hidden] { display: none; }

/* 序号是扫读时的定位点，太淡就白占 44px 列宽：放大一档，用主色但压透明度，
   看得见、不抢标题。 */
.arc-num {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--c-primary-2);
  opacity: .78;
  font-variant-numeric: tabular-nums;
  transition: opacity .18s ease;
}
.arc-item:hover .arc-num { opacity: 1; }
.arc-item h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--tx-1);
  transition: color .18s ease;
}
.arc-item p {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--tx-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 9px;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--tx-dim);
}
.arc-meta i { font-style: normal; color: var(--line); }
/* 分类用等宽 + 字距跟时间区分，不用颜色——原来用青色，跟站内链接同族，读起来像可点 */
.arc-meta .is-cat {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .1em;
  color: var(--tx-3);
}

.arc-go {
  justify-self: end;
  padding-top: 6px;
  font-size: 15px;
  color: var(--tx-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease, color .18s ease;
}
.arc-item:hover h2 { color: var(--c-primary-2); }
.arc-item:hover .arc-go { opacity: 1; transform: translateX(0); color: var(--c-primary-2); }

/* 6.3 分页 */
.arc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}
.arc-pager a,
.arc-pager span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.arc-pager a:hover { color: var(--tx-1); border-color: var(--c-primary); }
.arc-pager a.is-on,
.arc-pager span.is-on {
  background: rgba(125, 140, 240, .24);
  border-color: rgba(125, 140, 240, .58);
  color: #fff;
}
.arc-pager a.is-dis,
.arc-pager span.is-dis { opacity: .38; pointer-events: none; }
/* 只有一页时整条分页收掉：孤零零浮在空白里没有意义，脚本会打上 hidden */
.arc-pager[hidden] { display: none; }

/* 6.4 栏目之间的互链（教程 / 场景 / 选型 三栏目在页尾互相带一带） */
/* 列表末尾 `.arc-item:last-child` 已有一条收尾线，这里不再画第二条：
   两条平行细线之间夹 56px 纯留白，没有信息，只是分成两道。
   只留列表那条线，间距改由 margin 提供。 */
.arc-chans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 48px;
}
.arc-chan {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-card);
  transition: border-color .18s ease, transform .18s ease;
}
.arc-chan:hover { border-color: rgba(125, 140, 240, .42); transform: translateY(-2px); }
.arc-chan span {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--c-cyan);
}
.arc-chan h3 {
  margin: 8px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tx-1);
}
.arc-chan p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tx-3);
}

/* ==========================================================================
   响应式（全部写在末尾，避免被上面的规则覆盖）
   ========================================================================== */
@media (max-width: 1180px) {
  .doc-layout { gap: 48px; }
}

@media (max-width: 1080px) {
  /* 目录收掉：窄屏以正文为主，目录反而占掉一屏。
     正文同时收窄到 760（≈44 字/行），否则单栏会被拉成一整行的长句。 */
  .doc-head .container,
  .doc-main .container,
  .doc-related .container { max-width: 856px; }
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc-aside { display: none; }
  /* 节编号回到行内：正文贴到容器边，悬挂位已经没有空间 */
  .doc-body h2[data-n]::before {
    position: static;
    display: inline-block;
    min-width: 24px;
    margin-right: 6px;
    font-size: 12.5px;
    vertical-align: 2px;
  }
  /* 栏目索引从右栏转到标题下方，横向三列 */
  .doc-head.is-chan .doc-head-in { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .doc-head-idx {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .doc-head-idx-title { grid-column: 1 / -1; margin-bottom: 10px; }
  .doc-head-idx a { padding: 0; border-top: 0; }
}

@media (max-width: 900px) {
  .doc-head { padding-block: 0 30px; margin-bottom: 32px; }
  .doc-head h1 { font-size: 25px; line-height: 1.36; }
  .doc-lead { font-size: 16px; line-height: 1.78; }
  .doc-main { padding-block: 44px 64px; }
  .doc-body { font-size: 16px; line-height: 1.82; }
  .doc-body h2 { margin-top: 44px; font-size: 22px; }
  .doc-body h3 { margin-top: 28px; font-size: 17.5px; }
  .doc-body li { font-size: 15.5px; }
  .doc-related { padding-block: 56px; }
  .doc-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .doc-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .doc-row p { font-size: 15.5px; }
  .doc-note { padding: 18px 20px; }
  .doc-step { padding-left: 48px; }

  .arc-item { grid-template-columns: 40px minmax(0, 1fr) 18px; column-gap: 14px; padding: 18px 0; }
  .arc-item h2 { font-size: 17.5px; }
  .arc-chans { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 44px; }
}

@media (max-width: 640px) {
  .doc-head .container,
  .doc-main .container,
  .doc-related .container { padding: 0 20px; }
  .doc-head { padding-block: 0 26px; margin-bottom: 26px; }
  .doc-head h1 { margin-top: 14px; }
  .doc-lead { margin-top: 16px; }
  .doc-meta { margin-top: 20px; font-size: 13.5px; }
  .doc-table { min-width: 480px; font-size: 13.5px; }
  .doc-table th { padding: 10px 14px; }
  .doc-table td { padding: 12px 14px; }

  /* 窄屏：四列表格横滑读不全，改为「每行一张卡」。
     除首列外，其余单元格靠 data-label 自带列名，写表格时记得补上。 */
  .doc-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .doc-table { display: block; min-width: 0; font-size: 14px; }
  .doc-table thead { display: none; }
  .doc-table tbody { display: block; }
  .doc-table tr {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--bg-card);
  }
  .doc-table tr + tr { margin-top: 10px; }
  .doc-table td { display: block; padding: 0; border: 0; }
  .doc-table td:first-child {
    margin-bottom: 10px;
    font-size: 15.5px;
    color: var(--tx-1);
    white-space: normal;
  }
  .doc-table td + td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.7;
  }
  .doc-table td + td::before {
    content: attr(data-label);
    font-size: 13px;
    color: var(--tx-dim);
  }

  .arc-item { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 17px 0; }
  .arc-go { display: none; }
  .arc-item h2 { font-size: 16.5px; }
  .arc-item p { font-size: 13.5px; }
  .arc-meta { font-size: 13.5px; gap: 0 7px; }
  .arc-bar a,
  .arc-bar button { padding: 6px 12px; font-size: 13px; }
  .arc-pager { margin-top: 32px; }
  .arc-pager a { min-width: 34px; height: 34px; padding: 0 10px; }

  /* 手机上索引纵向三行要占掉 260px，把文章列表整块推到首屏之外。
     压成一行 chip，只留栏目名与篇数。 */
  .doc-head-idx {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 18px;
  }
  .doc-head-idx-title { width: 100%; margin: 0 0 2px; }
  .doc-head-idx a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
  }
  .doc-head-idx a:first-of-type {
    padding-top: 7px;
    border-top: 1px solid var(--line-soft);
  }
  .doc-head-idx .ix-name { font-size: 13.5px; }
  .doc-head-idx .ix-n { font-size: 12.5px; }
  .doc-head-idx .ix-desc { display: none; }
}

/* ==========================================================================
   7. 内容页首屏广告带（通栏版 · 2026-10-29）
   --------------------------------------------------------------------------
   设计意图：不做「贴在页面上的卡片」，做成**页面自己的一条视觉带**——
   无圆角、无边框，左右与上下都渐隐到 --bg-deep，与导航、标题区自然接续。
   文案走 HTML（可检索、随屏自适应、与 H1 左对齐）。
   背景是 44px 淡网格 + 左上主色光晕（2026-10-29 起不再用图片）。

   换广告两处：
     文案    下面 .doc-hero-pre / .doc-hero-title / .doc-hero-cta 三行
     目标页  .doc-hero-in 的 href

   ⚠ 位置在 H1 之前，属于百度规范 §4.2.5.3.2 的广告位置限制范围之外
     （限制的是「标题到正文结束之间」），但首屏仍被它占去约 250px。
   ========================================================================== */
.doc-hero {
  position: relative;
  overflow: hidden;
  padding-block: 38px 54px;   /* 下内距仍大于上内距，重心才稳 */
  background: var(--bg-deep);
}

/* 与标题区之间的分隔线：与 /referral/ /agency/ 的 .hero-compact
   用同一条——1px 实色 var(--line-soft)。原来是中间实、两端渐隐的主色发光线，
   在网格背景上比页头那条重一档，两套页面的收尾对不上。 */
.doc-hero::after {
  content: '';
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line-soft);
}

/* 背景层：不铺图片，改用 44px 淡网格 + 左上主色光晕——
   与 /referral/ /agency/ 的 .hero-compact 是同一套语言（2026-10-29 用户指定）。
   零图片、零额外请求，也不再依赖 assets/banner/doc-hero-bg.jpg。
   上下用 mask 渐隐，网格不硬切在带子的上下边缘。 */
.doc-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(120% 150% at 8% 0%, rgba(125, 140, 240, .12) 0%, rgba(125, 140, 240, 0) 62%),
    linear-gradient(rgba(125, 140, 240, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 140, 240, .07) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.doc-hero .container {
  position: relative;
  z-index: 1;
  max-width: 1140px;
}

.doc-hero-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}

/* 两行同为大字：第一行常规字重、第二行粗体，层级靠字重与主色区分，不靠缩小字号 */
.doc-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

.doc-hero-pre {
  font-size: 31px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--tx-1);
  margin-bottom: 8px;
}
.doc-hero-pre span {
  white-space: nowrap;   /* 只允许在「+」前断行，不让「超分宝增强」被拆开 */
}

.doc-hero-title {
  font-size: 31px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--tx-1);
}
.doc-hero-title b {
  color: var(--c-primary-2);
  font-weight: 600;
  white-space: nowrap;
}

/* 底色与全站主 CTA（.btn-console-cta）取同一个值：深一档的实心 #6b79e2，
   hover 提到主色 #7d8cf0。原来是 .16 的半透明底 + 一圈描边，
   在网格背景上偏灰，看不出这是个按钮。描边一并去掉——
   实心底上再压一圈主色描边只会显得脏。 */
.doc-hero-cta {
  display: inline-flex;
  align-items: center;
  /* CTA 从文案列移出、作为 .doc-hero-in 的第二个 flex 子项靠右站：
     与下方栏目索引同一条右边缘。margin-top 归零，靠 align-items:center 垂直居中。 */
  margin-top: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 11px 24px;
  border: 0;
  border-radius: 999px;
  background: #6b79e2;
  font-size: 16px;
  color: #fff;
  transition: background .18s ease;
}
.doc-hero-in:hover .doc-hero-cta {
  background: #7d8cf0;
}

@media (max-width: 900px) {
  .doc-hero { padding-block: 34px 46px; }
  .doc-hero-in { gap: 32px; }
  .doc-hero-pre { font-size: 25px; }
  .doc-hero-title { font-size: 26px; }
  }

@media (max-width: 720px) {
  .doc-hero { padding-block: 30px 42px; }
  .doc-hero-in { display: block; }
  .doc-hero-bg { background-position: center 50%; }
  .doc-hero-bg::after {
    background: linear-gradient(90deg,
      var(--bg-deep) 0%,
      rgba(7, 8, 10, .45) 18%,
      rgba(7, 8, 10, .45) 82%,
      var(--bg-deep) 100%);
  }
  .doc-hero-pre { font-size: 20px; margin-bottom: 6px; }
  .doc-hero-title { font-size: 21px; }
  .doc-hero-cta { margin-top: 18px; padding: 9px 18px; font-size: 13.5px; }
  
}


/* ==========================================================================
   2026-11-05 内容页暗房微光与冰川蓝/香槟金质感同步（33 个栏目与文章页）
   ========================================================================== */
.doc-note {
  border-left: 3px solid #38bdf8;
  border-top: 1px solid rgba(184, 225, 255, .11);
  border-right: 1px solid rgba(184, 225, 255, .11);
  border-bottom: 1px solid rgba(184, 225, 255, .11);
  background:
    radial-gradient(240px 140px at 96% 10%, rgba(56, 189, 248, .09), transparent 72%),
    linear-gradient(90deg, rgba(16, 26, 42, .94) 0%, rgba(12, 18, 30, .96) 100%);
}
.doc-note-title { color: #38bdf8; }
.doc-note.is-warn {
  border-left-color: #fbbf24;
  border-top-color: rgba(251, 191, 36, .22);
  border-right-color: rgba(251, 191, 36, .22);
  border-bottom-color: rgba(251, 191, 36, .22);
  background:
    radial-gradient(240px 140px at 96% 10%, rgba(251, 191, 36, .11), transparent 72%),
    linear-gradient(90deg, rgba(24, 22, 18, .94) 0%, rgba(14, 16, 24, .96) 100%);
}
.doc-note.is-warn .doc-note-title { color: #fbbf24; }

.doc-table-wrap {
  border-color: rgba(184, 225, 255, .14);
  background: linear-gradient(160deg, rgba(15, 22, 34, .96) 0%, rgba(10, 14, 22, .98) 100%);
}
.doc-table th {
  color: #38bdf8;
  background: rgba(26, 40, 64, .45);
  border-bottom-color: rgba(184, 225, 255, .14);
}

.doc-card {
  border-color: rgba(184, 225, 255, .13);
  background:
    radial-gradient(220px 150px at 95% 6%, rgba(56, 189, 248, .08), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 36, .95) 0%, rgba(10, 14, 22, .98) 100%);
}
.doc-card:nth-child(2) {
  background:
    radial-gradient(220px 150px at 95% 6%, rgba(37, 99, 235, .12), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 36, .95) 0%, rgba(10, 14, 22, .98) 100%);
}
.doc-card:nth-child(3) {
  background:
    radial-gradient(220px 150px at 95% 6%, rgba(251, 191, 36, .09), transparent 72%),
    linear-gradient(160deg, rgba(16, 23, 36, .95) 0%, rgba(10, 14, 22, .98) 100%);
}
.doc-card:hover {
  border-color: rgba(56, 189, 248, .44);
}