:root {
  --bg: #f5f7ff;
  --panel: rgba(255, 255, 255, 0.94);
  --text: #21325c;
  --muted: #6d79a2;
  --line: rgba(215, 224, 250, 0.9);
  --accent: #526cff;
  --accent-soft: rgba(82, 108, 255, 0.1);
  --shadow: 0 16px 40px rgba(82, 104, 170, 0.08);
  /* ── 设计 token（2026-08-28 收敛）──────────────────────────
     取值全部沿用改造前的字面量，所以这次改造零视觉变化；
     真正的收益是「改一处 = 改全站」——想统一风格就改这里的值，
     不用再全文搜 border-radius / #fff。
     生成与替换见 markwave-ops/checks/ 下的 token-plan.mjs 与 token-apply.mjs。
     ⚠️ 新写样式时请用这些 token，别再写字面量，否则会重新散开。 */
  /* 圆角：4 个真正的旋钮 + 3 个固定形状。
     2026-08-28 二次收敛——第一次只是把 11 种散落取值编了目，
     「卡片」被拆在 16/14px、「中等元素」拆在 12/10px，
     想统一改卡片圆角仍要改 4 个 token，等于没解决问题。
     现在相近档位用别名并到同一个值：改一行 = 改一类。
     要恢复各自独立，把下面 4 个 var() 别名换回原来的字面量即可
     （原值写在各自注释里）。 */
  --radius-pill: 999px;  /* 胶囊：标签、药丸按钮 */
  --radius-circle: 50%;  /* 正圆：头像、圆点 */
  --radius-lg: 20px;  /* ← 旋钮①：大面板 */
  --radius-card: 14px;  /* ← 旋钮②：卡片 */
  --radius-md: 12px;  /* ← 旋钮③：中等元素（输入框、次级卡片） */
  --radius-xs: 8px;  /* ← 旋钮④：标签、代码块 */
  --radius-2xs: 4px;  /* 极小圆角 */
  /* 别名：并入上面的旋钮，括号里是合并前的原值 */
  --radius-2xl: var(--radius-lg);  /* 原 28px */
  --radius-xl: var(--radius-lg);  /* 原 20px */
  --radius-card-sm: var(--radius-card);  /* 原 14px（本档基准） */
  --radius-sm: var(--radius-md);  /* 原 10px */
  /* 间隙 */
  --gap-2xs: 6px;
  --gap-xs: 8px;
  --gap-sm: 10px;
  --gap-md: 12px;
  --gap-lg: 14px;
  --gap-xl: 16px;
  --gap-2xl: 20px;
  --gap-3xl: 28px;
  /* 颜色 */
  --white: #fff;  /* 纯白：卡片底、反白文字 */
  --ink: #07111f;  /* 深墨：暗色区域的文字与底色 */
  --slate: #64748b;  /* 石板灰：次级说明文字 */
  --ok-bg: #e6f8ee;  /* 成功态底色（callout） */
  --ok-fg: #1a6b40;  /* 成功态文字 */
  --border-soft: rgba(15, 23, 42, 0.12);  /* 浅边框 / 阴影 */
  --panel-translucent: rgba(255, 255, 255, 0.82);  /* 半透明面板：粘性头部 */
  --line-strong: rgba(215, 224, 250, 0.95);  /* 较实的分隔线 */
  /* ── 字号音阶（2026-08-28）────────────────────────────────
     收敛前 49 种取值，其中 0.82/0.86/0.88/0.92/0.95rem 彼此只差 1px 上下——
     那不是层级，是随手写出来的，正是「排版看着乱」的根因。
     档位参考 shadcn/ui 实测（它全站字号只有 4~5 档，14px 占绝对多数），
     但比它多留了几档：中文正文比拉丁字母需要更大的字号才舒适。
     调整在 markwave-ops 的 Token Studio 里可视化进行。 */
  --fs-2xs: 0.6875rem;  /* 11px 角标、极小标签 */
  --fs-xs: 0.75rem;  /* 12px 标签、元信息 */
  --fs-sm: 0.8125rem;  /* 13px 次级说明 */
  --fs-md: 0.875rem;  /* 14px UI 文本、卡片描述 */
  --fs-base: 1rem;  /* 16px 正文 */
  --fs-lg: 1.125rem;  /* 18px 小标题 */
  --fs-xl: 1.5rem;  /* 24px 标题 */
  --fs-2xl: 1.75rem;  /* 28px 大标题 */
  --fs-3xl: 2rem;  /* 32px 区块标题 */
  --fs-4xl: 2.625rem;  /* 42px 页面主标题 */
  /* ── 动效（2026-08-28）─────────────────────────────────────
     时长本来就对：全站 13 条 transition 里 12 条是 0.15s，
     和 shadcn/ui 实测的主力值（0.15s 出现 207 次）一致，没动。
     真正抄来的是**缓动曲线**：原来全是浏览器默认的 ease，换成
     transitions.dev 的主力曲线 cubic-bezier(0.22, 1, 0.36, 1)
     （easeOutQuint）——起步快、收尾稳，手感明显更利落。 */
  --dur-fast: 0.12s;
  --dur: 0.15s;
  --dur-slow: 0.25s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(122, 150, 255, 0.1), transparent 22%),
    linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

.container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel-translucent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner,
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-inner {
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--white);
}

.brand-logo {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: 0 6px 16px var(--border-soft);
}

/* 顶栏搜索框：长得像输入框，实际是个链接（见 partials/header.html）。
   margin-right:auto 让它紧挨 logo，导航被推到最右——文档页容器宽到 1440，
   靠 space-between 会把它甩到正中间，离 logo 太远。 */
.header-search {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  width: min(280px, 100%);
  margin-right: auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: var(--fs-md);
  text-decoration: none;
}

.header-search:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.header-search-icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.header-search-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.header-search-kbd {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xs);
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-2xs);
  line-height: 1.5;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--gap-2xl);
  color: var(--muted);
  font-size: var(--fs-base);
}

.hero {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.hero-text {
  flex: 1;
  min-width: 0;
}

.hero-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero h1 {
  max-width: 640px;
  margin: 0 0 16px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.hero-desc {
  max-width: 520px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: var(--gap-lg);
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2xs);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 700;
  transition: filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: inherit;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
}

.btn-secondary {
  background: var(--panel);
  color: var(--text);
  border: 1.5px solid var(--line);
}

.hero-avatar {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  border: 4px solid var(--line);
  box-shadow: var(--shadow);
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eyebrow,
.widget-label {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gap-3xl);
  padding: 32px 0;
}

.page-layout {
  align-items: start;
}

.content-column,
.sidebar,
.article {
  min-width: 0;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  margin-bottom: 16px;
}

.section-head h1,
.section-head h2 {
  margin: 0;
}

.section-head a,
.text-link {
  color: var(--accent);
  font-weight: 700;
}

.archive-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-3xl);
  margin-bottom: 24px;
  padding: 28px 30px;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at top right, rgba(131, 220, 255, 0.26), transparent 20%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(244, 247, 255, 0.96));
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgba(82, 104, 170, 0.08);
}

.archive-hero-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: rgba(82, 108, 255, 0.08);
  color: var(--accent);
  font-size: var(--fs-md);
  font-weight: 800;
}

.post-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.post-card,
.widget,
.article,
.article-ad {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.post-card {
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.post-card h2 {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.post-cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(13, 24, 96, 0.98), rgba(38, 67, 181, 0.92) 44%, rgba(132, 82, 255, 0.82)),
    radial-gradient(circle at 70% 26%, rgba(112, 255, 255, 0.34), rgba(255,255,255,0) 18%);
}

.post-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.post-card:hover .post-cover img {
  transform: scale(1.035);
}

.post-cover-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(13, 24, 96, 0.98), rgba(38, 67, 181, 0.92) 44%, rgba(132, 82, 255, 0.82)),
    radial-gradient(circle at 70% 26%, rgba(112, 255, 255, 0.34), rgba(255,255,255,0) 18%);
  color: var(--white);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-bottom: 12px;
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 700;
}

.post-source {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(82, 108, 255, 0.1);
  color: var(--accent);
}

