/**
 * ⚡ Personal Agent OS - Theme Center Palettes (主题中心 · 多皮肤引擎)
 * 由 /hub/theme-center.js 驱动：document.documentElement[data-theme="<id>"]
 *
 * 加载顺序：必须在 design-system.css 与 index.html 内联样式之后加载，
 * 并通过 html[data-theme] 提高特异性覆盖 :root 令牌。
 *
 * 主题家族：深色 dark / slate / glass / violet / emerald / cyber / amber / crimson（绯红之瞳）/ obsidian（黑曜金）；亮色 light（晨曦白昼）/ mint（薄荷清晨）/ sakura（樱粉初晴）/ sky（天青云白）/ cream（暖沙奶油）/ lemon（柠檬气泡）/ grape（葡萄冰沙）
 * 亮色皮肤另有运行时重映射引擎（theme-center.js）兜底转换深色硬编码颜色。
 */

/* =========================================================
   0. 共享钩子变量（未指定属性时 = 当前默认深色，视觉零变化）
   ========================================================= */
html[data-theme] {
  --theme-bg-gradient: none;
  --theme-brand-a: #a5b4fc;
  --theme-brand-b: #818cf8;
  --theme-scrim: rgba(0, 0, 0, 0.35);
  --theme-panel-scrim: rgba(0, 0, 0, 0.25);
  --theme-scrollbar: rgba(255, 255, 255, 0.12);
  --theme-scrollbar-hover: rgba(255, 255, 255, 0.25);
  --theme-field-bg: #151b2b;
  --theme-field-border: rgba(255, 255, 255, 0.18);
  --theme-field-text: #f8fafc;
  --theme-field-muted: #94a3b8;
  --theme-opt-bg: #111827;
  --theme-optgroup-bg: #0f172a;
  --theme-preview-glow: var(--os-primary-glow);

  /* DSH Composer / 设置弹窗原生令牌完整映射（补齐历史缺省项，取原回退值） */
  --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.08);
  --dsw-alias-label-secondary: #94a3b8;
  --dsw-alias-border-l2: rgba(255, 255, 255, 0.12);
  --dsw-specific-input-major: rgba(18, 22, 36, 0.92);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.55);
  --dsw-alias-scrollbar-bg-l2: rgba(255, 255, 255, 0.15);
  --dsw-alias-scrollbar-hover-l2: rgba(255, 255, 255, 0.3);
  --dsw-alias-state-business-primary: #6366f1;
  --dsw-alias-label-primary: #f8fafc;
  --dsw-alias-label-caption: #64748b;
  --dsw-alias-label-tertiary: #475569;
  --dsw-specific-selector: rgba(255, 255, 255, 0.07);
  --dsw-alias-interactive-bg-hover-solid: rgba(255, 255, 255, 0.15);
  --dsw-alias-button-info-fill: #4f46e5;
  --dsw-alias-button-info-hover: #4338ca;
  --dsw-alias-bg-layer-2: #18191c;
  --dsw-alias-bg-mask-1: rgba(0, 0, 0, 0.7);
  --dsw-mask-blur: blur(12px);
  --dsw-specific-sidebar-nav-item-hover: rgba(255, 255, 255, 0.06);
  --dsw-specific-sidebar-nav-item-active: rgba(99, 102, 241, 0.16);
}

/* =========================================================
   1. 全局补丁层（由共享钩子驱动，随主题自动变化）
   ========================================================= */

/* 1.1 全局氛围背景渐变（QQ 皮肤感的基调） */
html[data-theme] body {
  background-image: var(--theme-bg-gradient);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* 1.2 品牌字渐变跟随主题 */
html[data-theme] .brand {
  background: linear-gradient(135deg, var(--theme-brand-a), var(--theme-brand-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 1.3 模式切换激活按钮跟随主色 */
html[data-theme] .mode-btn.active {
  background: var(--os-primary);
  box-shadow: 0 0 10px var(--os-primary-glow);
}

/* 1.4 滚动条跟随主题 */
html[data-theme] ::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar);
}
html[data-theme] ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-hover);
}

/* 1.5 原生下拉控件跟随主题（覆盖 design-system / 内联 !important 规范） */
html[data-theme] select {
  background-color: var(--theme-field-bg) !important;
  color: var(--theme-field-text) !important;
  border-color: var(--theme-field-border) !important;
}
html[data-theme] select:focus {
  border-color: var(--os-primary) !important;
  box-shadow: 0 0 0 2px var(--os-primary-glow) !important;
}
html[data-theme] option,
html[data-theme] optgroup {
  color: var(--theme-field-text) !important;
}
html[data-theme] option {
  background-color: var(--theme-opt-bg) !important;
}
html[data-theme] optgroup {
  background-color: var(--theme-optgroup-bg) !important;
  color: var(--theme-field-muted) !important;
}
html[data-theme] option:checked,
html[data-theme] option:hover {
  background-color: var(--os-primary) !important;
  color: #ffffff !important;
}

/* 1.6 全端统一 Web 下拉浮层跟随主题 */
html[data-theme] .os-web-select-popup {
  background: var(--theme-opt-bg);
  border-color: var(--os-border-accent);
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.8), 0 0 15px var(--os-primary-glow);
}
html[data-theme] .os-web-select-item {
  color: var(--os-text-main);
}
html[data-theme] .os-web-select-item.selected {
  background: var(--os-primary-glow);
  color: var(--os-primary);
}
html[data-theme] .os-web-select-optgroup {
  color: var(--os-text-muted);
  border-bottom-color: var(--os-border);
}

/* 1.7 设置弹窗左侧导航遮罩跟随主题 */
html[data-theme] .VOzbGW_nav {
  background: var(--theme-panel-scrim);
  border-right-color: var(--os-border);
}

/* 1.8 模式切换器暗色底跟随主题 */
html[data-theme] .mode-switcher {
  background: var(--theme-scrim);
}

/* 1.9 会话与模型调度设置浮层 (dsh-composer-settings-popover) 跟随主题 */
html[data-theme] .dsh-composer-settings-popover {
  background: var(--dsw-specific-input-major, var(--os-bg-card, rgba(18, 22, 34, 0.98))) !important;
  border-color: var(--os-border-accent, var(--dsw-alias-border-l2)) !important;
  box-shadow: var(--dsw-elevation-soft), 0 0 0 1px var(--dsw-alias-border-l2) !important;
}
html[data-theme] .dsh-settings-pop-header {
  background: var(--theme-scrim, var(--dsw-specific-selector)) !important;
  border-bottom-color: var(--dsw-alias-border-l2) !important;
}
html[data-theme] .dsh-settings-pop-title {
  color: var(--dsw-alias-label-primary) !important;
}
html[data-theme] .dsh-settings-pop-close {
  color: var(--dsw-alias-label-secondary) !important;
}
html[data-theme] .dsh-settings-pop-close:hover {
  color: var(--dsw-alias-label-primary) !important;
  background: var(--dsw-alias-interactive-bg-hover) !important;
}
html[data-theme] .dsh-settings-label {
  color: var(--dsw-alias-label-primary) !important;
}
html[data-theme] .dsh-settings-tip {
  color: var(--dsw-alias-label-caption) !important;
}
html[data-theme] .dsh-settings-select {
  background-color: var(--theme-field-bg) !important;
  color: var(--theme-field-text) !important;
  border-color: var(--theme-field-border) !important;
}
html[data-theme] .dsh-settings-select:focus {
  border-color: var(--os-primary) !important;
  box-shadow: 0 0 0 2px var(--os-primary-glow) !important;
}
html[data-theme] .dsh-settings-token-meter {
  background: var(--dsw-specific-selector) !important;
  border-color: var(--dsw-alias-border-l2) !important;
  color: var(--dsw-alias-label-secondary) !important;
}
html[data-theme] .dsh-swarm-pill {
  background: var(--dsw-specific-selector) !important;
  border-color: var(--dsw-alias-border-l2) !important;
  color: var(--dsw-alias-label-secondary) !important;
}
html[data-theme] .dsh-swarm-pill.active {
  background: linear-gradient(135deg, var(--os-primary-glow), rgba(168, 85, 247, 0.2)) !important;
  border-color: var(--os-primary) !important;
  color: var(--os-primary) !important;
  box-shadow: 0 0 10px var(--os-primary-glow) !important;
}
html[data-theme] .dsh-autopilot-pill {
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
  color: var(--os-rose, #fb7185) !important;
}
html[data-theme] .dsh-autopilot-pill.active {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.35), rgba(236, 72, 153, 0.35)) !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.4) !important;
}
html[data-theme] .dsh-composer-settings-backdrop {
  background: var(--dsw-alias-bg-mask-1) !important;
}
html[data-theme] .dsh-composer-context-card {
  border-color: var(--os-border-accent, rgba(168, 85, 247, 0.28)) !important;
  background: linear-gradient(135deg, var(--os-primary-glow, rgba(168, 85, 247, 0.08)), var(--theme-scrim, rgba(15, 23, 42, 0.4))) !important;
}
html[data-theme] #dshComposerContextStrategyBadge {
  background: var(--os-primary-glow, rgba(59, 130, 246, 0.2)) !important;
  color: var(--os-primary, #60a5fa) !important;
  border-color: var(--os-border-accent, rgba(59, 130, 246, 0.35)) !important;
}
html[data-theme] #dshComposerContextSessionTitle {
  color: var(--dsw-alias-label-secondary) !important;
}
html[data-theme] #btnComposerToggleStrategy {
  background: var(--dsw-specific-selector) !important;
  border-color: var(--dsw-alias-border-l2) !important;
  color: var(--dsw-alias-label-primary) !important;
}
html[data-theme] #btnComposerCompactAction {
  background: var(--os-primary-glow, rgba(168, 85, 247, 0.25)) !important;
  border-color: var(--os-border-accent, rgba(168, 85, 247, 0.4)) !important;
  color: var(--os-primary, #c084fc) !important;
}

/* =========================================================
   2. 深曜暗黑 DSH Classic（默认 · 保持原值零变化）
   ========================================================= */
html[data-theme="dark"] {
  --theme-bg-gradient: none;
}

/* =========================================================
   3. 深空冷灰 Slate Tech（冷静钢铁蓝）
   ========================================================= */
