/*
 * api-portal.css — QuickFind 开放平台门户页专属样式（api 站一手资产）
 *
 * 大厂化版式：左分区导航 + 中内容 + 右页内 TOC；端点表格/方法/作用域/稳定性徽章、
 * 多语言示例 Tab、错误码表、变更日志时间线。变量全部取自 tokens.css（--qf-*），
 * 暗色模式由 data-theme 驱动，本文件不定义任何颜色常量（徽章色除外——它们是
 * 语义色，不随主题反转）。共享 chrome 的样式不在这里重复定义。
 */

/* ---------- 三栏外壳 ---------- */
.qp-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 200px;
  gap: 36px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  align-items: start;
}
.qp-rail, .qp-toc {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.qp-rail { border-right: 1px solid var(--qf-border-soft); padding-right: 20px; }
.qp-main { min-width: 0; }

/* ---------- 左：分区导航 ---------- */
.qp-rail-title, .qp-toc-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qf-text-muted);
  margin: 0 0 10px;
}
.qp-rail-list, .qp-toc-list { list-style: none; margin: 0; padding: 0; }
.qp-rail-list li, .qp-toc-list li { margin: 0 0 2px; }
.qp-rail-list a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--qf-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.qp-rail-list a:hover { background: var(--qf-primary-soft); color: var(--qf-primary); }
.qp-rail-list a.is-active {
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
  border-left-color: var(--qf-primary);
  font-weight: 600;
}
.qp-rail-num {
  display: inline-block;
  min-width: 18px;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  opacity: 0.75;
}
.qp-toc-list a {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--qf-text-muted);
  text-decoration: none;
  padding: 3px 0 3px 10px;
  border-left: 2px solid var(--qf-border-soft);
}
.qp-toc-list a:hover { color: var(--qf-primary); }
.qp-toc-list a.is-active {
  color: var(--qf-primary);
  border-left-color: var(--qf-primary);
  font-weight: 600;
}

/* ---------- 分区骨架 ---------- */
.qp-section { margin: 0 0 56px; scroll-margin-top: 84px; }
.qp-section > header { margin: 0 0 20px; }
.qp-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qf-primary);
  margin: 0 0 8px;
}
.qp-section h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.qp-section h3 { font-size: 17px; margin: 28px 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qp-lede { font-size: 15.5px; line-height: 1.7; color: var(--qf-text-muted); margin: 0; max-width: 76ch; }
.qp-sub { font-size: 14px; line-height: 1.7; color: var(--qf-text-muted); margin: 0 0 14px; max-width: 76ch; }

/* ---------- Hero ---------- */
.qp-hero {
  position: relative;
  border-radius: 20px;
  padding: 44px 40px 36px;
  background:
    radial-gradient(120% 140% at 88% -10%, var(--qf-brand-glow) 0%, transparent 55%),
    var(--qf-brand-grad);
  color: #fff;
  overflow: hidden;
  margin: 0 0 22px;
}
.qp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
/*
 * 🔴 必须显式重置，不能只写 position:relative。
 * 共享 site.css:195 的 .hero-inner 是官网首页的两栏 grid
 * （grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center）——
 * 官网用它放「文案 | 产品截图」，而本 hero-inner 里是 6 个纵向流式子元素。
 * 不重置就会被塞进 2×3 网格：状态胶囊与 H1 并排、lead 与 baseurl 并排、
 * CTA 与 meta 并排（2026-10-16 线上实测：pill x=392 w=325 / H1 x=765 w=315）。
 */
.qp-hero .hero-inner {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 62ch;
}
.qp-hero h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.02em; }
.qp-hero .lead { font-size: 16px; line-height: 1.7; margin: 0 0 24px; max-width: 62ch; color: rgba(255, 255, 255, 0.92); }
.qp-baseurl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 14px;
  margin: 0 0 22px;
}
/*
 * 🔴 这里的 code 必须用 html[data-theme] 抬一档，两个原因（都是实测踩到的）：
 *   ① site.css:1856 有裸 `code { color: var(--brand-deep) }`（特异性 0,0,1），
 *      它会把 hero 上这行等宽字的颜色改成深蓝 —— 在蓝色 hero 底上几乎看不清。
 *   ② ui.css:754 有 `html[data-theme="dark"] code { color:#9FB5FF }`（0,1,2）。
 *      它的存在是为了压过裸 code，所以本文件凡是要让 code 在深色下保持浅色，
 *      都得写到同等或更高特异性，否则暗色模式一换就变色。
 *   本行的父级 .qp-baseurl 恒定是白字（hero 永远是品牌渐变底，不随主题反转），
 *   所以这里两种主题都写死白。
 */
