/* ==========================================================================
   土土金文档中心 — 设计系统
   单一样式表，全站共用。Apifox 式三栏文档布局。
   ========================================================================== */

:root {
  /* 中性色阶 */
  --c-bg:        #ffffff;
  --c-bg-sub:    #f7f8fa;
  --c-bg-code:   #f6f7f9;
  --c-border:    #e5e7eb;
  --c-border-mut:#eef0f3;
  --c-text:      #1f2329;
  --c-text-sec:  #5a6270;
  --c-text-mut:  #8b929e;

  /* 品牌 */
  --c-brand:     #d4820a;
  --c-brand-sub: #fdf6ec;
  --c-brand-bd:  #f5d9a8;

  /* 语义 */
  --c-ok:        #17915c;   --c-ok-bg:   #eaf7f0;  --c-ok-bd:  #b7e3cc;
  --c-warn:      #b7791f;   --c-warn-bg: #fdf6e3;  --c-warn-bd:#f0dca6;
  --c-danger:    #d03050;   --c-danger-bg:#fdeef1; --c-danger-bd:#f5c2cd;
  --c-info:      #2563eb;   --c-info-bg: #eef4ff;  --c-info-bd:#c3d7fb;

  /* HTTP 方法 */
  --m-get:  #17915c;  --m-post: #d4820a;  --m-put: #2563eb; --m-del: #d03050;

  --radius:   8px;
  --radius-sm:5px;
  --sidebar:  278px;
  --toc:      212px;
  --header:   56px;
  --maxw:     820px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 16px rgba(16,24,40,.10);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.14);
}

/* 深色：跟随系统，且允许显式覆盖（两个方向都要能赢） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:#15181d; --c-bg-sub:#1a1e24; --c-bg-code:#1c2128;
    --c-border:#2b3138; --c-border-mut:#22272e;
    --c-text:#e5e8ec; --c-text-sec:#a7b0bb; --c-text-mut:#79828e;
    --c-brand:#e8a33d; --c-brand-sub:#2c2318; --c-brand-bd:#4a3a20;
    --c-ok:#3fbd85;   --c-ok-bg:#16281f;   --c-ok-bd:#26492f;
    --c-warn:#e0ad4a; --c-warn-bg:#2a2418; --c-warn-bd:#4a3d20;
    --c-danger:#f2637f; --c-danger-bg:#2b1a1f; --c-danger-bd:#4d2833;
    --c-info:#5b8ef5; --c-info-bg:#181f2e; --c-info-bd:#26375c;
    --m-get:#3fbd85; --m-post:#e8a33d; --m-put:#5b8ef5; --m-del:#f2637f;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 16px rgba(0,0,0,.45);
    --shadow-lg:0 12px 32px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --c-bg:#15181d; --c-bg-sub:#1a1e24; --c-bg-code:#1c2128;
  --c-border:#2b3138; --c-border-mut:#22272e;
  --c-text:#e5e8ec; --c-text-sec:#a7b0bb; --c-text-mut:#79828e;
  --c-brand:#e8a33d; --c-brand-sub:#2c2318; --c-brand-bd:#4a3a20;
  --c-ok:#3fbd85;   --c-ok-bg:#16281f;   --c-ok-bd:#26492f;
  --c-warn:#e0ad4a; --c-warn-bg:#2a2418; --c-warn-bd:#4a3d20;
  --c-danger:#f2637f; --c-danger-bg:#2b1a1f; --c-danger-bd:#4d2833;
  --c-info:#5b8ef5; --c-info-bg:#181f2e; --c-info-bd:#26375c;
  --m-get:#3fbd85; --m-post:#e8a33d; --m-put:#5b8ef5; --m-del:#f2637f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.75;
  color: var(--c-text); background: var(--c-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 顶栏 ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; height: var(--header); z-index: 60;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.hdr__brand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px;
  color: var(--c-text); white-space: nowrap; }
.hdr__brand:hover { text-decoration: none; }
.hdr__logo {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-brand), #b3660a);
  color: #fff; font-size: 13px; font-weight: 800; flex: none;
}
.hdr__tag {
  font-size: 11px; font-weight: 600; color: var(--c-text-mut);
  border: 1px solid var(--c-border); border-radius: 20px; padding: 1px 8px;
}
.hdr__spacer { flex: 1; }
.hdr__links { display: flex; gap: 4px; }
.hdr__link {
  font-size: 13.5px; color: var(--c-text-sec); padding: 5px 11px; border-radius: 6px; font-weight: 500;
}
.hdr__link:hover { background: var(--c-bg-sub); color: var(--c-text); text-decoration: none; }
.hdr__link.is-on { color: var(--c-brand); background: var(--c-brand-sub); }

.iconbtn {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: 7px; background: var(--c-bg);
  color: var(--c-text-sec); cursor: pointer; padding: 0;
}
.iconbtn:hover { background: var(--c-bg-sub); color: var(--c-text); }
.iconbtn svg { width: 16px; height: 16px; }

.burger { display: none; }

/* 搜索 */
.search { position: relative; width: 232px; }
.search__in {
  width: 100%; height: 32px; padding: 0 10px 0 30px;
  border: 1px solid var(--c-border); border-radius: 7px;
  background: var(--c-bg-sub); color: var(--c-text);
  font-family: var(--font); font-size: 13.5px; outline: none;
}
.search__in:focus { border-color: var(--c-brand); background: var(--c-bg); }
.search__in::placeholder { color: var(--c-text-mut); }
.search__ico {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--c-text-mut); pointer-events: none;
}
.search__out {
  position: absolute; top: 38px; left: 0; right: 0; max-height: 340px; overflow-y: auto;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 5px; z-index: 70;
}
.search__hit { display: block; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--c-text); }
.search__hit:hover, .search__hit.is-on { background: var(--c-bg-sub); text-decoration: none; }
.search__hit b { display: block; font-size: 13.5px; font-weight: 600; }
.search__hit span { display: block; font-size: 12px; color: var(--c-text-mut); }
.search__none { padding: 14px; text-align: center; color: var(--c-text-mut); font-size: 13px; }