html[data-theme="slate"] {
  --os-bg-base: #0a0e15;
  --os-bg-surface: #101724;
  --os-bg-card: rgba(24, 33, 48, 0.72);
  --os-bg-card-hover: rgba(32, 44, 63, 0.86);
  --os-border: rgba(148, 163, 184, 0.14);
  --os-border-light: rgba(148, 163, 184, 0.26);
  --os-border-accent: rgba(56, 189, 248, 0.42);
  --os-text-main: #e9eef6;
  --os-text-muted: #94a3b8;
  --os-text-faint: #5c6b80;
  --os-primary: #38bdf8;
  --os-primary-glow: rgba(56, 189, 248, 0.32);
  --os-info: #60a5fa;
  --os-success: #34d399;
  --os-warning: #fbbf24;
  --os-rose: #fb7185;
  --os-purple: #a78bfa;
  --bg-main: #101724;
  --bg-panel: rgba(20, 29, 43, 0.85);
  --os-shadow-card: 0 4px 20px rgba(2, 6, 14, 0.45);

  --theme-bg-gradient:
    radial-gradient(1100px 520px at 18% -8%, rgba(56, 189, 248, 0.10), transparent 60%),
    radial-gradient(900px 480px at 108% 12%, rgba(100, 116, 139, 0.14), transparent 55%);
  --theme-brand-a: #cbe8f9;
  --theme-brand-b: #7dd3fc;
  --theme-scrim: rgba(2, 8, 18, 0.42);
  --theme-panel-scrim: rgba(3, 10, 20, 0.35);
  --theme-scrollbar: rgba(148, 163, 184, 0.22);
  --theme-scrollbar-hover: rgba(148, 163, 184, 0.38);
  --theme-field-bg: #14202f;
  --theme-field-border: rgba(148, 163, 184, 0.24);
  --theme-field-text: #f1f7fd;
  --theme-field-muted: #94a3b8;
  --theme-opt-bg: #0f1826;
  --theme-optgroup-bg: #0d1520;

  --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.09);
  --dsw-alias-border-l2: rgba(148, 163, 184, 0.18);
  --dsw-specific-input-major: rgba(16, 23, 36, 0.92);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(2, 6, 14, 0.65);
  --dsw-alias-state-business-primary: #38bdf8;
  --dsw-alias-label-primary: #eef5fc;
  --dsw-alias-interactive-bg-hover-solid: rgba(255, 255, 255, 0.16);
  --dsw-alias-button-info-fill: #0284c7;
  --dsw-alias-button-info-hover: #0369a1;
  --dsw-alias-bg-layer-2: #151d2c;
  --dsw-alias-bg-mask-1: rgba(2, 6, 14, 0.72);
  --dsw-specific-sidebar-nav-item-active: rgba(56, 189, 248, 0.16);
}

/* =========================================================
   4. 磨砂毛玻璃 Frost Glass（冰晶通透质感）
   ========================================================= */
html[data-theme="glass"] {
  --os-bg-base: #060b14;
  --os-bg-surface: rgba(16, 26, 44, 0.66);
  --os-bg-card: rgba(255, 255, 255, 0.055);
  --os-bg-card-hover: rgba(255, 255, 255, 0.09);
  --os-border: rgba(255, 255, 255, 0.14);
  --os-border-light: rgba(255, 255, 255, 0.24);
  --os-border-accent: rgba(34, 211, 238, 0.45);
  --os-text-main: #f0f7ff;
  --os-text-muted: #9db2c8;
  --os-text-faint: #6b8299;
  --os-primary: #22d3ee;
  --os-primary-glow: rgba(34, 211, 238, 0.35);
  --os-info: #60a5fa;
  --os-success: #34d399;
  --os-warning: #fbbf24;
  --os-rose: #f472b6;
  --os-purple: #c084fc;
  --bg-main: rgba(16, 26, 44, 0.66);
  --bg-panel: rgba(16, 26, 44, 0.68);

  --theme-bg-gradient:
    radial-gradient(1100px 560px at 15% -10%, rgba(34, 211, 238, 0.12), transparent 62%),
    radial-gradient(900px 520px at 105% 8%, rgba(129, 140, 248, 0.12), transparent 58%);
  --theme-brand-a: #b5f3ff;
  --theme-brand-b: #67e8f9;
  --theme-scrim: rgba(6, 14, 26, 0.38);
  --theme-panel-scrim: rgba(8, 16, 30, 0.28);
  --theme-scrollbar: rgba(255, 255, 255, 0.18);
  --theme-scrollbar-hover: rgba(255, 255, 255, 0.32);
  --theme-field-bg: rgba(16, 26, 44, 0.9);
  --theme-field-border: rgba(255, 255, 255, 0.2);
  --theme-field-text: #f4fbff;
  --theme-field-muted: #9db2c8;
  --theme-opt-bg: rgba(12, 20, 35, 0.98);
  --theme-optgroup-bg: rgba(10, 17, 30, 0.98);

  --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.1);
  --dsw-alias-label-secondary: #9db2c8;
  --dsw-alias-border-l2: rgba(255, 255, 255, 0.16);
  --dsw-specific-input-major: rgba(16, 26, 44, 0.72);
  --dsw-elevation-soft: 0 12px 34px -6px rgba(2, 8, 18, 0.6);
  --dsw-alias-state-business-primary: #22d3ee;
  --dsw-alias-label-primary: #f4fbff;
  --dsw-alias-label-caption: #6b8299;
  --dsw-alias-button-info-fill: #0891b2;
  --dsw-alias-button-info-hover: #0e7490;
  --dsw-alias-bg-layer-2: rgba(14, 22, 38, 0.88);
  --dsw-alias-bg-mask-1: rgba(4, 10, 20, 0.66);
  --dsw-specific-sidebar-nav-item-active: rgba(34, 211, 238, 0.18);
}

/* 毛玻璃主题：外壳与弹窗增强模糊与饱和度 */
html[data-theme="glass"] .sidebar,
html[data-theme="glass"] .topbar,
html[data-theme="glass"] .VOzbGW_panel,
html[data-theme="glass"] .uV2eYG_card,
html[data-theme="glass"] .os-card {
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

/* =========================================================
   5. 幽兰紫夜 Violet Nebula（紫罗兰星云）
   ========================================================= */
html[data-theme="violet"] {
  --os-bg-base: #0b0716;
  --os-bg-surface: #130d24;
  --os-bg-card: rgba(36, 26, 62, 0.72);
  --os-bg-card-hover: rgba(48, 36, 82, 0.86);
  --os-border: rgba(196, 181, 253, 0.15);
  --os-border-light: rgba(196, 181, 253, 0.27);
  --os-border-accent: rgba(168, 85, 247, 0.45);
  --os-text-main: #f6f2ff;
  --os-text-muted: #a89cc6;
  --os-text-faint: #7a6c99;
  --os-primary: #a855f7;
  --os-primary-glow: rgba(168, 85, 247, 0.4);
  --os-info: #818cf8;
  --os-success: #34d399;
  --os-warning: #fbbf24;
  --os-rose: #f472b6;
  --os-purple: #c084fc;
  --bg-main: #130d24;
  --bg-panel: rgba(27, 19, 47, 0.85);
  --os-shadow-card: 0 4px 22px rgba(8, 3, 20, 0.5);

  --theme-bg-gradient:
    radial-gradient(1100px 560px at 16% -10%, rgba(168, 85, 247, 0.14), transparent 62%),
    radial-gradient(880px 520px at 108% 10%, rgba(99, 102, 241, 0.12), transparent 58%);
  --theme-brand-a: #e9d5ff;
  --theme-brand-b: #a855f7;
  --theme-scrim: rgba(10, 5, 22, 0.42);
  --theme-panel-scrim: rgba(12, 6, 26, 0.34);
  --theme-scrollbar: rgba(196, 181, 253, 0.2);
  --theme-scrollbar-hover: rgba(196, 181, 253, 0.34);
  --theme-field-bg: #1a1230;
  --theme-field-border: rgba(196, 181, 253, 0.24);
  --theme-field-text: #faf7ff;
  --theme-field-muted: #a89cc6;
  --theme-opt-bg: #150e28;
  --theme-optgroup-bg: #110b20;

  --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.09);
  --dsw-alias-label-secondary: #a89cc6;
  --dsw-alias-border-l2: rgba(196, 181, 253, 0.2);
  --dsw-specific-input-major: rgba(24, 16, 43, 0.92);
  --dsw-elevation-soft: 0 12px 32px -5px rgba(8, 3, 20, 0.65);
  --dsw-alias-state-business-primary: #a855f7;
  --dsw-alias-label-primary: #f8f4ff;
  --dsw-alias-label-caption: #7a6c99;
  --dsw-alias-button-info-fill: #7c3aed;
  --dsw-alias-button-info-hover: #6d28d9;
  --dsw-alias-bg-layer-2: #1b1430;
  --dsw-alias-bg-mask-1: rgba(8, 3, 20, 0.72);
  --dsw-specific-sidebar-nav-item-active: rgba(168, 85, 247, 0.18);
}

/* =========================================================
   6. 翡翠深林 Emerald Forest（幽谷翡翠）
   ========================================================= */
html[data-theme="emerald"] {
  --os-bg-base: #05110b;
  --os-bg-surface: #0a1a12;
  --os-bg-card: rgba(17, 40, 30, 0.72);
  --os-bg-card-hover: rgba(23, 52, 39, 0.86);
  --os-border: rgba(110, 231, 183, 0.15);
  --os-border-light: rgba(110, 231, 183, 0.27);
  --os-border-accent: rgba(16, 185, 129, 0.45);
  --os-text-main: #edfdf5;
  --os-text-muted: #9ec2b0;
  --os-text-faint: #6f907f;
  --os-primary: #10b981;
  --os-primary-glow: rgba(16, 185, 129, 0.38);
  --os-info: #2dd4bf;
  --os-success: #34d399;
  --os-warning: #fbbf24;
  --os-rose: #fb7185;
  --os-purple: #a78bfa;
  --bg-main: #0a1a12;
  --bg-panel: rgba(13, 28, 21, 0.85);
  --os-shadow-card: 0 4px 22px rgba(1, 10, 6, 0.5);

  --theme-bg-gradient:
    radial-gradient(1100px 560px at 16% -10%, rgba(16, 185, 129, 0.13), transparent 62%),
    radial-gradient(880px 520px at 108% 10%, rgba(45, 212, 191, 0.1), transparent 58%);
  --theme-brand-a: #b7f7dc;
  --theme-brand-b: #10b981;
  --theme-scrim: rgba(3, 12, 8, 0.42);
  --theme-panel-scrim: rgba(4, 14, 9, 0.34);
  --theme-scrollbar: rgba(110, 231, 183, 0.2);
  --theme-scrollbar-hover: rgba(110, 231, 183, 0.34);
  --theme-field-bg: #0d2118;
  --theme-field-border: rgba(110, 231, 183, 0.24);
  --theme-field-text: #f2fff9;
  --theme-field-muted: #9ec2b0;
  --theme-opt-bg: #0a1c13;
  --theme-optgroup-bg: #08170f;

  --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.09);
  --dsw-alias-label-secondary: #9ec2b0;
  --dsw-alias-border-l2: rgba(110, 231, 183, 0.2);
  --dsw-specific-input-major: rgba(12, 30, 22, 0.92);
  --dsw-elevation-soft: 0 12px 32px -5px rgba(1, 10, 6, 0.65);
  --dsw-alias-state-business-primary: #10b981;
  --dsw-alias-label-primary: #f0fdf7;
  --dsw-alias-label-caption: #6f907f;
  --dsw-alias-button-info-fill: #059669;
  --dsw-alias-button-info-hover: #047857;
  --dsw-alias-bg-layer-2: #0e2119;
  --dsw-alias-bg-mask-1: rgba(1, 10, 6, 0.72);
  --dsw-specific-sidebar-nav-item-active: rgba(16, 185, 129, 0.18);
}

