cardbuddy 0.9.0 → 0.10.0

package/dist/vendored/styles/app.css

@@ -115,7 +115,13 @@
   --code-fn: #d2a8ff;
   --code-var: #ffa657;
   --code-binding: #56d4dd;
-  --code-warn: #f59e0b;
+  /* === 变量类型标签配色（--type-*）：变量列表类型 chip 专用 === */
+  /* 暗色沿用代码高亮调色板，与代码区同类型字面量同色呼应 */
+  --type-string: var(--code-str);
+  --type-number: var(--code-num);
+  --type-boolean: var(--code-kw);
+  --type-array: var(--code-fn);
+  --type-object: var(--code-prop);
   /* === CardBuddy UI 尺寸与节奏规范手册 §四（单一来源，尺寸/节奏不随主题变）== */
   /* 间距 8 pt 网格 */
   --space-0: 0;
@@ -158,6 +164,11 @@
   --icon-lg: 20px;
   --icon-xl: 24px;
   --stroke: 1.75;
+  /* 发丝线粗细：页面里所有「分割线 / 单边分隔描边」的统一尺寸（dpr 自适应见下方媒体查询）。
+     普通屏 1px；dpr ≥ 2 时收到 0.5px（= 1 个物理像素），线条更锐利不发虚。
+     控件四边描边（border: 1px solid …）不算分割线，仍固定 1px 以保持控件视觉重量；
+     卡片内容组件（.ce_divider 等自动生成样式）与画布参考线（.ce-guide--*）同样不跟随。 */
+  --hairline: 1px;
   /* 阴影形状（颜色交给配色手册） */
   --shadow-1: 0 1px 2px var(--shadow-card);
   --shadow-2: 0 4px 12px var(--shadow-card);
@@ -177,74 +188,93 @@
   --z-toast-app:    2100;
 }
 