/* ---------- 布局 ---------- */
.shell { display: flex; padding-top: var(--header); }

.side {
  position: fixed; top: var(--header); bottom: 0; left: 0; width: var(--sidebar);
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--c-border); background: var(--c-bg);
  padding: 18px 12px 56px; z-index: 50;
}
.side__grp { margin-bottom: 22px; }
.side__title {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-text-mut); padding: 0 10px; margin-bottom: 7px;
}
.side__a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--c-text-sec); line-height: 1.5;
}
.side__a:hover { background: var(--c-bg-sub); color: var(--c-text); text-decoration: none; }
.side__a.is-on { background: var(--c-brand-sub); color: var(--c-brand); font-weight: 600; }
.side__num {
  flex: none; width: 19px; height: 19px; border-radius: 5px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-family: var(--mono);
  background: var(--c-bg-sub); color: var(--c-text-mut); border: 1px solid var(--c-border-mut);
}
.side__a.is-on .side__num { background: var(--c-brand); color: #fff; border-color: transparent; }
.side__sub { margin: 2px 0 6px 28px; padding-left: 10px; border-left: 1px solid var(--c-border); }
.side__sub a { display: block; padding: 3.5px 8px; font-size: 13px; color: var(--c-text-mut); border-radius: 4px; }
.side__sub a:hover { color: var(--c-text); background: var(--c-bg-sub); text-decoration: none; }
.side__sub a.is-on { color: var(--c-brand); font-weight: 600; }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar); display: flex; justify-content: center; }
.doc { flex: 1; max-width: var(--maxw); padding: 34px 40px 96px; min-width: 0; }