/* =========================================================
   7. 赛博霓虹 Cyber Neon（青紫霓虹光轨）
   ========================================================= */
html[data-theme="cyber"] {
  --os-bg-base: #04050e;
  --os-bg-surface: #0a0d1f;
  --os-bg-card: rgba(15, 21, 46, 0.72);
  --os-bg-card-hover: rgba(21, 29, 60, 0.86);
  --os-border: rgba(34, 211, 238, 0.17);
  --os-border-light: rgba(34, 211, 238, 0.3);
  --os-border-accent: rgba(34, 211, 238, 0.5);
  --os-text-main: #eafcff;
  --os-text-muted: #8fa8c8;
  --os-text-faint: #5f7699;
  --os-primary: #22d3ee;
  --os-primary-glow: rgba(34, 211, 238, 0.42);
  --os-info: #38bdf8;
  --os-success: #2dd4bf;
  --os-warning: #f59e0b;
  --os-rose: #ec4899;
  --os-purple: #c084fc;
  --bg-main: #0a0d1f;
  --bg-panel: rgba(13, 17, 38, 0.85);
  --os-shadow-card: 0 4px 24px rgba(0, 2, 12, 0.55);
  --os-shadow-glow: 0 0 18px var(--os-primary-glow);

  --theme-bg-gradient:
    radial-gradient(1100px 560px at 12% -12%, rgba(34, 211, 238, 0.15), transparent 60%),
    radial-gradient(920px 560px at 112% 6%, rgba(236, 72, 153, 0.12), transparent 58%);
  --theme-brand-a: #67e8f9;
  --theme-brand-b: #f0abfc;
  --theme-scrim: rgba(2, 4, 14, 0.5);
  --theme-panel-scrim: rgba(3, 6, 18, 0.4);
  --theme-scrollbar: rgba(34, 211, 238, 0.24);
  --theme-scrollbar-hover: rgba(34, 211, 238, 0.4);
  --theme-field-bg: #0c1226;
  --theme-field-border: rgba(34, 211, 238, 0.28);
  --theme-field-text: #f0fdff;
  --theme-field-muted: #8fa8c8;
  --theme-opt-bg: #090e1f;
  --theme-optgroup-bg: #070b18;

  --dsw-alias-interactive-bg-hover: rgba(34, 211, 238, 0.1);
  --dsw-alias-label-secondary: #8fa8c8;
  --dsw-alias-border-l2: rgba(34, 211, 238, 0.24);
  --dsw-specific-input-major: rgba(10, 14, 32, 0.92);
  --dsw-elevation-soft: 0 12px 34px -5px rgba(0, 2, 12, 0.75), 0 0 14px rgba(34, 211, 238, 0.12);
  --dsw-alias-state-business-primary: #22d3ee;
  --dsw-alias-label-primary: #eefcff;
  --dsw-alias-label-caption: #5f7699;
  --dsw-alias-button-info-fill: #06b6d4;
  --dsw-alias-button-info-hover: #0891b2;
  --dsw-alias-bg-layer-2: #0c1226;
  --dsw-alias-bg-mask-1: rgba(2, 4, 14, 0.76);
  --dsw-specific-sidebar-nav-item-active: rgba(236, 72, 153, 0.16);
}

/* 霓虹主题：顶栏底边与激活态光轨 */
html[data-theme="cyber"] .topbar {
  border-bottom-color: rgba(34, 211, 238, 0.28);
  box-shadow: 0 1px 14px -6px rgba(34, 211, 238, 0.5);
}
html[data-theme="cyber"] .mode-btn.active {
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
}

/* =========================================================
   8. 琥珀暖阳 Amber Dusk（暖金黄昏）
   ========================================================= */
html[data-theme="amber"] {
  --os-bg-base: #0f0a06;
  --os-bg-surface: #191209;
  --os-bg-card: rgba(42, 31, 19, 0.72);
  --os-bg-card-hover: rgba(55, 41, 25, 0.86);
  --os-border: rgba(251, 191, 36, 0.16);
  --os-border-light: rgba(251, 191, 36, 0.28);
  --os-border-accent: rgba(245, 158, 11, 0.45);
  --os-text-main: #fff7ed;
  --os-text-muted: #c7ab8b;
  --os-text-faint: #957f68;
  --os-primary: #f59e0b;
  --os-primary-glow: rgba(245, 158, 11, 0.36);
  --os-info: #fbbf24;
  --os-success: #34d399;
  --os-warning: #fb923c;
  --os-rose: #fb7185;
  --os-purple: #c084fc;
  --bg-main: #191209;
  --bg-panel: rgba(28, 21, 13, 0.85);
  --os-shadow-card: 0 4px 22px rgba(12, 6, 1, 0.5);

  --theme-bg-gradient:
    radial-gradient(1100px 560px at 14% -10%, rgba(245, 158, 11, 0.13), transparent 62%),
    radial-gradient(880px 520px at 108% 10%, rgba(251, 113, 133, 0.09), transparent 58%);
  --theme-brand-a: #fde68a;
  --theme-brand-b: #f59e0b;
  --theme-scrim: rgba(16, 9, 2, 0.42);
  --theme-panel-scrim: rgba(18, 11, 3, 0.34);
  --theme-scrollbar: rgba(251, 191, 36, 0.2);
  --theme-scrollbar-hover: rgba(251, 191, 36, 0.34);
  --theme-field-bg: #241a0e;
  --theme-field-border: rgba(251, 191, 36, 0.24);
  --theme-field-text: #fffaf2;
  --theme-field-muted: #c7ab8b;
  --theme-opt-bg: #1e150b;
  --theme-optgroup-bg: #191107;

  --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.09);
  --dsw-alias-label-secondary: #c7ab8b;
  --dsw-alias-border-l2: rgba(251, 191, 36, 0.2);
  --dsw-specific-input-major: rgba(31, 22, 12, 0.92);
  --dsw-elevation-soft: 0 12px 32px -5px rgba(12, 6, 1, 0.65);
  --dsw-alias-state-business-primary: #f59e0b;
  --dsw-alias-label-primary: #fffaf2;
  --dsw-alias-label-caption: #957f68;
  --dsw-alias-button-info-fill: #d97706;
  --dsw-alias-button-info-hover: #b45309;
  --dsw-alias-bg-layer-2: #241a0e;
  --dsw-alias-bg-mask-1: rgba(12, 6, 1, 0.72);
  --dsw-specific-sidebar-nav-item-active: rgba(245, 158, 11, 0.18);
}

/* =========================================================
   8.0a 绯红之瞳 Crimson Night（酒红暗夜深绯）
   ========================================================= */
html[data-theme="crimson"] {
  --os-bg-base: #140609;
  --os-bg-surface: #1f0b10;
  --os-bg-card: rgba(48, 18, 26, 0.72);
  --os-bg-card-hover: rgba(62, 24, 34, 0.86);
  --os-border: rgba(248, 113, 113, 0.16);
  --os-border-light: rgba(248, 113, 113, 0.28);
  --os-border-accent: rgba(239, 68, 68, 0.45);
  --os-text-main: #fff1f2;
  --os-text-muted: #cfa3aa;
  --os-text-faint: #a0767e;
  --os-primary: #ef4444;
  --os-primary-glow: rgba(239, 68, 68, 0.4);
  --os-info: #f87171;
  --os-success: #34d399;
  --os-warning: #fbbf24;
  --os-rose: #fb7185;
  --os-purple: #c084fc;
  --bg-main: #1f0b10;
  --bg-panel: rgba(31, 11, 16, 0.85);
  --os-shadow-card: 0 4px 22px rgba(12, 2, 4, 0.5);

  --theme-bg-gradient:
    radial-gradient(1100px 560px at 14% -10%, rgba(239, 68, 68, 0.14), transparent 62%),
    radial-gradient(900px 520px at 108% 10%, rgba(251, 113, 133, 0.09), transparent 58%);
  --theme-brand-a: #fca5a5;
  --theme-brand-b: #ef4444;
  --theme-scrim: rgba(24, 6, 8, 0.45);
  --theme-panel-scrim: rgba(28, 8, 11, 0.34);
  --theme-scrollbar: rgba(248, 113, 113, 0.2);
  --theme-scrollbar-hover: rgba(248, 113, 113, 0.34);
  --theme-field-bg: #22090f;
  --theme-field-border: rgba(248, 113, 113, 0.24);
  --theme-field-text: #fff5f6;
  --theme-field-muted: #cfa3aa;
  --theme-opt-bg: #1b070c;
  --theme-optgroup-bg: #16050a;

  --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.09);
  --dsw-alias-label-secondary: #cfa3aa;
  --dsw-alias-border-l2: rgba(248, 113, 113, 0.2);
  --dsw-specific-input-major: rgba(24, 8, 12, 0.92);
  --dsw-elevation-soft: 0 12px 32px -5px rgba(12, 2, 4, 0.7);
  --dsw-alias-state-business-primary: #ef4444;
  --dsw-alias-label-primary: #fff3f5;
  --dsw-alias-label-caption: #a0767e;
  --dsw-alias-button-info-fill: #dc2626;
  --dsw-alias-button-info-hover: #b91c1c;
  --dsw-alias-bg-layer-2: #22090f;
  --dsw-alias-bg-mask-1: rgba(12, 2, 4, 0.72);
  --dsw-specific-sidebar-nav-item-active: rgba(239, 68, 68, 0.16);
}

