/* 研路AI × Sub2API 主题层 (自包含: DS tokens + 品牌覆盖). Google-Fonts CDN 已移除, 保留系统字体回退. */


/* ===== ds/colors.css ===== */
/* 研路AI — 色彩 tokens（极简黑白 · 暗色 · 冰蓝仅作点缀） */
:root {
  /* 基底 · 曜石黑（禁用纯黑 #000） */
  --obsidian-0: #0A0A0B; /* 主背景 */
  --obsidian-1: #101012; /* 抬升背景 */
  --obsidian-2: #141416; /* 面板 */
  --obsidian-3: #1C1C1E; /* 实底卡片 */
  --white-0: #FAFAFA;    /* 近白主文字 */

  /* 灰阶（细腻层级，10 级） */
  --gray-50:  #FAFAFA;
  --gray-100: #E8E8EA;
  --gray-200: #C9C9CE;
  --gray-300: #A8A8AF;
  --gray-400: #8A8A8F;
  --gray-500: #5A5A60;
  --gray-600: #3A3A3F;
  --gray-700: #2A2A2E;
  --gray-800: #1C1C1E;
  --gray-900: #141416;

  /* 点缀 · 冰蓝（只用于玻璃描边 / 关键高光 / 聚焦） */
  --ice-blue: #7DA8FF;
  --ice-blue-soft: rgba(125, 168, 255, 0.35);
  --ice-blue-glow: rgba(125, 168, 255, 0.18);

  /* 语义 · 背景与表面 */
  --bg-base: var(--obsidian-0);
  --bg-raised: var(--obsidian-1);
  --bg-panel: var(--obsidian-2);
  --surface-card: #141416;
  --surface-card-hover: #18181B;

  /* 语义 · 文字 */
  --text-1: var(--white-0);      /* 主文字 */
  --text-2: #A8A8AF;             /* 次级 */
  --text-3: #6A6A70;             /* 三级/占位 */
  --text-disabled: #4A4A50;

  /* 语义 · 边界 */
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* 液态玻璃 */
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.28);
  --glass-blur: 24px; /* @kind other */

  /* 渐变 */
  --gradient-silver: linear-gradient(135deg, #E8E8EA 0%, #8A8A8F 52%, #1C1C1E 100%); /* @kind color */
  --gradient-text-silver: linear-gradient(180deg, #FAFAFA 0%, #C9C9CE 55%, #7A7A80 100%); /* @kind color */
  --gradient-holo: linear-gradient(115deg, rgba(125,168,255,.9), rgba(196,181,255,.85) 30%, rgba(255,214,235,.8) 55%, rgba(168,230,255,.85) 80%, rgba(125,168,255,.9)); /* @kind color */
  --gradient-glass-edge: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.07) 38%, rgba(125,168,255,.30) 70%, rgba(255,255,255,.16)); /* @kind color */

  /* 状态（低饱和、克制） */
  --status-online: #64D68C;   /* 在线 */
  --status-degraded: #E3C06A; /* 降级（切备用） */
  --status-offline: #8A8A8F;  /* 离线 */
  --danger: #F07A7A;
  --danger-soft: rgba(240, 122, 122, 0.14);
}


/* ===== ds/typography.css ===== */
/* 研路AI — 字体排印 tokens */
:root {
  /* 字号 */
  --fs-display: 56px;
  --fs-h1: 34px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body-lg: 16px;
  --fs-body: 14px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  /* 行高 */
  --lh-display: 1.1; /* @kind font */
  --lh-heading: 1.25; /* @kind font */
  --lh-body: 1.7; /* @kind font */
  --lh-caption: 1.5; /* @kind font */

  /* 字重（中文避免 300 以下） */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */

  /* 字距 */
  --tracking-tight: -0.02em; /* @kind font */
  --tracking-normal: 0.01em; /* @kind font */
  --tracking-wide: 0.12em; /* @kind font */
}


/* ===== ds/spacing.css ===== */
/* 研路AI — 间距 / 圆角 tokens（8pt 系统） */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* 圆角：卡片 16–20 / 按钮与输入 12 / 胶囊全圆 */
  --radius-sm: 8px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --radius-card: 18px;
  --radius-lg: 20px;
  --radius-full: 999px;
}


/* ===== ds/effects.css ===== */
/* 研路AI — 层级 / 光效 / 动效 tokens（靠模糊与层次，不靠重投影） */
:root {
  /* Elevation：0 平面 → 3 浮起玻璃 */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --elevation-2: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --elevation-3: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
  --elevation-glass: 0 24px 64px -16px rgba(0, 0, 0, 0.65), 0 0 80px -20px var(--ice-blue-glow);

  /* 高光 / 辉光 */
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glow-ice: 0 0 40px -4px rgba(125, 168, 255, 0.22);
  --glow-white: 0 0 60px -12px rgba(232, 232, 234, 0.25);
  --focus-ring: 0 0 0 3px rgba(125, 168, 255, 0.16);

  /* 极细噪点（叠加于背景，opacity ≈ .05） */
  --noise-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */

  /* 动效 */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 480ms; /* @kind other */
}


/* ===== ds/materials.css ===== */
/* 研路AI — 材质三件套：哑光曜石 / 高光黑 / 液态玻璃 */
:root {
  --material-obsidian: #121214;
  --material-obsidian-border: rgba(255, 255, 255, 0.07);
  --material-glossy: linear-gradient(180deg, #202023 0%, #0D0D0E 100%); /* @kind color */
  --material-glossy-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.6); /* @kind shadow */
}

/* 哑光曜石：吸光、无高光 */
.yl-obsidian {
  background: var(--material-obsidian);
  border: 1px solid var(--material-obsidian-border);
  border-radius: var(--radius-card);
}

/* 高光黑：顶部镜面高光 + 纵向明暗 */
.yl-glossy {
  background: var(--material-glossy);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-card);
  box-shadow: var(--material-glossy-highlight), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}

/* 液态玻璃：磨砂半透明 + 内高光 + 虹彩细边（::before 描边环） */
.yl-glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 24px 64px -24px rgba(0, 0, 0, 0.6);
}
.yl-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}


/* ===== ds/fonts.css ===== */
/* 研路AI — 字体
   替代说明：原始意向为 Geist / Aeonik（拉丁）+ 思源黑体 / HarmonyOS Sans（中文）。
   Geist 与 Noto Sans SC（= 思源黑体的 Web 发行名）均来自 Google Fonts CDN。
   如需离线/自托管，请提供 woff2 文件并替换为 @font-face 规则。 */
/* @import removed (CN-safe) */

:root {
  --font-sans: 'Geist', 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', 'Noto Sans SC', monospace;
}


/* ===== yanlu-sub2api.css (品牌覆盖) ===== */
/* ============================================================================
 * 研路AI × Sub2API — 品牌主题层（重构版 · 直接复用「研路AI 设计规范」token）
 * ----------------------------------------------------------------------------
 * 本文件不再手写颜色/材质，而是 @import 研路AI 设计系统的 token（ds/*.css），
 * 全部通过 var(--*) 引用：曜石黑 / 近白 / 冰蓝点缀 / 液态玻璃(.yl-glass 配方) /
 * 银渐变 / elevation / focus-ring / 噪点场景。与设计规范同源，规范升级即同步。
 *
 * 覆盖对象仍是 sub2api 前端最稳定的语义类（style.css 的 .btn/.card/.sidebar…
 * 与 Tailwind 调色板 primary/dark），随官方镜像更新不失效。
 *
 * 极简黑白：主色除黑白外「极度克制」——冰蓝仅用于 聚焦环 + 1px 虹彩描边；
 * 文字链接按规范收为 灰→白，不用彩色。
 * ========================================================================== */

/* —— 复用设计规范 token（唯一来源）——————————————————————————————————— */
@import url("ds/fonts.css");        /* --font-sans / --font-mono (Geist + Noto Sans SC) */
@import url("ds/colors.css");       /* 曜石 / 灰阶 / 冰蓝 / 语义色 / 渐变 */
@import url("ds/typography.css");   /* 字号 / 行高 / 字重 / 字距 */
@import url("ds/spacing.css");      /* 8pt + 圆角 --radius-* */
@import url("ds/effects.css");      /* elevation / inset-highlight / focus-ring / noise / ease */
@import url("ds/materials.css");    /* 哑光曜石 / 高光黑 / 液态玻璃 .yl-glass */

/* ============================================================================
 * 0 · 字体（规范：Geist + Noto Sans SC；等宽 Geist Mono）
 * ========================================================================== */
html, body,
button, input, textarea, select,
.btn, .input, .badge, .sidebar-link, .dropdown-item, .modal-title, .page-title {
  font-family: var(--font-sans) !important;
}
code, pre, .code, .code-block, .font-mono, [class*="tabular-nums"] {
  font-family: var(--font-mono) !important;
}

/* ============================================================================
 * 1 · 基底：曜石黑 + 近白（暗色强制常开，见 yanlu-sub2api.js）
 * ========================================================================== */
html.dark body,
.dark .bg-gray-50,
.dark .min-h-screen.bg-gray-50,
.dark .dark\:bg-dark-950 { background-color: var(--bg-base) !important; }
.dark body { color: var(--text-1); }

.dark .dark\:bg-dark-900 { background-color: var(--bg-raised) !important; }
.dark .dark\:bg-dark-800 { background-color: var(--bg-panel) !important; }
.dark .dark\:bg-dark-800\/50 { background-color: rgba(20, 20, 22, 0.5) !important; }
.dark .dark\:bg-dark-800\/30 { background-color: rgba(20, 20, 22, 0.4) !important; }
.dark .dark\:bg-dark-700 { background-color: var(--obsidian-3) !important; }
.dark .dark\:bg-dark-700\/30 { background-color: rgba(28, 28, 30, 0.4) !important; }
.dark .dark\:bg-dark-900\/40 { background-color: rgba(16, 16, 18, 0.55) !important; }

.dark .dark\:border-dark-700,
.dark .dark\:border-dark-800,
.dark .dark\:border-dark-500,
.dark .dark\:border-dark-700\/50,
.dark .border-gray-200\/50 { border-color: var(--border-hairline) !important; }
.dark .dark\:border-dark-600 { border-color: var(--border-strong) !important; }

.dark .dark\:text-dark-400 { color: var(--text-2) !important; }
.dark .dark\:text-dark-500 { color: var(--text-3) !important; }

/* ============================================================================
 * 2 · 场景：复用规范 .yl-scene 配方（冷白 + 极淡冰蓝 + 银灰 + 噪点）
 * ========================================================================== */
.dark .bg-mesh-gradient {
  background-image:
    radial-gradient(42% 34% at 50% 4%, rgba(232, 232, 234, 0.05), transparent 62%),
    radial-gradient(30% 26% at 84% 74%, rgba(125, 168, 255, 0.035), transparent 65%),
    radial-gradient(36% 30% at 8% 86%, rgba(138, 138, 143, 0.05), transparent 60%) !important;
}
/* AuthLayout 整屏渐变（base 里被硬编码成 slate 蓝）→ 曜石黑 */
.dark .bg-gradient-to-br.dark\:via-dark-900 { background-image: linear-gradient(160deg, var(--bg-base) 0%, #0c0c0e 55%, #090909 100%) !important; }
/* 登录页装饰光斑 orbs：冷白 / 银（去蓝） */
.bg-primary-400\/20 { background-color: rgba(232, 232, 234, 0.05) !important; }
.bg-primary-500\/15 { background-color: rgba(180, 184, 196, 0.045) !important; }
.bg-primary-300\/10 { background-color: rgba(255, 255, 255, 0.045) !important; }
/* 网格线：青 → 极淡冷白 */
.dark .bg-\[linear-gradient\(rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\,linear-gradient\(90deg\,rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\] { background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important; }
/* 主色阴影（登录 Logo 方块等）：青光晕 → 中性 */
.dark .shadow-primary-500\/30, .dark .shadow-primary-500\/25, .dark .shadow-primary-500\/20 { box-shadow: var(--elevation-2), 0 0 0 1px var(--border-hairline) !important; }

/* ============================================================================
 * 3 · 卡片 / 玻璃 / 头部（复用规范材质与 elevation）
 * ========================================================================== */
.dark .card {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--inset-highlight), var(--elevation-2) !important;
}
.dark .card-hover:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--inset-highlight), var(--elevation-3) !important;
}
/* 液态玻璃：规范 .yl-glass 配方（blur + 内高光 + ::before 虹彩 1px 描边） */
.dark .glass-card,
.dark .card-glass {
  position: relative;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--inset-highlight), var(--elevation-3) !important;
}
.dark .glass-card::before,
.dark .card-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.dark .glass,
.dark .dark\:bg-dark-800\/80,
.dark .dark\:bg-dark-800\/70 {
  background-color: rgba(16, 16, 18, 0.72) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
}

/* ============================================================================
 * 4 · 侧边栏（曜石面板；选中=近白 + 白描边，不用彩色）
 * ========================================================================== */
.dark .sidebar {
  background-color: var(--bg-raised) !important;
  border-right: 1px solid var(--border-hairline) !important;
}
.dark .sidebar-link { color: var(--text-2) !important; border-radius: var(--radius-btn) !important; }
.dark .sidebar-link:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--white-0) !important; }
.dark .sidebar-link-active,
.dark .sidebar-link-active:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: var(--white-0) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
.dark .sidebar-section-title { color: var(--text-3) !important; }
.dark .sidebar-logo { box-shadow: 0 0 0 1px var(--border-hairline) !important; }

/* ============================================================================
 * 5 · 按钮：主按钮「实心近白」（规范）；次级/ghost 走玻璃；危险=柔红
 * ========================================================================== */
.dark .btn-primary,
.btn-primary {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--gray-100) 100%) !important;
  color: var(--obsidian-0) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 24px -12px rgba(255, 255, 255, 0.25) !important;
}
.dark .btn-primary:hover,
.btn-primary:hover {
  background-image: linear-gradient(180deg, #ffffff 0%, #d8d8dd 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), var(--glow-white), 0 10px 28px -12px rgba(255,255,255,0.3) !important;
}
.dark .btn-secondary {
  background: var(--glass-bg) !important;
  color: var(--white-0) !important;
  border: 1px solid var(--border-strong) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.dark .btn-secondary:hover { background: var(--glass-bg-strong) !important; border-color: var(--ice-blue-soft) !important; }
.dark .btn-ghost { color: var(--text-2) !important; }
.dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--white-0) !important; }
/* 聚焦环：规范里冰蓝的正当用途 */
.dark .btn:focus, .dark .btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ice-blue), var(--focus-ring) !important;
}

/* ============================================================================
 * 6 · 文字与点缀：链接=灰→白（规范 a 的做法）；主色极度克制
 * ========================================================================== */
/* 链接 / primary 文字 → 近白灰，hover 变白（不用彩色） */
.dark .text-primary-400, .dark .dark\:text-primary-400,
.dark .text-primary-600, .dark .text-primary-700,
.dark .text-primary-300, .dark .dark\:text-primary-300,
.dark .text-primary-500 { color: var(--gray-200) !important; }
.dark .hover\:text-primary-500:hover, .dark .hover\:text-primary-700:hover,
.dark .group-hover\:text-primary-500:hover,
.dark .dark\:hover\:text-primary-300:hover { color: var(--white-0) !important; }

/* primary 实底/半透（进度、quota、图表、开关、chip 底）→ 银灰/中性，不用彩色 */
.dark .bg-primary-500, .dark .bg-primary-600, .dark .dark\:bg-primary-600 { background-color: transparent !important; background-image: linear-gradient(180deg, var(--gray-100) 0%, var(--gray-300) 55%, var(--gray-500) 100%) !important; }
.dark .switch-active { background-color: var(--gray-300) !important; }
.dark .progress-bar { background-image: linear-gradient(90deg, var(--gray-400) 0%, var(--gray-100) 100%) !important; }
.dark .bg-primary-50, .dark .dark\:bg-primary-900\/20, .dark .dark\:bg-primary-900\/30, .dark .bg-primary-100 { background-color: rgba(255, 255, 255, 0.055) !important; }

/* 输入聚焦：冰蓝 1px 边 + focus-ring（规范） */
.dark .focus\:ring-primary-500\/50:focus, .dark .focus\:ring-primary-500\/30:focus,
.dark .focus\:border-primary-500:focus {
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
}

/* 代码 chip / 加载 / 选中 */
.dark .code { background: var(--obsidian-3) !important; color: var(--gray-100) !important; }
.dark .spinner { color: var(--gray-200) !important; }
.dark ::selection { background: var(--ice-blue-soft); color: var(--white-0); }

/* 品牌标题银渐变（规范 --gradient-text-silver） */
.text-gradient {
  background-image: var(--gradient-text-silver) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ============================================================================
 * 7 · 输入 / 表格 / 徽章 / 下拉 / 弹窗 / 标签页
 * ========================================================================== */
.dark .input {
  background-color: var(--obsidian-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--white-0) !important;
  border-radius: var(--radius-input) !important;
}
.dark .input::placeholder { color: var(--text-3) !important; }

.dark .table th { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--text-2) !important; border-bottom-color: var(--border-hairline) !important; }
.dark .table td { color: var(--text-2) !important; border-bottom-color: var(--border-hairline) !important; }
.dark .table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03) !important; }
.dark .table-container { border-color: var(--border-hairline) !important; }