html .qp-baseurl code,
html .qp-baseurl .qp-hl { color: #fff; background: none; padding: 0; font-size: inherit; }
.qp-baseurl code { color: #fff; background: none; padding: 0; font-size: inherit; }
.qp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.qp-hero-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.qp-hero-cta .btn:hover { transform: translateY(-1px); }
.qp-hero-cta .btn-primary { background: #fff; color: var(--qf-primary); box-shadow: 0 8px 24px rgba(2, 8, 30, 0.25); }
.qp-hero-cta .btn-ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.qp-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.qp-hero-meta b { color: #fff; font-weight: 700; }

/* ---------- 状态徽章 ---------- */
.qp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 5px 14px 5px 10px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 18px;
}
.qp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3);
  animation: qp-pulse 2.4s ease-in-out infinite;
}
@keyframes qp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- 统计卡 ---------- */
.qp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 8px; }
.qp-stat { border: 1px solid var(--qf-border-soft); border-radius: 14px; padding: 16px 18px; background: var(--qf-surface); }
.qp-stat b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--qf-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.qp-stat span { display: block; font-size: 12.5px; color: var(--qf-text-muted); margin-top: 4px; line-height: 1.5; }

/* ---------- 三步快速开始 ---------- */
.qp-steps { display: grid; gap: 14px; margin: 0 0 8px; }
.qp-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  border: 1px solid var(--qf-border-soft);
  border-radius: 14px;
  padding: 18px 20px;
  background: var(--qf-surface);
}
.qp-step-num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.qp-step h4 { margin: 4px 0 6px; font-size: 15px; }
.qp-step p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--qf-text-muted); }

/* ---------- 端点表格 ---------- */
.qp-tbl-wrap {
  border: 1px solid var(--qf-border-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--qf-surface);
  margin: 0 0 14px;
}
.qp-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qp-tbl thead th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qf-text-muted);
  background: var(--qf-bg);
  padding: 10px 14px;
  border-bottom: 1px solid var(--qf-border-soft);
  white-space: nowrap;
}
.qp-tbl tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--qf-border-soft);
  vertical-align: top;
  line-height: 1.55;
}
.qp-tbl tbody tr:last-child td { border-bottom: none; }
.qp-tbl tbody tr:hover { background: var(--qf-primary-soft); }
.qp-tbl .qp-path { font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 12.5px; white-space: nowrap; }
.qp-tbl .qp-desc { color: var(--qf-text-muted); min-width: 170px; }

