/* ═══════════════════════════════════════════════════════════════════ WorkBuddy 数码印刷平台 · 平台皮肤令牌标准（ADR-045，v4.54） ───────────────────────────────────────────────────────────────── 用途：全平台唯一皮肤事实源。所有模块（含未来第三方模块）的样式只许引用 var(--wb-*)，禁止写死颜色值。接入方式： · 平台内模块：（配合各模块已有的主题引导脚本：读 wb-theme + 监听 __wbTheme 广播，把 data-theme 写到上，本文件按属性切换令牌值） · :root 内置兜底默认值（= 星刃白瓷暗色）——模块脱离平台独立打开时也自动获得合理配色，不会裸奔。新增皮肤：只需在文件末尾追加一个 [data-theme="xxx"] 令牌块（~25 行），并在平台皮肤注册表登记；所有模块零改动。布局刻度（ADR-059，v4.74）：本文件同时是全平台唯一的尺寸事实源—— 间距 --wb-sp-*（4px 栅格）/ 字号 --wb-fs-*（6 级）/ 控件高度 --wb-h-*（3 级）。样式写尺寸必须引用令牌，禁止裸 px，由 test/ui-lint.js 门禁拦截。画布铁律：--wb-paper 恒为纯白 #fff（印刷品底色，任何皮肤不得修改；测色/导出链路亦恒 #fff）。画布工作区底色 --wb-canvas（v4.54b）：01/02 编辑画布的衬托底，恒为固定柔和浅灰 #f4f6fb，不随主题变化（用户拍板：灰度以原 02 预览画布为准，暗色皮肤下画布仍保持浅灰衬托白纸）；仅用于屏幕显示层，导出/测色不使用。令牌补全（01 号方案 v1.2 · B0-1，共 39 个新令牌 / 6 组）： G1 语义色 3：info / info-soft / grad-accent —— 随主题取值，见各主题块 G2 线·填充 6：line-1/2/3、fill-1/2/3 —— 由 --wb-text 派生，一套通吃 12 主题 G3 宽度 11：w-xs~xl + w-label/sidebar/panel/dialog-sm|md|lg G4 层级 8：z-base / raised / sticky / dropdown / overlay / modal / popover / toast G5 栅格 3：grid-cols / grid-gap / grid-gap-sm（断点 1180/780 是文档常量，不做令牌） G6 刻度补缺 8：fs-2xl(18) / fs-3xl(22) / h-touch / radius-lg / lh-tight / lh-loose / icon-lg / sp-7 【选型决策树】不知道该用哪个令牌时，按这 3 步选（补可发现性，见 01 号 §六）：选间距 → 4px 栅格，先试 sp-2(8) / sp-3(12) / sp-4(16)，不够再看 sp-5/6/7/8 选宽度 → 数值 w-xs(56)，短文本 w-sm(88)，下拉 w-md(140)，长文本 w-lg(220)，文本域 w-xl(340) 选层级 → 抬起 z-raised，吸顶 z-sticky，下拉 z-dropdown，遮罩 z-overlay，弹层 z-modal，浮层 z-popover，提示 z-toast ═══════════════════════════════════════════════════════════════════ */ /* ── 兜底默认值（星刃白瓷 · 暗色）── 缺失 data-theme 时生效 */ :root { color-scheme: dark; /* 表面 */ --wb-bg: #0b0d12; /* 页面底色 */ --wb-bg-2: #0f1219; /* 页面底色渐变收尾 */ --wb-panel: rgba(255, 255, 255, .055); /* 玻璃卡片/面板 */ --wb-panel-solid: #141820; /* 实底面板（下拉/抽屉/弹层） */ /* ⚠️ DEPRECATED（B0，2026-09-08）：新代码请用 var(--wb-line-2)。保留原字面量不变：B0 定位是「补令牌、立标准」，不做视觉变更； border / hover 与 line-2 / fill-1 **不是别名关系**（取值并不等价， light 下尤其明显：8% vs 14%，实测差约 11/255），统一收敛归 B1~B5 有验收地做。 */ --wb-border: rgba(255, 255, 255, .12); /* 边框/分隔线 */ /* 文字三级 */ --wb-text: #f0f4f8; /* 主文字 */ --wb-text-2: #a9b4c8; /* 次级文字 */ --wb-text-3: #6b7890; /* 弱化文字/占位符 */ /* 强调色 */ --wb-accent: #38bdf8; /* 主强调 */ --wb-accent-2: #0ea5e9; /* 深一档强调（渐变收尾/hover） */ --wb-accent-soft: rgba(56, 189, 248, .16); /* 强调色浅底（选中态/徽标底） */ --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ /* 交互态 */ /* ⚠️ DEPRECATED（B0，2026-09-08）：新代码请用 var(--wb-fill-1)。保留原字面量，理由同上。 */ --wb-hover: rgba(255, 255, 255, .07); /* 行/按钮 hover 底色 */ --wb-active: #38bdf8; /* 激活态 */ /* 语义色（ok 成功 / danger 危险删除 / warn 警告 / info 信息提示） */ --wb-ok: #4ade80; --wb-ok-soft: rgba(74, 222, 128, .14); --wb-danger: #f87171; --wb-danger-soft: rgba(248, 113, 113, .14); --wb-warn: #fbbf24; --wb-warn-soft: rgba(251, 191, 36, .14); --wb-info: #818cf8; /* 信息 / 提示 / 进行中态（靛蓝，与天蓝 accent 相隔 40° 色相） */ --wb-info-soft: rgba(129, 140, 248, .16); /* 信息态浅底（.tag.info 底 / 提示条底 / 进行中行底） */ /* 强调渐变（G1-A2）：主 CTA 底、选中态渐变条、品牌色块。暗色刻意沿用既有 #5ee7ff → #2ab8e8，使既有 10 处使用点切换后「无差异」。 */ --wb-grad-accent: linear-gradient(135deg, #5ee7ff, #2ab8e8); /* 表单控件底色（输入框/下拉；比面板实底略亮便于识别） */ --wb-input-bg: #1a2338; /* 画布纸面（铁律：恒纯白，任何皮肤不得改） */ --wb-paper: #ffffff; /* 画布工作区底色（v4.54b：恒固定浅灰，不随主题） */ --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); /* 形状与投影 */ --wb-radius: 14px; --wb-radius-sm: 8px; --wb-radius-card: 10px; /* 卡片/面板圆角（ADR-059 刻度） */ --wb-radius-ctrl: 6px; /* 控件圆角：按钮/输入框（ADR-059 刻度） */ --wb-radius-lg: 18px; /* 大圆角：抽屉 / 大预览弹层 / 欢迎卡片（G6 补缺） */ --wb-shadow: 0 10px 30px rgba(0, 0, 0, .45); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .65); --wb-glass-blur: 20px; } /* ── 画布棋盘格衬托底（B5-b 排除 14 · ROOT_ONLY 画布铁律族）────────── 画布透明区的棋盘格纹（background-image 消费），恒值不随主题—— 与 --wb-canvas 同属「画布铁律」：同时对比效应会改变人眼对印刷色的判断，故棋盘格底不参与主题切换。仅在 :root 定义一次（ROOT_ONLY 族）。 ───────────────────────────────────────────────────────────────── */ :root { --wb-canvas-grid: #eee; } /* ── 线 / 填充强度梯度（令牌补全 G2，01 号方案 v1.2 · B0-1）────────── 全部派生自 --wb-text：暗色主题下 text 近白、浅色主题下 text 近黑，自动得到「暗底上的白线 / 浅底上的黑线」。一套定义全 12 主题通用，避免 6 × 12 = 72 个硬编码值的漂移风险（01 号 §1.3 的头号风险）。 🔴 @supports 兜底是【强制】而非建议，请勿删除： color-mix() 需 Chrome ≥111 / Safari ≥16.2 / Firefox ≥113。车间机器已普查达标，但客户预览页、内嵌 WebView、售后古董浏览器这些场景 **普查不到**；一旦失效，6 个 line/fill 令牌会全部变透明 → 边框与填充整体消失，属全平台级视觉崩塌。12 个硬编码值换「不会全平台崩」。 ───────────────────────────────────────────────────────────────── */ :root { --wb-line-1: color-mix(in srgb, var(--wb-text) 8%, transparent); /* 最弱：表格内行线、列表项分隔 */ --wb-line-2: color-mix(in srgb, var(--wb-text) 14%, transparent); /* 标准：卡片边框、控件边框 */ --wb-line-3: color-mix(in srgb, var(--wb-text) 24%, transparent); /* 强：聚焦容器、拖拽落区、激活边框 */ --wb-fill-1: color-mix(in srgb, var(--wb-text) 5%, transparent); /* 悬浮底 hover */ --wb-fill-2: color-mix(in srgb, var(--wb-text) 9%, transparent); /* 选中底 selected / on */ --wb-fill-3: color-mix(in srgb, var(--wb-text) 14%, transparent); /* 按压底 active / pressed */ } /* ⚠️ 本组与旧令牌 **不是别名关系**（2026-09-08 拍板，B0 零视觉变更）： · --wb-border / --wb-hover 保留**原字面量**，取值不改为 var(--wb-line-2 / --wb-fill-1)。 · 原因：两者取值并不等价 —— 例如 light 主题下 border 是 rgba(2,8,26,.08)，而 line-2 是 text(#1f2937) 的 14%，叠加到白底后实测相差约 11/255 （#EBEBED → #E0E1E3，边框明显变深）。dark 下差异虽只有 3~5/255，但 B0 的定位是「补令牌、立标准」，任何视觉变更都应在 B1~B5 带验收地做。 · 旧令牌已标 DEPRECATED，新代码一律用 --wb-line-* / --wb-fill-*；「把旧引用批量换成新令牌」是 B1~B5 债务收敛批次的事，不在 B0。 */ /* 兜底块见文件末尾（必须排在所有 [data-theme] 块之后：否则 test-shell.js 按「首个 data-theme="dark" 选择器」取主题块时，会取到兜底块而非真主题块） */ /* ── 布局刻度令牌（ADR-059，v4.74）───────────────────────────────── 与皮肤无关：间距 / 字号 / 控件高度 / 宽度 / 层级 / 栅格 / 行高是布局常量，不随主题切换，故只在此处定义一次，不放进任何 [data-theme] 块。铁律：任何模块写样式时，尺寸类取值必须引用本组令牌，禁止直接写裸 px（test/ui-lint.js 会拦截）。颜色类取值必须引用上面的 --wb-* 皮肤令牌。 ───────────────────────────────────────────────────────────────── */ :root { /* 间距：4px 栅格（sp-N = N×4px） */ --wb-sp-1: 4px; /* 徽标内边距、图标间隙 */ --wb-sp-2: 8px; /* 按钮组间隙、紧凑内边距 */ --wb-sp-3: 12px; /* 标准按钮左右内边距、面板内边距 */ --wb-sp-4: 16px; /* 区块间距 */ --wb-sp-5: 20px; /* 卡片内边距 */ --wb-sp-6: 24px; /* 大区块间距 */ --wb-sp-7: 28px; /* 中等容器留白（G6 补缺后 sp 刻度 1~8 连续） */ --wb-sp-8: 32px; /* 页面级留白 */ /* 字号：7 级（覆盖全平台既有 11 种散值，收敛目标） ⚠️ --wb-fs-2xl 由 22px 改为 18px：原 22px 全平台引用数为 0（重命名零风险）， 18px 是 ui-lint FS_SCALE 已允许但令牌表缺失的档位；22px 由 --wb-fs-3xl 承接 */ --wb-fs-xs: 11px; /* 角标 / 徽标 / 辅助说明 */ --wb-fs-sm: 12px; /* 正文 / 按钮（平台默认） */ --wb-fs-md: 13px; /* 小标题 / 强调文本 */ --wb-fs-lg: 14px; /* 区块标题 / 工具条标题 */ --wb-fs-xl: 16px; /* 页面主标题 */ --wb-fs-2xl: 18px; /* 区块大标题 / 空状态标题 */ --wb-fs-3xl: 22px; /* 数字指标 / 统计值（KPI 大数） */ /* 控件高度：4 级（同一行内的按钮与输入框必须同高） */ --wb-h-sm: 24px; /* 紧凑按钮：表格行内、素材卡片操作行 */ --wb-h-md: 30px; /* 标准按钮 / 输入框（平台默认密度，STD-U09 锁定） */ --wb-h-lg: 36px; /* 主操作按钮（如「生成」「保存」） */ --wb-h-tag: 18px; /* 徽标 / 状态标签 */ --wb-h-touch: 40px;/* 车间触屏 / 戴手套主操作（工业触屏惯例 40~48px） */ /* 图标尺寸 */ --wb-icon-sm: 16px;/* 按钮内嵌图标 */ --wb-icon-md: 20px;/* 独立图标按钮 */ --wb-icon-lg: 28px;/* 空状态 / 错误页大图标 */ /* 行高 */ --wb-lh: 1.5; /* 正文（默认） */ --wb-lh-tight: 1.25; /* 标题 / KPI 数字 / 紧凑表格行 */ --wb-lh-loose: 1.75; /* 工艺说明 / 帮助文本 / 弹层描述 */ /* ── 宽度（G3：5 通用档 + 6 语义宽）──────────────────────────── 通用档按全平台实测频次定档，散值就近归并（视觉差异 < 10%）；语义宽用「用途」命名而非档位，因为它们是布局常量。 */ --wb-w-xs: 56px; /* 数值输入（长 / 宽 / 高 / 出血）——width:56px 实测 16 次，最高频 */ --wb-w-sm: 88px; /* 短文本输入（批号 / 规格 / 色号）——归并 60/62/64/70/72/80/86 */ --wb-w-md: 140px; /* 标准下拉（材质 / 工艺 / 客户） */ --wb-w-lg: 220px; /* 长文本输入（文件路径 / 备注）——归并 200/220 */ --wb-w-xl: 340px; /* 多行文本域 / 说明框 */ --wb-w-label: 72px; /* 表单标签列宽（图稿工作台参数表单左标签列） */ --wb-w-sidebar: 240px; /* 左侧导航 / 参数面板 */ --wb-w-panel: 320px; /* 右侧属性面板 / 图层面板 */ --wb-w-dialog-sm: 420px; /* 小弹层：确认框、单输入弹层 */ --wb-w-dialog-md: 560px; /* 标准弹层：设置、批量配置 */ --wb-w-dialog-lg: 760px; /* 大弹层：图稿预览、首件对比 */ /* ── 层级 z-index（G4：8 级，语义命名）────────────────────────── 层级是序数而非度量，xs/sm/md/lg 无语义，故用用途命名；档位间隔留足中间值，临时需插入时写 calc(var(--wb-z-modal) + 10)，杜绝裸数。 */ --wb-z-base: 0; /* 常规流（默认值，可省略） */ --wb-z-raised: 10; /* 抬起层：卡片 hover、表格吸顶表头 */ --wb-z-sticky: 50; /* 吸顶层：工具条、模块顶部操作栏 */ --wb-z-dropdown: 100; /* 下拉层：下拉菜单、色板拾取器、自动完成列表 */ --wb-z-overlay: 500; /* 遮罩层：弹层背后的半透明遮罩 */ --wb-z-modal: 1000; /* 弹层主体：设置、批量配置 */ --wb-z-popover: 1100; /* 全局浮层：命令面板 Ctrl+K / 键位帮助 */ --wb-z-toast: 1200; /* 全局提示：Toast，永远最上层 */ /* ── 栅格（G5：3 个）──────────────────────────────────────────── ⚠️ 响应式断点 1180px / 780px **不做成令牌**：CSS 的 @media 不支持 var()，做成令牌会诱导写出 @media (max-width: var(--wb-bp-md)) 这种「静默失效且不报错」的写法（最难排查的一类 bug）。断点作为文档常量登记在 STD-U08，沿用 00 模块现状 1180 / 780。 */ --wb-grid-cols: 12; /* 栅格列数（可被 2/3/4/6 整除，最灵活） */ --wb-grid-gap: var(--wb-sp-4); /* 标准栅格间距 = 16px */ --wb-grid-gap-sm: var(--wb-sp-2); /* 紧凑栅格间距 = 8px */ } /* ── 视觉增强令牌（ADR-060 第二批，v4.76）───────────────────────── 与皮肤无关：等宽字体栈 / 焦点环 / 动效时长是全局常量，不随主题切换，故只在 :root 定义一次，不放进任何 [data-theme] 块。 ───────────────────────────────────────────────────────────────── */ :root { /* 等宽字体栈：数字/尺寸/编号读数场景（上下行数字列对齐如仪器读数） */ --wb-font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Courier New", monospace; /* 键盘导航统一焦点环（:focus-visible 消费） */ --wb-focus-ring: 2px solid var(--wb-accent); /* 动效时长三级：hover 过渡等微交互 */ --wb-dur-xs: 80ms; --wb-dur-sm: 120ms; --wb-dur-md: 180ms; } /* 无障碍尊重：用户系统设了「减弱动效」则全平台过渡静止 */ @media (prefers-reduced-motion: reduce) { :root { --wb-dur-xs: 0ms; --wb-dur-sm: 0ms; --wb-dur-md: 0ms; } } /* ── 星刃白瓷（暗色）：显式声明，与兜底值一致 ── B0-1：新增 --wb-info / --wb-info-soft / --wb-grad-accent 三个 G1 令牌； --wb-border / --wb-hover 维持原字面量（B0 零视觉变更）。 */ [data-theme="dark"] { color-scheme: dark; --wb-bg: #0b0d12; --wb-bg-2: #0f1219; --wb-panel: rgba(255, 255, 255, .055); --wb-panel-solid: #141820; /* border / hover 两个【键】必须保留——test-shell.js 有「workbench-dark 与 dark 键集全等」的防键漂移纪律。取值维持原字面量（B0 零视觉变更）。 */ --wb-border: rgba(255, 255, 255, .12); --wb-text: #f0f4f8; --wb-text-2: #a9b4c8; --wb-text-3: #6b7890; --wb-accent: #38bdf8; --wb-accent-2: #0ea5e9; --wb-accent-soft: rgba(56, 189, 248, .16); --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ --wb-hover: rgba(255, 255, 255, .07); /* 与 workbench-dark 同值（非差异化键值纪律） */ --wb-active: #38bdf8; --wb-ok: #4ade80; --wb-ok-soft: rgba(74, 222, 128, .14); --wb-danger: #f87171; --wb-danger-soft: rgba(248, 113, 113, .14); --wb-warn: #fbbf24; --wb-warn-soft: rgba(251, 191, 36, .14); --wb-info: #818cf8; /* 信息 / 提示 / 进行中态 */ --wb-info-soft: rgba(129, 140, 248, .16); --wb-grad-accent: linear-gradient(135deg, #5ee7ff, #2ab8e8); --wb-input-bg: #1a2338; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 30px rgba(0, 0, 0, .45); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .65); --wb-glass-blur: 20px; } /* ── 极光白瓷（浅色）── B0-1：新增 G1 三令牌，--wb-border / --wb-hover 维持原字面量（B0 零视觉变更）。 --wb-info 用深靛蓝 #4f46e5（而非暗色的 #818cf8），保证白底上的对比度。 */ [data-theme="light"] { color-scheme: light; --wb-bg: #f4f6fb; --wb-bg-2: #eef2f9; --wb-panel: rgba(255, 255, 255, .78); --wb-panel-solid: #ffffff; --wb-border: rgba(2, 8, 26, .08); /* 原字面量保留（B0 零视觉变更）；新代码用 --wb-line-2 */ --wb-text: #1f2937; --wb-text-2: #4b5563; --wb-text-3: #9ca3af; --wb-accent: #0ea5e9; --wb-accent-2: #0284c7; --wb-accent-soft: rgba(14, 165, 233, .14); --wb-accent-3: #0891b2; /* B0-1 §G1 D-1：浅色三档强调 cyan-600 */ --wb-hover: rgba(2, 8, 26, .05); /* 原字面量保留（B0 零视觉变更）；新代码用 --wb-fill-1 */ --wb-active: #0ea5e9; --wb-ok: #16a34a; --wb-ok-soft: rgba(22, 163, 74, .12); --wb-danger: #dc2626; --wb-danger-soft: rgba(220, 38, 38, .10); --wb-warn: #d97706; --wb-warn-soft: rgba(217, 119, 6, .12); --wb-info: #4f46e5; /* 浅色基底：深靛蓝，保白底对比度 */ --wb-info-soft: rgba(79, 70, 229, .12); --wb-grad-accent: linear-gradient(135deg, #38bdf8, #0284c7); /* #5ee7ff 白底对比度仅 1.7:1，换深一档 */ --wb-input-bg: #ffffff; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 28px rgba(15, 23, 42, .10); --wb-shadow-hover: 0 20px 48px rgba(15, 23, 42, .16); --wb-glass-blur: 20px; } /* ═══════════ 未来新皮肤：在下方追加 [data-theme="xxx"] 令牌块即可 ═══════════ （ADR-046，v4.55：诡秘主题包 5 套皮肤 + body::before 背景装饰层） ───────────────────────────────────────────────────────────────── 装饰层机制： · body::before 全屏铺 --wb-deco（SVG data-URI：背景纹路 + 空白区插图）， fixed / z-index:-1 / pointer-events:none，面板玻璃透出纹样； · 各主题块用 --wb-deco / --wb-deco-opacity 控制图样与强度； dark / light 不设（无装饰，保持原有星刃线稿）； · 插图为平台原创线稿（致敬设定意象，不使用任何版权图素材）； · 纹理仅在屏幕显示层，不进入导出/测色链路。诡秘主题包（全部暗色基底：与 :root 兜底一致，保证内置/第三方模块在任意皮肤下可读；模块引导脚本已放开 light|dark 硬校验）： · sun 永恒烈阳（太阳途径 · 契约之神）：暗夜鎏金，太阳圣徽 · mystic 诡秘之主（愚者 · 灰雾之上的黄黑之王）：灰雾之眼 + 礼帽 · night 黑夜女神（黑暗途径 · 深黯天国）：星辉 + 半轮绯红之月 · star 超星主宰（致密者 · 无垠星空的律法）：星云 + 星轨 · redpriest 红祭司（战争与纯粹阳性 · 灾祸之城）：血火 + 城堞剪影皮肤注册表：00-平台核心/index.html 的 WB_THEMES（驱动选择菜单）。 */ /* ── 背景装饰层（ADR-046）：全平台统一，模块零改动 ── */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--wb-deco, none); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: var(--wb-deco-opacity, 0); transition: opacity .45s ease; } /* ── 永恒烈阳（暗夜鎏金 · 太阳圣徽）── */ [data-theme="sun"] { color-scheme: dark; --wb-bg: #131008; --wb-bg-2: #1a150a; --wb-panel: rgba(255, 208, 120, .05); --wb-panel-solid: #201a0e; --wb-border: rgba(255, 210, 130, .13); --wb-text: #f8f2e2; --wb-text-2: #cbb98e; --wb-text-3: #8f7f5a; --wb-accent: #f6b83d; --wb-accent-2: #d9930f; --wb-accent-soft: rgba(246, 184, 61, .15); --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ --wb-hover: rgba(255, 214, 130, .07); --wb-active: #f6b83d; --wb-ok: #7ac974; --wb-ok-soft: rgba(122, 201, 116, .14); --wb-danger: #f87171; --wb-danger-soft: rgba(248, 113, 113, .14); --wb-warn: #fb923c; --wb-warn-soft: rgba(251, 146, 60, .14); --wb-info: #7dd3fc; /* B0-1 §G1 补入：sun 邻近色系 sky-300，与金 accent 互补，待设计复核 */ --wb-info-soft: rgba(125, 211, 252, .14); --wb-grad-accent: linear-gradient(135deg, #5ee7ff, #2ab8e8); /* B0-1 §G1：暗色基底通版渐变 */ --wb-input-bg: #2a2210; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 30px rgba(0, 0, 0, .5); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .7); --wb-glass-blur: 20px; --wb-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0.8' cy='0.14' r='0.55'%3E%3Cstop offset='0' stop-color='rgba(255,199,88,0.16)'/%3E%3Cstop offset='0.55' stop-color='rgba(255,180,70,0.05)'/%3E%3Cstop offset='1' stop-color='rgba(255,180,70,0)'/%3E%3C/radialGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(255,190,95,0)'/%3E%3Cstop offset='1' stop-color='rgba(255,190,95,0.10)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23g)'/%3E%3Cpath d='M0 640 C 360 560 700 640 1050 610 C 1300 590 1460 620 1600 600 L1600 900 L0 900 Z' fill='url(%23h)'/%3E%3Cg transform='translate(1280,168)' fill='none'%3E%3Ccircle r='62' fill='rgba(255,205,110,0.10)' stroke='rgba(255,208,120,0.55)' stroke-width='2.5'/%3E%3Ccircle r='86' stroke='rgba(255,214,130,0.28)' stroke-width='1.6' stroke-dasharray='10 9'/%3E%3Ccircle r='40' fill='rgba(255,214,130,0.16)'/%3E%3Cg stroke='rgba(255,210,125,0.6)' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M96 0H132'/%3E%3Cpath d='M83 48L114 66'/%3E%3Cpath d='M48 83L66 114'/%3E%3Cpath d='M0 96V132'/%3E%3Cpath d='M-48 83L-66 114'/%3E%3Cpath d='M-83 48L-114 66'/%3E%3Cpath d='M-96 0H-132'/%3E%3Cpath d='M-83 -48L-114 -66'/%3E%3Cpath d='M-48 -83L-66 -114'/%3E%3Cpath d='M0 -96V-132'/%3E%3Cpath d='M48 -83L66 -114'/%3E%3Cpath d='M83 -48L114 -66'/%3E%3C/g%3E%3Cg fill='rgba(255,220,150,0.5)'%3E%3Ccircle cx='148' cy='0' r='3.5'/%3E%3Ccircle cx='0' cy='148' r='3.5'/%3E%3Ccircle cx='-148' cy='0' r='3.5'/%3E%3Ccircle cx='0' cy='-148' r='3.5'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='rgba(255,196,100,0.20)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M90 762H520'/%3E%3Cpath d='M150 796H470'/%3E%3Cpath d='M210 830H420'/%3E%3Cpath d='M1160 700H1420' opacity='0.6'/%3E%3Cpath d='M1220 740H1370' opacity='0.4'/%3E%3C/g%3E%3Cg fill='rgba(255,214,140,0.35)'%3E%3Ccircle cx='220' cy='180' r='2'/%3E%3Ccircle cx='320' cy='300' r='1.6'/%3E%3Ccircle cx='150' cy='420' r='2.4'/%3E%3Ccircle cx='520' cy='140' r='1.6'/%3E%3Ccircle cx='640' cy='260' r='2'/%3E%3Ccircle cx='980' cy='420' r='1.8'/%3E%3Ccircle cx='860' cy='120' r='1.6'/%3E%3Ccircle cx='1420' cy='560' r='2'/%3E%3Ccircle cx='240' cy='600' r='1.6'/%3E%3C/g%3E%3C/svg%3E"), url("skins/sun.jpg"); --wb-deco-opacity: 0.8; } /* ── 诡秘之主（愚者 · 灰雾之上的黄黑之王）── */ [data-theme="mystic"] { color-scheme: dark; --wb-bg: #101114; --wb-bg-2: #15161c; --wb-panel: rgba(255, 255, 255, .05); --wb-panel-solid: #191a20; --wb-border: rgba(201, 162, 39, .16); --wb-text: #ece9de; --wb-text-2: #b0aa96; --wb-text-3: #756f5e; --wb-accent: #d4af37; --wb-accent-2: #a3821f; --wb-accent-soft: rgba(212, 175, 55, .14); --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ --wb-hover: rgba(212, 175, 55, .07); --wb-active: #d4af37; --wb-ok: #6fbf73; --wb-ok-soft: rgba(111, 191, 115, .13); --wb-danger: #e35d6a; --wb-danger-soft: rgba(227, 93, 106, .14); --wb-warn: #d97706; --wb-warn-soft: rgba(217, 119, 6, .13); --wb-info: #7dd3fc; /* B0-1 §G1 补入：mystic 邻近色系 sky-300，与古金 accent 互补，待设计复核 */ --wb-info-soft: rgba(125, 211, 252, .13); --wb-grad-accent: linear-gradient(135deg, #5ee7ff, #2ab8e8); /* B0-1 §G1：暗色基底通版渐变 */ --wb-input-bg: #23242c; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 30px rgba(0, 0, 0, .5); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .7); --wb-glass-blur: 20px; --wb-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='f' cx='0.32' cy='0.42' r='0.5'%3E%3Cstop offset='0' stop-color='rgba(180,180,190,0.10)'/%3E%3Cstop offset='1' stop-color='rgba(180,180,190,0)'/%3E%3C/radialGradient%3E%3CradialGradient id='f2' cx='0.85' cy='0.8' r='0.55'%3E%3Cstop offset='0' stop-color='rgba(150,150,160,0.07)'/%3E%3Cstop offset='1' stop-color='rgba(150,150,160,0)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23f)'/%3E%3Crect width='1600' height='900' fill='url(%23f2)'/%3E%3Cg fill='none' stroke='rgba(200,170,90,0.4)' stroke-width='2.5'%3E%3Cellipse cx='510' cy='380' rx='190' ry='95'/%3E%3Ccircle cx='510' cy='380' r='52' fill='rgba(210,175,80,0.10)'/%3E%3Ccircle cx='510' cy='380' r='20' fill='rgba(230,190,90,0.35)' stroke='none'/%3E%3Ccircle cx='536' cy='368' r='6' fill='rgba(20,22,26,0.9)' stroke='rgba(200,170,90,0.6)' stroke-width='1.5'/%3E%3C/g%3E%3Cg stroke='rgba(196,178,110,0.45)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M510 262v-46'/%3E%3Cpath d='M620 300l32 -34'/%3E%3Cpath d='M672 380h46'/%3E%3Cpath d='M620 460l32 34'/%3E%3Cpath d='M400 300l-32 -34'/%3E%3Cpath d='M348 380h-46'/%3E%3Cpath d='M400 460l-32 34'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(168,168,178,0.22)' stroke-width='2'%3E%3Cpath d='M240 620 C 380 560 520 660 680 600 C 840 545 980 640 1140 585'/%3E%3Cpath d='M180 700 C 360 650 480 740 660 690 C 860 635 1040 720 1240 670'/%3E%3Cpath d='M120 780 C 340 740 520 810 740 770 C 960 730 1140 790 1360 750'/%3E%3C/g%3E%3Cg transform='translate(230,760)' fill='none' stroke='rgba(205,190,140,0.5)' stroke-width='2.5'%3E%3Cpath d='M-95 28 H95'/%3E%3Cpath d='M-58 20 L-50 -52 Q -49 -60 -40 -60 H40 Q49 -60 50 -52 L58 20'/%3E%3Cpath d='M-50 -34 H50' stroke='rgba(190,60,70,0.55)' stroke-width='5'/%3E%3C/g%3E%3Cpath d='M180 150 A64 64 0 1 0 244 214 A82 82 0 0 1 180 150 Z' fill='rgba(196,74,88,0.4)'/%3E%3Cg fill='none' stroke='rgba(198,170,90,0.30)' stroke-width='2'%3E%3Cpath d='M60 140 V70 H130'/%3E%3Cpath d='M1540 140 V70 H1470'/%3E%3Cpath d='M60 760 V830 H130'/%3E%3Cpath d='M1540 760 V830 H1470'/%3E%3C/g%3E%3Cg fill='rgba(198,170,90,0.4)'%3E%3Ccircle cx='60' cy='70' r='3'/%3E%3Ccircle cx='1540' cy='70' r='3'/%3E%3Ccircle cx='60' cy='830' r='3'/%3E%3Ccircle cx='1540' cy='830' r='3'/%3E%3C/g%3E%3Cg fill='rgba(180,180,186,0.30)'%3E%3Ccircle cx='760' cy='180' r='1.8'/%3E%3Ccircle cx='920' cy='300' r='1.4'/%3E%3Ccircle cx='1080' cy='160' r='2'/%3E%3Ccircle cx='1300' cy='420' r='1.6'/%3E%3Ccircle cx='860' cy='480' r='1.4'/%3E%3Ccircle cx='1430' cy='260' r='1.8'/%3E%3Ccircle cx='400' cy='620' r='1.4'/%3E%3Ccircle cx='640' cy='840' r='1.6'/%3E%3C/g%3E%3C/svg%3E"), url("skins/mystic.jpg"); --wb-deco-opacity: 0.8; } /* ── 黑夜女神（黑暗途径 · 深黯天国：星辉 + 半轮绯红之月）── */ [data-theme="night"] { color-scheme: dark; --wb-bg: #050810; --wb-bg-2: #0a1122; --wb-panel: rgba(180, 200, 255, .045); --wb-panel-solid: #101627; --wb-border: rgba(160, 180, 230, .13); --wb-text: #eaeef8; --wb-text-2: #a6b1cb; --wb-text-3: #68718d; --wb-accent: #c3d0ea; --wb-accent-2: #93a3c6; --wb-accent-soft: rgba(195, 208, 234, .13); --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ --wb-hover: rgba(195, 208, 234, .06); --wb-active: #c3d0ea; --wb-ok: #5fc98d; --wb-ok-soft: rgba(95, 201, 141, .13); --wb-danger: #f06a7e; --wb-danger-soft: rgba(240, 106, 126, .14); --wb-warn: #f2c14e; --wb-warn-soft: rgba(242, 193, 78, .13); --wb-info: #a5b4fc; /* B0-1 §G1 补入：night 邻近色系 indigo-300，比钢蓝 accent 略偏暖，待设计复核 */ --wb-info-soft: rgba(165, 180, 252, .14); --wb-grad-accent: linear-gradient(135deg, #5ee7ff, #2ab8e8); /* B0-1 §G1：暗色基底通版渐变 */ --wb-input-bg: #131a2e; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 30px rgba(0, 0, 0, .55); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .75); --wb-glass-blur: 20px; --wb-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='n' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(16,26,54,0.55)'/%3E%3Cstop offset='1' stop-color='rgba(6,10,22,0)'/%3E%3C/linearGradient%3E%3CradialGradient id='m' cx='0.5' cy='0.5' r='0.5'%3E%3Cstop offset='0' stop-color='rgba(214,70,92,0.35)'/%3E%3Cstop offset='1' stop-color='rgba(214,70,92,0)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23n)'/%3E%3Cg transform='translate(1210,210)'%3E%3Ccircle r='185' fill='url(%23m)'/%3E%3Ccircle r='112' fill='none' stroke='rgba(196,208,232,0.35)' stroke-width='1.5'/%3E%3Cpath d='M0 -112 A112 112 0 0 1 0 112 Z' fill='rgba(220,66,88,0.5)'/%3E%3Cpath d='M0 -112 A112 112 0 0 0 0 112' fill='rgba(150,166,200,0.10)'/%3E%3Ccircle cx='42' cy='-38' r='9' fill='rgba(255,220,226,0.22)'/%3E%3Ccircle cx='14' cy='30' r='6' fill='rgba(160,50,66,0.5)'/%3E%3Ccircle cx='55' cy='52' r='4' fill='rgba(160,50,66,0.4)'/%3E%3C/g%3E%3Ccircle cx='1210' cy='210' r='210' fill='none' stroke='rgba(196,208,232,0.14)' stroke-dasharray='2 10' stroke-width='1.5'/%3E%3Cg fill='rgba(226,234,252,0.8)'%3E%3Ccircle cx='150' cy='130' r='1.6'/%3E%3Ccircle cx='300' cy='240' r='2.2'/%3E%3Ccircle cx='470' cy='110' r='1.4'/%3E%3Ccircle cx='620' cy='300' r='1.8'/%3E%3Ccircle cx='820' cy='150' r='1.4'/%3E%3Ccircle cx='960' cy='330' r='2'/%3E%3Ccircle cx='1090' cy='90' r='1.4'/%3E%3Ccircle cx='1420' cy='440' r='1.8'/%3E%3Ccircle cx='70' cy='420' r='2'/%3E%3Ccircle cx='240' cy='560' r='1.4'/%3E%3Ccircle cx='520' cy='480' r='1.6'/%3E%3Ccircle cx='760' cy='560' r='1.4'/%3E%3Ccircle cx='1330' cy='560' r='1.6'/%3E%3Ccircle cx='1520' cy='140' r='1.8'/%3E%3Ccircle cx='60' cy='640' r='1.4'/%3E%3Ccircle cx='900' cy='640' r='1.6'/%3E%3C/g%3E%3Cg fill='rgba(240,246,255,0.9)'%3E%3Cpath d='M420 200 l3 9 9 3 -9 3 -3 9 -3 -9 -9 -3 9 -3 Z'/%3E%3Cpath d='M1030 470 l2.4 7.2 7.2 2.4 -7.2 2.4 -2.4 7.2 -2.4 -7.2 -7.2 -2.4 7.2 -2.4 Z'/%3E%3Cpath d='M190 350 l2 6 6 2 -6 2 -2 6 -2 -6 -6 -2 6 -2 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(150,170,215,0.16)' stroke-width='2'%3E%3Cpath d='M0 700 C 260 660 420 740 700 700 C 980 660 1180 740 1600 690'/%3E%3Cpath d='M0 770 C 300 730 500 800 820 764 C 1120 730 1320 796 1600 756'/%3E%3Cpath d='M0 840 C 320 806 560 862 900 832 C 1200 806 1400 856 1600 828'/%3E%3C/g%3E%3C/svg%3E"), url("skins/night.jpg"); --wb-deco-opacity: 0.8; } /* ── 超星主宰（致密者 · 无垠星空的律法：星云 + 星轨）── */ [data-theme="star"] { color-scheme: dark; --wb-bg: #07081a; --wb-bg-2: #0d0f2e; --wb-panel: rgba(167, 139, 250, .05); --wb-panel-solid: #131534; --wb-border: rgba(167, 139, 250, .15); --wb-text: #ecebf9; --wb-text-2: #a9a4cf; --wb-text-3: #6f6a96; --wb-accent: #a78bfa; --wb-accent-2: #7c5cd6; --wb-accent-soft: rgba(167, 139, 250, .15); --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ --wb-hover: rgba(167, 139, 250, .08); --wb-active: #a78bfa; --wb-ok: #62d0a2; --wb-ok-soft: rgba(98, 208, 162, .13); --wb-danger: #fb7185; --wb-danger-soft: rgba(251, 113, 133, .14); --wb-warn: #fbbf24; --wb-warn-soft: rgba(251, 191, 36, .13); --wb-info: #a5b4fc; /* B0-1 §G1 补入：star 邻近色系 indigo-300，介于紫 accent 与天蓝之间，待设计复核 */ --wb-info-soft: rgba(165, 180, 252, .14); --wb-grad-accent: linear-gradient(135deg, #5ee7ff, #2ab8e8); /* B0-1 §G1：暗色基底通版渐变 */ --wb-input-bg: #181b42; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 30px rgba(0, 0, 0, .55); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .75); --wb-glass-blur: 20px; --wb-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='ne' cx='0.5' cy='0.5' r='0.5'%3E%3Cstop offset='0' stop-color='rgba(139,124,246,0.14)'/%3E%3Cstop offset='1' stop-color='rgba(139,124,246,0)'/%3E%3C/radialGradient%3E%3CradialGradient id='ne2' cx='0.5' cy='0.5' r='0.5'%3E%3Cstop offset='0' stop-color='rgba(96,120,230,0.12)'/%3E%3Cstop offset='1' stop-color='rgba(96,120,230,0)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='420' cy='240' r='330' fill='url(%23ne)'/%3E%3Ccircle cx='1250' cy='660' r='380' fill='url(%23ne2)'/%3E%3Cg fill='rgba(238,236,255,0.85)'%3E%3Ccircle cx='180' cy='200' r='1.6'/%3E%3Ccircle cx='300' cy='260' r='2.4'/%3E%3Ccircle cx='420' cy='210' r='1.6'/%3E%3Ccircle cx='540' cy='300' r='2'/%3E%3Ccircle cx='660' cy='250' r='1.4'/%3E%3Ccircle cx='140' cy='420' r='1.8'/%3E%3Ccircle cx='340' cy='470' r='1.4'/%3E%3Ccircle cx='560' cy='540' r='1.8'/%3E%3Ccircle cx='760' cy='420' r='1.4'/%3E%3Ccircle cx='900' cy='560' r='2'/%3E%3Ccircle cx='1050' cy='450' r='1.6'/%3E%3Ccircle cx='1200' cy='380' r='1.4'/%3E%3Ccircle cx='1480' cy='420' r='2'/%3E%3Ccircle cx='80' cy='620' r='1.6'/%3E%3Ccircle cx='260' cy='700' r='1.4'/%3E%3Ccircle cx='470' cy='770' r='1.8'/%3E%3Ccircle cx='820' cy='300' r='1.4'/%3E%3Ccircle cx='1350' cy='250' r='1.6'/%3E%3Ccircle cx='1540' cy='620' r='1.4'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(167,139,250,0.40)' stroke-width='1.5'%3E%3Cpath d='M180 200 L300 260 L420 210 L540 300 L660 250'/%3E%3C/g%3E%3Cg fill='rgba(196,181,253,0.9)'%3E%3Ccircle cx='180' cy='200' r='2.6'/%3E%3Ccircle cx='300' cy='260' r='3.2'/%3E%3Ccircle cx='420' cy='210' r='2.4'/%3E%3Ccircle cx='540' cy='300' r='2.8'/%3E%3Ccircle cx='660' cy='250' r='2.2'/%3E%3C/g%3E%3Cg transform='translate(1180,300)' fill='none' stroke='rgba(167,139,250,0.25)' stroke-width='1.6'%3E%3Cellipse rx='210' ry='80'/%3E%3Cellipse rx='210' ry='80' transform='rotate(38)'/%3E%3Ccircle r='150' stroke-dasharray='3 9'/%3E%3Ccircle r='14' fill='rgba(196,181,253,0.35)' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(1380,830)'%3E%3Ccircle r='150' fill='rgba(26,24,58,0.85)' stroke='rgba(167,139,250,0.35)' stroke-width='2'/%3E%3Cellipse rx='230' ry='54' fill='none' stroke='rgba(196,181,253,0.30)' stroke-width='3' transform='rotate(-14)'/%3E%3C/g%3E%3C/svg%3E"), url("skins/star.jpg"); --wb-deco-opacity: 0.8; } /* ── 红祭司（战争与纯粹阳性 · 灾祸之城：血火 + 城堞剪影）── */ [data-theme="redpriest"] { color-scheme: dark; --wb-bg: #120708; --wb-bg-2: #1b0a0d; --wb-panel: rgba(255, 120, 100, .05); --wb-panel-solid: #22100f; --wb-border: rgba(252, 130, 110, .14); --wb-text: #f9ece9; --wb-text-2: #cda39c; --wb-text-3: #93706a; --wb-accent: #f0544f; --wb-accent-2: #c22e2e; --wb-accent-soft: rgba(240, 84, 79, .15); --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ --wb-hover: rgba(252, 130, 110, .07); --wb-active: #f0544f; --wb-ok: #6fce7f; --wb-ok-soft: rgba(111, 206, 127, .13); --wb-danger: #f87171; --wb-danger-soft: rgba(248, 113, 113, .14); --wb-warn: #fbbf24; --wb-warn-soft: rgba(251, 191, 36, .13); --wb-info: #7dd3fc; /* B0-1 §G1 补入：redpriest 邻近色系 sky-300，冷色与红 accent 互补，待设计复核 */ --wb-info-soft: rgba(125, 211, 252, .14); --wb-grad-accent: linear-gradient(135deg, #5ee7ff, #2ab8e8); /* B0-1 §G1：暗色基底通版渐变 */ --wb-input-bg: #2b1210; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 30px rgba(0, 0, 0, .55); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .75); --wb-glass-blur: 20px; --wb-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='fg' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='rgba(255,110,60,0.16)'/%3E%3Cstop offset='1' stop-color='rgba(255,110,60,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 900 L0 560 C 300 520 600 600 900 560 C 1200 520 1400 590 1600 560 L1600 900 Z' fill='url(%23fg)'/%3E%3Cg transform='translate(1330,240)' fill='none' stroke='rgba(252,120,100,0.38)' stroke-width='3'%3E%3Cpath d='M0 -80 L14 -14 L80 0 L14 14 L0 80 L-14 14 L-80 0 L-14 -14 Z'/%3E%3Ccircle r='26' stroke-width='2'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(255,120,80,0.35)' stroke-width='2.5'%3E%3Cpath d='M300 700 C 280 640 320 600 305 540 C 350 590 365 650 345 700'/%3E%3Cpath d='M1250 690 C 1235 630 1265 595 1252 540 C 1295 585 1305 640 1290 690'/%3E%3C/g%3E%3Cg fill='rgba(255,150,90,0.16)'%3E%3Cpath d='M307 690 C 295 645 322 615 312 572 C 342 612 352 655 338 690 Z'/%3E%3Cpath d='M1258 682 C 1248 640 1270 612 1260 572 C 1288 608 1296 650 1284 682 Z'/%3E%3C/g%3E%3Cpath d='M0 900 V720 H60 V690 H110 V720 H180 V660 H230 V720 H310 V700 H360 V720 H430 V640 H480 V720 H560 V700 H620 V720 H700 V660 H750 V720 H830 V690 H880 V720 H960 V630 H1010 V720 H1090 V700 H1150 V720 H1230 V670 H1280 V720 H1360 V695 H1420 V720 H1500 V650 H1545 V720 H1600 V900 Z' fill='rgba(8,3,4,0.9)'/%3E%3Cg fill='rgba(255,150,90,0.30)'%3E%3Crect x='480' y='670' width='10' height='14'/%3E%3Crect x='985' y='660' width='10' height='14'/%3E%3Crect x='1215' y='690' width='9' height='13'/%3E%3Crect x='165' y='690' width='9' height='13'/%3E%3C/g%3E%3Cg stroke='rgba(255,150,90,0.35)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M420 640 v-40'/%3E%3Cpath d='M700 660 v-30'/%3E%3Cpath d='M980 620 v-56'/%3E%3Cpath d='M1120 650 v-34'/%3E%3C/g%3E%3Cg fill='rgba(255,170,110,0.5)'%3E%3Ccircle cx='500' cy='560' r='2'/%3E%3Ccircle cx='760' cy='520' r='1.6'/%3E%3Ccircle cx='940' cy='480' r='2.2'/%3E%3Ccircle cx='1180' cy='540' r='1.6'/%3E%3Ccircle cx='380' cy='500' r='1.6'/%3E%3Ccircle cx='220' cy='300' r='1.6'/%3E%3Ccircle cx='620' cy='200' r='2'/%3E%3Ccircle cx='880' cy='260' r='1.4'/%3E%3C/g%3E%3C/svg%3E"), url("skins/redpriest.jpg"); --wb-deco-opacity: 0.8; } /* ── 风暴之主（风暴途径 · 晴空银雷：白云 + 闪电 + 海浪，浅色基底）── */ [data-theme="storm"] { color-scheme: light; --wb-bg: #eef6fc; --wb-bg-2: #e2eef9; --wb-panel: rgba(255, 255, 255, .74); --wb-panel-solid: #ffffff; --wb-border: rgba(2, 132, 199, .14); --wb-text: #0b2233; --wb-text-2: #3d5a72; --wb-text-3: #7c94a8; --wb-accent: #0284c7; --wb-accent-2: #075985; --wb-accent-soft: rgba(2, 132, 199, .12); --wb-accent-3: #0891b2; /* B0-1 §G1 D-1：浅色三档强调 cyan-600 */ --wb-hover: rgba(2, 132, 199, .06); --wb-active: #0284c7; --wb-ok: #16a34a; --wb-ok-soft: rgba(22, 163, 74, .12); --wb-danger: #dc2626; --wb-danger-soft: rgba(220, 38, 38, .10); --wb-warn: #d97706; --wb-warn-soft: rgba(217, 119, 6, .12); --wb-info: #4f46e5; /* 浅色基底：深靛蓝，保白底对比度 */ --wb-info-soft: rgba(79, 70, 229, .12); --wb-grad-accent: linear-gradient(135deg, #38bdf8, #0284c7); --wb-input-bg: #ffffff; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 28px rgba(7, 89, 133, .12); --wb-shadow-hover: 0 20px 48px rgba(7, 89, 133, .18); --wb-glass-blur: 20px; --wb-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='sk' cx='0.78' cy='0.14' r='0.5'%3E%3Cstop offset='0' stop-color='rgba(2,132,199,0.10)'/%3E%3Cstop offset='1' stop-color='rgba(2,132,199,0)'/%3E%3C/radialGradient%3E%3ClinearGradient id='sea' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(2,132,199,0.04)'/%3E%3Cstop offset='1' stop-color='rgba(2,132,199,0.10)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23sk)'/%3E%3Cg fill='rgba(255,255,255,0.85)' stroke='rgba(2,132,199,0.20)' stroke-width='2'%3E%3Cpath d='M230 200 q28 -48 84 -42 q18 -34 62 -30 q46 4 54 40 q40 4 38 34 q-2 26 -40 26 h-182 q-36 0 -36 -28 z'/%3E%3Cpath d='M1180 150 q24 -40 70 -34 q16 -30 54 -26 q40 4 46 34 q34 4 32 28 q-2 22 -34 22 h-154 q-30 0 -28 -24 z' opacity='0.85'/%3E%3C/g%3E%3Cg transform='translate(1320,340)'%3E%3Cpath d='M-8 -118 L30 -26 L0 -22 L40 82 L-60 -34 L-16 -38 Z' fill='rgba(2,132,199,0.14)' stroke='rgba(2,132,199,0.42)' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M64 -60 L86 -2 L68 0 L96 56 L30 -22 L58 -26 Z' fill='rgba(2,132,199,0.08)' stroke='rgba(2,132,199,0.28)' stroke-width='2' stroke-linejoin='round'/%3E%3C/g%3E%3Cg stroke='rgba(2,132,199,0.20)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M430 250 l-10 32'/%3E%3Cpath d='M486 292 l-10 32'/%3E%3Cpath d='M392 320 l-10 32'/%3E%3Cpath d='M920 210 l-8 26'/%3E%3Cpath d='M968 248 l-8 26'/%3E%3C/g%3E%3Cpath d='M0 740 C 260 700 480 770 760 736 C 1040 702 1300 766 1600 726 L1600 900 L0 900 Z' fill='url(%23sea)'/%3E%3Cg fill='none' stroke='rgba(2,132,199,0.24)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M80 800 q44 -16 88 0 q44 16 88 0'/%3E%3Cpath d='M420 826 q44 -16 88 0 q44 16 88 0'/%3E%3Cpath d='M780 800 q44 -16 88 0 q44 16 88 0'/%3E%3Cpath d='M1140 830 q44 -16 88 0 q44 16 88 0'/%3E%3Cpath d='M1360 796 q40 -14 80 0 q40 14 80 0'/%3E%3C/g%3E%3Cg fill='rgba(2,132,199,0.30)'%3E%3Ccircle cx='180' cy='420' r='3'/%3E%3Ccircle cx='620' cy='360' r='2.4'/%3E%3Ccircle cx='900' cy='470' r='3'/%3E%3Ccircle cx='1450' cy='520' r='2.6'/%3E%3Ccircle cx='320' cy='560' r='2.4'/%3E%3C/g%3E%3C/svg%3E"), url("skins/storm.jpg"); --wb-deco-opacity: 0.8; } /* ── 知识与智慧之神（神秘学界 · 羊皮书卷：书卷 + 羽毛笔 + 星盘，浅色基底）── */ [data-theme="codex"] { color-scheme: light; --wb-bg: #f8f4e9; --wb-bg-2: #f0ead8; --wb-panel: rgba(255, 252, 244, .78); --wb-panel-solid: #fffdf6; --wb-border: rgba(146, 88, 20, .16); --wb-text: #33291a; --wb-text-2: #6b5d44; --wb-text-3: #a29478; --wb-accent: #b45309; --wb-accent-2: #92400e; --wb-accent-soft: rgba(146, 88, 20, .12); --wb-accent-3: #0891b2; /* B0-1 §G1 D-1：浅色三档强调 cyan-600 */ --wb-hover: rgba(146, 88, 20, .06); --wb-active: #b45309; --wb-ok: #4d7c0f; --wb-ok-soft: rgba(77, 124, 15, .12); --wb-danger: #dc2626; --wb-danger-soft: rgba(220, 38, 38, .10); --wb-warn: #d97706; --wb-warn-soft: rgba(217, 119, 6, .12); --wb-info: #4f46e5; /* 浅色基底：深靛蓝，保白底对比度 */ --wb-info-soft: rgba(79, 70, 229, .12); --wb-grad-accent: linear-gradient(135deg, #38bdf8, #0284c7); --wb-input-bg: #fdfaf0; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 28px rgba(146, 88, 20, .12); --wb-shadow-hover: 0 20px 48px rgba(146, 88, 20, .18); --wb-glass-blur: 20px; --wb-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='pg' cx='0.5' cy='0.5' r='0.75'%3E%3Cstop offset='0' stop-color='rgba(146,88,20,0.04)'/%3E%3Cstop offset='1' stop-color='rgba(146,88,20,0.09)'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23pg)'/%3E%3Cg transform='translate(430,420)' fill='none' stroke='rgba(146,88,20,0.35)' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M-230 60 C -160 10 -70 0 0 26 C 70 0 160 10 230 60 L230 170 C 160 120 70 110 0 136 C -70 110 -160 120 -230 170 Z'/%3E%3Cpath d='M0 26 V136'/%3E%3Cpath d='M-186 66 C -136 34 -70 26 -34 38' stroke-width='1.6' opacity='0.55'/%3E%3Cpath d='M-186 94 C -136 62 -70 54 -34 64' stroke-width='1.6' opacity='0.55'/%3E%3Cpath d='M-186 122 C -136 92 -70 84 -34 92' stroke-width='1.6' opacity='0.55'/%3E%3Cpath d='M186 66 C 136 34 70 26 34 38' stroke-width='1.6' opacity='0.55'/%3E%3Cpath d='M186 94 C 136 62 70 54 34 64' stroke-width='1.6' opacity='0.55'/%3E%3Cpath d='M186 122 C 136 92 70 84 34 92' stroke-width='1.6' opacity='0.55'/%3E%3C/g%3E%3Cg transform='translate(1130,330) rotate(16)'%3E%3Cpath d='M0 150 C -12 84 6 26 64 -36 C 42 42 30 96 22 150 Z' fill='rgba(146,88,20,0.10)' stroke='rgba(146,88,20,0.38)' stroke-width='2'/%3E%3Cpath d='M10 164 C 30 110 52 52 100 6' fill='none' stroke='rgba(146,88,20,0.46)' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='158' r='4' fill='rgba(146,88,20,0.5)'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(146,88,20,0.22)' stroke-width='1.6'%3E%3Ccircle cx='1330' cy='170' r='92'/%3E%3Ccircle cx='1330' cy='170' r='64' stroke-dasharray='6 9'/%3E%3Cpath d='M1330 66 v-28 M1330 274 v28 M1226 170 h-28 M1434 170 h28'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(146,88,20,0.28)' stroke-width='2'%3E%3Cpath d='M40 130 q0 -58 58 -58'/%3E%3Cpath d='M1560 130 q0 -58 -58 -58'/%3E%3Cpath d='M40 770 q0 58 58 58'/%3E%3Cpath d='M1560 770 q0 58 -58 58'/%3E%3C/g%3E%3Cg fill='rgba(146,88,20,0.28)'%3E%3Ccircle cx='760' cy='150' r='3'/%3E%3Ccircle cx='160' cy='360' r='2.6'/%3E%3Ccircle cx='900' cy='700' r='3'/%3E%3Ccircle cx='1480' cy='620' r='2.6'/%3E%3Ccircle cx='300' cy='640' r='2.4'/%3E%3C/g%3E%3C/svg%3E"), url("skins/codex.jpg"); --wb-deco-opacity: 0.8; } /* ── 大地母神（丰收与生命 · 春野：麦穗 + 野花 + 田野波浪，浅色基底）── */ [data-theme="meadow"] { color-scheme: light; --wb-bg: #f0f7ec; --wb-bg-2: #e4f0dc; --wb-panel: rgba(255, 255, 255, .74); --wb-panel-solid: #ffffff; --wb-border: rgba(47, 158, 68, .16); --wb-text: #17301c; --wb-text-2: #4a6544; --wb-text-3: #8aa082; --wb-accent: #2f9e44; --wb-accent-2: #237032; --wb-accent-soft: rgba(47, 158, 68, .12); --wb-accent-3: #0891b2; /* B0-1 §G1 D-1：浅色三档强调 cyan-600 */ --wb-hover: rgba(47, 158, 68, .06); --wb-active: #2f9e44; --wb-ok: #16a34a; --wb-ok-soft: rgba(22, 163, 74, .12); --wb-danger: #dc2626; --wb-danger-soft: rgba(220, 38, 38, .10); --wb-warn: #d97706; --wb-warn-soft: rgba(217, 119, 6, .12); --wb-info: #4f46e5; /* 浅色基底：深靛蓝，保白底对比度 */ --wb-info-soft: rgba(79, 70, 229, .12); --wb-grad-accent: linear-gradient(135deg, #38bdf8, #0284c7); --wb-input-bg: #ffffff; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 28px rgba(35, 112, 50, .12); --wb-shadow-hover: 0 20px 48px rgba(35, 112, 50, .18); --wb-glass-blur: 20px; --wb-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='fl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(47,158,68,0.03)'/%3E%3Cstop offset='1' stop-color='rgba(47,158,68,0.10)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 700 C 300 660 600 720 900 690 C 1200 660 1400 716 1600 684 L1600 900 L0 900 Z' fill='url(%23fl)'/%3E%3Cg fill='none' stroke='rgba(47,158,68,0.26)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M100 760 q50 -18 100 0 q50 18 100 0'/%3E%3Cpath d='M500 790 q50 -18 100 0 q50 18 100 0'/%3E%3Cpath d='M950 770 q50 -18 100 0 q50 18 100 0'/%3E%3Cpath d='M1320 800 q50 -18 100 0 q50 18 100 0'/%3E%3C/g%3E%3Cg transform='translate(250,560)'%3E%3Cpath d='M0 250 C -8 160 4 80 0 10' fill='none' stroke='rgba(47,158,68,0.45)' stroke-width='3' stroke-linecap='round'/%3E%3Cg stroke='rgba(180,120,20,0.42)' stroke-width='1.8' fill='rgba(180,120,20,0.10)'%3E%3Cpath d='M0 14 q-18 6 -20 26 q18 -2 22 -20'/%3E%3Cpath d='M0 14 q18 6 20 26 q-18 -2 -22 -20'/%3E%3Cpath d='M-2 48 q-18 6 -20 26 q18 -2 22 -20'/%3E%3Cpath d='M-2 48 q18 6 20 26 q-18 -2 -22 -20'/%3E%3Cpath d='M-4 82 q-18 6 -20 26 q18 -2 22 -20'/%3E%3Cpath d='M-4 82 q18 6 20 26 q-18 -2 -22 -20'/%3E%3Cpath d='M-6 116 q-16 6 -18 24 q16 -2 20 -18'/%3E%3Cpath d='M-6 116 q16 6 18 24 q-16 -2 -20 -18'/%3E%3C/g%3E%3Cpath d='M-2 150 q-28 -12 -38 -46' fill='none' stroke='rgba(47,158,68,0.38)' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M-2 150 q28 -12 38 -46' fill='none' stroke='rgba(47,158,68,0.38)' stroke-width='2.5' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(1380,540)'%3E%3Cpath d='M0 260 C 8 170 -4 90 0 20' fill='none' stroke='rgba(47,158,68,0.42)' stroke-width='3' stroke-linecap='round'/%3E%3Cg stroke='rgba(180,120,20,0.38)' stroke-width='1.8' fill='rgba(180,120,20,0.08)'%3E%3Cpath d='M0 22 q-18 6 -20 26 q18 -2 22 -20'/%3E%3Cpath d='M0 22 q18 6 20 26 q-18 -2 -22 -20'/%3E%3Cpath d='M2 56 q-18 6 -20 26 q18 -2 22 -20'/%3E%3Cpath d='M2 56 q18 6 20 26 q-18 -2 -22 -20'/%3E%3Cpath d='M4 90 q-18 6 -20 26 q18 -2 22 -20'/%3E%3Cpath d='M4 90 q18 6 20 26 q-18 -2 -22 -20'/%3E%3Cpath d='M6 124 q-16 6 -18 24 q16 -2 20 -18'/%3E%3Cpath d='M6 124 q16 6 18 24 q-16 -2 -20 -18'/%3E%3C/g%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.9)' stroke='rgba(47,158,68,0.35)' stroke-width='1.5'%3E%3Cg transform='translate(700,300)'%3E%3Ccircle cx='0' cy='-10' r='6'/%3E%3Ccircle cx='9.5' cy='-3' r='6'/%3E%3Ccircle cx='6' cy='8' r='6'/%3E%3Ccircle cx='-6' cy='8' r='6'/%3E%3Ccircle cx='-9.5' cy='-3' r='6'/%3E%3C/g%3E%3Cg transform='translate(980,190)'%3E%3Ccircle cx='0' cy='-8' r='5'/%3E%3Ccircle cx='7.6' cy='-2.4' r='5'/%3E%3Ccircle cx='4.7' cy='6.5' r='5'/%3E%3Ccircle cx='-4.7' cy='6.5' r='5'/%3E%3Ccircle cx='-7.6' cy='-2.4' r='5'/%3E%3C/g%3E%3Cg transform='translate(560,210)'%3E%3Ccircle cx='0' cy='-7' r='4.5'/%3E%3Ccircle cx='6.7' cy='-2.1' r='4.5'/%3E%3Ccircle cx='4.1' cy='5.7' r='4.5'/%3E%3Ccircle cx='-4.1' cy='5.7' r='4.5'/%3E%3Ccircle cx='-6.7' cy='-2.1' r='4.5'/%3E%3C/g%3E%3C/g%3E%3Cg fill='rgba(180,120,20,0.5)'%3E%3Ccircle cx='700' cy='300' r='4.5'/%3E%3Ccircle cx='980' cy='190' r='4'/%3E%3Ccircle cx='560' cy='210' r='3.6'/%3E%3C/g%3E%3Cpath d='M430 900 C 470 810 390 770 440 690' fill='none' stroke='rgba(47,158,68,0.22)' stroke-width='2' stroke-dasharray='2 8'/%3E%3Cpath d='M1180 900 C 1214 820 1150 780 1190 716' fill='none' stroke='rgba(47,158,68,0.20)' stroke-width='2' stroke-dasharray='2 8'/%3E%3Cg fill='rgba(47,158,68,0.24)'%3E%3Ccircle cx='150' cy='340' r='2.6'/%3E%3Ccircle cx='860' cy='470' r='2.4'/%3E%3Ccircle cx='1240' cy='380' r='2.6'/%3E%3Ccircle cx='420' cy='480' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), url("skins/meadow.jpg"); --wb-deco-opacity: 0.8; } /* ── 深色工作台（ADR-060 第二批，v4.76：夜间作业场景）────────────── 定位：纯色深空灰壳层 + 恒白画布，无装饰的专业工作台—— 界面暗下来不刺眼，看图稿颜色不受影响（--wb-paper 恒白铁律不动）。与 dark（星刃白瓷）的差异：dark = 渐变底 + 星刃线稿装饰； workbench-dark = 纯色无装饰（壳层第三分支，00 index.html 分流），壳层底色/面板/边线为纯色深空灰系（#141b28 / #1b2230 / #2a3242，前期方案样张经 user 认可的取值），文字/语义色沿用 dark 配对，强调色保留 #38bdf8 不换。默认皮肤不变，用户在皮肤菜单手动切换（WB_THEMES 第 11 套）。 */ [data-theme="workbench-dark"] { color-scheme: dark; --wb-bg: #141b28; --wb-bg-2: #1b2230; --wb-panel: #1b2230; --wb-panel-solid: #1b2230; --wb-border: #2a3242; --wb-text: #f0f4f8; --wb-text-2: #a9b4c8; --wb-text-3: #6b7890; --wb-accent: #38bdf8; --wb-accent-2: #0ea5e9; --wb-accent-soft: rgba(56, 189, 248, .16); --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ --wb-hover: rgba(255, 255, 255, .07); /* 与 dark 同值（非差异化键值纪律） */ --wb-active: #38bdf8; --wb-ok: #4ade80; --wb-ok-soft: rgba(74, 222, 128, .14); --wb-danger: #f87171; --wb-danger-soft: rgba(248, 113, 113, .14); --wb-warn: #fbbf24; --wb-warn-soft: rgba(251, 191, 36, .14); --wb-info: #818cf8; /* 与 dark 同值（键集 + 非差异化键值双纪律） */ --wb-info-soft: rgba(129, 140, 248, .16); --wb-grad-accent: linear-gradient(135deg, #5ee7ff, #2ab8e8); --wb-input-bg: #0b0d12; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 30px rgba(0, 0, 0, .45); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .65); --wb-glass-blur: 20px; } /* ═══════════ 科技 HUD（v4.87：壳层深空黑 + 蓝紫渐变 + 动态光效）═══════════ 诉求：个人工作平台操作界面向科技 HUD 游戏界面靠拢（非做游戏，仅换肤）。实现：L1 换肤（深空黑壳层 + 蓝紫渐变强调）+ L2 装饰层（星空 + 全息网格 --wb-deco）+ L3 动效（星空呼吸 + 全息扫描线 + 面板/按钮发光呼吸）。画布铁律不变：--wb-paper 恒白 #fff、--wb-canvas 恒浅灰 #f4f6fb—— 科技感只落在壳层（顶栏/侧栏/面板/按钮），画布区仍是白纸。强调色「蓝紫渐变」：--wb-accent 青 #00d4ff 为起点、--wb-accent-2 紫 #a78bfa 为终点，主按钮/高亮发光由下方动效规则合成渐变。注册：00-平台核心/index.html 的 WB_THEMES 第 12 套。 */ [data-theme="tech-hud"] { color-scheme: dark; --wb-bg: #060912; --wb-bg-2: #0c1120; --wb-panel: rgba(148, 163, 255, .055); --wb-panel-solid: #0f1626; --wb-border: rgba(148, 163, 255, .16); --wb-text: #eaf2ff; --wb-text-2: #a9b6d8; --wb-text-3: #64748f; --wb-accent: #00d4ff; --wb-accent-2: #a78bfa; --wb-accent-soft: rgba(99, 102, 241, .16); --wb-accent-3: #22d3ee; /* B0-1 §G1 D-1：暗色三档强调 cyan-400 */ --wb-hover: rgba(148, 163, 255, .10); --wb-active: #00d4ff; --wb-ok: #34d399; --wb-ok-soft: rgba(52, 211, 153, .14); --wb-danger: #fb7185; --wb-danger-soft: rgba(251, 113, 133, .14); --wb-warn: #fbbf24; --wb-warn-soft: rgba(251, 191, 36, .14); --wb-info: #a5b4fc; /* B0-1 §G1 补入：tech-hud 邻近色系 indigo-300，居于青→紫渐变中段，待设计复核 */ --wb-info-soft: rgba(165, 180, 252, .14); --wb-grad-accent: linear-gradient(135deg, #00d4ff, #a78bfa); /* B0-1 §G1：tech-hud 自有青→紫渐变 */ --wb-input-bg: #0d1424; --wb-paper: #ffffff; --wb-canvas: #f4f6fb; /* B5-b 排除14：模态遮罩底 / 中性 slate 徽标底（全主题同值起步，个别主题后续可微调） */ --wb-scrim: rgba(0, 0, 0, .32); --wb-slate-soft: rgba(100, 116, 139, .12); --wb-radius: 14px; --wb-radius-sm: 8px; --wb-shadow: 0 10px 30px rgba(0, 0, 0, .55); --wb-shadow-hover: 0 22px 52px rgba(0, 0, 0, .75); --wb-glass-blur: 20px; /* 动效专用 token（仅本皮肤消费，不进入其他皮肤） */ --tech-glow-cyan: rgba(0, 212, 255, .28); --tech-glow-violet: rgba(167, 139, 250, .22); --tech-glow-ring: rgba(0, 212, 255, .35); --wb-deco: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201600%20900'%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CradialGradient%20id%3D'a'%20cx%3D'0.82'%20cy%3D'0.10'%20r%3D'0.62'%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'0'%20stop-color%3D'rgba(0%2C212%2C255%2C0.16)'%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'0.55'%20stop-color%3D'rgba(0%2C212%2C255%2C0.05)'%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'1'%20stop-color%3D'rgba(0%2C212%2C255%2C0)'%2F%3E%0A%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D'b'%20cx%3D'0.10'%20cy%3D'0.92'%20r%3D'0.58'%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'0'%20stop-color%3D'rgba(167%2C139%2C250%2C0.15)'%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'0.55'%20stop-color%3D'rgba(167%2C139%2C250%2C0.05)'%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'1'%20stop-color%3D'rgba(167%2C139%2C250%2C0)'%2F%3E%0A%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%3ClinearGradient%20id%3D'c'%20x1%3D'0'%20y1%3D'0'%20x2%3D'1'%20y2%3D'0'%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'0'%20stop-color%3D'rgba(0%2C212%2C255%2C0)'%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'0.5'%20stop-color%3D'rgba(0%2C212%2C255%2C0.10)'%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D'1'%20stop-color%3D'rgba(0%2C212%2C255%2C0)'%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D'1600'%20height%3D'900'%20fill%3D'url(%23a)'%2F%3E%0A%20%20%3Crect%20width%3D'1600'%20height%3D'900'%20fill%3D'url(%23b)'%2F%3E%0A%20%20%3Cg%20stroke%3D'rgba(0%2C212%2C255%2C0.05)'%20stroke-width%3D'1'%3E%0A%20%20%20%20%3Cpath%20d%3D'M0%20150H1600%20M0%20300H1600%20M0%20450H1600%20M0%20600H1600%20M0%20750H1600'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M200%200V900%20M400%200V900%20M600%200V900%20M800%200V900%20M1000%200V900%20M1200%200V900%20M1400%200V900'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'1600'%20height%3D'900'%20fill%3D'url(%23c)'%20opacity%3D'0.5'%2F%3E%0A%20%20%3Cg%20fill%3D'rgba(214%2C240%2C255%2C0.9)'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'120'%20cy%3D'140'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'340'%20cy%3D'80'%20r%3D'1.2'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'520'%20cy%3D'220'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'760'%20cy%3D'120'%20r%3D'1.4'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'920'%20cy%3D'300'%20r%3D'1.2'%2F%3E%3Ccircle%20cx%3D'1180'%20cy%3D'180'%20r%3D'1.8'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'1420'%20cy%3D'260'%20r%3D'1.4'%2F%3E%3Ccircle%20cx%3D'210'%20cy%3D'420'%20r%3D'1.3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'430'%20cy%3D'540'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'690'%20cy%3D'470'%20r%3D'1.2'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'980'%20cy%3D'580'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'1240'%20cy%3D'520'%20r%3D'1.3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'1510'%20cy%3D'620'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'680'%20r%3D'1.4'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'360'%20cy%3D'760'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'820'%20cy%3D'720'%20r%3D'1.3'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'1140'%20cy%3D'790'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'1440'%20cy%3D'800'%20r%3D'1.3'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D'rgba(0%2C212%2C255%2C0.85)'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'260'%20cy%3D'300'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'640'%20cy%3D'150'%20r%3D'2'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'1060'%20cy%3D'380'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'1330'%20cy%3D'460'%20r%3D'2'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'560'%20cy%3D'680'%20r%3D'2.2'%2F%3E%3Ccircle%20cx%3D'880'%20cy%3D'180'%20r%3D'2'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D'rgba(167%2C139%2C250%2C0.85)'%3E%0A%20%20%20%20%3Ccircle%20cx%3D'180'%20cy%3D'250'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'780'%20cy%3D'360'%20r%3D'2.2'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'1090'%20cy%3D'160'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'1460'%20cy%3D'500'%20r%3D'2.2'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'300'%20cy%3D'640'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'700'%20cy%3D'820'%20r%3D'2.2'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D'none'%20stroke%3D'rgba(0%2C212%2C255%2C0.16)'%20stroke-width%3D'1.5'%3E%0A%20%20%20%20%3Cellipse%20cx%3D'1350'%20cy%3D'220'%20rx%3D'200'%20ry%3D'64'%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D'1350'%20cy%3D'220'%20rx%3D'126'%20ry%3D'40'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20stroke%3D'rgba(0%2C212%2C255%2C0.12)'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%3E%0A%20%20%20%20%3Cpath%20d%3D'M52%20826H360%20M424%20826H700%20M1180%20826H1500'%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20stroke%3D'rgba(0%2C212%2C255%2C0.30)'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%3E%0A%20%20%20%20%3Cpath%20d%3D'M52%2044V20%20M44%2044H20'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M1548%2044V20%20M1556%2044H1580'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M52%20856V880%20M44%20856H20'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M1548%20856V880%20M1556%20856H1580'%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); --wb-deco-opacity: 0.85; } /* ── 科技 HUD 动效层（L3）：星空呼吸 + 全息扫描线 + 面板/按钮发光 ── */ [data-theme="tech-hud"] body::before { animation: tech-breathe 8s ease-in-out infinite; } @keyframes tech-breathe { 0%, 100% { opacity: .45; } 50% { opacity: .8; } } /* 全息扫描线：青色横带自上而下缓慢扫过（HUD 观感） */ [data-theme="tech-hud"] body::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 140px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--tech-glow-cyan), var(--tech-glow-violet), transparent); animation: tech-scan 10s linear infinite; } @keyframes tech-scan { 0% { transform: translateY(-140px); } 100% { transform: translateY(100vh); } } /* 面板发光呼吸 */ [data-theme="tech-hud"] .card { animation: tech-card-glow 5s ease-in-out infinite; } @keyframes tech-card-glow { 0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); border-color: var(--wb-border); } 50% { box-shadow: 0 0 16px var(--tech-glow-cyan), 0 0 34px var(--tech-glow-violet); border-color: var(--tech-glow-ring); } } /* 主按钮：蓝紫渐变 + 发光（hover 增强） */ [data-theme="tech-hud"] .btn.accent { background: linear-gradient(135deg, var(--wb-accent), var(--wb-accent-2)); border-color: transparent; box-shadow: 0 4px 16px var(--tech-glow-cyan); } [data-theme="tech-hud"] .btn.accent:hover { background: linear-gradient(135deg, var(--wb-accent), var(--wb-accent-2)); box-shadow: 0 6px 22px var(--tech-glow-cyan), 0 0 42px var(--tech-glow-violet); } [data-theme="tech-hud"] .btn.accent:disabled, [data-theme="tech-hud"] .btn.accent[disabled] { box-shadow: none; } /* 选中态 / 徽标发光 */ [data-theme="tech-hud"] .btn.on, [data-theme="tech-hud"] .tag.info { box-shadow: 0 0 12px var(--tech-glow-cyan); border-color: var(--wb-accent); } /* hover 光效（通用按钮 / 卡片） */ [data-theme="tech-hud"] .btn:hover { box-shadow: 0 0 10px var(--tech-glow-cyan); } [data-theme="tech-hud"] .card:hover { box-shadow: 0 0 18px var(--tech-glow-cyan), 0 0 38px var(--tech-glow-violet); border-color: var(--tech-glow-ring); } /* 输入框聚焦发光 */ [data-theme="tech-hud"] :where(input, select, textarea):focus { box-shadow: 0 0 0 2px var(--tech-glow-cyan), 0 0 12px var(--tech-glow-violet); } /* 无障碍：系统减弱动效时全部静止 */ @media (prefers-reduced-motion: reduce) { [data-theme="tech-hud"] body::before, [data-theme="tech-hud"] body::after, [data-theme="tech-hud"] .card { animation: none; } } /* ═══════════ G2 线/填充令牌的 @supports 兜底（强制项，勿删）═══════════ 说明见文件头部 G2 块注释。本块必须排在文件末尾：它内部的 [data-theme="dark"] / [data-theme="light"] 选择器不能出现在真主题块之前，否则按「首个匹配」解析主题块的脚本会取错块。取值对应 color-mix() 的派生结果：暗色基底：--wb-text 近白 → 白叠加 8/14/24%（线）与 5/9/14%（填充）浅色基底：--wb-text 近黑 → 近黑 rgba(2,8,26) 同比例叠加 ═══════════════════════════════════════════════════════════════════ */ @supports not (color: color-mix(in srgb, red, blue)) { :root, [data-theme="dark"] { --wb-line-1: rgba(255, 255, 255, .08); --wb-line-2: rgba(255, 255, 255, .14); --wb-line-3: rgba(255, 255, 255, .24); --wb-fill-1: rgba(255, 255, 255, .05); --wb-fill-2: rgba(255, 255, 255, .09); --wb-fill-3: rgba(255, 255, 255, .14); } /* 浅色基底主题（light / storm / codex / meadow）：text 近黑，改用近黑叠加 */ [data-theme="light"], [data-theme="storm"], [data-theme="codex"], [data-theme="meadow"] { --wb-line-1: rgba(2, 8, 26, .08); --wb-line-2: rgba(2, 8, 26, .14); --wb-line-3: rgba(2, 8, 26, .24); --wb-fill-1: rgba(2, 8, 26, .05); --wb-fill-2: rgba(2, 8, 26, .09); --wb-fill-3: rgba(2, 8, 26, .14); } }