.dark .dropdown, .dark .modal-content, .dark .dialog-container {
  background-color: rgba(16, 16, 18, 0.9) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--inset-highlight), var(--elevation-3) !important;
}
.dark .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.06) !important; }
.dark .modal-overlay, .dark .dialog-overlay { background-color: rgba(6, 6, 7, 0.62) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.dark .tabs { background-color: var(--obsidian-3) !important; }
.dark .tab-active { background-color: var(--bg-raised) !important; color: var(--white-0) !important; box-shadow: var(--inset-highlight) !important; }

/* 徽章：语义 → 规范状态色（低饱和），primary/purple 收为中性 */
.dark .badge-primary { background: rgba(255, 255, 255, 0.07) !important; color: var(--gray-100) !important; }
.dark .badge-purple  { background: rgba(255, 255, 255, 0.07) !important; color: var(--gray-100) !important; }
.dark .badge-success { background: rgba(100, 214, 140, 0.14) !important; color: var(--status-online) !important; }
.dark .badge-warning { background: rgba(227, 192, 106, 0.14) !important; color: var(--status-degraded) !important; }
.dark .badge-danger  { background: rgba(240, 122, 122, 0.14) !important; color: var(--danger) !important; }
.dark .badge-gray    { background: rgba(255, 255, 255, 0.06) !important; color: var(--text-2) !important; }

/* ============================================================================
 * 8 · 图标底片去彩 → 统一曜石微白；文字状态色用规范 token
 * ========================================================================== */
.dark .dark\:bg-emerald-900\/30, .dark .dark\:bg-blue-900\/30, .dark .dark\:bg-green-900\/30,
.dark .dark\:bg-purple-900\/30, .dark .dark\:bg-amber-900\/30, .dark .dark\:bg-indigo-900\/30,
.dark .dark\:bg-violet-900\/30, .dark .dark\:bg-rose-900\/30, .dark .dark\:bg-sky-900\/30,
.dark .bg-emerald-100, .dark .bg-blue-100, .dark .bg-green-100, .dark .bg-purple-100,
.dark .bg-amber-100, .dark .bg-indigo-100, .dark .bg-violet-100, .dark .bg-rose-100, .dark .bg-sky-100 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
/* 功能性状态文字：规范低饱和状态色；装饰性紫/蓝/靛/天 → 近白（去彩） */
.dark .dark\:text-emerald-400, .dark .text-emerald-600, .dark .dark\:text-green-400, .dark .text-green-600, .dark .text-green-400 { color: var(--status-online) !important; }
.dark .dark\:text-amber-400, .dark .text-amber-600, .dark .dark\:text-yellow-400, .dark .text-yellow-500 { color: var(--status-degraded) !important; }
.dark .dark\:text-red-400, .dark .text-red-500, .dark .text-red-600 { color: var(--danger) !important; }
.dark .dark\:text-blue-400, .dark .text-blue-600, .dark .dark\:text-purple-400, .dark .text-purple-600,
.dark .dark\:text-indigo-400, .dark .dark\:text-violet-400, .dark .text-violet-600, .dark .dark\:text-sky-400, .dark .text-sky-600 { color: var(--gray-100) !important; }

/* 功能性进度/额度条填充 → 规范状态色 */
.dark .bg-green-500, .dark .bg-emerald-500 { background-color: var(--status-online) !important; }
.dark .bg-amber-500, .dark .bg-yellow-500 { background-color: var(--status-degraded) !important; }
.dark .bg-red-500 { background-color: var(--danger) !important; }

/* 头像渐变：青 → 银 */
.dark .from-primary-500 { --tw-gradient-from: var(--gray-100) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(232,232,234,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .to-primary-600 { --tw-gradient-to: var(--gray-400) var(--tw-gradient-to-position) !important; }
.dark .from-primary-500.to-primary-600 { color: var(--obsidian-0) !important; }

/* 滚动条 / 空状态 */
.dark *:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.18) !important; }
.dark .empty-state-icon, .dark .dark\:text-dark-600 { color: rgba(255, 255, 255, 0.16) !important; }

/* ============================================================================
 * 9 · 全量美化补漏：选中边框 / 并发徐标 emerald / 会员卡描边 —— 去青
 * ========================================================================== */
.dark .border-primary-500 { border-color: var(--gray-200) !important; }
.dark .border-primary-400, .dark .hover\:border-primary-400:hover { border-color: var(--border-strong) !important; }
.dark .dark\:bg-emerald-900\/25 { background-color: rgba(100, 214, 140, 0.14) !important; }
.dark .dark\:text-emerald-300 { color: var(--status-online) !important; }
.dark .dark\:ring-emerald-800, .dark .ring-emerald-200 { --tw-ring-color: transparent !important; box-shadow: inset 0 0 0 1px rgba(100,214,140,0.25) !important; }


/* ===== sections/10-decolor-generic.css ===== */
/* ============================================================================
 * 10-decolor-generic.css — 全局「去彩兜底」层（拼接于 00核心 之后）
 * ----------------------------------------------------------------------------
 * 段职责（对应缺口报告 §5「通用兜底」+ P1 ⑨⑩⑪）：
 *   把 REPORT-color-classes.txt 中「目标调色板」的带色原子类（text-/bg-/border-/
 *   ring-/shadow-/decoration-/from-/via-/to- 前缀，含 hover:/focus:/active:/
 *   group-hover:/group-focus-within:/dark: 变体与 /透明度 后缀）整组重映射到
 *   灰阶·银 token，并把 Tailwind v3 渐变 stop 归一到银灰。
 *
 * 目标调色板：orange / sky / rose / pink / fuchsia / zinc / slate / neutral /
 *   cyan / teal / lime，及 blue / indigo / purple / violet / amber 中 00核心
 *   §8/§9 尚未覆盖的残留（已在生成器 EXCLUDE 名单中剔除，杜绝重复/冲突）。
 *
 * 语义纪律：
 *   - 全部规则加 .dark 前缀（注入 JS 保证 .dark 恒在）+ 每条声明 !important。
 *   - amber 视作「降级/警告」语义家族 → amber 文字统一 --status-degraded；
 *     amber 的装饰性底片/边框/投影/渐变仍去彩为灰银。
 *   - 冰蓝只用于 focus 态（focus:ring-* / focus:border-*）——规范允许的点缀。
 *   - 彩色投影 → --elevation-2 去彩；渐变 stop → 银灰三段（近白/银/曜石）归一。
 *
 * shade 映射基准（与 00核心同一语言）：
 *   text  50–200→gray-100 · 300/400→gray-300 · 500/600→gray-200 · 700+→text-1
 *   bg    50–200 及带透明→白微片 rgba(255,255,255,.05~.08) · 500/600→银灰实底
 *         --gray-300(纯 background-color,不用 background-image,以便 30/40 段容器
 *         规则用 color-only 覆盖取胜) · 700–950→--obsidian-3 曜石面板
 *   border ≤300→hairline · ≥400→strong · 单边(spinner 弧)→gray-300
 *   grad  from/light→gray-100(或低透明白) · via→gray-400 · to→gray-400/gray-700
 *
 * 边界声明（不越界，交由相邻段以更高特异度覆盖）：
 *   - green/red/yellow/emerald 的状态语义映射 → 00核心（§8/§9），本段不碰。
 *   - .btn-stripe/-alipay/-wxpay/-airwallex 等支付品牌色 → 永不触碰。
 *   - .markdown-body 内部 → 30 段。
 *   - Toast / 公告弹窗 / 监控卡 等容器限定高特异度规则 → 30/40 段；
 *     本段仅提供「裸原子类」兜底，30/40 段会以容器选择器叠加取胜。
 * ========================================================================== */

/* ---- 文字色 → 灰阶分级 (amber→degraded) ---- */
.dark .text-amber-700,
.dark .dark\:text-amber-300,
.dark .dark\:text-amber-200,
.dark .text-amber-500,
.dark .text-amber-800,
.dark .dark\:text-amber-100,
.dark .text-amber-900,
.dark .dark\:text-amber-400\/70,
.dark .text-amber-600\/70,
.dark .dark\:text-amber-500,
.dark .text-amber-200,
.dark .text-amber-400 { color: var(--status-degraded) !important; }
.dark .text-blue-700,
.dark .text-purple-700,
.dark .text-orange-700,
.dark .text-sky-700,
.dark .text-blue-900,
.dark .text-zinc-800,
.dark .text-blue-800,
.dark .text-pink-700,
.dark .text-indigo-700,
.dark .text-rose-700,
.dark .text-violet-700,
.dark .text-cyan-700,
.dark .text-purple-800,
.dark .text-slate-700,
.dark .text-orange-800,
.dark .text-teal-700,
.dark .text-violet-800,
.dark .text-blue-700\/80,
.dark .text-zinc-700,
.dark .text-indigo-800,
.dark .text-lime-700,
.dark .text-sky-800,
.dark .text-sky-900,
.dark .text-fuchsia-700,
.dark .text-rose-900,
.dark .text-zinc-900 { color: var(--text-1) !important; }
.dark .dark\:text-orange-400,
.dark .dark\:text-blue-300,
.dark .dark\:text-rose-400,
.dark .dark\:text-purple-300,
.dark .dark\:text-pink-400,
.dark .dark\:text-sky-300,
.dark .dark\:text-orange-300,
.dark .dark\:text-slate-300,
.dark .dark\:text-cyan-400,
.dark .dark\:text-teal-400,
.dark .dark\:text-slate-400,
.dark .text-blue-400,
.dark .dark\:text-lime-400,
.dark .dark\:text-rose-300,
.dark .dark\:text-violet-300,
.dark .dark\:text-zinc-300,
.dark .text-cyan-300,
.dark .text-pink-300,
.dark .text-sky-300,
.dark .dark\:text-pink-300,
.dark .text-cyan-400,
.dark .text-purple-300,
.dark .text-rose-400,
.dark .dark\:text-blue-400\/20,
.dark .dark\:text-cyan-300,
.dark .dark\:text-fuchsia-400,
.dark .dark\:text-indigo-300,
.dark .text-orange-400,
.dark .text-slate-400,
.dark .text-violet-300,
.dark .text-zinc-300 { color: var(--gray-300) !important; }
.dark .text-blue-500,
.dark .text-orange-600,
.dark .text-rose-600,
.dark .text-orange-500,
.dark .text-indigo-600,
.dark .text-slate-600,
.dark .text-rose-500,
.dark .text-purple-500,
.dark .text-indigo-500,
.dark .text-slate-500,
.dark .text-teal-600,
.dark .text-cyan-600,
.dark .text-lime-600,
.dark .text-pink-600,
.dark .text-blue-500\/20,
.dark .text-pink-500,
.dark .text-sky-500,
.dark .text-teal-500,
.dark .text-violet-500,
.dark .text-zinc-600 { color: var(--gray-200) !important; }
.dark .dark\:text-blue-200,
.dark .dark\:text-zinc-200,
.dark .dark\:text-violet-200,
.dark .dark\:text-zinc-100,
.dark .dark\:text-indigo-200,
.dark .dark\:text-purple-200,
.dark .dark\:text-sky-200,
.dark .dark\:text-sky-100,
.dark .dark\:text-slate-200,
.dark .text-indigo-200,
.dark .dark\:text-rose-100,
.dark .dark\:text-rose-200,
.dark .text-blue-100,
.dark .text-blue-200,
.dark .text-orange-100,
.dark .text-orange-200,
.dark .text-purple-100,
.dark .text-purple-200,
.dark .text-sky-200,
.dark .text-zinc-100 { color: var(--gray-100) !important; }

/* ---- hover/focus/group-hover 文字 → 近白 ---- */
.dark .hover\:text-blue-600:hover,
.dark .dark\:hover\:text-blue-400:hover,
.dark .dark\:hover\:text-blue-300:hover,
.dark .hover\:text-amber-500:hover,
.dark .hover\:text-blue-800:hover,
.dark .hover\:text-blue-900:hover,
.dark .dark\:hover\:text-orange-400:hover,
.dark .hover\:text-blue-700:hover,
.dark .hover\:text-orange-600:hover,
.dark .group:hover .dark\:group-hover\:text-blue-400,
.dark .group:hover .group-hover\:text-blue-500,
.dark .group:hover .group-hover\:text-sky-500,
.dark .dark\:hover\:text-amber-300:hover,
.dark .dark\:hover\:text-amber-400:hover,
.dark .dark\:hover\:text-purple-400:hover,
.dark .group:focus-within .group-focus-within\:text-blue-500,
.dark .group:hover .group-hover\:text-amber-500,
.dark .hover\:text-amber-700:hover,
.dark .hover\:text-blue-300:hover,
.dark .hover\:text-blue-500:hover,
.dark .hover\:text-orange-700:hover,
.dark .hover\:text-purple-600:hover,
.dark .hover\:text-rose-700:hover,
.dark .hover\:text-sky-700:hover,
.dark .hover\:text-zinc-800:hover { color: var(--white-0) !important; }

/* ---- 背景填充 → 白色底片/银渐变/曜石面板 ---- */
.dark .bg-amber-50,
.dark .dark\:bg-amber-900\/20,
.dark .bg-orange-100,
.dark .bg-blue-50,
.dark .dark\:bg-orange-900\/30,
.dark .dark\:bg-blue-900\/20,
.dark .bg-purple-50,
.dark .dark\:bg-purple-900\/20,
.dark .dark\:bg-blue-900\/40,
.dark .bg-sky-50,
.dark .dark\:bg-purple-900\/40,
.dark .dark\:bg-sky-900\/20,
.dark .bg-pink-100,
.dark .dark\:bg-pink-900\/30,
.dark .bg-cyan-100,
.dark .dark\:bg-cyan-900\/30,
.dark .bg-teal-100,
.dark .dark\:bg-amber-900\/40,
.dark .dark\:bg-teal-900\/30,
.dark .bg-slate-100,
.dark .bg-zinc-100,
.dark .dark\:bg-rose-500\/20,
.dark .bg-lime-100,
.dark .bg-violet-50,
.dark .dark\:bg-lime-900\/30,
.dark .bg-orange-50,
.dark .bg-rose-50,
.dark .bg-zinc-200,
.dark .dark\:bg-amber-500\/10,
.dark .dark\:bg-amber-500\/15,
.dark .dark\:bg-amber-500\/20,
.dark .dark\:bg-blue-500\/10,
.dark .dark\:bg-orange-900\/40,
.dark .dark\:bg-violet-900\/20,
.dark .bg-amber-500\/10,
.dark .bg-blue-500\/10,
.dark .bg-orange-500\/10,
.dark .bg-purple-500\/10,
.dark .bg-slate-50,
.dark .bg-zinc-50,
.dark .bg-zinc-800\/10,
.dark .dark\:bg-amber-900\/10,
.dark .dark\:bg-amber-950\/30,
.dark .dark\:bg-blue-500\/20,
.dark .dark\:bg-blue-900\/10,
.dark .dark\:bg-orange-500\/15,
.dark .dark\:bg-orange-500\/20,
.dark .dark\:bg-orange-900\/20,
.dark .dark\:bg-sky-500\/15,
.dark .dark\:bg-zinc-500\/10,
.dark .dark\:bg-zinc-500\/15,
.dark .bg-amber-500\/20,
.dark .bg-blue-50\/30,
.dark .bg-fuchsia-50,
.dark .bg-indigo-50,
.dark .bg-indigo-500\/10,
.dark .bg-orange-500\/20,
.dark .bg-rose-500\/20,
.dark .bg-slate-500\/10,
.dark .dark\:bg-amber-900\/25,
.dark .dark\:bg-blue-500\/15,
.dark .dark\:bg-blue-800\/40,
.dark .dark\:bg-blue-900\/5,
.dark .dark\:bg-blue-950\/20,
.dark .dark\:bg-fuchsia-900\/20,
.dark .dark\:bg-indigo-900\/40,
.dark .dark\:bg-orange-500\/10,
.dark .dark\:bg-orange-800\/40,
.dark .dark\:bg-purple-500\/10,
.dark .dark\:bg-purple-500\/15,
.dark .dark\:bg-purple-800\/40,
.dark .dark\:bg-rose-900\/10,
.dark .dark\:bg-rose-900\/20,
.dark .dark\:bg-rose-900\/25,
.dark .dark\:bg-rose-900\/40,
.dark .dark\:bg-sky-900\/10,
.dark .dark\:bg-sky-900\/25,
.dark .dark\:bg-sky-950\/20,
.dark .dark\:bg-sky-950\/30,
.dark .dark\:bg-slate-900\/30,
.dark .dark\:bg-violet-800\/40,
.dark .dark\:bg-violet-900\/10,
.dark .dark\:bg-zinc-900\/30 { background-color: rgba(255,255,255,0.05) !important; }
.dark .bg-blue-500,
.dark .bg-purple-500,
.dark .bg-orange-500,
.dark .bg-blue-600,
.dark .bg-sky-500,
.dark .bg-rose-500,
.dark .dark\:bg-blue-500,
.dark .dark\:bg-orange-600,
.dark .dark\:bg-slate-500 { background-color: var(--gray-300) !important; }
.dark .bg-blue-400,
.dark .bg-blue-50\/50,
.dark .bg-amber-400,
.dark .dark\:bg-amber-800\/50,
.dark .dark\:bg-amber-900\/50,
.dark .dark\:bg-slate-800\/50,
.dark .bg-amber-200\/80,
.dark .bg-blue-200\/60,
.dark .bg-orange-200\/60,
.dark .bg-purple-200\/60,
.dark .bg-sky-50\/60,
.dark .bg-slate-300,
.dark .bg-violet-200\/60,
.dark .bg-zinc-300\/70,
.dark .dark\:bg-blue-500\/80,
.dark .dark\:bg-orange-500\/80,
.dark .dark\:bg-purple-500\/80,
.dark .dark\:bg-zinc-700\/60 { background-color: rgba(255,255,255,0.08) !important; }
.dark .dark\:bg-zinc-800,
.dark .dark\:bg-amber-900,
.dark .dark\:bg-zinc-700,
.dark .dark\:bg-blue-900,
.dark .dark\:bg-indigo-900,
.dark .dark\:bg-slate-900,
.dark .dark\:bg-blue-950,
.dark .dark\:bg-purple-900,
.dark .dark\:bg-slate-800,
.dark .dark\:bg-violet-900,
.dark .bg-zinc-800,
.dark .bg-zinc-900,
.dark .dark\:bg-indigo-950,
.dark .dark\:bg-orange-950,
.dark .dark\:bg-slate-700,
.dark .dark\:bg-slate-950 { background-color: var(--obsidian-3) !important; }

/* ---- hover/group-hover 背景 → 中性白微光 ---- */
.dark .hover\:bg-blue-50:hover,
.dark .dark\:hover\:bg-blue-900\/20:hover,
.dark .hover\:bg-indigo-200:hover,
.dark .hover\:bg-pink-200:hover,
.dark .hover\:bg-purple-200:hover,
.dark .hover\:bg-sky-200:hover,
.dark .hover\:bg-amber-200:hover,
.dark .hover\:bg-blue-200:hover,
.dark .hover\:bg-cyan-200:hover,
.dark .hover\:bg-orange-200:hover,
.dark .hover\:bg-rose-200:hover,
.dark .hover\:bg-teal-200:hover,
.dark .dark\:hover\:bg-blue-900\/30:hover,
.dark .hover\:bg-orange-50:hover,
.dark .dark\:hover\:bg-orange-900\/20:hover,
.dark .dark\:hover\:bg-purple-900\/20:hover,
.dark .hover\:bg-lime-200:hover,
.dark .hover\:bg-orange-600:hover,
.dark .hover\:bg-purple-50:hover,
.dark .hover\:bg-violet-200:hover,
.dark .group:hover .dark\:group-hover\:bg-blue-900\/50,
.dark .group:hover .group-hover\:bg-blue-100,
.dark .hover\:bg-blue-600:hover,
.dark .hover\:bg-slate-200:hover,
.dark .active\:bg-blue-700:active,
.dark .active\:bg-orange-700:active,
.dark .active\:bg-purple-700:active,
.dark .dark\:hover\:bg-amber-900\/20:hover,
.dark .dark\:hover\:bg-amber-900\/30:hover,
.dark .dark\:hover\:bg-amber-900\/50:hover,
.dark .dark\:hover\:bg-blue-500:hover,
.dark .dark\:hover\:bg-blue-600:hover,
.dark .dark\:hover\:bg-blue-900\/50:hover,
.dark .dark\:hover\:bg-cyan-900\/30:hover,
.dark .dark\:hover\:bg-orange-500:hover,
.dark .dark\:hover\:bg-orange-900\/30:hover,
.dark .dark\:hover\:bg-purple-500:hover,
.dark .dark\:hover\:bg-purple-900\/30:hover,
.dark .dark\:hover\:bg-sky-900\/10:hover,
.dark .dark\:hover\:bg-sky-900\/20:hover,
.dark .dark\:hover\:bg-zinc-600:hover,
.dark .hover\:bg-amber-100:hover,
.dark .hover\:bg-amber-50:hover,
.dark .hover\:bg-amber-600:hover,
.dark .hover\:bg-blue-700:hover,
.dark .hover\:bg-cyan-50:hover,
.dark .hover\:bg-purple-100:hover,
.dark .hover\:bg-purple-600:hover,
.dark .hover\:bg-sky-50:hover,
.dark .hover\:bg-sky-50\/60:hover,
.dark .hover\:bg-zinc-900:hover { background-color: rgba(255,255,255,0.08) !important; }

/* ---- 边框 → hairline/strong ---- */
.dark .border-amber-200,
.dark .border-blue-200,
.dark .border-blue-300,
.dark .border-blue-100,
.dark .border-sky-200,
.dark .border-amber-300,
.dark .border-purple-200,
.dark .border-slate-200,
.dark .border-sky-100,
.dark .border-amber-100\/80,
.dark .border-rose-300,
.dark .border-sky-300,
.dark .border-violet-200 { border-color: var(--border-hairline) !important; }
.dark .dark\:border-amber-800,
.dark .dark\:border-blue-600,
.dark .border-purple-500,
.dark .border-sky-500,
.dark .dark\:border-amber-700,
.dark .dark\:border-amber-800\/50,
.dark .border-amber-500,
.dark .border-blue-500,
.dark .dark\:border-amber-500\/30,
.dark .dark\:border-amber-900\/50,
.dark .dark\:border-blue-500\/20,
.dark .dark\:border-blue-800,
.dark .dark\:border-blue-800\/50,
.dark .dark\:border-slate-700,
.dark .border-orange-500,
.dark .dark\:border-amber-800\/30,
.dark .dark\:border-amber-900\/40,
.dark .dark\:border-blue-800\/30,
.dark .dark\:border-purple-800\/30,
.dark .dark\:border-sky-800\/40,
.dark .dark\:border-sky-900\/50,
.dark .border-amber-400,
.dark .border-blue-400\/30,
.dark .border-blue-500\/20,
.dark .border-blue-500\/30,
.dark .border-orange-500\/20,
.dark .border-orange-500\/30,
.dark .border-purple-500\/20,
.dark .border-purple-500\/30,
.dark .border-rose-500,
.dark .border-slate-500\/30,
.dark .border-zinc-500,
.dark .border-zinc-800,
.dark .border-zinc-800\/20,
.dark .border-zinc-800\/30,
.dark .dark\:border-amber-600,
.dark .dark\:border-amber-700\/40,
.dark .dark\:border-amber-800\/60,
.dark .dark\:border-blue-400,
.dark .dark\:border-blue-700,
.dark .dark\:border-blue-900,
.dark .dark\:border-orange-400,
.dark .dark\:border-orange-500\/20,
.dark .dark\:border-purple-500\/20,
.dark .dark\:border-purple-800\/40,
.dark .dark\:border-rose-700,
.dark .dark\:border-sky-400,
.dark .dark\:border-sky-500,
.dark .dark\:border-sky-700,
.dark .dark\:border-sky-800,
.dark .dark\:border-sky-800\/50,
.dark .dark\:border-sky-900\/60,
.dark .dark\:border-violet-800,
.dark .dark\:border-zinc-400,
.dark .dark\:border-zinc-500\/20,
.dark .dark\:border-zinc-500\/30 { border-color: var(--border-strong) !important; }

/* ---- 单边边框(spinner 弧等) → 灰 ---- */
.dark .border-t-blue-600,
.dark .dark\:border-t-blue-400 { border-top-color: var(--gray-300) !important; }

/* ---- hover 边框 → strong ---- */
.dark .dark\:hover\:border-purple-700:hover,
.dark .hover\:border-purple-300:hover,
.dark .hover\:border-sky-300:hover,
.dark .dark\:hover\:border-amber-700:hover,
.dark .dark\:hover\:border-blue-700:hover,
.dark .dark\:hover\:border-sky-700:hover,
.dark .hover\:border-amber-300:hover,
.dark .hover\:border-blue-300:hover,
.dark .hover\:border-orange-300:hover,
.dark .hover\:border-zinc-400:hover,
.dark .dark\:hover\:border-orange-500\/50:hover,
.dark .dark\:hover\:border-orange-700:hover,
.dark .dark\:hover\:border-sky-500\/50:hover,
.dark .dark\:hover\:border-sky-600:hover,
.dark .dark\:hover\:border-zinc-500\/50:hover,
.dark .dark\:hover\:border-zinc-600:hover,
.dark .hover\:border-sky-400:hover { border-color: var(--border-strong) !important; }

/* ---- focus 边框 → 冰蓝 ---- */
.dark .focus\:border-blue-500:focus { border-color: var(--ice-blue) !important; }

/* ---- 装饰 ring → strong ---- */
.dark .ring-rose-200,
.dark .dark\:ring-rose-500\/30,
.dark .dark\:ring-amber-500\/30,
.dark .ring-amber-200,
.dark .dark\:ring-amber-800,
.dark .dark\:ring-orange-500\/30,
.dark .dark\:ring-purple-500\/30,
.dark .dark\:ring-rose-800,
.dark .dark\:ring-sky-800,
.dark .dark\:ring-sky-900\/60,
.dark .dark\:ring-slate-500\/30,
.dark .dark\:ring-slate-700\/70,
.dark .ring-amber-500\/30,
.dark .ring-amber-600\/20,
.dark .ring-orange-200,
.dark .ring-orange-500\/30,
.dark .ring-purple-600\/20,
.dark .ring-rose-500\/30,
.dark .ring-sky-100,
.dark .ring-sky-200,
.dark .ring-slate-200\/80,
.dark .ring-slate-600\/20 { --tw-ring-color: var(--border-strong) !important; }

/* ---- focus ring → 冰蓝(允许) ---- */
.dark .focus\:ring-blue-500:focus,
.dark .focus\:ring-blue-500\/10:focus { --tw-ring-color: var(--ice-blue-soft) !important; }

/* ---- 彩色投影 → elevation-2 去彩 ---- */
.dark .shadow-blue-500\/30,
.dark .shadow-amber-500\/30,
.dark .shadow-purple-500\/30 { box-shadow: var(--elevation-2) !important; }

/* ---- 下划线色 → 灰 ---- */
.dark .dark\:decoration-blue-400\/30,
.dark .decoration-blue-600\/30 { text-decoration-color: var(--gray-400) !important; }
.dark .dark\:hover\:decoration-blue-400:hover,
.dark .hover\:decoration-blue-600:hover { text-decoration-color: var(--gray-200) !important; }

/* ---- 渐变 from-stop → 银灰归一 ---- */
.dark .from-blue-500,
.dark .from-amber-500,
.dark .from-orange-500,
.dark .from-purple-500,
.dark .from-orange-400,
.dark .from-amber-400,
.dark .from-blue-400,
.dark .from-blue-600,
.dark .from-purple-400,
.dark .from-rose-500 { --tw-gradient-from: var(--gray-100) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(232,232,234,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .dark\:from-blue-900\/10,
.dark .from-blue-50,
.dark .dark\:from-amber-900\/10,
.dark .dark\:from-blue-900\/20,
.dark .dark\:from-purple-900\/10,
.dark .from-amber-50,
.dark .from-purple-50,
.dark .dark\:from-amber-900\/20,
.dark .dark\:from-indigo-900\/10,
.dark .dark\:from-indigo-900\/20,
.dark .dark\:from-orange-500\/10,
.dark .dark\:from-orange-900\/20,
.dark .dark\:from-sky-500\/10,
.dark .dark\:from-zinc-500\/10,
.dark .from-amber-400\/20,
.dark .from-amber-50\/80,
.dark .from-blue-400\/20,
.dark .from-blue-50\/50,
.dark .from-blue-50\/80,
.dark .from-indigo-100\/20,
.dark .from-indigo-100\/30,
.dark .from-orange-100\/30,
.dark .from-orange-50,
.dark .from-purple-400\/20,
.dark .from-sky-50,
.dark .from-zinc-50 { --tw-gradient-from: rgba(255,255,255,0.06) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(232,232,234,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .from-zinc-700 { --tw-gradient-from: var(--gray-400) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(232,232,234,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }

/* ---- 渐变 via-stop → 银灰归一 ---- */
.dark .dark\:via-indigo-900\/10,
.dark .dark\:via-orange-900\/10,
.dark .via-indigo-50\/50,
.dark .via-orange-50\/50 { --tw-gradient-to: rgba(232,232,234,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), rgba(255,255,255,0.05) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.dark .via-indigo-500,
.dark .via-orange-500 { --tw-gradient-to: rgba(232,232,234,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--gray-400) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* ---- 渐变 to-stop → 银灰归一 ---- */
.dark .to-indigo-600,
.dark .to-orange-600,
.dark .to-blue-600,
.dark .to-purple-600,
.dark .to-orange-500,
.dark .to-purple-500,
.dark .to-amber-400,
.dark .to-blue-500,
.dark .to-neutral-200,
.dark .to-pink-600 { --tw-gradient-to: var(--gray-400) var(--tw-gradient-to-position) !important; }
.dark .dark\:to-teal-900\/20,
.dark .to-teal-50,
.dark .dark\:to-amber-500\/20,
.dark .dark\:to-indigo-500\/20,
.dark .dark\:to-indigo-900\/10,
.dark .dark\:to-indigo-900\/5,
.dark .dark\:to-neutral-500\/20,
.dark .dark\:to-purple-900\/5,
.dark .to-amber-100,
.dark .to-amber-50\/70,
.dark .to-amber-500\/20,
.dark .to-indigo-100,
.dark .to-indigo-50,
.dark .to-indigo-50\/30,
.dark .to-indigo-500\/20,
.dark .to-orange-500\/20,
.dark .to-pink-500\/20,
.dark .to-purple-50\/30 { --tw-gradient-to: rgba(255,255,255,0.04) var(--tw-gradient-to-position) !important; }
.dark .to-zinc-900 { --tw-gradient-to: var(--gray-700) var(--tw-gradient-to-position) !important; }

/* ===== sections/20-forms-controls.css ===== */
/* ============================================================================
 * 研路AI × Sub2API 主题 v2 —— 分段 20 · 表单与控件
 * ----------------------------------------------------------------------------
 * 职责: Select / ProxySelector / DateRangePicker / Toggle / Input(error) /
 *       ConfirmDialog 内联按钮 / BaseDialog 关闭按钮 / HelpTooltip /
 *       复选框·单选框 accent —— 全部静态样式。
 * 设计依据: ds-spec/components/forms/{Select,Input,Toggle}.jsx。
 * 纪律: 所有规则加 .dark 前缀 + 每条声明 !important;值一律 var(--token);
 *       聚焦态一律 var(--focus-ring) 冰蓝;选中态用近白/低透明白,绝不用青色。
 * 边界: 下拉「过渡动画时序」(select-dropdown/date-picker-dropdown enter/leave)
 *       归 50 段;全局裸原子类去彩(bg-white/hover:bg-white 等广谱)归 10 段。
 *       本段只处理表单控件的语义/结构类与其专属状态。
 * 拼接位置: 00核心(yanlu-sub2api.css)之后。所有 DS token 已在核心定义,直接 var()。
 * ========================================================================== */

/* ============================================================================
 * A · Select 触发器 (Select.vue scoped · ProxySelector.vue scoped 复用同类名)
 *   报告 1B: .select-trigger / -open / -error / -disabled
 *   底 var(--bg-panel) + hairline 边 + radius-input;开/聚焦 → 冰蓝 soft
 * ========================================================================== */
.dark .select-trigger {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-input) !important;
  color: var(--text-1) !important;
}
.dark .select-trigger:hover {
  border-color: var(--border-strong) !important;
}
/* 开态: 冰蓝 1px 边 + focus-ring(覆盖 border-primary-500 / ring-primary-500/30) */
.dark .select-trigger-open,
.dark .select-trigger-open:hover {
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
}
/* 聚焦: 键盘 focus 同开态(原子类 focus:ring-primary-500/30 已被核心接管,此处补 focus-visible) */
.dark .select-trigger:focus-visible {
  outline: none !important;
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
}
/* 错误态: --danger 边 */
.dark .select-trigger-error,
.dark .select-trigger-error:focus,
.dark .select-trigger-error:focus-visible {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-soft) !important; /* 3px soft ring: 依据 ds Input.jsx error ring */
}
.dark .select-trigger-disabled,
.dark .select-trigger-disabled:hover {
  background-color: var(--bg-raised) !important;
  border-color: var(--border-hairline) !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
.dark .select-icon,
.dark .select-clear { color: var(--text-3) !important; }
.dark .select-clear:hover { color: var(--text-1) !important; }

/* ============================================================================
 * B · Select 下拉面板 + 选项
 *   .select-dropdown-portal (Select.vue 非 scoped 全局钩子) +
 *   .select-dropdown (ProxySelector.vue scoped 自有面板) —— 同套曜石材质
 *   报告 1B: 选中=近白文字 + rgba 白 .06 底;聚焦=surface-card-hover;勾→近白
 * ========================================================================== */
.dark .select-dropdown-portal,
.dark .select-dropdown {
  background-color: rgba(20, 20, 22, 0.94) !important; /* 由 --bg-panel #141416 推导 + 玻璃透明 */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-input) !important;
  box-shadow: var(--inset-highlight), var(--elevation-2) !important;
}
/* 搜索区 */
.dark .select-dropdown-portal .select-search,
.dark .select-dropdown .select-search,
.dark .select-dropdown .select-header {
  border-bottom-color: var(--border-hairline) !important;
}
.dark .select-dropdown-portal .select-search-input,
.dark .select-dropdown .select-search-input { color: var(--text-1) !important; }
/* 选项默认 */
.dark .select-dropdown-portal .select-option,
.dark .select-dropdown .select-option { color: var(--text-2) !important; }
.dark .select-dropdown-portal .select-option:hover,
.dark .select-dropdown .select-option:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-1) !important;
}
/* 选中: 近白文字 + rgba 白 .06 底 */
.dark .select-option-selected,
.dark .select-dropdown-portal .select-option-selected,
.dark .select-dropdown .select-option-selected {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--white-0) !important;
}
/* 选中勾: text-primary-500 → 近白(高特异度盖核心的 gray-200) */
.dark .select-option .text-primary-500,
.dark .select-option-selected .text-primary-500 { color: var(--white-0) !important; }
/* 键盘聚焦项: surface-card-hover */
.dark .select-option-focused,
.dark .select-dropdown-portal .select-option-focused,
.dark .select-dropdown .select-option-focused {
  background-color: var(--surface-card-hover) !important;
}
/* 禁用项 */
.dark .select-option-disabled,
.dark .select-dropdown-portal .select-option-disabled { opacity: 0.4 !important; }
/* 分组标签 */
.dark .select-dropdown-portal .select-option-group,
.dark .select-dropdown-portal .select-option-group:hover,
.dark .select-dropdown .select-option-group {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-3) !important;
}
.dark .select-dropdown-portal .select-empty,
.dark .select-dropdown .select-empty { color: var(--text-3) !important; }

/* ============================================================================
 * C · DateRangePicker.vue (scoped 类名, 裸类名 + !important 命中)
 *   report P0③: 触发/开/preset-active/input/apply + 分隔线/标签/日历格
 * ========================================================================== */
.dark .date-picker-trigger {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-input) !important;
  color: var(--text-2) !important;
}
.dark .date-picker-trigger:hover { border-color: var(--border-strong) !important; }
.dark .date-picker-trigger-open,
.dark .date-picker-trigger:focus-visible {
  outline: none !important;
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
}
.dark .date-picker-icon,
.dark .date-picker-chevron { color: var(--text-3) !important; }
/* 下拉面板: 曜石 + hairline + elevation-2 */
.dark .date-picker-dropdown {
  background-color: rgba(20, 20, 22, 0.94) !important; /* 由 --bg-panel 推导 */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-input) !important;
  box-shadow: var(--inset-highlight), var(--elevation-2) !important;
}
.dark .date-picker-divider { border-top-color: var(--border-hairline) !important; }
.dark .date-picker-label { color: var(--text-3) !important; }
/* preset 快捷: 默认次级,hover 白微光 */
.dark .date-picker-preset { color: var(--text-2) !important; }
.dark .date-picker-preset:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-1) !important;
}
/* preset 选中: 近白文字 + rgba 白 .06 底(去青) */
.dark .date-picker-preset-active,
.dark .date-picker-preset-active:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--white-0) !important;
}
/* 日期输入格 */
.dark .date-picker-input {
  background-color: var(--obsidian-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important;
}
.dark .date-picker-input:focus {
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}
/* apply 按钮 = .btn-primary 同款近白实底 (原 bg-primary-600 text-white) */
.dark .date-picker-apply {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, #ffffff 0%, var(--gray-100) 100%) !important;
  color: var(--obsidian-0) !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.dark .date-picker-apply:hover {
  background-image: linear-gradient(180deg, #ffffff 0%, #d8d8dd 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--glow-white) !important;
}

/* ============================================================================
 * D · Toggle.vue (role="switch") —— DS Toggle.jsx: on=近白轨+深旋钮, off=曜石轨
 *   限定到 button[role="switch"] + aria-checked, 避免误伤其他 bg-primary-600
 *   (核心把 .bg-primary-600 remap 成银渐变,此处更高特异度直接接管)
 * ========================================================================== */
/* on 态轨道: 近白实底(盖核心银渐变) */
.dark button[role="switch"][aria-checked="true"] {
  background-color: var(--white-0) !important;
  background-image: none !important;
  border-color: transparent !important;
}
/* on 态旋钮: 深色(曜石) */
.dark button[role="switch"][aria-checked="true"] > span {
  background-color: var(--obsidian-0) !important;
}
/* off 态轨道: 曜石面板 */
.dark button[role="switch"][aria-checked="false"] {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-hairline) !important;
}
/* off 态旋钮: 近白灰 */
.dark button[role="switch"][aria-checked="false"] > span {
  background-color: var(--gray-200) !important;
}
/* 聚焦环: 冰蓝(原 focus:ring-primary-500 + ring-offset) */
.dark button[role="switch"]:focus,
.dark button[role="switch"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ice-blue), var(--focus-ring) !important;
}

/* ============================================================================
 * E · Input.vue error 态 (报告 1B / 缺口 §4)
 *   input-error ring-red-500/20 → --danger 边 + --danger-soft 环;必填星保留 --danger
 * ========================================================================== */
.dark .input.input-error,
.dark .input-error {
  border-color: var(--danger) !important;
}
/* ring-2 ring-red-500/20 → danger-soft 3px 环(依据 ds Input.jsx error ring) */
.dark .ring-red-500\/20 {
  --tw-ring-color: var(--danger-soft) !important;
  box-shadow: 0 0 0 3px var(--danger-soft) !important;
}
.dark .input-error-text { color: var(--danger) !important; }
/* 必填星 text-red-500 已由核心 §8 remap 为 --danger,无需重复 */

/* ============================================================================
 * F · ConfirmDialog.vue 内联按钮 (报告 1A / 缺口 P0)
 *   取消(bg-white+border-gray-300) → 透明 + hairline + text-2
 *   确认(bg-primary-600 hover:bg-primary-700 text-white) → 近白实底(同 btn-primary)
 *   危险(bg-red-600 hover:bg-red-700) → --danger 底 + 可读深色前景
 *   取消限定 .modal-footer button 上下文(避免误伤原生 select/分页/支付品牌);
 *   确认/危险键到「bg-* + hover:bg-* 组合」精确命中内联实用类按钮
 * ========================================================================== */
/* 取消按钮 — 限定弹窗页脚 (BaseDialog .modal-footer 内的 <button>);
   排除原生 <select>/input(Edit/CreateAccountModal)、分页页码、支付品牌按钮 */
.dark .modal-footer button.bg-white.border-gray-300 {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--border-hairline) !important;
  color: var(--text-2) !important;
}
.dark .modal-footer button.bg-white.border-gray-300:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-1) !important;
}
/* 确认按钮: 近白实底 + 曜石文字(盖 text-white 保证对比) */
.dark .bg-primary-600.hover\:bg-primary-700 {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, #ffffff 0%, var(--gray-100) 100%) !important;
  color: var(--obsidian-0) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.dark .bg-primary-600.hover\:bg-primary-700:hover {
  background-image: linear-gradient(180deg, #ffffff 0%, #d8d8dd 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--glow-white) !important;
}
/* 危险按钮: --danger 底 + 深色前景可读 */
.dark .bg-red-600.hover\:bg-red-700 {
  background-color: var(--danger) !important;
  background-image: none !important;
  color: var(--obsidian-0) !important;
}
.dark .bg-red-600.hover\:bg-red-700:hover {
  background-color: #e86c6c !important; /* --danger #F07A7A 压暗 ~8% */
}

/* ============================================================================
 * G · BaseDialog.vue 关闭按钮 (报告 1A)
 *   直接子于 .modal-header;hover 底 → rgba 白 .06;focus-visible ring → 冰蓝
 * ========================================================================== */
.dark .modal-header > button { color: var(--text-3) !important; }
.dark .modal-header > button:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--white-0) !important;
}
.dark .modal-header > button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ice-blue), var(--focus-ring) !important;
}

