/* ==========================================================================
   OM · 文档与定价（两页共用）
   ========================================================================== */

.doc {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s-14);
  align-items: start;
  padding: var(--s-10) 0 var(--s-24);
}
.toc { position: sticky; top: calc(var(--nav-h) + var(--announce-h) + var(--s-6)); }
.toc__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3); }
.toc__list { border-left: 1px solid var(--line-1); display: flex; flex-direction: column; }
.toc__list a {
  display: block; padding: 7px 0 7px 14px; margin-left: -1px;
  font-size: 14px; line-height: 20px; color: var(--text-2);
  border-left: 1px solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.toc__list a:hover { color: var(--text-full); }
.toc__list a.is-here { color: var(--accent); border-left-color: var(--accent); }
.toc__list a.sub { padding-left: 26px; font-size: 13px; }
.toc__meta { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line-1); font-size: 12px; line-height: 18px; color: var(--text-3); }
.toc__meta .mono { display: block; color: var(--text-2); font-size: 11px; }

/* —— 正文 —— */
.prose { min-width: 0; }
.prose > section { scroll-margin-top: calc(var(--nav-h) + var(--announce-h) + var(--s-6)); }
.prose > section + section { margin-top: var(--s-18); }
.prose h2 {
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 500;
  letter-spacing: -0.02em; color: var(--text-full);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-2);
}
.prose h2 .num-h { font-family: var(--font-mono); font-size: 14px; color: var(--accent); margin-right: 10px; vertical-align: 3px; }
.prose h3 { margin-top: var(--s-10); font-size: 18px; line-height: 26px; font-weight: 500; color: var(--text-1); }
.prose h3 .mono { font-size: 16px; color: var(--accent); }
.prose p { margin-top: var(--s-4); font-size: 15px; line-height: 24px; color: var(--text-2); max-width: 76ch; }
.prose p code, .prose li code, .tbl code {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-1);
  background: var(--surface-quiet); border: 1px solid var(--line-1);
  padding: 1px 5px; border-radius: 4px;
}
.prose ul.bul { margin-top: var(--s-4); display: flex; flex-direction: column; gap: 8px; }
.prose ul.bul li { position: relative; padding-left: 18px; font-size: 15px; line-height: 23px; color: var(--text-2); max-width: 76ch; }
.prose ul.bul li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 1px; background: var(--accent); }
.prose .lead { margin-top: var(--s-5); font-size: 16px; line-height: 25px; color: var(--text-1); max-width: 76ch; }
.prose .code { margin-top: var(--s-5); }
.prose .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }

/* —— 端点行 —— */
.ep-list { margin-top: var(--s-6); border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; background: var(--surface-1); }
.ep {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: var(--s-4);
  align-items: center; padding: 12px var(--s-4);
  border-bottom: 1px solid var(--line-1);
}
.ep:last-child { border-bottom: none; }
.ep:hover { background: var(--surface-2); }
.ep__m {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em;
}
.ep__m--post { background: var(--ok-soft); color: var(--ok); }
.ep__m--get { background: var(--accent-soft); color: var(--accent); }
.ep__m--put { background: var(--warn-soft); color: var(--warn); }
.ep__m--del { background: var(--danger-soft); color: var(--danger); }
.ep__p { font-family: var(--font-mono); font-size: 13px; color: var(--text-full); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep__d { font-size: 13px; color: var(--text-2); text-align: right; white-space: nowrap; }

/* —— 表格 —— */
.tbl-wrap { margin-top: var(--s-6); border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; padding: 10px 14px; background: var(--surface-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line-1); color: var(--text-2); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td.k { color: var(--text-1); font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.tbl td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-full); }
.tbl .cell-c { text-align: center; }

/* —— 矩阵 —— */
.matrix { table-layout: fixed; }
.matrix td.mark { text-align: center; font-family: var(--font-mono); font-size: 12px; }
.mk { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-sm); }
.mk--pass { background: var(--accent-soft); color: var(--accent); }
.mk--real { background: var(--ok-soft); color: var(--ok); }
.mk--none { background: var(--surface-quiet); color: var(--text-3); }
.legend { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: 13px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; }
.legend .l-real { background: var(--ok-soft); border: 1px solid var(--ok); }
.legend .l-mock { background: var(--accent-soft); border: 1px solid var(--accent); }
.legend .l-none { background: var(--surface-quiet); border: 1px solid var(--line-2); }