.toc {
  position: sticky; top: calc(var(--header) + 34px); align-self: flex-start;
  width: var(--toc); flex: none; margin-right: 26px;
  max-height: calc(100vh - var(--header) - 70px); overflow-y: auto; padding-bottom: 20px;
}
.toc__t { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-text-mut); margin-bottom: 8px; }
.toc a {
  display: block; padding: 3.5px 0 3.5px 11px; font-size: 12.5px; line-height: 1.55;
  color: var(--c-text-mut); border-left: 2px solid var(--c-border);
}
.toc a:hover { color: var(--c-text); text-decoration: none; }
.toc a.is-on { color: var(--c-brand); border-left-color: var(--c-brand); font-weight: 600; }
.toc a[data-lv="3"] { padding-left: 22px; font-size: 12px; }

/* ---------- 排版 ---------- */
.doc h1 { font-size: 30px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.02em; }
.doc h2 {
  font-size: 21px; font-weight: 660; line-height: 1.4; margin: 46px 0 14px;
  padding-top: 18px; border-top: 1px solid var(--c-border-mut); letter-spacing: -.01em;
}
.doc h3 { font-size: 16.5px; font-weight: 640; margin: 30px 0 10px; }
.doc h4 { font-size: 15px; font-weight: 640; margin: 22px 0 8px; color: var(--c-text-sec); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc p  { margin: 0 0 14px; color: var(--c-text-sec); }
.doc strong { color: var(--c-text); font-weight: 640; }
.doc ul, .doc ol { margin: 0 0 15px; padding-left: 23px; color: var(--c-text-sec); }
.doc li { margin: 5px 0; }
.doc li::marker { color: var(--c-text-mut); }
.doc hr { border: 0; border-top: 1px solid var(--c-border); margin: 34px 0; }

.lead { font-size: 16px; color: var(--c-text-sec); margin: 0 0 26px; line-height: 1.72; }

/* 章节锚点 */
.anchor {
  opacity: 0; margin-left: 8px; font-weight: 400; color: var(--c-text-mut);
  font-size: .8em; text-decoration: none; transition: opacity .12s;
}
h2:hover .anchor, h3:hover .anchor { opacity: 1; }

/* 面包屑 */
.crumb { font-size: 12.5px; color: var(--c-text-mut); margin-bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumb a { color: var(--c-text-mut); }
.crumb a:hover { color: var(--c-brand); }

/* ---------- 行内代码 & 代码块 ---------- */
:where(.doc) code {
  font-family: var(--mono); font-size: .875em;
  background: var(--c-bg-code); border: 1px solid var(--c-border-mut);
  padding: .1em .38em; border-radius: 4px; color: var(--c-text);
  word-break: break-word;
}
.code { position: relative; margin: 0 0 18px; }
.code__bar {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--c-bg-sub); border: 1px solid var(--c-border);
  border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12px; color: var(--c-text-mut);
}
.code__name { font-family: var(--mono); font-weight: 600; color: var(--c-text-sec); }
.code__bar .sp { flex: 1; }
.code pre {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  background: var(--c-bg-code); border: 1px solid var(--c-border);
  border-radius: var(--radius); font-size: 13px; line-height: 1.72;
}
.code__bar + pre { border-radius: 0 0 var(--radius) var(--radius); }
.code pre code {
  background: none; border: 0; padding: 0; font-size: inherit;
  font-family: var(--mono); color: var(--c-text); white-space: pre;
}
.copy {
  border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text-sec);
  border-radius: 5px; padding: 2px 9px; font-size: 11.5px; cursor: pointer;
  font-family: var(--font); white-space: nowrap;
}
.copy:hover { background: var(--c-bg); color: var(--c-brand); border-color: var(--c-brand); }
.copy.is-done { color: var(--c-ok); border-color: var(--c-ok); }
/* 无标题栏的代码块：按钮浮在右上 */
.code > pre:first-child + .copy,
.code > .copy.is-float {
  position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .13s;
}
.code:hover .copy.is-float { opacity: 1; }

