/* ==========================================================================
   site-deepspace-2.css · deepspace-2 · 2026-09-23
   设计语言移植自 DeepSeek Harness 官网（www.deepseek.com/harness/en）

   与上一代 deepspace-1「深空 HUD」的根本差别：
     deepspace-1 = 藏青底 + 双强调色(蓝/玉绿) + HUD 切角 + 发光/文字辉光  → 赛博游戏感
     deepspace-2 = 暖中性底 + 单一强调色 + 大圆角 + 分层透明/发丝描边    → 克制的高级感

   三条设计原则（照抄参考站）：
     1) 层次靠「透明度 + 毛玻璃」做，不靠颜色。surface 1→5 逐层加白 2%~12%。
     2) 精致靠「发丝描边」。深色 6~8% 白，浅色 6~10% 黑，永不使用彩色描边。
     3) 强调色只有一个（#4d6bfe），只出现在主操作 / 链接 / 激活态。其余全部中性。

   工程纪律（沿用 deepspace-1 的特异性战争结论，勿改）：
     1) 源码层皮肤是裸选择器 + [data-slot] + !important，且懒加载 chunk 的 style
        会插在本 link 之后。故本文件每条覆盖一律 html.dark / html.light 前缀抬特异性
        + 自身 !important —— 与加载顺序无关，稳赢。
     2) 变量覆盖：dark 侧写 html.dark, html.dark body；light 侧写 html.light, html.light body。
     3) 渐变文字禁用 background 简写：background-image / -webkit-background-clip /
        -webkit-text-fill-color 分写。
     4) 所有动画必须能被 §12 的 prefers-reduced-motion 关掉。
   ========================================================================== */

/* ==========================================================================
   并行分片（2026-09-23 加）：本文件是「基础层」，下列文件是「增量层」。
   拆分的两个理由：
     1) 并行安全 —— 每个分片是独立静态文件，多人/多代理同时改互不冲突；
     2) 影子根可用 —— 应用会把 document 的样式表克隆进首页 shadowRoot，
        而 @import 属于同一 CSSOM，故分片在影子根内同样生效（无需额外注入）。
   ⚠️ @import 必须位于所有规则之前（CSS 规范），故紧跟在文件头注释后。
   ⚠️ 分片里仍须遵守本文件头的工程纪律（html.dark/.dark 前缀 + 自身 !important）。
   ========================================================================== */
@import url("/site-deepspace-2-fonts.css");
@import url("/site-deepspace-2-home.css");
@import url("/site-deepspace-2-fixes.css");