/* ---------- 徽章：方法 / 作用域 / 稳定性 ---------- */
.qp-method, .qp-scope, .qp-stab {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.5;
  white-space: nowrap;
  font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
.qp-method { color: #fff; }
.qp-m-get { background: #2563eb; }
.qp-m-post { background: #059669; }
.qp-m-patch { background: #d97706; }
.qp-m-delete { background: #dc2626; }
.qp-scope { background: var(--qf-primary-soft); color: var(--qf-primary); border: 1px solid var(--qf-primary-ring); }
.qp-scope-none { background: var(--qf-bg); color: var(--qf-text-muted); border: 1px solid var(--qf-border-soft); }
.qp-stab { background: rgba(5, 150, 105, 0.12); color: #047857; border: 1px solid rgba(5, 150, 105, 0.3); }
.qp-stab-beta { background: rgba(217, 119, 6, 0.12); color: #b45309; border: 1px solid rgba(217, 119, 6, 0.3); }

/* ---------- 端点详情卡 ---------- */
.qp-ep { border: 1px solid var(--qf-border-soft); border-radius: 14px; background: var(--qf-surface); margin: 0 0 16px; overflow: hidden; }
.qp-ep-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--qf-border-soft);
  background: var(--qf-bg);
}
.qp-ep-path { font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 13.5px; font-weight: 700; }
.qp-ep-body { padding: 16px 18px; }
.qp-ep-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.7; color: var(--qf-text-muted); }
.qp-ep-body p:last-child { margin-bottom: 0; }
.qp-ep-params { margin: 10px 0 0; }
.qp-ep-params dt {
  font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--qf-text);
  margin-top: 10px;
}
.qp-ep-params dt span { font-family: var(--qf-body, system-ui, sans-serif); font-weight: 400; color: var(--qf-text-muted); }
.qp-ep-params dd { margin: 3px 0 0; font-size: 13px; line-height: 1.6; color: var(--qf-text-muted); }

/* ---------- 多语言示例 Tab ---------- */
.qp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--qf-border-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.qp-tabs::-webkit-scrollbar { display: none; }
.qp-tab {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--qf-text-muted);
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s;
}
.qp-tab:hover { color: var(--qf-text); }
.qp-tab[aria-selected="true"] { color: var(--qf-primary); border-bottom-color: var(--qf-primary); }
.qp-pane[hidden] { display: none; }

/* ---------- 代码块 ---------- */
.qp-code {
  position: relative;
  margin: 0;
  background: var(--qf-code-bg);
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--qf-code-border);
  border-top: none;
  overflow: hidden;
}
/*
 * 🔴 `background: transparent` 不是可有可无的修饰，是**修 bug**。
 * 共享 site.css 给裸 `code` 加了 `background: var(--bg-2)`（浅色主题 = 近白 #F4F6FB），
 * 而这里把 code 的文字设成 --qf-code-text（#C7E4F5，浅色，为深色 code 底准备）。
 * 两者叠加 = **浅色文字压在近白底上**，浅色主题下代码块几乎读不出来。
 * 实测：code 的计算背景 rgb(244,246,251)、文字 rgb(199,228,245) → 对比度约 1.1。
 * `<pre class="qp-code">` 已经有深色底（--qf-code-bg），内层 code 必须透明。
 *
 * 用 `html .qp-code code` 抬一档：共享层有更高特异性的 code 规则会压过 0,1,1。
 */
html .qp-code code {
  display: block;
  padding: 16px 52px 16px 18px;
  font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12.8px;
  line-height: 1.75;
  color: var(--qf-code-text);
  background: transparent;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.qp-code .qp-cm { opacity: 0.62; }
.qp-code .qp-hl { color: #8fb0ff; font-weight: 600; }
.qp-code .qp-str { color: #9ae6b4; }
.qp-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.qp-copy:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.qp-copy.is-done { background: rgba(52, 211, 153, 0.2); border-color: rgba(52, 211, 153, 0.4); color: #6ee7b7; }
.qp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 提示框 ---------- */
.qp-callout { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; border: 1px solid; }
.qp-callout b { display: block; margin-bottom: 2px; }
.qp-callout p { margin: 0; color: var(--qf-text-muted); }
.qp-callout-icon { font-size: 16px; line-height: 1.4; }
.qp-callout-info { background: var(--qf-info-soft); border-color: var(--qf-primary-ring); }
.qp-callout-info .qp-callout-icon { color: var(--qf-primary); }
.qp-callout-warn { background: var(--qf-warning-soft); border-color: var(--qf-warning); }
.qp-callout-warn .qp-callout-icon { color: var(--qf-warning); }
.qp-callout-tip { background: var(--qf-success-soft); border-color: var(--qf-success, #059669); }
.qp-callout-tip .qp-callout-icon { color: var(--qf-success, #047857); }

/* ---------- 错误码表 ---------- */
.qp-err-code { font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 12.5px; font-weight: 700; color: var(--qf-primary); white-space: nowrap; }
.qp-http {
  display: inline-block;
  font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--qf-bg);
  color: var(--qf-text-muted);
  white-space: nowrap;
}
.qp-http-2 { background: rgba(5, 150, 105, 0.12); color: #047857; }
.qp-http-4 { background: rgba(217, 119, 6, 0.12); color: #b45309; }
.qp-http-5 { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }

/* ---------- 变更日志 ---------- */
.qp-timeline { list-style: none; margin: 0; padding: 0; }
.qp-timeline li { position: relative; padding: 0 0 22px 22px; border-left: 2px solid var(--qf-border-soft); margin: 0; }
.qp-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.qp-timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--qf-primary);
  box-shadow: 0 0 0 3px var(--qf-primary-soft);
}
.qp-timeline time { display: block; font-size: 12px; font-weight: 700; color: var(--qf-text-muted); letter-spacing: 0.04em; margin-bottom: 4px; }
.qp-timeline h4 { margin: 0 0 6px; font-size: 14.5px; }
.qp-timeline p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--qf-text-muted); }
.qp-timeline .qp-ver {
  display: inline-block;
  font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px;
  font-weight: 700;
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: 1px;
}

/* ---------- 资源链接网格 ---------- */
.qp-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.qp-link-card {
  display: block;
  border: 1px solid var(--qf-border-soft);
  border-radius: 13px;
  padding: 15px 17px;
  text-decoration: none;
  color: inherit;
  background: var(--qf-surface);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.qp-link-card:hover { border-color: var(--qf-primary); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(43, 92, 255, 0.12); }
.qp-link-card b { display: block; font-size: 14px; margin-bottom: 4px; }
.qp-link-card span { display: block; font-size: 12.5px; line-height: 1.55; color: var(--qf-text-muted); }
.qp-link-card .qp-link-go { color: var(--qf-primary); font-size: 12.5px; font-weight: 700; margin-top: 8px; display: block; }

/* ---------- 搜索出口 ---------- */
.qp-searchbar { display: flex; gap: 10px; max-width: 560px; margin: 0 0 10px; }
.qp-searchbar input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--qf-border);
  background: var(--qf-surface);
  color: var(--qf-text);
}
.qp-searchbar input:focus { outline: 2px solid var(--qf-primary-ring); border-color: var(--qf-primary); }
.qp-searchbar button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 10px;
  border: none;
  background: var(--qf-primary);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.qp-searchbar button:hover { background: var(--qf-primary-hover); }
.qp-hero-note { font-size: 13px; line-height: 1.6; color: var(--qf-text-muted); margin: 0; max-width: 76ch; }

/* ---------- 响应式：收起 TOC / rail ---------- */
@media (max-width: 1180px) {
  .qp-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .qp-toc { display: none; }
}
@media (max-width: 880px) {
  .qp-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 16px 64px; }
  .qp-rail {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--qf-border-soft);
    padding: 0 0 14px;
    margin-bottom: 22px;
  }
  .qp-rail-list { display: flex; flex-wrap: wrap; gap: 4px; }
  .qp-rail-list a { border-left: none; border: 1px solid var(--qf-border-soft); border-radius: 999px; padding: 6px 12px; }
  .qp-rail-list a.is-active { border-color: var(--qf-primary); }
  .qp-rail-num { display: none; }
  .qp-hero { padding: 32px 24px 28px; }
}
/* ── 在线试调用（explorer.html）────────────────────────────────────────
 * 页面的主交互区。2026-10-16 线上截图发现片段用了 .qp-exp-* 八个类而样式表
 * 里一个都没有（建片段时漏写），表单全部退回浏览器原生控件 —— 白底小框、
 * 系统按钮，与大厂沙盒的观感完全不符。本段为唯一真源，暗色由令牌自然接管。
 * ─────────────────────────────────────────────────────────────────── */
.qp-exp {
  border: 1px solid var(--qf-border-soft);
  border-radius: 14px;
  background: var(--qf-surface);
  padding: 22px 22px 18px;
  margin: 18px 0 8px;
}
.qp-exp-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.qp-exp-row:last-child { margin-bottom: 0; }
.qp-exp-label { flex: 0 0 auto; min-width: 96px; font-size: 13.5px; font-weight: 600; color: var(--qf-text); }
.qp-exp-input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 13.5px;
  color: var(--qf-text);
  background: var(--qf-bg);
  border: 1px solid var(--qf-border-soft);
  border-radius: 9px;
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qp-exp-input::placeholder { color: var(--qf-text-muted); opacity: .7; }
.qp-exp-input:focus { outline: none; border-color: var(--qf-primary); box-shadow: 0 0 0 3px var(--qf-primary-ring); }
/* select 去掉原生外观，用两条渐变画箭头（currentColor 跟随主题） */
select.qp-exp-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
input[type="number"].qp-exp-input { flex: 0 0 120px; max-width: 120px; }
.qp-exp-actions { gap: 10px; margin-top: 4px; }
.qp-exp-send {
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: #fff; background: var(--qf-primary);
  border: none; border-radius: 9px; padding: 9px 20px; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.qp-exp-send:hover { background: var(--qf-primary-hover); }
.qp-exp-send:active { transform: translateY(1px); }
.qp-exp-send:disabled { opacity: .55; cursor: progress; }
.qp-exp-clear {
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--qf-text); background: transparent;
  border: 1px solid var(--qf-border-soft); border-radius: 9px; padding: 8px 16px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.qp-exp-clear:hover { border-color: var(--qf-warning); color: var(--qf-warning); }
.qp-exp-send:focus-visible, .qp-exp-clear:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--qf-primary-ring); }
.qp-exp-state { margin-left: auto; font-size: 12.5px; color: var(--qf-text-muted); }
@media (max-width: 880px) {
  .qp-exp { padding: 16px 14px; }
  .qp-exp-row { flex-wrap: wrap; }
  .qp-exp-label { min-width: 100%; }
  .qp-exp-state { margin-left: 0; }
}

/* ── ⌘K 命令面板（站内文档搜索）─────────────────────────────────────────
 * 样式令牌全部取自 tokens.css，暗色由 [data-theme] 自然接管，不写死颜色。
 * 面板由 api-cmdk.js 用 createElement 造（CSP 无 'unsafe-inline'，
 * 不能用内联 <script> 拼字符串）；遮罩用 hidden 属性控制初始态。
 * ─────────────────────────────────────────────────────────────────── */
.qp-cmdk-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 16px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--qf-text-muted);
  background: var(--qf-surface);
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius-sm);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.qp-cmdk-btn:hover { border-color: var(--qf-primary); color: var(--qf-primary); }
.qp-cmdk-btn:focus-visible { outline: none; box-shadow: var(--qf-focus-ring); }
.qp-cmdk-btn-ico { font-size: 15px; line-height: 1; flex: none; }
.qp-cmdk-btn-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-cmdk-kbd {
  flex: none;
  font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--qf-text-muted);
  background: var(--qf-bg);
  border: 1px solid var(--qf-border);
  border-radius: 5px;
  padding: 1px 5px;
}