/* 语法高亮（极简 6 色，够读就行） */
.tok-c { color: var(--c-text-mut); font-style: italic; }
.tok-s { color: var(--c-ok); }
.tok-k { color: var(--c-info); font-weight: 600; }
.tok-n { color: var(--c-danger); }
.tok-p { color: var(--c-brand); }
.tok-f { color: var(--c-text); font-weight: 600; }

/* ---------- 提示块 ---------- */
.note {
  display: flex; gap: 11px; padding: 13px 15px; margin: 0 0 18px;
  border: 1px solid; border-radius: var(--radius); font-size: 14px; line-height: 1.7;
}
.note__ico { flex: none; width: 17px; height: 17px; margin-top: 3px; }
.note__b { min-width: 0; flex: 1; }
.note__b > :first-child { margin-top: 0; }
.note__b > :last-child { margin-bottom: 0; }
.note__t { font-weight: 660; margin-bottom: 3px; }
.note p, .note ul, .note ol { color: inherit; }
.note--tip    { background: var(--c-ok-bg);     border-color: var(--c-ok-bd);     color: var(--c-text-sec); }
.note--tip    .note__ico, .note--tip    .note__t { color: var(--c-ok); }
.note--info   { background: var(--c-info-bg);   border-color: var(--c-info-bd);   color: var(--c-text-sec); }
.note--info   .note__ico, .note--info   .note__t { color: var(--c-info); }
.note--warn   { background: var(--c-warn-bg);   border-color: var(--c-warn-bd);   color: var(--c-text-sec); }
.note--warn   .note__ico, .note--warn   .note__t { color: var(--c-warn); }
.note--danger { background: var(--c-danger-bg); border-color: var(--c-danger-bd); color: var(--c-text-sec); }
.note--danger .note__ico, .note--danger .note__t { color: var(--c-danger); }

/* ---------- 表格 ---------- */
.tw { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--c-border);
      border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.doc table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 460px; }
