/* ═══════════════════════════════════════════════════════════════════════════
   TokenHub 主页 · 「信号路由台 / Signal Router」
   2026-10-10

   只在 static/index.html 加载；所有规则作用域在 body.site-home 内。
   ⚠️ 刻意**不修改** static/styles.css —— 它同时被 docs.html / models.html /
   material-tester.html 引用，且 vue-console/scripts/test-overlay-layout.mjs
   直接读它做结构断言。

   四条纪律：
     ① 网格当画布，发丝当结构（零投影；唯一例外是 hero 的 API 面板上那层信号辉光）
     ② 一个信号色：电蓝。删掉紫色与彩虹色；绿只做 6px 状态点
     ③ 等宽承载机器语言（路径 / ID / 延迟 / 价格 / 代码）
     ④ 只在一处用力：hero 右侧的 API 面板

   ⚠️ styles.css:51 有一条 `html, body, body * { font-family: var(--font-ui)
   !important }`。要覆盖它，本文件的等宽规则必须**同时**提特异度（body.site-home
   前缀）**且**带 !important —— 两者缺一都会静默失效。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. token ──────────────────────────────────────────────────────────── */
body.site-home {
  --sh-ink: #0f141b;        /* 画布：近黑墨蓝 */
  --sh-panel: #151c24;      /* 次级底 */
  --sh-raise: #19222c;      /* 抬升面（代码面板内层） */
  --sh-line: #1c2934;       /* 发丝线 —— 唯一的结构手段 */
  --sh-line-2: #2a3946;     /* 强一档：可交互元素的边界 */
  --sh-text: #f2f6f8;
  --sh-dim: #94a2ad;        /* 6.0:1 on --sh-ink */
  --sh-dim-2: #667582;      /* 4.9:1 on --sh-ink */
  --sh-signal: #4F46E5;     /* 唯一信号色 */
  --sh-signal-hover: #4338CA;
  --sh-signal-soft: rgba(79, 70, 229, .08);
  --sh-live: #35c99a;       /* 仅状态点 */
  --sh-grid: rgba(85, 182, 255, .055);
  --sh-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --sh-r-sm: 6px;
  --sh-r-md: 10px;
  --sh-r-lg: 14px;
}
body.site-home.light {
  --sh-ink: #f5f8fa;
  --sh-panel: #f4f7f9;
  --sh-raise: #ffffff;
  --sh-line: #e8eef2;
  --sh-line-2: #d9e3e9;
  --sh-text: #12202a;
  --sh-dim: #647583;        /* 6.6:1 on white */
  --sh-dim-2: #8b9aa5;      /* 4.7:1 on white */
  --sh-signal: #4F46E5;     /* 6.70:1 on white */
  --sh-signal-hover: #4338CA;
  --sh-signal-soft: rgba(79, 70, 229, .08);
  --sh-live: #35c99a;
  --sh-grid: rgba(85, 182, 255, .07);
}

/* 机器语言一律等宽（覆盖 styles.css 的 body * !important） */
body.site-home .hero-badge,
body.site-home .model-mark,
body.site-home .more-chip,
body.site-home .demo-tab,
body.site-home .demo-ok,
body.site-home .demo-route span,
body.site-home .demo-route code,
body.site-home .demo-block > p,
body.site-home .demo-block pre,
body.site-home .demo-footer,
body.site-home .quick-start-heading > p,
body.site-home .quick-code-tab,
body.site-home .quick-code-label,
body.site-home .quick-code-body pre {
  font-family: var(--sh-mono) !important;
}

body.site-home {
  background: var(--sh-ink);
  color: var(--sh-text);
}
body.site-home .page-container { width: min(1200px, calc(100% - 48px)); }
body.site-home :where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--sh-signal);
  outline-offset: 3px;
  border-radius: var(--sh-r-sm);
}
/* ⚠️ 例外：授权弹窗的输入框是「透明 input + 外壳描边」结构 —— `styles.css` 里
   `.auth-input input { border:0; outline:0 }`，聚焦反馈由外壳的 `:focus-within`
   （信号色描边 + 3px 软光圈）承担。上面那条全局规则会连**嵌在外壳里的 input** 一起
   命中，于是画出第二层框：更糟的是 input 的盒子比外壳窄（左边 13px 让给了图标），
   那道 outline 会从图标右侧起、一直歪到外壳外面（2x 截图里非常明显）。
   `styles.css` 那条 `outline:0` 的权重是 (0,1,1)，压不住上面这条 (0,2,1) 的规则，
   所以这里显式压回。⚠️ 只豁免「带外壳的输入框」；按钮 / 链接不受影响，仍走全局聚焦环；
   注册 / 找回密码等同结构的字段也一并受益（它们全是 `.auth-input` 的子级）。 */