.qp-cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--qf-z-modal);
  background: rgba(9, 14, 26, .48);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 12vh 16px 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  transition: opacity .14s ease;
}
.qp-cmdk-overlay[hidden] { display: none; }
.qp-cmdk-overlay.is-open { opacity: 1; }
/* 打开面板时锁住背景滚动：面板内部自己滚，背景跟着滚会让人失去方位 */
.qp-cmdk-locked, .qp-cmdk-locked body { overflow: hidden; }

.qp-cmdk {
  width: 100%;
  max-width: 640px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--qf-surface);
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius-lg);
  box-shadow: var(--qf-shadow-lg);
  overflow: hidden;
  transform: translateY(-6px);
  transition: transform .14s ease;
}
.qp-cmdk-overlay.is-open .qp-cmdk { transform: translateY(0); }

.qp-cmdk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--qf-border-soft);
}
.qp-cmdk-head-ico { font-size: 17px; color: var(--qf-text-muted); flex: none; line-height: 1; }
.qp-cmdk-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  color: var(--qf-text);
  background: transparent;
  border: none;
  padding: 4px 0;
}
.qp-cmdk-input:focus { outline: none; }
.qp-cmdk-input::placeholder { color: var(--qf-text-muted); opacity: .75; }
.qp-cmdk-input::-webkit-search-cancel-button { display: none; }
.qp-cmdk-esc {
  flex: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--qf-text-muted);
  background: var(--qf-bg);
  border: 1px solid var(--qf-border);
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
}
.qp-cmdk-esc:hover { color: var(--qf-text); border-color: var(--qf-text-muted); }