/* ==========================================================================
   §0 注册自定义属性 + 关键帧
   --border-angle 必须 @property 注册才能被 keyframes 平滑插值（参考站同款手法）
   ========================================================================== */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes ds2-border-spin {
  0%   { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

@keyframes ds2-enter {
  0%   { opacity: 0; transform: translateY(var(--enter-y, 16px)); filter: blur(var(--enter-blur, 0)); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes ds2-sheen {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

/* ==========================================================================
   §1 排版纪律 —— 高级感的第一杠杆
   字体栈：Inter 系优先（若装了）+ 系统 UI + 中文黑体按平台优先级排列
   权重只用 400/500/600；标题负字距，正文正常；数字一律 tabular-nums
   ========================================================================== */
html.dark,
html.light,
html.dark body,
html.light body,
html.dark button,
html.light button,
html.dark input,
html.light input,
html.dark select,
html.light select,
html.dark textarea,
html.light textarea,
html.dark [data-slot="card"],
html.light [data-slot="card"],
html.dark [data-slot="popover-content"],
html.light [data-slot="popover-content"],
html.dark [data-slot="dialog-content"],
html.light [data-slot="dialog-content"],
html.dark [data-slot="sheet-content"],
html.light [data-slot="sheet-content"],
html.dark [data-slot="sidebar"],
html.light [data-slot="sidebar"] {
  font-family: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: "cv11", "ss01", "tnum" 0 !important;
  font-variant-numeric: normal;
}

/* 标题：负字距 + 紧行高 + 中等字重（不用 700，避免"廉价粗黑"） */
html.dark h1, html.light h1,
html.dark h2, html.light h2,
html.dark h3, html.light h3,
html.dark [data-slot="card-title"],
html.light [data-slot="card-title"] {
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.2 !important;
}

html.dark h1, html.light h1 { letter-spacing: -0.03em !important; font-weight: 600 !important; }
html.dark h2, html.light h2 { letter-spacing: -0.026em !important; }

/* 数字/代码/密钥：等宽 + 表格数字对齐（"工程感"来源） */
html.dark .font-mono, html.light .font-mono,
html.dark code, html.light code,
html.dark pre, html.light pre,
html.dark kbd, html.light kbd,
html.dark [data-slot="command-shortcut"],
html.light [data-slot="command-shortcut"],
html.dark .tabular-nums, html.light .tabular-nums,
html.dark [data-slot="popover-content"] .font-mono.tabular-nums,
html.light [data-slot="popover-content"] .font-mono.tabular-nums {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Fragment Mono", Menlo, Consolas,
    "Noto Sans Mono CJK SC", "Microsoft YaHei", monospace !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "zero" 1 !important;
}

/* 正文行高放松（参考站正文 1.6+，是"透气"的关键） */
html.dark p, html.light p,
html.dark li, html.light li,
html.dark [data-slot="card-description"],
html.light [data-slot="card-description"] {
  line-height: 1.65 !important;
}

/* ==========================================================================
   §2 token 全量覆盖 —— 最大的杠杆
   源码层大量规则引用 var(--card)/var(--border)/var(--muted) 等，
   改这一层等于同时改掉几十处组件，且不需要逐条打 !important
   ========================================================================== */

/* ---------- DARK：暖中性，几乎无色相 ---------- */
html.dark, html.dark body {
  /* 画布 */
  --background: #0a0a0a !important;
  --foreground: #f2f2f2 !important;

  /* 表面：靠加白分层，不用彩色 */
  --card: hsla(0, 0%, 100%, 0.035) !important;
  --card-foreground: #f2f2f2 !important;
  --popover: #141414 !important;
  --popover-foreground: #f2f2f2 !important;

  /* 强调：唯一一个 */
  --primary: #4d6bfe !important;
  --primary-foreground: #ffffff !important;

  --secondary: hsla(0, 0%, 100%, 0.06) !important;
  --secondary-foreground: #f2f2f2 !important;

  --muted: hsla(0, 0%, 100%, 0.045) !important;
  --muted-foreground: #9a9a9a !important;

  --accent: hsla(0, 0%, 100%, 0.07) !important;
  --accent-foreground: #f2f2f2 !important;

  --destructive: #e5484d !important;
  --destructive-foreground: #ffffff !important;

  /* 描边：发丝级，全中性 */
  --border: hsla(0, 0%, 100%, 0.07) !important;
  --input: hsla(0, 0%, 100%, 0.09) !important;
  --ring: rgba(77, 107, 254, 0.55) !important;

  /* 语义色收敛为低饱和（避免"彩色补丁"） */
  --info: #7c9cff !important;
  --info-foreground: #0a0a0a !important;
  --success: #3fb950 !important;
  --success-foreground: #0a0a0a !important;
  --warning: #d29922 !important;
  --warning-foreground: #0a0a0a !important;
  --neutral: #7d7d7d !important;

  --chart-1: #4d6bfe !important;
  --chart-2: #3fb950 !important;
  --chart-3: #a371f7 !important;
  --chart-4: #39c5cf !important;
  --chart-5: #db61a2 !important;

  /* 自有令牌 */
  --ds2-page: #0a0a0a;
  --ds2-surface-1: hsla(0, 0%, 100%, 0.035);
  --ds2-surface-2: hsla(0, 0%, 100%, 0.055);
  --ds2-surface-3: hsla(0, 0%, 100%, 0.075);
  --ds2-surface-raised: hsla(0, 0%, 100%, 0.09);
  --ds2-hairline: hsla(0, 0%, 100%, 0.07);
  --ds2-hairline-strong: hsla(0, 0%, 100%, 0.14);
  --ds2-text: #f2f2f2;
  --ds2-text-2: hsla(0, 0%, 100%, 0.78);
  --ds2-text-3: hsla(0, 0%, 100%, 0.5);
  --ds2-text-4: hsla(0, 0%, 100%, 0.34);
  --ds2-brand: #4d6bfe;
  --ds2-brand-soft: rgba(77, 107, 254, 0.14);
  --ds2-inner-hi: hsla(0, 0%, 100%, 0.09);
  --ds2-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.32);
  --ds2-shadow-pop: 0 8px 16px rgba(0, 0, 0, 0.44), 0 24px 56px rgba(0, 0, 0, 0.5);
  --ds2-blur: 12px;
}

/* ---------- LIGHT：暖白，同构 ---------- */
html.light, html.light body {
  --background: #f9f8f8 !important;
  --foreground: #1a1a1a !important;

  --card: hsla(0, 0%, 100%, 0.72) !important;
  --card-foreground: #1a1a1a !important;
  --popover: #ffffff !important;
  --popover-foreground: #1a1a1a !important;

  --primary: #4d6bfe !important;
  --primary-foreground: #ffffff !important;

  --secondary: hsla(0, 0%, 100%, 0.9) !important;
  --secondary-foreground: #1a1a1a !important;

  --muted: rgba(0, 0, 0, 0.035) !important;
  --muted-foreground: #6b6b6b !important;

  --accent: rgba(0, 0, 0, 0.05) !important;
  --accent-foreground: #1a1a1a !important;

  --destructive: #d93b3f !important;
  --destructive-foreground: #ffffff !important;

  --border: rgba(0, 0, 0, 0.09) !important;
  --input: rgba(0, 0, 0, 0.12) !important;
  --ring: rgba(77, 107, 254, 0.45) !important;

  --info: #3157b8 !important;
  --info-foreground: #ffffff !important;
  --success: #1a7f37 !important;
  --success-foreground: #ffffff !important;
  --warning: #9a6700 !important;
  --warning-foreground: #ffffff !important;
  --neutral: #6b6b6b !important;

  --chart-1: #4d6bfe !important;
  --chart-2: #1a7f37 !important;
  --chart-3: #8250df !important;
  --chart-4: #1b7c83 !important;
  --chart-5: #bf3989 !important;

  --ds2-page: #f9f8f8;
  --ds2-surface-1: hsla(0, 0%, 100%, 0.72);
  --ds2-surface-2: hsla(0, 0%, 100%, 0.86);
  --ds2-surface-3: #ffffff;
  --ds2-surface-raised: #ffffff;
  --ds2-hairline: rgba(0, 0, 0, 0.08);
  --ds2-hairline-strong: rgba(0, 0, 0, 0.16);
  --ds2-text: #1a1a1a;
  --ds2-text-2: rgba(26, 26, 26, 0.78);
  --ds2-text-3: rgba(26, 26, 26, 0.56);
  --ds2-text-4: rgba(26, 26, 26, 0.38);
  --ds2-brand: #4d6bfe;
  --ds2-brand-soft: rgba(77, 107, 254, 0.1);
  --ds2-inner-hi: rgba(255, 255, 255, 0.9);
  --ds2-shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.05);
  --ds2-shadow-pop: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
  --ds2-blur: 12px;
}

/* ==========================================================================
   §3 画布 —— 极简，只留一层几乎看不见的径向光
   deepspace-1 的噪点扫描层 + 星云在此全部移除（那是"廉价感"来源之一）
   ========================================================================== */
html.dark body,
html.light body {
  background-color: var(--ds2-page) !important;
  color: var(--ds2-text) !important;
}

/* 杀掉 deepspace-1 的噪点层与顶部辉光线 */
html.dark body::after,
html.light body::after,
html.dark [data-slot="sheet-content"]::before,
html.light [data-slot="sheet-content"]::before,
html.dark .bg-background\/70::after,
html.light .bg-background\/70::after,
html.dark .pricing-page header.mx-auto::before,
html.light .pricing-page header.mx-auto::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* 顶栏底部发丝线（替代原来的"辉光线"） */
html.dark header,
html.light header {
  border-bottom: 1px solid var(--ds2-hairline) !important;
  box-shadow: none !important;
  backdrop-filter: blur(var(--ds2-blur)) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(var(--ds2-blur)) saturate(1.4) !important;
}

html.dark header { background: rgba(10, 10, 10, 0.72) !important; }
html.light header { background: rgba(249, 248, 248, 0.76) !important; }

/* ==========================================================================
   §4 卡片 / 面板 / 浮层 —— 玻璃质感的核心
   手法：极低透明度表面 + 12px 毛玻璃 + 发丝描边 + 深色下 1px 内顶高光
   ========================================================================== */
html.dark [data-slot="card"],
html.light [data-slot="card"],
html.dark .sg-obsidian-card,
html.light .sg-obsidian-card,
html.dark .sg-model-card,
html.light .sg-model-card,
html.dark .sg-command-box,
html.light .sg-command-box {
  background: var(--ds2-surface-1) !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-radius: 20px !important;
  box-shadow: var(--ds2-shadow-card), inset 0 1px 0 0 var(--ds2-inner-hi) !important;
  backdrop-filter: blur(var(--ds2-blur)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--ds2-blur)) saturate(1.3) !important;
  /* 移除 deepspace-1 的 HUD 切角 */
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease !important;
}

/* 悬停：提升 2px + 描边提亮（参考站的核心手感，替代原来的发光） */
html.dark [data-slot="card"]:hover,
html.light [data-slot="card"]:hover,
html.dark .sg-obsidian-card:hover,
html.light .sg-obsidian-card:hover,
html.dark .sg-model-card:hover,
html.light .sg-model-card:hover {
  background: var(--ds2-surface-2) !important;
  border-color: var(--ds2-hairline-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ds2-shadow-pop), inset 0 1px 0 0 var(--ds2-inner-hi) !important;
}

/* 浮层：不透明底 + 更深的投影（浮层不该透出背后内容） */
html.dark [data-slot="dialog-content"],
html.light [data-slot="dialog-content"],
html.dark [data-slot="popover-content"],
html.light [data-slot="popover-content"],
html.dark [data-slot="drawer-content"],
html.light [data-slot="drawer-content"],
html.dark [data-slot="sheet-content"],
html.light [data-slot="sheet-content"] {
  background: var(--popover) !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-radius: 16px !important;
  box-shadow: var(--ds2-shadow-pop) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  clip-path: none !important;
}

html.dark [data-slot="dialog-content"] code,
html.light [data-slot="dialog-content"] code {
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}
html.light [data-slot="dialog-content"] code { background: rgba(0, 0, 0, 0.045) !important; }

/* ==========================================================================
   §5 按钮层次 —— primary / secondary / ghost，全部大圆角（pill）
   参考站按钮是 100px pill，这是"高级感"最直观的一处
   ========================================================================== */
html.dark [data-slot="button"],
html.light [data-slot="button"],
html.dark button.rounded-full,
html.light button.rounded-full {
  border-radius: 100px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, box-shadow .2s ease, transform .15s ease !important;
}

html.dark [data-slot="button"]:active,
html.light [data-slot="button"]:active {
  transform: scale(.98) !important;
}

/* primary：纯色，无渐变无发光；悬停轻微提亮 */
html.dark [data-slot="button"].bg-primary,
html.light [data-slot="button"].bg-primary {
  background: var(--ds2-brand) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.dark [data-slot="button"].bg-primary:hover,
html.light [data-slot="button"].bg-primary:hover {
  background: #5f7bff !important;
  box-shadow: 0 4px 16px rgba(77, 107, 254, 0.32) !important;
}
html.dark [data-slot="button"].bg-primary:focus-visible,
html.light [data-slot="button"].bg-primary:focus-visible {
  outline: 2px solid var(--ds2-brand) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* secondary / outline：玻璃底 + 发丝描边 */
html.dark [data-slot="button"].border-border,
html.light [data-slot="button"].border-border {
  background: var(--ds2-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--ds2-hairline) !important;
  color: var(--ds2-text) !important;
  box-shadow: inset 0 1px 0 0 var(--ds2-inner-hi) !important;
  text-shadow: none !important;
}
html.dark [data-slot="button"].border-border:hover,
html.light [data-slot="button"].border-border:hover {
  background: var(--ds2-surface-3) !important;
  border-color: var(--ds2-hairline-strong) !important;
}
html.dark [data-slot="button"].border-border:focus-visible,
html.light [data-slot="button"].border-border:focus-visible {
  outline: 2px solid var(--ds2-hairline-strong) !important;
  outline-offset: 2px !important;
}

/* ghost：无底无边，悬停才出现极淡底 */
html.dark [data-slot="button"].hover\:bg-accent:hover,
html.light [data-slot="button"].hover\:bg-accent:hover,
html.dark [data-slot="button"].hover\:bg-muted:hover,
html.light [data-slot="button"].hover\:bg-muted:hover {
  background: var(--ds2-surface-2) !important;
}

/* ==========================================================================
   §6 表格 —— 去掉斑马纹与竖线，只留横向发丝分隔（参考站的克制）
   ========================================================================== */
html.dark [data-slot="table-head"],
html.light [data-slot="table-head"] {
  background: transparent !important;
  border-bottom: 1px solid var(--ds2-hairline) !important;
  color: var(--ds2-text-3) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

html.dark [data-slot="table-row"],
html.light [data-slot="table-row"] {
  border-bottom: 1px solid var(--ds2-hairline) !important;
  background: transparent !important;
  transition: background-color .15s ease !important;
}

html.dark [data-slot="table-row"]:hover,
html.light [data-slot="table-row"]:hover {
  background: var(--ds2-surface-1) !important;
}

html.dark [data-slot="table-cell"],
html.light [data-slot="table-cell"] {
  border-color: var(--ds2-hairline) !important;
  text-shadow: none !important;
}

html.dark [data-slot="table-row"]:hover > [data-slot="table-cell"],
html.light [data-slot="table-row"]:hover > [data-slot="table-cell"] {
  background: transparent !important;
}

/* ==========================================================================
   §7 模型广场 / 定价页
   ========================================================================== */
html.dark .sg-pricing-toolbar,
html.light .sg-pricing-toolbar {
  background: var(--ds2-surface-1) !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(var(--ds2-blur)) !important;
  -webkit-backdrop-filter: blur(var(--ds2-blur)) !important;
  box-shadow: inset 0 1px 0 0 var(--ds2-inner-hi) !important;
  clip-path: none !important;
  transition: background-color .2s ease, border-color .2s ease !important;
}
html.dark .sg-pricing-toolbar:hover,
html.light .sg-pricing-toolbar:hover {
  background: var(--ds2-surface-2) !important;
  border-color: var(--ds2-hairline-strong) !important;
}

/* 定价页 h1：去掉渐变字（deepspace-1 的渐变字是"廉价感"重灾区） */
html.dark .pricing-page h1,
html.light .pricing-page h1 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ds2-text) !important;
  text-shadow: none !important;
}

/* ==========================================================================
   §8 chip / 徽章 —— 统一为中性玻璃，只有"选中"才用品牌色
   deepspace-1 的彩色 pill 通胀在此治理
   ========================================================================== */
html.dark [data-slot="badge"],
html.light [data-slot="badge"],
html.dark .sg-chip,
html.light .sg-chip {
  background: var(--ds2-surface-2) !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-radius: 100px !important;
  color: var(--ds2-text-2) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 模型卡内的彩色小 pill → 中性化（只保留形状与位置） */
html.dark .sg-model-card :is([class*="bg-blue-500"], [class*="bg-orange"], [class*="bg-green"], [class*="bg-purple"]),
html.light .sg-model-card :is([class*="bg-blue-500"], [class*="bg-orange"], [class*="bg-green"], [class*="bg-purple"]) {
  background: var(--ds2-surface-2) !important;
  border: 1px solid var(--ds2-hairline) !important;
  color: var(--ds2-text-2) !important;
}
html.dark .sg-model-card :is([class*="text-orange"], [class*="text-blue"], [class*="text-green"], [class*="text-purple"]),
html.light .sg-model-card :is([class*="text-orange"], [class*="text-blue"], [class*="text-green"], [class*="text-purple"]) {
  color: var(--ds2-text-2) !important;
}
/* 唯一的例外：价格用品牌色强调 */
html.dark .sg-model-card [class*="text-red"],
html.light .sg-model-card [class*="text-red"] {
  color: var(--ds2-brand) !important;
}

/* ==========================================================================
   §9 侧栏 / 导航
   ========================================================================== */
html.dark [data-slot="sidebar"],
html.light [data-slot="sidebar"] {
  background: var(--ds2-surface-1) !important;
  border-right: 1px solid var(--ds2-hairline) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  box-shadow: none !important;
}

html.dark [data-slot="sidebar-inset"],
html.light [data-slot="sidebar-inset"] {
  background: transparent !important;
  box-shadow: none !important;
}

html.dark [data-slot="sidebar-menu-button"],
html.light [data-slot="sidebar-menu-button"] {
  border-radius: 10px !important;
  color: var(--ds2-text-2) !important;
  font-weight: 450 !important;
  transition: background-color .18s ease, color .18s ease !important;
  box-shadow: none !important;
}

html.dark [data-slot="sidebar-menu-button"]:hover,
html.light [data-slot="sidebar-menu-button"]:hover {
  background: var(--ds2-surface-2) !important;
  color: var(--ds2-text) !important;
}

/* 激活态：淡品牌底 + 品牌字，无光轨无边框 */
html.dark [data-slot="sidebar-menu-button"][data-active="true"],
html.light [data-slot="sidebar-menu-button"][data-active="true"] {
  background: var(--ds2-brand-soft) !important;
  color: var(--ds2-brand) !important;
  font-weight: 550 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 自研导航按钮（shim 注入） */
html.dark .sg-nav-btn,
html.light .sg-nav-btn {
  border-radius: 10px !important;
  transition: background-color .18s ease, color .18s ease !important;
}
html.dark .sg-nav-btn--active,
html.light .sg-nav-btn--active {
  background: var(--ds2-brand-soft) !important;
  color: var(--ds2-brand) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.dark .sg-nav-num,
html.light .sg-nav-num {
  color: var(--ds2-text-4) !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-variant-numeric: tabular-nums !important;
}

/* ==========================================================================
   §10 输入 / 细节
   ========================================================================== */
html.dark [data-slot="select-trigger"],
html.light [data-slot="select-trigger"],
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.light input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.light textarea {
  border-radius: 10px !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):focus,
html.dark textarea:focus,
html.light input:not([type="checkbox"]):not([type="radio"]):focus,
html.light textarea:focus,
html.dark [data-slot="textarea"]:focus,
html.light [data-slot="textarea"]:focus {
  border-color: var(--ds2-brand) !important;
  box-shadow: 0 0 0 3px var(--ds2-brand-soft) !important;
  outline: none !important;
}

/* 滚动条：细、中性、悬停才明显 */
html.dark ::-webkit-scrollbar,
html.light ::-webkit-scrollbar { width: 10px !important; height: 10px !important; }

html.dark ::-webkit-scrollbar-track,
html.light ::-webkit-scrollbar-track { background: transparent !important; }

html.dark ::-webkit-scrollbar-thumb,
html.light ::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 100%, 0.14) !important;
  border-radius: 100px !important;
  border: 3px solid transparent !important;
  background-clip: content-box !important;
}
html.light ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.16) !important; background-clip: content-box !important; }

html.dark ::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.28) !important; background-clip: content-box !important; }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3) !important; background-clip: content-box !important; }