/* ============================================================================
 * H · HelpTooltip.vue (报告 1A)
 *   触发图标 hover:text-primary-* → var(--text-1)
 *   气泡(role=tooltip) → obsidian-3 + hairline + radius-sm + elevation-2
 * ========================================================================== */
/* 触发图标 hover(核心未覆盖 hover:text-primary-600 / dark:hover:text-primary-400) */
.dark .hover\:text-primary-600:hover,
.dark .dark\:hover\:text-primary-400:hover { color: var(--text-1) !important; }
/* 气泡本体 */
.dark [role="tooltip"] {
  background-color: var(--obsidian-3) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--elevation-2) !important;
  --tw-ring-color: var(--border-hairline) !important; /* ring-white/10 → hairline */
}
/* 气泡箭头(末尾旋转 div, bg-gray-900 dark:bg-gray-800) */
.dark [role="tooltip"] > div:last-child { background-color: var(--obsidian-3) !important; }

/* ============================================================================
 * I · 通用控件补漏 (报告 §8 待核清单)
 *   原生复选框/单选框 accent 去青 → 银(GroupSelector 勾选、批量选择等)
 *   GroupSelector/GroupOptionItem/ProxySelector 触发&下拉均已由 A/B 段自动继承。
 * ========================================================================== */
.dark input[type="checkbox"],
.dark input[type="radio"] { accent-color: var(--gray-200) !important; }


/* ===== sections/30-overlays-notify.css ===== */
/* ============================================================================
 * 段 30 · 浮层与通知 (overlays-notify) — 研路AI × Sub2api 主题 v2
 * ----------------------------------------------------------------------------
 * 职责: Toast 通知 / AnnouncementPopup 公告强弹窗 / AnnouncementBell 铃铛列表+详情 /
 *       .markdown-body 全局正文 / P5 浮层零星彩色 (EndpointPopover·SubscriptionProgressMini)。
 * 依据: REPORT-coverage-gap P0 ①④⑦; ds-spec/components/overlays/{Modal,Toast}。
 * 手法: 全部「容器限定 + .dark 前缀 + !important」高特异度写法, 天然盖过 10 段裸类兜底。
 * 边界: 动画时序 → 50 段; 裸类兜底 → 10 段; 支付品牌按钮 (.btn-stripe/-alipay/…) 绝不碰。
 *       token 一律 var() 引用 (定义在 00 核心); 字面 rgba 均紧邻注释注明由哪个 token 推导。
 * ========================================================================== */


/* ============================================================================
 * 1 · Toast.vue (P0 ①) — 容器 .fixed.right-4.top-4.z-[9999]
 *   陷阱: style.css 的 .toast-* 语义类未被组件使用 → 绝不写 .toast-*; 真钩子是原子类。
 *   卡片 bg-white dark:bg-dark-800 → 曜石面板; 左边条/图标/进度条按语义状态色映射。
 * ========================================================================== */

/* 卡片: 曜石面板 + 发丝内描边 + elevation-2 + 卡片圆角 */
.dark .fixed.right-4.top-4.z-\[9999\] .rounded-lg {
  background-color: var(--bg-panel) !important;
  border-radius: var(--radius-card) !important;
  /* inset 发丝描边由 --border-hairline 推导 */
  box-shadow: inset 0 0 0 1px var(--border-hairline), var(--elevation-2) !important;
}

/* 左边条 (border-l-4 + border-{color}-500) → 语义状态色 */
.dark .fixed.right-4.top-4.z-\[9999\] .border-green-500  { border-left-color: var(--status-online) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .border-red-500    { border-left-color: var(--danger) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .border-yellow-500 { border-left-color: var(--status-degraded) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .border-blue-500   { border-left-color: var(--ice-blue) !important; }

/* 图标 text-{color}-500 → 同映射 */
.dark .fixed.right-4.top-4.z-\[9999\] .text-green-500  { color: var(--status-online) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .text-red-500    { color: var(--danger) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .text-yellow-500 { color: var(--status-degraded) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .text-blue-500   { color: var(--ice-blue) !important; }

/* 进度条填充 bg-{color}-500 → 同映射; 进度轨 dark:bg-dark-700 已由 00 核心 → 曜石-3 */
.dark .fixed.right-4.top-4.z-\[9999\] .bg-green-500  { background-color: var(--status-online) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .bg-red-500    { background-color: var(--danger) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .bg-yellow-500 { background-color: var(--status-degraded) !important; }
.dark .fixed.right-4.top-4.z-\[9999\] .bg-blue-500   { background-color: var(--ice-blue) !important; }


/* ============================================================================
 * 2 · AnnouncementPopup.vue (P0 ④) — 容器 .fixed.inset-0.z-[120]
 *   遮罩保持 (黑渐变); 卡片→曜石面板+玻璃描边; 琥珀/橙渐变全部→冷白/银; 按钮→近白实底。
 * ========================================================================== */

/* 卡片壳 (直接子 div): 曜石面板 + 发丝描边 + elevation-3 */
.dark .fixed.inset-0.z-\[120\] > div {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-hairline) !important;
  box-shadow: var(--inset-highlight), var(--elevation-3) !important;
}

/* 头部暖色光晕 from-amber-50/80… + dark:from-amber-900/20… → 极淡冷白 (rgba 白由 --white-0 推导) */
.dark .fixed.inset-0.z-\[120\] .from-amber-50\/80,
.dark .fixed.inset-0.z-\[120\] .dark\:from-amber-900\/20 {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 60%, transparent) !important;
}
/* 头部下描边 border-amber-100/80 → 发丝 */
.dark .fixed.inset-0.z-\[120\] .border-amber-100\/80 { border-color: var(--border-hairline) !important; }

/* 装饰侧向淡出 + 模糊光球 (橙/琥珀/黄) → 抹除, 留极淡冷白 (rgba 白由 --white-0 推导) */
.dark .fixed.inset-0.z-\[120\] .from-orange-100\/30,
.dark .fixed.inset-0.z-\[120\] .dark\:from-orange-900\/20,
.dark .fixed.inset-0.z-\[120\] .from-amber-400\/20,
.dark .fixed.inset-0.z-\[120\] .from-yellow-400\/20 {
  background-image: none !important;
  background-color: rgba(255,255,255,0.03) !important;
}

/* 图标块 / badge / 左条 (共用 .from-amber-500) → 银渐变 + elevation-2, 玻璃字/图标近黑 */
.dark .fixed.inset-0.z-\[120\] .from-amber-500 {
  background-image: var(--gradient-silver) !important;
  background-color: transparent !important;
  color: var(--obsidian-0) !important;
  box-shadow: var(--elevation-2) !important;
}
/* 琥珀投影 shadow-amber-500/30 → 中性 elevation-2 */
.dark .fixed.inset-0.z-\[120\] .shadow-amber-500\/30 { box-shadow: var(--elevation-2) !important; }

/* 底部 markRead 按钮 (button 且含 from-amber-500) → 近白实底 (盖过上面的银渐变) */
.dark .fixed.inset-0.z-\[120\] button.from-amber-500 {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--gray-100) 100%) !important;
  color: var(--obsidian-0) !important;
  /* inset 高光由 --white-0 推导 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--elevation-2) !important;
}

/* 底部条 bg-gray-50/50 dark:bg-dark-900/30 → 抬升暗面 (rgba 由 --obsidian-1 #101012 推导) */
.dark .fixed.inset-0.z-\[120\] .dark\:bg-dark-900\/30 { background-color: rgba(16,16,18,0.55) !important; }


/* ============================================================================
 * 3 · AnnouncementBell.vue (P0 ④) — 列表 .z-[100] + 详情 .z-[110]
 *   蓝/靛/紫渐变全部→银/冷白; 红点保留 danger; 未读 badge→冰蓝 soft (信息语义, 允许);
 *   spinner→冰蓝; 主按钮→近白实底。铃铛按钮未读蓝字已由 00 核心 →灰, 此处不重复。
 * ========================================================================== */

/* --- 卡片壳 (列表 + 详情) --- */
.dark .fixed.inset-0.z-\[100\] > div,
.dark .fixed.inset-0.z-\[110\] > div {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-hairline) !important;
  box-shadow: var(--inset-highlight), var(--elevation-3) !important;
}

/* --- 头部冷白光晕 (列表 from-blue-50/50, 详情 from-blue-50/80) + dark 变体 --- */
.dark .fixed.inset-0.z-\[100\] .from-blue-50\/50,
.dark .fixed.inset-0.z-\[100\] .dark\:from-blue-900\/10,
.dark .fixed.inset-0.z-\[110\] .from-blue-50\/80,
.dark .fixed.inset-0.z-\[110\] .dark\:from-blue-900\/20 {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 60%, transparent) !important;
}

/* --- 装饰侧向淡出 + 模糊光球 (靛/蓝/紫粉) → 抹除留极淡冷白 --- */
.dark .fixed.inset-0.z-\[100\] .from-indigo-100\/20,
.dark .fixed.inset-0.z-\[100\] .dark\:from-indigo-900\/10,
.dark .fixed.inset-0.z-\[110\] .from-indigo-100\/30,
.dark .fixed.inset-0.z-\[110\] .dark\:from-indigo-900\/20,
.dark .fixed.inset-0.z-\[110\] .from-blue-400\/20,
.dark .fixed.inset-0.z-\[110\] .from-purple-400\/20 {
  background-image: none !important;
  background-color: rgba(255,255,255,0.03) !important; /* 由 --white-0 推导 */
}

/* --- 实心蓝/靛渐变块 (图标块·未读行图标·列表左条·详情未读 pill) → 银渐变 --- */
.dark .fixed.inset-0.z-\[100\] .from-blue-500,
.dark .fixed.inset-0.z-\[110\] .from-blue-500 {
  background-image: var(--gradient-silver) !important;
  background-color: transparent !important;
  color: var(--obsidian-0) !important;
  box-shadow: var(--elevation-2) !important;
}
/* 蓝投影 shadow-blue-500/30 → 中性 */
.dark .fixed.inset-0.z-\[100\] .shadow-blue-500\/30,
.dark .fixed.inset-0.z-\[110\] .shadow-blue-500\/30 { box-shadow: var(--elevation-2) !important; }

/* --- markAllRead 按钮 bg-blue-600 (button) → 近白实底; hover/dark 同步 --- */
.dark .fixed.inset-0.z-\[100\] button.bg-blue-600,
.dark .fixed.inset-0.z-\[100\] button.dark\:bg-blue-500,
.dark .fixed.inset-0.z-\[100\] button.bg-blue-600.hover\:bg-blue-700:hover,
.dark .fixed.inset-0.z-\[100\] button.dark\:hover\:bg-blue-600:hover {
  background-color: var(--gray-100) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, var(--gray-100) 100%) !important;
  color: var(--obsidian-0) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--elevation-2) !important; /* rgba 由 --white-0 推导 */
}

/* --- 详情主按钮 from-blue-600 to-indigo-600 (button) → 近白实底 --- */
.dark .fixed.inset-0.z-\[110\] button.from-blue-600 {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--gray-100) 100%) !important;
  color: var(--obsidian-0) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--elevation-2) !important; /* rgba 由 --white-0 推导 */
}

/* --- 未读行底 bg-blue-50/30 dark:bg-blue-900/5 → 极淡白 (由 --white-0 推导) --- */
.dark .fixed.inset-0.z-\[100\] .bg-blue-50\/30,
.dark .fixed.inset-0.z-\[100\] .dark\:bg-blue-900\/5 { background-color: rgba(255,255,255,0.04) !important; }

/* --- 未读 badge (bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300) → 冰蓝 soft 底 + 冰蓝字 (信息语义, 允许) --- */
.dark .fixed.inset-0.z-\[100\] .bg-blue-100,
.dark .fixed.inset-0.z-\[100\] .dark\:bg-blue-900\/40,
.dark .fixed.inset-0.z-\[110\] .bg-blue-100,
.dark .fixed.inset-0.z-\[110\] .dark\:bg-blue-900\/40 {
  background-color: rgba(125,168,255,0.14) !important; /* --ice-blue 冰蓝 soft 底 */
}
.dark .fixed.inset-0.z-\[100\] .text-blue-700,
.dark .fixed.inset-0.z-\[100\] .dark\:text-blue-300,
.dark .fixed.inset-0.z-\[110\] .text-blue-700,
.dark .fixed.inset-0.z-\[110\] .dark\:text-blue-300 { color: var(--ice-blue) !important; }

/* --- 未读小圆点/脉冲环 (bg-blue-600 span 点 / bg-blue-500 / bg-blue-400 ping) → 冰蓝 --- */
.dark .fixed.inset-0.z-\[100\] .bg-blue-600,
.dark .fixed.inset-0.z-\[100\] .bg-blue-500,
.dark .fixed.inset-0.z-\[100\] .bg-blue-400,
.dark .fixed.inset-0.z-\[110\] .bg-blue-500,
.dark .fixed.inset-0.z-\[110\] .bg-blue-400 { background-color: var(--ice-blue) !important; }

/* --- spinner border-t-blue-600 dark:border-t-blue-400 / border-blue-400/30 → 冰蓝 --- */
.dark .fixed.inset-0.z-\[100\] .border-t-blue-600,
.dark .fixed.inset-0.z-\[100\] .dark\:border-t-blue-400 { border-top-color: var(--ice-blue) !important; }
.dark .fixed.inset-0.z-\[100\] .border-blue-400\/30 { border-color: var(--ice-blue-soft) !important; }

/* --- 关闭按钮玻璃底 bg-white/50 dark:bg-dark-700/50 → 极淡白玻璃 (由 --white-0 推导) --- */
.dark .fixed.inset-0.z-\[100\] .dark\:bg-dark-700\/50,
.dark .fixed.inset-0.z-\[110\] .dark\:bg-dark-700\/50 { background-color: rgba(255,255,255,0.05) !important; }

/* --- 底部条 dark:bg-dark-900/30 (详情) → 抬升暗面 (由 --obsidian-1 推导) --- */
.dark .fixed.inset-0.z-\[110\] .dark\:bg-dark-900\/30 { background-color: rgba(16,16,18,0.55) !important; }


/* ============================================================================
 * 4 · .markdown-body 全局 (P0 ⑦) — 公告正文/文档渲染 (非 scoped = 全局钩子)
 *   链接蓝→灰底线(hover 近白, 同 00 核心链接语言); pink code→灰/曜石底; 蓝表头→曜石。
 * ========================================================================== */

/* 链接: 灰 + 灰底线, hover 近白 */
.dark .markdown-body a {
  color: var(--gray-200) !important;
  text-decoration-color: var(--border-strong) !important;
}
.dark .markdown-body a:hover {
  color: var(--white-0) !important;
  text-decoration-color: var(--gray-300) !important;
}