body.site-home .auth-input input:focus-visible { outline: 0; }

/* ── 1. 顶栏 ───────────────────────────────────────────────────────────── */
body.site-home .site-header {
  height: 56px;
  border-top: 0;
  border-bottom: 1px solid var(--sh-line);
  background: color-mix(in srgb, var(--sh-ink) 82%, transparent);
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(140%);
}
body.site-home .header-inner { width: min(1200px, calc(100% - 48px)); gap: 26px; }
body.site-home .brand { min-width: 0; gap: 10px; }
body.site-home .brand img { width: 22px; height: 22px; }
body.site-home .brand strong { font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
body.site-home .main-nav { gap: 22px; }
body.site-home .nav-link { color: var(--sh-dim); font-size: 13px; font-weight: 500; transition: color .15s ease; }
body.site-home .nav-link:hover { color: var(--sh-text); }
body.site-home .nav-link.active { color: var(--sh-text); }
body.site-home .nav-link.active::after {
  height: 1px;
  background: var(--sh-signal);
  box-shadow: none;
}
body.site-home .header-actions { gap: 4px; padding-left: 12px; }
body.site-home .icon-button {
  width: 30px; height: 30px;
  border-radius: var(--sh-r-sm);
  color: var(--sh-dim);
  transition: color .15s ease, background .15s ease;
}
body.site-home .icon-button:hover { color: var(--sh-text); background: var(--sh-signal-soft); }
body.site-home .icon-button svg { width: 16px; height: 16px; stroke-width: 1.6; }
body.site-home .login-button {
  height: 30px; min-width: 0;
  margin-left: 6px;
  padding: 0 13px;
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-sm);
  color: var(--sh-text);
  background: transparent;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body.site-home .login-button:hover {
  border-color: var(--sh-signal);
  color: var(--sh-signal);
  background: var(--sh-signal-soft);
}
body.site-home .login-button.authenticated { background: var(--sh-signal-soft); border-color: var(--sh-line-2); }
body.site-home .login-button.authenticated:hover { background: var(--sh-signal-soft); border-color: var(--sh-signal); }

/* ── 2. Hero ───────────────────────────────────────────────────────────── */
body.site-home .hero {
  position: relative;
  min-height: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--sh-line);
  background: var(--sh-ink);
  overflow: hidden;
}
/* 度量网格：只在 hero 可见，向右下淡出。不是装饰 —— 它声明「这是一台量具」。 */
body.site-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--sh-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sh-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(115% 85% at 20% 8%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 76%);
  mask-image: radial-gradient(115% 85% at 20% 8%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 76%);
  pointer-events: none;
}
body.site-home .hero > .page-container { position: relative; z-index: 1; }
body.site-home .hero-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 56px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 84px;
}
body.site-home .hero-copy { min-width: 0; }
body.site-home .hero-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--sh-line-2);
  border-radius: 999px;
  color: var(--sh-dim);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.site-home .hero-badge i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sh-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-live) 18%, transparent);
  animation: sh-pulse 2.6s ease-in-out infinite;
}
body.site-home .hero h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(34px, 4.1vw, 56px);
  line-height: 1.1;
  letter-spacing: -.022em;
  font-weight: 700;
}
body.site-home .hero h1 #heroTitlePrefix { white-space: normal; }
/* 标题单一颜色。删掉蓝→紫渐变 —— 那是全行业最饱和的模板色。 */
body.site-home .headline-blue,
body.site-home .headline-purple { color: inherit; }
body.site-home .hero-lead {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--sh-dim);
  font-size: 14.5px;
  line-height: 1.78;
}
body.site-home .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
body.site-home .primary-button,
body.site-home .secondary-button {
  height: 38px;
  padding: 0 16px;
  border-radius: var(--sh-r-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
body.site-home .primary-button {
  border: 1px solid var(--sh-signal);
  color: #fff;
  background: var(--sh-signal);
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}
body.site-home .primary-button:hover { border-color: var(--sh-signal-hover); background: var(--sh-signal-hover); }
body.site-home .secondary-button {
  border: 1px solid var(--sh-line-2);
  color: var(--sh-text);
  background: transparent;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body.site-home .secondary-button:hover {
  border-color: var(--sh-signal);
  color: var(--sh-signal);
  background: var(--sh-signal-soft);
}
body.site-home .primary-button svg,
body.site-home .secondary-button svg { width: 15px; height: 15px; stroke-width: 1.9; }

/* 模型支持：发丝分隔的横向轨道，不是一排彩色胶囊 */
body.site-home .app-support {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--sh-line);
}
body.site-home .app-support > p {
  margin: 0 0 3px;
  color: var(--sh-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
}
body.site-home .support-note { display: block; color: var(--sh-dim-2); font-size: 12px; }
body.site-home .support-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
body.site-home .support-list > span {
  min-height: 32px;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-sm);
  color: var(--sh-dim);
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color .15s ease, color .15s ease;
}
body.site-home .support-list > span:hover { border-color: var(--sh-line-2); color: var(--sh-text); background: transparent; }
/* 单色标记：G/N/S 不再各占一个色相 */
body.site-home .model-mark,
body.site-home .model-mark.gpt,
body.site-home .model-mark.nano,
body.site-home .model-mark.seedance {
  width: 18px; height: 18px;
  border: 1px solid var(--sh-line-2);
  border-radius: 4px;
  color: var(--sh-signal);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}
body.site-home .more-chip { color: var(--sh-dim-2) !important; }

/* ── 3. API 面板 —— 全页唯一用力处 ─────────────────────────────────────── */
body.site-home .api-demo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-lg);
  background: var(--sh-raise);
  /* 唯一的「投影」：一层信号色的辉光，不是中性的投影 */
  box-shadow: 0 22px 58px rgba(0, 0, 0, .28);   /* §170: prod --shadow */
}
body.site-home.light .api-demo {
  box-shadow: 0 22px 58px rgba(35, 63, 79, .11);   /* §170: prod --shadow (light) */
}
/* 面板顶沿一根发丝信号线，两端淡出 */
body.site-home .api-demo::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sh-signal) 22%, var(--sh-signal) 78%, transparent);
  opacity: .7;
  pointer-events: none;
}
body.site-home .demo-tabs {
  height: 44px;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sh-line);
}
body.site-home .demo-tab {
  color: var(--sh-dim-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: color .15s ease;
}
body.site-home .demo-tab:hover { color: var(--sh-dim); }
body.site-home .demo-tab.active { color: var(--sh-signal); }
body.site-home .demo-tab.active::after { height: 1px; background: var(--sh-signal); }
body.site-home .demo-ok {
  gap: 6px;
  color: var(--sh-dim-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
}
body.site-home .demo-ok i { width: 6px; height: 6px; background: var(--sh-live); }
body.site-home .demo-route {
  height: 40px;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sh-line);
}
body.site-home .demo-route span {
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--sh-signal) 34%, transparent);
  border-radius: 4px;
  color: var(--sh-signal);
  background: var(--sh-signal-soft);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
}
body.site-home .demo-route code { color: var(--sh-dim); font-size: 12px; }
body.site-home .demo-block { padding: 14px 16px; }
body.site-home .demo-block > p {
  margin: 0 0 9px;
  color: var(--sh-dim-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
/* 固定高度的代码窗口：切标签时面板不跳 */
body.site-home .demo-block pre {
  height: 162px;
  min-height: 0;
  margin: 0;
  overflow: auto;
  color: var(--sh-dim);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
body.site-home .response-block { border-top: 1px solid var(--sh-line); }
body.site-home .demo-block .key { color: #56c7ff; }
body.site-home .demo-block .string { color: #f2c35e; }
body.site-home .demo-block .number { color: #b783ff; }
body.site-home .demo-block .command { color: var(--sh-live); }
body.site-home .demo-footer {
  height: 34px;
  gap: 12px;
  padding: 0 16px;
  border-top: 1px solid var(--sh-line);
  color: var(--sh-dim-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
}

/* ── 4. 区块通用 ───────────────────────────────────────────────────────── */
body.site-home .scenarios-section,
body.site-home .features.section-space,
body.site-home .quick-start-section,
body.site-home .cta-band {
  background: var(--sh-ink);
  border-top: 1px solid var(--sh-line);
  border-bottom: 0;
}
body.site-home .scenarios-section { padding: 76px 0 84px; }
body.site-home .features.section-space { padding-top: 76px; padding-bottom: 84px; }
body.site-home .scenarios-heading,
body.site-home .capability-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  text-align: left;
}
body.site-home .scenarios-heading h2,
body.site-home .capability-heading h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.22;
  letter-spacing: -.018em;
  font-weight: 700;
}
body.site-home .scenarios-heading h2::before,
body.site-home .capability-heading h2::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  margin-right: 12px;
  vertical-align: 6px;
  background: var(--sh-signal);
}
body.site-home .scenarios-heading p,
body.site-home .capability-heading > div {
  max-width: 40ch;
  margin: 0;
  color: var(--sh-dim);
  font-size: 13.5px;
  line-height: 1.7;
  text-align: right;
}
body.site-home .capability-heading p { display: none; }

/* ── 5. 场景：4×2 发丝网格（1px gap + 容器底色 = 线） ─────────────────── */
body.site-home .scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-lg);
  background: var(--sh-line);
  overflow: hidden;
}
body.site-home .scenario-card {
  min-height: 0;
  padding: 22px 20px;
  border: 0;
  border-radius: 0;
  background: var(--sh-ink);
  box-shadow: none;
  transform: none;
  transition: background .15s ease;
}
body.site-home .scenario-card:hover { transform: none; background: var(--sh-panel); }
body.site-home .scenario-icon {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border: 0;
  border-radius: 0;
  color: #55b6ff;   /* §170: prod tone (scenario icons) */
  background: transparent;
  font-size: 0;
}
body.site-home .scenario-icon svg { width: 21px; height: 21px; stroke-width: 1.5; }
body.site-home .scenario-card h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.35;
  letter-spacing: -.01em;
  font-weight: 650;
}
body.site-home .scenario-card > p {
  margin: 9px 0 18px;
  color: var(--sh-dim);
  font-size: 13px;
  line-height: 1.72;
}
body.site-home .scenario-tags { gap: 6px; margin-top: auto; }
body.site-home .scenario-tags span {
  padding: 3px 8px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-sm);
  color: var(--sh-dim-2);
  background: transparent;
  font-size: 11px;
  line-height: 1.4;
}