/* =========================================================
   8.0b 黑曜金 Obsidian Gold（暗夜鎏金）
   ========================================================= */
html[data-theme="obsidian"] {
  --os-bg-base: #0b0a07;
  --os-bg-surface: #14110b;
  --os-bg-card: rgba(33, 28, 17, 0.72);
  --os-bg-card-hover: rgba(43, 37, 23, 0.86);
  --os-border: rgba(234, 179, 8, 0.16);
  --os-border-light: rgba(234, 179, 8, 0.28);
  --os-border-accent: rgba(212, 175, 55, 0.45);
  --os-text-main: #fbf6e7;
  --os-text-muted: #c2b28c;
  --os-text-faint: #948a6f;
  --os-primary: #eab308;
  --os-primary-glow: rgba(234, 179, 8, 0.38);
  --os-info: #fbbf24;
  --os-success: #34d399;
  --os-warning: #f59e0b;
  --os-rose: #fb7185;
  --os-purple: #c084fc;
  --bg-main: #14110b;
  --bg-panel: rgba(23, 20, 13, 0.85);
  --os-shadow-card: 0 4px 22px rgba(10, 8, 3, 0.5);

  --theme-bg-gradient:
    radial-gradient(1100px 560px at 14% -10%, rgba(234, 179, 8, 0.12), transparent 62%),
    radial-gradient(900px 520px at 108% 10%, rgba(212, 175, 55, 0.08), transparent 58%);
  --theme-brand-a: #fde68a;
  --theme-brand-b: #eab308;
  --theme-scrim: rgba(16, 13, 6, 0.45);
  --theme-panel-scrim: rgba(18, 15, 8, 0.34);
  --theme-scrollbar: rgba(234, 179, 8, 0.22);
  --theme-scrollbar-hover: rgba(234, 179, 8, 0.36);
  --theme-field-bg: #191408;
  --theme-field-border: rgba(234, 179, 8, 0.26);
  --theme-field-text: #fefce8;
  --theme-field-muted: #c2b28c;
  --theme-opt-bg: #14110a;
  --theme-optgroup-bg: #0f0d07;

  --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.09);
  --dsw-alias-label-secondary: #c2b28c;
  --dsw-alias-border-l2: rgba(234, 179, 8, 0.2);
  --dsw-specific-input-major: rgba(20, 17, 10, 0.92);
  --dsw-elevation-soft: 0 12px 32px -5px rgba(10, 8, 3, 0.65);
  --dsw-alias-state-business-primary: #eab308;
  --dsw-alias-label-primary: #fdf9ea;
  --dsw-alias-label-caption: #948a6f;
  --dsw-alias-button-info-fill: #ca8a04;
  --dsw-alias-button-info-hover: #a16207;
  --dsw-alias-bg-layer-2: #191408;
  --dsw-alias-bg-mask-1: rgba(10, 8, 3, 0.72);
  --dsw-specific-sidebar-nav-item-active: rgba(234, 179, 8, 0.16);
}

/* =========================================================
   8.5 晨曦白昼 Dawn Light（亮色皮肤，深色硬编码颜色由
       theme-center.js 的亮色重映射引擎自动转换为浅色）
   ========================================================= */
html[data-theme="light"] {
  color-scheme: light;

  --os-bg-base: #eef1f7;
  --os-bg-surface: #ffffff;
  --os-bg-card: rgba(255, 255, 255, 0.88);
  --os-bg-card-hover: rgba(246, 248, 252, 0.98);
  --os-border: rgba(15, 23, 42, 0.10);
  --os-border-light: rgba(15, 23, 42, 0.20);
  --os-border-accent: rgba(79, 70, 229, 0.35);
  --os-text-main: #0f172a;
  --os-text-muted: #475569;
  --os-text-faint: #74849b;
  --os-primary: #4f46e5;
  --os-primary-glow: rgba(79, 70, 229, 0.22);
  --os-info: #2563eb;
  --os-success: #059669;
  --os-warning: #d97706;
  --os-rose: #db2777;
  --os-purple: #7c3aed;
  --bg-main: #ffffff;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --os-shadow-card: 0 4px 18px rgba(15, 23, 42, 0.08);
  --os-shadow-glow: 0 0 16px var(--os-primary-glow);

  --theme-bg-gradient:
    radial-gradient(1100px 520px at 16% -10%, rgba(79, 70, 229, 0.08), transparent 60%),
    radial-gradient(900px 480px at 108% 8%, rgba(14, 165, 233, 0.07), transparent 58%);
  --theme-brand-a: #4f46e5;
  --theme-brand-b: #7c3aed;
  --theme-scrim: rgba(15, 23, 42, 0.06);
  --theme-panel-scrim: rgba(15, 23, 42, 0.04);
  --theme-scrollbar: rgba(15, 23, 42, 0.18);
  --theme-scrollbar-hover: rgba(15, 23, 42, 0.30);
  --theme-field-bg: #ffffff;
  --theme-field-border: rgba(15, 23, 42, 0.16);
  --theme-field-text: #0f172a;
  --theme-field-muted: #64748b;
  --theme-opt-bg: #ffffff;
  --theme-optgroup-bg: #f1f5f9;

  --dsw-alias-interactive-bg-hover: rgba(15, 23, 42, 0.06);
  --dsw-alias-label-secondary: #475569;
  --dsw-alias-border-l2: rgba(15, 23, 42, 0.12);
  --dsw-specific-input-major: rgba(255, 255, 255, 0.95);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(15, 23, 42, 0.16);
  --dsw-alias-scrollbar-bg-l2: rgba(15, 23, 42, 0.18);
  --dsw-alias-scrollbar-hover-l2: rgba(15, 23, 42, 0.32);
  --dsw-alias-state-business-primary: #4f46e5;
  --dsw-alias-label-primary: #0f172a;
  --dsw-alias-label-caption: #74849b;
  --dsw-alias-label-tertiary: #94a3b8;
  --dsw-specific-selector: rgba(15, 23, 42, 0.05);
  --dsw-alias-interactive-bg-hover-solid: rgba(15, 23, 42, 0.12);
  --dsw-alias-button-info-fill: #4f46e5;
  --dsw-alias-button-info-hover: #4338ca;
  --dsw-alias-bg-layer-2: #ffffff;
  --dsw-alias-bg-mask-1: rgba(15, 23, 42, 0.35);
  --dsw-mask-blur: blur(12px);
  --dsw-specific-sidebar-nav-item-hover: rgba(15, 23, 42, 0.05);
  --dsw-specific-sidebar-nav-item-active: rgba(79, 70, 229, 0.12);
}

/* =========================================================
   8.6 薄荷清晨 Mint Morning（清新薄荷绿）
   ========================================================= */
html[data-theme="mint"] {
  color-scheme: light;

  --os-bg-base: #eef6f2;
  --os-bg-surface: #ffffff;
  --os-bg-card: rgba(255, 255, 255, 0.88);
  --os-bg-card-hover: rgba(240, 250, 246, 0.98);
  --os-border: rgba(6, 78, 59, 0.10);
  --os-border-light: rgba(6, 78, 59, 0.20);
  --os-border-accent: rgba(5, 150, 105, 0.35);
  --os-text-main: #0b2a22;
  --os-text-muted: #4b6b60;
  --os-text-faint: #7c9a8f;
  --os-primary: #059669;
  --os-primary-glow: rgba(5, 150, 105, 0.22);
  --os-info: #0284c7;
  --os-success: #059669;
  --os-warning: #d97706;
  --os-rose: #db2777;
  --os-purple: #7c3aed;
  --bg-main: #ffffff;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --os-shadow-card: 0 4px 18px rgba(6, 46, 36, 0.08);
  --os-shadow-glow: 0 0 16px var(--os-primary-glow);

  --theme-bg-gradient:
    radial-gradient(1100px 520px at 16% -10%, rgba(5, 150, 105, 0.09), transparent 60%),
    radial-gradient(900px 480px at 108% 8%, rgba(20, 184, 166, 0.08), transparent 58%);
  --theme-brand-a: #059669;
  --theme-brand-b: #0d9488;
  --theme-scrim: rgba(6, 46, 36, 0.06);
  --theme-panel-scrim: rgba(6, 46, 36, 0.04);
  --theme-scrollbar: rgba(6, 78, 59, 0.18);
  --theme-scrollbar-hover: rgba(6, 78, 59, 0.30);
  --theme-field-bg: #ffffff;
  --theme-field-border: rgba(6, 78, 59, 0.16);
  --theme-field-text: #0b2a22;
  --theme-field-muted: #5b7a6f;
  --theme-opt-bg: #ffffff;
  --theme-optgroup-bg: #eef6f2;

  --dsw-alias-interactive-bg-hover: rgba(6, 78, 59, 0.06);
  --dsw-alias-label-secondary: #4b6b60;
  --dsw-alias-border-l2: rgba(6, 78, 59, 0.12);
  --dsw-specific-input-major: rgba(255, 255, 255, 0.95);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(6, 46, 36, 0.15);
  --dsw-alias-scrollbar-bg-l2: rgba(6, 78, 59, 0.18);
  --dsw-alias-scrollbar-hover-l2: rgba(6, 78, 59, 0.32);
  --dsw-alias-state-business-primary: #059669;
  --dsw-alias-label-primary: #0b2a22;
  --dsw-alias-label-caption: #7c9a8f;
  --dsw-alias-label-tertiary: #94a3b8;
  --dsw-specific-selector: rgba(6, 78, 59, 0.05);
  --dsw-alias-interactive-bg-hover-solid: rgba(6, 78, 59, 0.12);
  --dsw-alias-button-info-fill: #059669;
  --dsw-alias-button-info-hover: #047857;
  --dsw-alias-bg-layer-2: #ffffff;
  --dsw-alias-bg-mask-1: rgba(6, 46, 36, 0.32);
  --dsw-specific-sidebar-nav-item-hover: rgba(6, 78, 59, 0.05);
  --dsw-specific-sidebar-nav-item-active: rgba(5, 150, 105, 0.12);
}

/* =========================================================
   8.7 樱粉初晴 Sakura Bloom（樱花柔粉）
   ========================================================= */