.qp-cmdk-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 96px;
}
.qp-cmdk-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--qf-radius-sm);
  cursor: pointer;
  scroll-margin: 6px;
}
.qp-cmdk-item.is-active { background: var(--qf-primary-soft); }
.qp-cmdk-item-main { min-width: 0; flex: 1 1 auto; }
.qp-cmdk-item-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--qf-text);
  overflow-wrap: anywhere;
}
.qp-cmdk-item-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--qf-text-muted);
  margin-top: 1px;
  overflow-wrap: anywhere;
}
.qp-cmdk-badge {
  flex: none;
  min-width: 44px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.7;
  border-radius: 5px;
  padding: 0 6px;
  color: var(--qf-text-muted);
  background: var(--qf-bg);
  border: 1px solid var(--qf-border-soft);
}
/* 端点条目的徽章改成方法色 —— 搜 "orders" 时一眼看出是 GET 还是 POST */
.qp-cmdk-badge-m-get { color: #2563eb; background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .28); }
.qp-cmdk-badge-m-post { color: #047857; background: rgba(5, 150, 105, .12); border-color: rgba(5, 150, 105, .28); }
.qp-cmdk-badge-m-patch { color: #b45309; background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .28); }
.qp-cmdk-badge-m-delete { color: #b91c1c; background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .26); }

.qp-cmdk-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--qf-text-muted);
}
.qp-cmdk-clear {
  font: inherit;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--qf-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.qp-cmdk-clear:hover { text-decoration: underline; }
.qp-cmdk-empty {
  padding: 26px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--qf-text-muted);
}

.qp-cmdk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--qf-border-soft);
  background: var(--qf-bg);
  font-size: 11.5px;
  color: var(--qf-text-muted);
}
.qp-cmdk-foot-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-cmdk-foot-keys { flex: none; font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }

