dsh-novel-writer 5.2.0 → 5.5.0

package/lib/client.js

@@ -24,166 +24,700 @@ window.__ModuleLoader__.load({
     let react = require("react");
     let react_dom_client = require("react-dom/client");
 
+    // ---- 官方原语适配层（v5.5.0）----
+    // 第三方插件（@linxin666/dsh-client-ui-market 等 6 个）同样直接 require 官方 primitives，
+    // 且都未声明 dsh.client.external —— 该包属客户端基线模块；这里仍包 try/catch，取不到即回退。
+/* ===== B：官方原语适配层（v5.5.0 · @deepseek-ai/dsh-client-ui-primitives → 自绘回退） =====
+ * 插入位置：client.js 的 factory 内、`let react = require("react");` 之后（任意组件定义之前）。
+ * 用法（本块最后一行已给出）：
+ *  * 对外只有 NW_UI：{ available, Button, Switch, SegmentedControl, Modal, RiskConfirmation,
+ *                   Tag, Tooltip, DisclosureRow }
+ *
+ * 设计约束（宿主启动安全第一）：
+ *   1. require 官方包只在 try/catch 内；取不到模块 / 缺某个组件 / 官方组件渲染抛错 → 逐控件回退；
+ *      本层在任何情况下都不向上抛，也不写 console（用 NW_UI.available 自检即可）。
+ *   2. 回退实现复用既有 nw* 类名，外观全部由 CSS 承担：本块没有任何内联 style、没有任何颜色字面量。
+ *   3. 不硬编码任何文案：文案由调用方传入，缺失时给空串等安全默认值。
+ *   4. 回退分支与官方分支的 props 映射共用同一套归一化函数，保证两条路径语义一致。
+ */
+function createNovelWriterUI(react, require) {
+  var NOOP = function () {};
+  var canCreate = !!react && typeof react.createElement === "function";
+  var h = canCreate
+    ? function () { return react.createElement.apply(react, arguments); }
+    : function () { return null; };
+
+  /* ---------- 归一化小工具（只做类型兜底，不产生文案） ---------- */
+  function text(value) { return typeof value === "string" ? value : ""; }
+  function optionalText(value) { return typeof value === "string" && value !== "" ? value : void 0; }
+  function callback(value) { return typeof value === "function" ? value : null; }
+  function isOn(value) { return value === true; }
+  function classNameOf(base, extra) { return optionalText(extra) === void 0 ? base : base + " " + extra; }
+  function isElement(node) {
+    if (!node || typeof node !== "object") return false;
+    if (typeof react.isValidElement === "function") return react.isValidElement(node) === true;
+    return node.$$typeof !== void 0 && node.$$typeof !== null;
+  }
+  // 元素锚点：官方 Tooltip 用 cloneElement 注入 ref/handler，children 必须是单个元素
+  function anchorOf(children) {
+    return isElement(children) ? children : h("span", null, children);
+  }
+
+  /* ---------- 官方模块加载（唯一的 require，全程 try/catch） ---------- */
+  // 包名与第三方插件（@linxin666/dsh-client-ui-preset-center 等）用的是同一个，属客户端基线包。
+  // 调用按完整包名字面量书写（不抽成变量）：契约与审计工具都按这一行字面匹配"必须包在 try 内"。
+  var primitives = null;
+  try {
+    if (typeof require === "function") primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+  } catch (err) {
+    primitives = null; // 模块不在客户端基线里 / 解析失败 → 全部走回退
+  }
+  if (!primitives || (typeof primitives !== "object" && typeof primitives !== "function")) primitives = null;
+
+  function typeTag(value) {
+    if (!value || typeof value !== "object") return "";
+    try { return String(value.$$typeof); } catch (err) { return ""; }
+  }
+  // 可渲染的组件类型：函数组件/类组件，或 React.memo / forwardRef / lazy 包装对象
+  function isComponentType(value) {
+    if (typeof value === "function") return true;
+    var tag = typeTag(value);
+    return tag.indexOf("react.memo") >= 0 || tag.indexOf("react.forward_ref") >= 0 || tag.indexOf("react.lazy") >= 0;
+  }
+  // 取"可直接调用"的内层函数：memo/forwardRef 拆包（保住"官方组件抛错也能被 try/catch 兜住"）；
+  // 类组件不能当函数调用（返回 null，改走 createElement，由 React 渲染）。
+  function invocable(value, depth) {
+    if (typeof value === "function") {
+      if (value.prototype && value.prototype.isReactComponent) return null;
+      return value;
+    }
+    if (!value || typeof value !== "object" || depth > 3) return null;
+    var tag = typeTag(value);
+    if (tag.indexOf("react.memo") >= 0) return invocable(value.type, depth + 1);
+    if (tag.indexOf("react.forward_ref") >= 0) {
+      var render = value.render;
+      if (typeof render !== "function") return null;
+      return function (props) { return render(props, null); };
+    }
+    return null;
+  }
+  function pick(name) {
+    if (primitives === null) return null;
+    try {
+      var value = primitives[name];
+      if (isComponentType(value)) return value;
+      var inner = primitives["default"]; // ESM/CJS 互操作兜底
+      if (inner && typeof inner === "object" && isComponentType(inner[name])) return inner[name];
+    } catch (err) { /* 访问器抛错 → 视为该组件缺失 */ }
+    return null;
+  }
+
+  var NAMES = ["Button", "Switch", "SegmentedControl", "Modal", "RiskConfirmation", "Tag", "Tooltip", "DisclosureRow"];
+  var official = {};
+  var resolved = 0;
+  for (var n = 0; n < NAMES.length; n += 1) {
+    official[NAMES[n]] = pick(NAMES[n]);
+    if (official[NAMES[n]] !== null) resolved += 1;
+  }
+  // available：8 个官方原语是否**全部**拿到（模块解析层面；个别组件运行时抛错仍会逐次回退，不会翻转它）
+  var available = resolved === NAMES.length;
+
+  /* ---------- 统一的"官方优先，抛错即回退"包装 ---------- */
+  // prepare(props) 在每次渲染恰好调用一次（分段控件/折叠行的 hook 都在这里，保证 hook 数量稳定）；
+  // mapProps(props, ctx) 给出官方 props；回退实现拿到同一份 ctx。
+  function adapt(name, fallback, prepare, mapProps) {
+    var component = official[name];
+    if (component === null || !canCreate) return fallback;
+    var call = null;
+    try { call = invocable(component, 0); } catch (err) { call = null; }
+    return function Adapted(props) {
+      var input = props || {};
+      var context = null;
+      try { context = prepare === null ? null : prepare(input); } catch (err) { context = null; }
+      var mapped = null;
+      try { mapped = mapProps(input, context); } catch (err) { mapped = null; }
+      if (mapped !== null) {
+        try {
+          var node = call !== null ? call(mapped) : h(component, mapped);
+          if (node !== void 0) return node; // null 是合法节点（例如 open:false 的弹窗），只有 undefined 才当失败
+        } catch (err2) { /* 官方组件抛错 → 落到下面的回退实现 */ }
+      }
+      return fallback(input, context);
+    };
+  }
+
+  /* ---------- 回退实现（只复用既有 nw* 类名；样式全在 CSS） ---------- */
+
+  // --- Button ---
+  var BUTTON_VARIANTS = { primary: 1, ghost: 1, outline: 1, toolbar: 1 };
+  var BUTTON_CLASS = {
+    primary: "nwBtn nwBtnPrimary",
+    ghost: "nwBtn nwBtnGhost",
+    outline: "nwBtn",
+    toolbar: "nwBtn nwBtnGhost"
+  };
+  function buttonVariant(value) {
+    var variant = text(value);
+    return BUTTON_VARIANTS[variant] === 1 ? variant : "ghost"; // 与官方默认 variant 对齐
+  }
+  function mapButton(props) {
+    return {
+      variant: buttonVariant(props.variant),
+      size: props.size === "sm" ? "sm" : "md",
+      disabled: isOn(props.disabled),
+      title: optionalText(props.title),
+      onClick: callback(props.onClick) || void 0,
+      className: optionalText(props.className),
+      children: props.children
+    };
+  }
+  function fallbackButton(props) {
+    return h("button", {
+      type: "button",
+      className: classNameOf(BUTTON_CLASS[buttonVariant(props.variant)], props.className),
+      disabled: isOn(props.disabled),
+      title: optionalText(props.title),
+      onClick: callback(props.onClick) || void 0
+    }, props.children);
+  }
+
+  // --- Switch ---
+  function mapSwitch(props) {
+    return {
+      checked: isOn(props.checked),
+      onChange: callback(props.onChange) || NOOP,
+      label: text(props.label), // 官方必填：缺失兜底成空串（不硬编码文案）
+      disabled: isOn(props.disabled),
+      title: optionalText(props.title),
+      className: optionalText(props.className)
+    };
+  }
+  function fallbackSwitch(props) {
+    var checked = isOn(props.checked);
+    return h("button", {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked ? "true" : "false",
+      "aria-label": optionalText(props.label),
+      disabled: isOn(props.disabled),
+      title: optionalText(props.title),
+      className: classNameOf("nwSwitch" + (checked ? " nwSwitchOn" : ""), props.className),
+      onClick: function () {
+        var onChange = callback(props.onChange);
+        if (onChange !== null) onChange(!checked);
+      }
+    }, h("span", { className: "nwSwitchKnob" }));
+  }
+
+  // --- SegmentedControl（官方必填 id，适配层自己生成稳定 id） ---
+  var useIdHook = typeof react.useId === "function" ? react.useId : null;
+  var useRefHook = typeof react.useRef === "function" ? react.useRef : null;
+  var controlSeq = 0;
+  function normalizeOptions(options) {
+    var list = [];
+    var source = Array.isArray(options) ? options : [];
+    for (var i = 0; i < source.length; i += 1) {
+      var option = source[i];
+      if (!option || typeof option !== "object") continue;
+      var value = text(option.value);
+      if (value === "") continue;
+      list.push({
+        value: value,
+        label: text(option.label) || value,
+        disabled: isOn(option.disabled),
+        title: optionalText(option.title)
+      });
+    }
+    return list;
+  }
+  function prepareSegments(props) {
+    // 无论调用方是否自带 id，都先按固定分支取一次自动 id：hook 数量每帧恒定
+    var auto;
+    if (useIdHook !== null) auto = "nw-seg-" + String(useIdHook()).replace(/[^A-Za-z0-9_-]/g, "");
+    else if (useRefHook !== null) {
+      var box = useRefHook(null);
+      if (box === null || typeof box !== "object") box = { current: null };
+      if (box.current === null) {
+        controlSeq += 1;
+        box.current = "nw-seg-" + controlSeq;
+      }
+      auto = box.current;
+    } else {
+      auto = "nw-seg-fallback";
+    }
+    return { id: optionalText(props.id) || auto, options: normalizeOptions(props.options) }; // 自带 id（可选）优先
+  }
+  function mapSegments(props, context) {
+    return {
+      id: context !== null && context !== void 0 ? context.id : text(props.id),
+      value: text(props.value),
+      options: context !== null && context !== void 0 ? context.options : normalizeOptions(props.options),
+      onChange: callback(props.onChange) || NOOP,
+      label: text(props.label), // 官方必填
+      disabled: isOn(props.disabled),
+      className: optionalText(props.className)
+    };
+  }
+  function fallbackSegments(props, context) {
+    var value = text(props.value);
+    var disabled = isOn(props.disabled);
+    var onChange = callback(props.onChange);
+    var options = context !== null && context !== void 0 ? context.options : normalizeOptions(props.options);
+    var tabs = [];
+    for (var i = 0; i < options.length; i += 1) {
+      var option = options[i];
+      var active = option.value === value;
+      tabs.push(h("button", {
+        key: option.value,
+        type: "button",
+        role: "tab",
+        "aria-selected": active ? "true" : "false",
+        disabled: disabled || option.disabled === true,
+        title: option.title,
+        className: "nwSegBtn" + (active ? " nwSegBtnOn" : ""),
+        onClick: (function (next, isActive) {
+          return function () { if (!isActive && onChange !== null) onChange(next); };
+        })(option.value, active)
+      }, option.label));
+    }
+    return h("div", {
+      className: classNameOf("nwSeg", props.className),
+      role: "tablist",
+      "aria-label": optionalText(props.label)
+    }, tabs);
+  }
+
+  // --- Modal ---
+  function mapModal(props) {
+    return {
+      open: isOn(props.open),
+      onClose: callback(props.onClose) || NOOP, // 官方必填
+      title: text(props.title), // 官方必填
+      closeLabel: text(props.closeLabel), // 官方必填：缺失即空串（不硬编码文案）
+      description: optionalText(props.description),
+      children: props.children,
+      footer: props.footer
+    };
+  }
+  function fallbackModal(props) {
+    if (!isOn(props.open)) return null;
+    var title = text(props.title);
+    var description = optionalText(props.description);
+    var children = props.children === void 0 || props.children === null ? null : h("div", null, props.children);
+    return h("div", { className: "nwModal", role: "presentation" },
+      h("div", { className: "nwModalBox", role: "dialog", "aria-modal": "true", "aria-label": title },
+        title === "" ? null : h("div", { className: "nwModalTitle" }, title),
+        description === void 0 ? null : h("div", { className: "nwModalText" }, description),
+        children,
+        props.footer === void 0 || props.footer === null ? null : h("div", { className: "nwModalBtns" }, props.footer)
+      ));
+  }
+
+  // --- RiskConfirmation ---
+  function riskLabels(props) {
+    var cancelLabel = text(props.cancelLabel);
+    return {
+      cancelLabel: cancelLabel,
+      // 官方多一个必填 closeLabel（弹窗右上角 × 的无障碍名）；
+      // 调用方没给就借用 cancelLabel，仍然不产生硬编码文案
+      closeLabel: text(props.closeLabel) || cancelLabel
+    };
+  }
+  function mapRisk(props) {
+    var labels = riskLabels(props);
+    return {
+      open: isOn(props.open),
+      title: text(props.title),
+      description: text(props.description),
+      acknowledgeLabel: text(props.acknowledgeLabel),
+      cancelLabel: labels.cancelLabel,
+      closeLabel: labels.closeLabel,
+      confirmLabel: text(props.confirmLabel),
+      acknowledged: isOn(props.acknowledged),
+      disabled: isOn(props.disabled),
+      onAcknowledgedChange: callback(props.onAcknowledgedChange) || NOOP,
+      onCancel: callback(props.onCancel) || NOOP,
+      onConfirm: callback(props.onConfirm) || NOOP
+    };
+  }
+  function fallbackRisk(props) {
+    var labels = riskLabels(props);
+    var acknowledged = isOn(props.acknowledged);
+    var disabled = isOn(props.disabled);
+    var onAck = callback(props.onAcknowledgedChange);
+    var onCancel = callback(props.onCancel);
+    var onConfirm = callback(props.onConfirm);
+    return fallbackModal({
+      open: props.open,
+      title: props.title,
+      description: props.description,
+      children: h("label", { className: "nwModalText" },
+        h("input", {
+          type: "checkbox",
+          checked: acknowledged,
+          disabled: disabled,
+          // 没有回调时给 readOnly，避免 React 对"受控字段无 onChange"报 console.error
+          readOnly: onAck === null,
+          onChange: onAck === null ? void 0 : function (event) {
+            onAck(!!(event && event.target && event.target.checked === true));
+          }
+        }),
+        h("span", null, text(props.acknowledgeLabel))),
+      footer: h("div", { className: "nwModalBtns" },
+        h("button", {
+          type: "button",
+          className: "nwBtn nwBtnGhost",
+          onClick: onCancel === null ? void 0 : onCancel
+        }, labels.cancelLabel),
+        h("button", {
+          type: "button",
+          className: "nwBtn nwBtnDanger",
+          disabled: disabled || !acknowledged,
+          onClick: onConfirm === null ? void 0 : onConfirm
+        }, text(props.confirmLabel)))
+    });
+  }
+
+  // --- Tag ---
+  var TAG_TONES = { outline: 1, solid: 1, neutral: 1, quiet: 1, success: 1, info: 1, warning: 1, danger: 1 };
+  function tagTone(value) {
+    var tone = text(value);
+    return TAG_TONES[tone] === 1 ? tone : "outline"; // 与官方默认 tone 对齐
+  }
+  function mapTag(props) {
+    return { tone: tagTone(props.tone), className: optionalText(props.className), children: props.children };
+  }
+  function fallbackTag(props) {
+    // 既有 nw* 只有"开/关"两种胶囊：成功态映射到 nwBadgeOn，其余中性 tone 共用 nwBadge
+    var tone = tagTone(props.tone);
+    return h("span", { className: classNameOf(tone === "success" ? "nwBadge nwBadgeOn" : "nwBadge", props.className) }, props.children);
+  }
+
+  // --- Tooltip ---
+  function mapTooltip(props) {
+    var label = props.label;
+    if (typeof label !== "function") label = text(label); // 官方的 label 可以是 () => string
+    return { label: label, children: anchorOf(props.children) };
+  }
+  function fallbackTooltip(props) {
+    var label = "";
+    try {
+      label = typeof props.label === "function" ? text(props.label()) : text(props.label);
+    } catch (err) { label = ""; }
+    var anchor = anchorOf(props.children);
+    if (label === "" || anchor === null || typeof react.cloneElement !== "function") return anchor;
+    try {
+      return react.cloneElement(anchor, { title: label }); // 回退用原生 title 气泡
+    } catch (err) { return anchor; }
+  }
+
+  // --- DisclosureRow（官方是受控组件，回退实现自己持有展开态） ---
+  var useStateHook = typeof react.useState === "function" ? react.useState : null;
+  function prepareDisclosure(props) {
+    if (useStateHook === null) return { open: isOn(props.defaultOpen), toggle: NOOP };
+    var pair = useStateHook(isOn(props.defaultOpen));
+    var setter = callback(pair === null || pair === void 0 ? null : pair[1]);
+    return {
+      open: pair !== null && pair !== void 0 && pair[0] === true,
+      toggle: function () {
+        if (setter !== null) setter(function (value) { return value !== true; });
+      }
+    };
+  }
+  function mapDisclosure(props, context) {
+    var open = isOn(props.defaultOpen);
+    var toggle = NOOP;
+    if (context !== null && context !== void 0) { open = context.open === true; toggle = context.toggle; }
+    return {
+      icon: null, // 官方必填 icon：给 null，官方自带的 chevron 足以表达展开态
+      title: text(props.title),
+      open: open,
+      expandable: true,
+      onToggle: toggle,
+      expandOnRowClick: true,
+      children: props.children,
+      className: optionalText(props.className)
+    };
+  }
+  function fallbackDisclosure(props, context) {
+    var open = isOn(props.defaultOpen);
+    var toggle = NOOP;
+    if (context !== null && context !== void 0) { open = context.open === true; toggle = context.toggle; }
+    return h("div", { className: classNameOf("nwToolGroup", props.className) },
+      h("div", { className: "nwToolGroupHead" },
+        h("button", {
+          type: "button",
+          className: "nwToolGroupHeadBtn",
+          "aria-expanded": open ? "true" : "false",
+          onClick: toggle
+        },
+          h("span", { className: "nwToolGroupHeadText" },
+            h("span", { className: "nwToolGroupName" }, text(props.title))),
+          h("span", { className: "nwToolGroupArrow" }, open ? "\u25be" : "\u25b8")
+        )
+      ),
+      open ? h("div", { className: "nwToolGroupBody" }, props.children) : null);
+  }
+
+  /* ---------- 冻结 API ---------- */
+  return {
+    available: available,
+    Button: adapt("Button", fallbackButton, null, mapButton),
+    Switch: adapt("Switch", fallbackSwitch, null, mapSwitch),
+    SegmentedControl: adapt("SegmentedControl", fallbackSegments, prepareSegments, mapSegments),
+    Modal: adapt("Modal", fallbackModal, null, mapModal),
+    RiskConfirmation: adapt("RiskConfirmation", fallbackRisk, null, mapRisk),
+    Tag: adapt("Tag", fallbackTag, null, mapTag),
+    Tooltip: adapt("Tooltip", fallbackTooltip, null, mapTooltip),
+    DisclosureRow: adapt("DisclosureRow", fallbackDisclosure, prepareDisclosure, mapDisclosure)
+  };
+}
+
+var NW_UI = createNovelWriterUI(react, require);
+
     // ---- 样式 ----
 var css = `
 
+
+
   /* ===== 杂项 ===== */
   /* v4.3.0：删掉永不匹配的 [data-pane=…]（宿主全树 0 命中，真实列名是 CSS-module 的 …_sidebarCol / …_centerCol） */
   [class*=centerCol]{position:relative}
-  [data-dsh-novel-writer-view]{position:absolute;inset:0;z-index:60;background:var(--dsw-alias-bg-base,#fff);display:none;overflow:auto}
+  [data-dsh-novel-writer-view]{position:absolute;inset:0;z-index:60;background:var(--dsw-alias-bg-base);display:none;overflow:auto}
   html[data-dsh-novel-writer-active]:not([data-dsh-ssh-active]):not([data-dsh-taskboard-active]) [data-dsh-novel-writer-view]{display:block}
   html[data-dsh-novel-writer-active]:not([data-dsh-ssh-active]):not([data-dsh-taskboard-active]) [class*=centerCol]>:not([data-dsh-novel-writer-view]){display:none!important}
   /* v4.3.0：宿主折叠标记挂在 frame 上（<div class="…_frame" data-sidebar-collapsed>），并不存在 data-dsh-frame 属性 */
   [data-sidebar-collapsed] .nwEntry{justify-content:center;width:100%;padding:0}
   [data-sidebar-collapsed] .nwEntryLabel{display:none}
-  .nwSectionTitle{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;margin-top:6px}.nwTolVer{font-size:10px;color:var(--dsw-alias-label-tertiary,#94a3b8);margin:-2px 0 2px;letter-spacing:.03em}.nwTolCard{background:var(--dsw-alias-bg-layer-1,#fff);border:1px solid var(--dsw-alias-border-l2,#e2e8f0);border-radius:12px;padding:4px 14px 8px;margin:8px 0 4px;box-shadow:0 1px 4px rgba(15,23,42,.05)}.nwTolRow{display:flex;align-items:center;gap:10px;padding:9px 2px}.nwTolRow+.nwTolRow{border-top:1px dashed var(--dsw-alias-border-l2,#eef2f7)}.nwTolName{flex:1;min-width:0;font-size:13px;color:var(--dsw-alias-label-primary,#334155);font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}.nwTolIcon{font-size:15px;opacity:.9;flex-shrink:0}.nwTolField{width:66px;flex-shrink:0;display:flex;flex-direction:column;align-items:stretch;gap:3px}.nwTolInput{width:100%;height:30px;padding:0 4px;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2,#d4d4d8);border-radius:8px;font-size:13px;text-align:center;color:var(--dsw-alias-label-primary,#18181b);background:var(--dsw-alias-bg-layer-2,#fafafa);transition:border-color .18s,box-shadow .18s,background .18s;-moz-appearance:textfield}.nwTolInput::-webkit-outer-spin-button,.nwTolInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.nwTolInput:hover{border-color:#a1a1aa}.nwTolInput:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.16);background:#fff}.nwTolInput::placeholder{color:#c4c8d0;font-size:11px}.nwTolCaption{font-size:10px;color:var(--dsw-alias-label-tertiary,#94a3b8);text-align:center}.nwTolSep{width:14px;flex-shrink:0;font-size:12px;color:var(--dsw-alias-label-tertiary,#b0b8c4);text-align:center}.nwTolPct{width:14px;flex-shrink:0;font-size:13px;color:var(--dsw-alias-label-secondary,#64748b);text-align:left}.nwTolBtns{display:flex;gap:12px;margin-top:16px}.nwBtnPrimary{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;font-weight:600;font-size:13px;padding:9px 20px;border-radius:10px;cursor:pointer;box-shadow:0 2px 6px rgba(99,102,241,.28);transition:transform .15s,box-shadow .15s,opacity .15s}.nwBtnPrimary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.38)}.nwBtnPrimary:active{transform:translateY(0);box-shadow:0 1px 3px rgba(99,102,241,.3)}.nwBtnDone{background:linear-gradient(135deg,#10b981,#34d399);box-shadow:0 2px 6px rgba(16,185,129,.3)}.nwBtnGhost{background:transparent;border:1px solid var(--dsw-alias-border-l2,#cbd5e1);color:var(--dsw-alias-label-secondary,#475569);font-size:13px;padding:9px 18px;border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}.nwBtnGhost:hover{background:var(--dsw-alias-bg-layer-2,#f1f5f9);border-color:#a1a1aa;transform:translateY(-1px)}.nwUpdateBar{display:block;margin:4px 0 8px;padding:7px 10px;border-radius:6px;background:#e8f5e9;color:#1b5e20;font-size:12px;text-decoration:none;border:1px solid #a5d6a7;cursor:pointer}.nwUpdateBar:hover{background:#c8e6c9}.nwUpdateStale{display:block;margin:4px 0 8px;padding:7px 10px;border-radius:6px;background:var(--dsw-alias-bg-layer-2,#f1f5f9);color:var(--dsw-alias-label-tertiary,#64748b);font-size:11px;line-height:1.5;border:1px solid var(--dsw-alias-border-l2,#e2e8f0)}
-  .nwNavEntry{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:8px 10px;margin:4px 0;border:1px solid var(--dsw-alias-border);border-radius:8px;background:var(--dsw-alias-surface-1);cursor:pointer;text-align:left;color:inherit;font:inherit}
-  .nwNavEntry:hover{border-color:#22c55e}
+  .nwSectionTitle{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;line-height:19px;letter-spacing:.02em;color:var(--dsw-alias-state-business-primary);background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 8%,var(--dsw-alias-bg-layer-1));border:0.5px solid color-mix(in srgb,var(--dsw-alias-state-business-primary) 16%,var(--dsw-alias-bg-layer-1));border-radius:999px;corner-shape:round;padding:3px 12px;margin-top:10px}.nwTolVer{font-size:10px;line-height:14px;color:var(--dsw-alias-label-tertiary);margin:-2px 0 2px;letter-spacing:.03em}.nwTolCard{border-radius:var(--dsw-radius-xl);border:0.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-bg-layer-2);padding:4px 14px 8px;margin:8px 0 4px}.nwTolRow{display:flex;align-items:center;gap:10px;padding:9px 2px}.nwTolRow+.nwTolRow{border-top:1px dashed var(--dsw-alias-border-l2)}.nwTolName{flex:1;min-width:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary);font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}.nwTolIcon{font-size:15px;line-height:22px;opacity:.9;flex-shrink:0}.nwTolField{width:66px;flex-shrink:0;display:flex;flex-direction:column;align-items:stretch;gap:3px}.nwTolInput{width:100%;height:30px;padding:0 4px;box-sizing:border-box;border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-sm);font-size:13px;line-height:20px;text-align:center;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);transition:border-color .18s,box-shadow .18s,background .18s;-moz-appearance:textfield}.nwTolInput::-webkit-outer-spin-button,.nwTolInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.nwTolInput:hover{border-color:var(--dsw-alias-border-l3)}.nwTolInput:focus{outline:none;border-color:var(--dsw-alias-state-business-primary);box-shadow:0 0 0 3px var(--dsw-focus-ring-color);background:var(--dsw-alias-bg-layer-1)}.nwTolInput::placeholder{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}.nwTolCaption{font-size:10px;line-height:14px;color:var(--dsw-alias-label-tertiary);text-align:center}.nwTolSep{width:14px;flex-shrink:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary);text-align:center}.nwTolPct{width:14px;flex-shrink:0;font-size:13px;line-height:20px;color:var(--dsw-alias-label-secondary);text-align:left}.nwTolBtns{display:flex;gap:12px;margin-top:16px}.nwBtn.nwBtnPrimary{background:var(--dsw-alias-state-business-primary);border:none;color:var(--dsw-alias-label-primary-foreground);font-weight:600;font-size:13px;line-height:20px;padding:9px 20px;border-radius:var(--dsw-radius-sm);cursor:pointer;box-shadow:var(--dsw-elevation-soft);transition:transform .15s,box-shadow .15s,opacity .15s,filter .15s;font-family:inherit}.nwBtnPrimary:hover{transform:translateY(-1px);box-shadow:var(--dsw-elevation-panel);filter:brightness(1.12)}.nwBtnPrimary:active{transform:translateY(0);box-shadow:var(--dsw-elevation-soft)}.nwBtn.nwBtnDone{background:linear-gradient(135deg,var(--dsw-alias-state-success-primary),var(--dsw-alias-state-success-primary));box-shadow:var(--dsw-elevation-soft);font-family:inherit}.nwBtn.nwBtnGhost{background:transparent;border:0.5px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px;padding:9px 18px;border-radius:var(--dsw-radius-sm);cursor:pointer;transition:background .15s,border-color .15s,transform .15s;font-family:inherit}.nwBtnGhost:hover{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-border-l3);transform:translateY(-1px)}.nwUpdateBar{display:block;margin:4px 0 8px;padding:7px 10px;border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-state-success-tertiary);color:var(--dsw-alias-state-success-primary);font-size:12px;line-height:18px;text-decoration:none;border:1px solid var(--dsw-alias-state-success-primary);cursor:pointer}.nwUpdateBar:hover{background:var(--dsw-alias-interactive-bg-hover)}.nwUpdateStale{display:block;margin:4px 0 8px;padding:7px 10px;border-radius:var(--dsw-radius-sm);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:1.5;border:0.5px solid var(--dsw-alias-border-l2)}
+  .nwNavEntry{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 12px;margin:4px 0;border:0;border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-elevation-soft);cursor:pointer;text-align:left;color:inherit;font:inherit;transition:box-shadow .2s var(--nw-ease),transform .18s var(--nw-ease)}
+  .nwNavEntry:hover{box-shadow:var(--dsw-elevation-panel);transform:translateY(-1px);font-family:inherit}
   .nwNavEntryText{flex:1;min-width:0;padding-right:8px}
-  .nwNavEntryTitle{font-size:13px;font-weight:600}
-  .nwNavEntryHint{font-size:11px;color:var(--dsw-alias-label-tertiary);margin-top:2px}
+  .nwNavEntryTitle{font-size:13px;line-height:20px;font-weight:600}
+  .nwNavEntryHint{font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary);margin-top:2px}
   .nwNavEntryRight{display:flex;align-items:center;gap:6px;flex:none}
   .nwNavEntryRight .nwBadge{white-space:nowrap;flex:none}
-  .nwNavEntryArrow{font-size:18px;color:var(--dsw-alias-label-tertiary);flex:none}
-  .nwBackBtn{font-size:12px;padding:3px 8px;margin:2px 0 6px;border:1px solid var(--dsw-alias-border);border-radius:6px;background:var(--dsw-alias-surface-1);cursor:pointer}
-  .nwModelBtn{font-size:11px;padding:2px 6px;margin-top:4px;border:1px solid #7c3aed;color:#7c3aed;border-radius:6px;background:transparent;cursor:pointer}
+  .nwNavEntryArrow{font-size:18px;line-height:26px;color:var(--dsw-alias-label-tertiary);flex:none}
+  .nwBackBtn{display:flex;width:fit-content;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 14px;margin:2px 0 6px;border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px;cursor:pointer;font-family:inherit;transition:background .16s var(--nw-ease),color .16s var(--nw-ease),box-shadow .2s var(--nw-ease)}
+  .nwModelBtn{font-size:11px;line-height:16px;padding:2px 6px;margin-top:4px;border:0.5px solid var(--dsw-alias-state-business-primary);color:var(--dsw-alias-state-business-primary);border-radius:var(--dsw-radius-sm);background:transparent;cursor:pointer;font-family:inherit}
   .nwToolRight{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
 
   /* ===== 导航/入口 ===== */
-  .nwEntry{width:100%;height:32px;color:var(--dsw-alias-label-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:0 12px;font-size:13px;display:flex}
-  .nwEntry:hover{background:var(--dsw-specific-sidebar-nav-item-hover);color:var(--dsw-alias-label-primary)}
+  .nwEntry{width:100%;height:32px;color:var(--dsw-alias-label-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:var(--dsw-radius-md);align-items:center;gap:8px;padding:0 12px;font-size:13px;line-height:20px;display:flex;font-family:inherit}
+  .nwEntry:hover{background:var(--dsw-specific-sidebar-nav-item-hover);color:var(--dsw-alias-label-primary);font-family:inherit}
   .nwEntry[data-active]{background:var(--dsw-specific-sidebar-nav-item-active);color:var(--dsw-alias-label-primary);font-weight:600}
-  .nwEntryIcon{flex:none;justify-content:center;align-items:center;display:inline-flex;width:16px;font-size:13px}
+  .nwEntryIcon{flex:none;justify-content:center;align-items:center;display:inline-flex;width:16px;font-size:13px;line-height:20px}
   .nwEntryLabel{text-overflow:ellipsis;overflow:hidden}
-  .nwPanel{max-width:560px;margin:0 auto;padding:28px 24px;color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family);display:flex;flex-direction:column;gap:10px}
+  .nwPanel{--nw-ease:cubic-bezier(.16,1,.3,1);scrollbar-gutter:stable;width:100%;max-width:560px;margin:0 auto;padding:28px 24px;color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family);display:flex;flex-direction:column;gap:10px}
   .nwPanelHeader{display:flex;align-items:center;gap:10px}
-  .nwPanelTitle{font-size:16px;font-weight:700;flex:1;min-width:0}
-  .nwClose{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);width:30px;height:30px;line-height:1}
-  .nwRefresh{appearance:none;font:inherit;cursor:pointer;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font-size:11px;line-height:1;padding:5px 9px}
-  .nwRefresh:hover{background:var(--dsw-alias-bg-layer-2)}
+  .nwPanelTitle{font-size:16px;line-height:24px;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0}
+  .nwClose{appearance:none;font:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);width:30px;height:30px;padding:0;font-size:15px;line-height:1;transition:background .16s var(--nw-ease),color .16s var(--nw-ease),box-shadow .2s var(--nw-ease)}
+  .nwRefresh{appearance:none;font:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);height:30px;padding:0 12px;font-size:12px;line-height:18px;transition:background .16s var(--nw-ease),color .16s var(--nw-ease),box-shadow .2s var(--nw-ease)}
+  .nwRefresh:hover,.nwClose:hover,.nwBackBtn:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-family:inherit}
   .nwDesc{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.6;margin:0}
   .nwRefreshSpin{animation:nwspin 1s linear infinite}
 
   /* ===== 横幅与开关 ===== */
-  .nwBanner{display:flex;align-items:center;gap:10px;border-radius:12px;padding:14px 16px;font-size:15px;font-weight:700;border:1px solid}
-  .nwBannerOn{background:rgba(34,197,94,.12);border-color:#22c55e;color:#15803d}
-  .nwBannerOff{background:rgba(239,68,68,.10);border-color:#ef4444;color:#b91c1c}
+  .nwBanner{display:flex;align-items:center;gap:10px;border-radius:var(--dsw-radius-lg);padding:14px 16px;font-size:15px;line-height:22px;font-weight:700;border:0.5px solid}
+  .nwBannerOn{background:var(--dsw-alias-state-success-tertiary);border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary)}
+  .nwBannerOff{background:var(--dsw-alias-state-danger-tertiary);border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-label-error)}
   .nwBannerIcon{flex:none;font-size:18px;line-height:1}
-  .nwBannerSub{font-size:12px;font-weight:500;opacity:.9;margin-left:6px}
-  .nwRow{display:flex;align-items:center;gap:12px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:12px;padding:12px 14px;transition:border-color .18s,background .18s}
-  .nwRowOn{border-color:#22c55e;background:rgba(34,197,94,.07)}
-  .nwRowOff{border-color:var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2)}
+  .nwBannerSub{font-size:12px;line-height:18px;font-weight:500;opacity:.9;margin-left:6px}
+  .nwRow{display:flex;align-items:center;gap:14px;border:0;background:var(--dsw-alias-bg-layer-1);border-radius:var(--dsw-radius-lg);padding:14px 16px;box-shadow:var(--dsw-elevation-soft);transition:box-shadow .2s var(--nw-ease),transform .18s var(--nw-ease)}
+  .nwRow:hover{box-shadow:var(--dsw-elevation-panel);transform:translateY(-1px)}
+  .nwRowOn{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 10%,var(--dsw-alias-bg-layer-1));box-shadow:var(--dsw-elevation-panel)}
+  .nwRowOff{background:var(--dsw-alias-bg-layer-1)}
   .nwRowText{flex:1;min-width:0}
   .nwRowLabel{font-size:13px;font-weight:600;line-height:1.5}
   .nwRowHint{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5;margin-top:2px}
   .nwSwitchWrap{flex:none;display:flex;align-items:center;gap:8px}
-  .nwSwitch{appearance:none;flex:none;width:56px;height:30px;border-radius:999px;border:2px solid #9ca3af;background:#9ca3af;cursor:pointer;position:relative;padding:0;transition:background .18s,border-color .18s,box-shadow .18s}
-  .nwSwitch:hover{box-shadow:0 0 0 4px rgba(156,163,175,.20)}
-  .nwSwitch:focus-visible{outline:2px solid #22c55e;outline-offset:2px}
-  .nwSwitchOn{background:#22c55e;border-color:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
-  .nwSwitchOn:hover{box-shadow:0 0 0 4px rgba(34,197,94,.28)}
-  .nwSwitchKnob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .18s}
-  .nwSwitchOn .nwSwitchKnob{left:28px}
+  .nwSwitch{appearance:none;flex:none;width:56px;height:30px;box-sizing:border-box;border-radius:999px;border:0;background:var(--dsw-alias-bg-layer-4);cursor:pointer;position:relative;padding:0;transition:background .18s,border-color .18s;corner-shape:round}
+  .nwSwitch:hover{border-color:var(--dsw-alias-border-l4)}
+  .nwSwitch:focus-visible{outline:2px solid var(--dsw-focus-ring-color);outline-offset:2px}
+  .nwSwitchOn{background:var(--dsw-alias-state-business-primary);border-color:var(--dsw-alias-state-business-primary)}
+  .nwSwitchOn:hover{border-color:var(--dsw-alias-state-business-primary)}
+  .nwSwitchKnob{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--dsw-alias-switch-thumb);box-shadow:var(--dsw-elevation-soft);transition:left .18s;corner-shape:round}
+  .nwSwitchOn .nwSwitchKnob{left:30px}
   .nwSwitch:disabled{opacity:.5;cursor:default;box-shadow:none}
-  .nwSwitchSmall{appearance:none;flex:none;width:40px;height:22px;border-radius:999px;border:2px solid #9ca3af;background:#9ca3af;cursor:pointer;position:relative;padding:0;transition:background .16s,border-color .16s}
-  .nwSwitchSmallOn{background:#22c55e;border-color:#22c55e}
-  .nwSwitchSmallKnob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .16s}
-  .nwSwitchSmallOn .nwSwitchSmallKnob{left:20px}
-  .nwSeg{display:flex;gap:4px;flex:none}
-  .nwSegBtn{appearance:none;border:1px solid #cbd5e1;background:#fff;color:#475569;font-size:12px;padding:5px 10px;border-radius:8px;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
-  .nwSegBtn:hover{border-color:#94a3b8}
-  .nwSegBtnOn{background:#22c55e;border-color:#22c55e;color:#fff;font-weight:600}
-  .nwSegBtn:disabled{opacity:.6;cursor:default}
+  .nwSwitchSmall{appearance:none;flex:none;width:40px;height:22px;box-sizing:border-box;border-radius:999px;border:0;background:var(--dsw-alias-bg-layer-4);cursor:pointer;position:relative;padding:0;transition:background .16s,border-color .16s;corner-shape:round}
+  .nwSwitchSmallOn{background:var(--dsw-alias-state-business-primary);border-color:var(--dsw-alias-state-business-primary)}
+  .nwSwitchSmallKnob{position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:50%;background:var(--dsw-alias-switch-thumb);transition:left .16s;corner-shape:round}
+  .nwSwitchSmallOn .nwSwitchSmallKnob{left:22px}
+  .nwSeg{display:flex;gap:3px;flex:none;background:var(--dsw-alias-bg-layer-2);border-radius:var(--dsw-radius-md);padding:3px}
+  .nwSegBtn{appearance:none;border:0.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font-size:12px;line-height:18px;padding:5px 10px;border-radius:var(--dsw-radius-sm);cursor:pointer;transition:background .16s,border-color .16s,color .16s;font-family:inherit}
+  .nwSegBtn:hover{border-color:var(--dsw-alias-border-l3);font-family:inherit}
+  .nwSegBtnOn{background:var(--dsw-alias-state-business-primary);border-color:var(--dsw-alias-state-business-primary);color:var(--dsw-alias-label-primary-foreground);font-weight:600}
+  .nwSegBtn:disabled{opacity:.6;cursor:default;font-family:inherit}
 
   /* ===== 徽章 ===== */
-  .nwBadge{flex:none;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap;letter-spacing:.5px}
-  .nwBadgeOn{background:#22c55e;color:#fff}
-  .nwBadgeOff{background:#e5e7eb;color:#6b7280}
+  .nwBadge{flex:none;border-radius:999px;padding:3px 10px;font-size:12px;line-height:18px;font-weight:700;white-space:nowrap;letter-spacing:.5px;corner-shape:round}
+  .nwBadgeOn{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 18%,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-state-business-primary)}
+  .nwBadgeOff{background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-tertiary)}
 
   /* ===== 动画与杂项 ===== */
   @keyframes nwspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
-  @keyframes nwflash{0%{background:rgba(34,197,94,.25)}100%{background:transparent}}
+  @keyframes nwflash{0%{background:var(--dsw-alias-state-success-tertiary)}100%{background:transparent}}
   /* v4.3.0：错误提示的红色闪烁（旧版错误分支恒不可达，见 PanelView msg 类名） */
-  @keyframes nwflashErr{0%{background:rgba(239,68,68,.18)}100%{background:transparent}}
+  @keyframes nwflashErr{0%{background:var(--dsw-alias-state-error-secondary)}100%{background:transparent}}
 
   /* ===== 路径/按钮/状态 ===== */
-  .nwPlotOk{color:#22c55e}
+  .nwPlotOk{color:var(--dsw-alias-state-success-primary)}
   .nwFlash{animation:nwflash 1.2s ease}
   .nwFlashErr{animation:nwflashErr 1.2s ease}
-  .nwBtnDanger{background:#ef4444;color:#fff;border-color:#ef4444}
-  .nwPlotBox{margin-top:6px;padding:6px 8px;background:rgba(127,127,127,.08);border-radius:8px}
+  .nwBtn.nwBtnDanger{background:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-label-primary-foreground);border-color:var(--dsw-alias-state-error-primary);font-family:inherit}
+  .nwPlotBox{margin-top:6px;padding:6px 8px;background:var(--dsw-alias-bg-layer-2);border-radius:var(--dsw-radius-sm)}
   .nwPlotPath{font-size:11px;line-height:1.5;color:var(--dsw-alias-label-secondary);word-break:break-all}
   .nwBtnGroup{display:flex;gap:6px;margin-top:6px}
-  .nwBtn{font-size:11px;line-height:1;padding:5px 10px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);cursor:pointer}
-  .nwBtn:hover{background:var(--dsw-alias-bg-layer-2)}
-  .nwBtn:disabled{opacity:.45;cursor:not-allowed}
+  .nwBtn{font-size:11px;line-height:1;padding:5px 10px;border-radius:var(--dsw-radius-sm);border:0.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);cursor:pointer;font-family:inherit;transition:background .16s var(--nw-ease),box-shadow .2s var(--nw-ease),transform .18s var(--nw-ease)}
+  .nwBtn:hover{background:var(--dsw-alias-bg-layer-2);font-family:inherit}
+  .nwBtn:disabled{opacity:.45;cursor:not-allowed;font-family:inherit}
   .nwPlotMsg{font-size:11px;line-height:1.5;color:var(--dsw-alias-label-secondary);margin-top:4px;word-break:break-all}
-  .nwPlotErr{color:#ef4444}
+  .nwPlotErr{color:var(--dsw-alias-label-error)}
   .nwStatus{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5;word-break:break-all}
-  .nwFoot{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.6;border-top:1px solid var(--dsw-alias-border-l2);padding-top:10px;margin-top:4px}
-  .nwGroupState{width:16px;height:16px;border-radius:4px;border:2px solid #9ca3af;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#fff}
-  .nwGroupStateOn{border-color:#22c55e;background:#22c55e}
-  .nwGroupStatePartial{border-color:#22c55e;background:#fff}
-  .nwGroupStateOff{border-color:#9ca3af;background:#fff}
-  .nwGroupStateCheck{color:#fff;font-size:11px;font-weight:700;line-height:1}
-  .nwGroupStateCheckPartial{width:10px;height:10px;border-radius:2px;background:#22c55e;color:transparent}
+  .nwFoot{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.6;border-top:0.5px solid var(--dsw-alias-border-l2);padding-top:10px;margin-top:4px}
+  .nwGroupState{width:16px;height:16px;border-radius:var(--dsw-radius-xs);border:0.5px solid var(--dsw-alias-border-l3);display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--dsw-alias-bg-layer-1);box-sizing:border-box}
+  .nwGroupStateOn{border-color:var(--dsw-alias-state-business-primary);background:var(--dsw-alias-state-business-primary)}
+  .nwGroupStatePartial{border-color:var(--dsw-alias-state-business-primary);background:var(--dsw-alias-bg-layer-1)}
+  .nwGroupStateOff{border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-bg-layer-1)}
+  .nwGroupStateCheck{color:var(--dsw-alias-label-primary-foreground);font-size:11px;font-weight:700;line-height:1}
+  .nwGroupStateCheckPartial{width:10px;height:10px;border-radius:var(--dsw-radius-xs);background:var(--dsw-alias-state-business-primary);color:transparent}
 
   /* ===== 非净化模式 ===== */
-  .nwToolRowRaw{border-color:#ef4444}
-  .nwToolLabelRaw{color:#ef4444;font-weight:700}
-  .nwRawDanger{color:#ef4444!important;font-weight:600}
-  .nwRawOn{font-size:11px;color:#ef4444;margin-top:2px;font-weight:600}
+  .nwToolRow.nwToolRowRaw{background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 5%,var(--dsw-alias-bg-layer-1));box-shadow:var(--dsw-elevation-panel)}
+  .nwToolLabelRaw{color:var(--dsw-alias-label-error);font-weight:700}
+  .nwRawDanger{color:var(--dsw-alias-label-error)!important;font-weight:600}
+  .nwRawOn{font-size:11px;line-height:16px;color:var(--dsw-alias-label-error);margin-top:2px;font-weight:600}
 
   /* ===== 确认框（v5.2.0：面板内卡片，不再用全屏遮罩）===== */
-  /* 旧版写死 rgba(0,0,0,.5)、上一版换成宿主 mask token + backdrop-blur —— 两者都是"整屏遮罩"，
+  /* 旧版用写死的半透明黑遮罩、上一版换成宿主 mask token + backdrop-blur —— 两者都是"整屏遮罩"，
      会把整个应用（侧栏、会话、面板）糊成一片均匀的灰，用户直观感受就是"背景突变了"。
      但这两个确认框（先确认开启 / 再输入承诺文字）本来就是 PanelView 正文的一部分：
      它们出现时已经替换掉正常正文，所以**完全不需要遮罩**——做成一枚居中卡片即可，
      背景一点不变，也不会盖住侧栏与会话。 */
   .nwModal{display:block;margin:18px auto 0;width:100%;max-width:460px}
-  .nwModalBox{background:var(--dsw-alias-bg-layer-2,#fff);color:var(--dsw-alias-label-primary);border:1px solid var(--dsw-alias-border-l2,transparent);border-radius:16px;padding:18px 20px;box-shadow:var(--dsw-shadow-lv3,0 12px 40px rgba(15,23,42,.18))}
+  .nwModalBox{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);border-radius:var(--dsw-radius-panel);padding:18px 20px;box-shadow:var(--dsw-elevation-prominent)}
   .nwModalTitle{font-size:15px;font-weight:600;line-height:1.5;margin-bottom:8px}
   .nwModalText{font-size:13px;line-height:1.7;color:var(--dsw-alias-label-secondary);white-space:pre-line;margin-bottom:14px}
-  .nwModalInput{width:100%;box-sizing:border-box;padding:9px 11px;font:inherit;font-size:13px;border:1px solid var(--dsw-alias-border-l2,#d4d4d8);border-radius:10px;background:var(--dsw-alias-bg-layer-1,#fafafa);color:var(--dsw-alias-label-primary);margin-bottom:14px}
-  .nwModalInput:focus{outline:none;border-color:var(--dsw-alias-brand-primary,#6366f1);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
+  .nwModalInput{width:100%;box-sizing:border-box;padding:9px 11px;font:inherit;font-size:13px;line-height:20px;border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);margin-bottom:14px}
+  .nwModalInput:focus{outline:none;border-color:var(--dsw-alias-state-business-primary);box-shadow:0 0 0 3px var(--dsw-focus-ring-color)}
   .nwModalBtns{display:flex;gap:10px;justify-content:flex-end}
   /* 卡片里的按钮：给足点击面积，并与卡片底色拉开层次 */
-  .nwModalBtns .nwBtn{min-width:88px;height:34px;padding:0 14px;font-size:13px;border-radius:10px;background:var(--dsw-alias-bg-layer-1,#fff)}
-  .nwModalBtns .nwBtn:hover{background:var(--dsw-alias-interactive-bg-hover,var(--dsw-alias-bg-layer-3,#f4f4f5))}
-  .nwModalBtns .nwBtnDanger{background:var(--dsw-alias-state-error-primary,#ef4444);border-color:transparent;color:#fff}
+  .nwModalBtns .nwBtn{min-width:88px;height:34px;padding:0 14px;font-size:13px;line-height:20px;border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1)}
+  .nwModalBtns .nwBtn:hover{background:var(--dsw-alias-interactive-bg-hover,var(--dsw-alias-bg-layer-3))}
+  .nwModalBtns .nwBtn.nwBtnDanger{background:var(--dsw-alias-state-error-primary);border-color:transparent;color:var(--dsw-alias-label-primary-foreground)}
   .nwModalBtns .nwBtnDanger:hover{filter:brightness(1.05)}
   /* 入场：卡片轻微上浮即可，不再有整屏淡入（并尊重系统「减少动态效果」设置） */
   @keyframes nwModalBoxIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
   @media (prefers-reduced-motion: no-preference){
-    .nwModalBox{animation:nwModalBoxIn .18s ease-out}
-  }
+    .nwModalBox{animation:nwModalBoxIn .18s ease-out}}
 
   /* ===== 工具行/开关/说明 ===== */
-  .nwToolItem{width:100%;margin-bottom:2px}
+  .nwToolItem{width:100%;margin-bottom:6px}
   .nwToolItem .nwPlotBox{width:100%;box-sizing:border-box}
-  .nwToolsHint{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5;margin:2px 0 4px}
-  .nwToolRow{display:flex;align-items:center;gap:10px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:10px;padding:8px 12px}
-  .nwToolRowOn{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.05)}
+  .nwToolsHint{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;margin:6px 0 14px}
+  .nwToolRow{display:flex;align-items:center;gap:10px;border:0;background:var(--dsw-alias-bg-layer-1);border-radius:var(--dsw-radius-md);padding:10px 14px;box-shadow:var(--dsw-elevation-soft);transition:box-shadow .2s var(--nw-ease),transform .18s var(--nw-ease)}
+  .nwToolRow:hover{box-shadow:var(--dsw-elevation-panel);transform:translateY(-1px)}
+  .nwToolRow+.nwToolRow{margin-top:10px}
+  .nwRow+.nwToolRow,.nwToolRow+.nwRow{margin-top:10px}
+  .nwToolRow+.nwPlotBox{margin-top:10px}
+  .nwToolRowOn{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 10%,var(--dsw-alias-bg-layer-1));box-shadow:var(--dsw-elevation-panel)}
   .nwToolLabel{flex:1;min-width:0;font-size:12px;line-height:1.4;color:var(--dsw-alias-label-primary)}
   .nwToolDesc{font-size:11px;line-height:1.45;color:var(--dsw-alias-label-tertiary);margin-top:2px}
 
   /* ===== 工具组 ===== */
-  .nwToolGroup{border:1px solid var(--dsw-alias-border-l2);border-radius:10px;margin-bottom:8px;overflow:hidden}
-  .nwToolGroupHead{display:flex;align-items:center;gap:6px;width:100%;padding:9px 12px;background:rgba(127,127,127,.08);border:none;cursor:default;font-size:13px;text-align:left;color:inherit}
-  .nwToolGroupHead:hover{background:rgba(127,127,127,.14)}
-  .nwToolGroupIcon{font-size:15px}
+  .nwToolGroup{border:0;border-radius:var(--dsw-radius-md);margin-bottom:8px;overflow:hidden;background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-elevation-soft)}
+  .nwToolGroupBody .nwToolRow{box-shadow:none;background:transparent;transform:none}
+  .nwToolGroupBody .nwToolRowOn{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 10%,var(--dsw-alias-bg-layer-1))}
+  .nwToolGroupBody .nwToolRow:hover{box-shadow:none;transform:none}
+  .nwToolGroupHead{display:flex;align-items:center;gap:6px;width:100%;padding:9px 12px;background:var(--dsw-alias-bg-layer-2);border:none;cursor:default;font-size:13px;line-height:20px;text-align:left;color:inherit;font-family:inherit}
+  .nwToolGroupHead:hover{background:var(--dsw-alias-bg-layer-3);font-family:inherit}
+  .nwToolGroupIcon{font-size:15px;line-height:22px}
   .nwToolGroupName{font-weight:600}
-  .nwToolGroupBadge{margin-left:auto;font-size:11px;color:#c62828;background:rgba(198,40,40,.1);border-radius:10px;padding:1px 7px}
-  .nwToolGroupArrow{font-size:12px;opacity:.6}
+  .nwToolGroupBadge{margin-left:auto;font-size:11px;line-height:16px;color:var(--dsw-alias-label-error);background:var(--dsw-alias-state-error-secondary);border-radius:var(--dsw-radius-md);padding:1px 7px}
+  .nwToolGroupArrow{font-size:12px;line-height:18px;opacity:.6}
   .nwToolGroupBody{padding:4px 8px 8px}
   .nwToolGroupToggle{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0}
-  .nwToolGroupHeadBtn{flex:1;display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:0;text-align:left;color:inherit;font-size:13px}
+  .nwToolGroupHeadBtn{flex:1;display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:0;text-align:left;color:inherit;font-size:13px;line-height:20px}
   .nwToolGroupHeadText{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
   .nwToolGroupDescInline{font-size:11px;line-height:1.4;color:var(--dsw-alias-label-tertiary);font-weight:400;white-space:normal}
 
   /* ===== v5.2.0：官方主栏全局面板 ===== */
   /* 主栏页面：栅格、滚动容器与选中态都由宿主 layout 负责，这里只管内容排版 */
-  .nwPanelMain{max-width:760px;margin:0 auto;padding:28px 24px 48px;gap:10px;box-sizing:border-box;height:100%;overflow:auto}
+  .nwPanelMain{width:100%;max-width:760px;margin:0 auto;padding:28px 24px 48px;gap:10px;box-sizing:border-box;height:100%;overflow:auto;scrollbar-gutter:stable}
+
+  /* ===== v5.5.0：官方语义类（内联样式收编 + 官方设置卡片材质）===== */
+  .nwBoxed{background:var(--dsw-alias-bg-layer-1);border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);padding:8px 12px}
+  .nwSubCard{background:var(--dsw-alias-bg-layer-1);border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-lg);padding:10px 12px}
+  .nwChip{height:24px;padding:0 10px;border-radius:var(--dsw-radius-sm);border:0.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;cursor:pointer;font-family:inherit;transition:background .16s var(--nw-ease),box-shadow .2s var(--nw-ease)}
+  .nwChip:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);font-family:inherit}
+  .nwTextInput{height:32px;box-sizing:border-box;padding:0 12px;border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px;font-family:inherit}
+  .nwTextArea{box-sizing:border-box;min-height:56px;padding:10px 12px;border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px;font-family:inherit}
+  .nwSelect{height:32px;padding:0 10px;border:0.5px solid var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font-size:13px;line-height:20px;font-family:inherit}
+  .nwNote{font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
+  .nwMuted{font-size:13px;line-height:20px;color:var(--dsw-alias-label-secondary)}
+  .nwSignOk{color:var(--dsw-alias-state-success-primary)}
+  .nwSignBad{color:var(--dsw-alias-label-error)}
+  .nwGutter{font-size:13px;line-height:18px;color:var(--dsw-alias-label-tertiary);text-align:center}
+  .nwDashedNote{margin-top:10px;padding:10px 12px;border:1px dashed var(--dsw-alias-border-l2);border-radius:var(--dsw-radius-md);background:var(--dsw-alias-bg-layer-1)}
+  .nwDividerRow{border-bottom:0.5px solid var(--dsw-alias-border-l2)}
+  .nwSettingsCard{border-radius:var(--dsw-radius-xl);border:0.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-bg-layer-2);padding:14px 16px}
+  .nwSettingsCardTitle{font-size:14px;line-height:22px;font-weight:600;color:var(--dsw-alias-label-primary)}
+  .nwReportPre{font-size:12px;line-height:20px;color:var(--dsw-alias-label-secondary)}
+  .nwGroupName{font-size:12px;line-height:18px;font-weight:600;color:var(--dsw-alias-label-secondary)}
+  .nwFileRow{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:7px 10px;cursor:pointer;font-family:inherit}
+  .nwFileLabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;color:var(--dsw-alias-label-primary)}
+  .nwStatRow{display:flex;align-items:center;gap:8px;font-size:11px;line-height:16px}
+  .nwStatName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-primary)}
+  .nwChevron{font-size:13px;line-height:18px}
+  .nwFieldLabel{display:flex;align-items:center;gap:6px;font-size:13px;line-height:20px;font-weight:500;color:var(--dsw-alias-label-primary)}
+  .nwWarnBanner{border-radius:var(--dsw-radius-sm);border:1px solid var(--dsw-alias-state-warn-primary);background:var(--dsw-alias-state-warn-tertiary);color:var(--dsw-alias-state-warn-label);font-size:11px;line-height:16px}
+  .nwNoteAccent{color:var(--dsw-alias-state-business-primary)}
+  .nwNoteWarn{color:var(--dsw-alias-state-warn-label)}
+  .nwNoteOk{color:var(--dsw-alias-state-success-primary)}
+  .nwNoteDim{color:var(--dsw-alias-label-dimmed)}
+  .nwAccentStrong{font-size:13px;line-height:20px;font-weight:600;color:var(--dsw-alias-state-business-primary)}
+  .nwTolSign{width:12px;flex:none;text-align:center;font-size:14px;line-height:20px;font-weight:600}
+  .nwTolSign.nwSignOk{color:var(--dsw-alias-state-success-primary)}
+  .nwTolSign.nwSignBad{color:var(--dsw-alias-label-error)}
+  .nwInputErr{border-color:var(--dsw-alias-state-error-primary);box-shadow:0 0 0 3px var(--dsw-alias-interactive-bg-hover-danger)}
+  .nwCreationInput{width:100%;box-sizing:border-box;resize:vertical}
+  .nwPlotBoxEmpty{color:var(--dsw-alias-label-tertiary)}
+  
+  .nwToolGroupHeadOpen{color:var(--dsw-alias-label-primary)}
+  .nwTextInput:focus-visible,.nwTextArea:focus-visible,.nwSelect:focus-visible,.nwTolInput:focus-visible,.nwModalInput:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:1px}
+
+/* ===== v5.5.0：内联样式收编层（总负责人所有，拼在 A 的 CSS 之后）===== */
+  /* 这些类承接原先写在 React 内联 style 里的**外观**（色值/圆角/字号/描边），
+     使外观全部由 CSS + 官方语义 token 掌握：深浅主题自动跟随，不再有硬编码色值。
+     只放 A 的清单里没有的类；A 已提供 nwBoxed / nwSubCard / nwChip / nwTextInput /
+     nwTextArea / nwSelect / nwNote / nwMuted / nwSignOk / nwSignBad / nwGutter /
+     nwDashedNote / nwDividerRow 的外观，这里不重复定义。 */
+  /* 阈值行里的 +/- 记号：几何由这里给，颜色由 A 的 nwSignOk / nwSignBad 给 */
+  /* 新建书名输入框的错误态：由 JS 加类（替代原先 ev.target.style 写死色值） */
+  /* 输入类控件的键盘焦点：官方 focus.css 的全局兜底之外，再显式声明一次 */
+  /* 设置页「插件卡」：官方设置卡片材质（R20 + 0.5px 发丝描边 + 卡片底色别名） */
+
+  /* ===== 方案 B（官网式重构）：hero 头部 / 分区 kicker / 图标卡 / 状态 pill ===== */
+  .nwHero{display:flex;flex-direction:column;gap:6px;border-radius:var(--dsw-radius-xl);padding:18px 18px 16px;border:0.5px solid var(--dsw-alias-border-l4);background-color:var(--dsw-alias-bg-layer-2);background-image:radial-gradient(340px 120px at top center,color-mix(in srgb,var(--dsw-alias-state-business-primary) 12%,var(--dsw-alias-bg-layer-2)) 0%,var(--dsw-alias-bg-layer-2) 72%);box-shadow:none}
+  .nwHero .nwBanner{background:transparent;border-color:transparent;padding:2px 0;box-shadow:none;letter-spacing:-.01em}
+  .nwHero .nwBannerOn,.nwHero .nwBannerOff{background:transparent;border-color:transparent}
+  .nwHeroDesc{font-size:12.5px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+  .nwSection{display:flex;flex-direction:column;gap:12px;margin-top:16px}
+  .nwKickerRow{display:flex;align-items:center;gap:10px}
+  .nwKicker{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;corner-shape:round;background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 8%,var(--dsw-alias-bg-layer-1));border:0.5px solid color-mix(in srgb,var(--dsw-alias-state-business-primary) 16%,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-state-business-primary);font-size:12px;line-height:17px;font-weight:700;letter-spacing:.04em;flex:none}
+  .nwKickerRule{flex:1;min-width:0;height:1px;background:var(--dsw-alias-border-l2)}
+  .nwIconSlot{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--dsw-radius-md);background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 8%,var(--dsw-alias-bg-layer-1));border:0.5px solid color-mix(in srgb,var(--dsw-alias-state-business-primary) 16%,var(--dsw-alias-bg-layer-1))}
+  .nwIconGlyph{font-size:15px;line-height:20px;color:var(--dsw-alias-state-business-primary)}
+  .nwPillRow{display:flex;flex-wrap:wrap;gap:8px}
+  .nwPill{display:inline-flex;align-items:baseline;gap:8px;padding:7px 16px;border-radius:999px;corner-shape:round;background:var(--dsw-alias-bg-layer-2);transition:background .16s var(--nw-ease)}
+  .nwPillKey{font-size:12.5px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
+  .nwPillVal{font-size:13px;line-height:18px;font-weight:650;color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums}
+  /* 微交互总门：减少动态效果时关掉 hover 抬升与过渡（模态入场动画原本就在 no-preference 门内） */
+  @media (prefers-reduced-motion: reduce){
+    .nwRow,.nwNavEntry,.nwToolRow,.nwBtn,.nwChip,.nwPill,.nwSwitch,.nwSwitchKnob,.nwSegBtn{transition:none!important}
+    .nwRow:hover,.nwNavEntry:hover,.nwToolRow:hover,.nwBtnPrimary:hover,.nwBtnGhost:hover{transform:none!important}
+    .nwBtnPrimary:hover{filter:none!important}
+  }
 `;
     // v3.0.0-UI3：已存在旧 style 标签也覆盖内容——否则插件脚本重复执行时新 CSS 永不注入（UI 停留在旧版）
     if (typeof document !== "undefined") {
@@ -209,6 +743,10 @@ var css = `
       "panel.autoAnalyze": "分析作品时自动使用",
       "panel.autoAnalyzeHint": "开启后，AI 在分析作品时会主动附带句式分析；关闭则仅在用户明确要求时使用。",
       "panel.spMode": "系统提示词",
+      "panel.secSwitch": "开关",
+      "panel.secPrompt": "提示词",
+      "panel.secStatus": "状态",
+      "panel.heroDesc": "18 个工具 · 6 维文笔基线 · 全本地推理，正文不外传",
       "panel.spModeHint": "控制插件往系统提示词里注入多少内容：关闭=完全不注入；精简=一句话（推荐）；完整=完整工作流说明。改完下一轮对话生效。",
       "sp.off": "关闭",
       "sp.brief": "精简",
@@ -425,6 +963,10 @@ var css = `
       "panel.autoAnalyze": "Auto-use when analyzing works",
       "panel.autoAnalyzeHint": "When on, the AI proactively includes sentence analysis; otherwise only on explicit request.",
       "panel.spMode": "System prompt",
+      "panel.secSwitch": "Switch",
+      "panel.secPrompt": "Prompts",
+      "panel.secStatus": "Status",
+      "panel.heroDesc": "18 tools · 6-dimension style baseline · fully local — text never leaves your machine",
       "panel.spModeHint": "How much the plugin injects into the system prompt: Off = nothing; Brief = one line (recommended); Full = the complete workflow. Applies from the next turn.",
       "sp.off": "Off",
       "sp.brief": "Brief",
@@ -1049,19 +1591,19 @@ var css = `
       // v4.3.0：同上，删掉永不匹配的 [data-pane="conversation"]（真实标记是 …_centerCol）
       return document.querySelector('[class*="centerCol"]') ?? void 0;
     }
+    /**
+     * v5.5.0：开关交给官方 primitives（Switch 36×20，关闭态滑块读 --dsw-alias-switch-thumb），
+     * 取不到官方包时由 NW_UI 内部回退到同一套 token 样式的本地实现（见「官方原语适配层」）。
+     * 保留这个局部名字，6 个调用点无需改动；label 是无障碍名称，由调用点传入。
+     */
     function Switch(props) {
-      return react.createElement(
-        "button",
-        {
-          type: "button",
-          role: "switch",
-          "aria-checked": props.checked ? "true" : "false",
-          disabled: props.disabled,
-          className: "nwSwitch" + (props.checked ? " nwSwitchOn" : ""),
-          onClick: function () { props.onChange(!props.checked); }
-        },
-        react.createElement("span", { className: "nwSwitchKnob" })
-      );
+      // 必须用 createElement 变成子组件：官方 Switch 内部用 hook，直接调用会把 hook 混进本组件的 hook 链
+      return react.createElement(NW_UI.Switch, {
+        checked: props.checked,
+        disabled: props.disabled,
+        onChange: props.onChange,
+        label: props.label || ""
+      });
     }
     function PanelView(props) {
       // v3.7.0 高1：isEn 声明在视图作用域（此前只在 rawSetPromise 内部，基线视图引用 ReferenceError 必崩）
@@ -1085,6 +1627,7 @@ var css = `
       var loadingHint = state.loading ? el("div", { className: "nwStatus" }, "⟳ " + t("panel.loading")) : null;
       var entry = function (title, hint, count, viewName) {
         return el("button", { type: "button", className: "nwNavEntry", onClick: function () { props.controller.openView(viewName); } },
+          el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, viewName === "features" ? "⚙" : viewName === "tools" ? "🛠" : viewName === "creation" ? "📖" : viewName === "baseline" ? "🎯" : "▸")),
           el("div", { className: "nwNavEntryText" },
             el("div", { className: "nwNavEntryTitle" }, title),
             el("div", { className: "nwNavEntryHint" }, hint)
@@ -1108,15 +1651,14 @@ var css = `
       };
       var switchRow = function (name, fOn, onToggle, extra) {
         return el("div", { className: "nwToolRow" + (fOn ? " nwToolRowOn" : ""), key: name },
+          el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, name === "emotionCaveat" ? "💧" : name === "emotionComplexity" ? "🎭" : name === "genreTheme" ? "🏷" : name === "webnovelVibe" ? "📡" : name === "semanticEmbedding" ? "🧠" : name === "semanticSearch" ? "🔎" : name === "semanticStyle" ? "🖌" : name === "semanticImplicit" ? "👁" : "⚙")),
           el("div", { className: "nwToolLabel" },
             el("div", null, t("feature." + name)),
             el("div", { className: "nwToolDesc" }, t("feature." + name + ".desc")),
             extra || null
           ),
-          el("button", { type: "button", role: "switch", "aria-checked": fOn ? "true" : "false", className: "nwSwitchSmall" + (fOn ? " nwSwitchSmallOn" : ""), disabled: state.loading,
-            onClick: function () { onToggle(name, !fOn); } },
-            el("span", { className: "nwSwitchSmallKnob" })
-          )
+          el(Switch, { checked: fOn, disabled: state.loading, label: String(t("feature." + name)),
+            onChange: function () { onToggle(name, !fOn); } })
         );
       };
       function formatSize(bytes) {
@@ -1205,14 +1747,13 @@ var TOOL_GROUPS = [
             else if (name === "novel_sentence_analysis") pathExtra = pathBox(t("dir.analysis"), dirs.analysisDir || "", "analysis-dir");
             return el("div", { key: name, className: "nwToolItem" },
               el("div", { className: "nwToolRow" + (checked ? " nwToolRowOn" : "") },
+                el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, "🧩")),
                 el("div", { className: "nwToolLabel" },
                   el("div", null, String(t("tool." + name)).replace(/\s+novel_\w+$/, "")),
                   el("div", { className: "nwToolDesc" }, desc)
                 ),
-                el("button", { type: "button", role: "switch", "aria-checked": checked ? "true" : "false", className: "nwSwitchSmall" + (checked ? " nwSwitchSmallOn" : ""), disabled: state.loading,
-                  onClick: function () { props.toggle({ tools: (function (patch) { patch[name] = !checked; return patch; })({}) }); } },
-                  el("span", { className: "nwSwitchSmallKnob" })
-                )
+                el(Switch, { checked: checked, disabled: state.loading, label: String(t("tool." + name)).replace(/\s+novel_\w+$/, ""),
+                  onChange: function () { props.toggle({ tools: (function (patch) { patch[name] = !checked; return patch; })({}) }); } })
               ),
               pathExtra || null
             );
@@ -1343,34 +1884,34 @@ var TOOL_GROUPS = [
           el("div", { className: "nwSectionTitle" }, "🎯 " + t("panel.baselineTitle")),
           el("div", { className: "nwToolsHint" }, t("baseline.desc")),
           el("div", { className: "nwTolVer" }, "v3.0.0-UI3"),
-          el("div", { className: "nwTolCard", style: { background: "#fff", border: "1px solid #e2e8f0", borderRadius: "12px", padding: "4px 14px 8px", margin: "8px 0 4px" } },
+          el("div", { className: "nwTolCard" },
             NW_METRICS.map(function (item) {
               var mk2 = item[0];
               var d = draft[mk2] || DEFAULT_TOL;
               return el("div", { className: "nwTolRow", key: mk2, style: { display: "flex", alignItems: "center", gap: "10px", padding: "9px 2px" } },
-                el("div", { className: "nwTolName", style: { flex: "1", minWidth: "0", display: "flex", alignItems: "center", gap: "8px", fontSize: "13px", fontWeight: "500", whiteSpace: "nowrap", color: "#334155" } }, el("span", { className: "nwTolIcon", style: { fontSize: "15px" } }, item[2]), isEn ? (item[3] || item[1]) : item[1]),
+                el("div", { className: "nwTolName" }, el("span", { className: "nwTolIcon" }, item[2]), isEn ? (item[3] || item[1]) : item[1]),
                 el("div", { className: "nwTolField", style: { width: "74px", flexShrink: "0", display: "flex", flexDirection: "column", gap: "3px" } },
                   el("div", { style: { display: "flex", alignItems: "center", gap: "4px" } },
-                    el("span", { className: "nwTolSign", style: { width: "12px", flexShrink: "0", textAlign: "center", fontSize: "14px", color: "#ef4444", fontWeight: "600" } }, "−"),
-                    el("input", { type: "number", className: "nwTolInput", placeholder: t("tol.recommend"), value: d.low, min: 0, max: 99, disabled: state.loading, style: { width: "100%", height: "30px", boxSizing: "border-box", border: "1px solid #d4d4d8", borderRadius: "8px", fontSize: "13px", textAlign: "center", background: "#fafafa", color: "#18181b", outline: "none", MozAppearance: "textfield" }, onChange: function (ev) { setDraft(mk2, "low", ev.target.value); } })
+                    el("span", { className: "nwTolSign" }, "−"),
+                    el("input", { type: "number", className: "nwTolInput", placeholder: t("tol.recommend"), value: d.low, min: 0, max: 99, disabled: state.loading, onChange: function (ev) { setDraft(mk2, "low", ev.target.value); } })
                   ),
-                  el("span", { className: "nwTolCaption", style: { fontSize: "10px", color: "#94a3b8", textAlign: "center" } }, t("baseline.low"))
+                  el("span", { className: "nwTolCaption" }, t("baseline.low"))
                 ),
-                el("span", { className: "nwTolSep", style: { width: "14px", flexShrink: "0", fontSize: "12px", color: "#b0b8c4", textAlign: "center" } }, "~"),
+                el("span", { className: "nwTolSep" }, "~"),
                 el("div", { className: "nwTolField", style: { width: "74px", flexShrink: "0", display: "flex", flexDirection: "column", gap: "3px" } },
                   el("div", { style: { display: "flex", alignItems: "center", gap: "4px" } },
-                    el("span", { className: "nwTolSign", style: { width: "12px", flexShrink: "0", textAlign: "center", fontSize: "14px", color: "#10b981", fontWeight: "600" } }, "+"),
-                    el("input", { type: "number", className: "nwTolInput", placeholder: t("tol.recommend"), value: d.high, min: 0, max: 99, disabled: state.loading, style: { width: "100%", height: "30px", boxSizing: "border-box", border: "1px solid #d4d4d8", borderRadius: "8px", fontSize: "13px", textAlign: "center", background: "#fafafa", color: "#18181b", outline: "none", MozAppearance: "textfield" }, onChange: function (ev) { setDraft(mk2, "high", ev.target.value); } })
+                    el("span", { className: "nwTolSign" }, "+"),
+                    el("input", { type: "number", className: "nwTolInput", placeholder: t("tol.recommend"), value: d.high, min: 0, max: 99, disabled: state.loading, onChange: function (ev) { setDraft(mk2, "high", ev.target.value); } })
                   ),
-                  el("span", { className: "nwTolCaption", style: { fontSize: "10px", color: "#94a3b8", textAlign: "center" } }, t("baseline.high"))
+                  el("span", { className: "nwTolCaption" }, t("baseline.high"))
                 ),
-                el("span", { className: "nwTolPct", style: { width: "14px", flexShrink: "0", fontSize: "13px", color: "#64748b" } }, "%")
+                el("span", { className: "nwTolPct" }, "%")
               );
             })
           ),
           el("div", { className: "nwTolBtns", style: { display: "flex", gap: "12px", marginTop: "16px" } },
-            el("button", { type: "button", className: "nwBtn nwBtnPrimary" + (state.baselineSaved ? " nwBtnDone" : ""), disabled: state.loading, onClick: saveTol, style: state.baselineSaved ? { background: "linear-gradient(135deg,#10b981,#34d399)", border: "none", color: "#fff", fontWeight: "600", fontSize: "13px", padding: "9px 20px", borderRadius: "10px", cursor: "pointer" } : { background: "linear-gradient(135deg,#6366f1,#8b5cf6)", border: "none", color: "#fff", fontWeight: "600", fontSize: "13px", padding: "9px 20px", borderRadius: "10px", cursor: "pointer" } }, state.baselineSaved ? "✓ " + t("baseline.saved") : "💾 " + t("baseline.save")),
-            el("button", { type: "button", className: "nwBtn nwBtnGhost", disabled: state.loading, onClick: resetTol, style: { background: "transparent", border: "1px solid #cbd5e1", color: "#475569", fontSize: "13px", padding: "9px 18px", borderRadius: "10px", cursor: "pointer" } }, "↺ " + t("baseline.reset"))
+            el("button", { type: "button", className: "nwBtn nwBtnPrimary" + (state.baselineSaved ? " nwBtnDone" : ""), disabled: state.loading, onClick: saveTol }, state.baselineSaved ? "✓ " + t("baseline.saved") : "💾 " + t("baseline.save")),
+            el("button", { type: "button", className: "nwBtn nwBtnGhost", disabled: state.loading, onClick: resetTol }, "↺ " + t("baseline.reset"))
           )
         );
             } else if (view === "reports") {
@@ -1399,18 +1940,18 @@ var TOOL_GROUPS = [
           el("div", { className: "nwToolsHint" }, t("reports.hint")),
           state.reportContent ?
             el("div", null,
-              el("button", { type: "button", style: { margin: "6px 0", padding: "4px 10px", borderRadius: "6px", border: "1px solid #cbd5e1", background: "#fff", fontSize: "12px", cursor: "pointer", color: "#475569" }, onClick: function () { props.controller.set({ reportContent: null }); } }, "‹ " + t("reports.back")),
-              el("pre", { style: { margin: "4px 0 0", padding: "10px", borderRadius: "8px", background: "#fff", border: "1px solid #e2e8f0", fontSize: "11px", lineHeight: "1.7", color: "#334155", whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: "70vh", overflow: "auto" } }, state.reportContent)
+              el("button", { type: "button", className: "nwChip", style: { margin: "6px 0" }, onClick: function () { props.controller.set({ reportContent: null }); } }, "‹ " + t("reports.back")),
+              el("pre", { className: "nwBoxed nwReportPre", style: { margin: "4px 0 0", whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: "70vh", overflow: "auto" } }, state.reportContent)
             )
           : el("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } },
-              reportsLoading ? el("div", { style: { fontSize: "12px", color: "#94a3b8", padding: "10px 0" } }, t("reports.loading2")) : totalFiles === 0 ? el("div", { style: { fontSize: "12px", color: "#94a3b8", padding: "10px 0" } }, t("reports.empty")) : null,
+              reportsLoading ? el("div", { className: "nwMuted", style: { padding: "10px 0" } }, t("reports.loading2")) : totalFiles === 0 ? el("div", { className: "nwMuted", style: { padding: "10px 0" } }, t("reports.empty")) : null,
               groups.map(function (g) {
                 return el("div", { key: g.name },
-                  el("div", { style: { fontSize: "12px", fontWeight: "600", color: "#475569", margin: "6px 0 4px" } }, g.name + "（" + (g.files || []).length + "）"),
+                  el("div", { className: "nwGroupName", style: { margin: "6px 0 4px" } }, g.name + "（" + (g.files || []).length + "）"),
                   (g.files || []).map(function (f) {
-                    return el("button", { key: f.file, type: "button", style: { display: "flex", alignItems: "center", width: "100%", padding: "7px 10px", marginBottom: "4px", borderRadius: "8px", border: "1px solid #e2e8f0", background: "#fff", cursor: "pointer", textAlign: "left" }, onClick: function () { openReport(f.file); } },
-                      el("span", { style: { flex: "1", fontSize: "12px", color: "#334155", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, f.label),
-                      el("span", { style: { fontSize: "10px", color: "#94a3b8" } }, (f.time || "").slice(0, 16).replace("T", " "))
+                    return el("button", { key: f.file, type: "button", className: "nwBoxed nwFileRow", style: { marginBottom: "4px", textAlign: "left" }, onClick: function () { openReport(f.file); } },
+                      el("span", { className: "nwFileLabel",   }, f.label),
+                      el("span", { className: "nwNote",   }, (f.time || "").slice(0, 16).replace("T", " "))
                     );
                   })
                 );
@@ -1470,7 +2011,7 @@ var TOOL_GROUPS = [
             }
             if (!nb) {
               var elInp = document.getElementById("nwNewBookInput");
-              if (elInp) { elInp.focus(); elInp.style.borderColor = "#ef4444"; elInp.style.boxShadow = "0 0 0 3px rgba(239,68,68,.15)"; }
+              if (elInp) { elInp.focus(); elInp.classList.add("nwInputErr"); }
               props.controller.set({ revealMsg: t("creation.needName"), revealErr: true }, { silent: true });
               return;
             }
@@ -1481,15 +2022,15 @@ var TOOL_GROUPS = [
           };
           function bookRow(name, profile, isDefault, hasProfile) {
             var filled = filledCount(profile);
-            return el("div", { key: "bk-" + name, style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 12px", borderRadius: "10px", border: "1px solid #e2e8f0", background: "#fff" } },
+            return el("div", { key: "bk-" + name, className: "nwBoxed nwFileRow", style: { gap: "10px", padding: "10px 12px" } },
               el("div", { style: { flex: "1", minWidth: "0" } },
-                el("div", { style: { fontSize: "13px", fontWeight: "600", color: "#334155" } }, isDefault ? "🌐 " + t("creation.default") : "📕 " + name),
-                el("div", { style: { fontSize: "11px", color: filled > 0 ? "#6366f1" : "#94a3b8", marginTop: "2px" } }, summaryOf(profile)),
-                isDefault ? el("div", { style: { fontSize: "10px", color: "#cbd5e1", marginTop: "1px" } }, t("creation.defaultHint")) : null
+                el("div", { className: "nwRowLabel",   }, isDefault ? "🌐 " + t("creation.default") : "📕 " + name),
+                el("div", { className: "nwNote" + (filled > 0 ? " nwNoteAccent" : ""), style: { marginTop: "2px" } }, summaryOf(profile)),
+                isDefault ? el("div", { className: "nwNote", style: { marginTop: "1px" } }, t("creation.defaultHint")) : null
               ),
-              el("button", { type: "button", onClick: function () { props.controller.set({ creationBook: name, creationDraft: null, creationDirty: false }, { silent: true }); props.controller.openView("creation-form"); } }, t("creation.edit")),
+              el("button", { type: "button", className: "nwChip", onClick: function () { props.controller.set({ creationBook: name, creationDraft: null, creationDirty: false }, { silent: true }); props.controller.openView("creation-form"); } }, t("creation.edit")),
               // v4.0.0 修正：书库里的书若没有设定条目，不渲染"删除"（此前点了空操作却提示"已删除"）
-              (isDefault || !hasProfile) ? null : el("button", { type: "button", onClick: function () { var patch = {}; patch[name] = null; props.toggle({ creationProfiles: patch }); props.controller.set({ revealMsg: t("creation.deleted"), revealErr: false }, { silent: true }); } }, t("creation.delete"))
+              (isDefault || !hasProfile) ? null : el("button", { type: "button", className: "nwChip", onClick: function () { var patch = {}; patch[name] = null; props.toggle({ creationProfiles: patch }); props.controller.set({ revealMsg: t("creation.deleted"), revealErr: false }, { silent: true }); } }, t("creation.delete"))
             );
           }
           body = el("div", null,
@@ -1498,8 +2039,8 @@ var TOOL_GROUPS = [
             el("div", { className: "nwToolsHint" }, t("creation.desc2")),
             // 新建设定
             el("div", { style: { display: "flex", gap: "8px", marginTop: "8px", marginBottom: "10px" } },
-              el("input", { id: "nwNewBookInput", type: "text", value: newBookName, placeholder: t("creation.newPlaceholder"), style: { flex: "1", height: "34px", boxSizing: "border-box", padding: "0 12px", border: "1px solid #d4d4d8", borderRadius: "10px", fontSize: "13px", background: "#fff", color: "#18181b", outline: "none", transition: "border-color .15s ease, box-shadow .15s ease" }, onInput: function (ev) { props.controller.set({ creationNewBook: ev.target.value }, { silent: true }); }, onFocus: function (ev) { ev.target.style.borderColor = "#6366f1"; ev.target.style.boxShadow = "0 0 0 3px rgba(99,102,241,.14)"; }, onBlur: function (ev) { ev.target.style.borderColor = "#d4d4d8"; ev.target.style.boxShadow = "none"; }, onKeyDown: function (ev) { if (ev.key === "Enter") { ev.preventDefault(); createNewBook(); } } }),
-              el("button", { type: "button", style: { height: "34px", padding: "0 16px", borderRadius: "10px", border: "none", background: "linear-gradient(135deg,#6366f1,#8b5cf6)", color: "#fff", fontWeight: "600", fontSize: "13px", cursor: "pointer" }, onClick: createNewBook }, t("creation.new"))
+              el("input", { id: "nwNewBookInput", type: "text", value: newBookName, placeholder: t("creation.newPlaceholder"), className: "nwTextInput", style: { flex: "1", height: "34px" }, onInput: function (ev) { props.controller.set({ creationNewBook: ev.target.value }, { silent: true }); }, onKeyDown: function (ev) { if (ev.key === "Enter") { ev.preventDefault(); createNewBook(); } } }),
+              el("button", { type: "button", className: "nwBtn nwBtnPrimary", style: { height: "34px", padding: "0 16px" }, onClick: createNewBook }, t("creation.new"))
             ),
             el("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } },
               bookRow("", cpGlobal, true),
@@ -1572,21 +2113,21 @@ var TOOL_GROUPS = [
             el("div", { className: "nwSectionTitle" }, "🎨 " + (curBook ? curBook : t("creation.default")) + " · " + t("creation.formTitle")),
             // 快速切换
             el("div", { style: { display: "flex", alignItems: "center", gap: "8px", margin: "4px 0 10px" } },
-              el("span", { style: { fontSize: "12px", color: "#64748b" } }, t("creation.bookFor")),
-              el("select", { value: curBook, style: { height: "32px", padding: "0 10px", borderRadius: "8px", border: "1px solid #d4d4d8", background: "#fff", color: "#18181b", fontSize: "13px", outline: "none" }, onChange: function (ev) { switchBook(ev.target.value); } }, switchOpts)
+              el("span", { className: "nwMuted",   }, t("creation.bookFor")),
+              el("select", { className: "nwSelect", value: curBook, onChange: function (ev) { switchBook(ev.target.value); } }, switchOpts)
             ),
             el("div", { style: { display: "flex", flexDirection: "column", gap: "10px" } },
               CREATION_FIELDS.map(function (item) {
                 var cf4 = item[0];
                 return el("div", { key: cf4, style: { display: "flex", flexDirection: "column", gap: "4px" } },
-                  el("div", { style: { fontSize: "13px", fontWeight: "500", color: "#334155", display: "flex", alignItems: "center", gap: "6px" } }, item[1] + " " + item[2]),
-                  el("textarea", { className: "nwCreationInput", value: formDraft[cf4] || "", rows: 2, placeholder: item[3], style: { width: "100%", boxSizing: "border-box", minHeight: "56px", padding: "10px 12px", border: "1px solid #d4d4d8", borderRadius: "10px", fontSize: "13px", fontFamily: "inherit", resize: "vertical", background: "#fff", color: "#18181b", outline: "none", lineHeight: "1.6", transition: "border-color .15s ease, box-shadow .15s ease, background .15s ease", boxShadow: "0 1px 2px rgba(15,23,42,.04)" }, onInput: function (ev) { setFormDraft(cf4, ev.target.value); }, onFocus: function (ev) { ev.target.style.borderColor = "#6366f1"; ev.target.style.boxShadow = "0 0 0 3px rgba(99,102,241,.14)"; }, onBlur: function (ev) { ev.target.style.borderColor = "#d4d4d8"; ev.target.style.boxShadow = "0 1px 2px rgba(15,23,42,.04)"; } })
+                  el("div", { className: "nwFieldLabel",   }, item[1] + " " + item[2]),
+                  el("textarea", { className: "nwCreationInput nwTextArea", value: formDraft[cf4] || "", rows: 2, placeholder: item[3], style: { width: "100%", resize: "vertical" }, onInput: function (ev) { setFormDraft(cf4, ev.target.value); } })
                 );
               })
             ),
             el("div", { style: { display: "flex", gap: "12px", marginTop: "14px" } },
-              el("button", { type: "button", className: "nwBtn", style: { background: "linear-gradient(135deg,#6366f1,#8b5cf6)", border: "none", color: "#fff", fontWeight: "600", fontSize: "13px", padding: "9px 20px", borderRadius: "10px", cursor: "pointer" }, onClick: saveForm }, "💾 " + t("creation.save")),
-              el("button", { type: "button", className: "nwBtn", style: { background: "transparent", border: "1px solid #cbd5e1", color: "#475569", fontSize: "13px", padding: "9px 18px", borderRadius: "10px", cursor: "pointer" }, onClick: clearForm }, "↺ " + t("creation.clear"))
+              el("button", { type: "button", className: "nwBtn", style: { padding: "9px 20px" }, onClick: saveForm }, "💾 " + t("creation.save")),
+              el("button", { type: "button", className: "nwBtn", style: { padding: "9px 18px" }, onClick: clearForm }, "↺ " + t("creation.clear"))
             )
           );
         }      } else {
@@ -1615,7 +2156,7 @@ var TOOL_GROUPS = [
         }
         body = el("div", null,
           // v3.5.0 #37：保存失败/宿主不可达提示条
-          (state.saveFailed || state.hostOk === false) ? el("div", { key: "saveBanner", style: { padding: "7px 10px", marginBottom: "8px", borderRadius: "8px", background: "#fef3c7", border: "1px solid #fcd34d", color: "#92400e", fontSize: "11px", lineHeight: "1.5" } }, state.hostOk === false ? t("panel.localOnly") : t("panel.saveFailed")) : null,
+          (state.saveFailed || state.hostOk === false) ? el("div", { key: "saveBanner", className: "nwWarnBanner", style: { padding: "7px 10px", marginBottom: "8px" } }, state.hostOk === false ? t("panel.localOnly") : t("panel.saveFailed")) : null,
           // v2.6.5：更新提示条（有新版才显示，点击跳 GitHub Release）
           // v4.3.0：ok === false 时不显示该条——避免用"上次检查到的版本"冒充本次结果
           updateCheck && !updateFailed && updateCheck.updateAvailable && updateCheck.releaseUrl
@@ -1627,124 +2168,151 @@ var TOOL_GROUPS = [
           updateFailed
             ? el("div", { key: "updateStale", className: "nwUpdateStale" }, updateFailedText)
             : null,
-          el("div", { className: "nwRow " + (state.enabled ? "nwRowOn" : "nwRowOff") },
-            el("div", { className: "nwRowText" },
-              el("div", { className: "nwRowLabel" }, t("panel.enabled")),
-              el("div", { className: "nwRowHint" }, t("panel.enabledHint"))
+          el("div", { className: "nwSection" },
+            el("div", { className: "nwKickerRow" },
+              el("div", { className: "nwKicker" }, t("panel.secSwitch")),
+              el("div", { className: "nwKickerRule" })
             ),
-            el("div", { className: "nwSwitchWrap" },
-              el(Switch, { checked: state.enabled, disabled: state.loading, onChange: function (value) { props.toggle({ enabled: value }); } }),
-              el("span", { className: "nwBadge " + (state.enabled ? "nwBadgeOn" : "nwBadgeOff") }, state.enabled ? t("badge.on") : t("badge.off"))
-            )
-          ),
-          el("div", { className: "nwRow " + (state.autoAnalyze ? "nwRowOn" : "nwRowOff") },
-            el("div", { className: "nwRowText" },
-              el("div", { className: "nwRowLabel" }, t("panel.autoAnalyze")),
-              el("div", { className: "nwRowHint" }, t("panel.autoAnalyzeHint"))
+            el("div", { className: "nwRow " + (state.enabled ? "nwRowOn" : "nwRowOff") },
+              el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, "🎚")),
+              el("div", { className: "nwRowText" },
+                el("div", { className: "nwRowLabel" }, t("panel.enabled")),
+                el("div", { className: "nwRowHint" }, t("panel.enabledHint"))
+              ),
+              el("div", { className: "nwSwitchWrap" },
+                el(Switch, { checked: state.enabled, disabled: state.loading, label: t("panel.enabled"), onChange: function (value) { props.toggle({ enabled: value }); } }),
+                el("span", { className: "nwBadge " + (state.enabled ? "nwBadgeOn" : "nwBadgeOff") }, state.enabled ? t("badge.on") : t("badge.off"))
+              )
+            ),
+            el("div", { className: "nwRow " + (state.autoAnalyze ? "nwRowOn" : "nwRowOff") },
+              el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, "📊")),
+              el("div", { className: "nwRowText" },
+                el("div", { className: "nwRowLabel" }, t("panel.autoAnalyze")),
+                el("div", { className: "nwRowHint" }, t("panel.autoAnalyzeHint"))
+              ),
+              el("div", { className: "nwSwitchWrap" },
+                el(Switch, { checked: state.autoAnalyze, disabled: state.loading, label: t("panel.autoAnalyze"), onChange: function (value) { props.toggle({ autoAnalyze: value }); } }),
+                el("span", { className: "nwBadge " + (state.autoAnalyze ? "nwBadgeOn" : "nwBadgeOff") }, state.autoAnalyze ? t("badge.on") : t("badge.off"))
+              )
+            ),
+            // v5.0.0：精简工作流——全局开关，与相邻开关同一套 switch/badge 组件。
+            // B2 重排：由「提示词档位 / 提示词场景」两行之下移入「开关」分区——与「提示词场景」行的区别：它不受"仅完整档生效"限制（不给 disabled 逻辑），任何时候都可切换；
+            // 打开（true）= 提示词换"按需调用"最简档，关闭（false，默认）= 维持 5.0.0 的自检/收尾/复测清单。
+            el("div", { className: "nwRow " + (state.leanWorkflow ? "nwRowOn" : "nwRowOff") },
+              el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, "⚡")),
+              el("div", { className: "nwRowText" },
+                el("div", { className: "nwRowLabel" }, t("panel.leanWorkflow")),
+                el("div", { className: "nwRowHint" }, t("panel.leanWorkflowHint"))
+              ),
+              el("div", { className: "nwSwitchWrap" },
+                el(Switch, { checked: state.leanWorkflow === true, disabled: state.loading, label: t("panel.leanWorkflow"), onChange: function (value) { props.toggle({ leanWorkflow: value }); } }),
+                el("span", { className: "nwBadge " + (state.leanWorkflow ? "nwBadgeOn" : "nwBadgeOff") }, state.leanWorkflow ? t("badge.on") : t("badge.off"))
+              )
             ),
-            el("div", { className: "nwSwitchWrap" },
-              el(Switch, { checked: state.autoAnalyze, disabled: state.loading, onChange: function (value) { props.toggle({ autoAnalyze: value }); } }),
-              el("span", { className: "nwBadge " + (state.autoAnalyze ? "nwBadgeOn" : "nwBadgeOff") }, state.autoAnalyze ? t("badge.on") : t("badge.off"))
-            )
           ),
-          // v4.0.0：系统提示词注入档位（关闭 / 精简 / 完整）——三档分段按钮，沿用 dsh-unrestricted 的开关思路
-          el("div", { className: "nwRow " + (state.systemPromptMode !== "off" ? "nwRowOn" : "nwRowOff") },
-            el("div", { className: "nwRowText" },
-              el("div", { className: "nwRowLabel" }, t("panel.spMode")),
-              el("div", { className: "nwRowHint" }, t("panel.spModeHint"))
+          el("div", { className: "nwSection" },
+            el("div", { className: "nwKickerRow" },
+              el("div", { className: "nwKicker" }, t("panel.secPrompt")),
+              el("div", { className: "nwKickerRule" })
             ),
-            el("div", { className: "nwSeg" },
-              ["off", "brief", "full"].map(function (m) {
-                return el("button", { key: m, type: "button", className: "nwSegBtn" + (state.systemPromptMode === m ? " nwSegBtnOn" : ""), disabled: state.loading,
-                  onClick: function () { if (state.systemPromptMode !== m) props.toggle({ systemPromptMode: m }); } }, t("sp." + m));
+            // v4.0.0：系统提示词注入档位（关闭 / 精简 / 完整）——三档分段按钮，沿用 dsh-unrestricted 的开关思路
+            el("div", { className: "nwRow " + (state.systemPromptMode !== "off" ? "nwRowOn" : "nwRowOff") },
+              el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, "📝")),
+              el("div", { className: "nwRowText" },
+                el("div", { className: "nwRowLabel" }, t("panel.spMode")),
+                el("div", { className: "nwRowHint" }, t("panel.spModeHint"))
+              ),
+              el(NW_UI.SegmentedControl, {
+                label: t("panel.spMode"),
+                value: state.systemPromptMode,
+                disabled: state.loading,
+                options: ["off", "brief", "full"].map(function (m) { return { value: m, label: t("sp." + m) }; }),
+                onChange: function (m) { if (state.systemPromptMode !== m) props.toggle({ systemPromptMode: m }); }
               })
-            )
-          ),
-          // v5.0.0：提示词场景——与上面的档位正交：档位决定"注入多少"，场景决定"注入什么"。
-          // v5.1.1 修正：**不再因为档位非 full 就把按钮 disabled**——用户反馈"场景里点不了其他选项"，
-          // 因为默认档位是 off/精简，五个按钮全灰且没有任何解释，等于把"选场景"锁死在一个看不见的前提后面。
-          // 现在按钮始终可点（只受 loading 限制），档位非 full 时改用行内提示说明"已保存但暂不注入"。
-          // 场景枚举必须与 lib/prompts.js 的 PROMPT_SCENES 保持一致（客户端是独立 bundle，不能 import）。
-          el("div", { className: "nwRow " + (state.systemPromptMode === "full" ? "nwRowOn" : "nwRowOff") },
-            el("div", { className: "nwRowText" },
-              el("div", { className: "nwRowLabel" }, t("panel.spScene")),
-              el("div", { className: "nwRowHint" }, t("panel.spSceneHint") + (state.systemPromptMode === "full" ? "" : " " + t("panel.spSceneInactive")))
             ),
-            el("div", { className: "nwSeg" },
-              ["general", "writing", "revising", "auditing", "setup"].map(function (s) {
-                var cur = state.promptScene || "general";
-                return el("button", { key: s, type: "button", className: "nwSegBtn" + (cur === s ? " nwSegBtnOn" : ""), disabled: state.loading,
-                  onClick: function () { if (cur !== s) props.toggle({ promptScene: s }); } }, t("sc." + s));
+            // v5.0.0：提示词场景——与上面的档位正交：档位决定"注入多少"，场景决定"注入什么"。
+            // v5.1.1 修正：**不再因为档位非 full 就把按钮 disabled**——用户反馈"场景里点不了其他选项"，
+            // 因为默认档位是 off/精简，五个按钮全灰且没有任何解释，等于把"选场景"锁死在一个看不见的前提后面。
+            // 现在按钮始终可点（只受 loading 限制），档位非 full 时改用行内提示说明"已保存但暂不注入"。
+            // 场景枚举必须与 lib/prompts.js 的 PROMPT_SCENES 保持一致（客户端是独立 bundle，不能 import）。
+            el("div", { className: "nwRow " + (state.systemPromptMode === "full" ? "nwRowOn" : "nwRowOff") },
+              el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, "🎛")),
+              el("div", { className: "nwRowText" },
+                el("div", { className: "nwRowLabel" }, t("panel.spScene")),
+                el("div", { className: "nwRowHint" }, t("panel.spSceneHint") + (state.systemPromptMode === "full" ? "" : " " + t("panel.spSceneInactive")))
+              ),
+              el(NW_UI.SegmentedControl, {
+                label: t("panel.spScene"),
+                value: state.promptScene || "general",
+                disabled: state.loading,
+                options: ["general", "writing", "revising", "auditing", "setup"].map(function (s) { return { value: s, label: t("sc." + s) }; }),
+                onChange: function (s) { if ((state.promptScene || "general") !== s) props.toggle({ promptScene: s }); }
               })
-            )
-          ),
-          // v5.0.0：精简工作流——全局开关，紧挨「提示词档位 / 提示词场景」两行之下、与相邻开关同一套 switch/badge 组件。
-          // 与上一条「提示词场景」的区别：它不受"仅完整档生效"限制（不给 disabled 逻辑），任何时候都可切换；
-          // 打开（true）= 提示词换"按需调用"最简档，关闭（false，默认）= 维持 5.0.0 的自检/收尾/复测清单。
-          el("div", { className: "nwRow " + (state.leanWorkflow ? "nwRowOn" : "nwRowOff") },
-            el("div", { className: "nwRowText" },
-              el("div", { className: "nwRowLabel" }, t("panel.leanWorkflow")),
-              el("div", { className: "nwRowHint" }, t("panel.leanWorkflowHint"))
             ),
-            el("div", { className: "nwSwitchWrap" },
-              el(Switch, { checked: state.leanWorkflow === true, disabled: state.loading, onChange: function (value) { props.toggle({ leanWorkflow: value }); } }),
-              el("span", { className: "nwBadge " + (state.leanWorkflow ? "nwBadgeOn" : "nwBadgeOff") }, state.leanWorkflow ? t("badge.on") : t("badge.off"))
-            )
+            (function () {
+              var rawOn = f.rawWriting === true;
+              return el("div", { className: "nwToolRow" + (rawOn ? " nwToolRowOn" : " nwToolRowRaw"), key: "rawWriting" },
+                el("div", { className: "nwIconSlot" }, el("span", { className: "nwIconGlyph" }, "⚠️")),
+                el("div", { className: "nwToolLabel" },
+                  el("div", { className: "nwToolLabelRaw" }, "🔞 " + t("feature.rawWriting")),
+                  el("div", { className: "nwToolDesc nwRawDanger" }, t("raw.danger")),
+                  rawOn ? el("div", { className: "nwRawOn" }, t("raw.on")) : null
+                ),
+                el(Switch, { checked: rawOn, disabled: state.loading, label: "🔞 " + t("feature.rawWriting"),
+                  onChange: function () { props.controller.rawToggle(!rawOn); } })
+              );
+            })(),
           ),
-          (function () {
-            var rawOn = f.rawWriting === true;
-            return el("div", { className: "nwToolRow" + (rawOn ? " nwToolRowOn" : " nwToolRowRaw"), key: "rawWriting" },
-              el("div", { className: "nwToolLabel" },
-                el("div", { className: "nwToolLabelRaw" }, "🔞 " + t("feature.rawWriting")),
-                el("div", { className: "nwToolDesc nwRawDanger" }, t("raw.danger")),
-                rawOn ? el("div", { className: "nwRawOn" }, t("raw.on")) : null
+          el("div", { className: "nwSection" },
+            el("div", { className: "nwKickerRow" },
+              el("div", { className: "nwKicker" }, t("panel.secStatus")),
+              el("div", { className: "nwKickerRule" })
+            ),
+            entry(t("panel.featuresTitle"), t("panel.featuresHint"), onFeatures, "features"),
+            entry(t("panel.toolsTitle"), t("panel.toolsHint"), onTools, "tools"),
+            // v3.2.0：原创模式（设定库）移到主面板
+            entry(t("panel.creationTitle"), t("panel.creationHint"), null, "creation"),
+            // v3.0.0：风格基线（六维 ±% 容差带）
+            entry(t("panel.baselineTitle"), t("panel.baselineHint"), null, "baseline"),
+            // v3.7.0：功能开关（情感深度/风格检测/语义增强）在二级「功能开关」页维护——主页不重复展示
+            // v2.6.0：数据目录占用 + 语义引擎状态（一目了然）
+            el("div", { className: "nwPillRow" },
+              el("div", { className: "nwPill" },
+                el("span", { className: "nwPillKey" }, t("dir.size")),
+                el("span", { className: "nwPillVal" }, formatSize(state.dataDirSize))
               ),
-              el("button", { type: "button", role: "switch", "aria-checked": rawOn ? "true" : "false", className: "nwSwitchSmall" + (rawOn ? " nwSwitchSmallOn" : ""), disabled: state.loading,
-                onClick: function () { props.controller.rawToggle(!rawOn); } },
-                el("span", { className: "nwSwitchSmallKnob" })
+              el("div", { className: "nwPill" },
+                el("span", { className: "nwPillKey" }, t("model.engine")),
+                el("span", { className: "nwPillVal" }, engineStatusText(state.embeddingStatus, t))
               )
-            );
-          })(),
-          entry(t("panel.featuresTitle"), t("panel.featuresHint"), onFeatures, "features"),
-          entry(t("panel.toolsTitle"), t("panel.toolsHint"), onTools, "tools"),
-          // v3.2.0：原创模式（设定库）移到主面板
-          entry(t("panel.creationTitle"), t("panel.creationHint"), null, "creation"),
-          // v3.0.0：风格基线（六维 ±% 容差带）
-          entry(t("panel.baselineTitle"), t("panel.baselineHint"), null, "baseline"),
-          // v3.7.0：功能开关（情感深度/风格检测/语义增强）在二级「功能开关」页维护——主页不重复展示
-          // v2.6.0：数据目录占用 + 语义引擎状态（一目了然）
-          el("div", { className: "nwRow nwRowOff" },
-            el("div", { className: "nwRowText" },
-              el("div", { className: "nwRowLabel" }, t("dir.size")),
-              el("div", { className: "nwRowHint" }, formatSize(state.dataDirSize) + " · " + engineStatusText(state.embeddingStatus, t))
-            )
+            ),
+            pathBox(t("dir.data"), dirs.dataDir || state.dataDir || "", "data-dir"),
+            // v4.3.0：state.file / dirs.stateFile 此前写了 4 处却从不读取——宿主 reveal 支持 state-file
+            //（lib/core.js allowedTargets 含 "state-file"），这里补一行路径卡把它用起来
+            pathBox(t("dir.stateFile"), dirs.stateFile || state.file || "", "state-file"),
           ),
-          pathBox(t("dir.data"), dirs.dataDir || state.dataDir || "", "data-dir"),
-          // v4.3.0：state.file / dirs.stateFile 此前写了 4 处却从不读取——宿主 reveal 支持 state-file
-          //（lib/core.js allowedTargets 含 "state-file"），这里补一行路径卡把它用起来
-          pathBox(t("dir.stateFile"), dirs.stateFile || state.file || "", "state-file"),
           // v3.2.0：书库统计（写作打卡）；null=未就绪不渲染，[]=真空提示
-          el("div", { key: "statsCard", style: { marginTop: "10px", padding: "10px 12px", borderRadius: "10px", border: "1px solid #e2e8f0", background: "#fff" } },
-            el("div", { style: { fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "📚 " + t("stats.title")),
+          el("div", { key: "statsCard", className: "nwBoxed", style: { marginTop: "10px", padding: "10px 12px" } },
+            el("div", { className: "nwGroupName", style: { marginBottom: "6px" } }, "📚 " + t("stats.title")),
             el("div", { style: { display: "flex", flexDirection: "column", gap: "5px" } },
               state.booksStats === null
-                ? el("div", { style: { fontSize: "11px", color: "#f59e0b" } }, t("stats.pending"))
+                ? el("div", { className: "nwNote nwNoteWarn",   }, t("stats.pending"))
                 : (state.booksStats || []).length === 0
-                ? el("div", { style: { fontSize: "11px", color: "#94a3b8" } }, t("stats.empty"))
+                ? el("div", { className: "nwNote",   }, t("stats.empty"))
                 : (state.booksStats || []).slice(0, 6).map(function (bs) {
                     var charsText = fmtChars(bs.chars);
-                    return el("div", { key: bs.name, style: { display: "flex", alignItems: "center", gap: "8px", fontSize: "11px" } },
-                      el("span", { style: { flex: "1", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "#334155" } }, "📕 " + bs.name),
-                      el("span", { style: { color: "#94a3b8" } }, bs.chapters + " " + t("stats.chapters") + " · " + charsText + t("stats.chars")),
+                    return el("div", { key: bs.name, className: "nwStatRow" },
+                      el("span", { className: "nwStatRow",   }, "📕 " + bs.name),
+                      el("span", { className: "nwStatName",   }, bs.chapters + " " + t("stats.chapters") + " · " + charsText + t("stats.chars")),
                       bs.recent7Chars > 0
-                        ? el("span", { style: { color: "#10b981", fontWeight: "600" } }, "🔥 " + fmtChars(bs.recent7Chars) + " " + t("stats.week"))
-                        : el("span", { style: { color: "#cbd5e1" } }, t("stats.idle"))
+                        ? el("span", { className: "nwNote nwNoteOk",   }, "🔥 " + fmtChars(bs.recent7Chars) + " " + t("stats.week"))
+                        : el("span", { className: "nwNote nwNoteDim",   }, t("stats.idle"))
                     );
                   })
             )
           ),
           // v3.2.0：报告历史入口
-          el("button", { key: "reportsEntry", type: "button", style: { display: "flex", alignItems: "center", width: "100%", marginTop: "8px", padding: "9px 12px", borderRadius: "10px", border: "1px solid #e2e8f0", background: "#fff", cursor: "pointer", textAlign: "left" }, onClick: function () {
+          el("button", { key: "reportsEntry", type: "button", className: "nwBoxed nwFileRow", style: { marginTop: "8px", padding: "9px 12px", textAlign: "left" }, onClick: function () {
             props.controller.set({ reportsGroups: null, reportContent: null }, { silent: true });
             // v4.3.0：超时 + 错误透传（reports.readFailDetail 已被具体错误取代，该词条随之删除）
             fetchWithTimeout("/api/dsh-novel-writer/reports", { headers: { accept: "application/json" } }).then(function (r2) {
@@ -1760,12 +2328,12 @@ var TOOL_GROUPS = [
             });
             props.controller.openView("reports");
           } },
-            el("span", { style: { flex: "1", fontSize: "13px", fontWeight: "600", color: "#334155" } }, "📊 " + t("reports.title")),
-            el("span", { style: { fontSize: "11px", color: "#94a3b8" } }, t("reports.hint")),
-            el("span", { style: { fontSize: "13px", color: "#94a3b8" } }, "›")
+            el("span", { className: "nwRowLabel", style: { flex: "1" } }, "📊 " + t("reports.title")),
+            el("span", { className: "nwNote",   }, t("reports.hint")),
+            el("span", { className: "nwNote nwChevron",   }, "›")
           ),
           // v3.2.0：体验演示
-          el("div", { key: "demoCard", style: { marginTop: "10px", padding: "10px 12px", borderRadius: "10px", border: "1px dashed #c7d2fe", background: "#f8f9ff" } },
+          el("div", { key: "demoCard", className: "nwDashedNote", style: { marginTop: "10px" } },
             el("button", { type: "button", disabled: state.demoLoading, style: { display: "flex", alignItems: "center", gap: "8px", width: "100%", background: "transparent", border: "none", padding: 0, cursor: state.demoLoading ? "default" : "pointer", textAlign: "left" }, onClick: function () {
               if (state.demoLoading) return;
               props.controller.set({ demoLoading: true }, { silent: true });
@@ -1783,10 +2351,10 @@ var TOOL_GROUPS = [
                 props.controller.set({ demoLoading: false }, { silent: true });
               });
             } },
-              el("span", { style: { fontSize: "13px", fontWeight: "600", color: "#6366f1" } }, state.demoLoading ? t("demo.loading") : t("demo.run")),
-              el("span", { style: { fontSize: "11px", color: "#94a3b8" } }, t("demo.hint"))
+              el("span", { className: "nwAccentStrong",   }, state.demoLoading ? t("demo.loading") : t("demo.run")),
+              el("span", { className: "nwNote",   }, t("demo.hint"))
             ),
-            state.demoReport ? el("pre", { style: { margin: "8px 0 0", padding: "10px", borderRadius: "8px", background: "#fff", border: "1px solid #e2e8f0", fontSize: "11px", lineHeight: "1.7", color: "#334155", whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: "260px", overflow: "auto" } }, state.demoReport) : null
+            state.demoReport ? el("pre", { className: "nwBoxed nwReportPre", style: { margin: "8px 0 0", maxHeight: "260px", overflow: "auto" } }, state.demoReport) : null
           )
         );
       }
@@ -1823,9 +2391,12 @@ var TOOL_GROUPS = [
           // v5.2.0：作为官方右栏 tab 时不画关闭按钮——关闭由宿主 tab chip 提供
           typeof props.onClose === "function" ? el("button", { type: "button", className: "nwClose", "aria-label": t("panel.close"), onClick: props.onClose }, "×") : null
         ),
-        el("div", { className: "nwBanner " + (on ? "nwBannerOn" : "nwBannerOff") },
-          el("span", { className: "nwBannerIcon" }, on ? "✔" : "✘"),
-          el("span", null, on ? t("banner.on") : t("banner.off"))
+        el("div", { className: "nwHero" },
+          el("div", { className: "nwBanner " + (on ? "nwBannerOn" : "nwBannerOff") },
+            el("span", { className: "nwBannerIcon" }, on ? "✔" : "✘"),
+            el("span", null, on ? t("banner.on") : t("banner.off"))
+          ),
+          el("div", { className: "nwHeroDesc" }, t("panel.heroDesc")),
         ),
         loadingHint,
         msg,
@@ -1844,43 +2415,17 @@ var TOOL_GROUPS = [
       var statusKey = state.enabled ? (state.autoAnalyze ? "card.status" : "card.statusAutoOff") : "card.statusOff";
       return react.createElement(
         "div",
-        { style: { padding: "12px 0", borderBottom: "1px solid var(--dsw-alias-border-l2, #e5e7eb)" } },
-        react.createElement("div", { style: { fontWeight: 600 } }, t("card.title")),
-        react.createElement("div", { style: { color: "var(--dsw-alias-text-l2, #888)", fontSize: 12, margin: "4px 0 8px" } }, t("card.desc")),
+        { className: "nwSettingsCard" },
+        react.createElement("div", { className: "nwSettingsCardTitle" }, t("card.title")),
+        react.createElement("div", { className: "nwMuted", style: { margin: "4px 0 8px" } }, t("card.desc")),
         react.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, marginTop: 4 } },
-          react.createElement(
-            "span",
-            {
-              style: {
-                display: "inline-flex", alignItems: "center", gap: 6,
-                fontSize: 12, fontWeight: 700, lineHeight: 1,
-                padding: "4px 10px", borderRadius: 999,
-                background: state.enabled ? "rgba(34,197,94,.14)" : "rgba(239,68,68,.10)",
-                color: state.enabled ? "#15803d" : "#b91c1c",
-                border: "1px solid " + (state.enabled ? "#22c55e" : "#ef4444")
-              }
-            },
-            react.createElement("span", null, state.enabled ? "●" : "○"),
-            react.createElement("span", null, t(statusKey))
-          ),
-          react.createElement(
-            "button",
-            {
-              type: "button",
-              style: {
-                appearance: "none", font: "inherit", cursor: "pointer",
-                border: "1px solid var(--dsw-alias-border-l2, #d1d5db)", borderRadius: 8,
-                background: "var(--dsw-alias-bg-layer-3, #fff)", color: "inherit",
-                padding: "5px 12px", fontSize: 12
-              },
-              onClick: function () {
-                if (typeof props.onOpenPanel === "function") props.onOpenPanel();
-              }
-            },
-            t("card.open")
-          )
+          react.createElement(NW_UI.Tag, { tone: state.enabled ? "success" : "danger" }, t(statusKey)),
+          react.createElement(NW_UI.Button, {
+            variant: "outline", size: "sm",
+            onClick: function () { if (typeof props.onOpenPanel === "function") props.onOpenPanel(); }
+          }, t("card.open"))
         ),
-        react.createElement("div", { style: { color: "var(--dsw-alias-text-l2, #888)", fontSize: 12, marginTop: 8 } }, t("card.hint"))
+        react.createElement("div", { className: "nwMuted", style: { marginTop: 8 } }, t("card.hint"))
       );
     }
     function mountPanel(controller, toggle) {