html[data-theme="sakura"] {
  color-scheme: light;

  --os-bg-base: #fdf1f5;
  --os-bg-surface: #ffffff;
  --os-bg-card: rgba(255, 255, 255, 0.90);
  --os-bg-card-hover: rgba(253, 242, 247, 0.98);
  --os-border: rgba(131, 24, 67, 0.10);
  --os-border-light: rgba(131, 24, 67, 0.20);
  --os-border-accent: rgba(219, 39, 119, 0.35);
  --os-text-main: #3d0f24;
  --os-text-muted: #7a5566;
  --os-text-faint: #a98b98;
  --os-primary: #db2777;
  --os-primary-glow: rgba(219, 39, 119, 0.22);
  --os-info: #2563eb;
  --os-success: #059669;
  --os-warning: #d97706;
  --os-rose: #e11d48;
  --os-purple: #a855f7;
  --bg-main: #ffffff;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --os-shadow-card: 0 4px 18px rgba(76, 5, 25, 0.08);
  --os-shadow-glow: 0 0 16px var(--os-primary-glow);

  --theme-bg-gradient:
    radial-gradient(1100px 520px at 16% -10%, rgba(219, 39, 119, 0.08), transparent 60%),
    radial-gradient(900px 480px at 108% 8%, rgba(168, 85, 247, 0.08), transparent 58%);
  --theme-brand-a: #db2777;
  --theme-brand-b: #a855f7;
  --theme-scrim: rgba(76, 5, 25, 0.06);
  --theme-panel-scrim: rgba(76, 5, 25, 0.04);
  --theme-scrollbar: rgba(131, 24, 67, 0.18);
  --theme-scrollbar-hover: rgba(131, 24, 67, 0.30);
  --theme-field-bg: #ffffff;
  --theme-field-border: rgba(131, 24, 67, 0.16);
  --theme-field-text: #3d0f24;
  --theme-field-muted: #7a5566;
  --theme-opt-bg: #ffffff;
  --theme-optgroup-bg: #fdf1f5;

  --dsw-alias-interactive-bg-hover: rgba(131, 24, 67, 0.06);
  --dsw-alias-label-secondary: #7a5566;
  --dsw-alias-border-l2: rgba(131, 24, 67, 0.12);
  --dsw-specific-input-major: rgba(255, 255, 255, 0.95);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(76, 5, 25, 0.15);
  --dsw-alias-scrollbar-bg-l2: rgba(131, 24, 67, 0.18);
  --dsw-alias-scrollbar-hover-l2: rgba(131, 24, 67, 0.32);
  --dsw-alias-state-business-primary: #db2777;
  --dsw-alias-label-primary: #3d0f24;
  --dsw-alias-label-caption: #a98b98;
  --dsw-alias-label-tertiary: #94a3b8;
  --dsw-specific-selector: rgba(131, 24, 67, 0.05);
  --dsw-alias-interactive-bg-hover-solid: rgba(131, 24, 67, 0.12);
  --dsw-alias-button-info-fill: #db2777;
  --dsw-alias-button-info-hover: #be185d;
  --dsw-alias-bg-layer-2: #ffffff;
  --dsw-alias-bg-mask-1: rgba(76, 5, 25, 0.32);
  --dsw-specific-sidebar-nav-item-hover: rgba(131, 24, 67, 0.05);
  --dsw-specific-sidebar-nav-item-active: rgba(219, 39, 119, 0.12);
}

/* =========================================================
   8.8 天青云白 Sky Azure（晴空澄蓝）
   ========================================================= */
html[data-theme="sky"] {
  color-scheme: light;

  --os-bg-base: #eff6fc;
  --os-bg-surface: #ffffff;
  --os-bg-card: rgba(255, 255, 255, 0.90);
  --os-bg-card-hover: rgba(240, 247, 254, 0.98);
  --os-border: rgba(12, 74, 110, 0.10);
  --os-border-light: rgba(12, 74, 110, 0.20);
  --os-border-accent: rgba(2, 132, 199, 0.35);
  --os-text-main: #0c2a43;
  --os-text-muted: #4a6b85;
  --os-text-faint: #7d97ad;
  --os-primary: #0284c7;
  --os-primary-glow: rgba(2, 132, 199, 0.22);
  --os-info: #2563eb;
  --os-success: #059669;
  --os-warning: #d97706;
  --os-rose: #db2777;
  --os-purple: #7c3aed;
  --bg-main: #ffffff;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --os-shadow-card: 0 4px 18px rgba(3, 37, 65, 0.08);
  --os-shadow-glow: 0 0 16px var(--os-primary-glow);

  --theme-bg-gradient:
    radial-gradient(1100px 520px at 16% -10%, rgba(2, 132, 199, 0.09), transparent 60%),
    radial-gradient(900px 480px at 108% 8%, rgba(99, 102, 241, 0.07), transparent 58%);
  --theme-brand-a: #0284c7;
  --theme-brand-b: #4f46e5;
  --theme-scrim: rgba(3, 37, 65, 0.06);
  --theme-panel-scrim: rgba(3, 37, 65, 0.04);
  --theme-scrollbar: rgba(12, 74, 110, 0.18);
  --theme-scrollbar-hover: rgba(12, 74, 110, 0.30);
  --theme-field-bg: #ffffff;
  --theme-field-border: rgba(12, 74, 110, 0.16);
  --theme-field-text: #0c2a43;
  --theme-field-muted: #4a6b85;
  --theme-opt-bg: #ffffff;
  --theme-optgroup-bg: #eff6fc;

  --dsw-alias-interactive-bg-hover: rgba(12, 74, 110, 0.06);
  --dsw-alias-label-secondary: #4a6b85;
  --dsw-alias-border-l2: rgba(12, 74, 110, 0.12);
  --dsw-specific-input-major: rgba(255, 255, 255, 0.95);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(3, 37, 65, 0.15);
  --dsw-alias-scrollbar-bg-l2: rgba(12, 74, 110, 0.18);
  --dsw-alias-scrollbar-hover-l2: rgba(12, 74, 110, 0.32);
  --dsw-alias-state-business-primary: #0284c7;
  --dsw-alias-label-primary: #0c2a43;
  --dsw-alias-label-caption: #7d97ad;
  --dsw-alias-label-tertiary: #94a3b8;
  --dsw-specific-selector: rgba(12, 74, 110, 0.05);
  --dsw-alias-interactive-bg-hover-solid: rgba(12, 74, 110, 0.12);
  --dsw-alias-button-info-fill: #0284c7;
  --dsw-alias-button-info-hover: #0369a1;
  --dsw-alias-bg-layer-2: #ffffff;
  --dsw-alias-bg-mask-1: rgba(3, 37, 65, 0.32);
  --dsw-specific-sidebar-nav-item-hover: rgba(12, 74, 110, 0.05);
  --dsw-specific-sidebar-nav-item-active: rgba(2, 132, 199, 0.12);
}

/* =========================================================
   8.9 暖沙奶油 Cream Sand（暖沙奶油纸）
   ========================================================= */
html[data-theme="cream"] {
  color-scheme: light;

  --os-bg-base: #faf5ec;
  --os-bg-surface: #fffdf9;
  --os-bg-card: rgba(255, 253, 249, 0.90);
  --os-bg-card-hover: rgba(250, 244, 235, 0.98);
  --os-border: rgba(120, 53, 15, 0.12);
  --os-border-light: rgba(120, 53, 15, 0.22);
  --os-border-accent: rgba(180, 83, 9, 0.35);
  --os-text-main: #3b2410;
  --os-text-muted: #7a6a52;
  --os-text-faint: #a3957f;
  --os-primary: #b45309;
  --os-primary-glow: rgba(180, 83, 9, 0.22);
  --os-info: #2563eb;
  --os-success: #059669;
  --os-warning: #d97706;
  --os-rose: #db2777;
  --os-purple: #7c3aed;
  --bg-main: #fffdf9;
  --bg-panel: rgba(255, 253, 249, 0.94);
  --os-shadow-card: 0 4px 18px rgba(59, 36, 16, 0.09);
  --os-shadow-glow: 0 0 16px var(--os-primary-glow);

  --theme-bg-gradient:
    radial-gradient(1100px 520px at 16% -10%, rgba(180, 83, 9, 0.09), transparent 60%),
    radial-gradient(900px 480px at 108% 8%, rgba(217, 119, 6, 0.08), transparent 58%);
  --theme-brand-a: #b45309;
  --theme-brand-b: #d97706;
  --theme-scrim: rgba(59, 36, 16, 0.06);
  --theme-panel-scrim: rgba(59, 36, 16, 0.04);
  --theme-scrollbar: rgba(120, 53, 15, 0.18);
  --theme-scrollbar-hover: rgba(120, 53, 15, 0.30);
  --theme-field-bg: #fffdf9;
  --theme-field-border: rgba(120, 53, 15, 0.18);
  --theme-field-text: #3b2410;
  --theme-field-muted: #7a6a52;
  --theme-opt-bg: #fffdf9;
  --theme-optgroup-bg: #faf5ec;

  --dsw-alias-interactive-bg-hover: rgba(120, 53, 15, 0.06);
  --dsw-alias-label-secondary: #7a6a52;
  --dsw-alias-border-l2: rgba(120, 53, 15, 0.12);
  --dsw-specific-input-major: rgba(255, 253, 249, 0.95);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(59, 36, 16, 0.16);
  --dsw-alias-scrollbar-bg-l2: rgba(120, 53, 15, 0.18);
  --dsw-alias-scrollbar-hover-l2: rgba(120, 53, 15, 0.32);
  --dsw-alias-state-business-primary: #b45309;
  --dsw-alias-label-primary: #3b2410;
  --dsw-alias-label-caption: #a3957f;
  --dsw-alias-label-tertiary: #94a3b8;
  --dsw-specific-selector: rgba(120, 53, 15, 0.05);
  --dsw-alias-interactive-bg-hover-solid: rgba(120, 53, 15, 0.12);
  --dsw-alias-button-info-fill: #b45309;
  --dsw-alias-button-info-hover: #92400e;
  --dsw-alias-bg-layer-2: #fffdf9;
  --dsw-alias-bg-mask-1: rgba(59, 36, 16, 0.32);
  --dsw-specific-sidebar-nav-item-hover: rgba(120, 53, 15, 0.05);
  --dsw-specific-sidebar-nav-item-active: rgba(180, 83, 9, 0.12);
}