.post-summary {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta,
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  color: var(--muted);
  font-size: var(--fs-md);
  margin-top: 10px;
}

.post-meta span,
.article-meta span {
  color: var(--accent);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  margin-top: 14px;
}

.post-tags span,
.post-tags a,
.tag-cloud a,
.term-grid a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2xs);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-md);
  font-weight: 700;
}

.post-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  padding-top: 18px;
}

.post-read-hint {
  color: #8a97b8;
  font-size: var(--fs-md);
  font-weight: 700;
}

.post-read-more {
  color: var(--accent);
  font-weight: 800;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(82, 104, 170, 0.12);
  border-color: rgba(174, 191, 255, 0.95);
}

.sidebar {
  display: grid;
  gap: var(--gap-xl);
  align-self: start;
  position: sticky;
  top: 92px;
}

.widget {
  padding: 20px;
  background: rgba(255,255,255,0.92);
}

.widget h2 {
  margin: 0 0 12px;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
}

.service-widget {
  border-color: rgba(174, 191, 255, 0.95);
}

.service-card {
  display: grid;
  gap: var(--gap-2xs);
  margin: 10px 0;
  padding: 16px;
  border-radius: var(--radius-card-sm);
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}

.service-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  color: inherit;
}

.service-card--primary {
  background: linear-gradient(135deg, rgba(22, 39, 130, 0.98), rgba(72, 108, 255, 0.96) 56%, rgba(139, 88, 255, 0.88));
  color: var(--white);
}

.service-card--secondary {
  background: linear-gradient(135deg, rgba(33, 50, 92, 0.98), rgba(67, 93, 204, 0.96));
  color: var(--white);
}

.service-card strong {
  display: block;
  font-size: var(--fs-base);
}

.service-card span {
  color: var(--panel-translucent);
  font-size: var(--fs-md);
  line-height: 1.5;
}

.service-card em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--fs-md);
  font-weight: 700;
}

.ad-widget {
  border-color: rgba(15, 118, 110, 0.28);
}

.ad-card {
  display: grid;
  gap: var(--gap-2xs);
  margin: 10px 0;
  padding: 16px;
  border-radius: var(--radius-card-sm);
  background: linear-gradient(135deg, #0f766e, #115e59);
  color: var(--white);
}

.ad-card span {
  color: var(--panel-translucent);
  font-size: var(--fs-md);
}

.compact-list {
  display: grid;
  gap: var(--gap-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}

.compact-list a {
  color: var(--muted);
  transition: color var(--dur) var(--ease-out);
}

.compact-list a:hover {
  color: var(--accent);
}

.tag-cloud,
.term-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.term-grid {
  margin-top: 18px;
}

.article {
  padding: min(6vw, 44px);
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(131, 220, 255, 0.14), transparent 18%),
    rgba(255,255,255,0.94);
}

.article h1 {
  margin: 8px 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.article-body {
  margin-top: 28px;
  font-size: var(--fs-base);
}

.article-tags {
  margin-top: 18px;
}

.article-body h2 {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.article-body p,
.article-body ul {
  color: #374151;
}

.article-body ul,
.article-body ol {
  padding-left: 1.35rem;
}

.article-body blockquote {
  margin: 24px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: rgba(82, 108, 255, 0.06);
  border-radius: 0 16px 16px 0;
  color: #405176;
}

.article-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  border-radius: var(--radius-card-sm);
}

.article-body p:has(img) {
  margin: 24px 0;
}

.article-body figure {
  margin: 28px 0;
}

.article-body figure img {
  margin: 0 auto;
}

.article-body pre {
  max-width: 100%;
  overflow-x: auto;
}

/* 表格是文档库的基本件，此前只有溢出滚动、没有边框和表头，渲染出来是裸的。
   .table-wrap 由 layouts/_default/_markup/render-table.html 生成，宽表只让自己滚，
   不把整页撑出横向滚动条。 */
.article-body .table-wrap {
  max-width: 100%;
  margin: 20px 0;
  overflow-x: auto;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  line-height: 1.6;
}

.article-body thead th {
  background: var(--accent-soft);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.article-body th,
.article-body td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  vertical-align: top;
}

.article-body tbody tr:nth-child(even) {
  background: rgba(215, 224, 250, 0.16);
}

/* ---------- 高亮块 / 折叠块（飞书文档那两种块，shortcode 生成） ---------- */
/* info 直接复用品牌主色，其余四色是为了区分语义补的，饱和度压到和品牌同一档，
   不引入第二套视觉语言。 */
.callout {
  display: flex;
  gap: var(--gap-sm);
  margin: 20px 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--callout-bg);
  color: var(--callout-fg);
}

.callout-info {
  --callout-bg: rgba(82, 108, 255, 0.08);
  --callout-fg: #33407a;
}

.callout-success {
  --callout-bg: rgba(22, 163, 116, 0.09);
  --callout-fg: #14603f;
}

.callout-warn {
  --callout-bg: rgba(217, 143, 20, 0.11);
  --callout-fg: #6d4708;
}

.callout-danger {
  --callout-bg: rgba(214, 63, 63, 0.09);
  --callout-fg: #8a2020;
}

.callout-note {
  --callout-bg: rgba(109, 121, 162, 0.1);
  --callout-fg: #414c72;
}

.callout-emoji {
  flex: none;
  line-height: 1.7;
}

.callout-body {
  min-width: 0;
  flex: 1;
}

/* 块内首尾段不要再撑外边距，否则块看起来上下发虚 */
.callout-body > :first-child {
  margin-top: 0;
}

.callout-body > :last-child {
  margin-bottom: 0;
}

.callout-body p,
.callout-body ul,
.callout-body ol {
  color: inherit;
}

.callout-title {
  font-weight: 600;
}

.collapse-block {
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.collapse-summary {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 11px 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.collapse-summary::-webkit-details-marker,
.collapse-summary::marker {
  display: none;
  content: "";
}

.collapse-summary:hover {
  color: var(--accent);
}

.collapse-chev {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
  transition: transform var(--dur) var(--ease-out);
}

.collapse-chev::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 5px solid var(--muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.collapse-block[open] > .collapse-summary > .collapse-chev {
  transform: rotate(90deg);
}

.collapse-body {
  padding: 0 14px 12px;
  border-top: 1px solid var(--line);
}

.collapse-body > :first-child {
  margin-top: 14px;
}

.collapse-body > :last-child {
  margin-bottom: 0;
}

/* Social proof */
.social-proof {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 24px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  border-right: 1px solid var(--line);
}

.stat-item:last-child {
  border-right: none;
}

.stat-number {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--accent);
}

.stat-label {
  font-size: var(--fs-md);
  color: var(--muted);
}

/* Landing pages */
.landing-layout {
  max-width: 860px;
  padding-top: 48px;
  padding-bottom: 80px;
}

.landing-hero {
  text-align: center;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}

.landing-hero h1 {
  margin: 16px 0 18px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.04em;
}

.landing-hero p {
  max-width: 560px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: var(--fs-base);
}

.landing-section {
  margin-bottom: 48px;
}

.landing-section-title {
  margin: 0 0 24px;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.feature-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow);
}

.feature-icon {
  font-size: var(--fs-2xl);
  margin-bottom: 12px;
}

.feature-card h3 {
  margin: 0 0 8px;
  font-size: var(--fs-base);
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.checklist {
  display: grid;
  gap: var(--gap-md);
  padding: 0;
  list-style: none;
  margin: 0;
}

.checklist li {
  display: flex;
  gap: var(--gap-md);
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
}

.checklist li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 800;
}

.steps-list {
  display: grid;
  gap: var(--gap-lg);
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: steps;
}

.steps-list li {
  display: flex;
  gap: var(--gap-xl);
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  counter-increment: steps;
}

.steps-list li::before {
  content: counter(steps);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.landing-cta {
  text-align: center;
  padding: 48px 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.landing-cta h2 {
  margin: 0 0 12px;
  font-size: var(--fs-xl);
}

.landing-cta p {
  margin: 0 0 24px;
  color: var(--muted);
}

.landing-cta a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-ad {
  margin-top: 34px;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(244,247,255,0.96), rgba(234, 240, 255, 0.92));
  border: 1px solid var(--line-strong);
}

.article-ad h2 {
  margin: 6px 0;
}

.article-ad p {
  margin: 0 0 12px;
  color: var(--muted);
}

.article-ad a {
  color: var(--accent);
  font-weight: 800;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--panel-translucent);
  color: var(--muted);
}

.footer-inner {
  padding: 26px 0;
  font-size: var(--fs-md);
}

.footer-inner p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  margin: 0;
}

@media (max-width: 860px) {
  .hero-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
  }

  .archive-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3) {
    border-top: 1px solid var(--line);
  }

  .stat-item:nth-child(4) {
    border-top: 1px solid var(--line);
    border-right: none;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .hero-avatar {
    width: 88px;
    height: 88px;
  }

  /* 2026-08-17：这里原本是 flex-direction:column + .header-search{order:3;width:100%}，
     把 logo / 导航 / 搜索框竖排成三行，顶栏占掉大半个首屏。
     改成保持单行 + 汉堡菜单（规则在文件末尾「窄屏导航」区块）。
     ⚠️ 别再把 flex-direction 改回 column —— 那会让汉堡按钮自己占一行，就是改之前的样子。 */
  .header-inner {
    padding: 12px 0;
  }

  /* 触屏没有 Cmd+K，别展示一个按不出来的快捷键 */
  .header-search-kbd {
    display: none;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .post-list {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .post-list {
    grid-template-columns: 1fr;
  }
}

/* MarkWave homepage */
.landing-hero {
  position: relative;
  overflow: hidden;
  text-align: left;
  margin-bottom: 0;
  padding: 86px 0 72px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    var(--white);
  background-size: 46px 46px;
}

.landing-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--bg));
  pointer-events: none;
}