+/* dpr ≥ 2 → 发丝线收到半像素。(min-resolution: 2dppx) 与 devicePixelRatio >= 2 等价，
+   浏览器缩放、拖到不同密度屏幕时由浏览器自动重算，无需 JS 介入也不会有首帧闪动；
+   -webkit-min-device-pixel-ratio 兜住不认 resolution 的旧 Safari。 */
+@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
+  :root {
+    --hairline: 0.5px;
+  }
+}
+
 /* 浅色主题：以白色为基色调，复用同名变量整体切换。仅覆盖配色变量，布局不变。 */
 :root[data-theme='light'] {
-  --bg-app: #f4f5f7;
+  /* 中性阶梯统一走 Slate 蓝灰族（与《深浅主题配色规范手册》§〇.3 对齐）：
+     stage 最沉 → app → panel(白) → input/hover/soft 逐级提亮，避免旧值「中性脏灰 + 蓝灰边框」
+     两个灰族混用导致的发灰发脏；控件填充收到近白，白面板上不再糊灰块。 */
+  --bg-app: #f4f6fa;
   --bg-bar: #ffffff;
   --bg-panel: #ffffff;
-  --bg-stage: #e9ecf1;
-  --bg-input: #eef1f5;
-  --bg-hover: #e3e7ee;
-  --bg-active: #d6dbe4;
-  --bg-pop: rgba(255, 255, 255, 0.97);
-  --bg-soft: #e7ebf2;
-  --border: #d8dce3;
-  --border-strong: #c2c8d2;
-  --text: #1f2329;
-  --text-dim: #5b6472;
-  --text-faint: #8a93a3;
+  --bg-stage: #e9edf4;
+  --bg-input: #f6f8fb;
+  --bg-hover: #f1f4f9;
+  --bg-active: #e4e9f2;
+  --bg-pop: rgba(255, 255, 255, 0.98);
+  --bg-soft: #eef2f8;
+  --border: #e2e8f0;
+  --border-strong: #cbd5e1;
+  --text: #1e293b;
+  --text-dim: #475569;
+  /* faint 收到 slate-500/600 之间：白底 5.4:1、stage 底 4.6:1，11px 元信息不发虚也不糊
+     （旧 #8a93a3 白底仅 ~3.1:1） */
+  --text-faint: #5f6b7d;
   --accent: #4F6BF2;
   --accent-2: #3D57D9;
-  --accent-soft: rgba(79, 107, 242, 0.12);
-  --accent-border: rgba(79, 107, 242, 0.4);
+  --accent-soft: rgba(79, 107, 242, 0.1);
+  --accent-border: rgba(79, 107, 242, 0.35);
   --accent-hover: #3D57D9;
   --danger: #EF4444;
-  --danger-soft: rgba(239, 68, 68, 0.12);
+  --danger-soft: rgba(239, 68, 68, 0.1);
   --danger-hover: #DC2626;
   --warn: #F59E0B;
-  --warn-soft: rgba(245, 158, 11, 0.14);
+  --warn-soft: rgba(245, 158, 11, 0.12);
   --warn-border: rgba(245, 158, 11, 0.4);
   --warn-hover: #D97706;
   --on-warn: #0F1115;
   --ok: #10B981;
-  --ok-soft: rgba(16, 185, 129, 0.14);
+  --ok-soft: rgba(16, 185, 129, 0.12);
   --ok-border: rgba(16, 185, 129, 0.4);
-  --ok-strong: #166534;
-  --ok-solid: #166534;
+  /* 语义深色变体与各自基色同族：绿=emerald-700、琥珀=amber-700、红=red-700，
+     不再混用 GitHub green / brick red 等外来色相（白底对比均 ≥ 4.5:1） */
+  --ok-strong: #047857;
+  --ok-solid: #047857;
   --on-ok: #ffffff;
   --info: #4F6BF2;
-  --info-soft: rgba(79, 107, 242, 0.12);
-  --info-border: rgba(79, 107, 242, 0.4);
+  --info-soft: rgba(79, 107, 242, 0.1);
+  --info-border: rgba(79, 107, 242, 0.35);
   --on-accent: #ffffff;
   --radius: 8px;
   --radius-sm: 6px;
-  --shadow-pop: rgba(15, 23, 42, 0.16);
-  --shadow-card: rgba(15, 23, 42, 0.16);
-  --shadow-drawer: rgba(15, 23, 42, 0.14);
-  --shadow-toast: rgba(15, 23, 42, 0.12);
-  --scrim: rgba(15, 23, 42, 0.35);
-  --scrim-soft: rgba(15, 23, 42, 0.28);
+  /* 阴影收到手册量级（card 0.08~0.12）：旧 0.16 配 8~24px 模糊会在白底上糊出一圈灰雾 */
+  --shadow-pop: rgba(15, 23, 42, 0.14);
+  --shadow-card: rgba(15, 23, 42, 0.1);
+  --shadow-drawer: rgba(15, 23, 42, 0.12);
+  --shadow-toast: rgba(15, 23, 42, 0.1);
+  --scrim: rgba(15, 23, 42, 0.4);
+  --scrim-soft: rgba(15, 23, 42, 0.3);
   --scrim-faint: rgba(15, 23, 42, 0.22);
-  --bar-grad: linear-gradient(180deg, #ffffff, #f3f5f8);
-  --splitter: #5b6cff;
-  --splitter-grip: rgba(0, 0, 0, 0.16);
-  --overlay-tint: rgba(0, 0, 0, 0.03);
-  --overlay-tint-strong: rgba(0, 0, 0, 0.1);
-  --err-item-fg: #c0392b;
-  --api-item-fg: #2f4fb0;
-  --api-item-border: rgba(91, 108, 255, 0.25);
-  --api-item-bg: rgba(91, 108, 255, 0.06);
-  --copy-ok: #1a7f37;
-  --tag-ok-fg: #1a7f37;
-  --tag-ok-bg: rgba(26, 127, 55, 0.1);
-  --tag-warn-fg: #b58105;
-  --tag-warn-bg: rgba(181, 129, 5, 0.1);
-  --log-warn-fg: #9a6a00;
-  --log-warn-bg: rgba(181, 129, 5, 0.1);
-  --log-warn-border: rgba(181, 129, 5, 0.3);
-  --scroll-thumb: rgba(0, 0, 0, 0.2);
-  --scroll-thumb-hover: rgba(0, 0, 0, 0.32);
-  --scroll-thumb-idle: rgba(0, 0, 0, 0.1);
+  --bar-grad: linear-gradient(180deg, #ffffff, #f6f8fc);
+  /* 高亮 / 描边类半透明统一挂到主色 #4F6BF2（79,107,242）上，替换旧的电光蓝 #5b6cff（91,108,255），
+     与按钮 / 选中态同一色相，浅色下不再跳色 */
+  --splitter: #4F6BF2;
+  --splitter-grip: rgba(15, 23, 42, 0.18);
+  --overlay-tint: rgba(15, 23, 42, 0.03);
+  --overlay-tint-strong: rgba(15, 23, 42, 0.08);
+  --err-item-fg: #b91c1c;
+  --api-item-fg: #3d57d9;
+  --api-item-border: rgba(79, 107, 242, 0.22);
+  --api-item-bg: rgba(79, 107, 242, 0.06);
+  --copy-ok: #047857;
+  --tag-ok-fg: #047857;
+  --tag-ok-bg: rgba(16, 185, 129, 0.1);
+  --tag-warn-fg: #b45309;
+  --tag-warn-bg: rgba(245, 158, 11, 0.1);
+  --log-warn-fg: #b45309;
+  --log-warn-bg: rgba(245, 158, 11, 0.1);
+  --log-warn-border: rgba(245, 158, 11, 0.35);
+  --scroll-thumb: rgba(15, 23, 42, 0.16);
+  --scroll-thumb-hover: rgba(15, 23, 42, 0.28);
+  --scroll-thumb-idle: rgba(15, 23, 42, 0.08);
   /* 语法高亮配色：浅色主题参考 GitHub Light / VSCode Light+，保证白底上的可读性 */
   --jt-key: #953800;
   --jt-string: #0a3069;
@@ -252,15 +282,15 @@
   --jt-boolean: #cf222e;
   --jt-null: #57606a;
   --jt-faint: #6b7280;
-  --jt-ring: rgba(91, 108, 255, 0.3);
+  --jt-ring: rgba(79, 107, 242, 0.28);
   --jt-del-fg: #cf222e;
   --jt-del-bg: rgba(207, 34, 46, 0.12);
-  --jt-add-bg: rgba(91, 108, 255, 0.12);
-  --st-label: #24292f;
+  --jt-add-bg: rgba(79, 107, 242, 0.1);
+  --st-label: #1e293b;
   --st-id: #64748b;
   --st-badge-bg: #4F6BF2;
   --st-badge-fg: #ffffff;
-  --st-hl-bg: rgba(79, 107, 242, 0.16);
+  --st-hl-bg: rgba(79, 107, 242, 0.14);
   --code-comment: #6e7781;
   --code-punc: #6e7781;
   --code-prop: #953800;
@@ -270,7 +300,13 @@
   --code-fn: #8250df;
   --code-var: #953800;
   --code-binding: #0d9488;
-  --code-warn: #b58105;
+  /* 类型 chip 专用色在亮色下单独校正（不影响代码高亮 --code-*）：
+     - string：--code-str 藏青与 --code-num 蓝同属蓝调易混，改走绿系；
+     - boolean / array：--code-kw 红、--code-fn 紫在 10px 小字上对比不足 AA(4.5:1)，各压深一档；
+     - number / object 亮色下已达标，继续复用 --code-*。 */
+  --type-string: #116329;
+  --type-boolean: #a40e26;
+  --type-array: #6639ba;
 }
 
 * {
@@ -366,7 +402,7 @@ body {
   padding: 0 16px;
   height: 48px;
   background: var(--bar-grad);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
   flex: 0 0 auto;
 }
 .app__logo {
@@ -421,7 +457,11 @@ body {
 }
 .app__btn--icon {
   height: var(--ctrl-md);
-  padding: 0 8px;
+  /* 纯图标按钮（无文字）视觉取正方：宽随 aspect-ratio 跟高度走、图标居中，
+     不再出现 33×28 这类扁矩形；顶栏覆写高度为 --ctrl-sm 后仍自动保持正方 */
+  aspect-ratio: 1;
+  padding: 0;
+  justify-content: center;
 }
 /* 开关型图标按钮的「开启」态（如右侧接口调用面板开关）：用主题色标示当前已展开 */
 .app__btn--active {
@@ -533,43 +573,11 @@ body {
   background: var(--accent);
   color: var(--on-accent);
   border-color: var(--accent);
-  /* box-shadow: 0 0 0 2px var(--accent-soft); */
 }
 .app__btn--history-save.is-dirty:not(:disabled):hover {
   background: var(--accent-2);
   border-color: var(--accent-2);
 }
-/* 发布按钮（写回 FinMall 前的发布动作），与本地保存/远端分组区分 */
-.app__btn--publish {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  height: var(--ctrl-md);
-  padding: 0 12px;
-  color: var(--info);
-  border-color: var(--info-border);
-  background: var(--info-soft);
-}
-.app__btn--publish:hover:not(:disabled) {
-  background: var(--info);
-  color: var(--on-accent);
-  border-color: var(--info);
-}
-.app__btn--publish:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-/* 已保存但读回校验不符：橙色警示，提示「交易成功但内容未落库」 */
-.app__btn--publish.app__btn--warn {
-  color: var(--warn);
-  border-color: var(--warn-border);
-  background: var(--warn-soft);
-}
-.app__btn--publish.app__btn--warn:hover:not(:disabled) {
-  background: var(--warn);
-  color: var(--on-accent);
-  border-color: var(--warn);
-}
 .app__bar-actions {
   margin-left: auto;          /* 把这一组推到顶栏最右侧 */
   display: flex;
@@ -610,54 +618,90 @@ body {
   color: var(--danger);
   border-color: var(--danger);
 }
-.app__btn--sm {
-  padding: 4px 10px;
-  font-size: 12px;
+/* 设置浮层：与全应用轻量浮层同一语言——--bg-panel 实底、发丝线分栏头、--radius-lg 圆角、
+   --shadow-3 投影；锚定顶栏「连接」按钮下方，进出场复用统一 pop 弹性动画（缩放原点右上）。 */
+.app__dev-svc-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
 }
 .app__dev-svc-panel {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
-  z-index: var(--z-overlay-low);
-  width: 320px;
-  padding: 16px;
-  background: var(--bg-soft, #20242b);
-  border: 1px solid var(--border, #2b3038);
-  border-radius: var(--radius-xl);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
-  color: var(--text, #e6e9ef);
+  z-index: var(--z-pop);
+  width: 300px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+  color: var(--text);
   text-align: left;
+  overflow: hidden;
+  transform-origin: top right;
+}
+.app__dev-svc-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 8px 7px 12px;
+  border-bottom: var(--hairline) solid var(--border);
 }
 .app__dev-svc-title {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
-  margin-bottom: 10px;
+  color: var(--text);
+}
+/* 头部关闭按钮：与节点面板 / 组件面板关闭按钮同规格（22px 弱按钮） */
+.app__dev-svc-close {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  color: var(--text-faint);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.app__dev-svc-close::before {
+  content: '✕';
+}
+.app__dev-svc-close:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.app__dev-svc-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
 }
 .app__dev-svc-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 4px;
-  margin-bottom: 10px;
-  font-size: 12px;
-  color: var(--text-dim, #9aa3b2);
+  gap: 8px;
+  font-size: 11px;
+  color: var(--text-dim);
 }
 .app__dev-svc-row--col {
   flex-direction: column;
   align-items: stretch;
+  gap: 6px;
 }
-.app__dev-svc-row--col > span {
-  margin-bottom: 4px;
-}
-/* 与节点编辑面板 setter（setters.css .st-input / .st-textarea）保持完全一致：
-   --bg-input 底色、--border 边框、5px 圆角、focus 切 --accent-border 边框 + --accent-soft 光环。 */
+/* 输入框与节点属性面板输入家族同规格：28px 高、--bg-input 底、focus 主色描边 + 光环 */
 .app__dev-svc-row input[type='text'],
-.app__dev-svc-row input[type='password'],
-.app__dev-svc-row textarea {
+.app__dev-svc-row input[type='password'] {
   width: 100%;
   min-width: 0;
-  height: var(--ctrl-md);
-  padding: 0 12px;
+  height: var(--ctrl-sm);
+  padding: 0 10px;
   background: var(--bg-input);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -667,45 +711,38 @@ body {
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
-.app__dev-svc-row textarea {
-  height: auto;
-  min-height: 84px;
-  padding: 6px 8px;
-  line-height: 1.5;
-  resize: none;
-}
 .app__dev-svc-row input[type='text']:focus,
-.app__dev-svc-row input[type='password']:focus,
-.app__dev-svc-row textarea:focus {
+.app__dev-svc-row input[type='password']:focus {
   border-color: var(--accent-border);
   box-shadow: 0 0 0 2px var(--accent-soft);
 }
-.app__dev-svc-row input::placeholder,
-.app__dev-svc-row textarea::placeholder {
+.app__dev-svc-row input::placeholder {
   color: var(--text-faint);
 }
 .app__dev-svc-row .switch {
   flex: 0 0 auto;
 }
+/* 未生效提示：琥珀色软底注记块，替代裸文字，警告语义一眼可辨 */
+.app__dev-svc-hint {
+  margin: 0;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--warn-soft);
+  color: var(--warn);
+  font-size: 11px;
+  line-height: 1.55;
+}
 .app__dev-svc-actions {
   display: flex;
   gap: 8px;
-  margin-top: 4px;
   justify-content: flex-end;
 }
-.app__dev-svc-hint {
-  margin: 8px 0 0;
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--warn, #e0a23a);
-}
 /* 部署态未配置本地服务：顶部提示条 */
 .app__nosvc-banner {
   padding: 8px 14px;
   font-size: 13px;
   color: var(--warn, #e0a23a);
   background: var(--warn-soft, rgba(224, 162, 58, 0.12));
-  /* border-bottom: 1px solid var(--warn-border, rgba(224, 162, 58, 0.35)); */
 }
 /* 「已断开」提示条：红色（连接彻底失败 / 服务已停止），区别于未配置的琥珀色 */
 .app__nosvc-banner--disconnected {
@@ -877,6 +914,45 @@ body {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
 }
+/* 校验通过：徽标局部庆祝动画 */
+.app__badge.is-celebrating { animation: app-badge-pop 0.5s ease; }
+@keyframes app-badge-pop {
+  0% { transform: scale(1); }
+  35% { transform: scale(1.18); }
+  100% { transform: scale(1); }
+}
+.app__confetti {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+}
+.app__confetti-bit {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 0;
+  /* 玻璃刻面：一角亮白高光 → 主色 → 暗刻面，半透明；clip-path 裁出尖锐碎片 */
+  background: linear-gradient(135deg,
+    rgba(255, 255, 255, 0.95) 0%,
+    var(--c, #52c41a) 42%,
+    color-mix(in srgb, var(--c, #52c41a) 62%, #000) 100%);
+  clip-path: var(--clip, polygon(50% 0%, 0% 100%, 100% 100%));
+  opacity: var(--o, 0.9);
+  transform: translate(-50%, -50%);
+  animation: app-confetti-fly 0.7s ease-out forwards;
+  /* 细微暗边，让半透明玻璃在浅色顶栏上也立得住 */
+  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.18));
+}
+@keyframes app-confetti-fly {
+  0% {
+    opacity: var(--o, 0.9);
+    transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px))) rotate(0deg) scale(0.4);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(calc(-50% + var(--sx, 0px) + var(--tx)), calc(-50% + var(--sy, 0px) + var(--ty))) rotate(var(--rot)) scale(1);
+  }
+}
 .app__icon {
   width: 15px;
   height: 15px;
@@ -906,6 +982,7 @@ body {
   flex-direction: column;
   min-width: 0;
   min-height: 0;
+  border-left: var(--hairline) solid var(--border);
 }
 .workside__bar {
   flex: 0 0 auto;
@@ -951,7 +1028,7 @@ body {
   justify-content: center;
   overflow: hidden;
 }
-/* 画布层：直接按实际列宽/列高布局（width/height 100% 填满外框），不再使用 transform 缩放；内部 device-bar 固定高、phone-viewport 弹性填充 */
+/* 画布层：直接按实际列宽/列高布局（width/height 100% 填满外框），不再使用 transform 缩放；内部 canvas-bar 固定高、phone-viewport 弹性填充 */
 .phone__scaler {
   position: relative;
   width: 100%;
@@ -1002,70 +1079,125 @@ body {
   cursor: col-resize !important;
 }
 
-/* 设备工具条（类 Chrome DevTools 设备模式顶部预留的细条）：
-   与手机框等宽、紧贴其上，通过下拉选择画布背景 */
-.device-bar {
+/* 画布工具条：原 device-bar（顶 28px）与 preview-statusbar（底 28px）合并为一条 32px——
+   把 28px 竖向空间还给手机视口，也消除「顶条 bg-bar / 底条透明」两种底色并存的割裂感。
+   视觉语法与全局状态栏同源：透明底融入舞台（--bg-stage），仅一条发丝线收边；
+   控件为 ghost chip（hover / 展开出 --bg-hover），读数等宽 + tabular-nums 不跳宽。
+   左组 = 改变画布（背景 / 宽度预设），右组 = 画布现状与动作（尺寸读数 / 刷新）。 */
+.canvas-bar {
   flex: 0 0 auto;
   width: 100%;
-  height: 28px;
+  height: 32px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0 12px;
-  background: var(--bg-bar);
-  border-bottom: 1px solid var(--border);
+  gap: 4px;
+  padding: 0 8px;
+  border-bottom: var(--hairline) solid var(--border);
 }
-/* 背景下拉框由 Dropdown 组件统一渲染（.dd 体系），无边框模式见 dropdown.css 的 .dd--borderless */
-.device-bar__spacer {
+.canvas-bar__spacer {
   flex: 1 1 auto;
 }
-.device-bar__info {
+/* chip：两个 Dropdown 的 slot 触发器统一外观（24px 高 / 5px 圆角 / hover 出底） */
+.canvas-bar__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 5px;
+  color: var(--text-dim);
+  font-size: 11.5px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.canvas-bar__chip:hover,
+.dd--open > .dd__trigger--slot .canvas-bar__chip {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.canvas-bar__chev {
+  width: 10px;
+  height: 10px;
+  color: var(--text-faint);
+}
+.canvas-bar__icn {
+  flex: 0 0 auto;
+  width: 13px;
+  height: 13px;
+  color: var(--text-faint);
+}
+/* 背景小样：与 .phone__screen--bg-* 同色，触发器上直接可见当前模式，不必展开下拉 */
+.canvas-bar__swatch {
+  flex: 0 0 auto;
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  border: 1px solid var(--border-strong);
+}
+.canvas-bar__swatch--white {
+  background: #ffffff;
+}
+.canvas-bar__swatch--gray {
+  background: #f0f0f0;
+}
+/* 近黑而非纯 #000：留出一点灰阶，深色卡片边缘与阴影仍能分辨 */
+.canvas-bar__swatch--black {
+  background: #1c1c1e;
+}
+.canvas-bar__swatch--checker {
+  background-color: #ffffff;
+  background-image:
+    linear-gradient(45deg, #cfcfcf 25%, transparent 25%, transparent 75%, #cfcfcf 75%),
+    linear-gradient(45deg, #cfcfcf 25%, transparent 25%, transparent 75%, #cfcfcf 75%);
+  background-size: 6px 6px;
+  background-position: 0 0, 3px 3px;
+}
+/* 尺寸读数：等宽 + tabular-nums，拖拽分隔条改宽时数字不跳宽 */
+.canvas-bar__size {
+  padding: 0 4px;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
   color: var(--text-faint);
-  font-size: 12px;
   white-space: nowrap;
 }
-/* 底部状态条刷新按钮：仅图标、与左侧尺寸文本上下对齐（同高 28px / 居中） */
-.statusbar__refresh {
+.canvas-bar__iconbtn {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: transparent;
   color: var(--text-faint);
   border: none;
-  border-radius: 6px;
+  border-radius: 5px;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, transform 0.05s;
+  transition: background 0.15s, color 0.15s;
 }
-.statusbar__refresh:hover:not(:disabled) {
+.canvas-bar__iconbtn:hover:not(:disabled) {
+  background: var(--bg-hover);
   color: var(--accent);
 }
-.statusbar__refresh:active:not(:disabled) {
-  transform: translateY(1px);
-}
-.statusbar__refresh:disabled {
+.canvas-bar__iconbtn:disabled {
   opacity: 0.4;
   cursor: default;
 }
-.device-bar__label {
-  color: var(--text-faint);
-  font-size: 12px;
-  white-space: nowrap;
+/* 刷新中图标自转：把「点了没反应」的空白等待变成可见反馈 */
+.canvas-bar__iconbtn.is-loading svg {
+  animation: canvas-bar-spin 0.8s linear infinite;
 }
-/* 预览区底部状态条：画布尺寸读数 + 刷新按钮。
-   底色透明（融入手机框 --bg-stage），不再作为独立暗面板——消除其与全局 .statusbar
-   （bg-bar）因所处父容器底色不同而产生的“颜色细微差异”观感；仅保留 1px 分隔线作页脚边界。 */
-.preview-statusbar {
-  flex: 0 0 auto;
-  width: 100%;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 12px;
-  background: transparent;
-  border-top: 1px solid var(--border);
+@keyframes canvas-bar-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* 窄列（预览列 < 300px，含 188 预设）：收起尺寸读数与 chip 文案只留图标，保证单行不挤 */
+.canvas-bar--tight .canvas-bar__size,
+.canvas-bar--tight .canvas-bar__txt {
+  display: none;
 }
 /* 预览区底部状态条：本地开发服务连接状态（连接图标 + 状态文案）。
    配色复用顶栏「连接」按钮的语义色类（app__btn--connected / --reconnecting / --disconnected / --warn），
@@ -1087,13 +1219,22 @@ body {
   border: none;
   padding: 0 10px;
 }
-.statusbar .app__btn--connected { color: var(--ok); }
 .statusbar .app__btn--reconnecting { color: var(--warn); }
 .statusbar .app__btn--disconnected { color: var(--danger); }
 .statusbar .app__btn--warn { color: var(--warn); }
+/* 连接成功回落状态栏默认色（铁律：仅 warn / danger 着语义色）；顶栏「连接」按钮的绿色不受影响。
+   hover 同statusbar 读数语言：极淡底色 + 提亮文字，不引入 ok 语义色。 */
+.statusbar .app__btn--connected {
+  color: var(--text-dim);
+}
+.statusbar .app__btn--connected:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text);
+  border-color: transparent;
+}
 /* 连接指示器现为可点按钮（开合底部「服务日志」面板）：保持状态栏读数观感
-   （无边框 / 无圆角 / 语义色由 app__btn--* 提供），hover 仅加极淡底色提示可点，
-   展开态用 accent 底线标识（与 .statusbar__item--prob.is-open 同一语言，不抢语义色）。 */
+   （无边框 / 无圆角、不设选中态），hover 仅加极淡底色提示可点。
+   配色同状态栏铁律：仅重连（warn）/ 断开（danger）/ 未配置（warn）着语义色，连接成功用默认色。 */
 button.statusbar__conn {
   cursor: pointer;
   font: inherit;
@@ -1101,10 +1242,6 @@ button.statusbar__conn {
 .statusbar__conn:hover {
   background: var(--bg-hover);
 }
-.statusbar__conn.is-open {
-  background: var(--bg-hover);
-  box-shadow: inset 0 -2px 0 0 var(--accent);
-}
 
 /* 颜色选择器（@ckpack/vue-color Sketch）预设区顶部分隔线：与系统边框色保持一致，
    覆盖组件默认的 1px solid #eee（深色主题下刺眼）。组件样式为全局注入且非 scoped，
@@ -1151,6 +1288,9 @@ button.statusbar__conn {
 .phone__screen--bg-gray {
   background: #f0f0f0;
 }
+.phone__screen--bg-black {
+  background: #1c1c1e;
+}
 .phone__screen::-webkit-scrollbar {
   display: none; /* WebKit：隐藏滚动条（仍可滚动） */
 }
@@ -1203,7 +1343,6 @@ button.statusbar__conn {
   /* 中栏最小宽度：不得小于三分之一屏幕宽度（与中右分隔条 startApiDrag 的夹取一致） */
   min-width: 33.333vw;
   background: var(--bg-panel);
-  border-left: 1px solid var(--border);
 }
 
 /* 右侧常驻「接口调用」面板：默认 360px 宽，可经中右分隔条拖拽调节（最小 320px，
@@ -1217,7 +1356,7 @@ button.statusbar__conn {
   flex-direction: column;
   min-height: 0;
   background: var(--bg-panel);
-  border-left: 1px solid var(--border);
+  border-left: var(--hairline) solid var(--border);
 }
 .apipanel__head {
   flex: 0 0 auto;
@@ -1227,7 +1366,7 @@ button.statusbar__conn {
   /* 与调试面板 tab 条同高（12px 上下 padding + 13px 字号 ≈ 42px），保证三条栏顶线对齐 */
   height: 40px;
   padding: 0 12px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
 }
 .apipanel__title {
   font-size: 13px;
@@ -1306,7 +1445,7 @@ button.statusbar__conn {
 }
 .debug__tabs {
   display: flex;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
 }
 .debug__tab {
   flex: 1;
@@ -1317,7 +1456,6 @@ button.statusbar__conn {
   color: var(--text-dim);
   font-size: 13px;
   cursor: pointer;
-  /* border-bottom: 2px solid transparent; */
   transition: color 0.15s;
   position: relative;
 }
@@ -1326,7 +1464,6 @@ button.statusbar__conn {
 }
 .debug__tab--active {
   color: var(--accent);
-  /* border-bottom-color: var(--accent); */
 
   &::after {
     content: '';
@@ -1352,7 +1489,6 @@ button.statusbar__conn {
   position: relative;
   flex: 1 1 auto;
   overflow: auto;
-  /* padding: 12px 16px; */
 }
 .debug__meta {
   margin: 0;
@@ -1411,7 +1547,7 @@ button.statusbar__conn {
   margin: auto -12px 0;
   padding: 10px 12px;
   background: var(--bg-panel);
-  border-top: 1px solid var(--border);
+  border-top: var(--hairline) solid var(--border);
   color: var(--text-faint);
   font-size: 12px;
   line-height: 1.6;
@@ -1432,7 +1568,7 @@ button.statusbar__conn {
   /* hidden 避免面板自身出现滚动条（滚动交给 .statepanel__tree） */
   overflow: hidden;
   background: var(--bg-panel);
-  border-top: 1px solid var(--border-strong);
+  border-top: var(--hairline) solid var(--border-strong);
 }
 .statepanel__head {
   flex: 0 0 auto;
@@ -1441,7 +1577,7 @@ button.statusbar__conn {
   gap: 8px;
   height: var(--ctrl-lg);
   padding: 0 12px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
   font-size: 13px;
   color: var(--text);
 }
@@ -1514,11 +1650,6 @@ button.statusbar__conn {
   padding: 8px 12px 10px;
 }
 
-/* 状态栏「运行态」指示器：复用问题/事件指示器的统一语言（无边框/无圆角/无 hover 背景块）。
-   展开时仅文字着 accent 色，与 is-log 一致，作为「面板已打开」的轻量提示。 */
-.statusbar__item--prob.is-open {
-  color: var(--accent);
-}
 .debug__tag {
   display: inline-block;
   padding: 1px 8px;
@@ -1563,7 +1694,7 @@ button.statusbar__conn {
   border-radius: 0;
   /* 左侧红条标示错误归属；行底透明避免整片红块，hover 才整行染 danger 色 */
   border-left: 2px solid var(--danger);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
   background: transparent;
   color: var(--err-item-fg);
   font-size: 11px;
@@ -1609,12 +1740,6 @@ button.statusbar__conn {
   font-weight: 600;
   opacity: 0.85;
 }
-.debug__pre {
-  margin: 4px 0 0;
-  white-space: pre-wrap;
-  font-size: 11px;
-  color: var(--text-dim);
-}
 
 /* 接口调用条目：方法名 + 最右侧复制图标 */
 .debug__api-row {
@@ -1712,40 +1837,28 @@ button.statusbar__conn {
 }
 .apt__children {
   padding-left: 16px;
-  border-left: 1px solid var(--border);
+  border-left: var(--hairline) solid var(--border);
   margin-left: 4px;
 }
 .apt__close {
   padding: 1px 4px 1px 20px;
   color: var(--text-faint);
 }
-.debug__scope {
-  margin: 0;
-  font-size: 11px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  color: var(--text-dim);
-}
 
-/* 数据绑定：JSON 树 + 底部操作按钮
+/* 变量 mock 二级视图 / 运行态：JSON 内容区 + 底部操作按钮
    容器铺满调试面板主体（绝对定位贴合 body 内边距区域），内部用 flex 列布局，
    JSON 树占据剩余空间并可独立滚动，底部操作按钮始终钉在底部——
    数据较少时不再上浮，数据较多时树内部滚动而按钮不随之移动。 */
 .debug__scope-wrap {
   position: absolute;
   /* right:0 让 JSON 树滚动条紧贴面板最右边（与其他 tab 用 body padding 作
-     16px 滚动框不同，本 tab 滚动交给内部 .debug__scope-tree，需要贴边）；
+     16px 滚动框不同，本 tab 滚动交给内部 .debug__scope-raw，需要贴边）；
      left:16px 与 body 的 16px 内边距对齐，让树内容左缘与其他 tab 一致。 */
   inset: 0;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
-.debug__scope-tree {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-}
 .debug__scope-foot {
   position: absolute;
   bottom: 10px;
@@ -1759,7 +1872,8 @@ button.statusbar__conn {
   background: var(--bg-bar);
   border: 1px solid var(--border);
   border-radius: 10px;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
+  /* 阴影走 token：深色 0.28 不变，浅色收到 0.10，白底上不再糊一团灰雾 */
+  box-shadow: 0 6px 18px var(--shadow-toast);
 }
 .debug__copied {
   margin: 0 4px 0 8px;
@@ -1805,13 +1919,13 @@ button.statusbar__conn {
 }
 /* 按钮分组间的竖向分隔线 */
 .debug__sep {
-  width: 1px;
+  width: var(--hairline);
   height: 16px;
   margin: 0 2px;
   background: var(--border-strong);
 }
 
-/* 数据绑定 Raw 模式：直接复用 .debug__scope-wrap 的绝对定位盒（inset 已占满 body 内容区），
+/* 变量 mock 的 Raw JSON 编辑器：直接复用 .debug__scope-wrap 的绝对定位盒（inset 已占满 body 内容区），
    不再额外设 height:100%——否则 top/inset 的 bottom 与 height 冲突，盒子会比内容区高 10px，
    底部「应用/取消」按钮被挤出可视区、需滚动才见。这里仅保留 flex 列布局语义：
    编辑器占剩余空间并内部滚动，底部操作按钮始终钉在底部。 */
@@ -1833,8 +1947,6 @@ button.statusbar__conn {
   padding: 12px 14px;
   background: var(--bg-input);
   color: var(--text);
-  /* border: 1px solid var(--border-strong); */
-  /* border-radius: 8px; */
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
   line-height: 1.6;
@@ -1843,34 +1955,383 @@ button.statusbar__conn {
   overflow: auto;
   outline: none;
 }
-/* .debug__raw-editor:focus {
-  border-color: var(--accent-border);
-} */
-/* CodeJar 托管的原始 JSON 编辑器：Prism(json) 语法高亮配色（与 SetCode 暗色面板一致） */
+/* CodeJar 托管的 JSON 编辑器（mock Raw 视图 + 变量弹窗默认值代码区）：
+   Prism(json) 语法高亮配色（与 SetCode 暗色面板一致） */
 .debug__raw-editor .token.property,
 .debug__raw-editor .token.tag,
 .debug__raw-editor .token.boolean,
 .debug__raw-editor .token.number,
 .debug__raw-editor .token.constant,
-.debug__raw-editor .token.symbol { color: var(--code-prop); }
+.debug__raw-editor .token.symbol,
+.vars-dlg__code .token.property,
+.vars-dlg__code .token.tag,
+.vars-dlg__code .token.boolean,
+.vars-dlg__code .token.number,
+.vars-dlg__code .token.constant,
+.vars-dlg__code .token.symbol { color: var(--code-prop); }
 .debug__raw-editor .token.selector,
 .debug__raw-editor .token.attr-name,
 .debug__raw-editor .token.string,
 .debug__raw-editor .token.char,
-.debug__raw-editor .token.builtin { color: var(--code-str); }
+.debug__raw-editor .token.builtin,
+.vars-dlg__code .token.selector,
+.vars-dlg__code .token.attr-name,
+.vars-dlg__code .token.string,
+.vars-dlg__code .token.char,
+.vars-dlg__code .token.builtin { color: var(--code-str); }
 .debug__raw-editor .token.operator,
 .debug__raw-editor .token.entity,
-.debug__raw-editor .token.url { color: var(--code-num); }
-.debug__raw-editor .token.punctuation { color: var(--code-punc); }
+.debug__raw-editor .token.url,
+.vars-dlg__code .token.operator,
+.vars-dlg__code .token.entity,
+.vars-dlg__code .token.url { color: var(--code-num); }
+.debug__raw-editor .token.punctuation,
+.vars-dlg__code .token.punctuation { color: var(--code-punc); }
 .debug__raw-editor .token.keyword,
-.debug__raw-editor .token.null { color: var(--code-kw); }
+.debug__raw-editor .token.null,
+.vars-dlg__code .token.keyword,
+.vars-dlg__code .token.null { color: var(--code-kw); }
 .debug__raw-editor .token.function,
-.debug__raw-editor .token.class-name { color: var(--code-fn); }
-.debug__raw-err {
+.debug__raw-editor .token.class-name,
+.vars-dlg__code .token.function,
+.vars-dlg__code .token.class-name { color: var(--code-fn); }
+/* mock 编辑器报错提示条：与顶部提示条（.app__nosvc-banner）同语言 ——
+   语义色软底通栏 + 图标 + 关闭钮；置于编辑器顶部，不挤占编辑区滚动 */
+.raw-err-bar {
   flex: 0 0 auto;
-  margin: 6px 0 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  /* 比顶部提示条小一号：面板内嵌条，不抢编辑区视觉 */
+  padding: 4px 10px;
+  color: var(--danger, #ef4444);
+  background: var(--danger-soft, rgba(239, 68, 68, 0.12));
+  font-size: 11px;
+  line-height: 1.5;
+}
+.raw-err-bar__icn {
+  flex: 0 0 12px;
+  width: 12px;
+  height: 12px;
+}
+.raw-err-bar__msg {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.raw-err-bar__close {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  opacity: 0.7;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  transition: opacity 0.12s;
+}
+.raw-err-bar__close:hover {
+  opacity: 1;
+}
+
+/* ===== 变量管理（原「绑定数据」tab）=====
+   列表视图管理 schema.dictionary.inputParams；mock 编辑收进二级视图。
+   行内信息密度优先：key 等宽 + 类型芯片 + mock 徽标 + 中文名/描述弱化，操作 hover 浮现。 */
+.vars {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  /* 右下角悬浮操作组的定位锚 */
+  position: relative;
+}
+.vars__list {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  /* 底部留出悬浮操作组的高度，末行不被遮 */
+  padding: 8px 8px 52px;
+  list-style: none;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.vars__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 6px;
+  transition: background 0.12s;
+  /* 双击编辑：禁止双击选中文本造成视觉噪声 */
+  user-select: none;
+}
+.vars__row:hover {
+  background: var(--bg-hover);
+}
+.vars__key {
+  flex: 0 0 auto;
+  max-width: 46%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--text);
+}
+.vars__type {
+  flex: 0 0 auto;
+  padding: 1px 6px;
+  border-radius: var(--radius-pill);
+  background: var(--bg-active);
+  color: var(--text-dim);
+  font-size: 10px;
+  line-height: 1.5;
+}
+/* 类型标签按类型分浅色：色相取自 --type-*（暗色等同代码高亮调色板，亮色单独校正
+   string 为绿系，避免与 number 蓝调撞色）；软底用 color-mix 取低透明度，文字保持
+   高对比可读。五色：string 绿 / number 蓝 / boolean 红 / array 紫 / object 橙。 */
+.vars__type--string {
+  color: var(--type-string);
+  background: color-mix(in srgb, var(--type-string) 14%, transparent);
+}
+.vars__type--number {
+  color: var(--type-number);
+  background: color-mix(in srgb, var(--type-number) 14%, transparent);
+}
+.vars__type--boolean {
+  color: var(--type-boolean);
+  background: color-mix(in srgb, var(--type-boolean) 14%, transparent);
+}
+.vars__type--array {
+  color: var(--type-array);
+  background: color-mix(in srgb, var(--type-array) 14%, transparent);
+}
+.vars__type--object {
+  color: var(--type-object);
+  background: color-mix(in srgb, var(--type-object) 14%, transparent);
+}
+/* mock 徽标：与运营平台变量列表的 m 标记同语义（已配置 mock 默认值） */
+.vars__mock {
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--warn-soft);
+  color: var(--warn);
+  font-size: 9px;
+  line-height: 1;
+}
+.vars__name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-faint);
+  font-size: 11px;
+}
+/* 行内操作：常占位、仅淡入淡出 —— 用 display 切换会挤动 key/name 造成 hover 跳动 */
+.vars__ops {
+  flex: 0 0 auto;
+  display: inline-flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.vars__row:hover .vars__ops,
+.vars__row:focus-within .vars__ops {
+  opacity: 1;
+}
+.vars__op {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  color: var(--text-faint);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.vars__op svg {
+  width: 13px;
+  height: 13px;
+  display: block;
+}
+.vars__op:hover {
+  background: var(--bg-active);
+  color: var(--text);
+}
+.vars__op--del:hover {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+/* 无默认值时禁用（复制钮）：压淡并保持无 hover 反馈，避免误点无响应 */
+.vars__op:disabled,
+.vars__op:disabled:hover {
+  background: none;
+  color: var(--text-faint);
+  opacity: 0.35;
+  cursor: default;
+}
+/* 复制成功的 ✓ 沿用 .debug__copy-ok 配色，按行内 13px 图标尺度收一号 */
+.vars__op .debug__copy-ok {
   font-size: 12px;
+}
+/* 右下角悬浮操作组：卡片容器 + 投影，与 mock 视图 .debug__scope-foot 同语言 */
+.vars__fabs {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  background: var(--bg-bar);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 6px 18px var(--shadow-toast);
+}
+/* mock 二级视图头：返回 + 标题，发丝线分隔 */
+.vars__mockhead {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px;
+  border-bottom: var(--hairline) solid var(--border);
+}
+.vars__back {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 9px 0 7px;
+  background: var(--bg-bar);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+/* hover 走软 accent 三件套（与结构树徽标 / 桥接按钮激活态同语言），让「可点返回」一眼可辨 */
+.vars__back:hover {
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+.vars__back svg {
+  width: 12px;
+  height: 12px;
+}
+.vars__mocktitle {
+  color: var(--text-faint);
+  font-size: 11px;
+}
+
+/* 变量添加 / 编辑弹窗：骨架与节点属性面板同构（ni-panel / ni-head / ni-foot / ni-field-row），
+   这里只覆写尺寸与表单特有件：宽度同 ni-panel、高度随内容、代码编辑区与必填星号。 */
+/* node-inspector.css 晚于本文件载入，等特异性下 .ni-panel 的 80vh 会赢，故用双类提特异性 */
+.ni-panel.vars-dlg {
+  width: 560px;
+  height: auto;
+  min-height: 0;
+  max-height: 80vh;
+}
+/* 必填星号：与表单错误同族 danger 色 */
+.vars-dlg .ni-field-label i {
+  font-style: normal;
+  color: var(--danger);
+  margin-right: 2px;
+}
+/* 默认值 / 描述行：标签与控件首行对齐（28px 控件首行基线） */
+.ni-field-row--top {
+  align-items: flex-start;
+}
+.ni-field-row--top .ni-field-label {
+  line-height: var(--ctrl-sm);
+}
+/* Dropdown 撑满控件区（ni-field-row 的 flex 规则只约束 .ni-input） */
+.vars-dlg__ctrl {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+/* 默认值多行编辑区（数组 / 对象的 CodeJar 代码区、字符串的文本域）共用一把尺子：
+   高度下限 = 8 行文本 —— 行高 12px × 1.6 = 19.2px，18px = 上下 padding 16 + 边框 2（border-box）。
+   两者垂直内边距一致，切类型时弹窗高度不跳；min-height 同时夹住 flex 压缩与 resize 拖拽下限，
+   内容超出后在 max-height 内滚动。 */
+.vars-dlg__code,
+.vars-dlg__str {
+  min-height: calc(8 * 1.6 * 12px + 18px);
+  max-height: 264px;
+}
+/* 数组 / 对象默认值：CodeJar 代码编辑区（与 mock Raw 编辑器同族，嵌入表单行） */
+.vars-dlg__code {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: auto;
+  padding: 8px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text);
+  tab-size: 2;
+  white-space: pre;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.vars-dlg__code:focus {
+  border-color: var(--accent);
+}
+/* 字符串默认值：多行文本域（数字走 NumberStepper、布尔走单选，都是单行高），
+   长文案与多行字符串能一眼看全。.ni-input 定义在 node-inspector.css（晚于本文件载入），
+   等特异性下会赢，故用双类提特异性覆盖其 28px 定高与 6px 垂直内边距，与代码区完全同高。 */
+.ni-input.vars-dlg__str {
+  height: auto;
+  padding: 8px 12px;
+  line-height: 1.6;
+  resize: vertical;
+  overflow: auto;
+}
+.vars-dlg__desc {
+  height: auto;
+  /* 高度下限 = 4 行文本：行高 12px（.ni-input）× 1.6 = 19.2px，14px = 上下 padding 12 + 边框 2（border-box）。
+     min-height 同时夹住 resize: vertical 的拖拽下限，拖不小于 4 行。 */
+  min-height: calc(4 * 1.6 * 12px + 14px);
+  max-height: 140px;
+  resize: vertical;
+  line-height: 1.6;
+}
+.vars-dlg__err {
+  margin: 2px 0 0;
   color: var(--danger);
+  font-size: 11px;
+}
+/* mock 二级视图头部右端弱提示：不抢视觉，仅解释覆盖语义 */
+.vars__mockhint {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-faint);
 }
 
 /* 底部状态栏（类 VSCode 暗色状态栏，沿用主题 token，与顶栏/面板统一） */
@@ -1883,7 +2344,7 @@ button.statusbar__conn {
   order: 3;
   padding: 0 2px;
   background: var(--bg-bar);
-  border-top: 1px solid var(--border);
+  border-top: var(--hairline) solid var(--border);
   font-size: 12px;
   color: var(--text-dim);
   user-select: none;
@@ -1903,9 +2364,9 @@ button.statusbar__conn {
 .statusbar__item--right {
   color: var(--text-faint);
 }
-/* 问题指示器：沿用统一 hover 语言（bg-hover + accent 文字），保持与整体风格一致 */
-/* 问题指示器：本质是一行状态栏文本读数，不是按钮——
-   无边框 / 无圆角 / 无 hover 背景块；仅在有错误时文字+图标着 danger 红作为提示 */
+/* 问题指示器：本质是一行状态栏文本读数，不是按钮——无边框 / 无圆角 / 无 hover 背景块。
+   配色铁律：状态栏文字默认色，仅报错（danger）/ 警告（warn）态着语义色；
+   展开、有日志等非风险态不再着色（面板可见本身即「已展开」的提示）。 */
 .statusbar__item--prob {
   cursor: pointer;
   color: var(--text-dim);
@@ -1923,12 +2384,6 @@ button.statusbar__conn {
 .statusbar__item--prob.is-error:hover {
   color: var(--danger);
 }
-.statusbar__item--prob.is-log {
-  color: var(--accent);
-}
-.statusbar__item--prob.is-log:hover {
-  color: var(--accent);
-}
 .statusbar__item--prob.is-ok {
   color: var(--text-faint);
   cursor: default;
@@ -1958,7 +2413,7 @@ button.statusbar__conn {
   max-height: 60vh;
   overflow: hidden;
   background: var(--bg-panel);
-  border-top: 1px solid var(--border-strong);
+  border-top: var(--hairline) solid var(--border-strong);
 }
 .errpanel__head {
   flex: 0 0 auto;
@@ -1967,7 +2422,7 @@ button.statusbar__conn {
   gap: 8px;
   height: var(--ctrl-lg);
   padding: 0 12px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
   font-size: 13px;
   color: var(--text);
 }
@@ -2178,7 +2633,7 @@ button.statusbar__conn {
   align-items: baseline;
   gap: 8px;
   padding: 2px 12px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
 }
 .log__item:last-child {
   border-bottom: none;
@@ -2256,7 +2711,7 @@ button.statusbar__conn {
 .log__json .apt__list--nested {
   margin-left: 4px;
   padding-left: 14px;
-  border-left: 1px solid var(--border);
+  border-left: var(--hairline) solid var(--border);
 }
 .log__empty {
   color: var(--text-faint);
@@ -2387,7 +2842,7 @@ button.statusbar__conn {
   display: flex;
   /* 负外边距抵消对话框左右内边距，分割线贯通左右边缘 */
   margin: 18px -20px 0;
-  border-top: 1px solid #e8e8e8;
+  border-top: var(--hairline) solid #e8e8e8;
 }
 .dlg__btn {
   flex: 1 1 0;
@@ -2404,7 +2859,7 @@ button.statusbar__conn {
 }
 .dlg__btn--cancel {
   color: #1677ff;
-  border-right: 1px solid #e8e8e8;
+  border-right: var(--hairline) solid #e8e8e8;
 }
 /* cancelGrayStyle：取消按钮灰色风格 */
 .dlg__btn--cancel.dlg__btn--gray {
@@ -2568,7 +3023,7 @@ button.statusbar__conn {
   height: 44px;
   padding: 0 16px;
   box-sizing: border-box;
-  border-bottom: 1px solid #eef0f2;
+  border-bottom: var(--hairline) solid #eef0f2;
 }
 .pk-bar__title {
   font-size: 15px;
@@ -2610,8 +3065,8 @@ button.statusbar__conn {
   height: 40px;
   transform: translateY(-50%);
   background: rgba(22, 119, 255, 0.08);
-  border-top: 1px solid #d6e4ff;
-  border-bottom: 1px solid #d6e4ff;
+  border-top: var(--hairline) solid #d6e4ff;
+  border-bottom: var(--hairline) solid #d6e4ff;
   pointer-events: none;
 }
 .pk-col__list {
@@ -2691,7 +3146,7 @@ button.statusbar__conn {
   align-items: center;
   justify-content: space-between;
   padding: 12px 14px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--hairline) solid var(--border);
 }
 .rp-title {
   font-size: 14px;