html.dark ::selection { background: rgba(77, 107, 254, 0.32) !important; color: #fff !important; }
html.light ::selection { background: rgba(77, 107, 254, 0.2) !important; color: #1a1a1a !important; }

/* autofill 不再发蓝 */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ds2-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #141414 inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}
html.light input:-webkit-autofill,
html.light input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ds2-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* kbd 键帽 */
html.dark kbd, html.light kbd {
  background: var(--ds2-surface-2) !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-bottom-width: 1px !important;
  border-radius: 6px !important;
  color: var(--ds2-text-2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 进度条 */
html.dark [data-slot="progress-track"],
html.light [data-slot="progress-track"] {
  background: var(--ds2-surface-2) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
}
html.dark [data-slot="progress-indicator"],
html.light [data-slot="progress-indicator"] {
  background: var(--ds2-brand) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
}

/* 通用：彻底禁掉残留的发光与文字辉光（deepspace-1 遗留的最大廉价感来源） */
html.dark [data-slot="card"],
html.light [data-slot="card"],
html.dark [data-slot="button"],
html.light [data-slot="button"],
html.dark [data-slot="badge"],
html.light [data-slot="badge"],
html.dark h1, html.light h1,
html.dark h2, html.light h2,
html.dark h3, html.light h3 {
  text-shadow: none !important;
}

/* ==========================================================================
   §11 交互层 —— 参考站的"交互感"来源，deepspace-1 几乎没有
   ========================================================================== */

/* 11.1 旋转渐变描边（签名效果）
   用于主 CTA 与"精选"卡片。@property 已注册，--border-angle 可平滑插值。
   手法：伪元素铺一层 conic-gradient，再用 mask 只留 2px 边。 */
html.dark .ds2-glow-border,
html.light .ds2-glow-border,
html.dark [data-slot="button"].ds2-glow-border,
html.light [data-slot="button"].ds2-glow-border {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
}

html.dark .ds2-glow-border::after,
html.light .ds2-glow-border::after,
html.dark [data-slot="button"].ds2-glow-border::after,
html.light [data-slot="button"].ds2-glow-border::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1.5px !important;
  background: conic-gradient(from var(--border-angle),
    rgba(77, 107, 254, 0) 0deg,
    rgba(77, 107, 254, 0.75) 60deg,
    rgba(160, 190, 255, 0.95) 120deg,
    rgba(77, 107, 254, 0) 200deg,
    rgba(77, 107, 254, 0) 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  animation: ds2-border-spin 4s linear infinite !important;
  pointer-events: none !important;
  z-index: 1;
}

/* 11.2 卡片进场：opacity + 上移 + 去模糊（三重，参考站同款） */
html.dark .ds2-enter,
html.light .ds2-enter {
  animation: ds2-enter .6s cubic-bezier(.22, .61, .36, 1) backwards !important;
}
html.dark .ds2-enter-1, html.light .ds2-enter-1 { animation-delay: .04s !important; }
html.dark .ds2-enter-2, html.light .ds2-enter-2 { animation-delay: .08s !important; }
html.dark .ds2-enter-3, html.light .ds2-enter-3 { animation-delay: .12s !important; }
html.dark .ds2-enter-4, html.light .ds2-enter-4 { animation-delay: .16s !important; }

/* 11.3 交互元素统一缓动（补齐 deepspace-1 缺失的过渡） */
html.dark a, html.light a,
html.dark [role="button"], html.light [role="button"],
html.dark [data-slot="tabs-trigger"], html.light [data-slot="tabs-trigger"],
html.dark [data-slot="select-trigger"], html.light [data-slot="select-trigger"] {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              opacity .2s ease !important;
}

html.dark a:hover, html.light a:hover { color: var(--ds2-brand) !important; }

/* 11.4 键盘可达性：统一 focus-visible 环 */
html.dark :focus-visible,
html.light :focus-visible {
  outline: 2px solid var(--ds2-brand) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   §13 真实 DOM 命中层 —— 本文件最重要的一节
   ─────────────────────────────────────────────────────────────────────────
   2026-09-23 用 CDP 实测发现：当前 build（rv.0000.2k6e8r7p）的标记与
   deepspace-1 皮肤假设的完全不同。实测命中数：

       [data-slot="card"]            → 0     .sg-model-card      → 0
       .sg-obsidian-card             → 0     [data-slot="table-row"] → 0
       [data-slot="sidebar-menu-button"] → 0 .sg-pricing-toolbar → 0
       .sg-nav-btn                   → 0     [data-slot="badge"] → 1
       [data-slot="button"].bg-primary → 2   .pricing-page h1    → 1

   即：**旧皮肤 11 个关键选择器有 8 个命中 0 个元素，基本是失效的**。
   用户看到的其实是 new-api 原始 UI —— 卡片硬编码 `#1f1f1f`、描边 `neutral-800`、
   强调色是 build 自带的**紫 #b9a7f8/#7c5fd8（各 22 处）+ 玉绿 #7fd6b6/#3f9e7e（各 6 处）**。

   本节的靶点全部来自 CDP 实测枚举，用属性子串选择器打 Tailwind 字面量。
   卡片结构实测为：div.grid > div.rounded-2xl.border（15 个 = 15 个模型卡）
   ⚠️ 换 build 后本节需重新枚举（脚本：scripts/probes/cdp-diag-page.cjs）
   ========================================================================== */

/* ---------- 13.1 卡片：模型广场的 15 张卡 ---------- */
html.dark .grid > .rounded-2xl,
html.light .grid > .rounded-2xl,
html.dark [class*="dark:bg-[#1f1f1f]"],
html.light [class*="dark:bg-[#1f1f1f]"],
html.dark [class*="dark:bg-[#212121]"],
html.light [class*="dark:bg-[#212121]"] {
  background: var(--ds2-surface-1) !important;
  background-color: var(--ds2-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-color: var(--ds2-hairline) !important;
  border-radius: 20px !important;
  box-shadow: var(--ds2-shadow-card), inset 0 1px 0 0 var(--ds2-inner-hi) !important;
  backdrop-filter: blur(var(--ds2-blur)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--ds2-blur)) saturate(1.3) !important;
  clip-path: none !important;
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease !important;
}

/* 卡片悬停：提升 + 描边提亮（替代 build 自带的 hover:shadow-xs） */
html.dark .grid > .rounded-2xl:hover,
html.light .grid > .rounded-2xl:hover {
  background: var(--ds2-surface-2) !important;
  border-color: var(--ds2-hairline-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ds2-shadow-pop), inset 0 1px 0 0 var(--ds2-inner-hi) !important;
}

/* 卡片内的次级容器（rounded-xl）与浅底块：统一中性玻璃 */
html.dark [class*="bg-neutral-50/70"],
html.light [class*="bg-neutral-50/70"],
html.dark [class*="dark:bg-neutral-900/60"],
html.light [class*="dark:bg-neutral-900/60"],
html.dark [class*="dark:bg-neutral-800"],
html.light [class*="dark:bg-neutral-800"] {
  background: var(--ds2-surface-2) !important;
  background-color: var(--ds2-surface-2) !important;
  border-color: var(--ds2-hairline) !important;
  border-radius: 12px !important;
}

/* ---------- 13.2 描边：全部收敛为发丝级中性 ---------- */
html.dark [class*="border-neutral-"],
html.light [class*="border-neutral-"],
html.dark [class*="dark:border-neutral-"],
html.light [class*="dark:border-neutral-"] {
  border-color: var(--ds2-hairline) !important;
}
/* 悬停时的描边提亮 */
html.dark [class*="hover:border-neutral-"]:hover,
html.light [class*="hover:border-neutral-"]:hover,
html.dark [class*="dark:hover:border-neutral-"]:hover,
html.light [class*="dark:hover:border-neutral-"]:hover {
  border-color: var(--ds2-hairline-strong) !important;
}

/* ---------- 13.3 文字：neutral 灰阶 → 中性文本令牌 ---------- */
html.dark [class*="text-neutral-400"],
html.dark [class*="text-neutral-500"],
html.dark [class*="text-neutral-600"] { color: var(--ds2-text-3) !important; }

html.light [class*="text-neutral-400"],
html.light [class*="text-neutral-500"],
html.light [class*="text-neutral-600"] { color: var(--ds2-text-3) !important; }

html.dark [class*="text-neutral-700"],
html.dark [class*="text-neutral-800"],
html.light [class*="text-neutral-700"],
html.light [class*="text-neutral-800"] { color: var(--ds2-text-2) !important; }

/* ---------- 13.4 强调色归一：紫 + 玉绿 → 唯一品牌色 ----------
   build 自带两个强调色（紫 #b9a7f8/#7c5fd8、玉绿 #7fd6b6/#3f9e7e），
   这正是"配色不克制"的根源。此处全部归到 --ds2-brand 一族。 */
html.dark [class*="text-[#b9a7f8]"], html.light [class*="text-[#b9a7f8]"],
html.dark [class*="text-[#7c5fd8]"], html.light [class*="text-[#7c5fd8]"],
html.dark [class*="text-[#3f9e7e]"], html.light [class*="text-[#3f9e7e]"] {
  color: var(--ds2-brand) !important;
}

html.dark [class*="bg-[#b9a7f8]"], html.light [class*="bg-[#b9a7f8]"],
html.dark [class*="bg-[#7c5fd8]"], html.light [class*="bg-[#7c5fd8]"],
html.dark [class*="bg-[#7fd6b6]"], html.light [class*="bg-[#7fd6b6]"] {
  background-color: var(--ds2-brand-soft) !important;
  background-image: none !important;
}

html.dark [class*="border-[#b9a7f8]"], html.light [class*="border-[#b9a7f8]"],
html.dark [class*="border-[#7fd6b6]"], html.light [class*="border-[#7fd6b6]"] {
  border-color: rgba(77, 107, 254, 0.35) !important;
}

/* 渐变强调（build 里 from-/to- 的紫色渐变）→ 去掉渐变，只留品牌色 */
html.dark [class*="from-[#b9a7f8]"], html.light [class*="from-[#b9a7f8]"],
html.dark [class*="to-[#b9a7f8]"], html.light [class*="to-[#b9a7f8]"] {
  background-image: none !important;
  background-color: var(--ds2-brand-soft) !important;
}

/* ---------- 13.5 徽章 / 状态标 ---------- */
html.dark [data-slot="status-badge"],
html.light [data-slot="status-badge"] {
  border-radius: 100px !important;
  background: var(--ds2-surface-2) !important;
  border: 1px solid var(--ds2-hairline) !important;
  color: var(--ds2-text-2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------- 13.6 栅格间距放松（"透气"来自间距，不来自装饰） ---------- */
html.dark .grid.gap-4, html.light .grid.gap-4 { gap: 1.125rem !important; }

/* ==========================================================================
   §14 影子根专章 —— 首页 galaxy 皮肤的收编
   ─────────────────────────────────────────────────────────────────────────
   2026-09-23 CDP 实测：首页内容不在文档树里，而在 `.custom-home-content` 的
   **shadowRoot** 内（346 元素 / 自带 326KB 内联样式 / 类名 snake-galaxy、sg-sky、
   sg-neb、sg-meteor、sg-orbit …）。这解释了为什么"看起来首页是空的"——
   innerText 与 querySelectorAll 都不穿透 shadow root。

   两条关键事实：
     1) 本文件**已被 shim 镜像进影子根**（影子根里能看到 <link .../site-deepspace-2.css>），
        所以下面的规则能生效。
     2) **`html.dark` 前缀在影子根里匹配不到任何元素**（影子根内没有 html 元素），
        必须改用 `.dark` —— 影子根的 wrapper 恰好带 `dark` 类。
        而自定义属性本来就会继承进影子根，故 §2 的令牌在内部天然可用。

   实测到的"赛博感"来源（本节的靶子）：
     .snake-galaxy  背景 rgb(4,6,13) 藏青
     .sg-prime      蓝色辉光 rgba(190,214,255,.8) 0 0 10px 2px + rgba(169,198,255,…)
     .sg-endpoint   藏青底 rgba(12,18,36,.68) / 描边 rgba(255,255,255,.24)
     .sg-kicker     描边 rgba(148,168,205,.2) 偏蓝
     全站字体       "Public Sans"（影子内显式指定，压过了继承）
     11 / 556 个元素带蓝色辉光
   ========================================================================== */

/* ---------- 14.1 画布：藏青 → 暖中性 ---------- */
.dark .snake-galaxy,
.light .snake-galaxy {
  background: var(--ds2-page) !important;
  background-color: var(--ds2-page) !important;
  background-image: none !important;
  color: var(--ds2-text) !important;
}

/* 干掉 build 在 body 上硬编码的蓝色径向渐变 */
html.dark body, html.light body {
  background-image: none !important;
}

/* ---------- 14.2 字体归一：影子内显式指定的 Public Sans → 本站字体栈 ----------
   保留等宽元素（kicker / endpoint / code / kbd）不被覆盖。 */
.dark .snake-galaxy,
.dark .snake-galaxy *:not(code):not(pre):not(kbd):not(.sg-kicker):not(.sg-endpoint),
.light .snake-galaxy,
.light .snake-galaxy *:not(code):not(pre):not(kbd):not(.sg-kicker):not(.sg-endpoint) {
  font-family: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.dark .snake-galaxy h1, .light .snake-galaxy h1 {
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}
.dark .snake-galaxy h3, .light .snake-galaxy h3 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

/* ---------- 14.3 蓝色辉光 → 中性投影 ---------- */
.dark .sg-prime, .light .sg-prime {
  background: #f5f5f5 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18),
              0 0 24px 4px rgba(255, 255, 255, 0.10) !important;
}
.light .sg-prime {
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08),
              0 0 24px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 其余带蓝辉光的强调元素统一去辉光 */
.dark .sg-meteor-brand, .light .sg-meteor-brand,
.dark .sg-live-dot, .light .sg-live-dot {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* ---------- 14.4 端点条 / kicker：藏青玻璃 → 中性玻璃 ---------- */
.dark .sg-endpoint, .light .sg-endpoint {
  background: var(--ds2-surface-2) !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-color: var(--ds2-hairline) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 0 var(--ds2-inner-hi) !important;
  backdrop-filter: blur(var(--ds2-blur)) !important;
  -webkit-backdrop-filter: blur(var(--ds2-blur)) !important;
}

.dark .sg-kicker, .light .sg-kicker {
  border-color: var(--ds2-hairline) !important;
  background: var(--ds2-surface-1) !important;
  border-radius: 100px !important;
  color: var(--ds2-text-3) !important;
}

/* ---------- 14.5 卡片/面板类（影子内的 rounded + border 组合） ---------- */
.dark .snake-galaxy [class*="rounded"]:not(.sg-prime):not(.sg-live-dot),
.light .snake-galaxy [class*="rounded"]:not(.sg-prime):not(.sg-live-dot) {
  border-color: var(--ds2-hairline) !important;
}

/* ---------- 14.6 星空/星云图层降噪（保留结构，压低存在感） ----------
   用户要的是"克制的高级感"，不是"银河特效"。把星点/星云压到很淡。 */
.dark .sg-stars-a, .dark .sg-stars-b, .dark .sg-stars-c,
.light .sg-stars-a, .light .sg-stars-b, .light .sg-stars-c {
  opacity: .5 !important;
}
.dark .sg-neb, .light .sg-neb,
.dark .sg-milky, .light .sg-milky {
  opacity: .35 !important;
}

/* ---------- 14.7 指标卡与残留蓝辉光（实测第二轮：24 个元素仍有蓝色）----------
   实测清单：sg-metric-card ×8 + sg-metric-card.sg-mc-top-card ×1（主要来源）、
   sg-today-reqs ×2、sg-galaxy-halo ×1、sg-mc-bar-fill.ice ×1，
   以及 i/b/strong/em/a 共 10 个内联元素（蓝色 text-shadow）。 */
.dark .sg-metric-card, .light .sg-metric-card {
  background: var(--ds2-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--ds2-hairline) !important;
  border-radius: 16px !important;
  box-shadow: var(--ds2-shadow-card), inset 0 1px 0 0 var(--ds2-inner-hi) !important;
  backdrop-filter: blur(var(--ds2-blur)) !important;
  -webkit-backdrop-filter: blur(var(--ds2-blur)) !important;
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease !important;
}
.dark .sg-metric-card:hover, .light .sg-metric-card:hover {
  background: var(--ds2-surface-2) !important;
  border-color: var(--ds2-hairline-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ds2-shadow-pop), inset 0 1px 0 0 var(--ds2-inner-hi) !important;
}

/* 指标卡内的进度条 / 数值强调 → 品牌色，去掉"冰蓝" */
.dark .sg-mc-bar-fill, .light .sg-mc-bar-fill {
  background: var(--ds2-brand) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 今日请求数等文本强调 → 中性文本色 */
.dark .sg-today-reqs, .light .sg-today-reqs,
.dark .sg-today-tokens, .light .sg-today-tokens {
  color: var(--ds2-text) !important;
  text-shadow: none !important;
}

/* 光晕图层：几乎抹平（"克制"优先于"特效"） */
.dark .sg-galaxy-halo, .light .sg-galaxy-halo {
  opacity: .25 !important;
  filter: none !important;
}

/* 内联元素的蓝色文字辉光 → 全部清零 */
.dark .snake-galaxy i, .light .snake-galaxy i,
.dark .snake-galaxy b, .light .snake-galaxy b,
.dark .snake-galaxy strong, .light .snake-galaxy strong,
.dark .snake-galaxy em, .light .snake-galaxy em,
.dark .snake-galaxy a, .light .snake-galaxy a {
  text-shadow: none !important;
}

/* ==========================================================================
   §12 无障碍：尊重 prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.dark *, html.light *,
  html.dark *::before, html.light *::before,
  html.dark *::after, html.light *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.dark .ds2-glow-border::after,
  html.light .ds2-glow-border::after {
    animation: none !important;
    background: rgba(77, 107, 254, 0.6) !important;
  }
}