/* 列表 marker 蓝 → 三级灰 */
.dark .markdown-body li::marker { color: var(--text-3) !important; }

/* 引用块: 去蓝, 发丝左条 + 极淡白底 (由 --white-0 推导) */
.dark .markdown-body blockquote {
  border-left-color: var(--border-strong) !important;
  background-color: rgba(255,255,255,0.03) !important;
  color: var(--text-2) !important;
}
.dark .markdown-body blockquote::before { color: rgba(255,255,255,0.14) !important; } /* 由 --white-0 推导 */

/* 行内 code: pink → 近白灰字 + 曜石-3 底 + 发丝描边 */
.dark .markdown-body code {
  background-color: var(--obsidian-3) !important;
  color: var(--gray-100) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
}
.dark .markdown-body pre code { box-shadow: none !important; color: var(--gray-200) !important; }

/* 表头 th: 蓝/靛渐变 → 曜石微白平底 (由 --white-0 推导) */
.dark .markdown-body th {
  background-image: none !important;
  background-color: rgba(255,255,255,0.03) !important;
  color: var(--text-1) !important;
}


/* ============================================================================
 * 5 · P5 浮层零星彩色核查 (EndpointPopover · SubscriptionProgressMini)
 *   ProxyAdBanner / ExportProgressDialog 经核查无带色原子类 (BaseDialog 壳已覆盖)。
 *   以下为语义状态/去彩补漏, 类名唯一, 与 10 段裸类兜底若重叠则值一致 (last-wins 安全)。
 * ========================================================================== */

/* EndpointPopover 测速链接 (EndpointPopover.vue:131) 及全站同类警示 affordance:
 * hover text-amber → 降级黄。UserPlatformQuotaModal 三处同类 hover 亦为警示语义,
 * 全局一致映射, 有意外溢 (盖过 10 段 152 行的近白 hover)。 */
.dark .text-emerald-500 { color: var(--status-online) !important; }
.dark .hover\:text-amber-500:hover,
.dark .dark\:hover\:text-amber-400:hover { color: var(--status-degraded) !important; }

/* SubscriptionProgressMini: 紫色 chip 底/字 → 中性 (由 --white-0 推导) */
.dark .bg-purple-50,
.dark .dark\:bg-purple-900\/20 { background-color: rgba(255,255,255,0.05) !important; }
/* hover 档抬升 .05→.08, 保证触发钮有 hover 反馈 (与 10 段 hover 白微光一致) */
.dark .hover\:bg-purple-100:hover,
.dark .dark\:hover\:bg-purple-900\/30:hover { background-color: rgba(255,255,255,0.08) !important; }
.dark .text-purple-700, .dark .dark\:text-purple-300 { color: var(--gray-100) !important; }

/* SubscriptionProgressMini: emerald→teal 渐变 chip (teal 我方 scope) → 中性平底 (由 --white-0 推导) */
.dark .to-teal-50,
.dark .dark\:to-teal-900\/20 {
  background-image: none !important;
  background-color: rgba(255,255,255,0.05) !important;
}
/* 无限额度字 text-emerald-700/300 → 在线绿 (600/400 已由 00 核心覆盖) */
.dark .text-emerald-700, .dark .dark\:text-emerald-300 { color: var(--status-online) !important; }

/* SubscriptionProgressMini: 到期天数警示 orange → 降级黄。
 * text-orange-600 / dark:text-orange-400 与 40 段 provider/tier 身份色(→gray-100)共用同一裸类,
 * 裸类等特异度下 40 段 last-wins 会吞掉本状态语义;故容器限定到下拉面板
 * (.absolute.right-0.z-50.w-[340px], 见 SubscriptionProgressMini.vue:30) 提特异度 (0,6,0) 稳赢,
 * 且不误伤面板外的 provider/tier 身份色。 */
.dark .absolute.right-0.z-50.w-\[340px\] .text-orange-600,
.dark .absolute.right-0.z-50.w-\[340px\] .dark\:text-orange-400 { color: var(--status-degraded) !important; }

/* bg-orange-500 全站语义盘点 (9 处, 见 grep 2026-07-14):
 *   7 处 = ≥70% 用量/负载进度条、慢延迟指示、测试失败按钮 → 警示语义, 降级黄;
 *   例外① 平台身份小点 (user/SubscriptionsView.vue:39, h-1.5 圆点) → 中性灰 (40 段身份色纪律);
 *   例外② 白字按钮 (AccountTestModal/CreateAccountModal/platformColors.ts:71):
 *          降级黄底 #E3C06A 压白字对比不足 → 深字 #141416 (由 --obsidian-2 推导)。 */
.dark .bg-orange-500 { background-color: var(--status-degraded) !important; }
.dark .h-1\.5.w-1\.5.rounded-full.bg-orange-500 { background-color: var(--gray-400) !important; } /* 身份点→灰 */
.dark .bg-orange-500.text-white { color: #141416 !important; } /* 深字保对比 */
.dark .hover\:bg-orange-600:hover,
.dark .active\:bg-orange-700:active { background-color: #CBA85A !important; color: #141416 !important; } /* --status-degraded 加深≈10%, hover/active 反馈 */


/* ===== sections/40-data-nav.css ===== */
/* ============================================================================
 * 研路AI × Sub2API 主题 v2 — 分段 40 · 数据展示与导航反馈
 * ----------------------------------------------------------------------------
 * 段职责(P0 ⑤⑥ + P1 ⑧ + 修补):
 *   1 · DataTable.vue  scoped 硬编码 rgb 表头/sticky 列 → 曜石 token
 *   2 · Pagination.vue 当前页/hover/禁用 → 近白 + 白 alpha 底 + border-strong
 *   3 · NavigationProgress.vue 顶部青条 → 银渐变横向 + 柔和白辉光(仅颜色,时序归 50 段)
 *   4 · StatCard.vue   .stat-icon-primary 浅色底片去彩;-success/-warning/-danger + trend 保状态语义
 *   5 · StatusBadge.vue 灰点 bg-gray-400 → --status-offline
 *   6 · 监控页 monitor/*  MonitorCard 半透明/hover 边;provider 身份色(orange/sky/zinc/neutral)→ 灰阶
 *   7 · GroupBadge / PlatformTypeBadge / GroupCapacityBadge / GroupOptionItem 彩色残留;AppHeader 余额胶囊;admin 侧栏 brand hover
 *
 * 铁律:所有规则 .dark 前缀(注入 JS 保证 .dark 恒在);scoped/原子类每条声明 !important;
 *       颜色一律 var(--token),字面量 rgba 紧邻注释标明由哪个 token 推导。
 * 边界声明:表单控件(input/select/date-picker/toggle)归 20 段;Toast/公告弹窗归 30 段;
 *          通用裸类去彩兜底(text-/bg-/border- 全家桶)归 10 段。本段只补 10 段裸类兜底
 *          覆盖不到的组合(scoped 硬编码 rgb、@apply 语义类、alpha provider 变体、容器限定 nav)。
 * ========================================================================== */

/* ============================================================================
 * 1 · DataTable.vue — scoped 硬编码 rgb 表头 / sticky 列 → 曜石 token
 *   源码 scoped 值:表头 rgb(31 41 55) / sticky 列体 rgb(17 24 39)。
 *   与 00核心「表格行 hover = rgba(255,255,255,.03)」同语言;sticky 需不透明(遮挡横向滚动内容)
 *   故用实底曜石层级:表头=面板 --bg-panel;列体=抬升 --bg-raised(与 tbody dark:bg-dark-900 同);
 *   hover=surface-card-hover。scoped 选择器特异度较高,全部加 !important 反压。
 * ========================================================================== */
.dark .table-wrapper .table-header,
.dark .sticky-header-cell,
.dark .sticky-header-cell.sticky-col {
  background-color: var(--bg-panel) !important;   /* 替代 rgb(31 41 55) */
}
.dark tbody .sticky-col {
  background-color: var(--bg-raised) !important;   /* 替代 rgb(17 24 39),与表体 dark:bg-dark-900 同源 */
}
.dark tbody tr:hover .sticky-col {
  background-color: var(--surface-card-hover) !important; /* 替代 hover rgb(31 41 55);#18181B 抬升提示 */
}
/* 行 hover 本体:DataTable 行 class 用 dark:hover:bg-dark-800(DataTable.vue:170),00核心/10段均未覆盖 →
 *   回落原生 tailwind dark.800(#1e293b 蓝灰,越出曜石中性调色板),与 sticky 列 hover(#18181B)不同色 → 行内色缝。
 *   统一取同一 token 消缝;裸类同时收敛其余 dark:hover:bg-dark-800 使用处的蓝灰泄漏,守中性纪律。 */
.dark .dark\:hover\:bg-dark-800:hover { background-color: var(--surface-card-hover) !important; }
/* sticky 阴影:源码用 rgba(0,0,0,.2);曜石背景下改为更贴合的黑,保留层次不刺眼 */
.dark .is-scrollable .sticky-col-left::after,
.dark .is-scrollable .sticky-col-left-second::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.45), transparent) !important;
}
.dark .is-scrollable .sticky-col-right::before {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.45), transparent) !important;
}
/* 移动端卡片 bg-white dark:bg-dark-900 → 00核心已把 dark:bg-dark-900 映射为 --bg-raised(暗色下生效),此处无需重复 */

/* ============================================================================
 * 2 · Pagination.vue — 容器限定 nav[aria-label="Pagination"]
 *   当前页原:border-primary-500 bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400
 *   → 近白字 + rgba(255,255,255,.07) 底 + --border-strong 边(纪律:活动态用中性强调,不用彩色)。
 *   容器限定使特异度高于 00核心裸类映射,精准只作用于分页,不外溢。
 * ========================================================================== */
/* 当前页底:白 alpha .07 = --glass-bg 略强变体,推导自 --glass-bg(.055) */
.dark nav[aria-label="Pagination"] .bg-primary-50,
.dark nav[aria-label="Pagination"] .dark\:bg-primary-900\/30 {
  background-color: rgba(255, 255, 255, 0.07) !important;
}
.dark nav[aria-label="Pagination"] .border-primary-500 {
  border-color: var(--border-strong) !important;
}
.dark nav[aria-label="Pagination"] .text-primary-600,
.dark nav[aria-label="Pagination"] .dark\:text-primary-400 {
  color: var(--white-0) !important;
}
/* 非当前页 hover(dark:hover:bg-dark-600)→ 柔白 hover;禁用态由源码 opacity-50 处理,颜色不额外干预 */
.dark nav[aria-label="Pagination"] .dark\:hover\:bg-dark-600:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
/* 总数/翻页文字 text-gray-700 dark:text-gray-300 已属中性,保留原灰阶,不映射 */

/* ============================================================================
 * 3 · NavigationProgress.vue — 顶部青条 → 银渐变横向 + 柔和白辉光
 *   源码 scoped 用 theme('colors.primary.400/500') 双向渐变(含 :root.dark 变体)。
 *   仅覆盖颜色/辉光;.progress-fade 时序 + keyframes 归 50 段,本段不碰 animation。
 *   .dark .navigation-progress-bar 同时命中 :root.dark 变体(root 上有 .dark),+ !important 反压 scoped。
 * ========================================================================== */
.dark .navigation-progress-bar {
  /* 横向银渐变:两端透明保留原「彗尾」滑光观感,中段用银(--gradient-silver 的银灰停靠色) */
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gray-500) 18%,
    var(--gray-100) 50%,
    var(--gray-500) 82%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 8px rgba(232, 232, 234, 0.28) !important; /* 柔和白辉光,推导自 --glow-white */
}

/* ============================================================================
 * 4 · StatCard.vue — @apply 语义类(裸类映射覆盖不到,须直击语义类名)
 *   .stat-icon-primary 浅色底片(bg-primary-100 + dark:bg-primary-900/30)→ 中性曜石微白;
 *   -success/-warning/-danger 底片 + 文字 → 规范状态色;.stat-trend-up/-down 保状态语义。
 * ========================================================================== */
.dark .stat-icon-primary {
  background-color: rgba(255, 255, 255, 0.055) !important; /* --glass-bg */
  color: var(--gray-100) !important;
}
.dark .stat-icon-success {
  background-color: rgba(100, 214, 140, 0.14) !important;  /* --status-online @14% */
  color: var(--status-online) !important;
}
.dark .stat-icon-warning {
  background-color: rgba(227, 192, 106, 0.14) !important;  /* --status-degraded @14% */
  color: var(--status-degraded) !important;
}
.dark .stat-icon-danger {
  background-color: var(--danger-soft) !important;
  color: var(--danger) !important;
}
.dark .stat-trend-up { color: var(--status-online) !important; }
.dark .stat-trend-down { color: var(--danger) !important; }

/* ============================================================================
 * 5 · StatusBadge.vue — 灰点 bg-gray-400 → --status-offline
 *   (green/yellow/red 三态点 00核心 §8 已 remap;仅缺默认灰点。
 *    --status-offline(#8A8A8F)== --gray-400,语义正名,视觉零变。)
 * ========================================================================== */
.dark .bg-gray-400 { background-color: var(--status-offline) !important; }

/* ============================================================================
 * 6 · 监控页 monitor/* — MonitorCard 手工样式 + provider 身份色去彩
 *   源码卡壳:bg-white/70 dark:bg-dark-800/60 border-gray-200/80 dark:border-dark-700/70
 *            dark:hover:border-primary-500/30 (青)。00核心缺这些 /60 /70 /30 alpha 变体。
 * ========================================================================== */
/* 卡壳半透明底 / 边(补 00核心未列的 alpha 档) */
.dark .dark\:bg-dark-800\/60 { background-color: rgba(20, 20, 22, 0.6) !important; }      /* --bg-panel @60% */
.dark .dark\:border-dark-700\/70,
.dark .dark\:border-dark-700\/60 { border-color: var(--border-hairline) !important; }
/* hover 青边 → 中性强边(纪律:hover 用银白,不用 primary 青) */
.dark .dark\:hover\:border-primary-500\/30:hover { border-color: var(--border-strong) !important; }

/* —— provider 身份渐变图标块 → 统一灰阶(openai/anthropic/gemini/grok 全归中性,靠图标+文字区分) —— */
/* 命中 providerGradient() 的 from-* 与 to-*(浅色停靠 + dark alpha 停靠) */
.dark .from-emerald-50, .dark .from-orange-50, .dark .from-sky-50, .dark .from-zinc-50,
.dark .dark\:from-emerald-500\/10, .dark .dark\:from-orange-500\/10,
.dark .dark\:from-sky-500\/10, .dark .dark\:from-zinc-500\/10 {
  --tw-gradient-from: rgba(255, 255, 255, 0.06) var(--tw-gradient-from-position) !important; /* 中性玻璃起点 */
  --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.dark .to-emerald-100, .dark .to-amber-100, .dark .to-indigo-100, .dark .to-neutral-200,
.dark .dark\:to-emerald-500\/20, .dark .dark\:to-amber-500\/20,
.dark .dark\:to-indigo-500\/20, .dark .dark\:to-neutral-500\/20, .dark .dark\:to-zinc-500\/20 {
  --tw-gradient-to: rgba(255, 255, 255, 0.02) var(--tw-gradient-to-position) !important; /* 中性玻璃收尾 */
}

/* —— provider 身份 badge / tint 文字(orange=anthropic / sky=gemini / zinc=grok / neutral)→ 灰阶 —— */
/* orange 全家桶(anthropic 身份、GroupBadge/PlatformTypeBadge tier) */
.dark .text-orange-600, .dark .text-orange-700, .dark .text-orange-800,
.dark .dark\:text-orange-400, .dark .dark\:text-orange-300,
.dark .text-sky-600, .dark .text-sky-700,
.dark .dark\:text-sky-300,
.dark .text-zinc-700, .dark .text-zinc-800,
.dark .dark\:text-zinc-100, .dark .dark\:text-zinc-200, .dark .dark\:text-zinc-300 {
  color: var(--gray-100) !important;
}
/* provider/tier alpha 底片 → 中性玻璃 */
.dark .dark\:bg-orange-500\/15, .dark .dark\:bg-orange-900\/30, .dark .dark\:bg-orange-900\/20,
.dark .dark\:bg-sky-500\/15, .dark .dark\:bg-sky-900\/30, .dark .dark\:bg-sky-900\/20,
.dark .dark\:bg-zinc-500\/15, .dark .dark\:bg-zinc-700, .dark .dark\:bg-zinc-800,
.dark .bg-orange-100, .dark .bg-orange-50, .dark .bg-sky-100, .dark .bg-sky-50,
.dark .bg-zinc-100, .dark .bg-zinc-200 {
  background-color: rgba(255, 255, 255, 0.05) !important; /* --glass-bg 近似,与 00核心图标底片同值 */
}
/* provider picker 边框(active/hover)→ 中性强边;冰蓝聚焦交表单段,这里只去彩 */
.dark .border-orange-500, .dark .dark\:border-orange-400,
.dark .border-sky-500, .dark .dark\:border-sky-400,
.dark .border-zinc-500, .dark .border-zinc-400, .dark .dark\:border-zinc-400,
.dark .border-sky-200 {
  border-color: var(--border-strong) !important;
}
.dark .hover\:border-orange-300:hover, .dark .dark\:hover\:border-orange-500\/50:hover,
.dark .hover\:border-sky-300:hover, .dark .dark\:hover\:border-sky-500\/50:hover,
.dark .hover\:border-zinc-400:hover, .dark .dark\:hover\:border-zinc-500\/50:hover,
.dark .hover\:border-emerald-300:hover, .dark .dark\:hover\:border-emerald-500\/50:hover {
  border-color: var(--border-strong) !important;   /* emerald hover 变体仅用于 openai picker(useChannelMonitorFormat:97),与 orange/sky/zinc 对齐 */
}
.dark .hover\:bg-sky-200:hover, .dark .hover\:bg-orange-50:hover {
  background-color: rgba(255, 255, 255, 0.08) !important; /* --glass-bg-strong 近似 */
}
.dark .hover\:text-orange-700:hover, .dark .hover\:text-sky-700:hover, .dark .hover\:text-zinc-800:hover {
  color: var(--white-0) !important;
}
/* provider 状态 badge(operational/degraded/failed)保状态语义 → 规范低饱和状态色 */
/* 注:dark:bg-emerald-500/15 被在线状态徽章(statusBadgeClass)与 openai provider picker(providerPickerClass)复用同一裸类,
 *   在线绿是安全关键语义、必须保留 → 保持映射为 --status-online;openai 身份底/选中边(border-emerald-500 / dark:border-emerald-400)
 *   因与全站 success 语义(style.css .success 提示条/支付 spinner/选中点)共用裸类,裸类灰化会误伤 → 接受 openai 恒为绿的例外(选中边同理不灰化,仅 hover 变体已去彩)。 */
.dark .dark\:bg-emerald-500\/15 { background-color: rgba(100, 214, 140, 0.14) !important; } /* --status-online */
.dark .dark\:bg-amber-500\/15 { background-color: rgba(227, 192, 106, 0.14) !important; }   /* --status-degraded */
.dark .dark\:bg-red-500\/15 { background-color: var(--danger-soft) !important; }
.dark .dark\:text-amber-300 { color: var(--status-degraded) !important; }
.dark .dark\:text-red-300 { color: var(--danger) !important; }
/* MonitorTimeline 柱(bg-emerald/amber/red-500)与状态点 00核心 §8 已 remap 为状态色,无需重复 */

/* ============================================================================
 * 7 · Group/Platform 徽章残留 + AppHeader 余额胶囊 + admin 侧栏 brand hover
 * ========================================================================== */
/* GroupBadge tier(bg-*-200/xx text-*-800 dark:bg-*-800/xx dark:text-*-300):
 *   装饰性 tier(orange/emerald/blue/purple/violet/zinc)→ 灰阶;状态性(red=过期/amber=将过期)→ 保状态色。 */
.dark .bg-orange-200\/60, .dark .bg-emerald-200\/60, .dark .bg-blue-200\/60,
.dark .bg-purple-200\/60, .dark .bg-violet-200\/60, .dark .bg-zinc-300\/70,
.dark .dark\:bg-orange-800\/40, .dark .dark\:bg-emerald-800\/40, .dark .dark\:bg-blue-800\/40,
.dark .dark\:bg-purple-800\/40, .dark .dark\:bg-violet-800\/40, .dark .dark\:bg-zinc-700\/60 {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
.dark .text-orange-800, .dark .text-emerald-800, .dark .text-blue-800,
.dark .text-purple-800, .dark .text-violet-800, .dark .text-zinc-800,
.dark .dark\:text-blue-300, .dark .dark\:text-purple-300, .dark .dark\:text-violet-300 {
  color: var(--gray-100) !important;
}
/* 注意:.dark\:text-emerald-300 不在上组 —— 它是压倒性的在线/成功语义(19 文件:在线徽章/激活/健康/正值等),
 *   不是纯装饰 tier。留给 00核心 §9 映射为 --status-online(绿),避免全站 emerald-300 误伤变灰。
 *   GroupBadge 的 emerald 装饰随之回落为绿(作为正向 tier 可接受);若确需灰化须用容器限定选择器单独处理。 */
/* GroupBadge 状态 tier:过期红 / 将过期琥珀 → 规范状态色 */
.dark .bg-red-200\/80, .dark .dark\:bg-red-800\/50 { background-color: var(--danger-soft) !important; }
.dark .bg-amber-200\/80, .dark .dark\:bg-amber-800\/50 { background-color: rgba(227, 192, 106, 0.14) !important; }
.dark .text-red-800 { color: var(--danger) !important; }
.dark .text-amber-800 { color: var(--status-degraded) !important; }

/* GroupCapacityBadge(bg-red-100/bg-yellow-100 + text-*-700 dark:*-400):容量告警 → 状态色
 *   text-red-* 与 -400、text-yellow-* 与 -400、bg-red-500 与 bg-yellow-500 均由 00核心覆盖;此处补 -100 底片 + -700 文字 */
/* bg-red-100 / bg-yellow-100 是全局状态裸类(支付 OrderStatusBadge FAILED/PENDING、并发/测试面板等 32/12 文件),
 *   属危险/警告色系,不可统一灰化 → 映射为规范低饱和状态底(与 badge-danger、dark:bg-red-500/15 处理一致)。 */
.dark .bg-red-100 { background-color: var(--danger-soft) !important; }            /* 危险底,同 --danger-soft */
.dark .bg-yellow-100 { background-color: rgba(227, 192, 106, 0.14) !important; }  /* 警告底,--status-degraded @14% */
.dark .text-red-700 { color: var(--danger) !important; }
.dark .text-yellow-700 { color: var(--status-degraded) !important; }

/* GroupOptionItem 费率胶囊(anthropic=amber / openai=green / gemini=sky / 其他=violet):
 *   green/amber 属状态色系保留;sky/violet 装饰 → 灰阶。-50 底片 + -700/-400 文字。 */
.dark .bg-violet-50, .dark .bg-green-50, .dark .bg-amber-50 { background-color: rgba(255, 255, 255, 0.05) !important; }
.dark .text-violet-700, .dark .dark\:text-violet-400, .dark .text-sky-700 { color: var(--gray-100) !important; }
/* green-700/amber-700 → 状态色(green=在线系,amber=降级系) */
.dark .text-green-700 { color: var(--status-online) !important; }
.dark .text-amber-700 { color: var(--status-degraded) !important; }

/* AppHeader 余额胶囊:primary-* 部分(bg-primary-50 / text-primary-600/700 / dark:bg-primary-900/20 /
 *   dark:text-primary-400/300 / from-primary-500 to-primary-600 头像)00核心已全数 remap 为中性银;
 *   仅冻结金额琥珀(warning 态)补齐 → 保降级语义。 */
.dark .dark\:bg-amber-900\/40 { background-color: rgba(227, 192, 106, 0.14) !important; } /* 冻结标签底 */
.dark .dark\:text-amber-200 { color: var(--status-degraded) !important; }               /* 冻结金额文字 */

/* admin/AppSidebar brand 标题 hover:text-primary-600 dark:hover:text-primary-400 → 近白
 *   (00核心已把 hover:text-primary-500/700 与 dark:hover:text-primary-300 → 白;补 -600/-400 档) */
.dark .hover\:text-primary-600:hover,
.dark .dark\:hover\:text-primary-400:hover { color: var(--white-0) !important; }


/* ===== sections/45-purchase.css ===== */
/* ============================================================================
 * 段 45 · 购买/订阅页 (purchase) — 研路AI × Sub2api 主题 v2
 * ----------------------------------------------------------------------------
 * 路由 /purchase → views/user/PaymentView.vue（充值 / 订阅 双 tab）。
 * 职责: 把订阅套餐卡 (components/payment/SubscriptionPlanCard.vue) 与充值/订阅 tab
 *   下的官方绿色系(primary/emerald)重塑为落地页 Pricing 的曜石玻璃语言;
 *   页面其余装饰绿→灰阶, 状态语义→status token。
 * 设计源: Sub2API部署包/theme/landing/website.js 的 TIERS/Pricing/Card 规格
 *   (曜石玻璃卡·档名 14px text-2·价 32px mono w500·限额面板 hairline·常选 chip)。
 *   注: 落地页 hot 档为 Card variant=glass+glow+「常选」chip; 但 SubscriptionPlanCard
 *   源码【无】推荐/主推档变体(无 hot/popular/featured 字段, 见 vue+platformColors),
 *   故不发明高亮档 —— 五卡一视同仁曜石玻璃。
 *
 * 容器锚点(全部容器限定, 特异度稳赢 10 段裸类兜底与 60-light 泛化(0,2,x)):
 *   ① 页面根: .mx-auto.max-w-4xl.space-y-6 (PaymentView.vue:3, 全站唯一) —— 限定 tab
 *      切换器 / 充值金额卡 / 订阅确认面板 / 活跃订阅条 等【页内】元素。
 *   ② 套餐卡: .group.relative.flex.flex-col.overflow-hidden.rounded-2xl
 *      (SubscriptionPlanCard.vue:2-8, 该组件唯一) —— 卡片同时出现在套餐列表【与】
 *      续订弹窗(Teleport to body, PaymentView.vue:237), 故卡片规则【不】挂在页根下,
 *      改用卡片自身类锚点, 两处实例一致重塑。
 *
 * 手法: 暗色 .dark 前缀 / 浅色 html:not(.dark) 前缀, 各自包含; 每条声明 !important;
 *   值一律 var(--token)(定义在 00 核心, 浅色值由 60-light 的 html:not(.dark) 重定义
 *   自动取到); 字面 rgba 紧邻注释注明由哪个 token 推导。
 * 边界: 支付品牌按钮 .btn-stripe/-alipay/-wxpay/-airwallex 绝不碰(paymentButtonClass
 *   / confirmSubscribe 走品牌色); .btn-primary/.btn-secondary/.card/.badge 已由核心
 *   与 60-light 统一处理, 本段不重复; 货币符号 $ / ¥ 是数据不处理。
 *   注释内提及通配类一律用「x」代替星号, 严禁「星号斜杠」连写。
 * ========================================================================== */


/* ========================================================================== *
 *  暗色 (.dark)
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 45.1 · 充值/订阅 tab 切换器 (PaymentView.vue:9-13)
 *   容器 bg-gray-100 dark:bg-dark-800 → 曜石面板 + 发丝内描边;
 *   选中态(dark:bg-dark-700 dark:text-white) → 近白玻璃片 + 近白字;
 *   未选(dark:text-gray-400) → 次级灰, hover 近白; 键盘 focus → 冰蓝环。
 * ------------------------------------------------------------------------- */
.dark .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 {
  background-color: var(--bg-panel) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  border-radius: var(--radius-btn) !important;
}
/* 选中 tab: 近白玻璃抬升片 + 近白字 */
.dark .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 button.dark\:bg-dark-700 {
  background-color: var(--glass-bg-strong) !important;
  color: var(--text-1) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline), var(--elevation-1) !important;
}
/* 未选 tab: 次级灰 → hover 近白 */
.dark .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 button.dark\:text-gray-400 {
  color: var(--text-2) !important;
}
.dark .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 button.dark\:hover\:text-gray-300:hover {
  color: var(--text-1) !important;
}
/* 键盘 focus 冰蓝环 */
.dark .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ice-blue), var(--focus-ring) !important;
}