.landing-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 64px;
  align-items: center;
}

.landing-copy h1 {
  max-width: 720px;
  margin: 0 0 22px;
  color: var(--ink);
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.landing-lead {
  max-width: 580px;
  margin: 0 0 32px;
  color: #4b5563;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.75;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.btn {
  border-radius: var(--radius-xs);
}

.btn-primary {
  background: var(--ink);
}

.btn-primary:hover {
  color: var(--white);
}

.btn-secondary {
  background: var(--white);
}

.system-map {
  position: relative;
  min-height: 520px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
  background:
    radial-gradient(circle at 72% 22%, rgba(34, 211, 238, 0.18), transparent 32%),
    radial-gradient(circle at 20% 76%, rgba(34, 197, 94, 0.16), transparent 28%),
    rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 70px var(--border-soft);
}

.system-map::before,
.system-map::after {
  content: "";
  position: absolute;
  inset: 84px 62px 74px;
  border: 1px dashed rgba(15, 23, 42, 0.17);
  border-radius: var(--radius-pill);
  transform: rotate(-10deg);
}

.system-map::after {
  inset: 116px 110px 112px;
  border-color: rgba(20, 184, 166, 0.3);
  transform: rotate(19deg);
}

.system-map-topline {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  color: var(--slate);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.system-core,
.system-node {
  position: absolute;
  z-index: 1;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09);
}

.system-core {
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  width: 240px;
  padding: 18px;
  transform: translate(-50%, -50%);
}

.system-core img {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-xs);
}

.system-core strong,
.system-node strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.35;
}

.system-core span,
.system-node small {
  display: block;
  margin-top: 4px;
  color: var(--slate);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.system-node {
  width: 190px;
  padding: 16px;
}

.node-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 26px;
  margin-bottom: 12px;
  border-radius: 6px;
  background: #ecfeff;
  color: #0369a1;
  font-size: var(--fs-xs);
  font-weight: 900;
}

.node-content {
  top: 82px;
  left: 34px;
}

.node-agent {
  top: 92px;
  right: 34px;
}

.node-flow {
  bottom: 56px;
  left: 54px;
}

.node-convert {
  right: 42px;
  bottom: 72px;
}

.loop-section,
.path-section,
.knowledge-section,
.final-cta {
  padding: 82px 0;
}

.section-head-stack {
  display: block;
  margin-bottom: 30px;
}

.section-head-stack h2,
.path-intro h2,
.knowledge-copy h2,
.final-cta h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.section-head-stack p,
.path-intro p,
.knowledge-copy p,
.final-cta p {
  max-width: 720px;
  margin: 0;
  color: var(--slate);
  font-size: var(--fs-base);
}

.loop-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--white);
  box-shadow: var(--shadow);
}

.loop-step {
  min-height: 260px;
  padding: 26px;
  border-right: 1px solid var(--line);
}

.loop-step:last-child {
  border-right: none;
}

.loop-step span,
.path-card-index {
  color: #0891b2;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.loop-step h3,
.path-card h3 {
  margin: 42px 0 12px;
  color: var(--ink);
  font-size: var(--fs-lg);
  line-height: 1.35;
}

.loop-step p,
.path-card p {
  margin: 0;
  color: var(--slate);
  font-size: var(--fs-base);
  line-height: 1.7;
}

.path-section {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.path-grid,
.knowledge-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
}

.path-list {
  display: grid;
  gap: var(--gap-lg);
}

.path-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 0.8fr) minmax(180px, 1fr) auto;
  gap: var(--gap-2xl);
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.path-card:first-child {
  border-top: 1px solid var(--line);
}

.path-card h3 {
  margin: 0;
}

.path-card a,
.knowledge-copy a {
  color: #0f766e;
  font-weight: 800;
}

.knowledge-list {
  display: grid;
  gap: var(--gap-md);
}

.knowledge-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.knowledge-item:first-child {
  border-top: 1px solid var(--line);
}

.knowledge-item time {
  color: #0891b2;
  font-size: var(--fs-md);
  font-weight: 800;
}

.knowledge-item span {
  color: var(--ink);
  font-weight: 750;
  line-height: 1.45;
}

.final-cta {
  padding-top: 40px;
}

.final-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3xl);
  padding: 42px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(90deg, rgba(236, 253, 245, 0.9), rgba(236, 254, 255, 0.9)),
    var(--white);
}

.final-cta h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

@media (max-width: 960px) {
  .landing-hero-inner,
  .path-grid,
  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  .system-map {
    min-height: 500px;
  }

  .loop-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loop-step:nth-child(2) {
    border-right: none;
  }

  .loop-step:nth-child(3),
  .loop-step:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .path-card {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .path-card p,
  .path-card a {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .landing-hero,
  .loop-section,
  .path-section,
  .knowledge-section,
  .final-cta {
    padding: 56px 0;
  }

  .landing-copy h1 {
    font-size: var(--fs-4xl);
  }

  .system-map {
    display: grid;
    gap: var(--gap-md);
    min-height: 0;
    padding: 58px 14px 14px;
  }

  .system-map::before,
  .system-map::after {
    display: none;
  }

  .system-core,
  .system-node {
    position: static;
    width: auto;
    transform: none;
  }

  .loop-rail {
    grid-template-columns: 1fr;
  }

  .loop-step {
    min-height: auto;
    border-right: none;
    border-top: 1px solid var(--line);
  }

  .loop-step:first-child {
    border-top: none;
  }

  .loop-step h3 {
    margin-top: 28px;
  }

  .path-card,
  .knowledge-item,
  .final-cta-inner {
    display: grid;
    grid-template-columns: 1fr;
  }

  .path-card p,
  .path-card a {
    grid-column: auto;
  }

  .final-cta-inner {
    padding: 28px;
  }
}

/* 文章首位链接板块（摘要式，正文最上方）—— 见 layouts/partials/article-header-block.html */
.article-header-block {
  margin: 0 0 28px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow);
}
.article-header-block .widget-label {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
}
.article-header-block .hb-title {
  margin: 0 0 8px;
  font-size: var(--fs-lg);
}
.article-header-block .hb-intro {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.75;
}
.article-header-block .hb-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--gap-xs);
}
.article-header-block .hb-links a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.article-header-block .hb-links a:hover { text-decoration: underline; }
.article-header-block .hb-note {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.9em;
}

/* ============================================================
   文档（/docs）三栏布局：左侧章节树 / 正文 / 右侧本页目录
   复用 :root 里已有的 token，不引入新配色。
   ============================================================ */

