@huanban/rulego-editor-core 1.4.1 → 2.0.0

package/dist/chunks/{editor-core-styles-C1TbLgCK.js → editor-core-styles-CwjFPfAo.js}

@@ -1,6 +1,6 @@
-import { l as s } from "./vendor-logicflow-core-runtime-Cp6IBEjB.js";
-import { l as h } from "./vendor-logicflow-shared-C7YynLDn.js";
-const c = Object.freeze({
+import { l as A } from "./vendor-logicflow-core-runtime-DpsWXOGl.js";
+import { l as Y } from "./vendor-logicflow-shared-C_kIdBKO.js";
+const q = Object.freeze({
   "font-family": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
   "font-mono": 'ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Monaco, Consolas, monospace',
   "font-size-xs": "11px",
@@ -36,40 +36,13 @@ const c = Object.freeze({
   "ease-out": "cubic-bezier(0.25, 1, 0.5, 1)",
   "ease-expo": "cubic-bezier(0.16, 1, 0.3, 1)"
 });
-function _(r) {
-  const o = {};
-  return Object.entries(c).forEach(([t, a]) => {
-    o[`${r}-${t}`] = a;
-  }), o;
+function B(e) {
+  const t = {};
+  return Object.entries(q).forEach(([a, r]) => {
+    t[`${e}-${a}`] = r;
+  }), t;
 }
-const n = Object.freeze({
-  chrome: 10,
-  localOverlay: 190,
-  floating: 1e4,
-  drawerBackdrop: 10010,
-  drawer: 10011,
-  modalBackdrop: 10020,
-  modal: 10021,
-  attachment: 10030,
-  optionPicker: 10040,
-  confirmation: 10050,
-  notification: 10060
-}), f = Object.freeze({
-  chrome: "--hb-z-chrome",
-  localOverlay: "--hb-z-local-overlay",
-  floating: "--hb-z-floating",
-  drawerBackdrop: "--hb-z-drawer-backdrop",
-  drawer: "--hb-z-drawer",
-  modalBackdrop: "--hb-z-modal-backdrop",
-  modal: "--hb-z-modal",
-  attachment: "--hb-z-attachment",
-  optionPicker: "--hb-z-option-picker",
-  confirmation: "--hb-z-confirmation",
-  notification: "--hb-z-notification"
-}), x = `:root {
-${Object.keys(n).map((r) => `  ${f[r]}: ${n[r]};`).join(`
-`)}
-}`, g = _("--hb"), i = {
+const F = B("--hb"), _ = {
   /* ==================== 默认亮色 ==================== */
   default: {
     label: "经典",
@@ -116,45 +89,6 @@ ${Object.keys(n).map((r) => `  ${f[r]}: ${n[r]};`).join(`
       "--hb-overlay": "rgba(0,0,0,0.3)"
     }
   },
-  /* ==================== 暗夜模式 ==================== */
-  dark: {
-    label: "暗夜",
-    labelEn: "Dark",
-    vars: {
-      "--hb-bg-root": "#1a1a2e",
-      "--hb-bg-toolbar": "#16213e",
-      "--hb-bg-sidebar": "#1a1a2e",
-      "--hb-bg-canvas": "#0f3460",
-      "--hb-bg-drawer": "#16213e",
-      "--hb-bg-modal": "#16213e",
-      "--hb-bg-hover": "#1a3a5c",
-      "--hb-bg-active": "#1a3a5c",
-      "--hb-bg-section": "#0f3460",
-      "--hb-bg-input": "#1a1a2e",
-      "--hb-bg-tag": "#0f3460",
-      "--hb-text-primary": "#e0e0e0",
-      "--hb-text-secondary": "#b0b0b0",
-      "--hb-text-muted": "#808080",
-      "--hb-text-disabled": "#555555",
-      "--hb-color-primary": "#5dade2",
-      "--hb-color-primary-light": "#1a3a5c",
-      "--hb-color-primary-bg": "#162d50",
-      "--hb-color-success": "#2ecc71",
-      "--hb-color-warning": "#f39c12",
-      "--hb-color-danger": "#e74c3c",
-      "--hb-color-title": "#e74c3c",
-      "--hb-border-color": "#2c3e50",
-      "--hb-border-light": "#1e2d3d",
-      "--hb-border-strong": "#34495e",
-      "--hb-radius-sm": "4px",
-      "--hb-radius-md": "6px",
-      "--hb-radius-lg": "8px",
-      "--hb-shadow-sm": "0 1px 4px rgba(0,0,0,0.3)",
-      "--hb-shadow-md": "0 4px 12px rgba(0,0,0,0.4)",
-      "--hb-shadow-lg": "0 8px 32px rgba(0,0,0,0.5)",
-      "--hb-overlay": "rgba(0,0,0,0.6)"
-    }
-  },
   /* ==================== 自然绿 ==================== */
   nature: {
     label: "自然",
@@ -273,7 +207,7 @@ ${Object.keys(n).map((r) => `  ${f[r]}: ${n[r]};`).join(`
     }
   },
   /* ==================== 现代风格 ==================== */
-  /* 参考 RuleChainEditor.vue 的视觉设计: 大圆角节点、蓝色选中发光、柔和阴影 */
+  /* 现代主题：大圆角节点、清晰选中态和柔和阴影 */
   modern: {
     label: "现代",
     labelEn: "Modern",
@@ -295,7 +229,7 @@ ${Object.keys(n).map((r) => `  ${f[r]}: ${n[r]};`).join(`
       "--hb-text-secondary": "#64748b",
       "--hb-text-muted": "#94a3b8",
       "--hb-text-disabled": "#cbd5e1",
-      // 主题色 — 蓝色系 (参考 #3b82f6)
+      // 主题色 — 清晰的蓝色操作色
       "--hb-color-primary": "#3b82f6",
       "--hb-color-primary-light": "#bfdbfe",
       "--hb-color-primary-bg": "#eff6ff",
@@ -340,58 +274,362 @@ ${Object.keys(n).map((r) => `  ${f[r]}: ${n[r]};`).join(`
     }
   }
 };
-function e(r) {
+function f(e) {
   return {
-    "--hb-bg-root": r.root,
-    "--hb-bg-toolbar": r.toolbar,
-    "--hb-bg-sidebar": r.sidebar,
-    "--hb-bg-canvas": r.canvas,
-    "--hb-bg-drawer": r.toolbar,
-    "--hb-bg-modal": r.toolbar,
-    "--hb-bg-hover": r.hover,
-    "--hb-bg-active": r.active,
-    "--hb-bg-section": r.section,
-    "--hb-bg-input": r.input,
-    "--hb-bg-tag": r.tag,
-    "--hb-text-primary": r.text,
-    "--hb-text-secondary": r.secondary,
-    "--hb-text-muted": r.muted,
-    "--hb-text-disabled": r.disabled,
-    "--hb-color-primary": r.primary,
-    "--hb-color-primary-light": r.primaryLight,
-    "--hb-color-primary-bg": r.primaryBg,
-    "--hb-color-success": r.success,
-    "--hb-color-warning": r.warning,
-    "--hb-color-danger": r.danger,
-    "--hb-color-title": r.title,
-    "--hb-border-color": r.border,
-    "--hb-border-light": r.borderLight,
-    "--hb-border-strong": r.borderStrong,
-    "--hb-radius-sm": r.radiusSm || "6px",
-    "--hb-radius-md": r.radiusMd || "8px",
-    "--hb-radius-lg": r.radiusLg || "10px",
-    "--hb-shadow-sm": `0 1px 4px ${r.shadowColor}`,
-    "--hb-shadow-md": `0 4px 12px ${r.shadowColor}`,
-    "--hb-shadow-lg": `0 8px 28px ${r.shadowColor}`,
-    "--hb-overlay": r.overlay,
-    "--hb-node-selected-stroke": r.primary,
-    "--hb-node-selected-shadow": `0 0 8px ${r.shadowColor}`,
+    "--hb-bg-root": e.root,
+    "--hb-bg-toolbar": e.toolbar,
+    "--hb-bg-sidebar": e.sidebar,
+    "--hb-bg-canvas": e.canvas,
+    "--hb-bg-drawer": e.toolbar,
+    "--hb-bg-modal": e.toolbar,
+    "--hb-bg-hover": e.hover,
+    "--hb-bg-active": e.active,
+    "--hb-bg-section": e.section,
+    "--hb-bg-input": e.input,
+    "--hb-bg-tag": e.tag,
+    "--hb-text-primary": e.text,
+    "--hb-text-secondary": e.secondary,
+    "--hb-text-muted": e.muted,
+    "--hb-text-disabled": e.disabled,
+    "--hb-color-primary": e.primary,
+    "--hb-color-primary-light": e.primaryLight,
+    "--hb-color-primary-bg": e.primaryBg,
+    "--hb-color-success": e.success,
+    "--hb-color-warning": e.warning,
+    "--hb-color-danger": e.danger,
+    "--hb-color-title": e.title,
+    "--hb-border-color": e.border,
+    "--hb-border-light": e.borderLight,
+    "--hb-border-strong": e.borderStrong,
+    "--hb-radius-sm": e.radiusSm || "6px",
+    "--hb-radius-md": e.radiusMd || "8px",
+    "--hb-radius-lg": e.radiusLg || "10px",
+    "--hb-shadow-sm": `0 1px 4px ${e.shadowColor}`,
+    "--hb-shadow-md": `0 4px 12px ${e.shadowColor}`,
+    "--hb-shadow-lg": `0 8px 28px ${e.shadowColor}`,
+    "--hb-overlay": e.overlay,
+    "--hb-node-selected-stroke": e.primary,
+    "--hb-node-selected-shadow": `0 0 8px ${e.shadowColor}`,
     "--hb-node-hover-brightness": "0.96",
-    "--hb-node-radius": r.radiusMd || "8px",
+    "--hb-node-radius": e.radiusMd || "8px",
     "--hb-node-shadow-offset": "2px",
-    "--hb-port-fill": r.input,
-    "--hb-port-stroke": r.muted,
-    "--hb-port-hover-fill": r.primary,
-    "--hb-port-hover-stroke": r.primary,
-    "--hb-edge-stroke": r.muted,
-    "--hb-edge-hover-stroke": r.primary
+    "--hb-port-fill": e.input,
+    "--hb-port-stroke": e.muted,
+    "--hb-port-hover-fill": e.primary,
+    "--hb-port-hover-stroke": e.primary,
+    "--hb-edge-stroke": e.muted,
+    "--hb-edge-hover-stroke": e.primary
+  };
+}
+const m = /* @__PURE__ */ new Set(["tech", "vscode"]), C = {
+  default: [68, 84, 0],
+  nature: [40, 86, -10],
+  elegant: [46, 88, 8],
+  tech: [34, 25, -5],
+  modern: [72, 93, 0],
+  colorful: [82, 82, 4],
+  "ant-blue": [70, 89, -3],
+  material: [58, 87, 3],
+  tailwind: [76, 91, -6],
+  github: [36, 93, 0],
+  vscode: [25, 27, 5],
+  apple: [48, 92, -2]
+}, V = {
+  endpoint: 166,
+  common: 208,
+  filter: 44,
+  transform: 192,
+  action: 354,
+  external: 272,
+  flow: 218,
+  ai: 280,
+  ci: 24,
+  iot: 146,
+  stats: 178,
+  knowledge: 258,
+  storage: 184,
+  discovery: 158,
+  image: 326,
+  audio: 232,
+  file: 32,
+  custom: 314,
+  other: 218,
+  start: 205,
+  end: 355,
+  comment: 50
+};
+function N(e) {
+  const [t, a, r] = C[e] || C.default;
+  return Object.fromEntries(Object.entries(V).flatMap(([i, d]) => [
+    [`--rg-node-${i}-bg`, `hsl(${(d + r + 360) % 360}, ${t}%, ${a}%)`],
+    [`--rg-node-${i}-stroke`, `hsl(${(d + r + 360) % 360}, ${t}%, ${m.has(e) ? 68 : 42}%)`]
+  ]));
+}
+function L(e) {
+  const t = _[e], a = (t == null ? void 0 : t.vars) || {}, r = m.has(e), i = a["--hb-color-primary"] || "#409eff", d = a["--hb-text-muted"] || "#909399", p = a["--hb-bg-toolbar"] || "#ffffff";
+  return {
+    "--hb-canvas-grid-color": a["--hb-canvas-grid-color"] || (r ? "rgba(148,163,184,0.22)" : "rgba(100,116,139,0.16)"),
+    "--hb-canvas-grid-size": a["--hb-canvas-grid-size"] || "20px",
+    "--hb-node-selected-stroke": a["--hb-node-selected-stroke"] || i,
+    "--hb-node-selected-shadow": a["--hb-node-selected-shadow"] || `0 0 0 2px ${i}, 0 4px 16px ${r ? "rgba(0,0,0,0.38)" : "rgba(15,23,42,0.16)"}`,
+    "--hb-node-selected-filter": a["--hb-node-selected-filter"] || `drop-shadow(0 0 5px ${r ? i : `${i}55`})`,
+    "--hb-node-hover-brightness": a["--hb-node-hover-brightness"] || (r ? "1.08" : "0.98"),
+    "--hb-node-radius": a["--hb-node-radius"] || a["--hb-radius-md"] || "8px",
+    "--hb-node-border": a["--hb-node-border"] || a["--hb-border-color"] || "#dcdfe6",
+    "--hb-node-shadow-offset": a["--hb-node-shadow-offset"] || "2px",
+    "--hb-node-shadow-color": a["--hb-node-shadow-color"] || (r ? "rgba(0,0,0,0.34)" : "rgba(15,23,42,0.14)"),
+    // Classic glyphs are white; their inset must remain legible on pale category surfaces.
+    "--hb-node-icon-bg": a["--hb-node-icon-bg"] || (e === "default" ? "rgba(15,23,42,0.50)" : r ? "rgba(255,255,255,0.08)" : "rgba(15,23,42,0.06)"),
+    "--hb-node-icon-divider": a["--hb-node-icon-divider"] || (r ? "rgba(255,255,255,0.16)" : "rgba(15,23,42,0.10)"),
+    "--hb-node-text": a["--hb-node-text"] || a["--hb-text-primary"] || "#333333",
+    "--hb-port-fill": a["--hb-port-fill"] || p,
+    "--hb-port-stroke": a["--hb-port-stroke"] || d,
+    "--hb-port-radius": a["--hb-port-radius"] || (e === "modern" || e === "apple" ? "50%" : "3px"),
+    "--hb-port-hover-fill": a["--hb-port-hover-fill"] || i,
+    "--hb-port-hover-stroke": a["--hb-port-hover-stroke"] || i,
+    "--hb-edge-stroke": a["--hb-edge-stroke"] || d,
+    "--hb-edge-hover-stroke": a["--hb-edge-hover-stroke"] || i,
+    "--hb-edge-selected-stroke": a["--hb-edge-selected-stroke"] || i,
+    "--hb-edge-label-bg": a["--hb-edge-label-bg"] || p,
+    "--hb-edge-label-color": a["--hb-edge-label-color"] || a["--hb-text-secondary"] || d
+  };
+}
+function o(e, t, a) {
+  return e[t] || a;
+}
+function X(e) {
+  const t = v(e), a = _[t], r = { ...a == null ? void 0 : a.vars, ...L(t) }, i = o(r, "--hb-color-primary", "#409eff"), d = o(r, "--hb-color-danger", "#f56c6c"), p = o(r, "--hb-color-warning", "#e6a23c"), g = o(r, "--hb-color-success", "#67c23a"), h = o(r, "--hb-text-muted", "#909399"), b = o(r, "--hb-text-primary", "#333333"), x = o(r, "--hb-text-secondary", "#606266"), n = o(r, "--hb-bg-toolbar", "#ffffff");
+  return {
+    "--rg-bg-primary": o(r, "--hb-bg-root", n),
+    "--rg-bg-secondary": o(r, "--hb-bg-section", n),
+    "--rg-bg-tertiary": o(r, "--hb-bg-tag", n),
+    "--rg-bg-hover": o(r, "--hb-bg-hover", n),
+    "--rg-bg-active": o(r, "--hb-bg-active", n),
+    "--rg-bg-overlay": o(r, "--hb-overlay", "rgba(0,0,0,0.3)"),
+    "--rg-text-primary": b,
+    "--rg-text-secondary": x,
+    "--rg-text-tertiary": h,
+    "--rg-text-inverse": "#ffffff",
+    "--rg-text-link": i,
+    "--rg-text-link-hover": i,
+    "--rg-border-primary": o(r, "--hb-border-color", "#dcdfe6"),
+    "--rg-border-secondary": o(r, "--hb-border-strong", "#cbd5e1"),
+    "--rg-border-focus": i,
+    "--rg-border-error": d,
+    "--rg-border-radius": o(r, "--hb-radius-md", "8px"),
+    "--rg-border-radius-sm": o(r, "--hb-radius-sm", "4px"),
+    "--rg-border-radius-lg": o(r, "--hb-radius-lg", "12px"),
+    "--rg-border-radius-xl": o(r, "--hb-radius-lg", "12px"),
+    "--rg-shadow-sm": o(r, "--hb-shadow-sm", "0 1px 4px rgba(0,0,0,0.08)"),
+    "--rg-shadow-md": o(r, "--hb-shadow-md", "0 4px 12px rgba(0,0,0,0.12)"),
+    "--rg-shadow-lg": o(r, "--hb-shadow-lg", "0 8px 28px rgba(0,0,0,0.15)"),
+    "--rg-shadow-xl": o(r, "--hb-shadow-lg", "0 8px 28px rgba(0,0,0,0.15)"),
+    "--rg-shadow-focus": `0 0 0 3px ${i}44`,
+    "--rg-shadow-inset": "inset 0 2px 4px rgba(0,0,0,0.04)",
+    "--rg-canvas-bg": o(r, "--hb-bg-canvas", n),
+    "--rg-canvas-grid-color": o(r, "--hb-canvas-grid-color", "#e8eaee"),
+    "--rg-canvas-grid-size": o(r, "--hb-canvas-grid-size", "20px"),
+    "--rg-node-filter-bg": o(r, "--hb-bg-tag", n),
+    "--rg-node-filter-border": p,
+    "--rg-node-filter-text": b,
+    "--rg-node-transform-bg": o(r, "--hb-color-primary-bg", n),
+    "--rg-node-transform-border": i,
+    "--rg-node-transform-text": b,
+    "--rg-node-action-bg": o(r, "--hb-color-primary-bg", n),
+    "--rg-node-action-border": d,
+    "--rg-node-action-text": b,
+    "--rg-node-external-bg": o(r, "--hb-bg-tag", n),
+    "--rg-node-external-border": p,
+    "--rg-node-external-text": b,
+    "--rg-node-flow-bg": o(r, "--hb-color-primary-bg", n),
+    "--rg-node-flow-border": i,
+    "--rg-node-flow-text": b,
+    "--rg-node-start-bg": i,
+    "--rg-node-start-border": i,
+    "--rg-node-start-text": "#ffffff",
+    "--rg-node-border": o(r, "--hb-border-color", "#dcdfe6"),
+    "--rg-node-shadow": o(r, "--hb-shadow-md", "0 4px 12px rgba(0,0,0,0.12)"),
+    "--rg-node-shadow-hover": o(r, "--hb-shadow-lg", "0 8px 28px rgba(0,0,0,0.15)"),
+    "--rg-node-shadow-selected": o(r, "--hb-node-selected-shadow", `0 0 0 2px ${i}`),
+    "--rg-node-shadow-color": o(r, "--hb-node-shadow-color", "rgba(0,0,0,0.14)"),
+    "--rg-node-icon-bg": o(r, "--hb-node-icon-bg", "rgba(15,23,42,0.06)"),
+    "--rg-node-icon-divider": o(r, "--hb-node-icon-divider", "rgba(15,23,42,0.10)"),
+    "--rg-node-text": b,
+    "--rg-node-selected-stroke": o(r, "--hb-node-selected-stroke", i),
+    "--rg-node-selected-filter": o(r, "--hb-node-selected-filter", "none"),
+    "--rg-node-width": "120px",
+    "--rg-node-min-height": "30px",
+    "--rg-node-font-size": o(r, "--hb-font-size-base", "13px"),
+    "--rg-edge-color": o(r, "--hb-edge-stroke", h),
+    "--rg-edge-color-hover": o(r, "--hb-edge-hover-stroke", i),
+    "--rg-edge-color-selected": o(r, "--hb-edge-selected-stroke", i),
+    "--rg-edge-width": "2px",
+    "--rg-edge-label-bg": o(r, "--hb-edge-label-bg", n),
+    "--rg-edge-label-color": o(r, "--hb-edge-label-color", x),
+    "--rg-edge-label-font-size": "11px",
+    "--rg-toolbar-bg": n,
+    "--rg-toolbar-border": o(r, "--hb-border-color", "#dcdfe6"),
+    "--rg-toolbar-shadow": o(r, "--hb-shadow-sm", "0 2px 8px rgba(0,0,0,0.06)"),
+    "--rg-toolbar-btn-bg": "transparent",
+    "--rg-toolbar-btn-bg-hover": o(r, "--hb-bg-hover", n),
+    "--rg-toolbar-btn-bg-active": o(r, "--hb-bg-active", n),
+    "--rg-toolbar-btn-color": x,
+    "--rg-toolbar-btn-color-hover": i,
+    "--rg-toolbar-btn-radius": o(r, "--hb-radius-sm", "6px"),
+    "--rg-sidebar-bg": o(r, "--hb-bg-sidebar", n),
+    "--rg-sidebar-border": o(r, "--hb-border-color", "#dcdfe6"),
+    "--rg-sidebar-width": "200px",
+    "--rg-sidebar-item-bg-hover": o(r, "--hb-bg-hover", n),
+    "--rg-sidebar-item-bg-active": o(r, "--hb-bg-active", n),
+    "--rg-sidebar-group-header-bg": o(r, "--hb-bg-section", n),
+    "--rg-panel-bg": o(r, "--hb-bg-drawer", n),
+    "--rg-panel-border": o(r, "--hb-border-color", "#dcdfe6"),
+    "--rg-panel-width": "320px",
+    "--rg-panel-shadow": o(r, "--hb-shadow-md", "0 4px 12px rgba(0,0,0,0.12)"),
+    "--rg-input-bg": o(r, "--hb-bg-input", n),
+    "--rg-input-border": o(r, "--hb-border-color", "#dcdfe6"),
+    "--rg-input-border-focus": i,
+    "--rg-input-text": b,
+    "--rg-input-placeholder": h,
+    "--rg-input-shadow-focus": `0 0 0 3px ${i}33`,
+    "--rg-btn-primary-bg": i,
+    "--rg-btn-primary-bg-hover": i,
+    "--rg-btn-primary-text": "#ffffff",
+    "--rg-btn-primary-shadow": o(r, "--hb-shadow-sm", "0 2px 6px rgba(0,0,0,0.10)"),
+    "--rg-btn-secondary-bg": n,
+    "--rg-btn-secondary-bg-hover": o(r, "--hb-bg-hover", n),
+    "--rg-btn-secondary-text": b,
+    "--rg-btn-danger-bg": d,
+    "--rg-btn-danger-bg-hover": d,
+    "--rg-btn-danger-text": "#ffffff",
+    "--rg-color-success": g,
+    "--rg-color-warning": p,
+    "--rg-color-error": d,
+    "--rg-color-info": i,
+    // editor-ui 历史变量别名。保留别名可让纯 DOM UI 与 Core/standalone
+    // 使用同一套主题，不再只在 light/dark 两套固定样式之间切换。
+    "--rg-primary-color": i,
+    "--rg-success-color": g,
+    "--rg-warning-color": p,
+    "--rg-danger-color": d,
+    "--rg-text-color": b,
+    "--rg-border-color": o(r, "--hb-border-color", "#dcdfe6"),
+    "--rg-hover-bg": o(r, "--hb-bg-hover", n),
+    "--rg-active-bg": o(r, "--hb-bg-active", n),
+    "--rg-badge-bg": o(r, "--hb-bg-tag", n),
+    "--rg-switch-off-bg": o(r, "--hb-text-disabled", "#c0c4cc"),
+    "--rg-console-bg": o(r, "--hb-bg-section", n),
+    "--rg-console-text": b,
+    "--rg-transition-fast": o(r, "--hb-duration-fast", "100ms"),
+    "--rg-transition-normal": o(r, "--hb-duration", "160ms"),
+    "--rg-transition-slow": o(r, "--hb-duration-slow", "240ms"),
+    ...N(t)
+  };
+}
+function M(e) {
+  return m.has(v(e));
+}
+function T(e) {
+  const t = v(e), a = _[t], r = {
+    ...F,
+    ...(a == null ? void 0 : a.vars) || {},
+    ...L(t)
+  }, i = X(t), d = o(r, "--hb-color-primary", "#409eff"), p = o(r, "--hb-color-success", "#67c23a"), g = o(r, "--hb-color-warning", "#e6a23c"), h = o(r, "--hb-color-danger", "#f56c6c"), b = o(r, "--hb-text-primary", "#303133"), x = o(r, "--hb-text-secondary", "#606266"), n = o(r, "--hb-text-muted", "#909399"), O = o(r, "--hb-text-disabled", "#c0c4cc"), l = o(r, "--hb-bg-toolbar", "#ffffff"), s = o(r, "--hb-bg-section", "#f8fafc"), u = o(r, "--hb-border-color", "#dcdfe6"), w = o(r, "--hb-border-light", "#ebeef5"), I = o(r, "--hb-radius-md", "8px"), y = o(r, "--hb-shadow-md", "0 4px 12px rgba(0,0,0,0.12)"), k = s, c = M(t), R = {
+    bg: k,
+    text: b,
+    "gutter-bg": s,
+    "gutter-text": c ? "#a5adb8" : "#626d79",
+    "active-line": o(r, "--hb-bg-hover", l),
+    selection: `color-mix(in srgb, ${d} 24%, transparent)`,
+    caret: b,
+    keyword: c ? "#d8a8ed" : "#873784",
+    string: c ? "#a5d6ad" : "#146b3a",
+    number: c ? "#f5b979" : "#99400e",
+    type: c ? "#79cbd9" : "#09647a",
+    variable: b,
+    comment: c ? "#a5adb8" : "#626d79",
+    operator: c ? "#a5c9ed" : "#254f7c",
+    function: c ? "#f1d78a" : "#775b05",
+    bracket: x,
+    "tooltip-bg": l
+  }, D = Object.fromEntries(Object.entries(R).flatMap(([z, j]) => [
+    [`--hb-code-${z}`, j],
+    [`--rge-code-${z}`, j]
+  ]));
+  return {
+    ...r,
+    ...i,
+    "--hb-bg-panel": l,
+    "--hb-panel-bg": l,
+    "--hb-panel-border": u,
+    "--hb-bg-main": o(r, "--hb-bg-root", l),
+    "--hb-primary": d,
+    "--hb-bg-muted": s,
+    "--hb-border": u,
+    "--hb-success": p,
+    "--hb-warning": g,
+    "--hb-danger": h,
+    "--hb-warning-soft": o(r, "--hb-bg-tag", s),
+    "--hb-success-soft": `color-mix(in srgb, ${p} 12%, ${l})`,
+    "--hb-danger-soft": `color-mix(in srgb, ${h} 12%, ${l})`,
+    "--hb-info-soft": o(r, "--hb-color-primary-bg", s),
+    "--rge-bg": o(r, "--hb-bg-root", l),
+    "--rge-surface": l,
+    "--rge-surface-muted": s,
+    "--rge-panel-bg": s,
+    "--rge-toolbar-bg": l,
+    "--rge-border": u,
+    "--rge-border-light": w,
+    "--rge-text": b,
+    "--rge-text-secondary": x,
+    "--rge-text-muted": n,
+    "--rge-text-disabled": O,
+    "--rge-primary": d,
+    "--rge-primary-soft": o(r, "--hb-color-primary-bg", s),
+    "--rge-success": p,
+    "--rge-warning": g,
+    "--rge-danger": h,
+    "--rge-danger-soft": `color-mix(in srgb, ${h} 10%, transparent)`,
+    "--rge-success-soft": `color-mix(in srgb, ${p} 12%, ${l})`,
+    "--rge-warning-soft": `color-mix(in srgb, ${g} 12%, ${l})`,
+    "--rge-shadow-dropdown": y,
+    "--rge-code-bg": k,
+    "--rge-code-inline-bg": M(t) ? "rgba(255,255,255,0.08)" : "rgba(15,23,42,0.08)",
+    ...D,
+    "--huanban-rg-bg": o(r, "--hb-bg-root", l),
+    "--huanban-rg-surface": s,
+    "--huanban-rg-card": l,
+    "--huanban-rg-text": b,
+    "--huanban-rg-text-secondary": x,
+    "--huanban-rg-text-muted": n,
+    "--huanban-rg-border": u,
+    "--huanban-rg-border-soft": w,
+    "--huanban-rg-primary": d,
+    "--huanban-rg-danger": h,
+    "--huanban-rg-success": p,
+    "--huanban-rg-warning": g,
+    "--huanban-rg-row-bg": l,
+    "--huanban-rg-row-hover": o(r, "--hb-bg-hover", s),
+    "--huanban-rg-input-bg": o(r, "--hb-bg-input", l),
+    "--huanban-rg-icon-bg": d,
+    "--huanban-rg-shadow": y,
+    "--huanban-rg-radius": I
   };
 }
-Object.assign(i, {
+function Z(e) {
+  const t = v(e), a = _[t];
+  return {
+    name: t,
+    label: (a == null ? void 0 : a.labelEn) || t,
+    isDark: m.has(t),
+    variables: T(t)
+  };
+}
+Object.assign(_, {
   colorful: {
     label: "彩色",
     labelEn: "Colorful",
-    vars: e({
+    vars: f({
       root: "#f8fafc",
       toolbar: "#ffffff",
       sidebar: "#ffffff",
@@ -422,7 +660,7 @@ Object.assign(i, {
   "ant-blue": {
     label: "蚂蚁蓝",
     labelEn: "Ant Blue",
-    vars: e({
+    vars: f({
       root: "#f0f7ff",
       toolbar: "#ffffff",
       sidebar: "#f7fbff",
@@ -456,7 +694,7 @@ Object.assign(i, {
   material: {
     label: "Material",
     labelEn: "Material",
-    vars: e({
+    vars: f({
       root: "#f8fbff",
       toolbar: "#ffffff",
       sidebar: "#ffffff",
@@ -490,7 +728,7 @@ Object.assign(i, {
   tailwind: {
     label: "Tailwind",
     labelEn: "Tailwind",
-    vars: e({
+    vars: f({
       root: "#f8fafc",
       toolbar: "#ffffff",
       sidebar: "#ffffff",
@@ -524,7 +762,7 @@ Object.assign(i, {
   github: {
     label: "GitHub",
     labelEn: "GitHub",
-    vars: e({
+    vars: f({
       root: "#f6f8fa",
       toolbar: "#ffffff",
       sidebar: "#ffffff",
@@ -558,7 +796,7 @@ Object.assign(i, {
   vscode: {
     label: "VS Code",
     labelEn: "VS Code",
-    vars: e({
+    vars: f({
       root: "#1e1e1e",
       toolbar: "#252526",
       sidebar: "#252526",
@@ -592,7 +830,7 @@ Object.assign(i, {
   apple: {
     label: "苹果",
     labelEn: "Apple",
-    vars: e({
+    vars: f({
       root: "#f5f5f7",
       toolbar: "#ffffff",
       sidebar: "#fbfbfd",
@@ -624,7 +862,9 @@ Object.assign(i, {
     })
   }
 });
-const u = {
+const P = {
+  // 暗夜主题已下线；保留兼容映射，避免旧配置渲染成不可读的暗色界面。
+  dark: "default",
   light: "default",
   classic: "default",
   blue: "tech",
@@ -637,44 +877,403 @@ const u = {
   "visual-studio-code": "vscode",
   mac: "apple",
   macos: "apple"
-};
-function w(r) {
-  const o = String(r || "").trim().toLowerCase();
-  return o ? Object.prototype.hasOwnProperty.call(i, o) ? o : u[o] || "default" : "default";
-}
-function m() {
-  let r = "";
-  for (const [o, t] of Object.entries(i)) {
-    const a = o === "default" ? '.huanban_rulego_editor_root, .huanban_rulego_editor_root[data-theme="default"]' : `.huanban_rulego_editor_root[data-theme="${o}"]`, l = Object.entries({ ...g, ...t.vars }).map(([b, p]) => `  ${b}: ${p};`).join(`
+}, E = "auto";
+function v(e) {
+  const t = String(e || "").trim().toLowerCase();
+  return t ? t === E ? E : Object.prototype.hasOwnProperty.call(_, t) ? t : P[t] || "default" : "default";
+}
+function H() {
+  let e = "";
+  for (const t of Object.keys(_)) {
+    const a = t === "default" ? '.huanban_rulego_editor_root, .huanban_rulego_editor_root[data-theme="default"]' : `.huanban_rulego_editor_root[data-theme="${t}"]`, r = Object.entries(T(t)).map(([i, d]) => `  ${i}: ${d};`).join(`
 `);
-    r += `${a} {
-${l}
+    e += `${a} {
+${r}
 }
 
 `;
   }
-  return r;
+  return e;
 }
-function k(r) {
-  const o = r.toLowerCase().includes("en");
-  return Object.entries(i).map(([t, a]) => ({
-    id: t,
-    label: o ? a.labelEn : a.label
+function rr(e) {
+  const t = e.toLowerCase().includes("en");
+  return Object.entries(_).map(([a, r]) => ({
+    id: a,
+    label: t ? r.labelEn : r.label
   }));
 }
-let d = !1;
-function z() {
-  if (d) return;
-  d = !0;
-  const r = document.createElement("style");
-  r.id = "huanban_rulego_editor_styles", r.textContent = `
+const S = Object.freeze({
+  chrome: 10,
+  localOverlay: 190,
+  floating: 1e4,
+  drawerBackdrop: 10010,
+  drawer: 10011,
+  modalBackdrop: 10020,
+  modal: 10021,
+  attachment: 10030,
+  optionPicker: 10040,
+  confirmation: 10050,
+  notification: 10060
+}), U = Object.freeze({
+  chrome: "--hb-z-chrome",
+  localOverlay: "--hb-z-local-overlay",
+  floating: "--hb-z-floating",
+  drawerBackdrop: "--hb-z-drawer-backdrop",
+  drawer: "--hb-z-drawer",
+  modalBackdrop: "--hb-z-modal-backdrop",
+  modal: "--hb-z-modal",
+  attachment: "--hb-z-attachment",
+  optionPicker: "--hb-z-option-picker",
+  confirmation: "--hb-z-confirmation",
+  notification: "--hb-z-notification"
+}), G = `:root {
+${Object.keys(S).map((e) => `  ${U[e]}: ${S[e]};`).join(`
+`)}
+}`, K = `
+.hb_workspace_tabs { display:flex; flex:none; min-width:0; min-height:34px; border-bottom:1px solid var(--hb-border-color); background:var(--hb-bg-toolbar); }
+.hb_workspace_tabs[hidden], .hb_workspace_nav[hidden], .hb_workspace_palette[hidden], .hb_workspace_resources[hidden] { display:none!important; }
+.hb_workspace_tab_list { display:flex; flex:1; min-width:0; overflow-x:auto; scrollbar-width:thin; }
+.hb_workspace_tab { display:flex; align-items:center; flex:none; min-width:100px; max-width:220px; border-right:1px solid var(--hb-border-color); border-top:2px solid transparent; }
+.hb_workspace_tab.is_active { background:var(--hb-bg-canvas,var(--hb-bg-panel)); border-top-color:var(--hb-color-primary); }
+.hb_workspace_tabs button, .hb_workspace_nav button, .hb_workspace_resource_tools button { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; min-width:28px; padding:0 7px; border:0; color:var(--hb-text-secondary); background:transparent; cursor:pointer; font:inherit; }
+.hb_workspace_tab > [role=tab] { min-width:0; flex:1; justify-content:flex-start; }
+.hb_workspace_tab.is_active > [role=tab] { color:var(--hb-text-primary); }
+.hb_workspace_tab_title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.hb_workspace_tab .hb_control_icon { flex:none; }
+.hb_workspace_tab_close { flex:none; opacity:.7; }
+.hb_workspace_dirty { flex:none; width:6px; height:6px; border-radius:50%; background:var(--hb-color-primary); }
+.hb_workspace_tab_tools { display:flex; flex:none; border-left:1px solid var(--hb-border-color); }
+.hb_workspace_nav { display:flex; flex:none; min-height:34px; border-bottom:1px solid var(--hb-border-color); }
+.hb_workspace_nav button { flex:1 1 auto; min-width:0; padding:0 5px; gap:4px; font-size:12px; border-bottom:2px solid transparent; }
+.hb_workspace_nav button > span:not(.hb_control_icon) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.hb_workspace_nav button[aria-selected=true] { color:var(--hb-color-primary); border-bottom-color:var(--hb-color-primary); }
+.hb_workspace_palette, .hb_workspace_resources { display:flex; flex:1; flex-direction:column; min-height:0; overflow:hidden; }
+.hb_workspace_resource_tools { display:flex; align-items:center; gap:3px; padding:6px; flex:none; border-bottom:1px solid var(--hb-border-color); }
+.hb_workspace_resource_tools input { width:0; min-width:0; flex:1; height:28px; padding:0 7px; border:1px solid var(--hb-border-color); border-radius:4px; background:var(--hb-bg-input,var(--hb-bg-panel)); color:var(--hb-text-primary); font:inherit; font-size:12px; }
+.hb_workspace_resource_list { flex:1; min-height:0; overflow:auto; }
+.hb_workspace_resource_list summary { display:flex; align-items:center; gap:6px; min-height:30px; padding:3px 8px; cursor:pointer; color:var(--hb-text-secondary); font-size:11px; font-weight:600; }
+.hb_workspace_resource_list summary::before { content:'\\25B8'; flex:none; }
+.hb_workspace_resource_list details[open] > summary::before { content:'\\25BE'; }
+.hb_workspace_resource_list summary > span { flex:1; overflow-wrap:anywhere; }
+.hb_workspace_resource_list summary small { font-weight:400; }
+.hb_workspace_resource { display:flex; gap:7px; align-items:center; width:100%; min-height:42px; padding:5px 10px; border:0; border-left:2px solid transparent; background:transparent; color:var(--hb-text-primary); cursor:pointer; font:inherit; text-align:left; }
+.hb_workspace_resource > span:not(.hb_control_icon) { flex:1; min-width:0; display:flex; flex-direction:column; }
+.hb_workspace_resource strong { font-size:12px; line-height:17px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.hb_workspace_resource small { color:var(--hb-text-secondary); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.hb_workspace_resource.is_active { border-left-color:var(--hb-color-primary); background:var(--hb-bg-active,var(--hb-bg-hover)); }
+.hb_workspace_tabs button:hover, .hb_workspace_nav button:hover, .hb_workspace_resource:hover, .hb_workspace_menu button:hover { background:var(--hb-bg-hover); }
+.hb_workspace_tabs button:focus-visible, .hb_workspace_nav button:focus-visible, .hb_workspace_resource:focus-visible, .hb_workspace_menu button:focus-visible { outline:2px solid var(--hb-color-primary); outline-offset:-2px; }
+.hb_workspace_lifecycle { width:6px; height:6px; border-radius:50%; background:var(--hb-text-secondary); flex:none; }
+.hb_workspace_lifecycle.is_running { background:var(--hb-color-success,#2b8a57); }
+.hb_workspace_resource_footer { display:flex; flex:none; flex-wrap:wrap; gap:6px; align-items:center; justify-content:space-between; padding:6px 8px; border-top:1px solid var(--hb-border-color); color:var(--hb-text-secondary); font-size:11px; }
+.hb_workspace_resource_footer button { border:0; background:transparent; color:var(--hb-color-primary); cursor:pointer; font:inherit; }
+.hb_workspace_resource_footer p { width:100%; margin:0; color:var(--hb-color-danger,#b42318); overflow-wrap:anywhere; }
+.hb_workspace_empty { color:var(--hb-text-secondary); padding:12px; font-size:12px; }
+.hb_workspace_menu { position:absolute; z-index:var(--hb-z-context-menu,10000); display:flex; flex-direction:column; padding:4px; min-width:180px; max-width:min(320px,calc(100% - 8px)); max-height:calc(100% - 8px); overflow:auto; border:1px solid var(--hb-border-color); border-radius:6px; background:var(--hb-bg-modal); box-shadow:0 8px 24px #0002; }
+.hb_workspace_menu button { display:flex; flex:none; align-items:center; gap:8px; padding:7px 9px; border:0; border-radius:3px; background:transparent; color:var(--hb-text-primary); font:inherit; font-size:12px; cursor:pointer; text-align:left; }
+.hb_workspace_menu button span:not(.hb_control_icon) { min-width:0; overflow-wrap:anywhere; }
+.huanban_rulego_editor_sidebar.collapsed .hb_workspace_nav, .huanban_rulego_editor_sidebar.collapsed .hb_workspace_palette, .huanban_rulego_editor_sidebar.collapsed .hb_workspace_resources { display:none!important; }
+@media(max-width:600px) { .hb_workspace_tab { min-width:88px; max-width:160px; } }
+`, J = `/* Shared control geometry for complete editors and framework form components. */
+:is(.huanban_form_item, .huanban_settings_field, .hb_ui_field, .route_form_item,
+  .hb_tool_config_field, .hb_struct_child, .hb_expr_condition, .shared_node_form,
+  .rge-form-section, .rge-form-group, .rge-struct-child, .rulego-property-panel,
+  .run_ai_settings_grid, .run_ai_model_mode, .run_ai_model_history_controls, .run_ai_custom_param_row, .huanban_login_inline) {
+  min-width: 0;
+  --hb-control-height: 34px;
+  --hb-control-radius: 5px;
+}
+
+:is(.huanban_form_item, .huanban_settings_field, .hb_ui_field, .route_form_item,
+  .hb_tool_config_field, .hb_struct_child, .hb_expr_condition, .shared_node_form,
+  .rulego-property-panel, .run_ai_settings_grid, .run_ai_model_mode, .run_ai_model_history_controls,
+  .run_ai_custom_param_row, .huanban_login_inline) :is(input:not([type]), input[type="text"], input[type="number"],
+  input[type="password"], input[type="url"], input[type="email"], input[type="search"],
+  input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"], select, textarea):not(.ms_filter_input, .cm-content, .rge-code-textarea, .rge-json-textarea, .hb_expr_code, .hb_switch_case, .hb_tool_json_area),
+:is(.rge-form-input, .rge-form-select, .rge-form-textarea):not([type="checkbox"]):not([type="radio"]) {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  padding: 7px 10px;
+  border: 1px solid var(--hb-border-color, var(--rge-border, #d6dce5));
+  border-radius: var(--hb-control-radius, 5px);
+  background-color: var(--hb-bg-input, var(--rge-surface, #fff));
+  color: var(--hb-text-primary, var(--rge-text, #253041));
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0;
+  outline: none;
+  transition: border-color .14s ease, box-shadow .14s ease;
+}
+
+:is(.huanban_form_item, .huanban_settings_field, .hb_ui_field, .route_form_item,
+  .hb_tool_config_field, .hb_struct_child, .hb_expr_condition, .shared_node_form,
+  .rulego-property-panel, .run_ai_settings_grid, .run_ai_model_mode, .run_ai_model_history_controls,
+  .run_ai_custom_param_row, .huanban_login_inline) :is(input:not([type]), input[type="text"], input[type="number"],
+  input[type="password"], input[type="url"], input[type="email"], input[type="search"],
+  input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"],
+  select:not([multiple])):not(.ms_filter_input),
+:is(input.rge-form-input, select.rge-form-input, select.rge-form-select):not([multiple]):not([type="checkbox"]):not([type="radio"]) {
+  height: var(--hb-control-height, 34px);
+}
+
+:is(.huanban_form_item, .huanban_settings_field, .hb_ui_field, .route_form_item,
+  .hb_tool_config_field, .hb_struct_child, .shared_node_form, .rulego-property-panel,
+  .run_ai_settings_grid, .run_ai_model_mode, .run_ai_model_history_controls, .run_ai_custom_param_row, .huanban_login_inline)
+  :is(input, select, textarea):not(.ms_filter_input):not([type="hidden"]):hover:not(:disabled):not([readonly]),
+:is(.rge-form-input, .rge-form-select, .rge-form-textarea):hover:not(:disabled):not([readonly]) {
+  border-color: color-mix(in srgb, var(--hb-color-primary, var(--rge-primary, #3885c9)) 40%, var(--hb-border-color, #d6dce5));
+}
+
+:is(.huanban_form_item, .huanban_settings_field, .hb_ui_field, .route_form_item,
+  .hb_tool_config_field, .hb_struct_child, .hb_expr_condition, .shared_node_form,
+  .rulego-property-panel, .run_ai_settings_grid, .run_ai_model_mode, .run_ai_model_history_controls,
+  .run_ai_custom_param_row, .huanban_login_inline) :is(input, select, textarea):not(.ms_filter_input):focus-visible,
+:is(.rge-form-input, .rge-form-select, .rge-form-textarea):focus-visible {
+  border-color: var(--hb-color-primary, var(--rge-primary, #3885c9));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-color-primary, var(--rge-primary, #3885c9)) 14%, transparent);
+}
+
+:is(.huanban_form_item, .huanban_settings_field, .hb_ui_field, .route_form_item,
+  .hb_tool_config_field, .hb_struct_child, .shared_node_form, .rulego-property-panel,
+  .run_ai_settings_grid, .run_ai_model_mode, .run_ai_model_history_controls, .run_ai_custom_param_row, .huanban_login_inline)
+  :is(input, select, textarea):disabled,
+:is(.rge-form-input, .rge-form-select, .rge-form-textarea):disabled {
+  background-color: var(--hb-bg-disabled, var(--hb-bg-section, #f4f6f8));
+  color: var(--hb-text-muted, var(--rge-text-muted, #727d8e));
+  border-color: var(--hb-border-light, var(--rge-border-light, #e5e9ef));
+  cursor: not-allowed;
+  opacity: 1;
+  box-shadow: none;
+}
+
+:is(.huanban_form_item, .huanban_settings_field, .hb_ui_field, .route_form_item,
+  .hb_tool_config_field, .hb_struct_child, .shared_node_form) input[readonly],
+input.rge-form-input[readonly] {
+  background-color: var(--hb-bg-section, var(--rge-surface-muted, #f4f6f8));
+  color: var(--hb-text-secondary, var(--rge-text-secondary, #556274));
+  cursor: text;
+  opacity: 1;
+}
+
+:is(.huanban_form_item, .huanban_settings_field, .hb_ui_field, .route_form_item,
+  .hb_tool_config_field, .hb_struct_child, .shared_node_form) :is(input, textarea)::placeholder,
+:is(.rge-form-input, .rge-form-textarea)::placeholder {
+  color: var(--hb-text-muted, var(--rge-text-muted, #788495));
+  opacity: .85;
+}
+
+:is(.huanban_rulego_editor_root, .huanban_rulego_editor_drawer, .huanban_modal,
+  .huanban_settings_dialog, .huanban_run_dialog, .route_form_modal, .route_settings_modal,
+  .hb_tools_modal, .hb_rule_chain_modal, .hb_field_attachment_overlay) select:not([multiple]),
+select.rge-form-select:not([multiple]), select.rge-form-input:not([multiple]) {
+  appearance: auto;
+  padding-inline-end: 24px;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  color-scheme: light;
+}
+:is([data-theme="tech"], [data-rg-theme="tech"]) select:not([multiple]),
+:is([data-theme="tech"], [data-rg-theme="tech"]) select[multiple] { color-scheme: dark; }
+:is(.huanban_form_item, .hb_struct_child) select[multiple],
+select.rge-form-select[multiple], select.rge-form-input[multiple] {
+  min-height: 108px;
+  height: auto;
+  padding: 4px;
+  overflow: auto;
+}
+:is(.huanban_form_item, .hb_struct_child) select[multiple] option,
+select.rge-form-select[multiple] option { padding: 5px 7px; }
+:is(.huanban_form_item, .hb_tool_config_field, .hb_struct_child) textarea:not(.cm-content),
+textarea.rge-form-textarea { min-height: 76px; resize: vertical; }
+
+.huanban_form_item { margin-bottom: 15px; }
+.huanban_form_item > label, .hb_struct_child > label, .rge-form-label {
+  margin-bottom: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+.huanban_form_item .desc_text, .huanban_form_item .hb_input_mention_hint, .rge-form-help {
+  margin-top: 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--hb-text-muted, var(--rge-text-muted, #788495));
+  overflow-wrap: anywhere;
+}
+.huanban_form_item .pair_item, .huanban_form_item .hb_option_picker_inline { min-width: 0; gap: 8px; }
+.huanban_form_item .pair_item > input { flex: 1 1 0; min-width: 0; }
+.huanban_form_item .pair_item > button, .hb_option_picker_inline > button { flex: 0 0 auto; }
+.hb_segmented { max-width: 100%; }
+.hb_segmented_option { flex: 1 1 0; min-width: 0; }
+.hb_segmented_option span { box-sizing: border-box; padding: 7px 10px; overflow-wrap: anywhere; }
+.run_ai_model_mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.run_ai_provider_select_wrap .run_ai_provider_picker_btn { height: 34px; margin: 0; }
+.run_ai_settings_grid > label, .run_ai_settings_grid > label > span { min-width: 0; overflow-wrap: anywhere; }
+.huanban_rulego_editor_drawer_header .drawer_header_actions { flex-shrink: 0; gap: 6px; }
+.huanban_rulego_editor_drawer_body { scrollbar-width: thin; overscroll-behavior: contain; }
+.huanban_form_item input[type="checkbox"]:not(.debug_switch) {
+  accent-color: var(--hb-color-primary, #3885c9);
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  vertical-align: middle;
+}
+.huanban_form_item input.debug_switch {
+  appearance: none;
+  position: relative;
+  flex: none;
+  box-sizing: border-box;
+  width: 32px;
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--hb-border-color);
+  border-radius: 9px;
+  background: var(--hb-bg-section);
+}
+.huanban_form_item input.debug_switch::after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  background: var(--hb-text-muted);
+}
+.huanban_form_item input.debug_switch:checked { background: var(--hb-color-primary); border-color: var(--hb-color-primary); }
+.huanban_form_item input.debug_switch:checked::after { left: 16px; background: var(--rg-btn-primary-text, #fff); }
+
+.huanban_form_item .multi_select_box {
+  box-sizing: border-box;
+  min-height: var(--hb-control-height, 34px);
+  gap: 4px;
+  padding: 4px 28px 4px 7px;
+  border-radius: var(--hb-control-radius, 5px);
+}
+.huanban_form_item .multi_select_box.is_success { border-color: var(--hb-border-color, #d6dce5); }
+.huanban_form_item .multi_select_box:focus-within, .huanban_form_item .multi_select_box.active {
+  border-color: var(--hb-color-primary, #3885c9);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-color-primary, #3885c9) 14%, transparent);
+}
+.huanban_form_item .multi_select_box.is_error { border-color: var(--hb-color-danger, #cf4d5c); }
+.huanban_form_item .multi_select_box input.ms_filter_input {
+  flex: 1 1 48px;
+  box-sizing: border-box;
+  width: 48px;
+  min-width: 24px;
+  max-width: 100%;
+  height: 24px;
+  min-height: 0;
+  margin: 0;
+  padding: 0 2px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  font: inherit;
+  color: inherit;
+}
+.multi_select_box:has(input:disabled) { background: var(--hb-bg-section); cursor: not-allowed; }
+.multi_select_box:has(input:disabled) .ms_tag_close { display: none; }
+.ms_placeholder { max-width: calc(100% - 36px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms_placeholder[hidden] { display: none !important; }
+.ms_tag { max-width: min(240px, 100%); border: 1px solid var(--hb-border-light); color: var(--hb-text-secondary); }
+.ms_tag_label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.multi_select_box button.ms_tag_close { box-sizing: border-box; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0 0 0 2px; border: 0; background: transparent; line-height: 1; }
+.multi_select_arrow, .rge-search-select-arrow { font-size: 10px; color: var(--hb-text-muted, var(--rge-text-muted)); }
+.ms_dropdown {
+  box-sizing: border-box;
+  padding: 4px;
+  border-radius: 6px;
+  border: 1px solid var(--hb-border-color, #d6dce5);
+  background: var(--hb-bg-modal, #fff);
+  color: var(--hb-text-primary, #253041);
+  box-shadow: var(--hb-shadow-md, 0 8px 24px #23334b24);
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  font-family: var(--hb-font-family, system-ui, sans-serif);
+  line-height: 1.4;
+}
+.ms_dropdown_item {
+  position: relative;
+  padding: 7px 28px 7px 9px;
+  border-radius: 4px;
+  overflow-wrap: anywhere;
+  color: var(--hb-text-primary);
+}
+.ms_dropdown_item.selected { background: var(--hb-bg-active); color: var(--hb-color-primary); }
+.ms_dropdown_item.selected::after { content: '\\2713'; position: absolute; right: 9px; top: 7px; }
+.ms_dropdown_item.is_active { outline: 1px solid var(--hb-color-primary); outline-offset: -1px; background: var(--hb-bg-hover); }
+.ms_dropdown_item.disabled { opacity: .6; background: transparent; }
+.ms_option_value { color: var(--hb-text-muted); font-size: 11px; }
+.hb_single_select_box { position: relative; min-width: 0; width: 100%; flex: 1 1 auto; }
+.hb_single_select_box input[data-select-filterable][data-select-allow-create] { padding-inline-end: 30px; }
+.hb_single_select_box input::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; }
+.hb_single_select_box::after {
+  content: '';
+  position: absolute;
+  right: 13px;
+  top: 12px;
+  width: 6px;
+  height: 6px;
+  border: solid var(--hb-text-muted);
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+.hb_single_select_popover .ms_dropdown_empty { padding: 12px 9px; color: var(--hb-text-muted); }
+
+.rge-search-select-trigger.rge-form-select { min-height: 34px; padding: 6px 10px; line-height: 20px; }
+.rge-search-select-popover {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 6px;
+  border-radius: 6px;
+  overscroll-behavior: contain;
+}
+.rge-search-select-popover .rge-search-select-input {
+  flex: none;
+  height: 32px;
+  margin-bottom: 5px;
+  font: inherit;
+  font-size: 13px;
+}
+.rge-search-select-popover .rge-search-select-list { min-height: 0; flex: 1 1 auto; gap: 2px; overscroll-behavior: contain; }
+.rge-search-select-popover .rge-search-select-option { flex: none; border-radius: 4px; padding: 6px 8px; }
+.rge-search-select-popover .rge-search-select-label { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
+.rge-search-select-popover .rge-search-select-footer { flex: none; margin-top: 5px; padding-top: 5px; }
+.rge-search-select-popover .rge-search-select-count { border-radius: 4px; }
+
+@media (max-width: 600px) {
+  .huanban_form_item .pair_item { flex-wrap: wrap; }
+  .huanban_form_item .pair_item > input { flex-basis: 40%; }
+  .hb_expr_condition { min-width: 0; }
+  .rge-search-select-popover .rge-search-select-desc { overflow-wrap: anywhere; word-break: normal; }
+}
+`;
+let $ = !1;
+function or() {
+  if ($) return;
+  $ = !0;
+  const e = document.createElement("style");
+  e.id = "huanban_rulego_editor_styles", e.textContent = `
 /* ========== LogicFlow 内置样式 ========== */
-${s}
-${h}
+${A}
+${Y}
 
 /* ========== 主题 CSS 变量 ========== */
-${x}
-${m()}
+${G}
+${H()}
+${K}
 
 
 /* ========== 编辑器根容器 ========== */
@@ -691,6 +1290,37 @@ ${m()}
   --hb-ai-drawer-max-width: min(860px, 72vw);
   --hb-ai-drawer-resize-handle-width: 24px;
 }
+/* Owned portal content must honor hidden outside the editor root. */
+.huanban_rulego_editor_root [hidden],
+.huanban_rulego_editor_drawer [hidden],
+.huanban_modal [hidden],
+.huanban_settings_dialog [hidden],
+.huanban_login_modal [hidden],
+.huanban_run_dialog [hidden],
+.huanban_chain_selector_drawer [hidden],
+.huanban_json_viewer_overlay [hidden],
+.huanban_unsaved_guard_modal [hidden],
+.huanban_trace_dialog_overlay [hidden],
+.hb_config_modal [hidden],
+.hb_analysis_modal_wrapper [hidden],
+.hb_dynamic_browse_overlay [hidden],
+.hb_option_picker_modal [hidden],
+.hb_point_template_dialog [hidden],
+.hb_rule_chain_modal [hidden],
+.hb_tools_modal [hidden],
+.hb_field_attachment_overlay [hidden],
+.debug_detail_dialog [hidden],
+.run_chat_code_fullscreen_overlay [hidden] { display: none !important; }
+.hb_editor_header {
+  display: flex; align-items: center; gap: 10px; flex: none;
+  padding: 8px 12px; border-bottom: 1px solid var(--hb-border-color);
+  background: var(--hb-bg-toolbar); color: var(--hb-text-primary); min-width: 0;
+}
+.hb_editor_header > img { width: 28px; height: 28px; object-fit: contain; flex: none; }
+.hb_editor_header > div { min-width: 0; }
+.hb_editor_header h1 { margin: 0; font-size: 14px; line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere; }
+.hb_editor_header p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--hb-text-secondary); overflow-wrap: anywhere; }
+.huanban_rulego_editor_canvas_toolbar .tb_group { display: inline-flex; align-items: center; gap: 4px; flex: none; }
 
 @media (prefers-reduced-motion: reduce) {
   .huanban_rulego_editor_root,
@@ -730,10 +1360,10 @@ ${m()}
   transition: opacity 0.18s ease, transform 0.18s ease;
 }
 .huanban_rulego_editor_toast.is_error {
-  background: #fef0f0; border: 1px solid #fde2e2; color: #b42318;
+  background: var(--hb-danger-soft); border: 1px solid var(--hb-color-danger); color: var(--hb-text-primary);
 }
 .huanban_rulego_editor_toast.is_info {
-  background: #ecf5ff; border: 1px solid #d9ecff; color: #1d4ed8;
+  background: var(--hb-info-soft); border: 1px solid var(--hb-color-primary); color: var(--hb-text-primary);
 }
 .huanban_rulego_editor_toast.is_hiding {
   opacity: 0; transform: translateY(8px);
@@ -751,7 +1381,7 @@ ${m()}
 .hb_editor_tour_highlight {
   position: absolute; border: 2px solid var(--hb-color-primary, #409eff);
   border-radius: 6px; box-sizing: border-box;
-  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-color-primary) 20%, transparent);
   pointer-events: none;
 }
 .hb_editor_tour_panel {
@@ -794,7 +1424,7 @@ ${m()}
 }
 .hb_editor_tour_previous:disabled { opacity: 0.45; cursor: not-allowed; }
 .hb_editor_tour_next {
-  background: var(--hb-color-primary, #409eff); border-color: var(--hb-color-primary, #409eff) !important; color: #fff;
+  background: var(--hb-color-primary, #409eff); border-color: var(--hb-color-primary, #409eff) !important; color: var(--rg-btn-primary-text);
 }
 
 @media (max-width: 520px) {
@@ -806,7 +1436,8 @@ ${m()}
   display: flex; align-items: center; gap: var(--hb-space-xs, 6px);
   padding: 4px 10px; background: var(--hb-bg-toolbar, #fff);
   border-bottom: 1px solid var(--hb-border-strong, #ddd); flex-shrink: 0; flex-wrap: nowrap;
-  overflow-x: auto;
+  overflow-x: auto; overflow-y: visible;
+  position: relative;
 }
 .huanban_rulego_editor_toolbar h1 {
   font-size: var(--hb-font-size-lg, 14px); font-weight: var(--hb-weight-semibold, 600);
@@ -971,12 +1602,15 @@ ${m()}
 /* Node-RED 节点块 */
 .huanban_rulego_editor_node_block {
   cursor: move; margin: 6px auto; height: 25px;
-  border-radius: 5px; border: 1px solid #999;
+  border-radius: var(--hb-node-radius, 5px); border: 1px solid var(--hb-node-border, var(--hb-border-color, #999));
   width: 90%; position: relative; user-select: none;
-  transition: box-shadow 0.15s;
+  box-shadow: var(--hb-shadow-sm, 0 1px 4px rgba(0,0,0,0.08));
+  transition: box-shadow var(--hb-duration, 160ms) var(--hb-ease-out, ease-out), transform var(--hb-duration-fast, 100ms) var(--hb-ease-out, ease-out), border-color var(--hb-duration, 160ms) var(--hb-ease-out, ease-out);
 }
 .huanban_rulego_editor_node_block:hover {
-  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+  box-shadow: var(--hb-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
+  border-color: var(--hb-color-primary, #409eff);
+  transform: translateY(-1px);
 }
 .huanban_rulego_editor_node_block:focus-visible {
   outline: 2px solid var(--hb-color-primary, #409eff);
@@ -989,12 +1623,21 @@ ${m()}
   line-height: 20px; overflow: hidden; text-align: center;
   white-space: nowrap; text-overflow: ellipsis; user-select: none;
 }
+[data-sidebar-label-lines="2"] .huanban_rulego_editor_node_block {
+  height: 44px; box-sizing: border-box; display: flex; align-items: center;
+}
+[data-sidebar-label-lines="2"] .huanban_rulego_editor_node_label {
+  flex: 1; min-width: 0; margin: 3px 6px 3px 34px;
+  line-height: 18px; max-height: 36px; white-space: normal;
+  overflow-wrap: anywhere; word-break: break-word;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
+}
 
 .huanban_rulego_editor_node_icon_area {
   position: absolute; top: 0; bottom: 0; left: 0; width: 30px;
-  border-right: 1px solid rgba(0,0,0,0.05);
-  background-color: rgba(0,0,0,0.05);
-  border-radius: 5px 0 0 5px;
+  border-right: 1px solid var(--hb-node-icon-divider, rgba(0,0,0,0.05));
+  background-color: var(--hb-node-icon-bg, rgba(0,0,0,0.05));
+  border-radius: var(--hb-node-radius, 5px) 0 0 var(--hb-node-radius, 5px);
   display: flex; align-items: center; justify-content: center;
 }
 /* 分类标题和组件图标 */
@@ -1018,16 +1661,30 @@ ${m()}
 /* 端口小方块 */
 .huanban_rulego_editor_port {
   position: absolute; top: 8px; left: -5px;
-  background: #d9d9d9; border-radius: 3px;
-  width: 10px; height: 10px; border: 1px solid #999;
+  background: var(--hb-port-fill, #d9d9d9); border-radius: var(--hb-port-radius, 3px);
+  width: 10px; height: 10px; border: 1px solid var(--hb-port-stroke, #999);
   box-sizing: border-box;
+  transition: background var(--hb-duration-fast, 100ms) ease, border-color var(--hb-duration-fast, 100ms) ease, transform var(--hb-duration-fast, 100ms) ease;
 }
 .huanban_rulego_editor_port_output { left: auto; right: -6px; }
+[data-sidebar-label-lines="2"] .huanban_rulego_editor_port { top: calc(50% - 5px); }
+.huanban_rulego_editor_port:hover {
+  background: var(--hb-port-hover-fill, var(--hb-color-primary, #409eff));
+  border-color: var(--hb-port-hover-stroke, var(--hb-color-primary, #409eff));
+  transform: scale(1.2);
+}
 
 /* ========== 画布 ========== */
 .huanban_rulego_editor_canvas {
   flex: 1 1 auto; min-width: 0; position: relative; overflow: hidden; background: var(--hb-bg-canvas, #fff);
 }
+.huanban_rulego_editor_root .lf-graph { background: var(--rg-canvas-bg, #fff); }
+/* Ensure node SVG groups do not clip badges/icons at node edges */
+.lf-red-node,
+.lf-agent-node,
+.lf-agent-orchestration-node { overflow: visible; }
+.huanban_rulego_editor_canvas svg { overflow: visible; }
+.huanban_rulego_editor_canvas svg g[data-node-id] { overflow: visible; }
 .hb-node-connection-status,
 .lf-edge .lf-line-text {
   transition: opacity 0.15s ease;
@@ -1099,7 +1756,7 @@ ${m()}
 .hb_edge_label_quick_editor button.is_primary {
   border-color: var(--hb-color-primary, #409eff);
   background: var(--hb-color-primary, #409eff);
-  color: #fff;
+  color: var(--rg-btn-primary-text);
 }
 .hb_edge_label_quick_close {
   width: 26px;
@@ -1136,13 +1793,11 @@ ${m()}
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0;
+  padding: 4px 0;
   max-width: calc(100% - 24px);
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: visible;
+  flex-wrap: wrap;
+  overflow: visible;
   pointer-events: auto;
-  scrollbar-width: none;
 }
 .huanban_rulego_editor_canvas_toolbar::-webkit-scrollbar {
   display: none;
@@ -1151,13 +1806,13 @@ ${m()}
   width: 1px;
   height: 18px;
   margin: 0 2px;
-  background: rgba(148, 163, 184, 0.38);
+  background: var(--hb-border-color, #dcdfe6);
   flex: 0 0 1px;
 }
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn {
-  --hb-tool-color: #4b5563;
-  --hb-tool-border: rgba(148, 163, 184, 0.42);
-  --hb-tool-bg: rgba(255, 255, 255, 0.96);
+  --hb-tool-color: var(--hb-text-secondary, #4b5563);
+  --hb-tool-border: var(--hb-border-color, #dcdfe6);
+  --hb-tool-bg: var(--hb-bg-toolbar, #ffffff);
   width: 26px;
   height: 26px;
   min-width: 26px;
@@ -1170,7 +1825,7 @@ ${m()}
   justify-content: center;
   padding: 0;
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(18, 26, 42, 0.10);
+  box-shadow: var(--hb-shadow-sm);
   transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
   position: relative;
 }
@@ -1185,8 +1840,10 @@ ${m()}
   max-width: 180px;
   padding: 4px 7px;
   border-radius: 4px;
-  background: rgba(17, 24, 39, 0.94);
-  color: #fff;
+  background: var(--hb-bg-modal, #fff);
+  color: var(--hb-text-primary, #303133);
+  border: 1px solid var(--hb-border-color);
+  box-shadow: var(--hb-shadow-sm);
   font-size: 11px;
   line-height: 1.3;
   white-space: nowrap;
@@ -1208,7 +1865,7 @@ ${m()}
   border: 2px solid var(--hb-bg-canvas, #fff);
   border-radius: 999px;
   background: var(--hb-color-danger, #f56c6c);
-  box-shadow: 0 0 0 2px rgba(245,108,108,0.16);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-danger) 16%, transparent);
 }
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn svg {
   width: 12px !important;
@@ -1223,10 +1880,10 @@ ${m()}
   height: 13px !important;
 }
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn:hover {
-  background: var(--hb-tool-color);
+  background: var(--hb-bg-hover);
   border-color: var(--hb-tool-color);
-  color: #fff;
-  box-shadow: 0 5px 12px rgba(18, 26, 42, 0.15);
+  color: var(--hb-tool-color);
+  box-shadow: var(--hb-shadow-md);
   transform: translateY(-1px);
 }
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn.tb_active,
@@ -1239,8 +1896,8 @@ ${m()}
 }
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn.tb_active:hover,
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn[aria-pressed="true"]:hover {
-  background: var(--hb-tool-color);
-  color: #fff;
+  background: var(--hb-bg-active);
+  color: var(--hb-tool-color);
 }
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn:active {
   transform: translateY(0);
@@ -1248,30 +1905,16 @@ ${m()}
 }
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn:disabled,
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_btn[aria-disabled="true"] {
-  color: #b8bec8;
-  border-color: rgba(224, 228, 236, 0.95);
-  background: rgba(250, 251, 253, 0.9);
+  color: var(--hb-text-disabled);
+  border-color: var(--hb-border-light);
+  background: var(--hb-bg-section);
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
 }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_info { --hb-tool-color: #2563eb; --hb-tool-border: rgba(37, 99, 235, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_ai { --hb-tool-color: #7c3aed; --hb-tool-border: rgba(124, 58, 237, 0.36); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_monitor { --hb-tool-color: #0891b2; --hb-tool-border: rgba(8, 145, 178, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_clear_debug { --hb-tool-color: #d97706; --hb-tool-border: rgba(217, 119, 6, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_run { --hb-tool-color: #16a34a; --hb-tool-border: rgba(22, 163, 74, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_layout { --hb-tool-color: #4f46e5; --hb-tool-border: rgba(79, 70, 229, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_selection { --hb-tool-color: #0284c7; --hb-tool-border: rgba(2, 132, 199, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_zoom_out { --hb-tool-color: #334155; --hb-tool-border: rgba(51, 65, 85, 0.30); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_zoom_in { --hb-tool-color: #334155; --hb-tool-border: rgba(51, 65, 85, 0.30); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_fit { --hb-tool-color: #0f766e; --hb-tool-border: rgba(15, 118, 110, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_undo { --hb-tool-color: #64748b; --hb-tool-border: rgba(100, 116, 139, 0.30); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_redo { --hb-tool-color: #64748b; --hb-tool-border: rgba(100, 116, 139, 0.30); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_minimap { --hb-tool-color: #0f766e; --hb-tool-border: rgba(15, 118, 110, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_components { --hb-tool-color: #2563eb; --hb-tool-border: rgba(37, 99, 235, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_search { --hb-tool-color: #d97706; --hb-tool-border: rgba(217, 119, 6, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_theme { --hb-tool-color: #9333ea; --hb-tool-border: rgba(147, 51, 234, 0.34); }
-.huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_fullscreen { --hb-tool-color: #475569; --hb-tool-border: rgba(71, 85, 105, 0.34); }
+.huanban_rulego_editor_canvas_toolbar :is(.hb_canvas_tool_info,.hb_canvas_tool_ai,.hb_canvas_tool_monitor,.hb_canvas_tool_layout,.hb_canvas_tool_selection,.hb_canvas_tool_components,.hb_canvas_tool_theme) { --hb-tool-color: var(--hb-color-primary); }
+.huanban_rulego_editor_canvas_toolbar :is(.hb_canvas_tool_clear_debug,.hb_canvas_tool_search,.hb_canvas_tool_diagnostics) { --hb-tool-color: var(--hb-color-warning); }
+.huanban_rulego_editor_canvas_toolbar :is(.hb_canvas_tool_run,.hb_canvas_tool_fit,.hb_canvas_tool_minimap) { --hb-tool-color: var(--hb-color-success); }
 
 /* ========== 侧边栏折叠按钮 ========== */
 .huanban_rulego_editor_sidebar_toggle {
@@ -1324,10 +1967,10 @@ ${m()}
 }
 /* 运行记录按钮 */
 .huanban_rulego_editor_toolbar .tb_history {
-  color: #2980b9; border-color: #2980b9;
+  color: var(--hb-color-primary); border-color: var(--hb-color-primary);
 }
 .huanban_rulego_editor_toolbar .tb_history:hover {
-  background: #eaf2f8; color: #1a5276;
+  background: var(--hb-bg-hover); color: var(--hb-color-primary);
 }
 
 /* ========== 空状态 ========== */
@@ -1337,11 +1980,14 @@ ${m()}
 
 /* ========== Node-RED 风格画布样式 ========== */
 .custom-anchor {
-  stroke: #999; stroke-width: 1; fill: #d9d9d9;
+  stroke: var(--hb-port-stroke, #999); stroke-width: 1.25; fill: var(--hb-port-fill, #d9d9d9);
   cursor: crosshair; rx: 3; ry: 3;
+  transition: fill var(--hb-duration-fast, 100ms) ease, stroke var(--hb-duration-fast, 100ms) ease, transform var(--hb-duration-fast, 100ms) ease;
 }
 .custom-anchor:hover {
-  fill: #ff7f0e; stroke: #ff7f0e;
+  fill: var(--hb-port-hover-fill, var(--hb-color-primary, #ff7f0e));
+  stroke: var(--hb-port-hover-stroke, var(--hb-color-primary, #ff7f0e));
+  transform: scale(1.15);
 }
 .node-red-start {
   cursor: pointer; pointer-events: all;
@@ -1366,8 +2012,8 @@ ${m()}
   to { transform: translateX(100%); }
 }
 @keyframes hb-ai-avatar-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(64,158,255,0.26); }
-  50% { box-shadow: 0 0 0 6px rgba(64,158,255,0); }
+  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hb-color-primary) 26%, transparent); }
+  50% { box-shadow: 0 0 0 6px transparent; }
 }
 @keyframes hb-ai-status-pulse {
   0%, 100% { opacity: 0.42; transform: scale(0.82); }
@@ -1418,7 +2064,7 @@ ${m()}
   background: var(--hb-bg-hover, #f5f5f5);
 }
 .huanban_rulego_editor_drawer_header .drawer_header_actions .btn_primary {
-  border: 1px solid var(--hb-color-primary, #409eff); background: var(--hb-color-primary, #409eff); color: #fff;
+  border: 1px solid var(--hb-color-primary, #409eff); background: var(--hb-color-primary, #409eff); color: var(--rg-btn-primary-text);
 }
 .huanban_rulego_editor_drawer_header .drawer_header_actions .btn_primary:hover {
   opacity: 0.88;
@@ -1429,7 +2075,7 @@ ${m()}
   border-radius: 4px; transition: all 0.2s ease;
 }
 .huanban_rulego_editor_drawer_header .close_btn:hover {
-  color: #fff; background: #e74c3c;
+  color: var(--rg-btn-danger-text); background: var(--hb-color-danger);
 }
 .huanban_rulego_editor_drawer_body {
   flex: 1; overflow-y: auto; padding: 16px;
@@ -1459,7 +2105,7 @@ ${m()}
   cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px;
 }
 .huanban_rulego_editor_drawer_footer .btn_primary {
-  background: var(--hb-color-primary, #409eff); color: #fff; border-color: var(--hb-color-primary, #409eff);
+  background: var(--hb-color-primary, #409eff); color: var(--rg-btn-primary-text); border-color: var(--hb-color-primary, #409eff);
 }
 .huanban_rulego_editor_drawer_footer .btn_primary:hover { opacity: 0.85; }
 .huanban_rulego_editor_drawer_footer .btn_cancel {
@@ -1508,14 +2154,14 @@ ${m()}
   background: var(--hb-bg-hover, #f5f7fa);
 }
 .huanban_unsaved_guard_actions .btn_danger {
-  background: #fff; color: var(--hb-color-danger, #f56c6c);
-  border: 1px solid rgba(245, 108, 108, .45);
+  background: var(--hb-bg-input); color: var(--hb-color-danger, #f56c6c);
+  border: 1px solid color-mix(in srgb, var(--hb-color-danger) 45%, transparent);
 }
 .huanban_unsaved_guard_actions .btn_danger:hover {
-  color: #fff; background: var(--hb-color-danger, #f56c6c);
+  color: var(--rg-btn-danger-text); background: var(--hb-color-danger, #f56c6c);
 }
 .huanban_unsaved_guard_actions .btn_primary {
-  color: #fff; background: var(--hb-color-primary, #409eff);
+  color: var(--rg-btn-primary-text); background: var(--hb-color-primary, #409eff);
   border: 1px solid var(--hb-color-primary, #409eff);
 }
 .huanban_unsaved_guard_actions .btn_primary:hover {
@@ -1547,7 +2193,7 @@ ${m()}
 .huanban_form_item textarea:focus,
 .huanban_form_item select:focus {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 15%, transparent);
 }
 .huanban_form_item textarea { resize: vertical; min-height: 60px; }
 .huanban_form_item .desc_text {
@@ -1579,7 +2225,7 @@ ${m()}
 .hb_segmented_option input { position: absolute; opacity: 0; pointer-events: none; }
 .hb_segmented_option span { display: block; width: 100%; padding: 7px 12px; text-align: center; }
 .hb_segmented_option.active {
-  color: #fff !important; background: var(--hb-color-primary, #409eff);
+  color: var(--rg-btn-primary-text) !important; background: var(--hb-color-primary, #409eff);
 }
 .hb_ref_mode,
 .hb_provider_mode {
@@ -1612,12 +2258,12 @@ ${m()}
   border-color: var(--hb-color-primary, #409eff); color: var(--hb-color-primary, #409eff);
 }
 .hb_datetime_toggle.active {
-  background: var(--hb-color-primary, #409eff); border-color: var(--hb-color-primary, #409eff); color: #fff;
+  background: var(--hb-color-primary, #409eff); border-color: var(--hb-color-primary, #409eff); color: var(--rg-btn-primary-text);
 }
 .hb_datetime_format {
   font-size: 11px; line-height: 1.4; color: var(--hb-text-muted, #999);
 }
-/* === 多选标签选择器 (模拟 el-select multiple) === */
+/* Multi-value option control. */
 .multi_select_wrap {
   position: relative; width: 100%;
 }
@@ -1631,12 +2277,12 @@ ${m()}
 }
 .multi_select_box:hover,
 .multi_select_box.active { border-color: var(--hb-color-primary, #409eff); }
-.multi_select_box.is_error { border-color: #f56c6c; }
-.multi_select_box.is_success { border-color: #67c23a; }
+.multi_select_box.is_error { border-color: var(--hb-color-danger); }
+.multi_select_box.is_success { border-color: var(--hb-color-success); }
 /* 下拉箭头 */
 .multi_select_arrow {
   position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
-  font-size: 12px; color: #c0c4cc; transition: transform 0.3s;
+  font-size: 12px; color: var(--hb-text-muted); transition: transform 0.3s;
   pointer-events: none;
 }
 .multi_select_box.active .multi_select_arrow { transform: translateY(-50%) rotate(180deg); }
@@ -1644,48 +2290,48 @@ ${m()}
 .ms_tag {
   display: inline-flex; align-items: center; gap: 2px;
   padding: 0 6px; height: 22px; line-height: 22px;
-  background: #f0f2f5; border-radius: 3px;
-  font-size: 12px; color: #606266; white-space: nowrap;
+  background: var(--hb-bg-tag); border-radius: 3px;
+  font-size: 12px; color: var(--hb-text-secondary); white-space: nowrap;
   max-width: 200px; overflow: hidden; text-overflow: ellipsis;
 }
 .ms_tag_close {
   display: inline-flex; align-items: center; justify-content: center;
   width: 14px; height: 14px; border-radius: 50%; margin-left: 2px;
-  font-size: 10px; color: #909399; cursor: pointer; flex-shrink: 0;
+  font-size: 10px; color: var(--hb-text-muted); cursor: pointer; flex-shrink: 0;
   transition: all 0.15s;
 }
-.ms_tag_close:hover { background: #909399; color: #fff; }
+.ms_tag_close:hover { background: var(--hb-bg-active); color: var(--hb-text-primary); }
 /* 输入过滤 */
 .ms_filter_input {
   border: none; outline: none; background: none;
-  font-size: 13px; color: #333; flex: 1; min-width: 40px; height: 22px;
+  font-size: 13px; color: var(--hb-text-primary); flex: 1; min-width: 40px; height: 22px;
   padding: 0; margin: 0;
 }
 /* 占位文本 */
 .ms_placeholder {
-  color: #c0c4cc; font-size: 13px; pointer-events: none;
+  color: var(--hb-text-muted); font-size: 13px; pointer-events: none;
   position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
 }
 /* 下拉面板 */
 .ms_dropdown {
   position: absolute; left: 0; top: calc(100% + 4px); width: 100%;
   max-height: 200px; overflow-y: auto;
-  background: #fff; border: 1px solid #e4e7ed;
-  border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+  background: var(--hb-bg-modal); border: 1px solid var(--hb-border-color);
+  border-radius: 4px; box-shadow: var(--hb-shadow-md);
   z-index: 10003; display: none;
 }
 .ms_dropdown.show { display: block; }
 .ms_dropdown_item {
-  padding: 8px 12px; font-size: 13px; color: #606266;
+  padding: 8px 12px; font-size: 13px; color: var(--hb-text-secondary);
   cursor: pointer; transition: background 0.15s;
 }
-.ms_dropdown_item:hover { background: #f5f7fa; }
+.ms_dropdown_item:hover { background: var(--hb-bg-hover); }
 .ms_dropdown_item.selected { color: var(--hb-color-primary, #409eff); font-weight: 500; }
 /* 已被其他边占用的选项: 灰色 + 禁止光标 */
-.ms_dropdown_item.disabled { color: #c0c4cc; cursor: not-allowed; background: #f5f7fa; }
-.ms_dropdown_item.disabled:hover { background: #f5f7fa; }
+.ms_dropdown_item.disabled { color: var(--hb-text-disabled); cursor: not-allowed; background: var(--hb-bg-section); }
+.ms_dropdown_item.disabled:hover { background: var(--hb-bg-section); }
 .ms_dropdown_empty {
-  padding: 10px 12px; font-size: 12px; color: #999; text-align: center;
+  padding: 10px 12px; font-size: 12px; color: var(--hb-text-muted); text-align: center;
 }
 .hb_option_picker_inline {
   display: flex; align-items: stretch; gap: 8px; width: 100%;
@@ -1702,7 +2348,7 @@ ${m()}
 .hb_option_picker_display:focus,
 .hb_option_picker_trigger:focus {
   outline: none; border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent);
 }
 .hb_option_picker_trigger {
   margin-top: 6px; height: 30px; padding: 0 10px;
@@ -1748,7 +2394,7 @@ ${m()}
 }
 .hb_option_picker_search input:focus {
   outline: none; border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent);
 }
 .hb_option_picker_list {
   flex: 1; overflow: auto; padding: 8px; min-height: 180px;
@@ -1763,11 +2409,11 @@ ${m()}
 }
 .hb_option_picker_item:hover { background: var(--hb-bg-hover, #f5f7fa); }
 .hb_option_picker_item.selected {
-  border-color: rgba(64, 158, 255, 0.36); background: rgba(64, 158, 255, 0.08);
+  border-color: color-mix(in srgb, var(--hb-color-primary) 36%, transparent); background: var(--hb-bg-active);
   color: var(--hb-color-primary, #409eff);
 }
 .hb_option_picker_item.disabled {
-  color: #c0c4cc; cursor: not-allowed; background: #f8fafc;
+  color: var(--hb-text-disabled); cursor: not-allowed; background: var(--hb-bg-section);
 }
 .hb_option_picker_label,
 .hb_option_picker_value,
@@ -1803,7 +2449,7 @@ ${m()}
 }
 /* 验证提示 */
 .ms_error_tip {
-  font-size: 12px; color: #f56c6c; margin-top: 4px; display: none;
+  font-size: 12px; color: var(--hb-color-danger); margin-top: 4px; display: none;
 }
 .ms_error_tip.show { display: block; }
 
@@ -1829,7 +2475,7 @@ ${m()}
 }
 .pair_item input[type="text"]:focus {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent);
 }
 .btn_del {
   width: 26px; height: 26px; border: 1px solid var(--hb-border-color, #dcdfe6);
@@ -1839,7 +2485,7 @@ ${m()}
   transition: all 0.2s;
 }
 .btn_del:hover {
-  background: #fef0f0; border-color: #f56c6c; color: #f56c6c;
+  background: var(--hb-danger-soft); border-color: var(--hb-color-danger); color: var(--hb-color-danger);
 }
 .btn_add_pair {
   display: inline-flex; align-items: center; gap: 4px;
@@ -1850,7 +2496,7 @@ ${m()}
 }
 .btn_add_pair:hover {
   border-color: var(--hb-color-primary, #409eff);
-  background: rgba(64, 158, 255, 0.06);
+  background: var(--hb-bg-hover);
 }
 .hb_simple_array_editor { display: flex; flex-direction: column; gap: 7px; }
 .hb_array_tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
@@ -1885,7 +2531,7 @@ ${m()}
 }
 .hb_nested_array_item input[type="text"]:focus {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent);
 }
 .hb_nested_array_add {
   align-self: flex-start; margin-top: 0; padding: 4px 10px;
@@ -1895,7 +2541,7 @@ ${m()}
 .huanban_rulego_editor_drawer_header .tag {
   display: inline-block; padding: 2px 8px; margin-left: 6px;
   font-size: 11px; font-weight: 400; color: var(--hb-color-primary, #409eff);
-  background: rgba(64, 158, 255, 0.1); border-radius: 3px;
+  background: var(--hb-info-soft); border-radius: 3px;
   vertical-align: middle;
 }
 
@@ -1918,8 +2564,8 @@ ${m()}
 /* === 校验错误提示 === */
 .validate_error_tip {
   display: none; padding: 8px 12px; margin-top: 10px;
-  background: #fef0f0; border: 1px solid #fbc4c4;
-  border-radius: var(--hb-radius-sm, 4px); color: #f56c6c;
+  background: var(--hb-danger-soft); border: 1px solid color-mix(in srgb, var(--hb-color-danger) 40%, transparent);
+  border-radius: var(--hb-radius-sm, 4px); color: var(--hb-color-danger);
   font-size: 12px; line-height: 1.5;
   animation: hb_fadeIn 0.2s ease;
 }
@@ -1934,7 +2580,7 @@ ${m()}
   padding: 2px 0;
 }
 .validate_error_tip .error_list li::before {
-  content: '• '; color: #e74c3c;
+  content: '• '; color: var(--hb-color-danger);
 }
 .huanban_rulego_editor_drawer input[readonly] {
   border-style: dashed;
@@ -1968,7 +2614,7 @@ ${m()}
   padding: 4px 8px; line-height: 1; border-radius: 4px; transition: all 0.2s ease;
 }
 .huanban_modal_header .close_btn:hover {
-  color: #fff; background: #e74c3c;
+  color: var(--rg-btn-danger-text); background: var(--hb-color-danger);
 }
 .huanban_modal_search {
   padding: 12px 20px;
@@ -1999,13 +2645,13 @@ ${m()}
   display: none; border: none; background: none; cursor: pointer; color: var(--hb-text-muted, #999);
   padding: 4px; border-radius: var(--hb-radius-sm, 4px); transition: all 0.2s; line-height: 1;
 }
-.item_delete_btn:hover { color: var(--hb-color-danger, #f56c6c); background: #fef0f0; }
+.item_delete_btn:hover { color: var(--hb-color-danger, #f56c6c); background: var(--hb-danger-soft); }
 .huanban_modal_item:hover .item_delete_btn { display: inline-flex; }
 .badge_root { display: inline-block; padding: 1px 6px; font-size: 11px; background: var(--hb-color-primary-bg, #e6f7ff); color: var(--hb-color-primary, #1890ff); border-radius: 3px; margin-left: 6px; }
 .badge_debug { display: inline-block; padding: 1px 6px; font-size: 11px; background: var(--hb-bg-tag, #fff7e6); color: var(--hb-color-warning, #fa8c16); border-radius: 3px; margin-left: 4px; }
-.badge_sub_chain { display: inline-block; padding: 1px 6px; font-size: 11px; background: #f0f0f0; color: #8c8c8c; border-radius: 3px; margin-left: 4px; }
-.badge_disabled { display: inline-block; padding: 1px 6px; font-size: 11px; background: #fef0f0; color: #f56c6c; border-radius: 3px; margin-left: 4px; }
-.badge_endpoint { display: inline-block; padding: 1px 6px; font-size: 10px; color: #fff; border-radius: 8px; margin-left: 4px; font-weight: 500; letter-spacing: 0.5px; }
+.badge_sub_chain { display: inline-block; padding: 1px 6px; font-size: 11px; background: var(--hb-bg-tag); color: var(--hb-text-muted); border-radius: 3px; margin-left: 4px; }
+.badge_disabled { display: inline-block; padding: 1px 6px; font-size: 11px; background: var(--hb-danger-soft); color: var(--hb-color-danger); border-radius: 3px; margin-left: 4px; }
+.badge_endpoint { display: inline-block; padding: 1px 6px; font-size: 10px; color: var(--rg-text-inverse); border-radius: 8px; margin-left: 4px; font-weight: 500; letter-spacing: 0.5px; }
 .huanban_modal_empty { text-align: center; padding: 40px 0; color: var(--hb-text-disabled, #c0c4cc); font-size: 14px; }
 .hb_diff_modal {
   width: min(1120px, 94vw);
@@ -2062,16 +2708,16 @@ ${m()}
 }
 .hb_diff_notice {
   margin: 10px 16px 0;
-  border-color: rgba(230, 162, 60, 0.28);
-  background: rgba(230, 162, 60, 0.08);
+  border-color: color-mix(in srgb, var(--hb-color-warning) 28%, transparent);
+  background: var(--hb-warning-soft);
   color: var(--hb-color-warning, #e6a23c);
 }
 .hb_diff_validation_error {
   margin: 10px 16px 0;
   padding: 10px 12px;
-  border: 1px solid rgba(245, 108, 108, 0.24);
+  border: 1px solid color-mix(in srgb, var(--hb-color-danger) 24%, transparent);
   border-radius: 8px;
-  background: rgba(245, 108, 108, 0.08);
+  background: var(--hb-danger-soft);
   color: var(--hb-color-danger, #f56c6c);
   font-size: 12px;
   line-height: 1.5;
@@ -2108,8 +2754,8 @@ ${m()}
   overflow: auto;
   border: 1px solid var(--hb-border-light, #ebeef5);
   border-radius: 8px;
-  background: #0f172a;
-  color: #dbeafe;
+  background: var(--hb-code-bg);
+  color: var(--hb-code-text);
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 12px;
   line-height: 1.5;
@@ -2122,7 +2768,7 @@ ${m()}
 .hb_diff_line_no,
 .hb_diff_line_mark {
   padding: 0 8px;
-  color: rgba(226, 232, 240, 0.5);
+  color: var(--hb-code-gutter-text);
   text-align: right;
   user-select: none;
 }
@@ -2139,19 +2785,19 @@ ${m()}
 }
 .hb_diff_line_meta,
 .hb_diff_line_hunk {
-  color: #93c5fd;
-  background: rgba(59, 130, 246, 0.16);
+  color: var(--hb-color-primary);
+  background: var(--hb-info-soft);
 }
 .hb_diff_line_added {
-  color: #bbf7d0;
-  background: rgba(22, 101, 52, 0.42);
+  color: var(--hb-color-success);
+  background: var(--hb-success-soft);
 }
 .hb_diff_line_removed {
-  color: #fecaca;
-  background: rgba(127, 29, 29, 0.48);
+  color: var(--hb-color-danger);
+  background: var(--hb-danger-soft);
 }
 .hb_diff_line_context {
-  color: #e2e8f0;
+  color: var(--hb-code-text);
 }
 .hb_diff_delta {
   margin: 12px 16px 0;
@@ -2244,16 +2890,16 @@ ${m()}
   font-size: 11px;
   font-weight: 700;
 }
-.hb_diff_added { background: rgba(103, 194, 58, 0.12); color: var(--hb-color-success, #67c23a); }
-.hb_diff_removed { background: rgba(245, 108, 108, 0.12); color: var(--hb-color-danger, #f56c6c); }
-.hb_diff_changed { background: rgba(64, 158, 255, 0.12); color: var(--hb-color-primary, #409eff); }
+.hb_diff_added { background: var(--hb-success-soft); color: var(--hb-color-success, #67c23a); }
+.hb_diff_removed { background: var(--hb-danger-soft); color: var(--hb-color-danger, #f56c6c); }
+.hb_diff_changed { background: var(--hb-info-soft); color: var(--hb-color-primary, #409eff); }
 .hb_diff_empty {
   padding: 32px !important;
   color: var(--hb-text-muted, #909399) !important;
   text-align: center;
 }
 
-/* === 官方风格设置弹窗 === */
+/* === Instance settings === */
 .huanban_settings_dialog {
   position: fixed; z-index: var(--hb-z-modal, 10021); top: 10px; left: 50%;
   transform: translateX(-50%);
@@ -2285,7 +2931,7 @@ ${m()}
   background: transparent; color: var(--hb-text-muted, #909399);
   cursor: pointer; font-size: 20px; line-height: 1;
 }
-.huanban_settings_header .close_btn:hover { color: #fff; background: var(--hb-color-danger, #f56c6c); }
+.huanban_settings_header .close_btn:hover { color: var(--rg-btn-danger-text); background: var(--hb-color-danger, #f56c6c); }
 .huanban_settings_body { flex: 1; display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 0; }
 .huanban_settings_tabs {
   padding: 10px 8px; border-right: 1px solid var(--hb-border-light, #ebeef5);
@@ -2306,6 +2952,42 @@ ${m()}
   min-width: 0; overflow: auto; padding: 16px;
   background: var(--hb-bg-main, #fff);
 }
+.hb_ui_settings { min-width: 0; font-size: 12px; color: var(--hb-text-primary); }
+.hb_ui_settings_heading { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 8px; }
+.hb_ui_settings_heading h3 { margin: 0; font-size: 14px; font-weight: 600; }
+.hb_ui_settings_heading [data-ui-state] { flex: 1; min-width: 0; color: var(--hb-text-muted); overflow-wrap: anywhere; }
+.hb_ui_settings_actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+.hb_ui_settings_actions button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; flex-shrink: 0; border: 1px solid var(--hb-border-light); border-radius: 4px; background: var(--hb-bg-toolbar); color: var(--hb-text-secondary); cursor: pointer; }
+.hb_ui_settings_actions button:hover { background: var(--hb-bg-hover); color: var(--hb-color-primary); }
+.hb_ui_settings_actions button:disabled { opacity: .5; cursor: not-allowed; }
+.hb_ui_section { margin: 0; padding: 10px 0; border-top: 1px solid var(--hb-border-light); }
+.hb_ui_section > summary { color: var(--hb-text-primary); cursor: pointer; font-size: 12px; font-weight: 600; }
+.hb_ui_setting_grid { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 9px; }
+.hb_ui_setting_grid:empty { display: none; }
+.hb_ui_toggle { display: inline-grid; position: relative; flex: 0 0 36px; width: 36px; height: 36px; cursor: pointer; }
+.hb_ui_toggle input[type=checkbox] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+.hb_ui_toggle_icon { --hb-ui-toggle-color: var(--hb-color-primary); display: grid; place-items: center; box-sizing: border-box; width: 36px; height: 36px; border: 1px solid var(--hb-border-light); border-radius: 5px; background: var(--hb-bg-section); color: var(--hb-text-muted); }
+.hb_ui_toggle_icon[data-ui-tone=success] { --hb-ui-toggle-color: var(--hb-color-success); }
+.hb_ui_toggle_icon[data-ui-tone=warning] { --hb-ui-toggle-color: var(--hb-color-warning); }
+.hb_ui_toggle_icon[data-ui-tone=danger] { --hb-ui-toggle-color: var(--hb-color-danger); }
+.hb_ui_toggle_icon svg { width: 17px; height: 17px; }
+.hb_ui_toggle input:checked + .hb_ui_toggle_icon { border-color: color-mix(in srgb, var(--hb-ui-toggle-color) 35%, var(--hb-border-light)); background: color-mix(in srgb, var(--hb-ui-toggle-color) 12%, var(--hb-bg-toolbar)); color: var(--hb-ui-toggle-color); box-shadow: inset 0 -2px 0 var(--hb-ui-toggle-color); }
+.hb_ui_toggle input:not(:checked) + .hb_ui_toggle_icon svg { filter: grayscale(1); }
+.hb_ui_toggle input:not(:disabled):hover + .hb_ui_toggle_icon { border-color: var(--hb-ui-toggle-color); }
+.hb_ui_toggle input:disabled { cursor: not-allowed; }
+.hb_ui_toggle input:disabled + .hb_ui_toggle_icon { opacity: .55; }
+.hb_ui_toggle input:focus-visible + .hb_ui_toggle_icon { outline: 2px solid var(--hb-color-primary); outline-offset: 2px; }
+.hb_ui_settings [hidden] { display: none !important; }
+.hb_ui_settings :is(input, select, button, summary):focus-visible { outline: 2px solid var(--hb-color-primary); outline-offset: 2px; }
+.hb_ui_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
+.hb_ui_field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 0; min-width: 0; }
+.hb_ui_field :is(input, select) { min-width: 0; width: 100%; box-sizing: border-box; height: 30px; border: 1px solid var(--hb-border-color); border-radius: 4px; background: var(--hb-bg-input); color: var(--hb-text-primary); padding: 4px 8px; font: inherit; }
+.hb_ui_settings_reopen { position: absolute; bottom: 12px; left: 12px; z-index: 25; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--hb-border-light); border-radius: 4px; background: var(--hb-bg-toolbar); color: var(--hb-text-primary); box-shadow: var(--hb-shadow-sm); cursor: pointer; }
+@media (max-width: 540px) {
+  .hb_ui_fields { grid-template-columns: minmax(0, 1fr); }
+  .hb_ui_settings_heading { flex-wrap: wrap; gap: 6px; }
+  .hb_ui_settings_heading [data-ui-state] { font-size: 11px; }
+}
 .huanban_settings_card {
   max-width: 720px; border: 1px solid var(--hb-border-light, #ebeef5);
   border-radius: 8px; background: var(--hb-bg-modal, #fff);
@@ -2343,7 +3025,7 @@ ${m()}
   background: var(--hb-bg-input, #fff); color: var(--hb-text-primary, #303133);
   outline: none; font-size: 13px;
 }
-.huanban_settings_field input:focus { border-color: var(--hb-color-primary, #409eff); box-shadow: 0 0 0 2px rgba(64,158,255,0.12); }
+.huanban_settings_field input:focus { border-color: var(--hb-color-primary, #409eff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent); }
 .huanban_settings_checkbox {
   display: flex; align-items: center; gap: 8px; margin-top: 12px;
   min-height: 28px;
@@ -2427,7 +3109,7 @@ ${m()}
 }
 .huanban_login_dialog input:focus {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64,158,255,0.12);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent);
 }
 .huanban_login_actions {
   justify-content: flex-end;
@@ -2458,7 +3140,7 @@ ${m()}
 }
 .huanban_login_inline input:focus {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64,158,255,0.12);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent);
 }
 .huanban_login_host_entry {
   display: flex;
@@ -2557,7 +3239,7 @@ ${m()}
 }
 .huanban_chain_selector_tabs button {
   flex: 1; height: 30px; border: 1px solid var(--hb-border-color, #dcdfe6);
-  background: #fff; color: var(--hb-text-secondary, #606266);
+  background: var(--hb-bg-input); color: var(--hb-text-secondary, #606266);
   border-radius: 4px; cursor: pointer; font-size: 12px;
 }
 .huanban_chain_selector_tabs button.active {
@@ -2590,7 +3272,7 @@ ${m()}
 .route_settings_modal .modal_title svg { color: var(--hb-color-primary, #409eff); }
 .route_settings_modal .modal_node_badge {
   display: inline-block; padding: 2px 10px; font-size: 11px; font-weight: 400;
-  background: rgba(64, 158, 255, 0.1); color: var(--hb-color-primary, #409eff);
+  background: var(--hb-info-soft); color: var(--hb-color-primary, #409eff);
   border-radius: 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .route_settings_modal .modal_close_btn {
@@ -2598,7 +3280,7 @@ ${m()}
   color: var(--hb-text-muted, #999); padding: 4px 8px; line-height: 1;
   border-radius: 4px; transition: all 0.2s ease;
 }
-.route_settings_modal .modal_close_btn:hover { color: #fff; background: #e74c3c; }
+.route_settings_modal .modal_close_btn:hover { color: var(--rg-btn-danger-text); background: var(--hb-color-danger); }
 .route_settings_modal .modal_body {
   flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 200px;
 }
@@ -2614,7 +3296,7 @@ ${m()}
 .route_settings_modal .modal_footer .btn_cancel:hover { background: var(--hb-bg-hover, #f5f5f5); }
 .route_settings_modal .modal_footer .btn_primary {
   padding: 7px 18px; border: 1px solid var(--hb-color-primary, #409eff); border-radius: var(--hb-radius-sm, 4px);
-  background: var(--hb-color-primary, #409eff); color: #fff; cursor: pointer; font-size: 13px;
+  background: var(--hb-color-primary, #409eff); color: var(--rg-btn-primary-text); cursor: pointer; font-size: 13px;
   transition: all 0.15s;
 }
 .route_settings_modal .modal_footer .btn_primary:hover { opacity: 0.85; }
@@ -2649,7 +3331,7 @@ ${m()}
   background: transparent; color: var(--hb-color-primary, #409eff); cursor: pointer; font-size: 12px;
   transition: all 0.2s;
 }
-.route_add_btn:hover { background: rgba(64, 158, 255, 0.06); border-style: solid; }
+.route_add_btn:hover { background: var(--hb-bg-hover); border-style: solid; }
 
 /* 路由条目行 */
 .route_list { display: flex; flex-direction: column; gap: 10px; }
@@ -2671,7 +3353,7 @@ ${m()}
   color: var(--hb-text-muted, #c0c4cc); padding: 2px 4px; border-radius: 4px;
   transition: all 0.15s; display: flex; align-items: center;
 }
-.route_del_btn:hover { color: var(--hb-color-danger, #f56c6c); background: #fef0f0; }
+.route_del_btn:hover { color: var(--hb-color-danger, #f56c6c); background: var(--hb-danger-soft); }
 .route_row_body { padding: 12px; }
 
 /* 路由表单控件 */
@@ -2687,7 +3369,7 @@ ${m()}
   color: var(--hb-text-primary, #333); background: var(--hb-bg-input, #fff);
   box-sizing: border-box; outline: none; transition: border-color 0.2s;
 }
-.route_input:focus { border-color: var(--hb-color-primary, #409eff); box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12); }
+.route_input:focus { border-color: var(--hb-color-primary, #409eff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent); }
 .route_select {
   width: 100%; padding: 7px 10px; border: 1px solid var(--hb-border-color, #dcdfe6);
   border-radius: var(--hb-radius-sm, 4px); font-size: 13px;
@@ -2717,12 +3399,12 @@ ${m()}
 .route_settings_trigger {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 6px 14px; border: 1px solid var(--hb-color-primary, #409eff);
-  border-radius: var(--hb-radius-sm, 4px); background: rgba(64, 158, 255, 0.06);
+  border-radius: var(--hb-radius-sm, 4px); background: var(--hb-info-soft);
   color: var(--hb-color-primary, #409eff); cursor: pointer; font-size: 13px;
   transition: all 0.2s; margin-top: 6px;
 }
 .route_settings_trigger:hover {
-  background: rgba(64, 158, 255, 0.12); border-color: var(--hb-color-primary, #3375d9);
+  background: var(--hb-bg-hover); border-color: var(--hb-color-primary, #3375d9);
 }
 .route_settings_trigger svg { width: 14px; height: 14px; }
 
@@ -2735,7 +3417,7 @@ ${m()}
   padding: 6px 14px; font-size: 13px; border-radius: var(--hb-radius-sm, 4px);
   cursor: pointer; transition: all 0.15s; border: none;
 }
-.btn_primary { background: var(--hb-color-primary, #409eff); color: #fff; }
+.btn_primary { background: var(--hb-color-primary, #409eff); color: var(--rg-btn-primary-text); }
 .btn_primary:hover { opacity: 0.85; }
 
 /* 路由列表表格 */
@@ -2804,7 +3486,7 @@ ${m()}
   border-radius: 4px; transition: all 0.15s;
 }
 .route_action_btn:hover { background: var(--hb-bg-hover, #f0f2f5); color: var(--hb-color-primary, #409eff); }
-.route_action_btn.danger:hover { background: #fef0f0; color: var(--hb-color-danger, #f56c6c); }
+.route_action_btn.danger:hover { background: var(--hb-danger-soft); color: var(--hb-color-danger, #f56c6c); }
 
 /* === 路由编辑表单弹窗 (二层弹窗) === */
 .route_form_modal {
@@ -2855,7 +3537,7 @@ ${m()}
 }
 .route_switch_slider::before {
   content: ''; position: absolute; width: 18px; height: 18px;
-  left: 2px; bottom: 2px; background: #fff; border-radius: 50%;
+  left: 2px; bottom: 2px; background: var(--rg-text-inverse); border-radius: 50%;
   transition: transform 0.3s;
 }
 .route_switch input:checked + .route_switch_slider { background: var(--hb-color-success, #13ce66); }
@@ -2870,13 +3552,13 @@ ${m()}
   font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
   transition: border-color 0.2s;
 }
-.route_textarea:focus { border-color: var(--hb-color-primary, #409eff); box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12); }
+.route_textarea:focus { border-color: var(--hb-color-primary, #409eff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent); }
 .route_schema_textarea { min-height: 200px; }
 .route_schema_value { display: none; }
 .route_schema_editor_wrap {
   border: 1px solid var(--hb-border-color, #dcdfe6);
   border-radius: var(--hb-radius-sm, 4px);
-  overflow: hidden; background: #1f2430;
+  overflow: hidden; background: var(--hb-code-bg);
 }
 .route_schema_code_editor { min-height: 300px; }
 .route_schema_fullscreen {
@@ -2912,7 +3594,7 @@ ${m()}
   background: var(--hb-bg-input, #fff); font-size: 12px;
 }
 .route_cron_weekdays input:checked + span {
-  color: #fff; border-color: var(--hb-color-primary, #409eff);
+  color: var(--rg-btn-primary-text); border-color: var(--hb-color-primary, #409eff);
   background: var(--hb-color-primary, #409eff);
 }
 .route_cron_preview {
@@ -2957,7 +3639,7 @@ ${m()}
 
 /* 输入框错误状态 */
 .route_input_error { border-color: var(--hb-color-danger, #f56c6c) !important; }
-.route_input_error:focus { box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.15) !important; }
+.route_input_error:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-danger) 15%, transparent) !important; }
 .route_error_tip {
   min-height: 16px; margin-top: 4px;
   color: var(--hb-color-danger, #f56c6c); font-size: 12px; line-height: 16px;
@@ -3027,16 +3709,16 @@ ${m()}
 .hb_point_table th { position: sticky; top: 0; z-index: 1; background: var(--hb-bg-section, #f8f9fb); color: var(--hb-text-secondary, #606266); }
 .hb_point_table .hb_point_check { width: 30px; text-align: center; }
 .hb_point_table .hb_point_actions { width: 78px; text-align: center; white-space: nowrap; }
-.hb_point_table tr.is-duplicate { background: rgba(245, 108, 108, .08); }
+.hb_point_table tr.is-duplicate { background: var(--hb-danger-soft); }
 .hb_point_table .rge-form-input { min-width: 90px; padding: 4px 6px; }
 .hb_point_table .btn_edit { width: 24px; height: 24px; margin-right: 4px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--hb-color-primary, #409eff); font-size: 15px; line-height: 24px; cursor: pointer; }
-.hb_point_table .btn_edit:hover, .hb_point_table .btn_edit[aria-expanded="true"] { background: rgba(64, 158, 255, .12); }
+.hb_point_table .btn_edit:hover, .hb_point_table .btn_edit[aria-expanded="true"] { background: var(--hb-bg-active); }
 .hb_point_table .hb_point_detail_row > td { padding: 10px; background: var(--hb-bg-section, #f8f9fb); text-align: left; }
 .hb_point_detail_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
 .hb_point_detail_field { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--hb-text-secondary, #606266); font-size: 12px; }
 .hb_point_detail_field small { color: var(--hb-text-secondary, #909399); line-height: 1.4; }
 .hb_point_table td .rge-form-input { width: 100%; box-sizing: border-box; padding: 5px 6px; border: 1px solid var(--hb-border-color, #dcdfe6); border-radius: 4px; background: var(--hb-bg-input, #fff); color: var(--hb-text-primary, #333); outline: none; }
-.hb_point_table td .rge-form-input:focus { border-color: var(--hb-color-primary, #409eff); box-shadow: 0 0 0 2px rgba(64, 158, 255, .12); }
+.hb_point_table td .rge-form-input:focus { border-color: var(--hb-color-primary, #409eff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent); }
 .hb_point_empty { padding: 20px; text-align: center; color: var(--hb-text-muted, #909399); font-size: 12px; }
 .hb_point_table_error { flex: 1 0 100%; padding: 6px 8px; border: 1px solid var(--hb-danger-border, #fde2e2); border-radius: 4px; background: var(--hb-danger-bg, #fef0f0); color: var(--hb-danger, #b42318); font-size: 12px; line-height: 1.4; }
 .hb_point_pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--hb-text-secondary, #606266); font-size: 12px; }
@@ -3103,7 +3785,7 @@ ${m()}
 .hb_struct_child select:focus,
 .hb_struct_child textarea:focus {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 10%, transparent);
 }
 .hb_struct_switch {
   display: flex;
@@ -3153,7 +3835,7 @@ ${m()}
   padding: 0 10px;
   border: 1px solid var(--hb-border-color, #dcdfe6);
   border-radius: var(--hb-radius-sm, 4px);
-  background: #fff;
+  background: var(--hb-bg-input);
   color: var(--hb-text-secondary, #606266);
   cursor: pointer;
   font-size: 12px;
@@ -3193,9 +3875,9 @@ ${m()}
   align-items: center;
   height: 20px;
   padding: 0 6px;
-  border: 1px solid rgba(16, 24, 40, 0.14);
+  border: 1px solid var(--hb-border-color);
   border-radius: 5px;
-  background: #fff;
+  background: var(--hb-bg-panel);
   color: var(--hb-color-primary, #409eff);
   font-size: 10px;
   font-weight: 700;
@@ -3253,7 +3935,7 @@ ${m()}
 .hb_expr_condition select:focus,
 .hb_expr_code:focus {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 10%, transparent);
 }
 .hb_expr_delete {
   width: 26px;
@@ -3261,7 +3943,7 @@ ${m()}
   margin-top: 4px;
   border: 1px solid var(--hb-border-color, #dcdfe6);
   border-radius: var(--hb-radius-sm, 4px);
-  background: #fff;
+  background: var(--hb-bg-input);
   color: var(--hb-text-muted, #909399);
   cursor: pointer;
 }
@@ -3269,7 +3951,7 @@ ${m()}
 .hb_expr_group_actions button.danger:hover {
   border-color: var(--hb-color-danger, #f56c6c);
   color: var(--hb-color-danger, #f56c6c);
-  background: #fef0f0;
+  background: var(--hb-danger-soft);
 }
 .hb_expr_delete.invisible {
   visibility: hidden;
@@ -3287,7 +3969,7 @@ ${m()}
   padding: 0 10px;
   border: 1px solid var(--hb-border-color, #dcdfe6);
   border-radius: var(--hb-radius-sm, 4px);
-  background: #fff;
+  background: var(--hb-bg-input);
   color: var(--hb-text-secondary, #606266);
   cursor: pointer;
   font-size: 12px;
@@ -3356,7 +4038,7 @@ ${m()}
 .hb_switch_case:focus,
 .hb_switch_then:focus {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 10%, transparent);
 }
 .hb_switch_delete {
   width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
@@ -3463,11 +4145,11 @@ ${m()}
 }
 .hb_rule_chain_action button {
   padding: 5px 12px; border: 1px solid var(--hb-color-primary, #409eff);
-  color: var(--hb-color-primary, #409eff); background: #fff; border-radius: var(--hb-radius-sm, 4px); cursor: pointer;
+  color: var(--hb-color-primary, #409eff); background: var(--hb-bg-input); border-radius: var(--hb-radius-sm, 4px); cursor: pointer;
 }
 .hb_selected_badge {
   display: inline-flex; align-items: center; justify-content: center;
-  padding: 3px 8px; border-radius: 3px; color: #67c23a; background: #f0f9eb; font-size: 12px;
+  padding: 3px 8px; border-radius: 3px; color: var(--hb-color-success); background: var(--hb-success-soft); font-size: 12px;
 }
 .hb_rule_chain_empty { padding: 80px 0; text-align: center; color: var(--hb-text-muted, #909399); }
 .hb_rule_chain_modal_footer,
@@ -3547,7 +4229,7 @@ ${m()}
   background: var(--hb-color-primary-bg, #ecf5ff); font-size: 12px;
 }
 .hb_builtin_tool_card.disabled .hb_builtin_tool_action {
-  color: #67c23a; background: #f0f9eb;
+  color: var(--hb-color-success); background: var(--hb-success-soft);
 }
 .hb_builtin_tool_empty {
   grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
@@ -3558,7 +4240,7 @@ ${m()}
 }
 .hb_builtin_tool_pagination button {
   height: 28px; padding: 0 10px; border: 1px solid var(--hb-border-color, #dcdfe6);
-  border-radius: var(--hb-radius-sm, 4px); background: #fff; cursor: pointer;
+  border-radius: var(--hb-radius-sm, 4px); background: var(--hb-bg-input); cursor: pointer;
 }
 .hb_builtin_tool_pagination button:disabled {
   cursor: not-allowed; color: var(--hb-text-muted, #909399); background: var(--hb-bg-section, #fafbfc);
@@ -3641,7 +4323,7 @@ ${m()}
 }
 .hb_tool_rulechain_picker button {
   height: 32px; padding: 0 12px; border: 1px solid var(--hb-color-primary, #409eff);
-  border-radius: var(--hb-radius-sm, 4px); background: #fff; color: var(--hb-color-primary, #409eff);
+  border-radius: var(--hb-radius-sm, 4px); background: var(--hb-bg-input); color: var(--hb-color-primary, #409eff);
   cursor: pointer; white-space: nowrap;
 }
 .hb_tool_rulechain_picker button:hover {
@@ -3652,8 +4334,8 @@ ${m()}
   border-radius: 11px; background: var(--hb-bg-section, #f5f7fa); color: var(--hb-text-secondary, #606266);
   font-size: 12px;
 }
-.hb_tool_type_builtin { background: #f0f9eb; color: #67c23a; }
-.hb_tool_type_rulechain { background: #ecf5ff; color: #409eff; }
+.hb_tool_type_builtin { background: var(--hb-success-soft); color: var(--hb-color-success); }
+.hb_tool_type_rulechain { background: var(--hb-info-soft); color: var(--hb-color-primary); }
 .hb_tools_actions { display: flex; justify-content: center; gap: 6px; padding: 4px !important; white-space: nowrap; }
 .hb_tools_actions .hb_tool_action_button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; line-height: 1; }
 .hb_tools_actions button.danger { color: var(--hb-color-danger, #f56c6c); }
@@ -3687,7 +4369,7 @@ ${m()}
 }
 .hb_schema_mode button {
   height: 26px; padding: 0 12px; border: 1px solid var(--hb-border-color, #dcdfe6);
-  border-radius: var(--hb-radius-sm, 4px); background: #fff; color: var(--hb-text-secondary, #606266);
+  border-radius: var(--hb-radius-sm, 4px); background: var(--hb-bg-input); color: var(--hb-text-secondary, #606266);
   cursor: pointer; font-size: 12px;
 }
 .hb_schema_mode button.active {
@@ -3724,7 +4406,7 @@ ${m()}
 .hb_schema_table input[type="checkbox"] { width: 16px; height: 16px; }
 .hb_schema_table button {
   padding: 3px 8px; border: 1px solid var(--hb-border-color, #dcdfe6);
-  border-radius: var(--hb-radius-sm, 4px); background: #fff; cursor: pointer; font-size: 12px;
+  border-radius: var(--hb-radius-sm, 4px); background: var(--hb-bg-input); cursor: pointer; font-size: 12px;
 }
 .hb_schema_drag_handle {
   width: 24px;
@@ -4064,20 +4746,24 @@ ${m()}
   border: 1px solid var(--hb-border-light, #eee);
   padding: 3px 4px;
   gap: 2px;
-  transform: translate(-50%, -100%);
+  transform: translate(-50%, var(--hb-operate-shift-y, -100%));
   animation: hb_operateIn 0.15s ease-out;
 }
 @keyframes hb_operateIn {
-  from { opacity: 0; transform: translate(-50%, -100%) scale(0.9) translateY(4px); }
-  to { opacity: 1; transform: translate(-50%, -100%) scale(1) translateY(0); }
+  from { opacity: 0; transform: translate(-50%, var(--hb-operate-shift-y, -100%)) scale(0.9) translateY(4px); }
+  to { opacity: 1; transform: translate(-50%, var(--hb-operate-shift-y, -100%)) scale(1) translateY(0); }
 }
 /* 底部小三角指示器 */
 .huanban_node_operate::after {
-  content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
+  content: ''; position: absolute; bottom: -5px; left: var(--hb-operate-arrow-x, 50%); transform: translateX(-50%);
   width: 0; height: 0;
   border-left: 5px solid transparent; border-right: 5px solid transparent;
   border-top: 5px solid var(--hb-bg-modal, #fff);
 }
+.huanban_node_operate[data-placement="bottom"]::after {
+  top: -5px; bottom: auto; border-top: 0;
+  border-bottom: 5px solid var(--hb-bg-modal, #fff);
+}
 .huanban_node_operate .oper-btn {
   background: none; border: none; cursor: pointer;
   width: 28px; height: 28px;
@@ -4123,12 +4809,12 @@ ${m()}
 }
 /* 删除按钮特殊 hover */
 .huanban_node_operate .oper-btn.del-btn:hover {
-  background: #fef0f0;
+  background: var(--hb-danger-soft);
   color: var(--hb-color-danger, #f56c6c);
 }
 .huanban_node_operate .oper-btn.run-single-btn:hover {
-  background: #fdf6ec;
-  color: #e6a23c;
+  background: var(--hb-warning-soft);
+  color: var(--hb-color-warning);
 }
 /* 操作栏分隔线 */
 .huanban_node_operate .oper-sep {
@@ -4161,7 +4847,7 @@ ${m()}
   background: var(--hb-bg-hover, #f0f2f5);
 }
 .huanban_context_menu .ctx_item.ctx_danger:hover {
-  background: #fef0f0; color: var(--hb-color-danger, #f56c6c);
+  background: var(--hb-danger-soft); color: var(--hb-color-danger, #f56c6c);
 }
 .huanban_context_menu .ctx_item.is_disabled,
 .huanban_context_menu .ctx_item:disabled {
@@ -4297,7 +4983,7 @@ ${m()}
 }
 .debug_view_btn_error:hover,
 .debug_view_btn_error:focus-visible {
-  background: #fef0f0;
+  background: var(--hb-danger-soft);
   border-color: var(--hb-color-danger, #f56c6c);
 }
 .debug_tag_in {
@@ -4312,40 +4998,40 @@ ${m()}
   color: var(--hb-color-danger, #f56c6c); font-size: 12px; cursor: pointer;
 }
 .debug_tag_err:hover { text-decoration: underline; }
-/* 终端视图 — 保留深色终端风格，与主题解耦 */
+/* Terminal content shares the editor's readable code palette. */
 .debug_terminal {
-  background: #1e1e2e; color: #cdd6f4; font-family: 'Menlo','Monaco','Consolas',monospace;
+  background: var(--hb-code-bg); color: var(--hb-code-text); font-family: 'Menlo','Monaco','Consolas',monospace;
   font-size: 12px; line-height: 1.6; padding: 12px 16px;
   max-height: 450px; overflow-y: auto; margin: 0; white-space: pre-wrap;
   word-break: break-all; border-radius: 0;
 }
-.debug_terminal .t_time { color: #89b4fa; }
-.debug_terminal .t_in { color: #89dceb; font-weight: 700; }
-.debug_terminal .t_out { color: #a6e3a1; font-weight: 700; }
-.debug_terminal .t_err { color: #f38ba8; }
-.debug_terminal .t_rel { color: #fab387; font-weight: 600; }
-.debug_terminal .t_meta { color: #6c7086; font-style: italic; }
+.debug_terminal .t_time { color: var(--hb-code-number); }
+.debug_terminal .t_in { color: var(--hb-code-type); font-weight: 700; }
+.debug_terminal .t_out { color: var(--hb-code-string); font-weight: 700; }
+.debug_terminal .t_err { color: var(--hb-color-danger); }
+.debug_terminal .t_rel { color: var(--hb-code-function); font-weight: 600; }
+.debug_terminal .t_meta { color: var(--hb-code-comment); font-style: italic; }
 .debug_terminal .t_node {
-  color: #cba6f7;
+  color: var(--hb-code-keyword);
   font-weight: 600;
 }
 .debug_terminal .t_node_clickable {
   cursor: pointer;
 }
 .debug_terminal .t_node_clickable:hover {
-  color: #f5c2e7;
+  color: var(--hb-code-type);
   text-decoration: underline;
 }
 .debug_terminal .t_node_subchain {
-  color: #6c7086;
+  color: var(--hb-code-comment);
   cursor: default;
 }
 .debug_terminal .t_duration {
   display: inline-block;
   padding: 0 4px;
   border-radius: 3px;
-  background: #313244;
-  color: #f9e2af;
+  background: var(--hb-bg-tag);
+  color: var(--hb-code-number);
   font-size: 11px;
   font-weight: 600;
 }
@@ -4407,7 +5093,7 @@ ${m()}
 }
 .debug_detail_editor {
   min-height: 400px;
-  background: #0d1117;
+  background: var(--hb-code-bg);
 }
 .debug_detail_footer {
   display: flex;
@@ -4437,8 +5123,8 @@ ${m()}
   height: 400px;
   overflow: auto;
   padding: 12px;
-  color: #c9d1d9;
-  background: #0d1117;
+  color: var(--hb-code-text);
+  background: var(--hb-code-bg);
   white-space: pre-wrap;
   word-break: break-word;
   font-family: 'Menlo','Monaco','Consolas',monospace;
@@ -4457,9 +5143,9 @@ ${m()}
   background: var(--hb-bg-modal, #fff); cursor: pointer; font-size: 12px; transition: all 0.15s;
 }
 .live_connect_btn { color: var(--hb-color-success, #67c23a); border-color: var(--hb-color-success, #67c23a); }
-.live_connect_btn:hover { background: #f0f9eb; }
+.live_connect_btn:hover { background: var(--hb-success-soft); }
 .live_disconnect_btn { color: var(--hb-color-danger, #f56c6c); border-color: var(--hb-color-danger, #f56c6c); }
-.live_disconnect_btn:hover { background: #fef0f0; }
+.live_disconnect_btn:hover { background: var(--hb-danger-soft); }
 .live_clear_btn { color: var(--hb-text-muted, #909399); }
 .live_clear_btn:hover { background: var(--hb-color-primary-bg, #ecf5ff); }
 .live_count { font-size: 12px; color: var(--hb-text-muted, #999); margin-left: auto; }
@@ -4467,7 +5153,7 @@ ${m()}
 
 /* ========== 代码编辑器工具按钮 ========== */
 .code_tool_btn:hover {
-  background: #21262d !important; color: #c9d1d9 !important; border-color: #58a6ff !important;
+  background: var(--hb-bg-hover) !important; color: var(--hb-text-primary) !important; border-color: var(--hb-color-primary) !important;
 }
 /* 代码编辑器全屏模式 */
 .code_editor_fullscreen {
@@ -4507,33 +5193,36 @@ ${m()}
   overflow: visible;
 }
 .huanban_rulego_editor_toolbar .tb_ai {
-  color: #7c3aed;
-  border-color: rgba(124, 58, 237, 0.36);
-  background: rgba(124, 58, 237, 0.06);
+  color: var(--hb-color-primary);
+  border-color: color-mix(in srgb, var(--hb-color-primary) 36%, transparent);
+  background: var(--hb-info-soft);
 }
 .huanban_rulego_editor_toolbar .tb_ai .hb_toolbar_ai_icon {
   display: inline-block !important;
   visibility: visible !important;
   opacity: 1 !important;
   color: currentColor;
-  filter: drop-shadow(0 0 3px rgba(124, 58, 237, 0.2));
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hb-color-primary) 20%, transparent));
 }
 .huanban_rulego_editor_toolbar .tb_ai:hover .hb_toolbar_ai_icon {
   color: currentColor;
 }
 .huanban_rulego_editor_toolbar .tb_ai:hover {
-  color: #fff;
-  border-color: #7c3aed;
-  background: #7c3aed;
+  color: var(--rg-btn-primary-text);
+  border-color: var(--hb-color-primary);
+  background: var(--hb-color-primary);
 }
-.huanban_rulego_editor_toolbar.huanban_toolbar_icon_only .tb_btn > span {
+.huanban_rulego_editor_toolbar.huanban_toolbar_icon_only .tb_btn > span:not(.hb_control_icon) {
   display: none;
 }
 .huanban_rulego_editor_toolbar.huanban_toolbar_icon_only .tb_btn {
   width: 30px;
   min-width: 30px;
-  padding-left: 0;
-  padding-right: 0;
+  height: 28px;
+  flex: 0 0 30px;
+  justify-content: center;
+  gap: 0;
+  padding: 0;
 }
 .huanban_rulego_editor_toolbar .tb_btn:hover {
   background: var(--hb-bg-section, #f0f2f5);
@@ -4541,8 +5230,8 @@ ${m()}
 /* 工具栏按钮激活状态 (如小地图开启时) */
 .huanban_rulego_editor_toolbar .tb_btn.tb_active {
   background: var(--hb-color-primary, #3685f2);
-  color: #fff;
-  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.72);
+  color: var(--rg-btn-primary-text);
+  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--rg-text-inverse) 72%, transparent);
 }
 
 /* ========== MiniMap 小地图容器 ========== */
@@ -4554,16 +5243,16 @@ ${m()}
   top: auto !important;
   z-index: 50;
   border-radius: var(--hb-radius-md, 6px);
-  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
-  border: 1px solid rgba(255,255,255,0.1);
+  box-shadow: var(--hb-shadow-md);
+  border: 1px solid var(--hb-border-color);
   overflow: hidden;
-  background: rgba(30, 30, 40, 0.85);
+  background: var(--hb-bg-panel);
 }
 .lf-mini-map-header {
-  background: rgba(20, 20, 30, 0.9);
-  border-bottom: 1px solid rgba(255,255,255,0.1);
+  background: var(--hb-bg-section);
+  border-bottom: 1px solid var(--hb-border-color);
   font-size: 12px;
-  color: rgba(255,255,255,0.7);
+  color: var(--hb-text-secondary);
 }
 .lf-mini-map-close {
   cursor: pointer;
@@ -4575,7 +5264,7 @@ ${m()}
   color: var(--hb-color-success, #27ae60); border-color: var(--hb-color-success, #27ae60);
 }
 .huanban_rulego_editor_toolbar .tb_save:hover {
-  background: #e8faf0; color: #1d8348;
+  background: var(--hb-success-soft); color: var(--hb-color-success);
 }
 .huanban_rulego_editor_toolbar .tb_deploy.tb_undeploy {
   color: var(--hb-color-danger, #f56c6c);
@@ -4583,14 +5272,14 @@ ${m()}
   background: var(--hb-color-danger-bg, #fef0f0);
 }
 .huanban_rulego_editor_toolbar .tb_deploy.tb_undeploy:hover {
-  color: #fff;
+  color: var(--rg-btn-danger-text);
   border-color: var(--hb-color-danger, #f56c6c);
   background: var(--hb-color-danger, #f56c6c);
 }
 .huanban_rulego_editor_toolbar .tb_save.tb_dirty {
   color: var(--hb-color-danger, #f56c6c);
   border-color: var(--hb-color-danger, #f56c6c);
-  background: rgba(245, 108, 108, 0.10);
+  background: var(--hb-danger-soft);
   animation: hb_save_dirty_pulse 1.4s ease-in-out infinite;
 }
 .huanban_rulego_editor_toolbar .tb_save.tb_dirty::after {
@@ -4603,35 +5292,35 @@ ${m()}
   border-radius: 50%;
   background: var(--hb-color-danger, #f56c6c);
   border: 2px solid var(--hb-bg-toolbar, #fff);
-  box-shadow: 0 0 0 3px rgba(245, 108, 108, 0.18);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-color-danger) 18%, transparent);
 }
 .huanban_rulego_editor_toolbar .tb_diff {
   position: relative;
-  color: #2563eb;
-  border-color: rgba(37, 99, 235, 0.38);
-  background: rgba(37, 99, 235, 0.04);
+  color: var(--hb-color-primary);
+  border-color: color-mix(in srgb, var(--hb-color-primary) 38%, transparent);
+  background: var(--hb-info-soft);
 }
 .huanban_rulego_editor_toolbar .tb_diff:disabled,
 .huanban_rulego_editor_toolbar .tb_diff[aria-disabled="true"] {
   opacity: 0.72;
-  color: #64748b;
-  border-color: rgba(100, 116, 139, 0.28);
-  background: rgba(248, 250, 252, 0.92);
+  color: var(--hb-text-disabled);
+  border-color: var(--hb-border-light);
+  background: var(--hb-bg-section);
 }
 .huanban_rulego_editor_toolbar .tb_diff.tb_dirty {
-  color: #fff;
-  border-color: #2563eb;
-  background: #2563eb;
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
+  color: var(--rg-btn-primary-text);
+  border-color: var(--hb-color-primary);
+  background: var(--hb-color-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 14%, transparent);
 }
 .huanban_rulego_editor_toolbar .tb_diff.tb_dirty:hover {
-  color: #fff;
-  background: #1d4ed8;
-  border-color: #1d4ed8;
+  color: var(--rg-btn-primary-text);
+  background: var(--rg-btn-primary-bg-hover);
+  border-color: var(--rg-btn-primary-bg-hover);
 }
 @keyframes hb_save_dirty_pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 108, 108, 0); }
-  50% { box-shadow: 0 0 0 4px rgba(245, 108, 108, 0.16); }
+  0%, 100% { box-shadow: 0 0 0 0 transparent; }
+  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hb-color-danger) 16%, transparent); }
 }
 .huanban_rulego_editor_toolbar .tb_saving {
   opacity: 0.7; pointer-events: none;
@@ -4640,13 +5329,13 @@ ${m()}
   color: var(--hb-color-warning, #e67e22); border-color: var(--hb-color-warning, #e67e22);
 }
 .huanban_rulego_editor_toolbar .tb_run:hover {
-  background: #fef5e7; color: #d35400;
+  background: var(--hb-warning-soft); color: var(--hb-color-warning);
 }
 .huanban_rulego_editor_toolbar .tb_component {
-  color: #8e44ad; border-color: #8e44ad;
+  color: var(--hb-color-primary); border-color: var(--hb-color-primary);
 }
 .huanban_rulego_editor_toolbar .tb_component:hover {
-  background: #f5eef8; color: #6c3483;
+  background: var(--hb-bg-hover); color: var(--hb-color-primary);
 }
 
 /* ========== LogicFlow Control 面板: 已迁移到 huanban_rulego_editor_canvas_toolbar，避免两组控制项混排 ========== */
@@ -4676,8 +5365,8 @@ ${m()}
 }
 /* 图标项样式 */
 .lf-control-item {
-  --hb-control-color: #475569;
-  --hb-control-border: rgba(71, 85, 105, 0.32);
+  --hb-control-color: var(--hb-text-secondary);
+  --hb-control-border: color-mix(in srgb, var(--hb-text-secondary) 32%, transparent);
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -4692,7 +5381,7 @@ ${m()}
   line-height: 28px !important;
   border: 1px solid var(--hb-control-border) !important;
   border-radius: 50% !important;
-  background: rgba(255,255,255,0.96) !important;
+  background: var(--hb-bg-toolbar) !important;
   cursor: pointer !important;
   color: var(--hb-control-color) !important;
   box-shadow: 0 1px 3px rgba(18, 26, 42, 0.10) !important;
@@ -4701,15 +5390,15 @@ ${m()}
 .lf-control-item:hover {
   background: var(--hb-control-color) !important;
   border-color: var(--hb-control-color) !important;
-  color: #fff !important;
+  color: var(--rg-text-inverse) !important;
   box-shadow: 0 5px 12px rgba(18, 26, 42, 0.15) !important;
   transform: translateY(-1px);
 }
 .lf-control-item:active { transform: translateY(0) scale(0.96); }
 .lf-control-item.disabled { opacity: 0.4; cursor: not-allowed !important; }
-.lf-control-item:has(.hb-ctrl-minimap) { --hb-control-color: #0f766e; --hb-control-border: rgba(15, 118, 110, 0.34); }
-.lf-control-item:has(.hb-ctrl-components) { --hb-control-color: #2563eb; --hb-control-border: rgba(37, 99, 235, 0.34); }
-.lf-control-item:has(.hb-ctrl-search) { --hb-control-color: #d97706; --hb-control-border: rgba(217, 119, 6, 0.34); }
+.lf-control-item:has(.hb-ctrl-minimap) { --hb-control-color: var(--hb-color-success); --hb-control-border: color-mix(in srgb, var(--hb-color-success) 34%, transparent); }
+.lf-control-item:has(.hb-ctrl-components) { --hb-control-color: var(--hb-color-primary); --hb-control-border: color-mix(in srgb, var(--hb-color-primary) 34%, transparent); }
+.lf-control-item:has(.hb-ctrl-search) { --hb-control-color: var(--hb-color-warning); --hb-control-border: color-mix(in srgb, var(--hb-color-warning) 34%, transparent); }
 /* 图标尺寸 */
 .lf-control-item i {
   display: block !important;
@@ -4719,15 +5408,18 @@ ${m()}
 }
 /* 自定义图标 — 小地图（地图框 + 标记点） */
 .hb-ctrl-minimap {
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1' opacity='0.4'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' fill='%23555'/%3E%3C/svg%3E") no-repeat center/contain !important;
+  background: currentColor !important;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1' opacity='0.4'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5' fill='currentColor'/%3E%3C/svg%3E") no-repeat center/contain !important;
 }
 /* 自定义图标 — 组件管理（四宫格） */
 .hb-ctrl-components {
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") no-repeat center/contain !important;
+  background: currentColor !important;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") no-repeat center/contain !important;
 }
 /* 自定义图标 — 搜索（放大镜） */
 .hb-ctrl-search {
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center/contain !important;
+  background: currentColor !important;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center/contain !important;
 }
 
 /* ========== 部署状态指示灯 ========== */
@@ -4738,21 +5430,21 @@ ${m()}
   border-radius: 50%;
   margin-right: 6px;
   vertical-align: middle;
-  background: #bbb;
-  box-shadow: 0 0 0 2px rgba(187,187,187,0.25);
+  background: var(--hb-text-disabled);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-text-disabled) 25%, transparent);
   transition: background 0.3s, box-shadow 0.3s;
 }
 .hb_deploy_dot.dot_success {
-  background: #67c23a;
-  box-shadow: 0 0 0 2px rgba(103,194,58,0.3);
+  background: var(--hb-color-success);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-success) 30%, transparent);
 }
 .hb_deploy_dot.dot_warning {
-  background: #e6a23c;
-  box-shadow: 0 0 0 2px rgba(230,162,60,0.3);
+  background: var(--hb-color-warning);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-warning) 30%, transparent);
 }
 .hb_deploy_dot.dot_danger {
-  background: #f56c6c;
-  box-shadow: 0 0 0 2px rgba(245,108,108,0.3);
+  background: var(--hb-color-danger);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-danger) 30%, transparent);
 }
 
 /* ========== 节点搜索浮动栏 ========== */
@@ -4875,7 +5567,7 @@ ${m()}
   height: 52px;
   border-radius: 999px;
   background: var(--hb-border-strong, #d8dde8);
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.78);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hb-bg-panel) 78%, transparent);
   transform: translate(-50%, -50%);
   opacity: 0.48;
   transition: opacity 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
@@ -4900,7 +5592,7 @@ ${m()}
 .huanban_ai_assistant_resize_handle:focus-visible::before,
 .huanban_ai_assistant_host.is_resizing .huanban_ai_assistant_resize_handle::before {
   background: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.16);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-color-primary) 16%, transparent);
   opacity: 1;
 }
 .huanban_ai_assistant_resize_handle:hover::after,
@@ -4996,7 +5688,7 @@ ${m()}
 }
 .run_mode_switch button {
   height: 30px; padding: 0 12px; border: 1px solid var(--hb-border-color, #dcdfe6);
-  border-radius: 4px; background: #fff; color: var(--hb-text-secondary, #606266);
+  border-radius: 4px; background: var(--hb-bg-input); color: var(--hb-text-secondary, #606266);
   cursor: pointer; font-size: 12px;
 }
 .run_mode_switch button.active {
@@ -5099,9 +5791,9 @@ ${m()}
 .run_ai_compact_warning {
   margin: 6px 14px 0;
   padding: 7px 9px;
-  border: 1px solid rgba(230, 162, 60, .34);
+  border: 1px solid color-mix(in srgb, var(--hb-color-warning) 34%, transparent);
   border-radius: 6px;
-  background: rgba(230, 162, 60, .08);
+  background: var(--hb-warning-soft);
   color: var(--hb-color-warning, #b88230);
   font-size: 12px;
   line-height: 1.45;
@@ -5303,7 +5995,7 @@ ${m()}
   cursor: text;
 }
 .hb_md_preview[contenteditable="true"]:focus {
-  box-shadow: inset 0 0 0 2px rgba(64, 158, 255, 0.14);
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 14%, transparent);
 }
 .hb_md_editor[data-md-mode="split"] .hb_md_body {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -5427,18 +6119,18 @@ ${m()}
 }
 .run_ai_model_catalog_status[data-status="loading"] {
   color: var(--hb-color-primary, #409eff);
-  background: rgba(64, 158, 255, 0.06);
-  border-color: rgba(64, 158, 255, 0.18);
+  background: var(--hb-info-soft);
+  border-color: color-mix(in srgb, var(--hb-color-primary) 18%, transparent);
 }
 .run_ai_model_catalog_status[data-status="success"] {
   color: var(--hb-color-success, #67c23a);
-  background: rgba(103, 194, 58, 0.08);
-  border-color: rgba(103, 194, 58, 0.2);
+  background: var(--hb-success-soft);
+  border-color: color-mix(in srgb, var(--hb-color-success) 20%, transparent);
 }
 .run_ai_model_catalog_status[data-status="error"] {
   color: var(--hb-color-danger, #f56c6c);
-  background: rgba(245, 108, 108, 0.08);
-  border-color: rgba(245, 108, 108, 0.2);
+  background: var(--hb-danger-soft);
+  border-color: color-mix(in srgb, var(--hb-color-danger) 20%, transparent);
 }
 .run_ai_model_global_note {
   display: inline-block;
@@ -5581,15 +6273,15 @@ ${m()}
 }
 .run_ai_model_probe_status[data-status="loading"] {
   color: var(--hb-color-primary, #409eff);
-  background: rgba(64, 158, 255, 0.06);
+  background: var(--hb-info-soft);
 }
 .run_ai_model_probe_status[data-status="success"] {
   color: var(--hb-color-success, #67c23a);
-  background: rgba(103, 194, 58, 0.08);
+  background: var(--hb-success-soft);
 }
 .run_ai_model_probe_status[data-status="error"] {
   color: var(--hb-color-danger, #f56c6c);
-  background: rgba(245, 108, 108, 0.08);
+  background: var(--hb-danger-soft);
 }
 .run_ai_model_diagnostics {
   border-bottom: 1px solid var(--hb-border-light, #ebeef5);
@@ -5681,9 +6373,9 @@ ${m()}
   align-items: center;
   gap: 5px;
   padding: 3px 8px;
-  border: 1px solid rgba(64, 158, 255, 0.22);
+  border: 1px solid color-mix(in srgb, var(--hb-color-primary) 22%, transparent);
   border-radius: 999px;
-  background: rgba(64, 158, 255, 0.06);
+  background: var(--hb-info-soft);
   color: var(--hb-color-primary, #409eff);
   cursor: pointer;
   font-size: 11px;
@@ -5745,9 +6437,9 @@ ${m()}
 .run_ai_model_profile {
   margin: 10px 10px 0;
   padding: 9px 10px;
-  border: 1px solid rgba(64, 158, 255, 0.16);
+  border: 1px solid color-mix(in srgb, var(--hb-color-primary) 16%, transparent);
   border-radius: 6px;
-  background: rgba(64, 158, 255, 0.045);
+  background: var(--hb-info-soft);
 }
 .run_ai_model_profile_empty {
   display: block;
@@ -5783,7 +6475,7 @@ ${m()}
 .run_ai_model_profile_badges span {
   max-width: 100%;
   padding: 2px 7px;
-  border: 1px solid rgba(64, 158, 255, 0.18);
+  border: 1px solid color-mix(in srgb, var(--hb-color-primary) 18%, transparent);
   border-radius: 999px;
   background: var(--hb-bg-modal, #fff);
   color: var(--hb-color-primary, #409eff);
@@ -5854,9 +6546,9 @@ ${m()}
 }
 .run_ai_param_policy_backend {
   padding: 6px 8px;
-  border: 1px solid rgba(230, 162, 60, .34);
+  border: 1px solid color-mix(in srgb, var(--hb-color-warning) 34%, transparent);
   border-radius: 6px;
-  background: rgba(230, 162, 60, .08);
+  background: var(--hb-warning-soft);
 }
 .run_ai_param_field > span {
   min-width: 0;
@@ -5883,19 +6575,19 @@ ${m()}
   line-height: 16px;
 }
 .run_ai_param_field.run_ai_param_editable em {
-  background: rgba(103, 194, 58, 0.1);
+  background: var(--hb-success-soft);
   color: var(--hb-color-success, #67c23a);
 }
 .run_ai_param_field.run_ai_param_omitted em {
-  background: rgba(144, 147, 153, 0.12);
+  background: var(--hb-bg-tag);
   color: var(--hb-text-muted, #909399);
 }
 .run_ai_param_field.run_ai_param_fixed em {
-  background: rgba(64, 158, 255, 0.1);
+  background: var(--hb-info-soft);
   color: var(--hb-color-primary, #409eff);
 }
 .run_ai_param_field.run_ai_param_unsupported em {
-  background: rgba(144, 147, 153, 0.12);
+  background: var(--hb-bg-tag);
   color: var(--hb-text-muted, #909399);
 }
 .run_ai_param_field > small {
@@ -6067,7 +6759,7 @@ ${m()}
 .btn_cancel.success {
   color: var(--hb-color-success, #67c23a);
   border-color: var(--hb-color-success-light, #d1edc4);
-  background: rgba(103, 194, 58, 0.08);
+  background: var(--hb-success-soft);
 }
 .run_ai_skills_meta {
   min-height: 24px;
@@ -6394,7 +7086,7 @@ ${m()}
 }
 .run_chat_message.assistant.streaming .run_chat_avatar {
   position: relative;
-  box-shadow: 0 0 0 0 rgba(64,158,255,0.22);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--hb-color-primary) 22%, transparent);
   animation: hb-ai-avatar-pulse 1.5s ease-in-out infinite;
 }
 .run_chat_message.user .run_chat_avatar {
@@ -6402,11 +7094,11 @@ ${m()}
 }
 .run_chat_bubble {
   max-width: min(760px, 86%); border: 1px solid var(--hb-border-light, #ebeef5);
-  border-radius: 8px; padding: 10px 12px; background: #fff;
+  border-radius: 8px; padding: 10px 12px; background: var(--hb-bg-panel);
   color: var(--hb-text-primary, #303133); box-shadow: 0 1px 2px rgba(0,0,0,0.03);
 }
 .run_chat_message.user .run_chat_bubble {
-  background: var(--hb-color-primary-bg, #ecf5ff); border-color: #d9ecff;
+  background: var(--hb-color-primary-bg, #ecf5ff); border-color: var(--hb-color-primary-light);
 }
 .run_chat_bubble_header {
   display: flex; align-items: center; gap: 8px;
@@ -6455,7 +7147,7 @@ ${m()}
 .run_chat_content.markdown-body code,
 .run_chat_reasoning_markdown.markdown-body code {
   font-family: Menlo, Monaco, Consolas, monospace; font-size: 0.92em;
-  padding: 1px 4px; background: rgba(175, 184, 193, 0.2); border-radius: 3px;
+  padding: 1px 4px; background: var(--hb-code-bg); border-radius: 3px;
 }
 .run_chat_content.markdown-body a,
 .run_chat_reasoning_markdown.markdown-body a {
@@ -6552,7 +7244,7 @@ ${m()}
 }
 .run_chat_message.streaming .run_chat_bubble {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 1px rgba(64,158,255,0.10), 0 8px 20px rgba(64,158,255,0.10);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hb-color-primary) 10%, transparent), 0 8px 20px color-mix(in srgb, var(--hb-color-primary) 10%, transparent);
 }
 .run_chat_thinking_indicator {
   display: inline-flex; align-items: center; gap: 6px;
@@ -6650,7 +7342,7 @@ ${m()}
 }
 .run_chat_popconfirm_confirm {
   border: 1px solid var(--hb-color-danger, #f56c6c); background: var(--hb-color-danger, #f56c6c);
-  color: #fff;
+  color: var(--rg-btn-danger-text);
 }
 .run_chat_reasoning {
   margin: 8px 0; padding: 8px 10px; border-radius: 6px;
@@ -6662,11 +7354,11 @@ ${m()}
 }
 .run_chat_reasoning.error {
   border: 1px solid var(--hb-color-danger-light, #fbc4c4);
-  background: rgba(245, 108, 108, 0.06);
+  background: var(--hb-danger-soft);
 }
 .run_chat_reasoning.cancel {
   border: 1px solid var(--hb-color-warning-light, #faecd8);
-  background: rgba(230, 162, 60, 0.08);
+  background: var(--hb-warning-soft);
 }
 .run_chat_reasoning_header,
 .run_chat_sub_summary,
@@ -6723,7 +7415,7 @@ ${m()}
 .run_chat_thinking_state.success {
   border-color: var(--hb-color-success-light, #d1edc4);
   color: var(--hb-color-success, #67c23a);
-  background: rgba(103, 194, 58, 0.1);
+  background: var(--hb-success-soft);
 }
 .run_chat_reasoning_state.error,
 .run_chat_thinking_state.error,
@@ -6731,7 +7423,7 @@ ${m()}
 .run_chat_thinking_state.cancel {
   border-color: var(--hb-color-danger-light, #fbc4c4);
   color: var(--hb-color-danger, #f56c6c);
-  background: rgba(245, 108, 108, 0.1);
+  background: var(--hb-danger-soft);
 }
 .run_chat_progress {
   width: 60px; height: 4px; border-radius: 999px; overflow: hidden;
@@ -6739,7 +7431,7 @@ ${m()}
 }
 .run_chat_progress_fill {
   display: block; height: 100%; border-radius: inherit;
-  background: linear-gradient(90deg, var(--hb-color-primary, #409eff), #79bbff);
+  background: linear-gradient(90deg, var(--hb-color-primary, #409eff), var(--hb-color-primary-light));
   transition: width 0.3s ease;
 }
 .run_chat_progress_text {
@@ -6789,11 +7481,11 @@ ${m()}
 }
 .run_chat_tool_item.error {
   border-color: var(--hb-color-danger-light, #fbc4c4);
-  background: rgba(245, 108, 108, 0.08);
+  background: var(--hb-danger-soft);
 }
 .run_chat_tool_item.cancel {
   border-color: var(--hb-color-danger-light, #fbc4c4);
-  background: rgba(245, 108, 108, 0.06);
+  background: var(--hb-danger-soft);
 }
 .run_chat_tool_header {
   display: block; background: var(--hb-bg-section, #fafafa);
@@ -6824,12 +7516,12 @@ ${m()}
 }
 .run_chat_tool_status.success {
   color: var(--hb-color-success, #67c23a); border-color: var(--hb-color-success-light, #d1edc4);
-  background: rgba(103, 194, 58, 0.1);
+  background: var(--hb-success-soft);
 }
 .run_chat_tool_status.error,
 .run_chat_tool_status.cancel {
   color: var(--hb-color-danger, #f56c6c); border-color: var(--hb-color-danger-light, #fbc4c4);
-  background: rgba(245, 108, 108, 0.1);
+  background: var(--hb-danger-soft);
 }
 .run_chat_tool_details {
   padding: 8px 10px; border-top: 1px solid var(--hb-border-light, #ebeef5);
@@ -6848,12 +7540,12 @@ ${m()}
   border-radius: 4px; padding: 8px;
 }
 .run_chat_tool_result pre {
-  background: rgba(103, 194, 58, 0.1);
+  background: var(--hb-success-soft);
   border: 1px solid var(--hb-color-success-light, #d1edc4);
   border-radius: 4px; padding: 8px;
 }
 .run_chat_tool_error pre {
-  background: rgba(245, 108, 108, 0.1);
+  background: var(--hb-danger-soft);
   border: 1px solid var(--hb-color-danger-light, #fbc4c4);
   color: var(--hb-color-danger, #f56c6c);
   border-radius: 4px; padding: 8px;
@@ -6932,7 +7624,7 @@ ${m()}
 .run_chat_rule_chain_btn.primary {
   border-color: var(--hb-color-primary, #409eff);
   background: var(--hb-color-primary, #409eff);
-  color: #fff;
+  color: var(--rg-btn-primary-text);
 }
 .run_chat_footer {
   padding: 10px 12px; border-top: 1px solid var(--hb-border-light, #ebeef5);
@@ -6951,7 +7643,7 @@ ${m()}
 }
 .run_chat_input_wrapper:focus-within {
   border-color: var(--hb-color-primary, #409eff);
-  box-shadow: 0 0 0 2px rgba(64,158,255,0.12);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent);
 }
 .run_chat_input {
   flex: 1 1 auto;
@@ -6987,7 +7679,7 @@ ${m()}
   border: 1px solid var(--hb-color-danger, #f56c6c);
   border-radius: 999px;
   background: var(--hb-color-danger, #f56c6c);
-  color: #fff;
+  color: var(--rg-btn-primary-text);
   cursor: pointer;
 }
 .run_chat_send_btn.primary {
@@ -7158,7 +7850,7 @@ ${m()}
 .btn_run_execute {
   display: flex; align-items: center; gap: 6px;
   padding: 8px 18px; border: none; border-radius: var(--hb-radius-sm, 4px);
-  background: var(--hb-color-primary, #409eff); color: #fff; cursor: pointer; font-size: 13px; font-weight: 500;
+  background: var(--hb-color-primary, #409eff); color: var(--rg-btn-primary-text); cursor: pointer; font-size: 13px; font-weight: 500;
   transition: all 0.2s;
 }
 .btn_run_execute:hover { opacity: 0.85; }
@@ -7171,7 +7863,7 @@ ${m()}
 .btn_run_notify:hover { background: var(--hb-bg-hover, #f5f5f5); }
 .btn_cancel.danger {
   color: var(--hb-color-danger, #f56c6c);
-  border-color: rgba(245, 108, 108, 0.35);
+  border-color: color-mix(in srgb, var(--hb-color-danger) 35%, transparent);
 }
 .run_node_scope {
   display: grid;
@@ -7258,7 +7950,7 @@ ${m()}
 }
 .run_body_mode_switch button {
   border: 1px solid var(--hb-border-color, #dcdfe6);
-  background: #fff;
+  background: var(--hb-bg-input);
   color: var(--hb-text-secondary, #606266);
   border-radius: 4px;
   padding: 4px 10px;
@@ -7268,7 +7960,7 @@ ${m()}
 .run_body_mode_switch button.active {
   border-color: var(--hb-color-primary, #409eff);
   background: var(--hb-color-primary, #409eff);
-  color: #fff;
+  color: var(--rg-btn-primary-text);
 }
 .run_dynamic_form {
   display: flex;
@@ -7305,18 +7997,18 @@ ${m()}
 }
 .run_dynamic_array textarea.invalid {
   border-color: var(--hb-color-danger, #f56c6c);
-  box-shadow: 0 0 0 1px rgba(245, 108, 108, 0.16);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hb-color-danger) 16%, transparent);
 }
 .run_warning {
-  padding: 8px 10px; border: 1px solid #f5dab1; background: #fdf6ec;
-  color: #b88230; border-radius: 4px; font-size: 12px; line-height: 1.5;
+  padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--hb-color-warning) 40%, transparent); background: var(--hb-warning-soft);
+  color: var(--hb-color-warning); border-radius: 4px; font-size: 12px; line-height: 1.5;
 }
 .run_replay_notice {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   padding: 8px 10px;
-  border: 1px solid rgba(64, 158, 255, 0.25);
+  border: 1px solid color-mix(in srgb, var(--hb-color-primary) 25%, transparent);
   background: var(--hb-color-primary-bg, #ecf5ff);
   color: var(--hb-color-primary, #409eff);
   border-radius: 4px;
@@ -7368,7 +8060,7 @@ ${m()}
 .run_history_pagination select,
 .run_history_page_size_custom input {
   height: 28px; border: 1px solid var(--hb-border-color, #dcdfe6); border-radius: 4px;
-  padding: 0 6px; font-size: 12px; color: var(--hb-text-primary, #303133); background: #fff;
+  padding: 0 6px; font-size: 12px; color: var(--hb-text-primary, #303133); background: var(--hb-bg-input);
 }
 .run_history_page_size_custom {
   display: inline-flex;
@@ -7388,7 +8080,7 @@ ${m()}
 .run_history_item {
   display: grid; grid-template-columns: 150px 88px minmax(0,1fr) 90px; gap: 8px; align-items: center;
   width: 100%; text-align: left; border: 1px solid var(--hb-border-light, #ebeef5);
-  background: #fff; border-radius: 4px; padding: 8px 10px; cursor: default;
+  background: var(--hb-bg-panel); border-radius: 4px; padding: 8px 10px; cursor: default;
   color: var(--hb-text-primary, #303133);
 }
 .run_history_item.remote {
@@ -7429,7 +8121,7 @@ ${m()}
 }
 .run_history_action:focus-visible,
 .run_history_msg_action:focus-visible {
-  outline: 2px solid rgba(64, 158, 255, 0.35);
+  outline: 2px solid color-mix(in srgb, var(--hb-color-primary) 35%, transparent);
   outline-offset: 2px;
   border-radius: 3px;
 }
@@ -7449,7 +8141,7 @@ ${m()}
 }
 .run_history_log_item {
   border: 1px solid var(--hb-border-light, #ebeef5); border-radius: 6px; overflow: hidden;
-  background: #fff;
+  background: var(--hb-bg-panel);
 }
 .run_history_log_title {
   display: grid; grid-template-columns: minmax(100px, 1fr) 90px 72px 60px 64px; gap: 8px; align-items: center;
@@ -7529,7 +8221,7 @@ ${m()}
   overflow: hidden;
   border: 1px solid var(--hb-border-color, #dcdfe6);
   border-radius: 10px;
-  background: #fff;
+  background: var(--hb-bg-modal);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
   color: var(--hb-text-primary, #303133);
 }
@@ -7556,7 +8248,7 @@ ${m()}
   margin-left: auto;
   border: 1px solid var(--hb-border-color, #dcdfe6);
   border-radius: 6px;
-  background: #fff;
+  background: var(--hb-bg-input);
   color: var(--hb-text-secondary, #606266);
   cursor: pointer;
   font-size: 18px;
@@ -7586,7 +8278,7 @@ ${m()}
   padding: 8px 14px;
   border-bottom: 1px solid var(--hb-border-light, #ebeef5);
   color: var(--hb-text-secondary, #606266);
-  background: #fff;
+  background: var(--hb-bg-panel);
   font-size: 12px;
 }
 .huanban_json_viewer_textarea {
@@ -7598,8 +8290,8 @@ ${m()}
   border: 0;
   outline: none;
   padding: 14px 16px;
-  background: #0f172a;
-  color: #dbeafe;
+  background: var(--hb-code-bg);
+  color: var(--hb-code-text);
   font-size: 12px;
   line-height: 18px;
   font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
@@ -7625,8 +8317,8 @@ ${m()}
   line-height: 1.5;
 }
 .run_integration_content code {
-  display: block; padding: 6px 8px; border-radius: 4px; background: #f6f8fa;
-  color: #1f2937; font-family: Menlo, Monaco, Consolas, monospace; font-size: 12px;
+  display: block; padding: 6px 8px; border-radius: 4px; background: var(--hb-code-bg);
+  color: var(--hb-code-text); font-family: Menlo, Monaco, Consolas, monospace; font-size: 12px;
   white-space: pre-wrap; word-break: break-all;
 }
 /* 输入区 Tab */
@@ -7726,7 +8418,7 @@ ${m()}
   height: 22px;
   border-radius: var(--hb-radius-sm, 4px);
   background: var(--hb-color-primary, #409eff);
-  color: #fff;
+  color: var(--rg-btn-primary-text);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0;
@@ -7762,7 +8454,7 @@ ${m()}
 }
 .code_textarea:focus { border-color: var(--hb-color-primary, #409eff); }
 .code_output {
-  background: #1e1e2e; color: #cdd6f4;
+  background: var(--hb-code-bg); color: var(--hb-code-text);
   font-family: 'Menlo','Monaco','Consolas',monospace;
   font-size: 12px; line-height: 1.6; padding: 12px 16px; margin: 0;
   border-radius: var(--hb-radius-sm, 4px); white-space: pre-wrap; word-break: break-all;
@@ -7771,19 +8463,20 @@ ${m()}
 .code_output.full_editor {
   flex: 1 1 auto; min-height: 100%; max-height: none; box-sizing: border-box;
 }
-.code_output .t_out { color: #a6e3a1; font-weight: 700; }
-.code_output .t_err { color: #f38ba8; font-weight: 700; }
+.code_output .t_out { color: var(--hb-code-string); font-weight: 700; }
+.code_output .t_err { color: var(--hb-color-danger); font-weight: 700; }
 
 /* ========== 只读拓扑诊断 ========== */
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_diagnostics {
-  --hb-tool-color: #b45309;
-  --hb-tool-border: rgba(180, 83, 9, 0.34);
+  --hb-tool-color: var(--hb-color-warning);
+  --hb-tool-border: color-mix(in srgb, var(--hb-color-warning) 34%, transparent);
   position: relative;
 }
 .huanban_rulego_editor_canvas_toolbar .hb_canvas_tool_count {
   position: absolute;
   top: -5px;
   right: -5px;
+  z-index: 2;
   min-width: 14px;
   height: 14px;
   padding: 0 3px;
@@ -7794,7 +8487,7 @@ ${m()}
   border: 1px solid var(--hb-bg-toolbar, #fff);
   border-radius: 7px;
   background: var(--hb-color-danger, #ef4444);
-  color: #fff;
+  color: var(--rg-btn-danger-text);
   font-size: 9px;
   font-weight: 700;
   line-height: 1;
@@ -7903,18 +8596,18 @@ ${m()}
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: #fff7ed;
-  color: #b45309;
+  background: var(--hb-warning-soft);
+  color: var(--hb-color-warning);
   font-size: 11px;
   font-weight: 700;
 }
 .hb_diagnostic_error .hb_diagnostic_icon {
-  background: #fef2f2;
-  color: #dc2626;
+  background: var(--hb-danger-soft);
+  color: var(--hb-color-danger);
 }
 .hb_diagnostic_info .hb_diagnostic_icon {
-  background: #eff6ff;
-  color: #2563eb;
+  background: var(--hb-info-soft);
+  color: var(--hb-color-primary);
 }
 .hb_diagnostic_content {
   min-width: 0;
@@ -7939,7 +8632,7 @@ ${m()}
 }
 .hb_diagnostic_marker .lf-node-content,
 .hb_diagnostic_marker .lf-edge {
-  filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.9));
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hb-color-warning) 90%, transparent));
 }
 
 /* ========== 共享命令、节点选择与文档浮层 ========== */
@@ -8381,15 +9074,15 @@ ${m()}
   overflow: auto;
   border: 1px solid var(--hb-border-light, #e5e7eb);
   border-radius: 5px;
-  background: #111827;
-  color: #e5e7eb;
+  background: var(--hb-code-bg);
+  color: var(--hb-code-text);
   font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 .hb_docs_article code {
   padding: 1px 4px;
   border-radius: 3px;
   background: var(--hb-bg-section, #f3f4f6);
-  color: #b42318;
+  color: var(--hb-code-keyword);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 .hb_docs_article pre code { padding: 0; background: transparent; color: inherit; }
@@ -8466,7 +9159,7 @@ ${m()}
 /* ========== 通用 btn_primary / btn_cancel ========== */
 .btn_primary {
   padding: 8px 20px; border: 1px solid var(--hb-color-primary, #409eff); border-radius: var(--hb-radius-sm, 4px);
-  background: var(--hb-color-primary, #409eff); color: #fff; cursor: pointer; font-size: 13px; transition: opacity 0.2s;
+  background: var(--hb-color-primary, #409eff); color: var(--rg-btn-primary-text); cursor: pointer; font-size: 13px; transition: opacity 0.2s;
 }
 .btn_primary:hover { opacity: 0.85; }
 .btn_cancel {
@@ -8478,7 +9171,7 @@ ${m()}
 
 /* ========================================================================
    现代主题 (data-theme="modern") — 节点 & 画布视觉增强
-   参考 RuleChainEditor.vue 的节点设计风格:
+   设计重点:
    - 节点更大圆角 (10px)
    - 选中蓝色发光 (#3b82f6 glow)
    - 端口从方块变为圆形, hover 放大变蓝
@@ -8489,7 +9182,7 @@ ${m()}
 /* --- 侧边栏节点块: 大圆角 + 轻柔阴影 --- */
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_node_block {
   border-radius: var(--hb-node-radius, 10px);
-  border-color: rgba(0,0,0,0.1);
+  border-color: var(--hb-border-color);
   transition: box-shadow 0.15s, transform 0.12s;
 }
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_node_block:hover {
@@ -8546,47 +9239,47 @@ ${m()}
 
 /* --- 侧边栏分组头: 圆润 --- */
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_group_header {
-  border-bottom: 1px solid rgba(0,0,0,0.04);
+  border-bottom: 1px solid var(--hb-border-light);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_group_header:hover {
-  background: rgba(59,130,246,0.04);
+  background: var(--hb-bg-hover);
 }
 
 /* --- 侧边栏搜索框: 圆润边框 --- */
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_sidebar_search input {
-  border: 1px solid rgba(0,0,0,0.08);
+  border: 1px solid var(--hb-border-color);
   border-radius: var(--hb-radius-sm, 7px);
   padding: 6px 10px;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_sidebar_search input:focus {
   border-color: var(--hb-color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59,130,246,0.12);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-color-primary) 12%, transparent);
 }
 
 /* --- 工具栏按钮: 圆润 + hover 微调 --- */
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_toolbar {
-  border-bottom-color: rgba(0,0,0,0.06);
+  border-bottom-color: var(--hb-border-light);
 }
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_toolbar button {
-  border-color: rgba(0,0,0,0.08);
+  border-color: var(--hb-border-color);
   border-radius: var(--hb-radius-sm, 7px);
   font-weight: 600;
   transition: all 0.12s;
 }
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_toolbar button:hover {
-  background: rgba(59,130,246,0.06);
-  border-color: rgba(59,130,246,0.15);
+  background: var(--hb-bg-hover);
+  border-color: color-mix(in srgb, var(--hb-color-primary) 15%, transparent);
   color: var(--hb-color-primary, #3b82f6);
 }
 
 /* --- 底部状态栏: 极淡边框 --- */
 .huanban_rulego_editor_root[data-theme="modern"] .huanban_rulego_editor_status {
-  border-top-color: rgba(0,0,0,0.06);
+  border-top-color: var(--hb-border-light);
   background: var(--hb-bg-root, #f8fafc);
 }
 
@@ -8827,15 +9520,18 @@ ${m()}
     grid-template-columns: minmax(0, 1fr);
   }
 }
-`, document.head.appendChild(r);
+`, e.textContent += J, document.head.appendChild(e);
 }
 export {
-  n as E,
-  i as T,
-  x as a,
-  f as b,
-  _ as c,
-  k as g,
-  z as i,
-  w as n
+  S as E,
+  _ as T,
+  Z as a,
+  T as b,
+  B as c,
+  rr as d,
+  G as e,
+  U as f,
+  X as g,
+  or as i,
+  v as n
 };