/* =========================================================
   8.10 柠檬气泡 Lemon Fizz（清新柠檬黄绿）
   ========================================================= */
html[data-theme="lemon"] {
  color-scheme: light;

  --os-bg-base: #f7fae8;
  --os-bg-surface: #ffffff;
  --os-bg-card: rgba(255, 255, 255, 0.90);
  --os-bg-card-hover: rgba(248, 252, 232, 0.98);
  --os-border: rgba(77, 124, 15, 0.12);
  --os-border-light: rgba(77, 124, 15, 0.22);
  --os-border-accent: rgba(101, 163, 13, 0.35);
  --os-text-main: #2b3a10;
  --os-text-muted: #5f7247;
  --os-text-faint: #8b9a77;
  --os-primary: #65a30d;
  --os-primary-glow: rgba(101, 163, 13, 0.22);
  --os-info: #2563eb;
  --os-success: #059669;
  --os-warning: #d97706;
  --os-rose: #db2777;
  --os-purple: #7c3aed;
  --bg-main: #ffffff;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --os-shadow-card: 0 4px 18px rgba(63, 98, 18, 0.08);
  --os-shadow-glow: 0 0 16px var(--os-primary-glow);

  --theme-bg-gradient:
    radial-gradient(1100px 520px at 16% -10%, rgba(101, 163, 13, 0.10), transparent 60%),
    radial-gradient(900px 480px at 108% 8%, rgba(163, 230, 53, 0.09), transparent 58%);
  --theme-brand-a: #4d7c0f;
  --theme-brand-b: #65a30d;
  --theme-scrim: rgba(77, 124, 15, 0.06);
  --theme-panel-scrim: rgba(77, 124, 15, 0.04);
  --theme-scrollbar: rgba(77, 124, 15, 0.18);
  --theme-scrollbar-hover: rgba(77, 124, 15, 0.30);
  --theme-field-bg: #ffffff;
  --theme-field-border: rgba(77, 124, 15, 0.18);
  --theme-field-text: #2b3a10;
  --theme-field-muted: #5f7247;
  --theme-opt-bg: #ffffff;
  --theme-optgroup-bg: #f5fbe4;

  --dsw-alias-interactive-bg-hover: rgba(77, 124, 15, 0.06);
  --dsw-alias-label-secondary: #5f7247;
  --dsw-alias-border-l2: rgba(77, 124, 15, 0.12);
  --dsw-specific-input-major: rgba(255, 255, 255, 0.95);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(63, 98, 18, 0.15);
  --dsw-alias-scrollbar-bg-l2: rgba(77, 124, 15, 0.18);
  --dsw-alias-scrollbar-hover-l2: rgba(77, 124, 15, 0.32);
  --dsw-alias-state-business-primary: #65a30d;
  --dsw-alias-label-primary: #2b3a10;
  --dsw-alias-label-caption: #8b9a77;
  --dsw-alias-label-tertiary: #94a3b8;
  --dsw-specific-selector: rgba(77, 124, 15, 0.05);
  --dsw-alias-interactive-bg-hover-solid: rgba(77, 124, 15, 0.12);
  --dsw-alias-button-info-fill: #65a30d;
  --dsw-alias-button-info-hover: #4d7c0f;
  --dsw-alias-bg-layer-2: #ffffff;
  --dsw-alias-bg-mask-1: rgba(63, 98, 18, 0.32);
  --dsw-specific-sidebar-nav-item-hover: rgba(77, 124, 15, 0.05);
  --dsw-specific-sidebar-nav-item-active: rgba(101, 163, 13, 0.12);
}

/* =========================================================
   8.11 葡萄冰沙 Grape Sherbet（薰衣草葡萄紫）
   ========================================================= */
html[data-theme="grape"] {
  color-scheme: light;

  --os-bg-base: #f5f1fb;
  --os-bg-surface: #ffffff;
  --os-bg-card: rgba(255, 255, 255, 0.90);
  --os-bg-card-hover: rgba(248, 245, 253, 0.98);
  --os-border: rgba(109, 40, 217, 0.10);
  --os-border-light: rgba(109, 40, 217, 0.20);
  --os-border-accent: rgba(124, 58, 237, 0.35);
  --os-text-main: #31135e;
  --os-text-muted: #6b5a8a;
  --os-text-faint: #9687b3;
  --os-primary: #7c3aed;
  --os-primary-glow: rgba(124, 58, 237, 0.22);
  --os-info: #2563eb;
  --os-success: #059669;
  --os-warning: #d97706;
  --os-rose: #db2777;
  --os-purple: #8b5cf6;
  --bg-main: #ffffff;
  --bg-panel: rgba(255, 255, 255, 0.92);
  --os-shadow-card: 0 4px 18px rgba(76, 29, 149, 0.09);
  --os-shadow-glow: 0 0 16px var(--os-primary-glow);

  --theme-bg-gradient:
    radial-gradient(1100px 520px at 16% -10%, rgba(124, 58, 237, 0.09), transparent 60%),
    radial-gradient(900px 480px at 108% 8%, rgba(167, 139, 250, 0.09), transparent 58%);
  --theme-brand-a: #6d28d9;
  --theme-brand-b: #a855f7;
  --theme-scrim: rgba(76, 29, 149, 0.06);
  --theme-panel-scrim: rgba(76, 29, 149, 0.04);
  --theme-scrollbar: rgba(109, 40, 217, 0.18);
  --theme-scrollbar-hover: rgba(109, 40, 217, 0.30);
  --theme-field-bg: #ffffff;
  --theme-field-border: rgba(109, 40, 217, 0.16);
  --theme-field-text: #31135e;
  --theme-field-muted: #6b5a8a;
  --theme-opt-bg: #ffffff;
  --theme-optgroup-bg: #f5f1fb;

  --dsw-alias-interactive-bg-hover: rgba(109, 40, 217, 0.06);
  --dsw-alias-label-secondary: #6b5a8a;
  --dsw-alias-border-l2: rgba(109, 40, 217, 0.12);
  --dsw-specific-input-major: rgba(255, 255, 255, 0.95);
  --dsw-elevation-soft: 0 10px 30px -5px rgba(76, 29, 149, 0.16);
  --dsw-alias-scrollbar-bg-l2: rgba(109, 40, 217, 0.18);
  --dsw-alias-scrollbar-hover-l2: rgba(109, 40, 217, 0.32);
  --dsw-alias-state-business-primary: #7c3aed;
  --dsw-alias-label-primary: #31135e;
  --dsw-alias-label-caption: #9687b3;
  --dsw-alias-label-tertiary: #94a3b8;
  --dsw-specific-selector: rgba(109, 40, 217, 0.05);
  --dsw-alias-interactive-bg-hover-solid: rgba(109, 40, 217, 0.12);
  --dsw-alias-button-info-fill: #7c3aed;
  --dsw-alias-button-info-hover: #6d28d9;
  --dsw-alias-bg-layer-2: #ffffff;
  --dsw-alias-bg-mask-1: rgba(76, 29, 149, 0.32);
  --dsw-specific-sidebar-nav-item-hover: rgba(109, 40, 217, 0.05);
  --dsw-specific-sidebar-nav-item-active: rgba(124, 58, 237, 0.12);
}

/* 亮色家族通用：原生控件颜色方案（覆盖 design-system 的强制暗色） */
html[data-theme-family="light"] select,
html[data-theme-family="light"] option,
html[data-theme-family="light"] optgroup {
  color-scheme: light !important;
}

/* 亮色家族通用：滚动条拇指跟随钩子（覆盖 design-system 默认） */
html[data-theme-family="light"] ::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar);
}
html[data-theme-family="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-hover);
}

/* 亮色重映射引擎覆盖层（运行时由 theme-center.js 注入并开关） */
#os-light-overrides {
  min-width: 0;
}

