/*
 * FOXWAF 子页（releases / install / plugins / docs）统一视觉骨架
 * - 与首页 landing.html 同色板；不依赖 Tailwind JIT
 * - 暗色为主，强调信息密度与可读性（参考 kali.org / Cloudflare docs 风格）
 */

/* ───────── 基础 ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ───────── 跨页过渡（Chromium / Edge / Safari 17.4+） ─────────
 * 浏览器原生的导航过渡 —— 旧页淡出、新页淡入。
 * 关键元素加 view-transition-name 让导航条本身保持位置不动，
 * 只交换主内容，从而消除「白闪 → backdrop-blur 重栅格」那一跳。
 */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: ease;
}
/* 持久元素：导航条整体跨页不闪，浏览器会自动 morph */
.site-nav { view-transition-name: site-nav; }
.site-footer { view-transition-name: site-footer; }

/* ───────── 焦点环（键盘可达性） ───────── */
:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; border-radius: 3px; }
.site-links a:focus-visible,
.site-cta:focus-visible,
.site-brand:focus-visible { outline-offset: 4px; }

/* 视觉隐藏但屏幕阅读器可见 ——
 * 用来给纯图标链接（GitHub / GitCode）补一段可被审计 / SR 读出来的文本，
 * 视觉上不可见，但参与 accessibility tree。 */
.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;
}