.doc thead th {
  background: var(--c-bg-sub); text-align: left; font-weight: 640; color: var(--c-text);
  padding: 9px 13px; border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.doc tbody td { padding: 9px 13px; border-bottom: 1px solid var(--c-border-mut); color: var(--c-text-sec); vertical-align: top; }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc tbody tr:hover td { background: var(--c-bg-sub); }
.doc td code, .doc th code { white-space: nowrap; }

/* ---------- API 组件 ---------- */
.method {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: #fff; padding: 2px 8px; border-radius: 4px; vertical-align: middle;
}
.method--get { background: var(--m-get); }
.method--post{ background: var(--m-post); }
.method--put { background: var(--m-put); }
.method--del { background: var(--m-del); }

.ep {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px 15px; margin: 0 0 18px;
  background: var(--c-bg-sub); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.ep__path { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--c-text); word-break: break-all; }
.ep .copy { margin-left: auto; }

/* 必填/选填标记 */
.req { font-size: 11px; font-weight: 700; color: var(--c-danger); white-space: nowrap; }
.opt { font-size: 11px; font-weight: 600; color: var(--c-text-mut); white-space: nowrap; }
.type { font-family: var(--mono); font-size: 12px; color: var(--c-info); white-space: nowrap; }
.pill {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 20px; border: 1px solid var(--c-border); color: var(--c-text-mut);
  background: var(--c-bg-sub); white-space: nowrap;
}
.pill--trap { color: var(--c-danger); border-color: var(--c-danger-bd); background: var(--c-danger-bg); }
.pill--new  { color: var(--c-ok);     border-color: var(--c-ok-bd);     background: var(--c-ok-bg); }
.pill--dead { color: var(--c-text-mut); text-decoration: line-through; }

/* ---------- 标签页 ---------- */
.tabs { margin: 0 0 18px; }
.tabs__nav { display: flex; gap: 3px; border-bottom: 1px solid var(--c-border); margin-bottom: -1px; flex-wrap: wrap; }
.tabs__b {
  padding: 7px 14px; font-size: 13.5px; font-weight: 550; cursor: pointer;
  background: none; border: 1px solid transparent; border-bottom: 0; color: var(--c-text-mut);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-family: var(--font);
}
.tabs__b:hover { color: var(--c-text); }
.tabs__b.is-on {
  color: var(--c-brand); background: var(--c-bg);
  border-color: var(--c-border); border-bottom-color: var(--c-bg);
  position: relative; z-index: 1;
}
.tabs__p { display: none; padding-top: 16px; }
.tabs__p.is-on { display: block; }

/* ---------- 步骤 ---------- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 18px; }
.steps > li {
  counter-increment: s; position: relative; padding: 0 0 22px 40px;
  border-left: 2px solid var(--c-border); margin-left: 13px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(s); position: absolute; left: -14px; top: -2px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-brand); color: #fff; font-size: 12.5px; font-weight: 700;
  font-family: var(--mono); border: 3px solid var(--c-bg); box-sizing: content-box;
}
.steps__t { font-weight: 640; color: var(--c-text); margin-bottom: 5px; font-size: 15px; }
.steps > li > :last-child { margin-bottom: 0; }

/* ---------- 首页卡片 ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); margin: 0 0 22px; }
.card {
  display: block; padding: 20px; border: 1px solid var(--c-border);
  border-radius: 11px; background: var(--c-bg); color: inherit;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.card:hover { border-color: var(--c-brand); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-2px); }
.card__ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--c-brand-sub); color: var(--c-brand); margin-bottom: 13px; border: 1px solid var(--c-brand-bd);
}
.card__ico svg { width: 19px; height: 19px; }
.card__t { font-size: 16px; font-weight: 660; margin-bottom: 5px; color: var(--c-text); }
.card__d { font-size: 13.5px; color: var(--c-text-sec); line-height: 1.65; margin: 0; }
.card__m { margin-top: 12px; font-size: 12px; color: var(--c-text-mut); display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 上下页 ---------- */
.pager { display: flex; gap: 14px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--c-border); }
.pager a {
  flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--c-border);
  border-radius: var(--radius); color: var(--c-text);
}
.pager a:hover { border-color: var(--c-brand); text-decoration: none; }
.pager span { display: block; font-size: 11.5px; color: var(--c-text-mut); margin-bottom: 2px; }
.pager b { font-size: 14px; font-weight: 600; }
.pager .nx { text-align: right; }

/* ---------- 页脚 ---------- */
.foot { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--c-border);
        font-size: 12.5px; color: var(--c-text-mut); }
.foot p { color: inherit; margin: 0 0 5px; }

/* ---------- 遮罩（移动端抽屉） ---------- */
.mask { display: none; position: fixed; inset: var(--header) 0 0; background: rgba(0,0,0,.4); z-index: 45; }
.mask.is-on { display: block; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .toc { display: none; }
  .doc { max-width: 900px; }
}
@media (max-width: 900px) {
  :root { --header: 52px; }
  .burger { display: grid; }
  .hdr__links { display: none; }
  .search { width: 168px; }
  .side {
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg); width: 268px;
  }
  .side.is-open { transform: none; }
  .main { margin-left: 0; }
  .doc { padding: 24px 18px 72px; }
  .doc h1 { font-size: 25px; }
  .doc h2 { font-size: 19px; margin-top: 36px; }
  .pager { flex-direction: column; }
}
@media (max-width: 560px) {
  .hdr__tag { display: none; }
  .search { width: 130px; }
}

@media print {
  .hdr, .side, .toc, .pager, .copy, .mask { display: none !important; }
  .main { margin: 0; } .doc { max-width: none; padding: 0; }
}

/* 可访问性：键盘焦点 */
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}