/* ==========================================================================
   主题变量 —— 配色复刻 WaLiOffice
   色值来源（非臆测）：
     · WaLiOffice/frontend/tailwind.config.ts —— primary（蓝 50-900）/ accent（琥珀 500-600）
       / surface（zinc 50-950）三组色板
     · WaLiOffice/frontend/src/styles/globals.css —— 卡片白底 + surface-200 描边、
       主按钮 bg-primary-600 实底 + hover primary-700、输入框 focus primary-500 + ring primary-100、
       正文 text-surface-900、6px 细滚动条
     · WaLiOffice AppLayout / ConversationSidebar —— 暖白象牙画布（135° #f7f2e8→#f3f1eb→#ece7dc
       + 两束径向高光）、磨砂白胶囊、近黑强调胶囊（bg-ink text-pane）
     · 产品侧 moe_oval globals.css（同源 token + owner 2026-09-22 决策：暖米壳层 / 暖灰 line /
       深色分层 VS Code Dark+ × One Dark、反色胶囊 bg-ink）

   搭配原则（这是「配色」而不是「全站一个颜色」）：
     结构用 zinc（文字/边框/弱化）· 画布用暖白象牙 · 交互用蓝（primary）·
     暖色点缀用琥珀（accent：徽标/角标）· 强强调用近黑反色胶囊（导航激活/品牌标）·
     语义色 red/amber/emerald 只用于状态

   切换优先级：手动选择（<html data-theme>）> 系统偏好（prefers-color-scheme）
   ========================================================================== */

:root {
  /* --- 画布：上游 AppLayout 背景（两束径向高光 + 135° 暖白渐变） --- */
  --canvas:
    radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.92), transparent 32%),
    radial-gradient(circle at 78% 8%, rgba(226, 232, 240, 0.72), transparent 30%),
    linear-gradient(135deg, #f7f2e8 0%, #f3f1eb 45%, #ece7dc 100%);
  --bg: #f6f4ef;          /* 壳层底（产品 pane 246 244 239） */
  --bg-soft: #ece7db;     /* 渐变深端（产品 pane-deep 236 231 220） */
  --surface: #ffffff;     /* 卡片/浮层（产品 card） */
  --surface-2: #faf9f6;   /* 卡片 hover / 浅填充（产品 card-hover） */

  /* --- 结构与文字：上游 surface（zinc） --- */
  --border: #e4e4e7;         /* surface-200：卡片/输入框默认描边（上游 globals 全局边框色） */
  --border-strong: #cdc3b2;  /* 产品 line：暖灰强描边，与暖米画布同色系 */
  --text: #18181b;           /* surface-900：正文（上游 body text） */
  --text-strong: #09090b;    /* surface-950：标题/大数字 */
  --text-soft: #52525b;      /* surface-600：次级正文 */
  --text-dim: #52525b;       /* surface-600：卡片说明/导航默认（上游次级正文主用色） */
  --text-mute: #71717a;      /* surface-500：元信息（标签/注脚） */

  /* --- 交互主色：上游 primary（蓝） --- */
  --accent: #0070c5;         /* primary-600：主按钮实底（上游 .btn-primary） */
  --accent-hover: #01589f;   /* primary-700：hover（上游 .btn-primary:hover） */
  --accent-text: #01589f;    /* primary-700：链接/激活文字（上游 text-primary-700） */
  --accent-soft: #f0f7ff;    /* primary-50：选中/浅底（上游 bg-primary-50） */
  --focus-ring: #e0effe;     /* primary-100：聚焦环（上游 input focus ring） */

  /* --- 暖色点缀：上游 accent（琥珀） --- */
  --accent-2: #f59e0b;       /* accent-500 */
  --badge-bg: #fffbeb;       /* amber-50 */
  --badge-fg: #b45309;       /* amber-700 */
  --badge-border: #fde68a;   /* amber-200 */

  /* --- 中性胶囊（标签） --- */
  --chip-bg: #f4f4f5;        /* surface-100 */
  --chip-fg: #3f3f46;        /* surface-700 */
  --chip-border: #e4e4e7;    /* surface-200 */

  /* --- 反色胶囊：导航激活 / 品牌标（上游 bg-ink text-pane） --- */
  --pill-bg: #18181b;
  --pill-fg: #f6f4ef;

  /* --- 语义色 --- */
  --danger: #dc2626;         /* red-600 */
  --warn: #d97706;           /* amber-600 */

  /* --- 暖白面板（CTA 带 / 公告卡 / 跨平台卡）：上游侧栏暖白渐变 --- */
  --band-bg: linear-gradient(135deg, #fbf8f1 0%, #f4efe6 100%);
  --band-border: #e6e0d3;

  --header-bg: rgba(255, 255, 255, 0.72);  /* 磨砂白（上游 bg-white/55 胶囊） */
  --code-text: #27272a;                    /* surface-800 */
  --scroll-thumb: #d4d4d8;                 /* surface-300（上游滚动条） */
  --scroll-thumb-hover: #a1a1aa;           /* surface-400 */

  /* --- 阴影：中性 zinc-900 透明（上游 shadow-sm / 0_8px_28px_rgba(24,24,27)） --- */
  --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.06);
  --shadow: 0 1px 3px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-lg: 0 10px 30px rgba(24, 24, 27, 0.10);

  --control-h: 38px;   /* 控件统一高度：按钮 / 下拉 / 输入（2026-10-13 视觉统一） */
  --radius: 12px;      /* 上游 rounded-xl：卡片 */
  --radius-sm: 8px;    /* 上游 rounded-lg：按钮/输入框 */
  --radius-lg: 16px;   /* 上游 rounded-2xl：大面板 */
  --maxw: 1120px;
  /* 全局字体：Static 随站分发（public/fonts/），中文与缺字由系统字体回退 */
  --font: static, Arial, "Microsoft YaHei", 黑体, 宋体, sans-serif;
}