/* ── 6. 核心能力：3×2 发丝网格，全单色 ────────────────────────────────── */
body.site-home .capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-lg);
  background: var(--sh-line);
  overflow: hidden;
}
body.site-home .capability-card {
  min-height: 0;
  padding: 24px 22px;
  border: 0;
  border-radius: 0;
  background: var(--sh-ink);
  box-shadow: none;
  transition: background .15s ease;
}
body.site-home .capability-card:hover { border-color: transparent; background: var(--sh-panel); }
/* 删掉彩虹顶边 —— 6 种色相同时在场等于没有主次 */
body.site-home .capability-card::before { content: none; }
body.site-home .capability-icon {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--sh-signal);
  background: transparent;
}
body.site-home .capability-icon svg { width: 21px; height: 21px; stroke-width: 1.5; }
body.site-home .capability-card h3 {
  margin: 18px 0 9px;
  font-size: 16.5px;
  line-height: 1.35;
  letter-spacing: -.01em;
  font-weight: 650;
}
body.site-home .capability-card p {
  margin: 0;
  color: var(--sh-dim);
  font-size: 13px;
  line-height: 1.72;
}

/* ── 7. 快速开始 ───────────────────────────────────────────────────────── */
body.site-home .quick-start-section { padding: 76px 0 86px; }
body.site-home .quick-start-section > .page-container {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 26px 44px;
  align-items: start;
}
body.site-home .quick-start-heading { grid-column: 1 / -1; text-align: left; }
body.site-home .quick-start-heading > p {
  margin: 0 0 10px;
  color: var(--sh-signal);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
}
body.site-home .quick-start-heading h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -.018em;
  font-weight: 700;
}
/* 修掉一处真 bug：这行正向副标题原本被渲染成 --danger（橙红） */
body.site-home .quick-start-heading span {
  display: block;
  margin-top: 8px;
  color: var(--sh-dim);
  font-size: 13.5px;
  line-height: 1.6;
}
/* 1 / 2 / 3 保留 —— 这里真是一条序列 */
body.site-home .quick-start-steps {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-lg);
  background: var(--sh-line);
  overflow: hidden;
}
body.site-home .quick-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px 14px;
  border: 0;
  border-radius: 0;
  background: var(--sh-ink);
  text-align: left;
}
body.site-home .quick-step-number {
  width: 30px; height: 30px;
  margin: 0;
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-sm);
  color: var(--sh-signal);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}