/* 文档页整体放宽：header / footer / 正文用同一个 .container，所以在 body 上
   加类一起放宽，避免顶栏 1120 而内容 1440 的错位。 */
.is-docs .container {
  width: min(1440px, calc(100% - 48px));
}

.docs-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 220px;
  gap: 40px;
  padding: 32px 0;
  align-items: start;
}

/* 中栏可用宽度约 880px，正文再收到 800——中文长文超过这个宽度回行就开始费劲。
   多出来的余量留白，不是浪费。 */
.docs-article > * {
  max-width: 800px;
}

/* ---------- 左侧章节树 ---------- */
.docs-nav {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-right: 4px;
  font-size: var(--fs-md);
}

.docs-nav-home {
  display: block;
  padding: 7px 10px;
  margin-bottom: 8px;
  border-radius: var(--radius-xs);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
}

.docs-nav-home:hover,
.docs-nav-home.is-current {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

/* 分组标题常驻（不折叠），下面平铺该章文章；只有子目录才折叠。
   分组标题和文章不做缩进区分——靠字重和分组间距区隔就够，缩进会把本来
   就窄的侧栏再吃掉一截。 */
/* 2026-08-17：原本 18px，10 个章节叠起来侧栏被拉得很长，
   收到 4px，间隔改由标题/条目自身的 padding 提供。 */
.docs-nav-group {
  margin-top: 4px;
}

/* 章节标题行：标题占满左侧，箭头贴右。点标题跳章节页，点箭头只展开——
   都在 <summary> 里，点链接会整页跳转，折叠状态由服务端重算，所以两者不打架。 */
.docs-nav-group-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  list-style: none;
}

.docs-nav-group-summary::-webkit-details-marker,
.docs-nav-group-summary::marker {
  display: none;
  content: "";
}

.docs-nav-group-summary:hover {
  background: var(--accent-soft);
}

.docs-nav-group-title {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-nav-group-title:hover {
  color: var(--accent);
}

.docs-nav-group-title.is-current {
  color: var(--accent);
  background: var(--accent-soft);
}

.docs-nav-list {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}

.docs-nav-list li + li {
  margin-top: 1px;
}

/* 侧栏显示完整原标题（公众号式长标题），单行截断；鼠标悬停时横向滚动出后半段。
   container-type 是为了让下面的 keyframes 能用 100cqw 拿到本行的可视宽度——
   纯 CSS 没法知道文字有没有溢出，用「span 宽度 - 行宽」算位移，再用 min() 夹住 0，
   不溢出时位移为 0，动画等于不动。 */
.docs-nav-link {
  display: block;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.5;
  overflow: hidden;
  container-type: inline-size;
}

.docs-nav-text {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.docs-nav-link:hover .docs-nav-text,
.docs-nav-link:focus-visible .docs-nav-text {
  max-width: none;              /* 放开宽度，省略号让位给滚动 */
  text-overflow: clip;
  animation: docs-nav-marquee 7s ease-in-out infinite alternate;
}

@keyframes docs-nav-marquee {
  0%, 12%   { transform: translateX(0); }
  88%, 100% { transform: translateX(min(0px, calc(100cqw - 100%))); }
}

@media (prefers-reduced-motion: reduce) {
  .docs-nav-link:hover .docs-nav-text,
  .docs-nav-link:focus-visible .docs-nav-text {
    animation: none;
  }
}

.docs-nav-link:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.docs-nav-link.is-current {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

/* 文件夹：链接照常可点，右侧三角负责展开 */
.docs-nav-summary {
  display: flex;
  align-items: center;
  border-radius: var(--radius-xs);
  cursor: pointer;
  list-style: none;
}

.docs-nav-summary::-webkit-details-marker,
.docs-nav-summary::marker {
  display: none;
  content: "";
}

.docs-nav-summary:hover {
  background: var(--accent-soft);
}

.docs-nav-summary > .docs-nav-link {
  flex: 1;
  min-width: 0;
}

.docs-nav-summary > .docs-nav-link:hover {
  background: none;
}

/* 细描边的 ›，不是实心三角——外框保持 22px 只为留出点击热区，图形本身很小。
   用一个方块只留右、下两条边再转 -45° 拼出来，比图标字体省一个请求。 */
.docs-nav-chev {
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 2px;
  position: relative;
  transition: transform var(--dur) var(--ease-out);
}

.docs-nav-chev::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.5px;
  height: 5.5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translate(-65%, -50%) rotate(-45deg);
}

/* 章节和子文件夹共用同一个箭头，展开时转 90° */
.docs-nav details[open] > summary > .docs-nav-chev {
  transform: rotate(90deg);
}

/* 子层缩进，并用一条竖线标出归属 */
.docs-nav-sublist {
  margin-left: 10px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

/* ---------- 正文 ---------- */
.docs-article {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 32px 36px 40px;
}

.docs-crumb {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 12px;
}

.docs-crumb a {
  color: var(--muted);
  text-decoration: none;
}

.docs-crumb a:hover {
  color: var(--accent);
}

.docs-article > h1 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.3;
}

.docs-title-suffix, .dr-model-count { white-space: nowrap; }
.keep-together { white-space: nowrap; }

.docs-lede {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.65;
}

.docs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.docs-body {
  padding-top: 4px;
}

/* ---------- 目录（右栏 + 窄屏内联） ---------- */
.docs-aside {
  position: sticky;
  top: 84px;
  font-size: var(--fs-sm);
}

.docs-toc {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  margin-bottom: 16px;
}

.docs-toc-label {
  margin: 0 0 8px;
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.docs-toc #TableOfContents ul,
.docs-toc-inline #TableOfContents ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.docs-toc #TableOfContents ul ul {
  padding-left: 12px;
}

.docs-toc #TableOfContents a,
.docs-toc-inline #TableOfContents a {
  display: block;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.45;
}

.docs-toc #TableOfContents a:hover {
  color: var(--accent);
  border-left-color: var(--accent);
}

.docs-toc-inline {
  display: none;
  margin: 18px 0 4px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

.docs-toc-inline summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-md);
}

/* ---------- 文章页文首引流 banner（2026-09-18 加） ----------
   数据在 data/ads/slots.toml 的 [article-top]，渲染在 partials/ad-slot.html，
   挂载点在 layouts/docs/single.html（正文最前、本页目录之上）。
   它和吸底条是两种东西：吸底条是 fixed 浮层、要算 z-index 和让位；
   这条就是正文里的一个普通块，跟着文档流走，不覆盖任何东西。

   宽度交给 .docs-article > * 的 max-width:800px，所以这里不写死宽度，
   只保证「图能随栏宽等比缩放」。 */
.article-banner {
  margin: 20px 0 22px;
}

.article-banner-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* <picture> 本身不是盒子，得显式 block，否则里面的 img 会按 inline 参与排版、
   在图片下方多出几像素的行盒空隙。 */
.article-banner picture {
  display: block;
}

.article-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* 可点状态。现在 slots.toml 里 url 是空的（图上承诺的「去公众号关注」
   站内没有页面能兑现，见那边的注释），所以这两条暂时不生效，
   等哪天补上落地页就自动变成可点。 */
.article-banner-link {
  display: block;
  border-radius: var(--radius-card);
}

.article-banner-link:hover img {
  box-shadow: 0 10px 26px rgba(82, 104, 170, 0.16);
}

.docs-aside-cta {
  display: grid;
  gap: var(--gap-xs);
}

.docs-aside-cta a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.4;
}

.docs-aside-cta a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 赞助位（partial: sponsor-slot.html，数据在 data/ads/ads.toml）。
   两处复用：docs 文章的右侧 .docs-aside，以及非 docs 页的 .sidebar。
   刻意做得比 .docs-aside-cta 克制——那两条是自家入口，这里是付费位，
   抢过正文注意力会伤阅读体验，而阅读体验才是这个位置能卖钱的前提。 */
.sponsor-slot {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--gap-xs);
}
.sponsor-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sponsor-card {
  display: block;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);   /* 虚线边框，和实线的自家 CTA 区分开 */
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  line-height: 1.45;
}
.sponsor-card:hover {
  border-color: var(--accent);
  border-style: solid;
}
.sponsor-card strong {
  display: block;
  font-weight: 600;
}
.sponsor-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9em;
}
/* .sidebar 里的 .widget 自带 20px 内边距，赞助位跟着缩进会显得比其它块窄一截 */
.sidebar > .sponsor-slot {
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

/* ---------- 上下篇 ---------- */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.docs-pager-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
}