@media (max-width: 880px) {
  .qp-cmdk-overlay { padding: 8vh 12px 12px; }
  .qp-cmdk { max-height: 78vh; }
  /* 移动端没有 hover 也没有 Ctrl 键：把 kbd 提示藏掉，按钮本身是唯一入口 */
  .qp-cmdk-kbd { display: none; }
  .qp-cmdk-foot-keys { display: none; }
}

/* ── 页底：上一页 / 下一页 ────────────────────────────────────────────
 * 从 .qp-shell 移出到三栏之外，宽度与正文一致；两个格子等宽，
 * 首/末页用 is-empty 占位而不是塌掉 —— 塌掉会让翻页条在页面间左右跳动。
 * ─────────────────────────────────────────────────────────────────── */
.qp-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 24px 0;
}
.qp-pager-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.qp-pager-cell:not(.is-empty):hover {
  border-color: var(--qf-primary);
  transform: translateY(-1px);
}
.qp-pager-cell.is-empty { visibility: hidden; }
.qp-pager-next { text-align: right; }
.qp-pager-dir { font-size: 12px; color: var(--qf-text-muted); }
.qp-pager-next:hover .qp-pager-dir { color: var(--qf-primary); }
.qp-pager-title { font-size: 14.5px; font-weight: 600; color: var(--qf-text); }
.qp-pager-next:hover .qp-pager-title { color: var(--qf-primary); }

/* ── 页底：这一页解决你的问题了吗 ────────────────────────────────────
 * 刻意不做表单/不落库：两个按钮是链到 support 子域的深链，
 * 主题参数带在 URL 上，由人处理。没有后端就没有「提交失败」这种失败模式。
 * ─────────────────────────────────────────────────────────────────── */
.qp-feedback {
  max-width: 1320px;
  margin: 28px auto 0;
  padding: 22px 24px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-lg);
  background: var(--qf-note-neutral);
  text-align: center;
}
.qp-feedback-q { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--qf-text); }
.qp-feedback-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.qp-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--qf-border);
  background: var(--qf-surface);
  color: var(--qf-text);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.qp-feedback-btn.is-yes:hover { border-color: var(--qf-success); color: var(--qf-success); background: var(--qf-success-soft); }