/* ---------------------------------------------------------------------------
 * 45.2 · 充值 tab — 账户余额 / 金额卡 / 摘要 / loading (PaymentView.vue:35-89)
 * ------------------------------------------------------------------------- */
/* 当前余额 text-green-600 dark:text-green-400 → 近白(装饰性强调, 非在线状态) */
.dark .mx-auto.max-w-4xl.space-y-6 .dark\:text-green-400 { color: var(--text-1) !important; }

/* 快捷金额按钮选中态(AmountInput.vue:15) dark:border-primary-400/bg-primary-900\/40/
 * text-primary-300 → 近白玻璃选中片 + 发丝强描边 + 近白字("选中态近白、hairline") */
.dark .mx-auto.max-w-4xl.space-y-6 .dark\:bg-primary-900\/40 { background-color: var(--glass-bg-strong) !important; }
.dark .mx-auto.max-w-4xl.space-y-6 .dark\:border-primary-400 { border-color: var(--border-strong) !important; }
.dark .mx-auto.max-w-4xl.space-y-6 .dark\:text-primary-300 { color: var(--text-1) !important; }

/* 摘要「实付」大字 text-primary-600 dark:text-primary-400 / 确认面板 rate → 近白 mono。
 * ⚠ 用 span 限定: 页根下 .text-lg.font-bold 实际命中 span×3(充值实付 72、订阅 rate 121、实付 167)
 *   ＋ h3 套餐名 102 ＋ PaymentStatusPanel 结果标题的<p>(12/47/63); 后两类是标题, 不应变 mono/w500,
 *   故加 span. 前缀只取三个数值 span, 放过 h3 与<p>标题(它们的字色仍由核心 text-1 处理)。 */
.dark .mx-auto.max-w-4xl.space-y-6 span.text-lg.font-bold {
  color: var(--text-1) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
}

/* 初始 loading 转圈 spinner (PaymentView.vue:5, .border-primary-500.border-t-transparent) → 三级灰(去 teal)。
 * ⚠ 只染右/下/左三边, 顶边保留原子类 border-t-transparent 的透明缺口; 若用 border-color 四边同色→实心环、
 *   旋转不可感。以 .border-t-transparent 精确限定 spinner, 不碰快捷金额选中按钮(其 border-primary-500 由上方
 *   dark:border-primary-400 → border-strong 规则接管四边强描边)。 */
.dark .mx-auto.max-w-4xl.space-y-6 .border-primary-500.border-t-transparent {
  border-right-color: var(--text-3) !important;
  border-bottom-color: var(--text-3) !important;
  border-left-color: var(--text-3) !important;
}

/* ---------------------------------------------------------------------------
 * 45.3 · 套餐卡壳体 (SubscriptionPlanCard.vue:2-8) — 曜石玻璃材质
 *   bg-white dark:bg-dark-800 + border-{platform}-500/20 → 玻璃底+发丝描边+卡片圆角
 *   +elevation-2; hover 柔和白辉光。顶部绿色渐变条(:11) → 去掉(化为无)。
 * ------------------------------------------------------------------------- */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl {
  background-color: var(--glass-bg) !important;
  background-image: none !important;
  border-color: var(--glass-border) !important;
  border-radius: var(--radius-card) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2) !important;
  box-shadow: var(--inset-highlight), var(--elevation-2) !important;
}
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl:hover {
  box-shadow: var(--inset-highlight), var(--elevation-3), var(--glow-white) !important;
}
/* 顶部平台色渐变条 accentClass(.h-1.5, 直接子) → 隐去(曜石玻璃不需分隔条带) */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl > .h-1\.5 {
  display: none !important;
}

/* 平台徽标 chip (badgeLightClass, :19) → 中性 chip: 白玻璃底+发丝+gray-100 字
 * (结构锚点直接压 color, 平台色 text-x-600/300 一网打尽) */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .rounded-full.px-2.py-0\.5.text-\[11px\].font-medium {
  background-color: var(--glass-bg) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  color: var(--gray-100) !important;
}

/* 价格大数字 textClass(.text-2xl.font-extrabold.tracking-tight, :30) → 近白 mono w500 */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .text-2xl.font-extrabold.tracking-tight {
  color: var(--text-1) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
}

/* 折扣 chip discountClass(.rounded.text-[10px].font-semibold, :35) → 中性玻璃片 */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .rounded.px-1.py-0\.5.text-\[10px\].font-semibold {
  background-color: var(--glass-bg) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  color: var(--gray-200) !important;
}

/* 限额小面板(.rounded-lg.bg-gray-50 dark:bg-dark-700\/50, :41) → bg-panel+发丝+radius-sm */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .rounded-lg.bg-gray-50 {
  background-color: var(--bg-panel) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  border-radius: var(--radius-sm) !important;
}
/* 面板内数值(倍率/日/周/月限额 .font-medium, :44/52/59) → mono */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .rounded-lg.bg-gray-50 .font-medium {
  font-family: var(--font-mono) !important;
  color: var(--text-1) !important;
}
/* 峰时倍率 text-amber-700 dark:text-amber-300 (:48) → 降级琥珀(警示语义保留) */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .dark\:text-amber-300 { color: var(--status-degraded) !important; }

/* 勾选项图标 iconClass(svg.h-3.5.w-3.5, :80) → 在线绿(语义保留, 仅图标) */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl svg.h-3\.5.w-3\.5 { color: var(--status-online) !important; }
/* 勾选项文字 text-gray-600 dark:text-gray-300 (:83) → 次级灰(克制) */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .flex.items-start.gap-1\.5 .text-xs { color: var(--text-2) !important; }

/* CTA「立即开通/续费」btnClass(button.w-full.rounded-xl, :90-96) → 近白实底+曜石深字 */
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl button.w-full.rounded-xl {
  background-color: var(--gray-100) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, var(--gray-100) 100%) !important; /* 近白, 上白高光 */
  color: var(--obsidian-0) !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), var(--elevation-2) !important; /* rgba 由 --white-0 推导 */
}
.dark .group.relative.flex.flex-col.overflow-hidden.rounded-2xl button.w-full.rounded-xl:hover {
  background-image: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%) !important; /* 微亮 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), var(--elevation-2), var(--glow-white) !important;
}
/* active:scale-[0.98] 保官方(transform 由原子类保留, 不覆盖) */

/* ---------------------------------------------------------------------------
 * 45.4 · 订阅确认面板 (PaymentView.vue:95-179, 页根内 .card)
 * ------------------------------------------------------------------------- */
/* 平台徽标 planBadgeClass(.rounded-md.border.px-2.py-0.5.text-xs.font-medium, :99)
 *   → 中性 chip(白玻璃底+发丝边+gray-100 字), 平台色底/边/字结构锚点一并压掉 */
.dark .mx-auto.max-w-4xl.space-y-6 .card .rounded-md.border.px-2.py-0\.5.text-xs.font-medium {
  background-color: var(--glass-bg) !important;
  border-color: var(--border-hairline) !important;
  color: var(--gray-100) !important;
}
/* 大价格 planTextClass(.text-3xl.font-bold, :109) → 近白 mono w500 */
.dark .mx-auto.max-w-4xl.space-y-6 .card .text-3xl.font-bold {
  color: var(--text-1) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
}
/* 峰时倍率 text-amber-700 dark:text-amber-300 (:126) → 降级琥珀 */
.dark .mx-auto.max-w-4xl.space-y-6 .card .dark\:text-amber-300 { color: var(--status-degraded) !important; }
/* 限额数值 text-gray-800 dark:text-gray-200 (:132/136/140/144) → mono(近白已由核心给灰阶) */
.dark .mx-auto.max-w-4xl.space-y-6 .card .text-lg.font-semibold { font-family: var(--font-mono) !important; }
/* (rate .text-lg.font-bold 与实付已由 45.2 通则覆盖) */

/* ---------------------------------------------------------------------------
 * 45.5 · 活跃订阅条 (PaymentView.vue:190-210, 页根内)
 * ------------------------------------------------------------------------- */
/* 左侧平台色竖条 platformAccentBarClass(.h-6.w-1.rounded-full, :195) → 中性灰(身份色纪律) */
.dark .mx-auto.max-w-4xl.space-y-6 .h-6.w-1.shrink-0.rounded-full {
  background-color: var(--gray-400) !important;
  background-image: none !important;
}
/* 平台徽标 chip platformBadgeLightClass(.rounded-full.px-1.5.py-0.5.text-[9px], :199) → 中性 */
.dark .mx-auto.max-w-4xl.space-y-6 .rounded-full.px-1\.5.py-0\.5.text-\[9px\].font-medium {
  background-color: var(--glass-bg) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  color: var(--gray-100) !important;
}
/* 「有效」badge .badge.badge-success (:209) → 状态在线(交由核心/10 段; 此处不重复) */


/* ========================================================================== *
 *  浅色 (html:not(.dark)) — 与暗色对称, 反相处理(近白玻璃 → 白面板; 近白CTA → 近黑CTA)
 * ========================================================================== */

/* ---- 45.1L tab 切换器 (裸类 bg-gray-100 在浅色下真实渲染) ---- */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 {
  background-color: var(--bg-panel) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  border-radius: var(--radius-btn) !important;
}
/* 选中 tab 裸类 bg-white text-gray-900 shadow → 白抬升片 + 主文字 */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 button.bg-white {
  background-color: var(--surface-card) !important;
  color: var(--text-1) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline), var(--elevation-1) !important;
}
/* 未选 tab 裸类 text-gray-500 → 次级, hover 主文字 */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 button.text-gray-500 {
  color: var(--text-2) !important;
}
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 button.hover\:text-gray-700:hover {
  color: var(--text-1) !important;
}
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .flex.space-x-1.rounded-xl.bg-gray-100.p-1 button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ice-blue), var(--focus-ring) !important;
}

/* ---- 45.2L 充值 tab ---- */
/* 余额 text-green-600 → 主文字(装饰强调) */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .text-green-600 { color: var(--text-1) !important; }
/* 快捷金额选中态裸类 border-primary-500 bg-primary-50 text-primary-700 → 白选中片+强描边+主字 */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .bg-primary-50 { background-color: var(--surface-card-hover) !important; }
/* 选中按钮四边强描边; :not(.border-t-transparent) 排除 loading spinner(避免染其顶边) */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .border-primary-500:not(.border-t-transparent) { border-color: var(--border-strong) !important; }
/* 初始 loading 转圈 spinner: 只染右/下/左三边, 顶边留 border-t-transparent 透明缺口(同暗色, 保住旋转) */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .border-primary-500.border-t-transparent {
  border-right-color: var(--border-strong) !important;
  border-bottom-color: var(--border-strong) !important;
  border-left-color: var(--border-strong) !important;
}
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .text-primary-700 { color: var(--text-1) !important; }
/* 实付大字 text-primary-600 / confirm rate / 实付 → 主文字 mono w500(同暗色, span 限定放过 h3 套餐名与<p>标题) */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 span.text-lg.font-bold {
  color: var(--text-1) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
}

/* ---- 45.3L 套餐卡壳体 (裸类 bg-white / border-{platform}-500/20 浅色渲染) ---- */
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl {
  background-color: var(--surface-card) !important;
  background-image: none !important;
  border-color: var(--glass-border) !important;
  border-radius: var(--radius-card) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
  box-shadow: var(--inset-highlight), var(--elevation-1) !important;
}
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl:hover {
  box-shadow: var(--inset-highlight), var(--elevation-2) !important;
}
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl > .h-1\.5 { display: none !important; }

/* 徽标 chip → 中性(近黑微片+发丝+gray-900 字) */
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .rounded-full.px-2.py-0\.5.text-\[11px\].font-medium {
  background-color: var(--glass-bg) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  color: var(--text-1) !important;
}
/* 价格 → 主文字 mono w500 */
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .text-2xl.font-extrabold.tracking-tight {
  color: var(--text-1) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
}
/* 折扣 chip → 中性 */
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .rounded.px-1.py-0\.5.text-\[10px\].font-semibold {
  background-color: var(--glass-bg) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  color: var(--text-2) !important;
}
/* 限额小面板 bg-gray-50 → bg-panel+发丝+radius-sm */
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .rounded-lg.bg-gray-50 {
  background-color: var(--bg-panel) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  border-radius: var(--radius-sm) !important;
}
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .rounded-lg.bg-gray-50 .font-medium {
  font-family: var(--font-mono) !important;
  color: var(--text-1) !important;
}
/* 峰时倍率 text-amber-700 → 降级琥珀 */
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .text-amber-700 { color: var(--status-degraded) !important; }
/* 勾图标 text-emerald-500 → 在线绿 */
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl svg.h-3\.5.w-3\.5 { color: var(--status-online) !important; }
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl .flex.items-start.gap-1\.5 .text-xs { color: var(--text-2) !important; }

/* CTA → 近黑实底 + 白字(暗色近白 CTA 的反相) */
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl button.w-full.rounded-xl {
  background-color: #141416 !important;                                   /* 由 --obsidian-2 推导 */
  background-image: linear-gradient(180deg, #2A2A2E 0%, #141416 100%) !important; /* 近黑, 由 --gray-700→--gray-900 推导 */
  color: #FFFFFF !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), var(--elevation-1) !important; /* rgba 由 --white-0 低透推导 */
}
html:not(.dark) .group.relative.flex.flex-col.overflow-hidden.rounded-2xl button.w-full.rounded-xl:hover {
  background-image: linear-gradient(180deg, #38383D 0%, #1C1C1E 100%) !important; /* 微亮 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), var(--elevation-2) !important;
}

/* ---- 45.4L 订阅确认面板 ---- */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .card .rounded-md.border.px-2.py-0\.5.text-xs.font-medium {
  background-color: var(--glass-bg) !important;
  border-color: var(--border-hairline) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .card .text-3xl.font-bold {
  color: var(--text-1) !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
}
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .card .text-amber-700 { color: var(--status-degraded) !important; }
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .card .text-lg.font-semibold { font-family: var(--font-mono) !important; }

/* ---- 45.5L 活跃订阅条 ---- */
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .h-6.w-1.shrink-0.rounded-full {
  background-color: var(--gray-400) !important;
  background-image: none !important;
}
html:not(.dark) .mx-auto.max-w-4xl.space-y-6 .rounded-full.px-1\.5.py-0\.5.text-\[9px\].font-medium {
  background-color: var(--glass-bg) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
  color: var(--text-1) !important;
}


/* ===== sections/50-motion.css ===== */
/* ============================================================================
 * 50-motion.css — 动效统一层（缺口报告 §7）
 * ----------------------------------------------------------------------------
 * 段职责：只统一全站二三级浮层的「过渡时序」到 DS 动效 token，绝不碰静态
 *   颜色/材质（那归 10/20/30/40 段）。仅动 transition / animation / transform。
 * DS token（已在 00核心 ds/effects.css 定义，直接 var() 引用，禁止重复定义）：
 *   --ease-out    = cubic-bezier(0.22, 0.61, 0.36, 1)   统一缓动
 *   --duration-base = 240ms  进场
 *   --duration-fast = 140ms  退场 / 微交互
 * 原则：只用 transform / opacity（GPU 友好）；scoped 类必须逐条 !important
 *   （Vue 编译成 .foo[data-v-x] = 0,2,0，本层 .dark .foo 0,2,0 需 !important 取胜）；
 *   全局 .modal-*：unlayered 天然压过 style.css 的 @layer components，但组件里的
 *   scoped 自定义 modal（如 BackupView 的 <transition name="modal">，编译成
 *   .modal-enter-active[data-v-x] = 0,2,0，与本层 .dark .modal-enter-active 同为
 *   unlayered 且特异度相等）胜负仅由注入顺序决定——故 §7.1 亦逐条 !important 保底。
 *
 * ┌──────────── 动效审计表（组件 × 原时序 × 新时序）────────────────────────┐
 * │ 组件/钩子                     │ 原时序                          │ 新时序(DS)              │
 * ├───────────────────────────────┼─────────────────────────────────┼─────────────────────────┤
 * │ BaseDialog×67 .modal-*        │ 进 opacity 250ms ease-out;      │ 进 240ms ease-out;      │
 * │   (+.modal-content)           │ content scale .95→1 250ms;      │ content scale .97→1;    │
 * │                               │ 退 200ms ease-in                │ 退 140ms ease-out       │
 * │ Select .select-dropdown-*     │ all .2s ease + translateY(-8px) │ 进240/退140 ease-out,   │
 * │                               │                                 │ translateY(-6px)+opac   │
 * │ DateRangePicker               │ all .2s ease + translateY(-8px) │ 同上                    │
 * │   .date-picker-dropdown-*     │                                 │                         │
 * │ AnnouncementPopup .popup-fade-*│ .3s cubic(.16,1,.3,1)/.2s;     │ 进240/退140 ease-out,   │
 * │   (+ > div)                   │ >div scale.94 translateY(-12)   │ >div scale.97 tY(-8px)  │
 * │ AnnouncementBell .modal-fade-*│ 同 popup-fade                   │ 同上                    │
 * │   (+ > div)                   │                                 │                         │
 * │ NavigationProgress            │ opacity 进.15s/退.3s ease-out   │ 进240/退140 ease-out    │
 * │   .progress-fade-*            │ (进度条 slide 动画不碰=非浮层)  │ (仅 fade 时序)          │
 * │ 通用下拉 .dropdown-*          │ all .15–.2s ease +              │ 进240/退140 ease-out,   │
 * │  (AppHeader/Locale/Version/   │ scale.95 translateY(-4px)       │ scale.98 translateY(-6) │
 * │   SubscriptionProgressMini)   │                                 │                         │
 * │ 通用淡入 .fade-*              │ all .2–.3s ease (±translateY-8) │ 仅归一时序240/140,      │
 * │  (多组件)                     │                                 │ 位移由各组件保留        │
 * │ 登录协议 .agreement-fade-*    │ .18s ease + >div translateY8    │ 仅归一时序240/140,      │
 * │   (+ > div)                   │ scale.98                        │ 位移保留                │
 * │ 微交互 .dropdown-item/        │ 各异 / 无                       │ bg-color/color          │
 * │   .select-option/.date-picker-preset │                          │ 140ms ease-out          │
 * │ Toast TransitionGroup         │ Tailwind 内联 ease-out300/in200 │ 【不碰】无 CSS 钩子      │
 * └───────────────────────────────┴─────────────────────────────────┴─────────────────────────┘
 * reduced-motion：官方 style.css 的 modal reduce 规则 + NavigationProgress reduce
 *   规则不得失效；本段所有新增位移动效在文末 @media (prefers-reduced-motion: reduce)
 *   显式关闭（transition 归零 / transform:none），既统一常态时序又补齐原缺失的降级。
 * ========================================================================== */


/* ============================================================================
 * §7.1 · 全局 BaseDialog（.modal-*，被 67 组件复用）
 *   unlayered 压过 style.css @layer components；但对组件 scoped 自定义 modal
 *   （BackupView 的 .modal-*[data-v-x]，同 unlayered 且特异度相等）不能靠机制取胜，
 *   故逐条 !important 保底（免受生产/dev 注入顺序影响）。
 *   遮罩淡入 + 内容 scale .97 抬入（参照 ds-spec/overlays/Modal.jsx 入场规范）。
 * ========================================================================== */
.dark .modal-enter-active { transition: opacity var(--duration-base) var(--ease-out) !important; }
.dark .modal-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
.dark .modal-enter-active .modal-content {
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important;
}
.dark .modal-leave-active .modal-content {
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important;
}
/* 入场起始：官方 scale(.95) → 收敛为更克制的 .97 抬入 */
.dark .modal-enter-from .modal-content,
.dark .modal-leave-to .modal-content { transform: scale(0.97); opacity: 0; }


/* ============================================================================
 * §7.2 · Select 下拉（.select-dropdown-*，scoped → 必须 !important）
 *   原 all .2s ease + translateY(-8px) → DS 时序 + 收敛位移 -6px（subtle）
 * ========================================================================== */
.dark .select-dropdown-enter-active {
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important;
}
.dark .select-dropdown-leave-active {
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important;
}
.dark .select-dropdown-enter-from,
.dark .select-dropdown-leave-to { opacity: 0 !important; transform: translateY(-6px) !important; }


/* ============================================================================
 * §7.3 · DateRangePicker 下拉（.date-picker-dropdown-*，scoped → !important）
 * ========================================================================== */
.dark .date-picker-dropdown-enter-active {
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important;
}
.dark .date-picker-dropdown-leave-active {
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important;
}
.dark .date-picker-dropdown-enter-from,
.dark .date-picker-dropdown-leave-to { opacity: 0 !important; transform: translateY(-6px) !important; }


/* ============================================================================
 * §7.4 · 公告强弹窗 AnnouncementPopup（.popup-fade-*，scoped → !important）
 *   外层淡入 + 内层 > div scale .97 抬入；原 cubic(.16,1,.3,1) → 统一 --ease-out
 * ========================================================================== */
.dark .popup-fade-enter-active { transition: opacity var(--duration-base) var(--ease-out) !important; }
.dark .popup-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
.dark .popup-fade-enter-active > div {
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important;
}
.dark .popup-fade-leave-active > div {
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important;
}
.dark .popup-fade-enter-from > div,
.dark .popup-fade-leave-to > div { transform: scale(0.97) translateY(-8px) !important; opacity: 0 !important; }


/* ============================================================================
 * §7.5 · 公告铃铛弹窗 AnnouncementBell（.modal-fade-*，scoped → !important）
 *   与 popup-fade 同源时序（原样一致），统一归一
 * ========================================================================== */
.dark .modal-fade-enter-active { transition: opacity var(--duration-base) var(--ease-out) !important; }
.dark .modal-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
.dark .modal-fade-enter-active > div {
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important;
}
.dark .modal-fade-leave-active > div {
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important;
}
.dark .modal-fade-enter-from > div,
.dark .modal-fade-leave-to > div { transform: scale(0.97) translateY(-8px) !important; opacity: 0 !important; }


/* ============================================================================
 * §7.6 · NavigationProgress 顶部进度条 fade（.progress-fade-*，scoped → !important）
 *   仅统一淡入淡出时序；进度条 slide/pulse 动画与青色渐变归色彩段，不碰。
 * ========================================================================== */
.dark .progress-fade-enter-active { transition: opacity var(--duration-base) var(--ease-out) !important; }
.dark .progress-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }


/* ============================================================================
 * §7.3(补) · 通用下拉 .dropdown-*（AppHeader / LocaleSwitcher / VersionBadge /
 *   SubscriptionProgressMini，均 scoped → !important）
 *   原 all .15–.2s ease + scale.95 translateY(-4px) → DS 时序 + scale.98 -6px
 * ========================================================================== */
.dark .dropdown-enter-active {
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important;
}
.dark .dropdown-leave-active {
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important;
}
.dark .dropdown-enter-from,
.dark .dropdown-leave-to { opacity: 0 !important; transform: scale(0.98) translateY(-6px) !important; }


/* ============================================================================
 * §7.3(补) · 通用淡入 .fade-*（多组件，scoped 及个别全局）
 *   仅归一「时序 + 缓动」，不强加位移——各组件 from/to 的 opacity/translateY 自留，
 *   避免给纯 opacity 交叉淡（如 AccountTestModal）平添位移。transform 同步过渡以兼容
 *   带 translateY 的变体（LinuxDoCallback / PendingOAuth）。
 * ========================================================================== */
.dark .fade-enter-active {
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out) !important;
}
.dark .fade-leave-active {
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out) !important;
}