/* 随站分发的展示字体（原 skyline webfont kit：static / static_bold）。
   仅拉丁字形，中文由 --font 回退栈承担；font-display: swap 避免首屏阻塞。 */
@font-face {
  font-family: static;
  src: url('/fonts/static-webfont.woff2') format('woff2'),
       url('/fonts/static-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: static;
  src: url('/fonts/static_bold-webfont.woff2') format('woff2'),
       url('/fonts/static_bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- 深色：用户显式选择（分层沿用产品 dark：底最深 → 面板 → 卡片最亮，边框半透明白） --- */
:root[data-theme="dark"] {
  --canvas:
    radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.05), transparent 34%),
    linear-gradient(135deg, #232326 0%, #1e1e1e 45%, #181818 100%);
  --bg: #1e1e1e;          /* 产品 dark pane */
  --bg-soft: #181818;     /* 产品 dark pane-deep */
  --surface: #252526;     /* 产品 dark card */
  --surface-2: #2d2d30;   /* 产品 dark card-hover */

  --border: #2f2f33;         /* 半透明白描边的等效实色 */
  --border-strong: #3f3f46;  /* zinc-700 */
  --text: #e4e4e7;           /* zinc-200（产品 dark ink） */
  --text-strong: #fafafa;    /* zinc-50 */
  --text-soft: #a1a1aa;      /* zinc-400（产品 dark ink-soft） */
  --text-dim: #a1a1aa;       /* zinc-400：深色下次级正文提亮 */
  --text-mute: #71717a;      /* zinc-500（产品 dark ink-mute）：元信息 */

  --accent: #0070c5;         /* 实底按钮保持品牌蓝（白字对比达标） */
  --accent-hover: #0c8fe7;   /* primary-500：深色下 hover 提亮 */
  --accent-text: #7cc6fb;    /* primary-300：深底上的链接文字 */
  --accent-soft: rgba(12, 143, 231, 0.16);
  --focus-ring: rgba(55, 148, 255, 0.35);   /* 产品 dark accent 3794ff */

  --accent-2: #fbbf24;       /* amber-400：深色下提亮 */
  --badge-bg: rgba(245, 158, 11, 0.14);
  --badge-fg: #fcd34d;       /* amber-300 */
  --badge-border: rgba(245, 158, 11, 0.35);

  --chip-bg: #27272a;        /* surface-800 */
  --chip-fg: #d4d4d8;        /* surface-300 */
  --chip-border: #3f3f46;    /* surface-700 */

  --pill-bg: #e4e4e7;        /* 深色下反色胶囊：产品 bg-ink = zinc-200 */
  --pill-fg: #18181b;

  --danger: #f87171;         /* red-400 */
  --warn: #fbbf24;           /* amber-400 */

  --band-bg: linear-gradient(135deg, #242424 0%, #1b1b1b 100%);
  --band-border: #2f2f33;

  --header-bg: rgba(24, 24, 24, 0.72);
  --code-text: #d4d4d8;      /* surface-300 */
  --scroll-thumb: #3f3f46;   /* surface-700 */
  --scroll-thumb-hover: #52525b;  /* surface-600 */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* --- 深色：未显式选择时跟随系统（含 JS 未执行的兜底） --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --canvas:
      radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.05), transparent 34%),
      linear-gradient(135deg, #232326 0%, #1e1e1e 45%, #181818 100%);
    --bg: #1e1e1e;
    --bg-soft: #181818;
    --surface: #252526;
    --surface-2: #2d2d30;
    --border: #2f2f33;
    --border-strong: #3f3f46;
    --text: #e4e4e7;
    --text-strong: #fafafa;
    --text-soft: #a1a1aa;
    --text-dim: #a1a1aa;
    --text-mute: #71717a;
    --accent: #0070c5;
    --accent-hover: #0c8fe7;
    --accent-text: #7cc6fb;
    --accent-soft: rgba(12, 143, 231, 0.16);
    --focus-ring: rgba(55, 148, 255, 0.35);
    --accent-2: #fbbf24;
    --badge-bg: rgba(245, 158, 11, 0.14);
    --badge-fg: #fcd34d;
    --badge-border: rgba(245, 158, 11, 0.35);
    --chip-bg: #27272a;
    --chip-fg: #d4d4d8;
    --chip-border: #3f3f46;
    --pill-bg: #e4e4e7;
    --pill-fg: #18181b;
    --danger: #f87171;
    --warn: #fbbf24;
    --band-bg: linear-gradient(135deg, #242424 0%, #1b1b1b 100%);
    --band-border: #2f2f33;
    --header-bg: rgba(24, 24, 24, 0.72);
    --code-text: #d4d4d8;
    --scroll-thumb: #3f3f46;
    --scroll-thumb-hover: #52525b;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--canvas);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: var(--surface-2); padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em;
  color: var(--code-text);
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.site-main { flex: 1 0 auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}
/* 无 backdrop-filter 的引擎（旧 Safari 等）：顶栏改用不透明底色，保证可读 */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .site-header { background: var(--bg); }
}
.nav { display: flex; align-items: center; gap: 18px; height: 64px; }
/* 导航面板：宽屏就是原本那一行；≤900px 收进汉堡按钮展开的下拉（见 Responsive 段） */
.nav-panel { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h); margin-left: auto; padding: 0;
  border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle[aria-expanded="true"] { background: var(--chip-bg); color: var(--text-strong); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand-logo {
  width: 30px; height: 30px; display: block; object-fit: contain;
  background: none; box-shadow: none;
}
/* 品牌字标：与工作台登录页标题同字体（Chalkboard；非 mac 平台回退到手写风格栈） */
.brand-name { font-family: Chalkboard, "Chalkboard SE", "Segoe Print", "Comic Sans MS", cursive; font-size: 19px; letter-spacing: .3px; }
.nav-links { display: flex; gap: 4px; margin-left: 12px; flex-wrap: wrap; }
.nav-link {
  color: var(--text-dim); padding: 8px 12px; border-radius: 9px; font-size: 14px;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav-link.active { color: var(--pill-fg); background: var(--pill-bg); font-weight: 600; box-shadow: var(--shadow-xs); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- 主题（三档下拉）/ 语言选择 ---------- */
.theme-select,
.lang-select {
  height: var(--control-h); padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
  font-size: 13px; font-family: inherit; max-width: 140px;
}
.theme-select:focus,
.lang-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--control-h); padding: 0 18px; border-radius: var(--radius-sm); font-weight: 600;
  font-size: 14px; cursor: pointer; border: 1px solid transparent; transition: .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--accent);          /* 上游 .btn-primary：bg-primary-600 实底，无渐变 */
  color: #fff;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {                        /* 上游 .btn-secondary：白底 + surface-200 描边 */
  background: var(--surface); color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { display: flex; width: 100%; text-align: center; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 56px; }
.hero-inner { text-align: center; max-width: 820px; margin: 0 auto; }
.hero-eyebrow {
  text-transform: uppercase; letter-spacing: 3px; font-size: 13px;
  color: var(--accent-text); margin: 0 0 12px; font-weight: 600;
}
.hero-title {
  font-size: 44px; line-height: 1.15; margin: 0 0 18px; font-weight: 800;
  color: var(--text-strong);
}
.hero-title .grad { color: var(--accent); }
.hero-sub { color: var(--text-dim); font-size: 18px; margin: 0 auto 28px; max-width: 680px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 18px; margin: 44px auto 0; max-width: 880px;
}
.stat { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.stat-num { font-size: 34px; font-weight: 800; color: var(--text-strong); }
.stat-label { color: var(--text-mute); font-size: 13px; }

/* ---------- Sections ---------- */
.section-title { text-align: center; font-size: 28px; margin: 48px 0 24px; color: var(--text-strong); }
.section-lead { text-align: center; color: var(--text-dim); max-width: 720px; margin: -12px auto 26px; }
.features { padding: 20px 20px 10px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.feature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; color: var(--text); transition: .18s; display: block;
  box-shadow: var(--shadow);
}
.feature-card:hover {
  transform: translateY(-2px); border-color: var(--border-strong);
  box-shadow: var(--shadow-lg); text-decoration: none;
}
.feature-icon { font-size: 30px; margin-bottom: 10px; }
.feature-card h3 { margin: 0 0 8px; font-size: 17px; }
.feature-card p, .feature-card .feature-desc { margin: 0; color: var(--text-dim); font-size: 14px; }
/* 首页卡片描述里的顿号列举 → ul/li（2026-10-15） */
.feature-desc ul { margin: 6px 0; padding-left: 18px; }
.feature-desc ul:first-child { margin-top: 0; }
.feature-desc ul:last-child { margin-bottom: 0; }
.feature-desc li { margin: 3px 0; }
[dir="rtl"] .feature-desc ul { padding-left: 0; padding-right: 18px; }

/* 架构图（首页「架构与构件」）：mermaid 渲染的 SVG，卡片式容器；.arch-diagram 为其降级 ASCII 版 */
.arch-figure {
  margin: 0 0 26px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow-x: auto;
}
.arch-svg { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.arch-svg svg { max-width: 100%; height: auto; }
.arch-svg .arch-diagram { width: 100%; margin: 0; border: 0; box-shadow: none; background: transparent; }

/* 架构图降级：等宽文本块（CDN 不可达/渲染失败时由 diagram.js 呈现） */
.arch-diagram {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin: 0 0 26px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.75; color: var(--text-soft);
  box-shadow: var(--shadow);
}

.cta-band {
  text-align: center; margin: 56px auto; padding: 40px; border-radius: var(--radius-lg);
  background: var(--band-bg);
  border: 1px solid var(--band-border);
}
.cta-band h2 { margin: 0 0 8px; color: var(--text-strong); }
.cta-band p { color: var(--text-dim); margin: 0 0 20px; }

/* ---------- Docs (help/faq/download) ---------- */
.doc { max-width: 860px; margin: 0 auto; padding: 48px 20px 64px; }
.doc-title { font-size: 34px; margin: 0 0 10px; color: var(--text-strong); }
.doc-lead { color: var(--text-dim); font-size: 18px; margin: 0 0 28px; }
.doc h2 { margin-top: 34px; font-size: 21px; color: var(--text-strong); }
.doc h3 { margin: 0 0 6px; font-size: 16px; }
.doc p { color: var(--text-soft); }
.doc ul { padding-left: 22px; color: var(--text-dim); }
.doc li { margin: 6px 0; }
/* 嵌入式开发六项（/desktop s4）：名称加重、条目间距放宽 */
.doc ul.hw-list { margin: 12px 0 0; }
.doc ul.hw-list li { margin: 10px 0; }
.doc ul.hw-list li strong { color: var(--text-strong); }
/* ---------- 帮助文档（/help，文档站布局：左目录 + 中正文，双面板独立滚动；2026-10-16 v3） ---------- */
/* help 页独占视口：目录/正文各自滚动；隐藏全局页脚避免双重滚动条（窄屏恢复，见底部媒体查询） */
html[data-title-key="nav.help"] .site-footer { display: none; }
/* 磨砂条放在「各自的面板之内」：sticky 元素与滚动内容同处一个滚动容器，
   是各引擎（含 Safari）都稳定支持的模糊形态；顶栏跨滚动容器取样不可靠，
   因此 /help 桌面形态下顶栏自身不画磨砂，只保留描边与前景内容。
   磨砂条是面板的第一个流内元素：高 64px + 18/30px 底边距 = 原 82/94px 的顶部让位
   （面板/正文原有的 padding-top 相应清零）；sticky top:0 使其滚动时钉在面板顶。 */
@media (min-width: 961px) {
  html[data-title-key="nav.help"] .site-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-title-key="nav.help"] .help-side { padding-top: 0; }
  html[data-title-key="nav.help"] .help-article { padding-top: 0; }
  html[data-title-key="nav.help"] .help-side::before {
    content: ''; position: sticky; top: 0; z-index: 6; display: block;
    height: 64px; margin: 0 -14px 18px; /* 横向出血到面板边缘（14 = .help-side 横向内边距） */
    pointer-events: none;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  html[data-title-key="nav.help"] .help-main::before {
    content: ''; position: sticky; top: 0; z-index: 6; display: block;
    height: 64px; margin: 0 0 30px;
    pointer-events: none;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}
.help-shell {
  display: flex; height: 100vh; min-height: 420px;
  margin-top: -64px; /* 顶到视口顶部：面板内容从顶栏下穿过，由面板内磨砂条模糊 */
}
.help-side {
  flex: 0 0 300px; min-height: 0; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain;
  border-inline-end: 1px solid var(--border);
  padding: 82px 14px 40px; /* 64（顶栏）+ 18 */
}
.help-side-head { padding: 0 4px 12px; }
.help-side-title { margin: 0 0 6px; font-size: 17px; color: var(--text-strong); }
.help-side-lead {
  margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.help-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 0 2px; }
.help-toolbar .help-tbtn { height: 30px; padding: 0 11px; font-size: 12.5px; }
#helpExpandAll { margin-inline-start: auto; }
.help-search {
  flex: 1 1 100%; min-width: 0; padding: 7px 11px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.help-search:focus { outline: 2px solid var(--accent-soft, #bae0fd); outline-offset: 1px; }
.help-search-count { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.help-tree { font-size: 13.5px; }
.help-node .help-head {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit;
  text-align: start; color: inherit;
}
.lv-ch-head { padding: 11px 2px 8px; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.lv-sec-head { padding: 7px 2px; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.help-head:hover .help-title-txt { text-decoration: underline; text-underline-offset: 3px; }
.help-tgl { flex: none; width: 12px; height: 12px; position: relative; top: 1px; }
.help-tgl::before, .help-tgl::after { content: ''; position: absolute; background: var(--text-dim); border-radius: 1px; }
.help-tgl::before { inset-inline-start: 0; top: 5px; width: 12px; height: 2px; }
.help-tgl::after { inset-inline-start: 5px; top: 0; width: 2px; height: 12px; transition: transform .15s ease; }
.help-head.open .help-tgl::after { transform: scaleY(0); }
.help-children { padding-inline-start: 16px; }
.help-node.lv-ch { border-top: 1px solid var(--border); }
.help-tree > .help-node.lv-ch:first-child { border-top: none; }
.help-top-link {
  display: block; width: 100%; padding: 6px 8px; margin: 1px 0;
  background: none; border: 0; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-dim); text-align: start;
}
.help-top-link:hover { color: var(--text); background: var(--surface-2); }
.help-top-link.active { color: var(--text-strong); background: var(--surface-2); font-weight: 600; }

/* 正文面板：独立滚动；正文列宽按屏幕加档 */
.help-main { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.help-article { max-width: 880px; margin: 0 auto; padding: 94px 36px 80px; } /* 64（顶栏）+ 30 */
@media (min-width: 1280px) { .help-article { max-width: 960px; } }
@media (min-width: 1536px) {
  .help-side { flex-basis: 320px; }
  .help-article { max-width: 1080px; }
}
@media (min-width: 1920px) { .help-article { max-width: 1200px; } }
.help-crumb { display: flex; align-items: center; gap: 8px; color: var(--text-mute); font-size: 12.5px; margin: 0 0 8px; }
.help-crumb-sep { color: var(--text-mute); }
.help-art-head { display: flex; align-items: center; gap: 10px; }
.help-art-title { margin: 0 0 6px; font-size: 26px; color: var(--text-strong); }
.help-art-head .help-permalink { opacity: .55; width: 28px; height: 28px; }
.help-art-head .help-permalink:hover { opacity: 1; }
.help-permalink {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 6px; background: none;
  color: var(--text-mute); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.help-permalink:hover { color: var(--text-strong); background: var(--surface-2); }
.help-permalink.done { color: #16a34a; opacity: 1; }
.help-blocks { color: var(--text-soft); font-size: 15px; }
.help-blocks.help-blocks-flat { margin: 14px 0 0; padding: 0; border: 0; }
.help-blocks p { margin: 10px 0; }
.help-blocks ul { margin: 10px 0; padding-inline-start: 22px; color: var(--text-dim); }
.help-blocks li { margin: 6px 0; }
.help-code {
  background: var(--surface-2); border-radius: 8px; padding: 10px 12px;
  overflow-x: auto; font-size: 12.5px; margin: 0;
}
.help-code-wrap { position: relative; margin: 12px 0; }
.help-code-wrap .help-copy {
  position: absolute; top: 6px; inset-inline-end: 8px;
  padding: 3px 9px; font-size: 11.5px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-dim); cursor: pointer;
  opacity: .75; transition: opacity .15s, color .15s;
}
.help-code-wrap .help-copy:hover { opacity: 1; color: var(--text); }
.help-code-wrap .help-copy.done { color: #16a34a; border-color: #16a34a55; opacity: 1; }
.help-note {
  background: var(--surface-2); border-inline-start: 3px solid var(--accent-500, #f59e0b);
  padding: 7px 12px; border-radius: 6px; color: var(--text-dim); font-size: 13.5px;
}
.help-pager {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border);
}
.help-nav {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  height: auto; min-height: 42px; padding: 9px 14px; font-size: 13px; max-width: 46%;
}
.help-nav-next { align-items: flex-end; text-align: end; }
.help-nav-title { color: var(--text-dim); font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 窄屏：目录在上（独立滚动盒）、正文在下，恢复整页滚动与页脚 */
@media (max-width: 960px) {
  html[data-title-key="nav.help"] .site-footer { display: block; }
  .help-shell { display: block; height: auto; margin-top: 0; }
  .help-side { max-height: 46vh; border-inline-end: 0; border-bottom: 1px solid var(--border); padding: 18px 14px 24px; }
  .help-main { overflow: visible; }
  .help-article { padding: 20px 18px 60px; }
}
.faq-item {
  border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin: 14px 0;
  background: var(--surface); box-shadow: var(--shadow);
}
.faq-item h3 { margin: 0 0 6px; }
.faq-item p { margin: 0; color: var(--text-dim); }
.doc-note { color: var(--text-mute); margin-top: 26px; font-size: 14px; }

/* spark1 下载页提示（同一份 /download，仅 SITE_ID=spark1 时渲染） */
.doc p.dl-notice {
  margin: 22px 0 0; padding: 13px 16px;
  background: var(--badge-bg); border: 1px solid var(--badge-border);
  border-radius: var(--radius); color: var(--badge-fg);
  font-size: 14px; line-height: 1.8;
}
.doc p.dl-notice code {
  background: rgba(255, 255, 255, .55); color: inherit;
  border-radius: 5px; padding: 1px 6px; word-break: break-all;
  direction: ltr; unicode-bidi: isolate;
}
:root[data-theme="dark"] .doc p.dl-notice code { background: rgba(0, 0, 0, .28); }

.download-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.download-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.download-card .feature-icon { font-size: 40px; }
/* 图标字体（Font Awesome <i class="fa-brands fa-...">）按块级图标排版，与 emoji 图标对齐 */
.download-card i.feature-icon {
  display: block; font-style: normal; line-height: 1;
  font-size: 40px; margin-bottom: 10px; color: var(--text);
}
.download-card h3 { margin: 10px 0 4px; }
.download-card p { color: var(--text-dim); margin: 0 0 18px; font-size: 14px; }
.download-card .btn { margin-top: auto; }
.dl-arch {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--badge-bg); border: 1px solid var(--badge-border);
  color: var(--badge-fg); margin-bottom: 12px;
}
.dl-sub { font-size: 13px; color: var(--text-mute); margin-top: 10px; }

/* ---------- 下载页：运行形态横向 Tabs（2026-10-28） ---------- */
/* 四种形态（桌面端 / moe-coding / 服务器端 / 独立运行）用一个 tablist 切换；
   站点未放出的形态渲染为禁用 tab：鼠标指针为 not-allowed（即 🚫），不可点选。 */
.dl-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 26px 0 0; border-bottom: 1px solid var(--border);
}
.dl-tab {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--text-dim); background: transparent;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 11px 18px; margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.dl-tab:hover:not(:disabled) { color: var(--text-strong); background: var(--surface-2); }
.dl-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dl-tab.is-active {
  color: var(--text-strong); background: var(--surface);
  border-color: var(--border); border-bottom-color: var(--surface);
  box-shadow: inset 0 2px 0 var(--accent);
}
.dl-tab.is-disabled,
.dl-tab:disabled {
  color: var(--text-mute); opacity: .55;
  cursor: not-allowed;   /* 🚫：禁用形态的鼠标指针 */
}
.dl-tab.is-disabled:hover { background: transparent; }
.dl-panels { padding-top: 22px; }
.dl-panel[hidden] { display: none; }
.dl-panel-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.dl-panel-sub {
  flex: 1; min-width: 260px; margin: 0;
  color: var(--text-dim); font-size: 14px; line-height: 1.85;
}
.dl-ver {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--badge-fg);
}
.dl-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--text-mute);
  margin: 0 0 16px; word-break: break-all;
}
.download-grid.cols-1 { grid-template-columns: minmax(0, 380px); }
.download-card.is-missing { background: var(--surface-2); box-shadow: none; }
.download-card.is-missing i.feature-icon { color: var(--text-mute); opacity: .55; }
.download-card .btn[disabled] { cursor: not-allowed; opacity: .55; }
@media (max-width: 1180px) {
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 跨平台 JAR（jar-with-dependencies）横幅卡 */
.jar-card {
  margin-top: 22px;
  background: var(--band-bg);
  border: 1px solid var(--band-border); border-radius: var(--radius-lg);
  padding: 26px 28px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.jar-card .jar-icon { font-size: 42px; }
/* Font Awesome 咖啡杯（<i class="fa-solid fa-mug-hot">）按块级图标排版 */
.jar-card i.jar-icon { display: block; font-style: normal; line-height: 1; }
.jar-card .jar-body { flex: 1; min-width: 260px; }
.jar-card h3 { margin: 0 0 6px; font-size: 18px; color: var(--text-strong); }
.jar-card p { margin: 0; color: var(--text-dim); font-size: 14px; }
.jar-card .jar-cmd {
  margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; color: var(--code-text); display: inline-block;
}

/* ---------- App shell ---------- */
.app-shell { padding: 32px 20px 64px; }
.app-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.app-bar h1 { font-size: 24px; margin: 0; color: var(--text-strong); }
.app-user { margin-left: auto; color: var(--text-dim); font-size: 14px; }
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.app-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; min-height: 140px; box-shadow: var(--shadow);
}
.app-card h3 { margin: 0 0 8px; }
.app-card p { color: var(--text-dim); margin: 0; font-size: 14px; }
.app-card .tag {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-fg); margin-top: 12px;
  border: 1px solid var(--chip-border);
}

/* ---------- Login ---------- */
.login-shell { max-width: 460px; margin: 56px auto; padding: 0 20px; }
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-lg);
}
.login-card h1 { font-size: 26px; margin: 0 0 6px; text-align: center; color: var(--text-strong); }
.login-card .sub { color: var(--text-dim); text-align: center; margin: 0 0 24px; }
.mode-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.mode-tab {
  flex: 1; text-align: center; height: var(--control-h); display: flex; align-items: center;
  justify-content: center; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--text-dim); font-weight: 600;
}
.mode-tab.active {
  border-color: var(--accent); color: var(--accent-text);
  background: var(--accent-soft);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.field input {
  width: 100%; height: var(--control-h); padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 14px; outline: none;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.login-hint { font-size: 13px; color: var(--text-dim); margin: 10px 0 0; text-align: center; }
.login-error { color: var(--danger); font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.login-demo-note {
  font-size: 12.5px; color: var(--text-dim); margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border); text-align: center;
}
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: var(--control-h); padding: 0 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer;
  font-family: inherit; font-size: 14px;
}
.oauth-btn:hover { background: var(--surface-2); }

/* ---------- 云端服务提示卡（如 RockBus：仅入口链接，不本地实现） ---------- */
.notice-card {
  background: var(--band-bg);
  border: 1px solid var(--band-border); border-radius: var(--radius-lg);
  padding: 26px 28px; box-shadow: var(--shadow); margin-top: 24px;
}
.notice-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--text-strong); }
.notice-card p { margin: 0 0 18px; color: var(--text-dim); }

/* ---------- Loading / misc ---------- */
.loading { color: var(--text-dim); padding: 40px; text-align: center; }
.site-footer {
  flex-shrink: 0; border-top: 1px solid var(--border);
  margin-top: 40px; padding: 28px 0; background: var(--bg-soft);
}
.footer-brand { font-weight: 700; margin: 0 0 4px; color: var(--text-strong); }
.footer-note { color: var(--text-mute); margin: 0 0 8px; font-size: 14px; }
.footer-license { color: var(--text-mute); font-size: 13px; margin: 0; }

/* ---------- RockBus（摇滚巴士）页面 ----------
   2026-10-13：页面由 nginx 静态页并入本站，视觉按站点变量重写——
   颜色一律取 :root 语义变量（亮/暗由主站主题三档驱动），不再自带一套色板。 */
.rb-hero { padding: 56px 0 8px; }
.rb-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 顶部大图标：2026-10-13 owner 要求——去掉圆角矩形外框（原为白底 + 描边 + 阴影的 64px 圆角块），
   图标放大（34px → 68px → **128px**），颜色改为 #EE00EE */
.rb-logo { display: flex; align-items: center; justify-content: center; }
.rb-logo .rb-bus-icon { width: 128px; height: 128px; fill: #ee00ee; }
/* 照片横幅右上角小标签的图标：仍用主色蓝 */
.rb-bus-icon { width: 34px; height: 34px; fill: var(--accent); }
.rb-title { font-size: 36px; font-weight: 800; letter-spacing: -.02em; margin: 16px 0 0; color: var(--text-strong); }
.rb-title .rb-en { color: var(--accent); }
.rb-tagline { margin: 8px 0 0; font-size: 17px; font-weight: 600; color: var(--text); }
.rb-sub { margin: 4px 0 0; font-size: 14px; color: var(--text-dim); }

/* 照片横幅：轨道内当前帧恒居中、两侧相邻帧露出并压暗；
   最外侧两边用 mask 渐隐（跟随任意背景，不用纸色遮罩） */
.rb-strip { max-width: 1220px; margin: 0 auto; padding: 18px 20px 0; }
.rb-strip-inner {
  position: relative; height: 430px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
[dir="rtl"] .rb-strip-inner { direction: ltr; }   /* 轨道本身恒定 LTR，避免 RTL 下帧序颠倒 */
.rb-slides { display: flex; width: 100%; height: 100%; transition: transform .55s ease; }
.rb-slide { flex: 0 0 min(760px, 100%); height: 100%; padding: 0 5px; }
.rb-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-lg); opacity: .45; transition: opacity .45s;
}
.rb-slide.cur img { opacity: 1; }
.rb-car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 2;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 22px; line-height: 1; font-family: inherit;
}
.rb-car-btn:hover { background: var(--surface-2); }
.rb-car-btn.prev { left: calc(50% - min(760px, 100%) / 2 + 12px); }
.rb-car-btn.next { right: calc(50% - min(760px, 100%) / 2 + 12px); }
.rb-car-tag {
  position: absolute; top: 14px; left: calc(50% - min(760px, 100%) / 2 + 16px); z-index: 2;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 12px;
  font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap;
}
.rb-car-tag .rb-bus-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* 内容与卡片 */
.rb-cont { max-width: 760px; padding: 6px 20px 40px; }
.rb-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 26px 28px; margin-top: 28px;
}
.rb-card h2 {
  font-size: 15px; font-weight: 700; color: var(--text-dim);
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px;
}
/* ①：2×2 网格——输入框 1fr 列（两框同宽），按钮 auto 列（两钮同宽） */
.rb-verify-grid { display: grid; grid-template-columns: 1fr auto; gap: 12px 10px; margin-top: 12px; }
.rb-verify-grid .btn { width: 100%; white-space: nowrap; }
.rb-inp {
  width: 100%; min-width: 0; height: 44px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 15px; font-family: inherit;
  text-align: center; outline: none;
}
.rb-inp::placeholder { color: var(--text-mute); }
.rb-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.rb-row { display: flex; gap: 10px; margin-top: 12px; }
.rb-copyrow { justify-content: center; }
.rb-copyrow .btn { min-width: 220px; padding: 0 40px; }
.btn.done { background: var(--accent-2); color: #fff; border-color: transparent; }   /* 复制成功反馈 */

.rb-msg { margin-top: 12px; font-size: 13px; border-radius: 10px; padding: 10px 14px; display: none; }
.rb-msg.err { display: block; background: rgba(220, 38, 38, .1); color: var(--danger); }
.rb-msg.ok { display: block; background: rgba(16, 185, 129, .12); color: #15803d; }
:root[data-theme="dark"] .rb-msg.ok { color: #6ee7b7; }

.rb-tokenbox {
  display: none; margin-top: 16px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.rb-tk { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; color: var(--text); }
.rb-meta { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

/* ② 接入指令：链接与令牌在句中高亮 */
.rb-copybox {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; font-size: 15px; line-height: 1.9; color: var(--text);
}
.rb-url { color: var(--accent-text); font-weight: 700; user-select: all; }
.rb-tok {
  color: var(--badge-fg); font-weight: 800; background: var(--badge-bg);
  border: 1px solid var(--badge-border); border-radius: 6px; padding: 0 6px;
}
.rb-tok.empty { color: var(--danger); background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .25); }
.rb-hint { margin: 14px 0 0; font-size: 13px; color: var(--text-dim); }
.rb-badge {
  display: inline-block; background: var(--accent-soft); color: var(--accent-text);
  border-radius: 999px; padding: 1px 10px; font-size: 12px; font-weight: 700; margin: 0 2px;
}
.rb-warn { color: var(--danger); }

.rb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rb-table th {
  font-weight: 600; color: var(--text-dim); text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.rb-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-soft); }
.rb-table td:first-child { white-space: nowrap; color: var(--accent-text); font-weight: 600; }
.rb-table tr:last-child td { border-bottom: none; }

.rb-pre {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; overflow-x: auto; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.8; color: var(--code-text);
}

.rb-foot {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 13px; text-align: center;
}
.rb-foot p { margin: 0 0 4px; }
.rb-foot a { font-weight: 600; }
.rb-credit { font-size: 12px; color: var(--text-mute); }

@media (max-width: 900px) { .rb-strip-inner { height: 340px; } }
@media (max-width: 720px) {
  .rb-verify-grid { grid-template-columns: 1fr; }
  .rb-verify-grid .btn { min-width: 0; }
  .rb-card { padding: 20px 16px; }
  .rb-title { font-size: 28px; }
  .rb-copyrow .btn { min-width: 0; padding: 0 20px; }
  .rb-strip-inner { height: 280px; }
}

/* ---------- /keys：LiteLLM API Key 管理 ---------- */
.keys-page { max-width: 960px; padding-top: 44px; }
.keys-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.keys-head .doc-title { margin-bottom: 6px; }
.keys-head .doc-lead { margin-bottom: 0; max-width: 640px; }
.keys-eyebrow {
  margin: 0 0 8px; color: var(--accent-text); font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.keys-user {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px 6px 6px; box-shadow: var(--shadow-xs);
}
.keys-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.keys-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.keys-user-name { font-size: 13px; color: var(--text-strong); }
.keys-user-sub { font-size: 11px; color: var(--text-mute); word-break: break-all; }
.keys-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.keys-toolbar .btn { height: var(--control-h); }
.keys-msg { display: none; margin-top: 16px; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; line-height: 1.6; }
.keys-msg.err { display: block; background: rgba(220, 38, 38, .08); border: 1px solid rgba(220, 38, 38, .22); color: var(--danger); }
.keys-msg.ok { display: block; background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .25); color: #047857; }
:root[data-theme="dark"] .keys-msg.ok { color: #6ee7b7; }
.keys-login-link { color: inherit; font-weight: 700; text-decoration: underline; }
.keys-fresh {
  margin-top: 18px; border: 1px solid #a7f3d0; background: #ecfdf5;
  border-radius: var(--radius-lg); padding: 18px 20px;
}
:root[data-theme="dark"] .keys-fresh { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .35); }
.keys-fresh-title { margin: 0 0 10px; font-weight: 800; color: #065f46; font-size: 14px; }
:root[data-theme="dark"] .keys-fresh-title { color: #6ee7b7; }
.keys-fresh-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.keys-fresh-row code {
  flex: 1; min-width: 220px; background: rgba(255, 255, 255, .75);
  border-radius: 10px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: #065f46; word-break: break-all;
}
:root[data-theme="dark"] .keys-fresh-row code { background: rgba(0, 0, 0, .25); color: #a7f3d0; }
.keys-hint { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); }
.keys-table-wrap { margin-top: 22px; overflow-x: auto; }
.keys-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; font-size: 13px;
}
.keys-table th {
  text-align: left; background: var(--surface-2); color: var(--text-dim);
  font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; white-space: nowrap;
}
.keys-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.keys-table tr:last-child td { border-bottom: 0; }
.keys-num { color: var(--text-mute); width: 56px; }
.keys-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); font-size: 12px; word-break: break-all;
}
.keys-time { color: var(--text-dim); white-space: nowrap; }
.keys-action { text-align: right; }
.keys-revoke {
  border: 1px solid rgba(220, 38, 38, .25); background: var(--surface); color: var(--danger);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.keys-revoke:hover { background: rgba(220, 38, 38, .08); }
.keys-count { margin: 0 0 10px; color: var(--text-mute); font-size: 12px; }
.keys-empty {
  margin: 0; padding: 34px 20px; text-align: center; color: var(--text-dim);
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg); font-size: 14px;
}
.keys-muted { color: var(--text-mute); font-size: 12px; }
.keys-doc { margin-top: 40px; }
.keys-doc h2 { font-size: 19px; color: var(--text-strong); margin: 0 0 8px; }
.keys-doc > p { color: var(--text-dim); font-size: 14px; margin: 0 0 14px; }
.keys-base {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.keys-base-label {
  font-size: 12px; font-weight: 700; color: var(--text-mute);
  letter-spacing: .06em; text-transform: uppercase;
}
.keys-base code {
  flex: 1; min-width: 200px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--text); word-break: break-all;
}
.keys-code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; overflow-x: auto; margin: 0 0 26px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.8; color: var(--code-text);
  direction: ltr; text-align: left; unicode-bidi: isolate;
}
.keys-base code, .keys-fresh-row code, .keys-name, .keys-chip {
  direction: ltr; text-align: left; unicode-bidi: isolate;
}
.keys-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.keys-chip {
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 720px) {
  .keys-page { padding-top: 28px; }
  .keys-head { gap: 14px; }
  .keys-user { width: 100%; }
  .keys-table th:nth-child(4), .keys-table td:nth-child(4) { display: none; }
  .keys-code { font-size: 11.5px; }
}

/* ---------- RTL（如 ar-SA）---------- */
[dir="rtl"] .nav-actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-links { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .app-user { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav { flex-direction: row; }
[dir="rtl"] .doc ul { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .keys-table th { text-align: right; }
[dir="rtl"] .keys-action { text-align: left; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* 窄屏顶栏：品牌 + 汉堡按钮；导航链接与主题/语言下拉收进展开面板（此前是直接隐藏，
     手机上既看不到导航项也切不了主题与语言） */
  .nav-toggle { display: inline-flex; }
  .nav-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 14px 20px 18px; max-height: calc(100vh - 64px); overflow-y: auto;
    /* 不透明底：顶栏的磨砂半透在展开面板上会让正文透出来，手机上读不清 */
    background: var(--bg);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
  }
  .nav-panel.open { display: flex; }
  .nav-links { flex-direction: column; gap: 2px; margin: 0; flex-wrap: nowrap; }
  .nav-link { padding: 11px 12px; font-size: 15px; }
  .nav-actions { margin: 0; gap: 10px; }
  [dir="rtl"] .nav-actions { margin-right: 0; }   /* 面板里两栏等宽，不沿用宽屏的推边规则 */
  .theme-select, .lang-select { display: block; flex: 1; max-width: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .download-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-title { font-size: 34px; }
}
@media (max-width: 560px) {
  .feature-grid, .feature-grid.cols-3, .app-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 20px 12px; }
}
/* 超宽屏加档（2026-10-15）：容器由 1120px 放宽到 1440px——
   首页/下载/工作台卡片随之变宽，同一张卡一行容纳更多文字再换行 */
@media (min-width: 1600px) {
  :root { --maxw: 1440px; }
}

/* ---------- 滚动条与选区（复刻上游 globals.css：6px 细滚动条） ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
::selection { background: var(--accent-soft); color: var(--text-strong); }