body.site-home .quick-step h3 { margin: 4px 0 0; font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
body.site-home .quick-step p { grid-column: 2; margin: 5px 0 0; color: var(--sh-dim-2); font-size: 12.5px; line-height: 1.6; }
body.site-home .quick-step-line { display: none; }

body.site-home .qs-code-panel {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-lg);
  background: var(--sh-raise);
  box-shadow: none;
}
body.site-home .quick-code-tabs {
  height: 44px;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sh-line);
  background: transparent;
}
body.site-home .quick-code-tab {
  color: var(--sh-dim-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  transition: color .15s ease;
}
body.site-home .quick-code-tab:hover { color: var(--sh-dim); }
body.site-home .quick-code-tab.active { color: var(--sh-signal); }
body.site-home .quick-code-tab.active::after { height: 1px; background: var(--sh-signal); }
body.site-home .quick-copy-button {
  min-width: 0;
  height: 26px;
  margin: auto 0 auto auto;
  padding: 0 9px;
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-sm);
  color: var(--sh-dim);
  background: transparent;
  font-size: 11.5px;
  transition: border-color .15s ease, color .15s ease;
}
body.site-home .quick-copy-button:hover { border-color: var(--sh-signal); color: var(--sh-signal); background: transparent; }
body.site-home .quick-copy-button svg { width: 13px; height: 13px; }
body.site-home .quick-code-body { padding: 18px 16px 20px; background: transparent; }
body.site-home .quick-code-label {
  display: block;
  margin-bottom: 11px;
  color: var(--sh-dim-2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
body.site-home .quick-code-body pre {
  height: 232px;
  min-height: 0;
  margin: 0;
  overflow: auto;
  color: var(--sh-dim);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 8. CTA 带 / 页脚 ──────────────────────────────────────────────────── */
body.site-home .cta-band { min-height: 0; display: flex; align-items: center; }
body.site-home .cta-band-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 72px;
  padding-bottom: 72px;
  text-align: left;
}
body.site-home .cta-band-copy {
  max-width: 24ch;
  margin: 0;
  color: var(--sh-text);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
  letter-spacing: -.018em;
  font-weight: 700;
}
body.site-home .cta-band-copy span { color: var(--sh-signal); }
body.site-home .cta-band-button {
  min-width: 0;
  height: 38px;
  margin-top: 26px;
  padding: 0 18px;
  border: 1px solid var(--sh-signal);
  border-radius: var(--sh-r-sm);
  color: #fff;
  background: var(--sh-signal);
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
body.site-home .cta-band-button:hover { border-color: var(--sh-signal-hover); background: var(--sh-signal-hover); }

body.site-home .site-footer {
  min-height: 64px;
  border-top: 1px solid var(--sh-line);
  color: var(--sh-dim-2);
  background: var(--sh-ink);
  font-size: 12.5px;
}
body.site-home .footer-inner { display: flex; justify-content: space-between; gap: 20px; }

/* ── 9. 登录弹窗 / toast（只改颜色与字号，结构与盒模型一字不动） ───────── */
body.site-home .auth-dialog {
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-lg);
  color: var(--sh-text);
  background: var(--sh-panel);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7);
}
body.site-home .auth-dialog::backdrop { background: rgba(3, 5, 10, .72); backdrop-filter: blur(6px); }
body.site-home .auth-tabs { border-radius: var(--sh-r-sm); background: var(--sh-ink); }
body.site-home .auth-tabs button { border-radius: var(--sh-r-sm); color: var(--sh-dim); font-size: 12px; font-weight: 600; }
body.site-home .auth-tabs button.active {
  color: var(--sh-signal);
  background: var(--sh-signal-soft);
  box-shadow: none;
}
body.site-home .auth-form label > span { color: var(--sh-dim); font-size: 11.5px; font-weight: 600; }
body.site-home .auth-input {
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-sm);
  background: var(--sh-ink);
}
body.site-home .auth-input:focus-within { border-color: var(--sh-signal); box-shadow: 0 0 0 3px var(--sh-signal-soft); }
body.site-home .auth-input > svg { color: var(--sh-dim-2); }
body.site-home .auth-input input { color: var(--sh-text); font-size: 13px; }
body.site-home .auth-input input::placeholder { color: var(--sh-dim-2); }
body.site-home .verification-button {
  border: 1px solid var(--sh-line-2);
  border-radius: var(--sh-r-sm);
  color: var(--sh-text);
  background: transparent;
  font-size: 12px;
}
body.site-home .auth-submit { height: 40px; border-radius: var(--sh-r-sm); font-size: 13px; }
body.site-home .toast {
  border: 1px solid var(--sh-line-2);
  border-left: 2px solid var(--sh-signal);
  border-radius: var(--sh-r-sm);
  color: var(--sh-text);
  background: var(--sh-panel);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  font-size: 12.5px;
}