/* ============================================================================
 * §7.3(补) · 登录协议提示 .agreement-fade-*（LoginAgreementPrompt，scoped）
 *   仅归一时序；内层 > div 的 translateY(8px) scale(.98) 位移由组件保留。
 * ========================================================================== */
.dark .agreement-fade-enter-active,
.dark .agreement-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
.dark .agreement-fade-enter-active > div {
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important;
}
.dark .agreement-fade-leave-active > div {
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important;
}


/* ============================================================================
 * §7.4(微交互) · 悬停过渡 .dropdown-item / .select-option / .date-picker-preset
 *   仅补 background-color/color 的 140ms 过渡；卡片/按钮的 active:scale-[0.98]
 *   维持官方不动。scoped 类逐条 !important。
 * ========================================================================== */
.dark .dropdown-item,
.dark .select-option,
.dark .date-picker-preset {
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out) !important;
}


/* ============================================================================
 * §7 · prefers-reduced-motion 降级
 *   显式关闭本段新增的所有位移/时序（官方 modal reduce 与 NavigationProgress
 *   reduce 规则同向加固，不会失效）：过渡近乎即时、transform 归零。
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dark .modal-enter-active,
  .dark .modal-leave-active,
  .dark .modal-enter-active .modal-content,
  .dark .modal-leave-active .modal-content,
  .dark .select-dropdown-enter-active,
  .dark .select-dropdown-leave-active,
  .dark .date-picker-dropdown-enter-active,
  .dark .date-picker-dropdown-leave-active,
  .dark .popup-fade-enter-active,
  .dark .popup-fade-leave-active,
  .dark .popup-fade-enter-active > div,
  .dark .popup-fade-leave-active > div,
  .dark .modal-fade-enter-active,
  .dark .modal-fade-leave-active,
  .dark .modal-fade-enter-active > div,
  .dark .modal-fade-leave-active > div,
  .dark .progress-fade-enter-active,
  .dark .progress-fade-leave-active,
  .dark .dropdown-enter-active,
  .dark .dropdown-leave-active,
  .dark .fade-enter-active,
  .dark .fade-leave-active,
  .dark .agreement-fade-enter-active,
  .dark .agreement-fade-leave-active,
  .dark .agreement-fade-enter-active > div,
  .dark .agreement-fade-leave-active > div,
  .dark .dropdown-item,
  .dark .select-option,
  .dark .date-picker-preset {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .dark .modal-enter-from .modal-content,
  .dark .modal-leave-to .modal-content,
  .dark .select-dropdown-enter-from,
  .dark .select-dropdown-leave-to,
  .dark .date-picker-dropdown-enter-from,
  .dark .date-picker-dropdown-leave-to,
  .dark .popup-fade-enter-from > div,
  .dark .popup-fade-leave-to > div,
  .dark .modal-fade-enter-from > div,
  .dark .modal-fade-leave-to > div,
  .dark .dropdown-enter-from,
  .dark .dropdown-leave-to { transform: none !important; }
}


/* ===== sections/60-light.css ===== */
/* ============================================================================
 * 60-light.css — 浅色主题（从黑色主题反推 · 拼接于 50-motion.css 之后）
 * ----------------------------------------------------------------------------
 * 段职责：为「研路AI × Sub2api」提供与暗色（.dark 各分段）同等覆盖面的浅色品牌主题。
 *   官方浅色 = teal on white；本段整体 rebrand 为「极简黑白 · 近白底 · 银灰点缀」。
 *
 * 作用域纪律：
 *   - 全部规则以 html:not(.dark) 作用域（与暗色 .dark 前缀对称，两套互不干扰）。
 *   - 注入 JS 保证：stored=light 时 <html> 无 .dark 类 → 本段生效、暗色各段全部失活。
 *   - 每条 Vue scoped 类 / Tailwind 原子类声明加 !important（同暗色纪律）。
 *   - 值一律 var(--token)；确需字面量 rgba 均紧邻注释注明由哪个 token / 基色推导。
 *     浅色微片统一用 rgba(10,10,11,.0x)（由 border-hairline 基色 #0A0A0B 推导）。
 *
 * 关键前提（决定选择器数量）：Tailwind darkMode:'class' → 形如 `dark:bg-x` 的类编译成
 *   `.dark .bg-x`，在 <html> 无 .dark 时【完全不生效】。故浅色模式下只有【裸原子类】
 *   （bg-blue-50 / text-amber-600 / from-amber-50 …）真实渲染 → 本段【只覆盖裸类】，
 *   所有 `dark:` 变体选择器一律省略（在浅色下是死代码）。这把 653 个非 dark: 类收敛为
 *   本段目标；同值选择器逗号合并。
 *
 * 极简黑白纪律（同暗色）：彩色只允许 (a) 冰蓝 focus 点缀（白底加深为 #4C7FE0 系）
 *   (b) status-online/-degraded/danger 语义状态（白底加深可读版）
 *   (c) 支付品牌按钮 .btn-stripe/-alipay/-wxpay/-airwallex —— 绝不触碰。其余装饰彩色 → 灰阶/银。
 *
 * 边界（与暗色各段对称，本段自包含浅色全量，不依赖任何 .dark 规则）：
 *   L0 tokens · L1 基底 · L2 场景 · L3 卡片/玻璃 · L4 侧栏 · L5 按钮 · L6 文字/点缀 ·
 *   L7 输入/表格/下拉/弹窗/标签 · L8 图标底片/状态/渐变/滚动条 · L10 通用去彩兜底 ·
 *   L20 表单控件 · L30 浮层/通知/markdown · L40 数据/导航 · L50 动效时序（浅色等价）。
 * ========================================================================== */


/* ============================================================================
 * L0 · 语义 token 浅色重定义（html:not(.dark) 特异度 0,1,1 > :root 0,1,0 → 稳赢）
 *   从 DS 灰阶反推 + 参考桌面端 theme-yanlu.css .light 块。base 灰阶/字体 token 不改
 *   （--gray-x 与 --font-x 系为模式无关的调色板/字体，直接复用。注意:注释里绝不能出现「星号斜杠」连写,会提前终止注释吞掉后续规则）。
 * ========================================================================== */
html:not(.dark) {
  /* 背景与表面 */
  --bg-base: #FAFAFA;              /* 主背景 */
  --bg-raised: #FFFFFF;            /* 抬升背景 */
  --bg-panel: #F1F1F3;            /* 面板 */
  --surface-card: #FFFFFF;        /* 实底卡片 */
  --surface-card-hover: #F4F4F6; /* 卡片 hover */

  /* 文字（对比自查见 L1/L6 注释） */
  --text-1: #141416;             /* 主文字 */
  --text-2: #5A5A60;             /* 次级 */
  --text-3: #6E6E73;             /* 三级/占位（加深：on 白 ≈5.1:1 / on 面板 ≈4.5:1 达 AA 正文；原 #8A8A8F 仅 3.4:1） */
  --text-disabled: #A8A8AF;

  /* 边界（近黑低透明，白底可见） */
  --border-hairline: rgba(10, 10, 11, 0.08);
  --border-strong: rgba(10, 10, 11, 0.16);

  /* 液态玻璃（白底：近黑微片 + 近黑描边） */
  --glass-bg: rgba(10, 10, 11, 0.035);
  --glass-bg-strong: rgba(10, 10, 11, 0.06);
  --glass-border: rgba(10, 10, 11, 0.10);
  --glass-highlight: rgba(255, 255, 255, 0.9);

  /* 冰蓝点缀：白底加深一档保证对比（推导：--ice-blue 暗版 #7DA8FF → 加深 #4C7FE0） */
  --ice-blue: #4C7FE0;            /* 边框/环/背景用 */
  --ice-blue-text: #3A66C0;       /* 冰蓝作正文/小字时用：on 白 ≈5.5:1 达 AA（base 3.9:1 不够） */
  --ice-blue-soft: rgba(76, 127, 224, 0.35);
  --ice-blue-glow: rgba(76, 127, 224, 0.16);
  --focus-ring: 0 0 0 3px rgba(76, 127, 224, 0.28); /* 冰蓝 focus 环 @28% */

  /* 状态（白底可读加深版；推导自暗色 status 提亮反相） */
  --status-online: #2E9E5B;      /* 在线绿（填充/圆点/进度/边框用；作文字请用 -text 变体） */
  --status-degraded: #B08A2E;    /* 降级琥珀（填充/圆点/进度/边框用；作文字请用 -text 变体） */
  --status-offline: #8A8A8F;     /* 离线 = gray-400 */
  --danger: #C0392B;             /* 危险红（加深：白字 on 红 与 红字 on 白 均 ≈5.4:1 达 AA 正文） */
  --danger-soft: rgba(192, 57, 43, 0.12);
  /* 状态色·文字专用（作正文/小字/图标字模；on 白 及自身底片均达 AA 正文 4.5:1。
     base 亮版仅供填充/圆点/进度，避免把琥珀填充压成浑浊棕色） */
  --status-online-text: #1E7A45;   /* on 白 5.4:1 / on success 底片 4.7:1 */
  --status-degraded-text: #7E5E16; /* on 白 6.0:1 / on warning 底片 5.2:1 */

  /* Elevation：浅色系（近黑低透明，靠层次不靠重投影） */
  --elevation-1: 0 1px 2px rgba(10, 10, 11, 0.06);
  --elevation-2: 0 8px 24px -8px rgba(10, 10, 11, 0.10);
  --elevation-3: 0 16px 48px -12px rgba(10, 10, 11, 0.14);
  --elevation-glass: 0 24px 64px -16px rgba(10, 10, 11, 0.16);
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7); /* 白顶高光（浅底玻璃） */
  --glow-white: 0 6px 20px -8px rgba(10, 10, 11, 0.22);      /* 复用名：浅底改为柔和暗影 */
  --glow-ice: 0 0 24px -6px rgba(76, 127, 224, 0.20);

  /* 渐变（浅色版：银渐变 → 近黑「图标芯片」；标题银渐变 → 深银） */
  --gradient-silver: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-800) 100%);   /* 近黑芯片 */
  --gradient-text-silver: linear-gradient(180deg, #1C1C1E 0%, #5A5A60 55%, #8A8A8F 100%); /* 深银标题 */
  --gradient-glass-edge: linear-gradient(135deg, rgba(10,10,11,.14), rgba(10,10,11,.04) 38%, rgba(76,127,224,.20) 70%, rgba(10,10,11,.08));
}


/* ============================================================================
 * L1 · 基底：近白底 + 近黑主文字
 *   对比自查：--text-1 #141416 on #FAFAFA ≈ 15:1（AA 正文 ✓）
 * ========================================================================== */
html:not(.dark) body,
html:not(.dark) .bg-gray-50,
html:not(.dark) .min-h-screen.bg-gray-50 { background-color: var(--bg-base) !important; }
html:not(.dark) body { color: var(--text-1) !important; }
/* 官方浅色常用中性灰阶：保留结构，仅锚定到本调色板 */
html:not(.dark) .bg-white { background-color: var(--bg-raised) !important; }
html:not(.dark) .bg-gray-100 { background-color: var(--bg-panel) !important; }


/* ============================================================================
 * L2 · 场景：极淡灰光晕（JS 场景层负责噪点/光晕；此处收敛 CSS 内联的彩色场景）
 * ========================================================================== */
/* mesh 渐变（暗色为冷白光晕）→ 极淡灰光晕（rgba(10,10,11,.03) 系） */
html:not(.dark) .bg-mesh-gradient {
  background-image:
    radial-gradient(42% 34% at 50% 4%, rgba(10, 10, 11, 0.03), transparent 62%),
    radial-gradient(30% 26% at 84% 74%, rgba(76, 127, 224, 0.03), transparent 65%),
    radial-gradient(36% 30% at 8% 86%, rgba(10, 10, 11, 0.028), transparent 60%) !important;
}
/* AuthLayout 整屏渐变（官方 slate 蓝）→ 近白灰 */
/* AuthLayout 整屏渐变——限定 .dark\:via-dark-900(类恒在 DOM,浅色下仍可选中;
 * 严禁裸 .bg-gradient-to-br 全局一刀切,否则压死头像等元素的 --tw-gradient-stops 机制) */
html:not(.dark) .bg-gradient-to-br.dark\:via-dark-900 { background-image: linear-gradient(160deg, #FFFFFF 0%, var(--bg-base) 55%, #F3F3F5 100%) !important; }
/* 登录页装饰光斑 orbs（00核心裸类给了近透明白，浅底不可见）→ 极淡灰 */
html:not(.dark) .bg-primary-400\/20 { background-color: rgba(10, 10, 11, 0.035) !important; }
html:not(.dark) .bg-primary-500\/15 { background-color: rgba(10, 10, 11, 0.03) !important; }
html:not(.dark) .bg-primary-300\/10 { background-color: rgba(10, 10, 11, 0.025) !important; }
/* 网格线：青 → 极淡近黑 */
html:not(.dark) .bg-\[linear-gradient\(rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\,linear-gradient\(90deg\,rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\] { background-image: linear-gradient(rgba(10,10,11,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,11,0.03) 1px, transparent 1px) !important; }
/* 主色青光晕阴影 → 中性 */
html:not(.dark) .shadow-primary-500\/30, html:not(.dark) .shadow-primary-500\/25, html:not(.dark) .shadow-primary-500\/20 { box-shadow: var(--elevation-2) !important; }


/* ============================================================================
 * L3 · 卡片 / 玻璃 / 头部
 * ========================================================================== */
html:not(.dark) .card {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--elevation-1) !important;
}
html:not(.dark) .card-hover:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--elevation-2) !important;
}
/* 液态玻璃：浅底磨砂 + 近黑虹彩 1px 描边 */
html:not(.dark) .glass-card,
html:not(.dark) .card-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.72) !important; /* 由 --bg-raised 推导 + 玻璃透明 */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--inset-highlight), var(--elevation-2) !important;
}
html:not(.dark) .glass-card::before,
html:not(.dark) .card-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
html:not(.dark) .glass {
  background-color: rgba(255, 255, 255, 0.72) !important; /* 由 --bg-raised 推导 */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) !important;
}


/* ============================================================================
 * L4 · 侧边栏（近白面板；选中=近黑字 + 近黑描边，不用彩色）
 * ========================================================================== */
html:not(.dark) .sidebar {
  background-color: var(--bg-raised) !important;
  border-right: 1px solid var(--border-hairline) !important;
}
html:not(.dark) .sidebar-link { color: var(--text-2) !important; border-radius: var(--radius-btn) !important; }
html:not(.dark) .sidebar-link:hover { background-color: rgba(10, 10, 11, 0.04) !important; color: var(--text-1) !important; }
html:not(.dark) .sidebar-link-active,
html:not(.dark) .sidebar-link-active:hover {
  background-color: rgba(10, 10, 11, 0.06) !important;
  color: var(--text-1) !important;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 11, 0.12) !important;
}
html:not(.dark) .sidebar-section-title { color: var(--text-3) !important; }
html:not(.dark) .sidebar-logo { box-shadow: 0 0 0 1px var(--border-hairline) !important; }
/* 品牌 R 标是「白色发光」图,浅色底下隐形 → 给 logo 图本体垫近黑芯片(全站通用:
 * 侧栏/登录页/任何 fallbackLogo 替换点;值 #141416 由 --obsidian-2 推导,浅色下作品牌芯片) */
html:not(.dark) img[src*="yanlu-logo"] {
  background-color: #141416 !important;
  border-radius: 10px !important;
  padding: 2px !important;
}


/* ============================================================================
 * L5 · 按钮：主按钮「近黑实底 + 白字」（浅色主按钮 = #1C1C1E，hover #2A2A2E）
 *   对比自查：#FFFFFF on #1C1C1E ≈ 16:1（AA ✓）
 * ========================================================================== */
html:not(.dark) .btn-primary {
  background-image: none !important;
  background-color: var(--gray-800) !important;  /* #1C1C1E */
  color: #FFFFFF !important;
  box-shadow: var(--elevation-1) !important;
}
html:not(.dark) .btn-primary:hover {
  background-color: var(--gray-700) !important;  /* #2A2A2E */
  box-shadow: var(--glow-white), var(--elevation-2) !important;
}
html:not(.dark) .btn-secondary {
  background: var(--bg-raised) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-strong) !important;
}
html:not(.dark) .btn-secondary:hover { background: var(--surface-card-hover) !important; border-color: rgba(10,10,11,0.24) !important; }
html:not(.dark) .btn-ghost { color: var(--text-2) !important; }
html:not(.dark) .btn-ghost:hover { background: rgba(10, 10, 11, 0.04) !important; color: var(--text-1) !important; }
/* 聚焦环：冰蓝（白底加深版） */
html:not(.dark) .btn:focus, html:not(.dark) .btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ice-blue), var(--focus-ring) !important;
}


/* ============================================================================
 * L6 · 文字与点缀：链接/primary 文字 → 灰→近黑；主色实底/半透 → 近黑/中性
 * ========================================================================== */
/* 链接 / primary 文字 → 次级灰，hover 近黑（不用彩色） */
html:not(.dark) .text-primary-400,
html:not(.dark) .text-primary-500,
html:not(.dark) .text-primary-600,
html:not(.dark) .text-primary-700,
html:not(.dark) .text-primary-300 { color: var(--text-1) !important; }
html:not(.dark) .hover\:text-primary-500:hover,
html:not(.dark) .hover\:text-primary-600:hover,
html:not(.dark) .hover\:text-primary-700:hover,
html:not(.dark) .group-hover\:text-primary-500:hover { color: var(--text-1) !important; }