.qp-feedback-btn.is-no:hover { border-color: var(--qf-warning); color: var(--qf-warning); background: var(--qf-warning-soft); }
.qp-feedback-note { margin: 12px 0 0; font-size: 12px; color: var(--qf-text-muted); }

@media (max-width: 880px) {
  .qp-pager { grid-template-columns: 1fr; padding: 8px 16px 0; }
  .qp-pager-cell.is-empty { display: none; }
  .qp-feedback { margin: 24px 16px 0; padding: 18px 16px; }
}

/* ── 代码块语言标签 ────────────────────────────────────────────────
 * 由 api-portal.js 从代码内容推断语言（curl/python/JSON…），打在左上角。
 * 推断错也不影响可读性 —— 它只是个提示，不参与任何逻辑。
 * ─────────────────────────────────────────────────────────────────── */
.qp-code-lang {
  position: absolute;
  top: 10px;
  left: 16px;
  font-family: var(--qf-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7f96ad;
  pointer-events: none;
  user-select: none;
}
/* 有语言标签时给代码让出位置；复制按钮在右上，不冲突 */
.qp-code.has-lang code { padding-top: 30px; }
.qp-code.has-lang .qp-copy { top: 8px; }

/* ── 小节标题的锚点深链 ────────────────────────────────────────────
 * hover 时在标题右侧露出 #，点了复制「页面 URL + #小节id」到剪贴板。
 * 由 api-portal.js 造（无内联脚本），无 JS 时就是普通标题。
 * ─────────────────────────────────────────────────────────────────── */
.qp-section h2, .qp-section h3 { position: relative; }
.qp-anchor {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: var(--qf-text-muted);
  opacity: 0;
  text-decoration: none;
  border-radius: 5px;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.qp-section h2:hover .qp-anchor,
.qp-section h3:hover .qp-anchor,
.qp-anchor:focus-visible { opacity: 1; }
.qp-anchor:hover { color: var(--qf-primary); background: var(--qf-primary-soft); }
.qp-anchor.is-done { color: var(--qf-success); opacity: 1; }

/* ── 端点表过滤框 ──────────────────────────────────────────────────
 * 24 行表格没有过滤时，找一个端点要竖着扫；加一个输入框 + 结果计数。
 * 纯 CSS 做不到「隐藏行 + 更新计数」，所以由 api-portal.js 控制 hidden。
 * ─────────────────────────────────────────────────────────────────── */
.qp-tbl-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.qp-tbl-filter-box { position: relative; flex: 1 1 280px; max-width: 420px; min-width: 0; }
.qp-tbl-filter-box .qp-cmdk-head-ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--qf-text-muted);
  pointer-events: none;
}
.qp-tbl-filter input {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  color: var(--qf-text);
  background: var(--qf-surface);
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius-sm);
  padding: 9px 12px 9px 32px;
}
.qp-tbl-filter input:focus { outline: none; border-color: var(--qf-primary); box-shadow: var(--qf-focus-ring); }
.qp-tbl-filter input::-webkit-search-cancel-button { display: none; }
.qp-tbl-count { font-size: 12.5px; color: var(--qf-text-muted); font-variant-numeric: tabular-nums; }
.qp-tbl-filter-hint { font-size: 12.5px; color: var(--qf-text-muted); }
.qp-tbl tbody tr[hidden] { display: none; }
/* 家族小标题在整族被过滤掉时要一起藏掉，否则会剩下一个没有内容的标题 */
.qp-tbl-group[hidden] { display: none; }

/* 暗色下把语言标签与代码高亮整体提亮一档。
   理由同上：#7f96ad / #8fb0ff 是按浅色 code 底调的，暗色底(#0D1B24)上偏暗。 */
html[data-theme="dark"] .qp-code-lang { color: #93a9bd; }
html[data-theme="dark"] .qp-code .qp-hl { color: #A8C2FF; }

/* 同上：语言标签存在时给代码让出顶部位置。用 html 抬一档，
   保证不被共享层的 code 规则压掉。 */
html .qp-code.has-lang code { padding-top: 30px; }
html .qp-code.has-lang .qp-copy { top: 8px; }