/* 8.9b @Mention 专员与会话选择器主题全景协同 */
html[data-theme] .mention-popup {
  background: var(--dsw-specific-input-major);
  border-color: var(--os-border-light);
  box-shadow: 0 18px 46px -6px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--os-border), 0 0 24px -4px var(--os-primary-glow);
}
html[data-theme-family="light"] .mention-popup {
  background: var(--dsw-specific-input-major, rgba(255, 255, 255, 0.96));
  border-color: var(--os-border-light, rgba(15, 23, 42, 0.16));
  box-shadow: 0 14px 38px -6px rgba(15, 23, 42, 0.14), 0 0 0 1px var(--os-border, rgba(15, 23, 42, 0.08)), 0 0 18px -4px var(--os-primary-glow);
}
html[data-theme-family="light"] .mention-tab:not(.active) {
  color: var(--os-text-muted);
}
html[data-theme-family="light"] .mention-tab.active {
  color: var(--os-primary) !important;
  background: color-mix(in srgb, var(--os-primary) 16%, #ffffff) !important;
}
html[data-theme-family="light"] .mention-tabs-track {
  background: var(--os-border, rgba(15, 23, 42, 0.06));
}
html[data-theme-family="light"] .mention-popup-footer {
  background: var(--dsw-specific-selector, rgba(15, 23, 42, 0.04));
  border-top-color: var(--os-border, rgba(15, 23, 42, 0.08));
}

/* =========================================================
   8.9c 亮色家族通用：过滤条与按钮严禁白字设计规范
   用户明确要求：dept-filter-bar，os-btn os-btn-primary 等等这种浅色主题下不要白色字体。
   浅色模式下全面采用高可读性主题主色字体及轻盈通透的微饱和强调底色，
   彻底杜绝由于底色泛浅导致白色字体漂浮失明的问题。
   ========================================================= */

/* 1. 部门/模态/来源过滤药丸导航条 (dept-filter-bar / dept-pill) */
html[data-theme-family="light"] .dept-filter-bar .dept-pill,
html[data-theme-family="light"] .dept-pill {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: var(--os-text-muted, #475569) !important;
  box-shadow: none !important;
}
html[data-theme-family="light"] .dept-filter-bar .dept-pill:hover,
html[data-theme-family="light"] .dept-pill:hover {
  background: rgba(15, 23, 42, 0.09) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  color: var(--os-text-main, #0f172a) !important;
}
html[data-theme-family="light"] .dept-filter-bar .dept-pill.active,
html[data-theme-family="light"] .dept-pill.active {
  background: color-mix(in srgb, var(--os-primary) 16%, #ffffff) !important;
  color: var(--os-primary) !important;
  border-color: color-mix(in srgb, var(--os-primary) 45%, transparent) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme-family="light"] .dept-filter-bar .dept-pill.active *,
html[data-theme-family="light"] .dept-pill.active * {
  color: var(--os-primary) !important;
}
html[data-theme-family="light"] .dept-filter-bar .dept-pill.active:hover,
html[data-theme-family="light"] .dept-pill.active:hover {
  background: color-mix(in srgb, var(--os-primary) 24%, #ffffff) !important;
  border-color: var(--os-primary) !important;
  color: var(--os-primary) !important;
}

/* 2. 主要操作按钮 (os-btn-primary / btn-primary / dsh-btn-primary 等) */
html[data-theme-family="light"] .os-btn.os-btn-primary,
html[data-theme-family="light"] .os-btn-primary,
html[data-theme-family="light"] .btn-primary,
html[data-theme-family="light"] .dsh-btn-primary,
html[data-theme-family="light"] .asset-btn-primary,
html[data-theme-family="light"] .asset-btn-action.asset-btn-action-primary,
html[data-theme-family="light"] .welcome-scaffold-btn,
html[data-theme-family="light"] .team-board-btn.primary,
html[data-theme-family="light"] .task-action-btn.primary,
html[data-theme-family="light"] .notif-footer-btn.primary,
html[data-theme-family="light"] .hub-auth-submit-btn,
html[data-theme-family="light"] button.os-btn-primary,
html[data-theme-family="light"] button.btn-primary {
  background: color-mix(in srgb, var(--os-primary) 16%, #ffffff) !important;
  color: var(--os-primary) !important;
  border: 1px solid color-mix(in srgb, var(--os-primary) 40%, transparent) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme-family="light"] .os-btn.os-btn-primary *,
html[data-theme-family="light"] .os-btn-primary *,
html[data-theme-family="light"] .btn-primary *,
html[data-theme-family="light"] .dsh-btn-primary *,
html[data-theme-family="light"] .welcome-scaffold-btn * {
  color: inherit !important;
}
html[data-theme-family="light"] .os-btn.os-btn-primary:hover,
html[data-theme-family="light"] .os-btn-primary:hover,
html[data-theme-family="light"] .btn-primary:hover,
html[data-theme-family="light"] .dsh-btn-primary:hover,
html[data-theme-family="light"] .asset-btn-primary:hover,
html[data-theme-family="light"] .asset-btn-action.asset-btn-action-primary:hover,
html[data-theme-family="light"] .welcome-scaffold-btn:hover,
html[data-theme-family="light"] .team-board-btn.primary:hover,
html[data-theme-family="light"] .task-action-btn.primary:hover,
html[data-theme-family="light"] .notif-footer-btn.primary:hover,
html[data-theme-family="light"] .hub-auth-submit-btn:hover,
html[data-theme-family="light"] button.os-btn-primary:hover,
html[data-theme-family="light"] button.btn-primary:hover {
  background: color-mix(in srgb, var(--os-primary) 26%, #ffffff) !important;
  border-color: var(--os-primary) !important;
  color: var(--os-primary) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}
html[data-theme-family="light"] .os-btn.os-btn-primary:active,
html[data-theme-family="light"] .os-btn-primary:active,
html[data-theme-family="light"] .btn-primary:active,
html[data-theme-family="light"] .dsh-btn-primary:active,
html[data-theme-family="light"] .welcome-scaffold-btn:active,
html[data-theme-family="light"] button.os-btn-primary:active,
html[data-theme-family="light"] button.btn-primary:active {
  background: color-mix(in srgb, var(--os-primary) 34%, #ffffff) !important;
  color: var(--os-primary) !important;
  transform: translateY(1px);
}

/* 3. 次要按钮与危险按钮适配 */
html[data-theme-family="light"] .os-btn-secondary,
html[data-theme-family="light"] .btn-secondary {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: var(--os-text-main, #0f172a) !important;
}
html[data-theme-family="light"] .os-btn-secondary:hover,
html[data-theme-family="light"] .btn-secondary:hover {
  background: rgba(15, 23, 42, 0.09) !important;
  border-color: rgba(15, 23, 42, 0.24) !important;
  color: var(--os-text-main, #0f172a) !important;
}
html[data-theme-family="light"] .os-btn-danger,
html[data-theme-family="light"] .btn-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
html[data-theme-family="light"] .os-btn-danger:hover,
html[data-theme-family="light"] .btn-danger:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #b91c1c !important;
  border-color: #ef4444 !important;
}

/* 4. 过滤芯片与模式标签激活项 (chips / subtabs / tabs) - 浅色模式严禁白字，自适应主题主色高对比度 */
html[data-theme-family="light"] .tabs-bar .tab.active,
html[data-theme-family="light"] .tab.active,
html[data-theme-family="light"] .tab-btn.active,
html[data-theme-family="light"] .nav-tab.active,
html[data-theme-family="light"] .subtab.active,
html[data-theme-family="light"] .slash-tab.active,
html[data-theme-family="light"] .notif-tab-btn.active,
html[data-theme-family="light"] .omni-search-scope-tab.active,
html[data-theme-family="light"] .board-mobile-tab.active,
html[data-theme-family="light"] .send-context-tab.active,
html[data-theme-family="light"] .org-company-tab.active,
html[data-theme-family="light"] .asset-mode-btn.active,
html[data-theme-family="light"] .config-subtab-btn.active,
html[data-theme-family="light"] .ai-dir-tab-btn.active,
html[data-theme-family="light"] .notif-filter-chip.active,
html[data-theme-family="light"] .sync-filter-chip.active,
html[data-theme-family="light"] .filter-chip.active,
html[data-theme-family="light"] .session-active-pill,
html[data-theme-family="light"] .drawer-mem-view-btn.active,
html[data-theme-family="light"] .sync-tab-btn.active,
html[data-theme-family="light"] .dsh-call-link-tab.active,
html[data-theme-family="light"] .mode-btn.active {
  background: color-mix(in srgb, var(--os-primary) 16%, #ffffff) !important;
  color: var(--os-primary) !important;
  border-color: color-mix(in srgb, var(--os-primary) 45%, transparent) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme-family="light"] .tabs-bar .tab.active *,
html[data-theme-family="light"] .tab.active *,
html[data-theme-family="light"] .tab-btn.active *,
html[data-theme-family="light"] .nav-tab.active *,
html[data-theme-family="light"] .subtab.active *,
html[data-theme-family="light"] .slash-tab.active *,
html[data-theme-family="light"] .notif-tab-btn.active *,
html[data-theme-family="light"] .omni-search-scope-tab.active *,
html[data-theme-family="light"] .board-mobile-tab.active *,
html[data-theme-family="light"] .send-context-tab.active *,
html[data-theme-family="light"] .org-company-tab.active *,
html[data-theme-family="light"] .asset-mode-btn.active *,
html[data-theme-family="light"] .config-subtab-btn.active *,
html[data-theme-family="light"] .ai-dir-tab-btn.active *,
html[data-theme-family="light"] .notif-filter-chip.active *,
html[data-theme-family="light"] .sync-filter-chip.active *,
html[data-theme-family="light"] .filter-chip.active *,
html[data-theme-family="light"] .mode-btn.active * {
  color: inherit !important;
}

/* 4b. 顶部微应用任务标签栏 (tabs-bar / tab) 浅色主题高可读性规范 */
html[data-theme-family="light"] .tabs-bar .tab:not(.active),
html[data-theme-family="light"] .tab:not(.active) {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: var(--os-text-muted, #475569) !important;
}
html[data-theme-family="light"] .tabs-bar .tab:not(.active):hover,
html[data-theme-family="light"] .tab:not(.active):hover {
  background: rgba(15, 23, 42, 0.09) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  color: var(--os-text-main, #0f172a) !important;
}
html[data-theme-family="light"] .tabs-bar .tab.active,
html[data-theme-family="light"] .tab.active {
  background: color-mix(in srgb, var(--os-primary) 16%, #ffffff) !important;
  color: var(--os-primary) !important;
  border: 1px solid color-mix(in srgb, var(--os-primary) 45%, transparent) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
  font-weight: 600 !important;
}
html[data-theme-family="light"] .tabs-bar .tab .tab-close,
html[data-theme-family="light"] .tab .tab-close {
  color: inherit !important;
  opacity: 0.65;
}
html[data-theme-family="light"] .tabs-bar .tab .tab-close:hover,
html[data-theme-family="light"] .tab .tab-close:hover {
  color: #dc2626 !important;
  opacity: 1;
}
html[data-theme-family="light"] .tab-close-all-btn {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #dc2626 !important;
}
html[data-theme-family="light"] .tab-close-all-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

/* 4c. 移动端微应用标签卡片与浮窗 (mobile tab card / tab-card-item) 浅色主题自适应 */
html[data-theme-family="light"] .tab-card-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
html[data-theme-family="light"] .tab-card-item:hover {
  border-color: color-mix(in srgb, var(--os-primary) 40%, transparent) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1) !important;
}
html[data-theme-family="light"] .tab-card-item.active {
  border-color: var(--os-primary) !important;
  background: color-mix(in srgb, var(--os-primary) 10%, #ffffff) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--os-primary) 20%, transparent) !important;
}
html[data-theme-family="light"] .tab-card-title {
  color: var(--os-text-main, #0f172a) !important;
}
html[data-theme-family="light"] .tab-card-dept {
  color: var(--os-primary) !important;
}
html[data-theme-family="light"] .tab-card-desc {
  color: var(--os-text-muted, #64748b) !important;
}
html[data-theme-family="light"] .tab-card-status-badge.active {
  color: var(--os-primary) !important;
  background: color-mix(in srgb, var(--os-primary) 15%, transparent) !important;
}
html[data-theme-family="light"] .tab-card-footer {
  border-top-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-theme-family="light"] .tab-card-tap-hint {
  color: var(--os-text-muted, #94a3b8) !important;
}

/* 4d. 标签页右键上下文菜单 (tab-context-menu) 浅色主题高保真自适应 */
html[data-theme-family="light"] .tab-context-menu {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
}
html[data-theme-family="light"] .tab-context-item {
  color: var(--os-text-main, #0f172a) !important;
}
html[data-theme-family="light"] .tab-context-item:hover {
  background: color-mix(in srgb, var(--os-primary) 14%, transparent) !important;
  color: var(--os-primary) !important;
}
html[data-theme-family="light"] .tab-context-item.danger {
  color: #dc2626 !important;
}
html[data-theme-family="light"] .tab-context-item.danger:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #b91c1c !important;
}

/* 4e. 组织与电子表格标签 (org-company-tab / sheet-tab) 浅色高对比度 */
html[data-theme-family="light"] .org-company-tab:not(.active) {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: var(--os-text-muted, #475569) !important;
}
html[data-theme-family="light"] .org-company-tab.active {
  background: color-mix(in srgb, var(--comp-color, var(--os-primary)) 14%, #ffffff) !important;
  border-color: var(--comp-color, var(--os-primary)) !important;
  color: var(--os-text-main, #0f172a) !important;
}
html[data-theme-family="light"] .org-company-tab.active .os-badge {
  background: color-mix(in srgb, var(--comp-color, var(--os-primary)) 20%, #ffffff) !important;
  color: var(--comp-color, var(--os-primary)) !important;
}
html[data-theme-family="light"] .sheet-tab:not(.active) {
  background: rgba(15, 23, 42, 0.04) !important;
  color: var(--os-text-muted, #64748b) !important;
}
html[data-theme-family="light"] .sheet-tab.active {
  background: #ffffff !important;
  color: var(--os-primary, #059669) !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
  border-bottom-color: #ffffff !important;
}


/* 5. 频道花名册摘要与激活项 (roster) 浅色主题高可读性规范 */
html[data-theme-family="light"] .roster-preview,
html[data-theme-family="light"] .roster-item.active .roster-preview {
  color: var(--os-text-muted, #475569) !important;
}
html[data-theme-family="light"] .roster-item.active .roster-title {
  color: var(--os-primary, #4f46e5) !important;
}
html[data-theme-family="light"] .roster-item.active {
  background: color-mix(in srgb, var(--os-primary) 12%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--os-primary) 32%, transparent) !important;
}

/* 6. 会话未读分界线 (comms-unread-divider) 浅色主题自适应 */
html[data-theme-family="light"] .comms-unread-divider .comms-unread-pill {
  background: color-mix(in srgb, var(--os-primary) 12%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--os-primary) 38%, transparent) !important;
  color: var(--os-primary, #4f46e5) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme-family="light"] .comms-unread-divider .comms-unread-line {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--os-primary) 32%, transparent), transparent) !important;
}

/* =========================================================
   9. 主题中心画廊 UI（.tc-* 组件，跟随当前主题令牌自动适配）
   ========================================================= */
.tc-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--os-border-accent);
  background: linear-gradient(135deg, var(--os-primary-glow), rgba(15, 23, 42, 0.35));
}

.tc-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--os-text-main);
}

.tc-head-sub {
  font-size: 11.5px;
  color: var(--os-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.tc-current-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--os-primary);
  background: var(--os-primary-glow);
  border: 1px solid var(--os-border-accent);
  white-space: nowrap;
}

.tc-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tc-chip {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--os-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--os-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.tc-chip:hover {
  color: var(--os-text-main);
  border-color: var(--os-border-light);
}

.tc-chip.active {
  background: var(--os-primary-glow);
  border-color: var(--os-border-accent);
  color: var(--os-primary);
  font-weight: 600;
}

.tc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.tc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--os-border);
  background: var(--os-bg-card);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.tc-card:hover {
  transform: translateY(-2px);
  border-color: var(--os-border-light);
}

.tc-card.active {
  border-color: var(--os-primary);
  box-shadow: 0 0 0 1px var(--os-primary), 0 8px 26px -10px var(--os-primary-glow);
}

.tc-card.active::after {
  content: '使用中';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--os-primary);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 10px var(--os-primary-glow);
}

.tc-preview {
  height: 108px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.tc-prev-top {
  height: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  flex-shrink: 0;
}

.tc-prev-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.tc-prev-body {
  flex: 1;
  display: flex;
  gap: 6px;
  padding: 7px 8px;
  align-items: stretch;
}

.tc-prev-side {
  width: 30px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 4px;
}

.tc-prev-side i {
  display: block;
  height: 4px;
  border-radius: 2px;
  opacity: 0.85;
}

.tc-prev-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.tc-prev-card {
  border-radius: 6px;
  padding: 5px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tc-prev-card b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tc-prev-card span {
  height: 4px;
  border-radius: 2px;
  flex: 1;
  opacity: 0.75;
}

.tc-prev-cta {
  height: 12px;
  width: 46%;
  border-radius: 6px;
  margin-top: auto;
}

.tc-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tc-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--os-text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tc-name .tc-en {
  font-size: 10.5px;
  color: var(--os-text-faint);
  font-weight: 500;
}

.tc-desc {
  font-size: 11px;
  color: var(--os-text-muted);
  line-height: 1.5;
  min-height: 32px;
}

.tc-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.tc-tag {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--os-border);
  color: var(--os-text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.tc-swatches {
  display: flex;
  gap: 4px;
}

.tc-swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.tc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.tc-apply {
  flex: 1;
  text-align: center;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--os-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-main);
  cursor: pointer;
  transition: all 0.15s;
}

.tc-apply:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--os-border-light);
}

.tc-apply.tc-applied {
  background: var(--os-primary);
  border-color: var(--os-primary);
  color: #fff;
  box-shadow: 0 0 12px var(--os-primary-glow);
  cursor: default;
}

.tc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px dashed var(--os-border);
  font-size: 11.5px;
  color: var(--os-text-muted);
  line-height: 1.6;
}

.tc-reset {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--os-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--os-text-main);
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s;
}

.tc-reset:hover {
  border-color: var(--os-border-light);
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .tc-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .tc-head {
    padding: 12px 14px;
  }
  .tc-preview {
    height: 92px;
  }
}

/* =========================================================
   🔔 全域统一中枢消息通知气泡 (Unified OS Toast System)
   ========================================================= */
.os-toast-container {
  position: fixed;
  top: calc(var(--topbar-height, 52px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: 100%;
  max-width: min(520px, 94vw);
  box-sizing: border-box;
}

.os-toast-bubble {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  box-sizing: border-box;
  user-select: none;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  font-family: var(--os-font-sans, system-ui, -apple-system, sans-serif);
  
  /* 默认深色主题：高不透明度阻断背景杂光 */
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.75), 0 0 20px rgba(99, 102, 241, 0.25);
}

.os-toast-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.os-toast-bubble.hiding {
  opacity: 0;
  transform: translateY(-12px) scale(0.95);
  pointer-events: none;
}

/* 两种形态：纯文本微胶囊 vs 带动作/多行卡片 (彻底杜绝畸变) */
.os-toast-bubble.is-pill {
  border-radius: 9999px;
  padding: 8px 18px;
}

.os-toast-bubble.is-card {
  border-radius: 12px;
  padding: 10px 14px;
  align-items: center;
}

/* 结构容器：图标 + 文本流组合 */
.os-toast-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

/* 图标区：严格防止挤压 */
.os-toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
}

/* 文本主体：流式弹性自适应，绝不截断变形 */
.os-toast-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.os-toast-title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.os-toast-msg {
  font-size: 12px;
  line-height: 1.45;
  color: #cbd5e1;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 动作区：严格防止挤压变形 */
.os-toast-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.os-toast-btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  line-height: 1.3;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.os-toast-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.os-toast-btn-primary {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  border: 1px solid #818cf8 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.os-toast-btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.6);
}

.os-toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}

.os-toast-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* 语义类型样式 (边框色、光晕、按钮微调) */
.os-toast-type-info {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.75), 0 0 20px rgba(99, 102, 241, 0.25);
}
.os-toast-type-success {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.75), 0 0 20px rgba(16, 185, 129, 0.25);
}
.os-toast-type-success .os-toast-btn-primary {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}
.os-toast-type-warning {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.75), 0 0 20px rgba(245, 158, 11, 0.25);
}
.os-toast-type-warning .os-toast-btn-primary {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.os-toast-type-error {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.75), 0 0 20px rgba(239, 68, 68, 0.25);
}
.os-toast-type-error .os-toast-btn-primary {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: #f87171 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* =========================================================
   🎨 浅色主题家族自适应 (html[data-theme-family="light"])
   ========================================================= */
html[data-theme-family="light"] .os-toast-bubble {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0f172a;
  box-shadow: 0 14px 35px -5px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

html[data-theme-family="light"] .os-toast-title {
  color: #0f172a;
}

html[data-theme-family="light"] .os-toast-msg {
  color: #475569;
}

html[data-theme-family="light"] .os-toast-close {
  color: #64748b;
}

html[data-theme-family="light"] .os-toast-close:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

html[data-theme-family="light"] .os-toast-btn:not(.os-toast-btn-primary) {
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

html[data-theme-family="light"] .os-toast-btn:not(.os-toast-btn-primary):hover {
  background: rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(15, 23, 42, 0.28) !important;
}

html[data-theme-family="light"] .os-toast-btn.os-toast-btn-primary,
html[data-theme-family="light"] .os-toast-btn-primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  border: 1px solid #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

html[data-theme-family="light"] .os-toast-type-info {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 14px 35px -5px rgba(99, 102, 241, 0.16), 0 0 0 1px rgba(99, 102, 241, 0.2);
}
html[data-theme-family="light"] .os-toast-type-success {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 14px 35px -5px rgba(16, 185, 129, 0.16), 0 0 0 1px rgba(16, 185, 129, 0.2);
}
html[data-theme-family="light"] .os-toast-type-success .os-toast-btn-primary {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}
html[data-theme-family="light"] .os-toast-type-warning {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 14px 35px -5px rgba(245, 158, 11, 0.16), 0 0 0 1px rgba(245, 158, 11, 0.2);
}
html[data-theme-family="light"] .os-toast-type-warning .os-toast-btn-primary {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  border-color: #d97706 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}
html[data-theme-family="light"] .os-toast-type-error {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 14px 35px -5px rgba(239, 68, 68, 0.16), 0 0 0 1px rgba(239, 68, 68, 0.2);
}
html[data-theme-family="light"] .os-toast-type-error .os-toast-btn-primary {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

/* 移动端抗畸变自适应排版 */
@media (max-width: 480px) {
  .os-toast-container {
    top: calc(var(--topbar-height, 48px) + 8px);
    max-width: 94vw;
  }
  .os-toast-bubble.is-card {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 8px;
  }
  .os-toast-bubble.is-card .os-toast-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  html[data-theme-family="light"] .os-toast-bubble.is-card .os-toast-actions {
    border-top-color: rgba(15, 23, 42, 0.08);
  }
}