/* primary 实底（chip/头像/quota）→ 近黑；半透底片 → 极淡灰 */
html:not(.dark) .bg-primary-500,
html:not(.dark) .bg-primary-600 { background-color: var(--gray-800) !important; background-image: none !important; color: #FFFFFF !important; }
html:not(.dark) .switch-active { background-color: var(--gray-800) !important; }
html:not(.dark) .progress-bar { background-image: linear-gradient(90deg, var(--gray-500) 0%, var(--gray-800) 100%) !important; }
html:not(.dark) .bg-primary-50,
html:not(.dark) .bg-primary-100 { background-color: rgba(10, 10, 11, 0.04) !important; }

/* 输入聚焦：冰蓝 1px 边 + focus-ring */
html:not(.dark) .focus\:ring-primary-500\/50:focus,
html:not(.dark) .focus\:ring-primary-500\/30:focus,
html:not(.dark) .focus\:border-primary-500:focus {
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
}
/* 裸类 & 其余档 primary 环（清单最高频 focus:ring-primary-500 等）：仅改环色为冰蓝，
   不夺边框（与 L10 blue-500 处理一致），杜绝浅色下聚焦残留官方 teal 青环 */
html:not(.dark) .focus\:ring-primary-500:focus,
html:not(.dark) .focus-visible\:ring-primary-500\/30:focus-visible,
html:not(.dark) .focus\:ring-primary-500\/20:focus,
html:not(.dark) .ring-primary-500\/20,
html:not(.dark) .ring-primary-500\/30,
html:not(.dark) .ring-primary-500\/40 { --tw-ring-color: var(--ice-blue-soft) !important; }

/* 代码 chip / 加载 / 选中 */
html:not(.dark) .code { background: var(--bg-panel) !important; color: var(--text-1) !important; }
html:not(.dark) .spinner { color: var(--gray-500) !important; }
html:not(.dark) ::selection { background: var(--ice-blue-soft); color: var(--text-1); }

/* 品牌标题深银渐变 */
html:not(.dark) .text-gradient {
  background-image: var(--gradient-text-silver) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}


/* ============================================================================
 * L7 · 输入 / 表格 / 徽章 / 下拉 / 弹窗 / 标签页
 * ========================================================================== */
html:not(.dark) .input {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important;
  border-radius: var(--radius-input) !important;
}
html:not(.dark) .input::placeholder { color: var(--text-3) !important; }

html:not(.dark) .table th { background-color: var(--bg-panel) !important; color: var(--text-2) !important; border-bottom-color: var(--border-hairline) !important; }
html:not(.dark) .table td { color: var(--text-2) !important; border-bottom-color: var(--border-hairline) !important; }
html:not(.dark) .table tbody tr:hover { background-color: rgba(10, 10, 11, 0.025) !important; }
html:not(.dark) .table-container { border-color: var(--border-hairline) !important; }

html:not(.dark) .dropdown, html:not(.dark) .modal-content, html:not(.dark) .dialog-container {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-hairline) !important;
  box-shadow: var(--elevation-3) !important;
}
html:not(.dark) .dropdown-item:hover { background-color: rgba(10, 10, 11, 0.05) !important; }
html:not(.dark) .modal-overlay, html:not(.dark) .dialog-overlay { background-color: rgba(10, 10, 11, 0.42) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

html:not(.dark) .tabs { background-color: var(--bg-panel) !important; }
html:not(.dark) .tab-active { background-color: var(--bg-raised) !important; color: var(--text-1) !important; box-shadow: var(--elevation-1) !important; }

/* 徽章：语义 → 状态色（白底加深），primary/purple 收为中性 */
html:not(.dark) .badge-primary { background: rgba(10, 10, 11, 0.06) !important; color: var(--text-1) !important; }
html:not(.dark) .badge-purple  { background: rgba(10, 10, 11, 0.06) !important; color: var(--text-1) !important; }
html:not(.dark) .badge-success { background: rgba(46, 158, 91, 0.12) !important; color: var(--status-online-text) !important; }
html:not(.dark) .badge-warning { background: rgba(176, 138, 46, 0.14) !important; color: var(--status-degraded-text) !important; }
html:not(.dark) .badge-danger  { background: var(--danger-soft) !important; color: var(--danger) !important; }
html:not(.dark) .badge-gray    { background: rgba(10, 10, 11, 0.05) !important; color: var(--text-2) !important; }


/* ============================================================================
 * L8 · 图标底片去彩 → 中性浅片；文字状态色用状态 token（浅底加深）
 *   （浅色下仅裸类生效；bg-*-100 / text-*-600 / bg-*-500 等）
 * ========================================================================== */
html:not(.dark) .bg-emerald-100, html:not(.dark) .bg-blue-100, html:not(.dark) .bg-green-100,
html:not(.dark) .bg-purple-100, html:not(.dark) .bg-amber-100, html:not(.dark) .bg-indigo-100,
html:not(.dark) .bg-violet-100, html:not(.dark) .bg-rose-100, html:not(.dark) .bg-sky-100 {
  background-color: rgba(10, 10, 11, 0.04) !important;
}
/* 功能性状态文字：状态色；装饰性紫/蓝/靛/天 → 次级灰（去彩）
   对比自查：status-online #2E9E5B on #FFFFFF ≈ 3.6:1（图标/徽章达 AA 大字，正文建议配底片） */
html:not(.dark) .text-emerald-600, html:not(.dark) .text-green-600, html:not(.dark) .text-green-400 { color: var(--status-online-text) !important; }
html:not(.dark) .text-amber-600, html:not(.dark) .text-yellow-500 { color: var(--status-degraded-text) !important; }
html:not(.dark) .text-red-500, html:not(.dark) .text-red-600 { color: var(--danger) !important; }
html:not(.dark) .text-blue-600, html:not(.dark) .text-purple-600,
html:not(.dark) .text-violet-600, html:not(.dark) .text-sky-600 { color: var(--text-2) !important; }

/* 功能性进度/额度条填充 → 状态色 */
html:not(.dark) .bg-green-500, html:not(.dark) .bg-emerald-500 { background-color: var(--status-online) !important; }
html:not(.dark) .bg-amber-500, html:not(.dark) .bg-yellow-500 { background-color: var(--status-degraded) !important; }
html:not(.dark) .bg-red-500 { background-color: var(--danger) !important; }

/* 头像渐变：青 → 近黑芯片 */
html:not(.dark) .from-primary-500 { --tw-gradient-from: var(--gray-600) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(28,28,30,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html:not(.dark) .to-primary-600 { --tw-gradient-to: var(--gray-800) var(--tw-gradient-to-position) !important; }
html:not(.dark) .from-primary-500.to-primary-600 { color: #FFFFFF !important; }

/* 滚动条 / 空状态 */
html:not(.dark) *:hover::-webkit-scrollbar-thumb { background-color: rgba(10, 10, 11, 0.20) !important; }
html:not(.dark) .empty-state-icon { color: rgba(10, 10, 11, 0.18) !important; }

/* 选中边框 / 会员卡描边 → 去青 */
html:not(.dark) .border-primary-500 { border-color: var(--border-strong) !important; }
html:not(.dark) .border-primary-400, html:not(.dark) .hover\:border-primary-400:hover { border-color: var(--border-strong) !important; }


/* ============================================================================
 * L10 · 通用去彩兜底（对应暗色 10-decolor · 仅裸原子类）
 *   文字：装饰彩色统一 → --text-2；深色档(700-900) → --text-1；amber → 降级黄。
 *   底片：浅色档 → 近黑微片；实底 → 中性；hover → 近黑微片。
 *   边框/ring → hairline/strong；focus → 冰蓝；渐变 stop → 中性归一。
 * ========================================================================== */

/* ---- 文字：amber → 降级黄 ---- */
html:not(.dark) .text-amber-700,
html:not(.dark) .text-amber-500,
html:not(.dark) .text-amber-800,
html:not(.dark) .text-amber-900,
html:not(.dark) .text-amber-600\/70,
html:not(.dark) .text-amber-200,
html:not(.dark) .text-amber-400 { color: var(--status-degraded-text) !important; }

/* ---- 文字：深色档(700-900) → 主文字近黑 ---- */
html:not(.dark) .text-blue-700, html:not(.dark) .text-purple-700, html:not(.dark) .text-orange-700,
html:not(.dark) .text-sky-700, html:not(.dark) .text-blue-900, html:not(.dark) .text-zinc-800,
html:not(.dark) .text-blue-800, html:not(.dark) .text-pink-700, html:not(.dark) .text-indigo-700,
html:not(.dark) .text-rose-700, html:not(.dark) .text-violet-700, html:not(.dark) .text-cyan-700,
html:not(.dark) .text-purple-800, html:not(.dark) .text-slate-700, html:not(.dark) .text-orange-800,
html:not(.dark) .text-teal-700, html:not(.dark) .text-violet-800, html:not(.dark) .text-blue-700\/80,
html:not(.dark) .text-zinc-700, html:not(.dark) .text-indigo-800, html:not(.dark) .text-lime-700,
html:not(.dark) .text-sky-800, html:not(.dark) .text-sky-900, html:not(.dark) .text-fuchsia-700,
html:not(.dark) .text-rose-900, html:not(.dark) .text-zinc-900 { color: var(--text-1) !important; }

/* ---- 文字：其余装饰档(100-600) → 次级灰 ---- */
html:not(.dark) .text-blue-400, html:not(.dark) .text-cyan-300, html:not(.dark) .text-pink-300,
html:not(.dark) .text-sky-300, html:not(.dark) .text-cyan-400, html:not(.dark) .text-purple-300,
html:not(.dark) .text-rose-400, html:not(.dark) .text-orange-400, html:not(.dark) .text-slate-400,
html:not(.dark) .text-violet-300, html:not(.dark) .text-zinc-300,
html:not(.dark) .text-blue-500, html:not(.dark) .text-orange-600, html:not(.dark) .text-rose-600,
html:not(.dark) .text-orange-500, html:not(.dark) .text-indigo-600, html:not(.dark) .text-slate-600,
html:not(.dark) .text-rose-500, html:not(.dark) .text-purple-500, html:not(.dark) .text-indigo-500,
html:not(.dark) .text-slate-500, html:not(.dark) .text-teal-600, html:not(.dark) .text-cyan-600,
html:not(.dark) .text-lime-600, html:not(.dark) .text-pink-600, html:not(.dark) .text-blue-500\/20,
html:not(.dark) .text-pink-500, html:not(.dark) .text-sky-500, html:not(.dark) .text-teal-500,
html:not(.dark) .text-violet-500, html:not(.dark) .text-zinc-600,
html:not(.dark) .text-indigo-200, html:not(.dark) .text-blue-100, html:not(.dark) .text-blue-200,
html:not(.dark) .text-orange-100, html:not(.dark) .text-orange-200, html:not(.dark) .text-purple-100,
html:not(.dark) .text-purple-200, html:not(.dark) .text-sky-200, html:not(.dark) .text-zinc-100 { color: var(--text-2) !important; }

/* ---- hover/group-hover 文字 → 近黑 ---- */
html:not(.dark) .hover\:text-blue-600:hover, html:not(.dark) .hover\:text-blue-800:hover,
html:not(.dark) .hover\:text-blue-900:hover, html:not(.dark) .hover\:text-blue-700:hover,
html:not(.dark) .hover\:text-orange-600:hover, html:not(.dark) .hover\:text-blue-300:hover,
html:not(.dark) .hover\:text-blue-500:hover, html:not(.dark) .hover\:text-orange-700:hover,
html:not(.dark) .hover\:text-purple-600:hover, html:not(.dark) .hover\:text-rose-700:hover,
html:not(.dark) .hover\:text-zinc-800:hover,
html:not(.dark) .group:hover .group-hover\:text-blue-500,
html:not(.dark) .group:hover .group-hover\:text-sky-500,
html:not(.dark) .group:focus-within .group-focus-within\:text-blue-500 { color: var(--text-1) !important; }
/* hover:text-amber/sky-700 交由 L30/L40 状态语义特化，此处并入近黑兜底 */
html:not(.dark) .hover\:text-sky-700:hover { color: var(--text-1) !important; }

/* ---- 背景：浅色档/半透 → 近黑微片 ---- */
html:not(.dark) .bg-amber-50, html:not(.dark) .bg-orange-100, html:not(.dark) .bg-blue-50,
html:not(.dark) .bg-purple-50, html:not(.dark) .bg-sky-50, html:not(.dark) .bg-pink-100,
html:not(.dark) .bg-cyan-100, html:not(.dark) .bg-teal-100, html:not(.dark) .bg-slate-100,
html:not(.dark) .bg-zinc-100, html:not(.dark) .bg-lime-100, html:not(.dark) .bg-violet-50,
html:not(.dark) .bg-orange-50, html:not(.dark) .bg-rose-50, html:not(.dark) .bg-zinc-200,
html:not(.dark) .bg-amber-500\/10, html:not(.dark) .bg-blue-500\/10, html:not(.dark) .bg-orange-500\/10,
html:not(.dark) .bg-purple-500\/10, html:not(.dark) .bg-slate-50, html:not(.dark) .bg-zinc-50,
html:not(.dark) .bg-zinc-800\/10, html:not(.dark) .bg-amber-500\/20, html:not(.dark) .bg-blue-50\/30,
html:not(.dark) .bg-fuchsia-50, html:not(.dark) .bg-indigo-50, html:not(.dark) .bg-indigo-500\/10,
html:not(.dark) .bg-orange-500\/20, html:not(.dark) .bg-rose-500\/20, html:not(.dark) .bg-slate-500\/10 { background-color: rgba(10, 10, 11, 0.04) !important; }

/* ---- 背景：中透档 → 近黑微片(略强) ---- */
html:not(.dark) .bg-blue-400, html:not(.dark) .bg-blue-50\/50, html:not(.dark) .bg-amber-400,
html:not(.dark) .bg-amber-200\/80, html:not(.dark) .bg-blue-200\/60, html:not(.dark) .bg-orange-200\/60,
html:not(.dark) .bg-purple-200\/60, html:not(.dark) .bg-sky-50\/60, html:not(.dark) .bg-slate-300,
html:not(.dark) .bg-violet-200\/60, html:not(.dark) .bg-zinc-300\/70 { background-color: rgba(10, 10, 11, 0.06) !important; }

/* ---- 背景：实底彩色 → 中性银灰实底 ---- */
html:not(.dark) .bg-blue-500, html:not(.dark) .bg-purple-500, html:not(.dark) .bg-orange-500,
html:not(.dark) .bg-blue-600, html:not(.dark) .bg-sky-500, html:not(.dark) .bg-rose-500 { background-color: var(--gray-500) !important; }

/* ---- 背景：深色实底(zinc-800/900) → 面板浅片(守浅色纪律) ---- */
html:not(.dark) .bg-zinc-800, html:not(.dark) .bg-zinc-900 { background-color: var(--bg-panel) !important; }

/* ---- hover/active 背景 → 近黑微片 ---- */
html:not(.dark) .hover\:bg-blue-50:hover, html:not(.dark) .hover\:bg-indigo-200:hover,
html:not(.dark) .hover\:bg-pink-200:hover, html:not(.dark) .hover\:bg-purple-200:hover,
html:not(.dark) .hover\:bg-sky-200:hover, html:not(.dark) .hover\:bg-amber-200:hover,
html:not(.dark) .hover\:bg-blue-200:hover, html:not(.dark) .hover\:bg-cyan-200:hover,
html:not(.dark) .hover\:bg-orange-200:hover, html:not(.dark) .hover\:bg-rose-200:hover,
html:not(.dark) .hover\:bg-teal-200:hover, html:not(.dark) .hover\:bg-orange-50:hover,
html:not(.dark) .hover\:bg-lime-200:hover, html:not(.dark) .hover\:bg-orange-600:hover,
html:not(.dark) .hover\:bg-purple-50:hover, html:not(.dark) .hover\:bg-violet-200:hover,
html:not(.dark) .hover\:bg-blue-600:hover, html:not(.dark) .hover\:bg-slate-200:hover,
html:not(.dark) .hover\:bg-amber-100:hover, html:not(.dark) .hover\:bg-amber-50:hover,
html:not(.dark) .hover\:bg-amber-600:hover, html:not(.dark) .hover\:bg-blue-700:hover,
html:not(.dark) .hover\:bg-cyan-50:hover, html:not(.dark) .hover\:bg-purple-100:hover,
html:not(.dark) .hover\:bg-purple-600:hover, html:not(.dark) .hover\:bg-sky-50:hover,
html:not(.dark) .hover\:bg-sky-50\/60:hover, html:not(.dark) .hover\:bg-zinc-900:hover,
html:not(.dark) .active\:bg-blue-700:active, html:not(.dark) .active\:bg-orange-700:active,
html:not(.dark) .active\:bg-purple-700:active,
html:not(.dark) .group:hover .group-hover\:bg-blue-100 { background-color: rgba(10, 10, 11, 0.06) !important; }

/* ---- 边框：浅档 → hairline ---- */
html:not(.dark) .border-amber-200, html:not(.dark) .border-blue-200, html:not(.dark) .border-blue-300,
html:not(.dark) .border-blue-100, html:not(.dark) .border-sky-200, html:not(.dark) .border-amber-300,
html:not(.dark) .border-purple-200, html:not(.dark) .border-slate-200, html:not(.dark) .border-sky-100,
html:not(.dark) .border-amber-100\/80, html:not(.dark) .border-rose-300, html:not(.dark) .border-sky-300,
html:not(.dark) .border-violet-200 { border-color: var(--border-hairline) !important; }

/* ---- 边框：深档/实边 → strong ---- */
html:not(.dark) .border-purple-500, html:not(.dark) .border-sky-500, html:not(.dark) .border-amber-500,
html:not(.dark) .border-blue-500, html:not(.dark) .border-orange-500, html:not(.dark) .border-amber-400,
html:not(.dark) .border-blue-400\/30, html:not(.dark) .border-blue-500\/20, html:not(.dark) .border-blue-500\/30,
html:not(.dark) .border-orange-500\/20, html:not(.dark) .border-orange-500\/30, html:not(.dark) .border-purple-500\/20,
html:not(.dark) .border-purple-500\/30, html:not(.dark) .border-rose-500, html:not(.dark) .border-slate-500\/30,
html:not(.dark) .border-zinc-500, html:not(.dark) .border-zinc-800, html:not(.dark) .border-zinc-800\/20,
html:not(.dark) .border-zinc-800\/30 { border-color: var(--border-strong) !important; }

/* ---- 单边边框(spinner 弧) → 中灰 ---- */
html:not(.dark) .border-t-blue-600 { border-top-color: var(--gray-500) !important; }

/* ---- hover 边框 → strong ---- */
html:not(.dark) .hover\:border-purple-300:hover, html:not(.dark) .hover\:border-sky-300:hover,
html:not(.dark) .hover\:border-amber-300:hover, html:not(.dark) .hover\:border-blue-300:hover,
html:not(.dark) .hover\:border-orange-300:hover, html:not(.dark) .hover\:border-zinc-400:hover,
html:not(.dark) .hover\:border-sky-400:hover { border-color: var(--border-strong) !important; }

/* ---- focus 边框 → 冰蓝 ---- */
html:not(.dark) .focus\:border-blue-500:focus { border-color: var(--ice-blue) !important; }

/* ---- 装饰 ring → strong ---- */
html:not(.dark) .ring-rose-200, html:not(.dark) .ring-amber-200, html:not(.dark) .ring-amber-500\/30,
html:not(.dark) .ring-amber-600\/20, html:not(.dark) .ring-orange-200, html:not(.dark) .ring-orange-500\/30,
html:not(.dark) .ring-purple-600\/20, html:not(.dark) .ring-rose-500\/30, html:not(.dark) .ring-sky-100,
html:not(.dark) .ring-sky-200, html:not(.dark) .ring-slate-200\/80, html:not(.dark) .ring-slate-600\/20 { --tw-ring-color: var(--border-strong) !important; }

/* ---- focus ring → 冰蓝(允许) ---- */
html:not(.dark) .focus\:ring-blue-500:focus,
html:not(.dark) .focus\:ring-blue-500\/10:focus { --tw-ring-color: var(--ice-blue-soft) !important; }

/* ---- 彩色投影 → elevation-2 去彩 ---- */
html:not(.dark) .shadow-blue-500\/30, html:not(.dark) .shadow-amber-500\/30,
html:not(.dark) .shadow-purple-500\/30 { box-shadow: var(--elevation-2) !important; }

/* ---- 下划线色 → 灰 ---- */
html:not(.dark) .decoration-blue-600\/30 { text-decoration-color: var(--gray-400) !important; }
html:not(.dark) .hover\:decoration-blue-600:hover { text-decoration-color: var(--text-1) !important; }

/* ---- 渐变 from-stop：强档 → 近黑芯片起点 ---- */
html:not(.dark) .from-blue-500, html:not(.dark) .from-amber-500, html:not(.dark) .from-orange-500,
html:not(.dark) .from-purple-500, html:not(.dark) .from-orange-400, html:not(.dark) .from-amber-400,
html:not(.dark) .from-blue-400, html:not(.dark) .from-blue-600, html:not(.dark) .from-purple-400,
html:not(.dark) .from-rose-500 { --tw-gradient-from: var(--gray-600) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(28,28,30,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
/* ---- 渐变 from-stop：浅档 → 极淡近黑起点 ---- */
html:not(.dark) .from-blue-50, html:not(.dark) .from-amber-50, html:not(.dark) .from-purple-50,
html:not(.dark) .from-amber-400\/20, html:not(.dark) .from-amber-50\/80, html:not(.dark) .from-blue-400\/20,
html:not(.dark) .from-blue-50\/50, html:not(.dark) .from-blue-50\/80, html:not(.dark) .from-indigo-100\/20,
html:not(.dark) .from-indigo-100\/30, html:not(.dark) .from-orange-100\/30, html:not(.dark) .from-orange-50,
html:not(.dark) .from-sky-50, html:not(.dark) .from-zinc-50 { --tw-gradient-from: rgba(10,10,11,0.04) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(10,10,11,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html:not(.dark) .from-zinc-700 { --tw-gradient-from: var(--gray-500) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(90,90,96,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }

/* ---- 渐变 via-stop → 中性归一 ---- */
html:not(.dark) .via-indigo-50\/50, html:not(.dark) .via-orange-50\/50 { --tw-gradient-to: rgba(10,10,11,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), rgba(10,10,11,0.04) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
html:not(.dark) .via-indigo-500, html:not(.dark) .via-orange-500 { --tw-gradient-to: rgba(10,10,11,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--gray-500) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* ---- 渐变 to-stop：强档 → 近黑芯片收尾 ---- */
html:not(.dark) .to-indigo-600, html:not(.dark) .to-orange-600, html:not(.dark) .to-blue-600,
html:not(.dark) .to-purple-600, html:not(.dark) .to-orange-500, html:not(.dark) .to-purple-500,
html:not(.dark) .to-amber-400, html:not(.dark) .to-blue-500, html:not(.dark) .to-neutral-200,
html:not(.dark) .to-pink-600 { --tw-gradient-to: var(--gray-800) var(--tw-gradient-to-position) !important; }
/* ---- 渐变 to-stop：浅档 → 极淡近黑收尾 ---- */
html:not(.dark) .to-teal-50, html:not(.dark) .to-amber-100, html:not(.dark) .to-amber-50\/70,
html:not(.dark) .to-amber-500\/20, html:not(.dark) .to-indigo-100, html:not(.dark) .to-indigo-50,
html:not(.dark) .to-indigo-50\/30, html:not(.dark) .to-indigo-500\/20, html:not(.dark) .to-orange-500\/20,
html:not(.dark) .to-pink-500\/20, html:not(.dark) .to-purple-50\/30 { --tw-gradient-to: rgba(10,10,11,0.03) var(--tw-gradient-to-position) !important; }
html:not(.dark) .to-zinc-900 { --tw-gradient-to: var(--gray-700) var(--tw-gradient-to-position) !important; }


/* ============================================================================
 * L20 · 表单与控件（对应暗色 20 段 · Select/DatePicker/Toggle/Confirm/Tooltip）
 * ========================================================================== */
/* A · Select 触发器 */
html:not(.dark) .select-trigger {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-input) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .select-trigger:hover { border-color: var(--border-strong) !important; }
html:not(.dark) .select-trigger-open,
html:not(.dark) .select-trigger-open:hover,
html:not(.dark) .select-trigger:focus-visible {
  outline: none !important;
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
}
html:not(.dark) .select-trigger-error,
html:not(.dark) .select-trigger-error:focus,
html:not(.dark) .select-trigger-error:focus-visible {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-soft) !important;
}
html:not(.dark) .select-trigger-disabled,
html:not(.dark) .select-trigger-disabled:hover {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-hairline) !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}
html:not(.dark) .select-icon, html:not(.dark) .select-clear { color: var(--text-3) !important; }
html:not(.dark) .select-clear:hover { color: var(--text-1) !important; }

/* B · Select 下拉面板 + 选项 */
html:not(.dark) .select-dropdown-portal,
html:not(.dark) .select-dropdown {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-input) !important;
  box-shadow: var(--elevation-2) !important;
}
html:not(.dark) .select-dropdown-portal .select-search,
html:not(.dark) .select-dropdown .select-search,
html:not(.dark) .select-dropdown .select-header { border-bottom-color: var(--border-hairline) !important; }
html:not(.dark) .select-dropdown-portal .select-search-input,
html:not(.dark) .select-dropdown .select-search-input { color: var(--text-1) !important; }
html:not(.dark) .select-dropdown-portal .select-option,
html:not(.dark) .select-dropdown .select-option { color: var(--text-2) !important; }
html:not(.dark) .select-dropdown-portal .select-option:hover,
html:not(.dark) .select-dropdown .select-option:hover {
  background-color: rgba(10, 10, 11, 0.04) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .select-option-selected,
html:not(.dark) .select-dropdown-portal .select-option-selected,
html:not(.dark) .select-dropdown .select-option-selected {
  background-color: rgba(10, 10, 11, 0.06) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .select-option .text-primary-500,
html:not(.dark) .select-option-selected .text-primary-500 { color: var(--text-1) !important; }
html:not(.dark) .select-option-focused,
html:not(.dark) .select-dropdown-portal .select-option-focused,
html:not(.dark) .select-dropdown .select-option-focused { background-color: var(--surface-card-hover) !important; }
html:not(.dark) .select-option-disabled,
html:not(.dark) .select-dropdown-portal .select-option-disabled { opacity: 0.4 !important; }
html:not(.dark) .select-dropdown-portal .select-option-group,
html:not(.dark) .select-dropdown-portal .select-option-group:hover,
html:not(.dark) .select-dropdown .select-option-group {
  background-color: rgba(10, 10, 11, 0.03) !important;
  color: var(--text-3) !important;
}
html:not(.dark) .select-dropdown-portal .select-empty,
html:not(.dark) .select-dropdown .select-empty { color: var(--text-3) !important; }

/* C · DateRangePicker */
html:not(.dark) .date-picker-trigger {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-input) !important;
  color: var(--text-2) !important;
}
html:not(.dark) .date-picker-trigger:hover { border-color: var(--border-strong) !important; }
html:not(.dark) .date-picker-trigger-open,
html:not(.dark) .date-picker-trigger:focus-visible {
  outline: none !important;
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
}
html:not(.dark) .date-picker-icon, html:not(.dark) .date-picker-chevron { color: var(--text-3) !important; }
html:not(.dark) .date-picker-dropdown {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius-input) !important;
  box-shadow: var(--elevation-2) !important;
}
html:not(.dark) .date-picker-divider { border-top-color: var(--border-hairline) !important; }
html:not(.dark) .date-picker-label { color: var(--text-3) !important; }
html:not(.dark) .date-picker-preset { color: var(--text-2) !important; }
html:not(.dark) .date-picker-preset:hover {
  background-color: rgba(10, 10, 11, 0.04) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .date-picker-preset-active,
html:not(.dark) .date-picker-preset-active:hover {
  background-color: rgba(10, 10, 11, 0.06) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .date-picker-input {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .date-picker-input:focus {
  border-color: var(--ice-blue) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}
/* apply 按钮 = 近黑实底(同 btn-primary) */
html:not(.dark) .date-picker-apply {
  background-color: var(--gray-800) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: var(--elevation-1) !important;
}
html:not(.dark) .date-picker-apply:hover { background-color: var(--gray-700) !important; box-shadow: var(--elevation-2) !important; }

/* D · Toggle（role=switch）：on=近黑轨+白旋钮，off=浅面板轨+中灰旋钮 */
html:not(.dark) button[role="switch"][aria-checked="true"] {
  background-color: var(--gray-800) !important;
  background-image: none !important;
  border-color: transparent !important;
}
html:not(.dark) button[role="switch"][aria-checked="true"] > span { background-color: #FFFFFF !important; }
html:not(.dark) button[role="switch"][aria-checked="false"] {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-hairline) !important;
}
html:not(.dark) button[role="switch"][aria-checked="false"] > span { background-color: var(--gray-500) !important; }
html:not(.dark) button[role="switch"]:focus,
html:not(.dark) button[role="switch"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ice-blue), var(--focus-ring) !important;
}

/* E · Input error 态 */
html:not(.dark) .input.input-error,
html:not(.dark) .input-error { border-color: var(--danger) !important; }
html:not(.dark) .ring-red-500\/20 {
  --tw-ring-color: var(--danger-soft) !important;
  box-shadow: 0 0 0 3px var(--danger-soft) !important;
}
html:not(.dark) .input-error-text { color: var(--danger) !important; }

/* F · ConfirmDialog 内联按钮 */
html:not(.dark) .modal-footer button.bg-white.border-gray-300 {
  background-color: var(--bg-raised) !important;
  background-image: none !important;
  border-color: var(--border-strong) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .modal-footer button.bg-white.border-gray-300:hover {
  background-color: var(--surface-card-hover) !important;
  color: var(--text-1) !important;
}
/* 确认按钮: 近黑实底 + 白字 */
html:not(.dark) .bg-primary-600.hover\:bg-primary-700 {
  background-color: var(--gray-800) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: var(--elevation-1) !important;
}
html:not(.dark) .bg-primary-600.hover\:bg-primary-700:hover { background-color: var(--gray-700) !important; box-shadow: var(--elevation-2) !important; }
/* 危险按钮: --danger 底 + 白字（对比自查：#FFFFFF on #C0392B ≈ 5.4:1，静息态自身即达 AA 正文） */
html:not(.dark) .bg-red-600.hover\:bg-red-700 {
  background-color: var(--danger) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}
html:not(.dark) .bg-red-600.hover\:bg-red-700:hover { background-color: #A93226 !important; } /* --danger 压暗一档，hover 比静息更深、白字≈6.4:1 */

/* G · BaseDialog 关闭按钮 */
html:not(.dark) .modal-header > button { color: var(--text-3) !important; }
html:not(.dark) .modal-header > button:hover {
  background-color: rgba(10, 10, 11, 0.06) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .modal-header > button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ice-blue), var(--focus-ring) !important;
}

/* H · HelpTooltip：触发 hover + 气泡（浅色气泡=深曜石 on 白，反差提示） */
html:not(.dark) .hover\:text-primary-600:hover { color: var(--text-1) !important; }
html:not(.dark) [role="tooltip"] {
  background-color: var(--gray-900) !important; /* 深底气泡 */
  color: #FFFFFF !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--elevation-2) !important;
  --tw-ring-color: var(--border-hairline) !important;
}
html:not(.dark) [role="tooltip"] > div:last-child { background-color: var(--gray-900) !important; }

/* I · 复选框/单选框 accent → 近黑 */
html:not(.dark) input[type="checkbox"],
html:not(.dark) input[type="radio"] { accent-color: var(--gray-800) !important; }


/* ============================================================================
 * L30 · 浮层与通知（对应暗色 30 段 · Toast/公告×2/markdown）
 *   浅色下仅裸类生效；容器限定 + !important 高特异度。
 * ========================================================================== */
/* 1 · Toast — 容器 .fixed.right-4.top-4.z-[9999] */
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .rounded-lg {
  background-color: var(--bg-raised) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline), var(--elevation-2) !important;
}
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .border-green-500  { border-left-color: var(--status-online) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .border-red-500    { border-left-color: var(--danger) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .border-yellow-500 { border-left-color: var(--status-degraded) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .border-blue-500   { border-left-color: var(--ice-blue) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .text-green-500  { color: var(--status-online-text) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .text-red-500    { color: var(--danger) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .text-yellow-500 { color: var(--status-degraded-text) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .text-blue-500   { color: var(--ice-blue-text) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .bg-green-500  { background-color: var(--status-online) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .bg-red-500    { background-color: var(--danger) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .bg-yellow-500 { background-color: var(--status-degraded) !important; }
html:not(.dark) .fixed.right-4.top-4.z-\[9999\] .bg-blue-500   { background-color: var(--ice-blue) !important; }

/* 2 · AnnouncementPopup — 容器 .fixed.inset-0.z-[120] */
html:not(.dark) .fixed.inset-0.z-\[120\] > div {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-hairline) !important;
  box-shadow: var(--elevation-3) !important;
}
/* 头部暖色光晕 → 极淡近黑 */
html:not(.dark) .fixed.inset-0.z-\[120\] .from-amber-50\/80 {
  background-image: linear-gradient(135deg, rgba(10,10,11,0.045), rgba(10,10,11,0.015) 60%, transparent) !important;
}
html:not(.dark) .fixed.inset-0.z-\[120\] .border-amber-100\/80 { border-color: var(--border-hairline) !important; }
/* 装饰光球（橙/琥珀/黄）→ 抹除留极淡灰 */
html:not(.dark) .fixed.inset-0.z-\[120\] .from-orange-100\/30,
html:not(.dark) .fixed.inset-0.z-\[120\] .from-amber-400\/20,
html:not(.dark) .fixed.inset-0.z-\[120\] .from-yellow-400\/20 {
  background-image: none !important;
  background-color: rgba(10,10,11,0.025) !important;
}
/* 图标块/badge/左条 (.from-amber-500) → 近黑芯片 + 白图标 */
html:not(.dark) .fixed.inset-0.z-\[120\] .from-amber-500 {
  background-image: var(--gradient-silver) !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: var(--elevation-2) !important;
}
html:not(.dark) .fixed.inset-0.z-\[120\] .shadow-amber-500\/30 { box-shadow: var(--elevation-2) !important; }
/* markRead 按钮 (button.from-amber-500) → 近黑实底 + 白字 */
html:not(.dark) .fixed.inset-0.z-\[120\] button.from-amber-500 {
  background-image: none !important;
  background-color: var(--gray-800) !important;
  color: #FFFFFF !important;
  box-shadow: var(--elevation-2) !important;
}

/* 3 · AnnouncementBell — 列表 .z-[100] + 详情 .z-[110] */
html:not(.dark) .fixed.inset-0.z-\[100\] > div,
html:not(.dark) .fixed.inset-0.z-\[110\] > div {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-hairline) !important;
  box-shadow: var(--elevation-3) !important;
}
html:not(.dark) .fixed.inset-0.z-\[100\] .from-blue-50\/50,
html:not(.dark) .fixed.inset-0.z-\[110\] .from-blue-50\/80 {
  background-image: linear-gradient(135deg, rgba(10,10,11,0.045), rgba(10,10,11,0.015) 60%, transparent) !important;
}
html:not(.dark) .fixed.inset-0.z-\[100\] .from-indigo-100\/30,
html:not(.dark) .fixed.inset-0.z-\[110\] .from-indigo-100\/30,
html:not(.dark) .fixed.inset-0.z-\[110\] .from-blue-400\/20,
html:not(.dark) .fixed.inset-0.z-\[110\] .from-purple-400\/20 {
  background-image: none !important;
  background-color: rgba(10,10,11,0.025) !important;
}
/* 实心蓝/靛渐变块（图标/左条/pill）→ 近黑芯片 */
html:not(.dark) .fixed.inset-0.z-\[100\] .from-blue-500,
html:not(.dark) .fixed.inset-0.z-\[110\] .from-blue-500 {
  background-image: var(--gradient-silver) !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: var(--elevation-2) !important;
}
html:not(.dark) .fixed.inset-0.z-\[100\] .shadow-blue-500\/30,
html:not(.dark) .fixed.inset-0.z-\[110\] .shadow-blue-500\/30 { box-shadow: var(--elevation-2) !important; }
/* markAllRead 按钮 (button.bg-blue-600) → 近黑实底 */
html:not(.dark) .fixed.inset-0.z-\[100\] button.bg-blue-600,
html:not(.dark) .fixed.inset-0.z-\[100\] button.bg-blue-600.hover\:bg-blue-700:hover {
  background-color: var(--gray-800) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: var(--elevation-2) !important;
}
/* 详情主按钮 (button.from-blue-600) → 近黑实底 */
html:not(.dark) .fixed.inset-0.z-\[110\] button.from-blue-600 {
  background-image: none !important;
  background-color: var(--gray-800) !important;
  color: #FFFFFF !important;
  box-shadow: var(--elevation-2) !important;
}
/* 未读行底 bg-blue-50/30 → 极淡近黑 */
html:not(.dark) .fixed.inset-0.z-\[100\] .bg-blue-50\/30 { background-color: rgba(10,10,11,0.03) !important; }
/* 未读 badge (bg-blue-100 text-blue-700) → 冰蓝 soft 底 + 冰蓝字（信息语义，允许） */
html:not(.dark) .fixed.inset-0.z-\[100\] .bg-blue-100,
html:not(.dark) .fixed.inset-0.z-\[110\] .bg-blue-100 { background-color: rgba(76,127,224,0.12) !important; }
html:not(.dark) .fixed.inset-0.z-\[100\] .text-blue-700,
html:not(.dark) .fixed.inset-0.z-\[110\] .text-blue-700 { color: var(--ice-blue-text) !important; }
/* 未读点/脉冲环 → 冰蓝 */
html:not(.dark) .fixed.inset-0.z-\[100\] .bg-blue-600,
html:not(.dark) .fixed.inset-0.z-\[100\] .bg-blue-500,
html:not(.dark) .fixed.inset-0.z-\[100\] .bg-blue-400,
html:not(.dark) .fixed.inset-0.z-\[110\] .bg-blue-500,
html:not(.dark) .fixed.inset-0.z-\[110\] .bg-blue-400 { background-color: var(--ice-blue) !important; }
/* spinner → 冰蓝 */
html:not(.dark) .fixed.inset-0.z-\[100\] .border-t-blue-600 { border-top-color: var(--ice-blue) !important; }
html:not(.dark) .fixed.inset-0.z-\[100\] .border-blue-400\/30 { border-color: var(--ice-blue-soft) !important; }

/* 4 · .markdown-body 全局 */
html:not(.dark) .markdown-body a {
  color: var(--text-1) !important;
  text-decoration-color: var(--border-strong) !important;
}
html:not(.dark) .markdown-body a:hover {
  color: #000000 !important;
  text-decoration-color: var(--gray-500) !important;
}
html:not(.dark) .markdown-body li::marker { color: var(--text-3) !important; }
html:not(.dark) .markdown-body blockquote {
  border-left-color: var(--border-strong) !important;
  background-color: rgba(10,10,11,0.03) !important;
  color: var(--text-2) !important;
}
html:not(.dark) .markdown-body blockquote::before { color: rgba(10,10,11,0.16) !important; }
html:not(.dark) .markdown-body code {
  background-color: var(--bg-panel) !important;
  color: var(--text-1) !important;
  box-shadow: inset 0 0 0 1px var(--border-hairline) !important;
}
html:not(.dark) .markdown-body pre code { box-shadow: none !important; color: var(--text-1) !important; }
html:not(.dark) .markdown-body th {
  background-image: none !important;
  background-color: var(--bg-panel) !important;
  color: var(--text-1) !important;
}

/* 5 · P5 浮层零星（EndpointPopover / SubscriptionProgressMini） */
html:not(.dark) .text-emerald-500 { color: var(--status-online-text) !important; }
html:not(.dark) .hover\:text-amber-500:hover { color: var(--status-degraded-text) !important; }
html:not(.dark) .text-purple-700 { color: var(--text-1) !important; }
html:not(.dark) .to-teal-50 { background-image: none !important; background-color: rgba(10,10,11,0.04) !important; }
html:not(.dark) .text-emerald-700 { color: var(--status-online-text) !important; }
/* 到期天数 orange → 降级黄（容器限定，与 provider 身份色不冲突） */
html:not(.dark) .absolute.right-0.z-50.w-\[340px\] .text-orange-600 { color: var(--status-degraded-text) !important; }
html:not(.dark) .bg-orange-500 { background-color: var(--status-degraded) !important; }


/* ============================================================================
 * L40 · 数据展示与导航（对应暗色 40 段）
 * ========================================================================== */
/* 1 · DataTable scoped 表头 / sticky 列 → 浅面板 token */
html:not(.dark) .table-wrapper .table-header,
html:not(.dark) .sticky-header-cell,
html:not(.dark) .sticky-header-cell.sticky-col { background-color: var(--bg-panel) !important; }
html:not(.dark) tbody .sticky-col { background-color: var(--bg-raised) !important; }
html:not(.dark) tbody tr:hover .sticky-col { background-color: var(--surface-card-hover) !important; }
html:not(.dark) .is-scrollable .sticky-col-left::after,
html:not(.dark) .is-scrollable .sticky-col-left-second::after {
  background: linear-gradient(to right, rgba(10, 10, 11, 0.10), transparent) !important;
}
html:not(.dark) .is-scrollable .sticky-col-right::before {
  background: linear-gradient(to left, rgba(10, 10, 11, 0.10), transparent) !important;
}

/* 2 · Pagination — 容器限定 nav[aria-label="Pagination"] */
html:not(.dark) nav[aria-label="Pagination"] .bg-primary-50 { background-color: rgba(10, 10, 11, 0.06) !important; }
html:not(.dark) nav[aria-label="Pagination"] .border-primary-500 { border-color: var(--border-strong) !important; }
html:not(.dark) nav[aria-label="Pagination"] .text-primary-600 { color: var(--text-1) !important; }

/* 3 · NavigationProgress — 顶部青条 → 深银渐变 + 柔和暗辉 */
html:not(.dark) .navigation-progress-bar {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gray-400) 18%,
    var(--gray-700) 50%,
    var(--gray-400) 82%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 8px rgba(10, 10, 11, 0.22) !important;
}

/* 4 · StatCard @apply 语义类 */
html:not(.dark) .stat-icon-primary {
  background-color: rgba(10, 10, 11, 0.05) !important;
  color: var(--text-1) !important;
}
html:not(.dark) .stat-icon-success { background-color: rgba(46, 158, 91, 0.12) !important; color: var(--status-online-text) !important; }
html:not(.dark) .stat-icon-warning { background-color: rgba(176, 138, 46, 0.14) !important; color: var(--status-degraded-text) !important; }
html:not(.dark) .stat-icon-danger { background-color: var(--danger-soft) !important; color: var(--danger) !important; }
html:not(.dark) .stat-trend-up { color: var(--status-online-text) !important; }
html:not(.dark) .stat-trend-down { color: var(--danger) !important; }

/* 5 · StatusBadge 灰点 → offline（= gray-400，视觉零变） */
html:not(.dark) .bg-gray-400 { background-color: var(--status-offline) !important; }

/* 6 · 监控页 provider 身份色去彩（裸类） */
html:not(.dark) .from-emerald-50, html:not(.dark) .from-orange-50, html:not(.dark) .from-sky-50, html:not(.dark) .from-zinc-50 {
  --tw-gradient-from: rgba(10, 10, 11, 0.04) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(10, 10, 11, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html:not(.dark) .to-emerald-100, html:not(.dark) .to-amber-100, html:not(.dark) .to-indigo-100, html:not(.dark) .to-neutral-200 {
  --tw-gradient-to: rgba(10, 10, 11, 0.02) var(--tw-gradient-to-position) !important;
}
/* provider badge/tint 文字 → 中性次级灰 */
html:not(.dark) .text-orange-600, html:not(.dark) .text-orange-700, html:not(.dark) .text-orange-800,
html:not(.dark) .text-sky-600, html:not(.dark) .text-sky-700,
html:not(.dark) .text-zinc-700, html:not(.dark) .text-zinc-800 { color: var(--text-2) !important; }
/* provider/tier 底片 → 中性浅片 */
html:not(.dark) .bg-orange-100, html:not(.dark) .bg-orange-50, html:not(.dark) .bg-sky-100, html:not(.dark) .bg-sky-50,
html:not(.dark) .bg-zinc-100, html:not(.dark) .bg-zinc-200 { background-color: rgba(10, 10, 11, 0.04) !important; }
/* provider picker 边框 → 中性强边 */
html:not(.dark) .border-orange-500, html:not(.dark) .border-sky-500, html:not(.dark) .border-zinc-500,
html:not(.dark) .border-zinc-400, html:not(.dark) .border-sky-200 { border-color: var(--border-strong) !important; }
html:not(.dark) .hover\:border-orange-300:hover, html:not(.dark) .hover\:border-sky-300:hover,
html:not(.dark) .hover\:border-zinc-400:hover, html:not(.dark) .hover\:border-emerald-300:hover { border-color: var(--border-strong) !important; }
html:not(.dark) .hover\:bg-sky-200:hover { background-color: rgba(10, 10, 11, 0.06) !important; }
html:not(.dark) .hover\:text-orange-700:hover, html:not(.dark) .hover\:text-zinc-800:hover { color: var(--text-1) !important; }
/* hover 青边 → 中性强边 */
html:not(.dark) .hover\:border-primary-500\/30:hover { border-color: var(--border-strong) !important; }

/* 7 · Group/Platform 徽章残留 */
html:not(.dark) .bg-orange-200\/60, html:not(.dark) .bg-emerald-200\/60, html:not(.dark) .bg-blue-200\/60,
html:not(.dark) .bg-purple-200\/60, html:not(.dark) .bg-violet-200\/60, html:not(.dark) .bg-zinc-300\/70 {
  background-color: rgba(10, 10, 11, 0.06) !important;
}
html:not(.dark) .text-emerald-800, html:not(.dark) .text-violet-800 { color: var(--text-1) !important; }
/* 状态 tier：过期红 / 将过期琥珀 → 状态色 */
html:not(.dark) .bg-red-200\/80 { background-color: var(--danger-soft) !important; }
html:not(.dark) .bg-amber-200\/80 { background-color: rgba(176, 138, 46, 0.14) !important; }
html:not(.dark) .text-red-800 { color: var(--danger) !important; }
/* GroupCapacityBadge 容量告警底/字 → 状态色 */
html:not(.dark) .bg-red-100 { background-color: var(--danger-soft) !important; }
html:not(.dark) .bg-yellow-100 { background-color: rgba(176, 138, 46, 0.14) !important; }
html:not(.dark) .text-red-700 { color: var(--danger) !important; }
html:not(.dark) .text-yellow-700 { color: var(--status-degraded-text) !important; }
/* GroupOptionItem 费率胶囊：green/amber 保状态；sky/violet 装饰 → 中性 */
html:not(.dark) .bg-violet-50, html:not(.dark) .bg-green-50, html:not(.dark) .bg-amber-50 { background-color: rgba(10, 10, 11, 0.04) !important; }
html:not(.dark) .text-violet-700 { color: var(--text-2) !important; }
html:not(.dark) .text-green-700 { color: var(--status-online-text) !important; }
/* text-amber-700 已由 L10 → 降级黄；text-sky-700 已由 L10 → text-1，此处不重复 */


/* ============================================================================
 * L50 · 动效时序（浅色等价 · 对应暗色 50-motion.css）
 *   50 段全部 .dark 前缀 → 浅色下失活，故此处补 html:not(.dark) 等价时序；
 *   时序/缓动与暗色一致（DS token 模式无关），仅作用域切换。
 * ========================================================================== */
/* BaseDialog .modal-* */
html:not(.dark) .modal-enter-active { transition: opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .modal-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .modal-enter-active .modal-content { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .modal-leave-active .modal-content { transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .modal-enter-from .modal-content,
html:not(.dark) .modal-leave-to .modal-content { transform: scale(0.97); opacity: 0; }
/* Select 下拉 */
html:not(.dark) .select-dropdown-enter-active { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .select-dropdown-leave-active { transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .select-dropdown-enter-from,
html:not(.dark) .select-dropdown-leave-to { opacity: 0 !important; transform: translateY(-6px) !important; }
/* DateRangePicker 下拉 */
html:not(.dark) .date-picker-dropdown-enter-active { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .date-picker-dropdown-leave-active { transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .date-picker-dropdown-enter-from,
html:not(.dark) .date-picker-dropdown-leave-to { opacity: 0 !important; transform: translateY(-6px) !important; }
/* AnnouncementPopup popup-fade */
html:not(.dark) .popup-fade-enter-active { transition: opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .popup-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .popup-fade-enter-active > div { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .popup-fade-leave-active > div { transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .popup-fade-enter-from > div,
html:not(.dark) .popup-fade-leave-to > div { transform: scale(0.97) translateY(-8px) !important; opacity: 0 !important; }
/* AnnouncementBell modal-fade */
html:not(.dark) .modal-fade-enter-active { transition: opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .modal-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .modal-fade-enter-active > div { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .modal-fade-leave-active > div { transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .modal-fade-enter-from > div,
html:not(.dark) .modal-fade-leave-to > div { transform: scale(0.97) translateY(-8px) !important; opacity: 0 !important; }
/* NavigationProgress progress-fade */
html:not(.dark) .progress-fade-enter-active { transition: opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .progress-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
/* 通用下拉 .dropdown-* */
html:not(.dark) .dropdown-enter-active { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .dropdown-leave-active { transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .dropdown-enter-from,
html:not(.dark) .dropdown-leave-to { opacity: 0 !important; transform: scale(0.98) translateY(-6px) !important; }
/* 通用淡入 .fade-* */
html:not(.dark) .fade-enter-active { transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out) !important; }
/* 登录协议 .agreement-fade-* */
html:not(.dark) .agreement-fade-enter-active,
html:not(.dark) .agreement-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-out) !important; }
html:not(.dark) .agreement-fade-enter-active > div { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out) !important; }
html:not(.dark) .agreement-fade-leave-active > div { transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out) !important; }
/* 微交互 hover 过渡 */
html:not(.dark) .dropdown-item,
html:not(.dark) .select-option,
html:not(.dark) .date-picker-preset { transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out) !important; }

/* prefers-reduced-motion 降级（浅色等价） */
@media (prefers-reduced-motion: reduce) {
  html:not(.dark) .modal-enter-active,
  html:not(.dark) .modal-leave-active,
  html:not(.dark) .modal-enter-active .modal-content,
  html:not(.dark) .modal-leave-active .modal-content,
  html:not(.dark) .select-dropdown-enter-active,
  html:not(.dark) .select-dropdown-leave-active,
  html:not(.dark) .date-picker-dropdown-enter-active,
  html:not(.dark) .date-picker-dropdown-leave-active,
  html:not(.dark) .popup-fade-enter-active,
  html:not(.dark) .popup-fade-leave-active,
  html:not(.dark) .popup-fade-enter-active > div,
  html:not(.dark) .popup-fade-leave-active > div,
  html:not(.dark) .modal-fade-enter-active,
  html:not(.dark) .modal-fade-leave-active,
  html:not(.dark) .modal-fade-enter-active > div,
  html:not(.dark) .modal-fade-leave-active > div,
  html:not(.dark) .progress-fade-enter-active,
  html:not(.dark) .progress-fade-leave-active,
  html:not(.dark) .dropdown-enter-active,
  html:not(.dark) .dropdown-leave-active,
  html:not(.dark) .fade-enter-active,
  html:not(.dark) .fade-leave-active,
  html:not(.dark) .agreement-fade-enter-active,
  html:not(.dark) .agreement-fade-leave-active,
  html:not(.dark) .agreement-fade-enter-active > div,
  html:not(.dark) .agreement-fade-leave-active > div,
  html:not(.dark) .dropdown-item,
  html:not(.dark) .select-option,
  html:not(.dark) .date-picker-preset {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  html:not(.dark) .modal-enter-from .modal-content,
  html:not(.dark) .modal-leave-to .modal-content,
  html:not(.dark) .select-dropdown-enter-from,
  html:not(.dark) .select-dropdown-leave-to,
  html:not(.dark) .date-picker-dropdown-enter-from,
  html:not(.dark) .date-picker-dropdown-leave-to,
  html:not(.dark) .popup-fade-enter-from > div,
  html:not(.dark) .popup-fade-leave-to > div,
  html:not(.dark) .modal-fade-enter-from > div,
  html:not(.dark) .modal-fade-leave-to > div,
  html:not(.dark) .dropdown-enter-from,
  html:not(.dark) .dropdown-leave-to { transform: none !important; }
}

/* 164 AppHeader 焊过的 Rigel「画布」跳转。0.2.4 镜像没带这针，边车补回。 */
.header-canvas-tab {
  display: inline-flex;
  text-decoration: none;
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.28));
}
.header-canvas-tab__surface {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  height: 2.25rem;
  padding: 0 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #5eead4;
  background: #14b8a61f;
  box-shadow: inset 0 0 0 1px #2dd4bf47;
}
.header-canvas-tab__label,
.header-canvas-tab svg {
  position: relative;
  z-index: 1;
}
.header-canvas-tab__shine {
  position: absolute;
  top: -30%;
  right: -50%;
  bottom: -30%;
  left: -50%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
  animation: header-canvas-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
.header-canvas-tab:hover {
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.4));
}
.dark .header-canvas-tab {
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.32));
}
.dark .header-canvas-tab__surface {
  color: #99f6e4;
  background: #2dd4bf1a;
  box-shadow: inset 0 0 0 1px #5eead438;
}
@keyframes header-canvas-shine {
  0% { transform: translate(-50%); }
  62%, to { transform: translate(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .header-canvas-tab__shine { animation: none; opacity: 0.2; }
}