.docs-pager-item.is-empty {
  border: none;
}

.docs-pager-item:hover {
  border-color: var(--accent);
}

.docs-pager-item span {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.docs-pager-item strong {
  font-size: var(--fs-md);
  line-height: 1.45;
  font-weight: 600;
}

.docs-pager-next {
  text-align: right;
}

/* ---------- 文档首页章节卡片 ---------- */
.docs-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--gap-xl);
  margin-top: 8px;
}

.docs-chapter-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card-sm);
  background: var(--bg);
}

.docs-chapter-title {
  display: flex;
  align-items: baseline;
  gap: var(--gap-xs);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.docs-chapter-title:hover {
  color: var(--accent);
}

.docs-chapter-title em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}

.docs-chapter-card > p {
  margin: 8px 0 12px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}

.docs-chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.docs-chapter-list a {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
}

.docs-chapter-list a:hover {
  color: var(--accent);
}

.docs-chapter-more a {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- 章节页文档列表 ---------- */
.docs-page-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap-sm);
}

.docs-page-item {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
}

.docs-page-item:hover {
  border-color: var(--accent);
}

.docs-page-item strong {
  font-size: var(--fs-md);
  line-height: 1.45;
}

.docs-page-item span {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}

.docs-page-item em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ---------- 响应式 ---------- */
/* 断点从 1080 提到 1160：左右两栏加宽了 80px，按老断点会在 1100 附近把正文
   压到 470px 左右。 */
@media (max-width: 1160px) {
  .docs-layout {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .docs-aside {
    display: none;
  }

  .docs-toc-inline {
    display: block;
  }
}

@media (max-width: 720px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-2xl);
  }

  /* .docs-nav 原本在这里被摊平成 position:static 的方块，整棵章节树堆在正文上方。
     2026-08-17 改成抽屉，规则移到文件末尾「窄屏导航」区块，这里不再定义。 */

  .docs-article {
    padding: 22px 18px 30px;
  }

  .docs-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-pager-next {
    text-align: left;
  }
}

/* ---------- Cmd+K 搜索弹层 ---------- */
.ksearch {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
}

.ksearch[hidden] {
  display: none;
}

body.ksearch-open {
  overflow: hidden;
}

.ksearch-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(33, 50, 92, 0.32);
  backdrop-filter: blur(2px);
}

.ksearch-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 10px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 24px 64px rgba(33, 50, 92, 0.22);
}

.ksearch-mount {
  min-height: 0;
  overflow-y: auto;
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--text);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--white);
  --pagefind-ui-border: var(--line);
  --pagefind-ui-tag: var(--accent-soft);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 10px;
  --pagefind-ui-font: inherit;
}

/* 空态的标签区：一开始输入就整块收起（脚本给 panel 加 has-query） */
.ksearch-tags {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ksearch-panel.has-query .ksearch-tags {
  display: none;
}

.ksearch-tags-label {
  margin: 0 2px 8px;
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ksearch-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2xs);
  max-height: 30vh;
  overflow-y: auto;
}

.ksearch-tags-list a {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.ksearch-tags-list a:hover {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.ksearch-hint {
  margin: 8px 2px 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.ksearch-hint kbd {
  display: inline-block;
  min-width: 18px;
  margin-right: 4px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xs);
  background: var(--bg);
  font: inherit;
  font-size: var(--fs-2xs);
  text-align: center;
}

/* ---------- 搜索页（Pagefind UI 容器） ---------- */
.pagefind-mount {
  margin-top: 20px;
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--text);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--panel);
  --pagefind-ui-border: var(--line);
  --pagefind-ui-tag: var(--accent-soft);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 12px;
  --pagefind-ui-font: inherit;
}

.search-fallback {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--muted);
  line-height: 1.7;
}

/* ==========================================================================
   窄屏导航（2026-08-17）
   ==========================================================================
   两套抽屉，都是纯 CSS 的 checkbox 方案，**不依赖 JS**：
     · 顶栏菜单  ≤860px 收成汉堡，点开是下拉面板
     · 文档目录  ≤720px 收成左下角悬浮按钮，点开是左侧浮层
   此前 ≤720px 时 .docs-nav 是 position:static，整棵章节树堆在正文上方。

   实现要点：开关 <input> 和 <label> 必须是目标元素的**前置兄弟**（用 `~` 选择），
   模板里调换顺序就会失效，两个 partial 里都写了注释。
   「点正文收回」靠一个覆盖全屏的 <label for>（scrim），点它等于再点一次开关；
   点导航里的链接会跳页，checkbox 自然重置，不用额外处理。

   z-index 分层（现有：.site-header 10，Cmd+K 弹层 .ksearch 100）：
     顶栏下拉 20/21（在 .site-header 的层叠上下文内，够用）
     文档抽屉 40 scrim / 41 抽屉 / 42 悬浮按钮
   全部低于 100，不会盖住搜索弹层。
   ========================================================================== */

.docs-nav-toggle,
.site-nav-toggle {
  /* 不用 display:none —— 那样键盘 Tab 不到，开关就没法用键盘操作了。 */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 顶栏汉堡（≤860px） ---------- */

.header-inner {
  position: relative;   /* .main-nav 下拉用它做定位参照 */
}

.nav-burger,
.docs-nav-fab {
  display: none;        /* 宽屏不出现，媒体查询里再打开 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.nav-burger svg,
.docs-nav-fab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.nav-burger:hover,
.docs-nav-fab:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 键盘可达：焦点在隐藏的 input 上，把焦点环画到对应的 label 上 */
.site-nav-toggle:focus-visible ~ .nav-burger,
.docs-nav-toggle:focus-visible ~ .docs-nav-fab {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-scrim,
.docs-nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(33, 50, 92, 0.34);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

@media (max-width: 860px) {
  .nav-burger {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: none;
  }

  /* 搜索框让位：只留图标和 ⌘K，文字省掉 */
  .header-search {
    width: auto;
    flex: 1;
    min-width: 0;
  }
  .header-search-text {
    display: none;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 21;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 176px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    box-shadow: var(--shadow);
  }

  .site-nav-toggle:checked ~ .main-nav {
    display: flex;
  }

  .main-nav a {
    padding: 9px 12px;
    border-radius: var(--radius-xs);
    color: var(--text);
    text-decoration: none;
  }
  .main-nav a:hover {
    color: var(--accent);
    background: var(--accent-soft);
  }

  /* ⚠️ 这里必须显式写高度，不能只靠上面那条共用的 `inset: 0`（2026-09-13 实测）：
     顶栏 .site-header 上有 backdrop-filter，而 backdrop-filter 会给 position:fixed
     的后代生成新的包含块 —— 于是 inset:0 的「全屏」是相对顶栏那个盒子，
     实测只有 639×68 一条（正好横跨整栏），文件头写的「点正文任意处收起」实际不生效：
     菜单展开后点文章正文不会收起，只有点顶栏那一条才收。
     显式给高度，让它从顶栏上沿往下铺满一屏（顶栏 sticky 在 top:0，所以等于整屏）。 */
  .site-nav-toggle:checked ~ .nav-scrim {
    display: block;
    z-index: 20;
    opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 100vh;
    height: 100dvh;
  }
}

/* ---------- 文档目录抽屉（≤720px） ---------- */

@media (max-width: 720px) {
  /* 覆盖上面 720px 断点里把 .docs-nav 摊平成静态方块的那条规则 */
  .docs-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 41;
    width: min(300px, 84vw);
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 20px 16px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 抽屉滚到底不要带着正文一起滚 */
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg);
    box-shadow: 0 0 40px rgba(33, 50, 92, 0.16);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    visibility: hidden;             /* 收起时别让里面的链接还能被 Tab 到 */
  }

  .docs-nav-toggle:checked ~ .docs-nav {
    transform: translateX(0);
    visibility: visible;
  }

  .docs-nav-fab {
    display: inline-flex;
    position: fixed;
    left: 14px;
    bottom: 16px;
    z-index: 42;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow);
  }

  .docs-nav-toggle:checked ~ .docs-nav-scrim {
    display: block;
    z-index: 40;
    opacity: 1;
  }

  /* 抽屉展开时把按钮挪到抽屉右侧，不然会被抽屉盖住、没法点回去 */
  .docs-nav-toggle:checked ~ .docs-nav-fab {
    left: calc(min(300px, 84vw) + 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-nav,
  .nav-scrim,
  .docs-nav-scrim {
    transition: none;
  }
}

/* ==========================================================================
   文档首页：搜索入口（2026-08-17）
   ==========================================================================
   /docs/ 从「一堆章节卡片」改成 Google 式的搜索页：大搜索框 + 标签云 +
   最新发布滚动条，原来的引导正文和章节卡片保留在下方。
   模板在 layouts/docs/list.html 的 `eq . $docs` 分支。
   ========================================================================== */

.docs-home-hero {
  padding: 28px 0 8px;
  text-align: center;
}

.docs-home-title {
  margin: 0 0 6px;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: -0.03em;
}

.docs-home-lede {
  max-width: 560px;
  margin: 0 auto 26px;
  color: var(--muted);
  line-height: 1.7;
}

/* 长得像输入框，实际是 <a>——见模板注释，别改成 <input> */
.docs-home-search {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--muted);
  text-align: left;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.docs-home-search:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(82, 108, 255, 0.16);
  color: var(--accent);
}

.docs-home-search svg {
  flex: none;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.docs-home-search span {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-base);
}

.docs-home-search kbd {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-xs);
}