/* —— 提示块 —— */
.callout {
  margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-2); border-left: 2px solid var(--accent);
  border-radius: var(--r-sm); background: var(--surface-1);
}
.callout--warn { border-left-color: var(--warn); }
.callout--danger { border-left-color: var(--danger); }
.callout h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.callout p { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--text-2); }
.callout code { font-family: var(--font-mono); font-size: 13px; color: var(--text-1); }

/* —— 字段清单 —— */
.fields { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px; }
.field-chip {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--line-1); border-radius: var(--r-sm);
  background: var(--surface-1);
}
.field-chip b { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-1); }
.field-chip span { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* —— 定价页 —— */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface-1);
  padding: var(--s-6);
}
.plan--hot { border-color: var(--accent-line); box-shadow: inset 0 2px 0 var(--accent); }
.plan__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.plan__n { margin-top: 10px; font-size: 20px; line-height: 28px; font-weight: 500; color: var(--text-full); }
.plan__p { margin-top: 6px; font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.plan__d { margin-top: var(--s-3); font-size: 14px; line-height: 21px; color: var(--text-2); }
.plan ul { margin-top: var(--s-5); display: flex; flex-direction: column; gap: 9px; }
.plan li { position: relative; padding-left: 22px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' style='color:%234ade80'%3E%3Cpath d='m2.5 7.5 3 3 6-6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
html[data-theme="light"] .plan li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2316a34a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 7.5 3 3 6-6.5'/%3E%3C/svg%3E");
}
.plan__foot { margin-top: auto; padding-top: var(--s-6); }

.calc {
  margin-top: var(--s-6);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-6); align-items: start;
}
.calc__panel { border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface-1); overflow: hidden; }
.calc__head { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-1); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.calc__head h3 { font-size: 15px; font-weight: 500; color: var(--text-1); }
.calc__body { padding: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.calc__body .wide { grid-column: 1 / -1; }
.inp { display: flex; flex-direction: column; gap: 6px; }
.inp label { font-size: 12px; color: var(--text-2); }
.inp input {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--line-1); border-radius: var(--r-sm);
  background: var(--surface-0); color: var(--text-full);
  font-family: var(--font-mono); font-size: 14px;
  transition: border-color var(--dur-1) var(--ease);
}
.inp input:focus { border-color: var(--accent); outline: none; }
.calc__out { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.calc__total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.calc__total b { font-family: var(--font-mono); font-size: 30px; font-weight: 500; color: var(--text-full); letter-spacing: -0.02em; }
.calc__total span { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.brk { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 7px 0; border-bottom: 1px solid var(--line-1); font-size: 13px; color: var(--text-2); }
.brk:last-child { border-bottom: none; }
.brk .num { color: var(--text-full); font-size: 13px; }
.calc__note { font-size: 12px; line-height: 18px; color: var(--text-3); }
.calc__note .mono { color: var(--text-2); }

.steps { counter-reset: st; margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
.steps > div { position: relative; padding-left: 46px; }
.steps > div::before {
  counter-increment: st; content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  border: 1px solid var(--line-2); background: var(--surface-1);
}
.steps h4 { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text-1); }
.steps p { margin-top: 3px; font-size: 14px; line-height: 21px; color: var(--text-2); max-width: 70ch; }
.steps code { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }

/* —— 页头 —— */
.page-head { padding: var(--s-18) 0 var(--s-10); border-bottom: 1px solid var(--line-1); }
.page-head__badge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 13px; color: var(--text-2); }
.page-head h1 { margin-top: var(--s-5); font-size: clamp(30px, 4.4vw, 50px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--text-full); }
.page-head p { margin-top: var(--s-4); font-size: 16px; line-height: 25px; color: var(--text-2); max-width: 68ch; }
.page-head__acts { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }

@media (max-width: 1180px) {
  .doc { grid-template-columns: 1fr; gap: var(--s-8); }
  .toc { position: static; }
  .toc__list { flex-direction: row; flex-wrap: wrap; border-left: none; gap: 4px; }
  .toc__list a { border: 1px solid var(--line-1); border-radius: var(--r-pill); padding: 6px 12px; margin-left: 0; font-size: 13px; }
  .toc__list a.is-here { border-color: var(--accent-line); background: var(--accent-soft); }
  .toc__list a.sub { display: none; }
  .calc { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 720px) {
  .doc { padding-top: var(--s-6); }
  .ep { grid-template-columns: 60px minmax(0, 1fr); }
  .ep__d { display: none; }
  .prose .grid-2 { grid-template-columns: 1fr; }
  .calc__body { grid-template-columns: 1fr; }
  .tbl-wrap { overflow-x: auto; }
  .tbl { min-width: 620px; }
}

/* ==========================================================================
   topbar 补全 — 老骨架两页（pricing/api）的导航此前无样式（SVG 撑满视口）。
   命名沿用页内 HTML：.topbar/.brand/.nav__links/.theme-toggle/.nav-menu
   颜色走 tokens.css 语义变量，与门户导航同观感
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-stuck-bg);
  backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--color-border-warm);
}
.topbar .nav { display: flex; align-items: center; height: 56px; }
.topbar .nav__inner { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 1270px; margin-inline: auto; padding: 0 24px; }
.topbar .container { width: 100%; }

.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: var(--color-text-strong); }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__word { font-family: var(--font-hero); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.brand__word em { font-style: normal; opacity: .45; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav__links .nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: var(--r-6);
  font-size: 14px; color: var(--color-text-secondary); text-decoration: none;
  transition: background-color .15s var(--ease-std), color .15s var(--ease-std);
}
.nav__links .nav__link:hover { background: var(--color-hover); color: var(--color-text-strong); }
.nav__links .nav__link.is-active { background: var(--color-bg-section); color: var(--color-text-strong); font-weight: 600; }
.nav__links .tag { height: 18px; line-height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10px; font-family: var(--font-mono); background: var(--accent-soft); color: var(--accent-ink); }

.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-999); background: var(--color-bg-section); border: 1px solid var(--color-border-warm); }
.theme-toggle__opt {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: var(--r-999);
  font-size: 12px; color: var(--color-text-secondary);
  transition: background-color .15s var(--ease-std), color .15s var(--ease-std);
}
.theme-toggle__opt svg { width: 13px; height: 13px; }
.theme-toggle__opt[aria-pressed="true"] { background: var(--color-card); color: var(--color-text-strong); font-weight: 600; box-shadow: 0 1px 2px var(--color-shadow); }

.nav__burger { display: none; width: 36px; height: 36px; place-items: center; border-radius: var(--r-6); color: var(--color-text); }
.nav__burger .ico-close { display: none; }
.nav__burger.is-open .ico-burger { display: none; }
.nav__burger.is-open .ico-close { display: block; }
.nav-menu { display: none; }

@media (max-width: 919px) {
  .nav__links, .theme-toggle { display: none; }
  .nav__burger { display: grid; }
  .nav-menu {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 24px 16px;
    border-top: 1px solid var(--color-border-warm);
  }
  .nav-menu[aria-hidden="true"] { display: none; }
  .nav-menu__link { height: 40px; display: flex; align-items: center; border-radius: var(--r-6); padding: 0 10px; font-size: 14px; color: var(--color-text); text-decoration: none; }
  .nav-menu__link:hover { background: var(--color-hover); }
  .topbar .nav { flex-wrap: wrap; height: auto; }
}
.brand__tail { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); letter-spacing: .06em; margin-left: -2px; }

/* —— 壳样式补全：容器居中 / toc meta 的 mono 重置（base.css .mono 是 20px 小方块） —— */
.container { max-width: 1270px; margin-inline: auto; padding-inline: 24px; }
.toc__meta .mono {
  display: block; width: auto; height: auto; padding: 0; margin-top: 2px;
  background: none; border-radius: 0; color: var(--text-2);
  font-weight: 400; text-align: left;
}
.toc__meta .mono::before { content: none; }

/* —— 文档页 body 底色：跟随主题（否则深色下白底白字） —— */
body { background: var(--color-bg-page); color: var(--color-text); }

/* —— 移动端宽表格：容器内横向滚动，不撑破视口 —— */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .calc__panel { overflow-x: auto; }
}

/* —— 代码块长行：容器内横向滚动，不撑破移动端视口 —— */
.code { overflow-x: auto; }
.code pre { overflow-x: visible; }

/* —— 法律页：章节线收在文字栏内 —— */
.legal__prose h2 { max-width: 760px; }