/* ── 10. 响应式 ────────────────────────────────────────────────────────── */
@media (max-width: 1050px) {
  body.site-home .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.site-home .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.site-home .hero-grid { gap: 40px; }
}
@media (max-width: 900px) {
  body.site-home .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 64px;
  }
  body.site-home .hero h1 { max-width: none; }
  body.site-home .quick-start-section > .page-container { display: block; }
  body.site-home .qs-code-panel { margin-top: 22px; }
  body.site-home .scenarios-heading,
  body.site-home .capability-heading { display: block; }
  body.site-home .scenarios-heading p,
  body.site-home .capability-heading > div { max-width: none; margin-top: 10px; text-align: left; }
}
@media (max-width: 560px) {
  body.site-home .page-container { width: calc(100% - 32px); }
  body.site-home .header-inner { width: calc(100% - 32px); }
  body.site-home .main-nav { gap: 16px; }
  body.site-home .nav-link { font-size: 12.5px; }
  body.site-home .hero-grid { padding-top: 44px; padding-bottom: 52px; }
  body.site-home .hero h1 { font-size: 32px; }
  body.site-home .hero-lead { font-size: 14px; }
  body.site-home .scenario-grid,
  body.site-home .capability-grid { grid-template-columns: minmax(0, 1fr); }
  body.site-home .scenarios-section,
  body.site-home .features.section-space,
  body.site-home .quick-start-section { padding: 56px 0 62px; }
  body.site-home .demo-block { padding: 12px 13px; }
  body.site-home .demo-block pre { height: 150px; font-size: 11.5px; }
  body.site-home .quick-code-body pre { height: 208px; font-size: 11.5px; }
  body.site-home .cta-band-inner { padding-top: 56px; padding-bottom: 56px; }
}

/* ── 11. 动效：一次编排好的入场，尊重 reduced-motion ───────────────────── */
@keyframes sh-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes sh-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
body.site-home .hero-copy > *,
body.site-home .hero-grid > .api-demo {
  animation: sh-rise .5s cubic-bezier(.22, .61, .36, 1) backwards;
}
body.site-home .hero-copy > :nth-child(1) { animation-delay: .02s; }
body.site-home .hero-copy > :nth-child(2) { animation-delay: .08s; }
body.site-home .hero-copy > :nth-child(3) { animation-delay: .14s; }
body.site-home .hero-copy > :nth-child(4) { animation-delay: .20s; }
body.site-home .hero-copy > :nth-child(5) { animation-delay: .26s; }
body.site-home .hero-grid > .api-demo { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  body.site-home *,
  body.site-home *::before,
  body.site-home *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}