/* ---------- 标签云 ---------- */

.docs-home-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-xs);
  width: min(720px, 100%);
  margin: 22px auto 0;
}

.docs-home-tags a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.docs-home-tags a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.docs-home-tags em {
  color: var(--muted);
  font-style: normal;
  font-size: var(--fs-xs);
}

.docs-home-tags-all {
  font-weight: 600;
  color: var(--accent) !important;
}

/* ---------- 最新发布滚动 ---------- */

.docs-home-latest {
  width: min(560px, 100%);
  margin: 30px auto 0;
  text-align: left;
}

.docs-home-latest-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* 固定视口高度 = 3 条，超出部分靠动画滚上来 */
.docs-home-marquee {
  height: 114px;
  overflow: hidden;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* 上下边缘淡出，滚动不会硬切 */
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.docs-home-marquee-track {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: docs-marquee 26s linear infinite;
}

/* 条目渲染了两遍，滚完第一遍（正好 50%）瞬回原点，看起来连续。
   用百分比不写死像素——以后改条数不用动 CSS。 */
@keyframes docs-marquee {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.docs-home-marquee:hover .docs-home-marquee-track,
.docs-home-marquee:focus-within .docs-home-marquee-track {
  animation-play-state: paused;
}

.docs-home-marquee a {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
  padding: 5px 8px;
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.docs-home-marquee a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.docs-home-marquee time {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.docs-home-marquee span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 触屏按不出 Cmd+K，别展示一个按不出来的快捷键（顶栏那个在 860px 已隐） */
@media (max-width: 860px) {
  .docs-home-search kbd {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-home-marquee-track {
    animation: none;
  }
  /* 不滚了就别只露 3 条，放开高度让读者自己滚 */
  .docs-home-marquee {
    height: auto;
    max-height: 260px;
    overflow-y: auto;
    mask-image: none;
  }
}

/* ==========================================================================
   多平台模型价格表（2026-08-18）
   partial: model-pricing.html · shortcode: {{< model-pricing >}}
   数据：构建时快照 data/models/pricing.json + 运行时刷新 OpenRouter 那一列
   ========================================================================== */

.mp { margin: 26px 0; }

.mp-bar {
  display: flex; align-items: center; gap: var(--gap-md);
  flex-wrap: wrap; margin-bottom: 10px;
}
.mp-search {
  flex: 1; min-width: 200px;
  padding: 8px 12px; font: inherit; font-size: var(--fs-md);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text);
}
.mp-search:focus { outline: none; border-color: var(--accent); }

.mp-status {
  flex: none; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
  background: rgba(109,121,162,.12); color: var(--muted);
}
.mp-status.is-live { background: var(--ok-bg); color: var(--ok-fg); }
.mp-status.is-fail { background: #fdeaea; color: #8a2020; }

/* 表格常常比正文栏宽，让它自己横向滚，别把整页撑出滚动条 */
.mp-scroll {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-card-sm); background: var(--panel);
}
.mp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }

.mp-table th {
  /* z-index 必须高于任何可能创建层叠上下文的单元格。
     踩过：实时刷新后约 170 个单元格带上 .is-updated（CSS 动画会创建层叠上下文），
     用 z-index:1 时这些行会画到表头上面，滚动时文字重叠成一团。
     配套措施：JS 在 animationend 时移除该 class，不留残余上下文。 */
  position: sticky; top: 0; z-index: 5;
  padding: 10px 12px; text-align: left; white-space: nowrap;
  background: #eef2ff;   /* 必须不透明 —— 半透明会让滚过去的行透出来 */
  box-shadow: inset 0 -1px 0 var(--line);  /* 用 inset 阴影代替 border：
                                              sticky 元素的 border 在滚动时会被裁掉 */
  font-weight: 700; cursor: pointer; user-select: none;
}
.mp-table th span { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.mp-table th:hover { color: var(--accent); }

.mp-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mp-table tr:last-child td { border-bottom: 0; }
.mp-table tbody tr:hover { background: var(--accent-soft); }

.mp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-sep { color: var(--muted); margin: 0 3px; }
.mp-na { color: var(--muted); }

.mp-name strong { display: block; font-weight: 600; line-height: 1.4; }
.mp-id { display: block; color: var(--muted); font-size: var(--fs-xs); font-family: ui-monospace, monospace; }

.mp-tag {
  display: inline-block; margin: 4px 4px 0 0; padding: 1px 7px;
  border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: 700;
}
.mp-tag--deal  { background: var(--ok-bg); color: var(--ok-fg); }
.mp-tag--until { background: #fff4e0; color: #8a5a00; }

/* 刚被实时数据替换过的单元格闪一下，让读者看见发生了什么 */
.mp-num.is-updated { animation: mp-flash 1.1s ease; }
@keyframes mp-flash {
  0%   { background: rgba(82,108,255,.22); }
  100% { background: transparent; }
}

.mp-desc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; min-width: 260px; }
.mp-desc em { display: block; margin-top: 3px; color: var(--accent); font-style: normal; }

.mp-foot { margin-top: 10px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.mp-empty { padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--muted); }

@media (max-width: 720px) {
  .mp-desc { display: none; }   /* 窄屏先保住价格列，简介让位 */
  .mp-table { font-size: var(--fs-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-num.is-updated { animation: none; }
}

/* 价格表标签的两种语义 —— 别用同一个颜色，它们的含义完全不同 */
.mp-tag--promo { background: #fff0e6; color: #a04000; }  /* 限时促销，会到期 */
.mp-tag--cheap { background: var(--ok-bg); color: var(--ok-fg); }  /* 第三方托管更便宜，长期 */
.mp-src { color: var(--muted); font-size: .8em; margin-left: 2px; cursor: help; }
.mp-na { font-size: var(--fs-xs); }

/* 价格表：固定高度 + 内部滚动（2026-08-18）
   225 行不限高会把页面拉到几十屏，读者滚不到下面的正文。
   表头 sticky 住，滚动时列名不丢。 */
.mp-scroll {
  max-height: 620px;
  overflow: auto;              /* 横竖都能滚：列多时横向，行多时纵向 */
  overscroll-behavior: contain; /* 滚到底不要带着整页一起滚 */
}
.mp-table th { top: 0; }        /* 配合 position:sticky（已在上面定义） */

.mp-th-deal, .mp-th-sub { white-space: nowrap; }
.mp-deal, .mp-sub { min-width: 120px; line-height: 1.9; }
.mp-tag--sub { background: rgba(82,108,255,.12); color: var(--accent); }

/* 分档定价：超过某上下文长度后单价上涨，单独一行小字标出 */
.mp-tier {
  display: block; margin-top: 2px;
  color: var(--muted); font-size: var(--fs-2xs); font-weight: 600;
}

@media (max-width: 960px) {
  .mp-scroll { max-height: 70vh; }
}
.sp-src { max-width: 200px; }
.sp-src code { font-size: var(--fs-xs); word-break: break-all; color: var(--muted); background: none; padding: 0; }

/* 排序三态的视觉提示：无标记=未排序，▲升序，▼降序。
   第三次点击回到未排序（还原默认顺序）—— 默认顺序是有意义的：
   有官方价的排前面，其余按价格升序。 */
.mp-table th[data-sort]::after { content: " ⇅"; opacity: .35; font-size: .78em; }
.mp-table th[aria-sort="ascending"]::after  { content: " ▲"; opacity: 1; }
.mp-table th[aria-sort="descending"]::after { content: " ▼"; opacity: 1; }
.mp-table th[aria-sort] { color: var(--accent); }

/* ⚠️ 这里必须用 .article-body 前缀提高特异性。
   踩过：`.article-body thead th { background: var(--accent-soft) }`（3 层选择器）
   会盖掉 `.mp-table th`（2 层）的不透明背景，于是表头变成半透明的
   rgba(82,108,255,.1)，滚动时下面的行直接透上来，文字糊成一团。
   价格表在 .article-body 里，所以必须写到同等或更高的特异性。 */
.article-body .mp-table thead th,
.docs-body .mp-table thead th {
  background: #eef2ff;                       /* 不透明，滚动时挡住下面的行 */
  border: 0;
  box-shadow: inset 0 -1px 0 var(--line);    /* sticky 元素的 border 会被裁掉，用 inset 阴影代替 */
  position: sticky;
  top: 0;
  z-index: 5;
}
/* 单元格边框也要接管，否则 .article-body td 的 border 会和上面的 inset 阴影打架 */
.article-body .mp-table td,
.docs-body .mp-table td {
  border: 0;
  border-bottom: 1px solid var(--line);
}
.mp-link { color: inherit; text-decoration: none; }
.mp-link:hover strong { color: var(--accent); text-decoration: underline; }
.sp-ref {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: var(--radius-2xs); background: #fff0e6; color: #a04000;
  font-size: var(--fs-2xs); font-weight: 700; vertical-align: middle;
}

/* 「本文提到的工具」卡片（partials/article-tools.html，2026-08-28 加）。
   刻意比 .article-ad 克制：它排在自家 CTA 前面，抢过去就是本末倒置——
   工具链接是顺手的出口，付费产品才是主转化。 */
.article-tools {
  margin-top: 30px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.article-tools-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* 披露条：只在本页真的有推广链接时才由模板渲染出来 */
.article-tools-disclosure {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(120, 130, 160, 0.14);
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.article-tools-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.article-tools-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--gap-xs);
}
.article-tools-list a {
  display: block;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.article-tools-list a:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}
.article-tools-name {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}
.article-tools-list strong {
  color: var(--text);
  font-size: var(--fs-base);
}
.article-tools-desc {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* 优惠条（2026-08-28 加）。用暖橙而不是站点主色 --accent：蓝色是自家 CTA 的颜色，
   优惠再用蓝色两者会糊在一起，读者分不清哪个是「我的产品」哪个是「对方给你的折扣」。
   左侧虚线边框做出票券的形状——不用图片：截图会过期、不响应式、也不受我们控制，
   而且一张横幅 banner 会让文章看起来像挂了广告位，反而掉信任。 */
.article-tools-offer {
  display: block;
  margin-top: 10px;
  padding: 9px 12px 9px 14px;
  border: 1px solid #FCD9A0;
  border-left: 3px dashed #F0A73C;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #FFFBF2 0%, #FFF6E6 100%);
}
.article-tools-offer-main {
  display: block;
  color: #A65B0B;
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.5;
}
.article-tools-offer-main::before {
  content: "🎟";
  margin-right: 6px;
  font-weight: 400;
}
.article-tools-offer-note {
  display: block;
  margin-top: 3px;
  color: #B08356;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
/* 带优惠的那一条整体也给一点暖色，让它在一列工具里先被看到 */
.article-tools-list li.has-offer > a {
  border-color: #F6DFB8;
  background: rgba(255, 253, 249, 0.92);
}
.article-tools-list li.has-offer > a:hover {
  border-color: #F0A73C;
}
/* 单条链接上的「推广」小标签，和顶部披露条配合，让读者点之前就知道 */
.article-tools-tag {
  display: inline-block !important;
  margin: 0 0 0 8px !important;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(120, 130, 160, 0.14);
  color: var(--muted) !important;
  font-size: 0.66rem !important;
  font-weight: 700;
  vertical-align: 1px;
}

/* 文末 CTA 的主/次按钮（partials/article-ad.html，2026-08-28 从单链接改成两个）。
   主按钮实心、次按钮纯文字：两个都做成实心会互相抢，读者反而不知道该点哪个。 */
.article-ad-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 16px 0 0 !important;
}
.article-ad-primary {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--white) !important;
  font-weight: 800;
  font-size: var(--fs-base);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.article-ad-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.article-ad-secondary {
  color: var(--muted) !important;
  font-weight: 600 !important;
  font-size: var(--fs-md);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.article-ad-secondary:hover {
  color: var(--accent) !important;
  border-bottom-color: currentColor;
}
@media (max-width: 520px) {
  .article-ad-actions { flex-direction: column; align-items: flex-start; }
  .article-ad-primary { width: 100%; justify-content: center; }
}

/* ===== 飞书表格嵌入块（shortcodes/feishu-embed.html）===== */
.fse { margin: 26px 0; }

.fse-bar {
  display: flex; align-items: center; gap: var(--gap-md);
  flex-wrap: wrap; margin-bottom: 10px;
}
.fse-title { font-weight: 700; font-size: var(--fs-lg); }
.fse-open {
  margin-left: auto;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--accent); color: var(--white) !important;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.fse-open:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.fse-frame {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius-card-sm);
  background: var(--panel); overflow: hidden;
}
.fse-frame iframe {
  display: block; width: 100%; border: 0;
  height: var(--fse-h, 640px);        /* height 参数从 shortcode 传容器自定义属性 */
  min-height: 420px;
}

/* 骨架：iframe load 事件后由 JS 加 .is-ready 淡出。
   iframe 平时藏住，免得骨架期间露白底闪烁。 */
.fse-skeleton {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel);
  font-size: var(--fs-md); color: var(--muted);
  transition: opacity .45s ease;
}
.fse.is-ready .fse-skeleton { opacity: 0; pointer-events: none; }
.fse .fse-frame iframe { visibility: hidden; }
.fse.is-ready .fse-frame iframe { visibility: visible; }

.fse-foot { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.fse-setup-hint { padding: 40px 20px; text-align: center; color: var(--muted); }

.mp-status.is-slow { background: #fff4e0; color: #8a5a00; }

/* ── 正文结构图（2026-09-12）─────────────────────────────────
   「目录即架构」「渐进披露」这类结构信息原来只有一堆 bullet，正文里读着平。
   这里给两个纯 CSS 的结构图：零图片请求、文字可选中可检索、随栏宽自适应。
   用法（md 里直接写 HTML，goldmark unsafe 已开）：
     <div class="mw-diagram mw-tree">…</div>
     <div class="mw-diagram mw-flow">…</div>
   色值走 token，别再写字面量。 */
.mw-diagram {
  margin: 30px 0 34px;
  padding: 26px 28px 24px;
  background: linear-gradient(180deg, #fbfcff 0%, #f5f7fb 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.mw-dg-cap {
  margin: 0 0 18px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.mw-dg-tree { margin: 0; padding: 0; list-style: none; }
.mw-dg-tree li {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(9.5rem, auto) 1fr;
  align-items: baseline;
  gap: var(--gap-sm);
  padding: 10px 0;
  font-size: var(--fs-md);
}
/* 分隔虚线从名称列起笔，别把左边那条「树干」的连续性切断 */
.mw-dg-tree li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3rem;
  right: 0;
  bottom: 0;
  border-bottom: 1px dashed var(--line-strong);
}
.mw-dg-tree li:last-child { border-bottom: 0; }
.mw-dg-mark { font-family: Menlo, monospace; color: var(--muted); }
.mw-dg-name { font-family: Menlo, monospace; font-weight: 700; color: var(--accent); white-space: nowrap; }
.mw-dg-name.is-file { color: var(--text); }
.mw-dg-note { color: var(--muted); font-size: var(--fs-sm); }

.mw-dg-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mw-dg-flow li {
  position: relative;
  padding: 18px 18px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.mw-dg-flow li::after {
  content: "→";
  position: absolute;
  right: -1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-weight: 700;
}
.mw-dg-flow li:last-child::after { content: none; }
.mw-dg-no {
  display: block;
  font: 700 var(--fs-2xs)/1 Menlo, monospace;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.mw-dg-flow b { display: block; margin: 10px 0 6px; color: var(--text); font-size: var(--fs-lg); }
.mw-dg-flow code { font-size: var(--fs-sm); }
.mw-dg-flow .mw-dg-note { display: block; margin-top: 8px; }
.mw-dg-foot { margin: 18px 0 0; font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 720px) {
  .mw-diagram { padding: 20px 18px; }
  .mw-dg-tree li { grid-template-columns: 2.2rem 1fr; }
  .mw-dg-tree .mw-dg-note { grid-column: 2 / -1; }
  .mw-dg-flow { grid-template-columns: 1fr; }
  .mw-dg-flow li::after { content: none; }
}

/* ==========================================================================
   手机吸底推广条（partials/ad-slot.html，投放内容在 data/ads/slots.toml）
   2026-09-13 加。

   默认 display:none —— 桌面根本不渲染它（桌面用右栏，浮层是多余的一层遮挡）。
   只在 ≤720px 打开，跟文档抽屉、顶栏汉堡同一个断点，不是巧合：
   这个断点以下只有一个窄列，浮层才是「多出来的」；以上任何一段都有真正的
   第二栏可以承载推广位。

   三条取舍写在下面的注释里，改之前先读：
   1. 高度控制在 ~60px（<10% 屏高）。Better Ads Standard 对 fixed 元素的红线是
      「盖住主要内容」和「超过 30% 屏高」，60px 离红线很远，这点不用怕。
   2. 左侧给文档抽屉按钮让出 72px（body.is-docs 那条）。抽屉按钮在
      left:14px / 46px 宽 / z-index 42，条是 30，不让位的话按钮会压在条左端、
      两层文字叠在一起。
   3. 不加 body padding-bottom。条出现时不动布局，就不会有跳一下的位移；
      代价是它固定盖住视口底部那 60px，所以脚本在读到文末时会自动收起
      （见 ad-slot.html）。选「不跳」而不是「不盖」，是因为跳一下比盖住底部
      更干扰阅读——底部随时可以再滚 60px 看到，跳一下打断的是当前这行。
   ========================================================================== */

.adbar {
  display: none;   /* 桌面不渲染；≤720px 的媒体查询里再打开 */
}

@media (max-width: 720px) {
  .adbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;   /* 低于抽屉 40/41/42，也低于搜索弹层 100 */
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--panel);
    backdrop-filter: blur(12px);
    box-shadow: 0 -8px 28px rgba(82, 104, 170, 0.1);
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-slow) var(--ease-out),
                opacity var(--dur-slow) var(--ease-out);
  }

  /* ⚠️ 必须写这条。UA 样式表里 [hidden]{display:none} 和上面 .adbar{display:block}
     同权重，而我们的规则在后面 → 不加这条的话 hidden 属性会失效，
     条在 JS 跑之前就露出来了。 */
  .adbar[hidden] { display: none; }

  .adbar.is-visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* 文档页给抽屉按钮让位（见文件头第 2 条）。这里挪的是整条的左边界而不是
     内部留白：留白的话按钮会叠在条的底色上，看着像两层 UI 打架；
     挪边界则是「按钮占左下角、条从它右边开始」，两个都清楚。 */
  body.is-docs .adbar { left: 72px; }
}

.adbar-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-height: 44px;
}

.adbar-tag {
  flex: none;
  padding: 2px 6px;
  border-radius: var(--radius-2xs);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.adbar-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.adbar-text strong {
  font-size: var(--fs-md);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adbar-text span {
  color: var(--muted);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adbar-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--white) !important;
  font-size: var(--fs-sm);
  font-weight: 800;
  text-decoration: none;
}

.adbar-cta:hover { transform: translateY(-1px); }

.adbar-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.adbar-close:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* 窄屏只留主文案：一行说得完，才不会被压成两行把条撑高 */
@media (max-width: 420px) {
  .adbar-text span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .adbar { transition: none; }
  .adbar-cta:hover { transform: none; }
}

/* ── 咨询页「扫码加我」区块（2026-09-13）────────────────────────
   一对一咨询页的主入口从「付款按钮」换成「扫企业微信二维码」，
   这个区块是那次改版的主要视觉落点。
   ⚠️ 二维码显示尺寸不要小于 200px：实测这张码缩到 160px 时部分解码器
   就读不出来了（源图 760px，用 width/height 固定 240px，2x 屏也够）。 */
.wx-add {
  display: flex;
  gap: var(--gap-3xl);
  align-items: flex-start;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.wx-add-qr {
  flex: none;
  display: grid;
  gap: var(--gap-sm);
  justify-items: center;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.wx-add-qr img {
  display: block;
  width: 240px;
  height: 240px;
}

.wx-add-tip {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.wx-add-body {
  display: grid;
  gap: var(--gap-md);
  font-size: var(--fs-base);
  line-height: 1.7;
}

.wx-add-body p {
  margin: 0;
  color: var(--muted);
}

.wx-add-body strong {
  color: var(--text);
}

.wx-add-alt {
  font-size: var(--fs-md);
}

.wx-add-alt a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 「不适合谁」：.checklist 的反色版本，只换记号与颜色 */
.consult-nope {
  display: grid;
  gap: var(--gap-md);
  padding: 0;
  margin: 0;
  list-style: none;
}

.consult-nope li {
  display: flex;
  gap: var(--gap-md);
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: var(--muted);
}

.consult-nope li::before {
  content: "✕";
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 800;
}

/* landing-cta 里的小字补充（价格、直达付款这类「次要但别删」的信息） */
.landing-note {
  font-size: var(--fs-md);
  line-height: 1.9;
}

@media (max-width: 720px) {
  .wx-add {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: 22px 18px;
  }

  .wx-add-qr img {
    width: 220px;
    height: 220px;
  }

  /* 窄屏纵向堆叠后，正文块要占满卡片宽度，否则会被 align-items:center 缩成
     「按内容宽度居中」，和上面居中的二维码形成两条不对齐的轴线 */
  .wx-add-body {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   收款码区块（2026-09-14，Hermes）
   用途：全站付款渠道统一为一张收款二维码，不再外跳第三方商城。
   出现在 /consulting/ 页尾。二维码显示尺寸固定 240px（手机 220px）——
   实测该码缩到 160px 仍可解码，但不要为了省版面继续缩小；
   尺寸上限受「每页商业推广位 ≤2 个」约束，这里只算 1 个。
   ------------------------------------------------------------------ */
.payqr-inline {
  display: flex;
  align-items: center;
  gap: var(--gap-xl, 28px);
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: var(--radius-lg, 22px);
  background: #fff;
  border: 1px solid rgba(120, 132, 180, 0.18);
  flex-wrap: wrap;
}

.payqr-inline-code {
  display: block;
  padding: 12px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(120, 132, 180, 0.2);
  line-height: 0;
  flex: 0 0 auto;
}

.payqr-inline-code img {
  width: 240px;
  height: 240px;
  display: block;
  border-radius: 12px;
}

.payqr-inline-body {
  flex: 1 1 260px;
  min-width: 240px;
}

.payqr-inline-body p {
  margin: 0 0 10px;
  line-height: 1.8;
}

.payqr-inline-body p:last-child {
  margin-bottom: 0;
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .payqr-inline {
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
  }

  .payqr-inline-code img {
    width: 220px;
    height: 220px;
  }

  .payqr-inline-body {
    width: 100%;
    min-width: 0;
  }
}