body.site-chrome {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #09090b;
  color: #e4e4e7;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ───────── 顶部导航 ───────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  border-bottom: 1px solid #27272a;
  background: rgba(9, 9, 11, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-nav-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4rem;          /* 固定高度，防跨页 nav 高度抖动 */
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fafafa;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  transition: opacity 0.15s;
}
.site-brand:hover { opacity: 0.82; }
.site-brand img { display: block; width: 32px; height: 36px; }
.site-brand .fox { color: #38bdf8; }
.site-brand .ver-tag {
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0.3rem;
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.4);
  vertical-align: 1px;
  /* 默认隐藏，等 JS 拿到 latest_version 才显示，避免「beta → 1.1」FOUC */
  visibility: hidden;
  min-width: 1.5em;
  display: inline-block;
  text-align: center;
}
.site-brand .ver-tag.ready { visibility: visible; }
.site-links {
  display: flex;
  flex-wrap: nowrap;     /* 不换行，保持单行高度 */
  gap: 1rem;
  align-items: center;
  flex: 0 0 auto;
}
.site-links a {
  color: #a1a1aa;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  position: relative;
  padding: 0.15rem 0;
  transition: color 0.15s;
  white-space: nowrap;
}
.site-links a[href$="install.html"] { order: 10; }
.site-links a[href$="releases.html"] { order: 20; }
.site-links a[href$="docs/index.html"],
.site-links a[href="index.html"] { order: 30; }
.site-links a[href$="plugins.html"] { order: 40; }
.site-links a[href$="announcements.html"] { order: 50; }
.site-links a[href*="github.com/foxwaf/foxwaf"] { order: 60; }
.site-links a[href*="gitcode.com/kabubu/foxwaf"] { order: 70; }
.site-links .site-theme-toggle { order: 80; }
.site-links .site-cta { order: 90; }
.site-links a:hover { color: #fff; }
/* 当前页：天蓝色 + 底部下划线（替代「移到第一项」的洗牌做法） */
.site-links a.site-hl { color: #38bdf8; }
.site-links a.site-hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.5rem;
  height: 2px;
  background: #38bdf8;
  border-radius: 2px;
}
.site-links a.icon-link {
  position: relative;     /* 让内部 .sr-only 的 position:absolute 限定在按钮内部 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  color: #a1a1aa;
}
.site-links a.icon-link:hover { color: #fff; }
.site-links a.icon-link svg,
.site-links a.icon-link img { width: 18px; height: 18px; display: block; }
/* 「首页」入口：只是一根 nav 链接，跟 安装/版本/文档/插件 平级 */
.site-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #e4e4e7 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
}
.site-cta:hover { color: #fff !important; }
.site-cta::after { content: none !important; }   /* 即使被加了 site-hl 也不长尾巴 */

@media (max-width: 900px) {
  .site-nav-inner { padding: 0.7rem 1rem; gap: 0.85rem; height: 3.5rem; }
  .site-links { gap: 0.72rem; }
  .site-links a:not(.icon-link) { font-size: 0.8rem; }
  /* 小屏隐藏「插件」次级入口 + GitCode 图标，保留主线 */
  .site-links a.collapse-mobile { display: none; }
}
@media (max-width: 560px) {
  .site-brand .ver-tag { display: none; }
  .site-links a.icon-link,
  .site-links a[href$="plugins.html"] { display: none; }
  .site-links { gap: 0.58rem; }
  .site-links a:not(.icon-link) { font-size: 0.78rem; }
}

/* ───────── 主体容器 ───────── */
.site-main {
  max-width: 56rem;
  margin: 0 auto;
  padding: 5.5rem 1.5rem 5rem;   /* 与 .site-nav-inner height: 4rem 配合，留 1.5rem 间距 */
}
.site-main.wide { max-width: 80rem; }
.site-main.docs {
  max-width: 80rem;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 3rem;
  padding: 5.5rem 1.5rem 5rem;
  align-items: start;
}
.site-main.docs > section {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 960px) {
  .site-main.docs { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 900px) {
  .site-main, .site-main.docs { padding-top: 5rem; }
}

/* ───────── 侧边目录（文档） ───────── */
.site-side {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  border-right: 1px solid #27272a;
  padding-right: 1rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
.site-side h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #71717a;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
}
.site-side h3:not(:first-child) { margin-top: 1.4rem; }
.site-side ul { list-style: none; margin: 0; padding: 0; }
.site-side li { margin: 0; }
.site-side a {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: 0.4rem;
  font-size: 0.875rem;
  color: #a1a1aa;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.site-side a:hover { color: #fafafa; background: rgba(63, 63, 70, 0.35); }
.site-side a.site-here {
  color: #e0f2fe;
  background: rgba(14, 165, 233, 0.16);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.32);
}
@media (max-width: 960px) {
  .site-side {
    position: static;
    border-right: none;
    border-bottom: 1px solid #27272a;
    padding: 0 0 1rem;
    max-height: none;
  }
}

/* ───────── 面包屑 ───────── */
.site-crumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.825rem;
  color: #71717a;
  margin: 0 0 1rem;
}
.site-crumb a { color: #a1a1aa; text-decoration: none; }
.site-crumb a:hover { color: #fafafa; }
.site-crumb .sep { color: #3f3f46; }

/* ───────── 标题排版 ───────── */
.site-h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #fafafa;
  margin: 0 0 0.65rem;
}
.site-lead {
  font-size: 1.0625rem;
  color: #a1a1aa;
  line-height: 1.65;
  margin: 0 0 2rem;
  max-width: 50rem;
}
.site-h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fafafa;
  margin: 2.25rem 0 0.75rem;
  scroll-margin-top: 5rem;
}
.site-h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fafafa;
  margin: 1.5rem 0 0.6rem;
}

/* ───────── 卡片 ───────── */
.site-card {
  background: rgba(24, 24, 27, 0.55);
  border: 1px solid #27272a;
  border-radius: 0.75rem;
  padding: 1.4rem 1.6rem;
  margin: 0 0 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.site-card.hoverable:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(24, 24, 27, 0.75);
}
.site-card h2, .site-card h3 {
  margin: 0 0 0.65rem;
  color: #fafafa;
}
.site-card h2 { font-size: 1.05rem; font-weight: 600; color: #38bdf8; }
.site-card h3 { font-size: 1rem; font-weight: 600; }
.site-card p, .site-card li { color: #d4d4d8; line-height: 1.65; margin: 0 0 0.65rem; }
.site-card p:last-child, .site-card li:last-child { margin-bottom: 0; }
.site-card ul, .site-card ol { margin: 0.4rem 0 0.6rem 1.25rem; padding: 0; }
.site-card a { color: #38bdf8; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
.site-card a:hover { border-bottom-color: #38bdf8; }
.site-card code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85em; background: #0c0c0f; padding: 0.1rem 0.35rem; border-radius: 4px; border: 1px solid #27272a; color: #f4f4f5; }

/* ───────── 网格布局（卡片组） ───────── */
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.site-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; margin: 0 0 1rem; }

/* ───────── 404 页面专属 —————————————————————————————
 * 7777 端口在 hub 找不到资源时返回的 not-found 页（status 404）。
 * 视觉上：超大渐变 404 数字 + 友好文案 + 4 张快速入口卡片，
 * 与 docs/* 同色板，不引入额外字体或动画库。
 */
.site-not-found {
  text-align: center;
  padding: 4.5rem 1rem 2rem;
  max-width: 56rem;
  margin: 0 auto;
}
.site-not-found-glyph {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(7rem, 18vw, 13rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #38bdf8 0%, #06b6d4 60%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 1rem;
  filter: drop-shadow(0 12px 36px rgba(56, 189, 248, 0.18));
}
.site-not-found h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin: 0 0 0.65rem;
  color: #fafafa;
  letter-spacing: -0.01em;
}
.site-not-found .site-lead {
  max-width: 38rem;
  margin: 0 auto 0.4rem;
}
.site-not-found .site-not-found-path {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  color: #71717a;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 0.45rem;
  padding: 0.25rem 0.6rem;
  margin: 0.85rem 0 0;
  max-width: min(44rem, 92vw);
  word-break: break-all;
  vertical-align: middle;
}
.site-not-found-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
  gap: 1rem;
  margin: 2.5rem 0 0;
  text-align: left;
}
@media (prefers-reduced-motion: no-preference) {
  .site-not-found-glyph {
    animation: site-not-found-float 3.6s ease-in-out infinite;
  }
  @keyframes site-not-found-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.45rem); }
  }
}

/* ───────── 文档分页（上一篇 / 下一篇）─────────
 * docs/ 子页底部、install.html、plugins.html 共用：
 *   - 两栏卡片，prev 在左 next 在右
 *   - 单条时（页头/页尾），独占一栏并对齐对应方向
 *   - SEO：用 <nav rel="prev/next"> 让搜索引擎理解阅读链
 */
.site-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0 0.5rem;
}
.site-pager > a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, rgba(24, 24, 27, 0.78) 0%, rgba(24, 24, 27, 0.45) 100%);
  border: 1px solid #27272a;
  border-radius: 0.85rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  min-width: 0;
}
.site-pager > a:hover {
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.site-pager .site-pager-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71717a;
  font-weight: 600;
}
.site-pager .site-pager-title {
  font-size: 1.0rem;
  font-weight: 600;
  color: #fafafa;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-pager .site-pager-prev { text-align: left; }
.site-pager .site-pager-next { text-align: right; align-items: flex-end; }
.site-pager .site-pager-only-prev { grid-column: 1 / 2; }
.site-pager .site-pager-only-next { grid-column: 2 / 3; }
@media (max-width: 640px) {
  .site-pager { grid-template-columns: 1fr; gap: 0.65rem; }
  .site-pager .site-pager-only-prev,
  .site-pager .site-pager-only-next { grid-column: 1 / -1; }
  .site-pager .site-pager-next { text-align: left; align-items: flex-start; }
}

/* ───────── 文档首页底部：帮助信息 + 下一篇卡片同行对齐 ───────── */
.site-docs-tail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
  gap: 1.5rem 2rem;
  align-items: start;
  margin: 2.25rem 0 0.5rem;
}
.site-docs-tail .site-h2 { margin-top: 0; }
.site-docs-tail .site-pager {
  margin: 0;
  grid-template-columns: 1fr;
  align-self: stretch;
}
.site-docs-tail .site-pager > a {
  height: 100%;
  justify-content: center;
}
.site-docs-tail .site-pager .site-pager-only-next {
  grid-column: 1 / -1;
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .site-docs-tail {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .site-docs-tail .site-pager > a { height: auto; }
  .site-docs-tail .site-pager .site-pager-only-next {
    text-align: left;
    align-items: flex-start;
  }
}

/* ───────── OpenAPI 参考页 ───────── */
.api-hero {
  margin: 0 0 1.5rem;
  padding: 1.5rem 1.65rem 1.35rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.14) 0%, rgba(24, 24, 27, 0.72) 55%, rgba(24, 24, 27, 0.45) 100%);
}
.api-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.api-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid #3f3f46;
  background: rgba(39, 39, 42, 0.65);
  color: #d4d4d8;
}
.api-chip--v1 { border-color: rgba(56, 189, 248, 0.45); color: #7dd3fc; background: rgba(14, 165, 233, 0.12); }
.api-chip--pro { border-color: rgba(245, 158, 11, 0.5); color: #fde68a; background: rgba(245, 158, 11, 0.14); }
.api-chip--https { border-color: rgba(34, 197, 94, 0.45); color: #86efac; background: rgba(34, 197, 94, 0.1); }
.api-hero__title {
  margin: 0 0 0.55rem;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fafafa;
  line-height: 1.2;
}
.api-hero__lead {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #d4d4d8;
  max-width: 52rem;
}
.api-hero__entry {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  color: #a5f3fc;
  background: rgba(9, 9, 11, 0.55);
  border: 1px solid #27272a;
  border-radius: 0.45rem;
  padding: 0.45rem 0.65rem;
  word-break: break-all;
}
.api-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}
.api-meta-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 0.95rem;
  border-radius: 0.6rem;
  border: 1px solid #27272a;
  background: rgba(24, 24, 27, 0.55);
  font-size: 0.84rem;
  color: #e4e4e7;
}
.api-meta-card strong {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a1a1aa;
}
.api-meta-card span {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #f4f4f5;
  font-weight: 500;
  word-break: break-word;
}
.api-convention {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.65rem;
  border: 1px solid #27272a;
  background: rgba(24, 24, 27, 0.45);
  font-size: 0.9rem;
  color: #d4d4d8;
}
.api-convention strong { color: #fafafa; }
.api-convention ul { margin: 0.45rem 0 0 1.1rem; padding: 0; }
.api-convention li { margin: 0.25rem 0; line-height: 1.55; }
.api-module {
  margin: 0 0 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(39, 39, 42, 0.85);
}
.api-module:last-of-type { border-bottom: none; }
.api-scope {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.32);
  vertical-align: middle;
}
.api-scope-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}
.api-endpoint-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.65rem 0 1.15rem;
}
.api-endpoint-row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) minmax(6rem, max-content);
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid #27272a;
  background: rgba(24, 24, 27, 0.55);
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
}
.api-endpoint-row:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(24, 24, 27, 0.72);
}
.api-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  padding: 0.28rem 0.5rem;
  border-radius: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.2;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.api-method--get { color: #bbf7d0; background: #14532d; border-color: #166534; }
.api-method--post { color: #dbeafe; background: #1e3a8a; border-color: #1d4ed8; }
.api-method--put { color: #fef3c7; background: #78350f; border-color: #b45309; }
.api-method--patch { color: #ede9fe; background: #4c1d95; border-color: #6d28d9; }
.api-method--delete { color: #fecaca; background: #7f1d1d; border-color: #b91c1c; }
.api-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  color: #e4e4e7;
  background: rgba(9, 9, 11, 0.45);
  border: 1px solid #27272a;
  border-radius: 0.35rem;
  padding: 0.18rem 0.45rem;
  word-break: break-all;
  min-width: 0;
}
.api-desc {
  font-size: 0.84rem;
  color: #a1a1aa;
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}
.api-op {
  margin: 0 0 1.15rem;
  padding: 0.95rem 1.05rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid #27272a;
  background: rgba(18, 18, 20, 0.55);
}
.api-op__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(39, 39, 42, 0.85);
}
.api-op__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fafafa;
}
.api-op__label {
  margin: 0.75rem 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71717a;
}
.api-op__desc {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.875rem;
  color: #d4d4d8;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.api-op__desc code,
.api-note-list code,
.api-call-card code,
.api-call-row code {
  word-break: break-word;
  white-space: normal;
}
.api-note-list {
  margin: 0.5rem 0 0.85rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.api-note-list li {
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #27272a;
  background: rgba(24, 24, 27, 0.4);
  font-size: 0.84rem;
  line-height: 1.6;
  color: #d4d4d8;
  overflow-wrap: anywhere;
}
.api-call-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.65rem 0 0.85rem;
}
.api-call-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #27272a;
  background: rgba(24, 24, 27, 0.45);
  overflow-wrap: anywhere;
}
.api-call-arrow {
  color: #71717a;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.api-call-resp,
.api-call-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  color: #e4e4e7;
  background: rgba(9, 9, 11, 0.55);
  border: 1px solid #27272a;
  border-radius: 0.35rem;
  padding: 0.2rem 0.45rem;
  word-break: break-word;
  white-space: normal;
  min-width: 0;
  flex: 1 1 10rem;
}
.api-call-card {
  border: 1px solid #27272a;
  border-radius: 0.55rem;
  background: rgba(24, 24, 27, 0.42);
  padding: 0.65rem 0.8rem;
  margin: 0 0 0.5rem;
  overflow: hidden;
}
.api-call-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(39, 39, 42, 0.85);
}
.api-call-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.45rem 0.85rem;
}
.api-call-card__grid > div {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #d4d4d8;
  overflow-wrap: anywhere;
}
.api-call-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71717a;
  margin: 0 0 0.2rem;
}
.api-call-card__note {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: #a1a1aa;
}
.api-table-wrap {
  overflow-x: auto;
  margin: 0.65rem 0;
  border-radius: 0.65rem;
  border: 1px solid #27272a;
}
.api-table-wrap .site-table {
  margin: 0;
  border: none;
  border-radius: 0;
  min-width: 36rem;
}
.api-op .site-table code,
.api-module .site-table code,
.api-convention code {
  white-space: normal;
  word-break: break-word;
  display: inline;
  line-height: 1.5;
}
.api-resp {
  margin: 0.35rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid #27272a;
  background: #0c0c0f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #e4e4e7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-width: 100%;
}
.api-badge-req,
.api-badge-opt {
  display: inline-flex;
  padding: 0.1rem 0.38rem;
  border-radius: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.api-badge-req { color: #fca5a5; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.3); }
.api-badge-opt { color: #a1a1aa; background: rgba(82, 82, 91, 0.25); border: 1px solid rgba(82, 82, 91, 0.45); }
.api-toc-mini li.sub a {
  padding-left: 1.15rem;
  font-size: 0.8rem;
  color: #71717a;
}
.api-toc-mini li.sub a:hover { color: #fafafa; }
@media (max-width: 720px) {
  .api-endpoint-row {
    grid-template-columns: 4.25rem 1fr;
    gap: 0.35rem 0.65rem;
  }
  .api-desc {
    grid-column: 1 / -1;
    padding-left: 4.85rem;
  }
  .api-op__head { flex-direction: column; align-items: flex-start; }
  .api-call-card__grid { grid-template-columns: 1fr; }
}

/* ───────── 代码块（带 macOS 风格终端头）─────────
 * 与首页 landing.html 的"Terminal" demo 同款外观：
 *   - 外层卡片背景 + 1.85rem 高的红/黄/绿小圆点工具栏 + 右上角 data-lang 角标
 *   - 内层 <code> 是真正暗色代码区
 *   - 复制按钮改成纯图标（mask SVG），鼠标悬停 / 复制成功时换色 + 图标
 */
.site-pre {
  position: relative;
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 0.85rem;
  padding: 0;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 500;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  color: #e4e4e7;
  margin: 0.85rem 0;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
}
/* 顶栏：左侧三个圆点 + 中间 / 右侧 data-lang 文本（用伪元素绘制，不动 HTML） */
.site-pre::before {
  content: "";
  display: block;
  height: 1.95rem;
  background:
    radial-gradient(circle at 0.95rem center, #ef4444 0.32rem, transparent 0.34rem),
    radial-gradient(circle at 1.95rem center, #eab308 0.32rem, transparent 0.34rem),
    radial-gradient(circle at 2.95rem center, #22c55e 0.32rem, transparent 0.34rem),
    linear-gradient(180deg, rgba(39, 39, 42, 0.88), rgba(24, 24, 27, 0.78));
  border-bottom: 1px solid #27272a;
}
.site-pre::after {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #71717a;
  text-transform: lowercase;
  pointer-events: none;
}
/* 没标语言时回退成 "shell"，避免 ::after 显示空白 */
.site-pre:not([data-lang])::after { content: "shell"; }
.site-pre code {
  background: #0a0a0c;
  border: 0;
  padding: 1rem 3.2rem 1rem 1.15rem;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  display: block;
  white-space: pre;       /* 保留换行 + 缩进 —— 没有它整段会被压成一行 */
  word-break: normal;
  tab-size: 2;
  overflow-x: auto;
}
/* 复制按钮：图标-only，与首页 Terminal demo 上的复制按钮同造型 */
.site-copy {
  position: absolute;
  top: 0.32rem;
  right: 0.4rem;
  width: 1.85rem;
  height: 1.55rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;            /* 隐藏 "复制" / "已复制" 文字，只留图标 */
  line-height: 0;
  background: rgba(63, 63, 70, 0.35);
  border: 1px solid rgba(63, 63, 70, 0.6);
  color: #a1a1aa;
  border-radius: 0.4rem;
  cursor: pointer;
  user-select: none;       /* 全选代码时不要把"复制"两字也带进剪贴板 */
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
  z-index: 2;
}
.site-copy::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1C357.1 5.1 344.9 0 332.3 0H192c-35.3 0-64 28.7-64 64v256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64v256c0 35.3 28.7 64 64 64h192c35.3 0 64-28.7 64-64v-32h-48v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16h32v-48H64z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1C357.1 5.1 344.9 0 332.3 0H192c-35.3 0-64 28.7-64 64v256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64v256c0 35.3 28.7 64 64 64h192c35.3 0 64-28.7 64-64v-32h-48v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16h32v-48H64z'/%3E%3C/svg%3E") center / contain no-repeat;
  display: block;
}
.site-copy:hover {
  color: #fafafa;
  border-color: #52525b;
  background: rgba(63, 63, 70, 0.6);
}
.site-copy:active { transform: scale(0.94); }
.site-copy.ok {
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.16);
}
.site-copy.ok::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

/* ───────── 代码语法高亮（由 highlight.js 注入 span） ─────────
 * One-Dark 风格，照顾深色背景 #0c0c0f：
 *   kw 紫 / typ 青 / fn 蓝 / str 绿 / num 橙 / com 灰斜 / flag 橙 / var 红 / lit 橙
 */
.site-pre code .hl-kw   { color: #c678dd; }
.site-pre code .hl-typ  { color: #56b6c2; }
.site-pre code .hl-fn   { color: #61afef; }
.site-pre code .hl-str  { color: #98c379; }
.site-pre code .hl-num  { color: #d19a66; }
.site-pre code .hl-com  { color: #5c6370; font-style: italic; }
.site-pre code .hl-flag { color: #d19a66; }
.site-pre code .hl-var  { color: #e06c75; }
.site-pre code .hl-lit  { color: #d19a66; }

/* ───────── 徽章 ───────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(82, 82, 91, 0.35);
  color: #d4d4d8;
  border: 1px solid rgba(82, 82, 91, 0.6);
  letter-spacing: 0.02em;
  margin-left: 0.4rem;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-latest {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.22), rgba(20, 83, 45, 0.32));
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.45);
}
.badge-stable {
  background: rgba(14, 165, 233, 0.18);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.4);
}
.badge-beta {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.4);
}
.badge-old {
  background: rgba(82, 82, 91, 0.3);
  color: #a1a1aa;
  border-color: rgba(82, 82, 91, 0.5);
}
.badge-archived {
  background: rgba(82, 82, 91, 0.18);
  color: #71717a;
  border-color: rgba(82, 82, 91, 0.35);
}
.badge-pro {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.5);
}

/* ───────── 按钮 ───────── */
.site-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.site-btn-primary {
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  color: #fff;
  border-color: rgba(14, 165, 233, 0.6);
}
.site-btn-primary:hover { background: linear-gradient(180deg, #0284c7, #0369a1); }
.site-btn-ghost {
  background: transparent;
  color: #d4d4d8;
  border-color: #3f3f46;
}
.site-btn-ghost:hover { color: #fafafa; border-color: #52525b; background: rgba(63, 63, 70, 0.3); }

/* ───────── 信息提示（callout）─────────
 * 三类带图标的提示卡片，与首页 hero 区域 sky-500/10 + sky-500/30 玻璃徽章同源：
 *   - .site-note  蓝色信息 i
 *   - .site-tip   绿色灯泡（建议）
 *   - .site-warn  琥珀感叹号（警告）
 * 用 CSS 变量 --accent 在每种类型上切换图标 / 边框 / 文字色，
 * ::before 直接作为 mask 化的图标（带颜色填充）—— 不再用嵌套 box，造型干净。
 */
.site-note, .site-warn, .site-tip {
  --accent: #7dd3fc;
  --accent-soft: rgba(14, 165, 233, 0.14);
  --accent-soft-2: rgba(14, 165, 233, 0.04);
  --accent-border: rgba(56, 189, 248, 0.45);
  --accent-glow: rgba(56, 189, 248, 0.06);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  margin: 1.1rem 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #d4d4d8;
  border: 1px solid var(--accent-border);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft-2) 100%);
  box-shadow: 0 1px 0 var(--accent-glow) inset;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
/* 左侧 mask 化的图标，颜色 = --accent；与文字第一行对齐 */
.site-note::before,
.site-tip::before,
.site-warn::before {
  content: "";
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.18rem;     /* 视觉上和正文第一行 baseline 对齐 */
  background-color: var(--accent);
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}
/* 蓝：信息 / 提示 */
.site-note {
  --accent: #7dd3fc;
  --accent-soft:   rgba(14, 165, 233, 0.14);
  --accent-soft-2: rgba(14, 165, 233, 0.04);
  --accent-border: rgba(56, 189, 248, 0.45);
  --accent-glow:   rgba(56, 189, 248, 0.06);
}
.site-note::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
}
/* 绿：建议 / 小贴士 */
.site-tip {
  --accent: #6ee7b7;
  --accent-soft:   rgba(16, 185, 129, 0.14);
  --accent-soft-2: rgba(16, 185, 129, 0.04);
  --accent-border: rgba(52, 211, 153, 0.45);
  --accent-glow:   rgba(52, 211, 153, 0.06);
}
.site-tip::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2 5.2-7.1 10.4-14.2 15.4-21.4C360.5 242 384 198.7 384 144 384 64.5 319.5 0 240 0H192C112.5 0 48 64.5 48 144c0 54.7 23.5 98 47.4 132.4 5 7.2 10.2 14.3 15.4 21.4 19.7 27.1 39.6 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0-8.8 7.2-16 16-16 22.1 0 42.1 9 56.6 23.4 14.5 14.5 23.4 34.5 23.4 56.6 0 8.8-7.2 16-16 16s-16-7.2-16-16c0-13.3-5.4-25.3-14-34s-20.7-14-34-14c-8.8 0-16-7.2-16-16z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2 5.2-7.1 10.4-14.2 15.4-21.4C360.5 242 384 198.7 384 144 384 64.5 319.5 0 240 0H192C112.5 0 48 64.5 48 144c0 54.7 23.5 98 47.4 132.4 5 7.2 10.2 14.3 15.4 21.4 19.7 27.1 39.6 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0-8.8 7.2-16 16-16 22.1 0 42.1 9 56.6 23.4 14.5 14.5 23.4 34.5 23.4 56.6 0 8.8-7.2 16-16 16s-16-7.2-16-16c0-13.3-5.4-25.3-14-34s-20.7-14-34-14c-8.8 0-16-7.2-16-16z'/%3E%3C/svg%3E");
}
/* 琥珀：警告 */
.site-warn {
  --accent: #fcd34d;
  --accent-soft:   rgba(245, 158, 11, 0.14);
  --accent-soft-2: rgba(245, 158, 11, 0.04);
  --accent-border: rgba(251, 191, 36, 0.45);
  --accent-glow:   rgba(251, 191, 36, 0.06);
}
.site-warn::before {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
}
/* 文本节点的细节：strong 用纯白突出，code 在淡背景上加深底色 */
.site-note strong, .site-tip strong, .site-warn strong { color: #fafafa; font-weight: 600; }
.site-note code, .site-tip code, .site-warn code {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(0, 0, 0, 0.4);
}
.site-note a, .site-tip a, .site-warn a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.site-note a:hover, .site-tip a:hover, .site-warn a:hover { border-bottom-color: var(--accent); }

/* ───────── 链接列表（下载条目） ───────── */
.site-dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}
.site-dl a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.825rem;
  color: #d4d4d8;
  background: rgba(39, 39, 42, 0.55);
  border: 1px solid #3f3f46;
  border-radius: 0.45rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.site-dl a:hover { color: #fafafa; border-color: #52525b; background: rgba(63, 63, 70, 0.55); border-bottom-color: #52525b; }
.site-dl a.primary {
  color: #e0f2fe;
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(56, 189, 248, 0.5);
}
.site-dl a.primary:hover { color: #fff; background: rgba(14, 165, 233, 0.3); }

/* ───────── 表格 ─────────
 * 整张表当成一张圆角卡片：外边框 + overflow hidden 让圆角正确切到首尾行，
 * 表头用更深的 zinc 底 + 字号变小、letter-spacing 拉开，区分内容。
 * <code> 命令名走"青蓝胶囊"风（与首页 hero 区域 sky-500/10 + sky-500/30 同源），
 * 让 CLI 速查表第一眼就能看到命令本身，不再是浏览器默认的等宽小灰字。
 */
.site-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0.85rem 0;
  border: 1px solid #27272a;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(24, 24, 27, 0.45);
}
.site-table th,
.site-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #27272a;
  color: #d4d4d8;
}
.site-table th {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a1a1aa;
  background: linear-gradient(180deg, rgba(39, 39, 42, 0.85), rgba(39, 39, 42, 0.55));
}
.site-table tbody tr { transition: background 0.15s ease; }
.site-table tbody tr:hover { background: rgba(39, 39, 42, 0.32); }
.site-table tr:last-child td { border-bottom: 0; }
/* 命令名 / 字段名 <code>：高对比度青蓝胶囊，等宽，禁止被截断 */
.site-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  font-weight: 500;
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 0.18rem 0.5rem;
  border-radius: 0.4rem;
  white-space: nowrap;
}
/* 行内多个 <code> 之间留点缝（如"foxwaf import &lt;file&gt;"会被拆成两段） */
.site-table code + code { margin-left: 0.25rem; }

/* ───────── footer ───────── */
.site-footer {
  border-top: 1px solid #27272a;
  padding: 2rem 1.5rem;
  text-align: center;
  color: #71717a;
  font-size: 0.825rem;
}
.site-footer a { color: #a1a1aa; text-decoration: none; }
.site-footer a:hover { color: #fafafa; }

/* ───────── 杂项 ───────── */
.site-muted { color: #a1a1aa; }
.site-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.site-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.site-row.between { justify-content: space-between; }

.site-err {
  display: none;
  background: rgba(69, 10, 10, 0.55);
  border: 1px solid #7f1d1d;
  color: #fecaca;
  padding: 1rem;
  border-radius: 0.55rem;
  margin-bottom: 1rem;
}
.site-err.show { display: block; }

.site-skeleton {
  height: 8rem;
  background: linear-gradient(90deg, rgba(39, 39, 42, 0.3), rgba(63, 63, 70, 0.45), rgba(39, 39, 42, 0.3));
  background-size: 200% 100%;
  animation: site-shimmer 1.4s linear infinite;
  border-radius: 0.6rem;
  margin: 0 0 1rem;
}
@keyframes site-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ───────── theme switcher / light theme preview ───────── */
:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.72rem;
  height: 1.72rem;
  padding: 0;
  border: 1px solid rgba(82, 82, 91, 0.65);
  border-radius: 0.48rem;
  background: rgba(39, 39, 42, 0.45);
  color: #d4d4d8;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
}
.site-theme-toggle:hover {
  color: #fafafa;
  border-color: #52525b;
  background: rgba(63, 63, 70, 0.68);
}
.site-theme-toggle:active { transform: translateY(1px); }
.site-theme-toggle svg {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="light"] body.site-chrome,
html[data-theme="light"] body.bg-\[\#09090b\] {
  background: #f8fafc !important;
  color: #0f172a !important;
}
html[data-theme="light"] .site-nav {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: #e2e8f0 !important;
  box-shadow: 0 1px 18px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .site-brand,
html[data-theme="light"] .site-h1,
html[data-theme="light"] .site-h2,
html[data-theme="light"] .site-h3,
html[data-theme="light"] .site-card h3,
html[data-theme="light"] .site-pager .site-pager-title,
html[data-theme="light"] .site-not-found h1 {
  color: #0f172a !important;
}
html[data-theme="light"] .site-links a,
html[data-theme="light"] .site-cta,
html[data-theme="light"] .site-footer a,
html[data-theme="light"] .site-side a,
html[data-theme="light"] .site-crumb a {
  color: #475569 !important;
}
html[data-theme="light"] .site-links a:hover,
html[data-theme="light"] .site-cta:hover,
html[data-theme="light"] .site-footer a:hover,
html[data-theme="light"] .site-side a:hover,
html[data-theme="light"] .site-crumb a:hover {
  color: #0f172a !important;
}
html[data-theme="light"] .site-links a.site-hl {
  color: #0284c7 !important;
}
html[data-theme="light"] .site-links a.site-hl::after {
  background: #0284c7;
}
html[data-theme="light"] .site-theme-toggle {
  color: #334155;
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .site-theme-toggle:hover {
  color: #0369a1;
  background: #f8fafc;
  border-color: #94a3b8;
}
html[data-theme="light"] .site-main,
html[data-theme="light"] .site-main.docs {
  background: transparent;
}
html[data-theme="light"] .site-side {
  border-right-color: #e2e8f0;
}
html[data-theme="light"] .site-side a:hover {
  background: rgba(226, 232, 240, 0.75);
}
html[data-theme="light"] .site-side a.site-here {
  color: #0369a1 !important;
  background: #e0f2fe;
  box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.22);
}
html[data-theme="light"] .site-lead,
html[data-theme="light"] .site-muted,
html[data-theme="light"] .site-card p,
html[data-theme="light"] .site-card li,
html[data-theme="light"] .site-footer {
  color: #475569 !important;
}
html[data-theme="light"] .site-crumb,
html[data-theme="light"] .site-side h3,
html[data-theme="light"] .site-pager .site-pager-label,
html[data-theme="light"] .release-section-h {
  color: #64748b !important;
}
html[data-theme="light"] .site-crumb .sep {
  color: #cbd5e1 !important;
}
html[data-theme="light"] .site-card {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .site-card.hoverable:hover {
  background: #ffffff !important;
  border-color: rgba(2, 132, 199, 0.36) !important;
}
html[data-theme="light"] .site-card h2,
html[data-theme="light"] .site-card a,
html[data-theme="light"] .site-table code,
html[data-theme="light"] .site-lead a {
  color: #0284c7 !important;
}
html[data-theme="light"] .site-card code,
html[data-theme="light"] .site-not-found .site-not-found-path {
  color: #0f172a;
  background: #f1f5f9;
  border-color: #cbd5e1;
}
html[data-theme="light"] .site-pager > a,
html[data-theme="light"] .site-table,
html[data-theme="light"] .site-pre {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .site-pre::before {
  background:
    radial-gradient(circle at 0.95rem center, #ef4444 0.32rem, transparent 0.34rem),
    radial-gradient(circle at 1.95rem center, #eab308 0.32rem, transparent 0.34rem),
    radial-gradient(circle at 2.95rem center, #22c55e 0.32rem, transparent 0.34rem),
    linear-gradient(180deg, #f8fafc, #eef2f7);
  border-bottom-color: #e2e8f0;
}
html[data-theme="light"] .site-pre code {
  color: #0f172a;
  background: #f8fafc;
}
html[data-theme="light"] .site-copy {
  color: #475569;
  background: #ffffff;
  border-color: #cbd5e1;
}
html[data-theme="light"] .site-table th,
html[data-theme="light"] .site-table td {
  color: #334155;
  border-bottom-color: #e2e8f0;
}
html[data-theme="light"] .site-table th {
  color: #475569;
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
}
html[data-theme="light"] .site-table tbody tr:hover {
  background: #f8fafc;
}
html[data-theme="light"] .site-footer {
  border-top-color: #e2e8f0;
}
html[data-theme="light"] .site-dl a,
html[data-theme="light"] .site-btn-ghost {
  color: #334155 !important;
  background: #ffffff;
  border-color: #cbd5e1;
}
html[data-theme="light"] .site-dl a:hover,
html[data-theme="light"] .site-btn-ghost:hover {
  color: #0f172a !important;
  background: #f8fafc;
}
html[data-theme="light"] .site-note,
html[data-theme="light"] .site-tip,
html[data-theme="light"] .site-warn {
  color: #334155;
}
html[data-theme="light"] .site-note strong,
html[data-theme="light"] .site-tip strong,
html[data-theme="light"] .site-warn strong {
  color: #0f172a;
}
html[data-theme="light"] .site-note code,
html[data-theme="light"] .site-tip code,
html[data-theme="light"] .site-warn code {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(148, 163, 184, 0.45);
}
html[data-theme="light"] .release-icon {
  color: #64748b !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .release-icon:hover {
  color: #0284c7 !important;
  background: #f8fafc !important;
}
html[data-theme="light"] .release-feat {
  color: #1e293b !important;
}
html[data-theme="light"] .release-detail,
html[data-theme="light"] .release-anchor {
  color: #475569 !important;
}
html[data-theme="light"] .site-skeleton {
  background: linear-gradient(90deg, #eef2f7, #e2e8f0, #eef2f7);
  background-size: 200% 100%;
}
html[data-theme="light"] .api-hero {
  border-color: rgba(2, 132, 199, 0.28);
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.9) 0%, #ffffff 60%, #f8fafc 100%);
}
html[data-theme="light"] .api-hero__title { color: #0f172a !important; }
html[data-theme="light"] .api-hero__lead { color: #475569; }
html[data-theme="light"] .api-hero__entry {
  color: #0369a1;
  background: #f8fafc;
  border-color: #e2e8f0;
}
html[data-theme="light"] .api-meta-card {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .api-meta-card strong {
  color: #64748b;
}
html[data-theme="light"] .api-meta-card span {
  color: #0f172a;
  font-weight: 600;
}
html[data-theme="light"] .api-convention,
html[data-theme="light"] .api-endpoint-row,
html[data-theme="light"] .api-op {
  background: #ffffff;
  border-color: #e2e8f0;
}
html[data-theme="light"] .api-convention {
  color: #334155;
}
html[data-theme="light"] .api-endpoint-row:hover {
  border-color: rgba(2, 132, 199, 0.35);
  background: #f8fafc;
}
html[data-theme="light"] .api-path {
  color: #0f172a;
  background: #f1f5f9;
  border-color: #e2e8f0;
}
html[data-theme="light"] .api-desc,
html[data-theme="light"] .api-op__desc { color: #64748b; }
html[data-theme="light"] .api-op__title { color: #0f172a !important; }
html[data-theme="light"] .api-resp {
  color: #0f172a;
  background: #f8fafc;
  border-color: #e2e8f0;
}
html[data-theme="light"] .api-convention strong { color: #0f172a; }
html[data-theme="light"] .api-module { border-bottom-color: #e2e8f0; }
html[data-theme="light"] .api-method--get { color: #14532d; background: #dcfce7; border-color: #86efac; }
html[data-theme="light"] .api-method--post { color: #1e3a8a; background: #dbeafe; border-color: #93c5fd; }
html[data-theme="light"] .api-method--put { color: #78350f; background: #fef3c7; border-color: #fcd34d; }
html[data-theme="light"] .api-method--patch { color: #4c1d95; background: #ede9fe; border-color: #c4b5fd; }
html[data-theme="light"] .api-method--delete { color: #7f1d1d; background: #fee2e2; border-color: #fca5a5; }
html[data-theme="light"] .api-note-list li,
html[data-theme="light"] .api-call-row,
html[data-theme="light"] .api-call-card {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}
html[data-theme="light"] .api-call-resp,
html[data-theme="light"] .api-call-body {
  color: #0f172a;
  background: #ffffff;
  border-color: #e2e8f0;
}
html[data-theme="light"] .api-call-card__note,
html[data-theme="light"] .api-call-label { color: #64748b; }
html[data-theme="light"] .api-table-wrap { border-color: #e2e8f0; }

/* landing.html Tailwind utility overrides for the first light-theme preview */
html[data-theme="light"] .bg-\[\#09090b\],
html[data-theme="light"] .bg-zinc-950,
html[data-theme="light"] .bg-zinc-900 {
  background-color: #f8fafc !important;
}
html[data-theme="light"] .bg-\[\#09090b\]\/90,
html[data-theme="light"] .bg-zinc-900\/80 {
  background-color: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="light"] .bg-zinc-900\/50,
html[data-theme="light"] .bg-zinc-900\/40,
html[data-theme="light"] .bg-zinc-900\/30,
html[data-theme="light"] .bg-zinc-800\/50,
html[data-theme="light"] .bg-zinc-800\/30 {
  background-color: rgba(255, 255, 255, 0.82) !important;
}
html[data-theme="light"] .bg-zinc-800 {
  background-color: #eef2f7 !important;
}
html[data-theme="light"] .border-zinc-800,
html[data-theme="light"] .border-zinc-700,
html[data-theme="light"] .border-zinc-600 {
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-zinc-200,
html[data-theme="light"] .text-zinc-300,
html[data-theme="light"] [style*="color:#fafafa"],
html[data-theme="light"] [style*="color: #fafafa"] {
  color: #0f172a !important;
}
html[data-theme="light"] .text-zinc-400,
html[data-theme="light"] [style*="color:#a1a1aa"],
html[data-theme="light"] [style*="color: #a1a1aa"] {
  color: #475569 !important;
}
html[data-theme="light"] .text-zinc-500,
html[data-theme="light"] .text-zinc-600,
html[data-theme="light"] .text-zinc-700,
html[data-theme="light"] [style*="color:#71717a"],
html[data-theme="light"] [style*="color: #71717a"] {
  color: #64748b !important;
}
html[data-theme="light"] [style*="color:#3f3f46"],
html[data-theme="light"] [style*="color: #3f3f46"] {
  color: #cbd5e1 !important;
}
html[data-theme="light"] .shadow-2xl,
html[data-theme="light"] .toc-float,
html[data-theme="light"] .release-card {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] #toc-rail .toc-float,
html[data-theme="light"] .release-card {
  background: rgba(255, 255, 255, 0.86) !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .release-card:hover {
  border-color: rgba(2, 132, 199, 0.38) !important;
}
html[data-theme="light"] footer.border-zinc-800,
html[data-theme="light"] section.border-zinc-800,
html[data-theme="light"] nav.border-zinc-800\/90 {
  border-color: #e2e8f0 !important;
}