cardbuddy 0.6.0

package/dist/vendored/styles/setters.css

@@ -0,0 +1,962 @@
+/**
+ * 属性设置器（setters/*.vue）统一样式。
+ *
+ * 复刻编辑器右侧「属性 & 事件」面板的控件形态，但换成本工程的深色配色。
+ * 全部为全局类（st- 前缀），不使用 scoped —— 与 node-inspector.css 保持同一约定。
+ */
+
+/* ------------------------------ 通用输入 ------------------------------ */
+
+.st-input,
+.st-textarea {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;                 /* 与 .ni-input 一致：高度含 border */
+  height: var(--ctrl-sm);                 /* 28px：节点属性面板输入框统一高度，与 .ni-input 对齐，消除 28/32 混排 */
+  padding: 6px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.st-textarea {
+  height: auto;
+  min-height: 96px;   /* 约 4 行 */
+  padding: 6px 12px;
+  line-height: 1.5;
+  resize: none;       /* 隐藏原生拖拽手柄，统一外观 */
+}
+.st-input:focus,
+.st-textarea:focus {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+}
+.st-input:disabled,
+.st-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.st-input::placeholder,
+.st-textarea::placeholder {
+  color: var(--text-faint);
+}
+
+/* 原生 select 深色化 */
+.st-select {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  height: var(--ctrl-sm);                 /* 28px：与 .ni-input 统一（st-select 当前为孤儿类，SetSelect 已改用 Dropdown sm=28） */
+  padding: 0 24px 0 12px;
+  background: var(--bg-input)
+    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23949aab' d='M0 0h10L5 6z'/%3E%3C/svg%3E")
+    no-repeat right 8px center;
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+}
+.st-select:focus {
+  border-color: var(--accent-border);
+}
+.st-select option {
+  background: var(--bg-panel);
+  color: var(--text);
+}
+
+/* ------------------------------ 数字输入 ------------------------------ */
+
+.st-number {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  height: var(--ctrl-sm);                 /* 28px：与 .ni-input 统一（数字框带步进/预设，结构不同于普通 input，保留 st-number 但收口 28） */
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  overflow: hidden;
+  transition: border-color 0.15s;
+}
+.st-number:focus-within {
+  border-color: var(--accent-border);
+}
+.st-number__field {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0 10px;
+  background: transparent;
+  border: 0;
+  color: var(--text);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+}
+.st-number__field::placeholder {
+  color: var(--text-faint);
+}
+/* 单位 / 后缀 */
+.st-number__symbol {
+  flex: 0 0 auto;
+  min-width: 24px;
+  height: 100%;
+  padding: 0 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid var(--border);
+  background: var(--overlay-tint);
+  color: var(--text-dim);
+  font-size: 11px;
+  user-select: none;
+}
+.st-number__symbol--btn {
+  cursor: pointer;
+}
+.st-number__symbol--btn:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+/* 预设值下拉箭头 */
+.st-number__caret {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid var(--border);
+  color: var(--text-faint);
+  cursor: pointer;
+}
+.st-number__caret:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+/* 禁用态（如 @/auto 单位下输入框只读） */
+.st-number__field:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+/* 下拉浮层容器：与 .st-number 同宽、相对定位，浮层挂在它下面而不被 .st-number 的
+   overflow:hidden 裁切。此前 .st-pop / .st-pop__item 完全没有样式，单位切换菜单不可见。 */
+.st-number-wrap,
+.st-numberstyle {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+/* 点击空白处关闭浮层的透明遮罩（z-index 低于 .st-pop，不挡住菜单本身） */
+.st-pop-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+}
+.st-pop {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: var(--z-pop);
+  min-width: 80px;
+  padding: 6px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: var(--shadow-3);
+}
+.st-pop__item {
+  padding: 8px 12px;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--text-dim);
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  transition: background 0.12s, color 0.12s;
+}
+.st-pop__item:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.st-pop__item--on {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
+/* ------------------------------ 分段选择 ------------------------------ */
+
+.st-seg {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+  border-radius: 2px;
+  /* overflow: hidden; */
+  border: 1px solid var(--border);
+}
+.st-seg__item {
+  flex: 1 1 0;
+  min-width: 0;
+  /* 整框含 1px 边框须 = 28px（--ctrl-sm）：故 item 内容高 = 28 - 2(上下边框) = 26px。
+     属性面板内嵌分段切换（TabSelect/字体/对齐 等）为 2–4 项紧凑开关，与标签字号 12、周边行高协调。 */
+  height: calc(var(--ctrl-sm) - 2px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 0 4px;
+  background: var(--bg-input);
+  border-left: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  /* overflow: hidden; */
+  transition: background 0.12s, color 0.12s;
+}
+.st-seg__item:first-child {
+  border-left: 0;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.st-seg__item:last-child {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.st-seg__item:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.st-seg__item--on {
+  background: var(--accent-soft);
+  color: var(--accent);
+  position: relative;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    border: 1px solid var(--accent-border);
+  }
+}
+.st-seg__item--on:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.st-seg__icon {
+  width: 14px;
+  height: 14px;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
+  stroke-linecap: round;
+}
+
+/* ------------------------------ 开关 ------------------------------ */
+
+.st-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.st-switch__track {
+  width: 34px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--bg-hover);
+  border: 1px solid var(--border-strong);
+  position: relative;
+  transition: background 0.16s, border-color 0.16s;
+  flex: 0 0 auto;
+}
+.st-switch__knob {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  transition: transform 0.16s, background 0.16s;
+}
+.st-switch--on .st-switch__track {
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
+}
+.st-switch--on .st-switch__knob {
+  transform: translateX(16px);
+  background: var(--accent);
+}
+.st-switch__text {
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+/* --------------------------- 图片 / 背景图 --------------------------- */
+
+.st-image {
+  width: 100%;
+  min-width: 0;
+}
+.st-image__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 通用重置图标按钮（颜色 / 图片等清空用，替代 × 字符） */
+.st-ic {
+  width: 14px;
+  height: 14px;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.st-image__clear,
+.st-color__clear {
+  flex: 0 0 auto;
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-input);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.st-image__clear:hover,
+.st-color__clear:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+/* 背景图位置 / 大小：X·Y 双数值区规范间距 */
+.st-bgpos {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+.st-bgpos__xy,
+.st-bgsize__xy {
+  display: flex;
+  gap: 8px;
+}
+.st-bgpos__xy > *,
+.st-bgsize__xy > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.st-bgsize {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+/* ------------------------------ 颜色 ------------------------------ */
+
+.st-color {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+}
+.st-color__top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.st-color__swatch {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 5px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-input);
+}
+.st-color__swatch:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.st-color__checker {
+  position: absolute;
+  inset: 0;
+  /* 棋盘格：展示透明度 */
+  background-image:
+    linear-gradient(45deg, var(--text-faint) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--text-faint) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--text-faint) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--text-faint) 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+}
+.st-color__fill {
+  position: absolute;
+  inset: 0;
+  border-radius: 4px;
+}
+/* 第三方颜色选择器弹层（Teleport 到 body，避免被滚动容器裁切） */
+.st-color__pop {
+  max-width: calc(100vw - 16px);
+  background: var(--bg-panel);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  box-shadow: 0 16px 48px var(--shadow-card);
+  overflow: hidden;
+}
+.st-color__pop .vc-sketch {
+  box-shadow: none;
+  border-radius: 0;
+  background: var(--bg-panel);
+  width: 100% !important;
+  box-sizing: border-box;
+}
+.st-color__text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+/* 透明度滑块行 */
+.st-color__alpha-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.st-color__alpha-label {
+  flex: 0 0 36px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+.st-color__alpha-slider {
+  flex: 1 1 auto;
+  height: 14px;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 7px;
+  background: linear-gradient(to right,
+    transparent 0%,
+    var(--text) 100%);
+  outline: none;
+  opacity: .7;
+  transition: opacity .15s;
+}
+.st-color__alpha-slider:hover { opacity: 1; }
+.st-color__alpha-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--on-accent);
+  border: 2px solid var(--border-strong);
+  box-shadow: 0 1px 3px rgba(0,0,0,.3);
+  cursor: pointer;
+}
+.st-color__alpha-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--on-accent);
+  border: 2px solid var(--border-strong);
+  box-shadow: 0 1px 3px rgba(0,0,0,.3);
+  cursor: pointer;
+}
+.st-color__alpha-val {
+  flex: 0 0 32px;
+  font-size: 11px;
+  color: var(--text-dim);
+  text-align: right;
+}
+
+/* ------------------------------ 九宫格 ------------------------------ */
+
+.st-grid9 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+  padding: 6px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  width: 100%;
+}
+.st-grid9__cell {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 3px;
+}
+.st-grid9__dot {
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--border-strong);
+  border-radius: 2px;
+  transition: background 0.12s, border-color 0.12s;
+}
+.st-grid9__cell:hover .st-grid9__dot {
+  border-color: var(--accent-border);
+  background: var(--accent-soft);
+}
+.st-grid9__cell--on .st-grid9__dot {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+/* ------------------------------ 内边距四向 ------------------------------ */
+
+.st-pad {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  width: 100%;
+}
+
+/* ------------------------------ 渐变 ------------------------------ */
+
+.st-gradient {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+.st-gradient__preview {
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.st-gradient__stop {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.st-gradient__del {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  border: 1px solid var(--border);
+  background: var(--bg-input);
+  color: var(--text-faint);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+}
+.st-gradient__del:hover {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
+/* ------------------------------ 通用小按钮 ------------------------------ */
+
+.st-minibtn {
+  height: 24px;
+  padding: 0 10px;
+  background: var(--bg-input);
+  border: 1px dashed var(--border-strong);
+  border-radius: 5px;
+  color: var(--text-dim);
+  font-size: 11px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.12s, border-color 0.12s;
+}
+.st-minibtn:hover {
+  color: var(--accent);
+  border-color: var(--accent-border);
+}
+
+/* ------------------------------ 图标选择 ------------------------------ */
+
+.st-iconsel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+.st-iconsel__preview {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  color: var(--text);
+}
+.st-iconsel__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+  max-height: 168px;
+  overflow: auto;
+  padding: 6px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  width: 100%;
+  margin-top: 6px;
+}
+.st-iconsel__cell {
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-dim);
+}
+.st-iconsel__cell:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.st-iconsel__cell--on {
+  background: var(--accent-soft);
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+/* ------------------------------ 常用样式（CustomSelect） ------------------------------ */
+
+.st-customsel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  width: 100%;
+}
+.st-customsel__item {
+  padding: 3px 8px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 18px;
+}
+.st-customsel__item:hover {
+  border-color: var(--accent-border);
+}
+
+/* ------------------------------ 列表（List） ------------------------------ */
+
+.st-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+.st-list__item {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--overlay-tint);
+  overflow: hidden;
+}
+.st-list__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  background: var(--overlay-tint);
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--text-dim);
+  cursor: pointer;
+  user-select: none;
+}
+.st-list__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+.st-list__op {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  border: 0;
+  background: transparent;
+  color: var(--text-faint);
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1;
+}
+.st-list__op:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.st-list__op--del:hover {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+.st-list__body {
+  padding: 6px 8px;
+}
+.st-list__empty {
+  font-size: 11px;
+  color: var(--text-faint);
+  padding: 4px 0;
+}
+
+/* 列表项内字段行：与 ptree__row 对齐的紧凑布局 */
+.st-list__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 0;
+}
+.st-list__label {
+  flex: 0 0 72px;
+  font-size: 11px;
+  color: var(--text-dim);
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1;
+}
+.st-list__control {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* --------------------------- 代码编辑器（SetCode） --------------------------- */
+
+.st-code {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.st-code__editor {
+  min-height: 140px;
+  max-height: 340px;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  tab-size: 2;
+  white-space: pre;
+  outline: none;
+}
+
+.st-code__editor:focus {
+  border-color: var(--accent);
+}
+
+.st-code__editor.is-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.st-code__foot {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  line-height: normal;
+  color: var(--text-faint);
+}
+
+/* .pc-body 为垂直居中开关把 line-height 置 0，此处需恢复，否则提示文字行高坍缩为 0 高度 */
+.st-code__hint {
+  line-height: normal;
+}
+
+.st-code__warn {
+  margin-left: auto;
+  color: var(--code-warn);
+}
+
+/* Prism 高亮配色（变量驱动，随主题切换；暗色默认=原硬编码值） */
+.st-code__editor .token.comment,
+.st-code__editor .token.prolog,
+.st-code__editor .token.doctype,
+.st-code__editor .token.cdata { color: var(--code-comment); }
+.st-code__editor .token.punctuation { color: var(--code-punc); }
+.st-code__editor .token.property,
+.st-code__editor .token.tag,
+.st-code__editor .token.boolean,
+.st-code__editor .token.number,
+.st-code__editor .token.constant,
+.st-code__editor .token.symbol { color: var(--code-prop); }
+.st-code__editor .token.selector,
+.st-code__editor .token.attr-name,
+.st-code__editor .token.string,
+.st-code__editor .token.char,
+.st-code__editor .token.builtin { color: var(--code-str); }
+.st-code__editor .token.operator,
+.st-code__editor .token.entity,
+.st-code__editor .token.url { color: var(--code-num); }
+.st-code__editor .token.keyword { color: var(--code-kw); }
+.st-code__editor .token.function,
+.st-code__editor .token.class-name { color: var(--code-fn); }
+.st-code__editor .token.regex,
+.st-code__editor .token.important,
+.st-code__editor .token.variable { color: var(--code-var); }
+
+/* ------------------------------ 变量表达式编辑器（SetExpr） ------------------------------ */
+/* 容器可拖拽调高度（右下角原生手柄），边框/圆角与通用控件一致 */
+.st-expr {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  resize: vertical;
+  overflow: hidden;
+  min-height: 96px;
+  height: 120px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm, 6px);
+  background: var(--bg-input);
+}
+.st-expr:focus-within { border-color: var(--accent); }
+.st-expr--disabled { opacity: 0.6; cursor: not-allowed; }
+.st-expr__editor {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 8px 10px;
+  outline: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.st-expr__editor.is-disabled { pointer-events: none; }
+.st-expr__foot {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: flex-end;
+  padding: 2px 8px;
+  font-size: 11px;
+  color: var(--text-dim);
+  border-top: 1px solid var(--border);
+  background: var(--bg-soft);
+  user-select: none;
+  line-height: 1.5;
+}
+.st-expr__hint { white-space: nowrap; line-height: normal; }
+/* 空内容时的占位提示（覆盖在编辑器上方，不进入 CodeJar 托管的 DOM） */
+.st-expr__ph {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 8px 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-faint);
+  white-space: pre-wrap;
+  word-break: break-word;
+  pointer-events: none;
+}
+/* 复用 SetCode 的 Prism 配色 */
+.st-expr__editor .token.comment,
+.st-expr__editor .token.prolog,
+.st-expr__editor .token.doctype,
+.st-expr__editor .token.cdata { color: var(--code-comment); }
+.st-expr__editor .token.punctuation { color: var(--code-punc); }
+.st-expr__editor .token.property,
+.st-expr__editor .token.tag,
+.st-expr__editor .token.boolean,
+.st-expr__editor .token.number,
+.st-expr__editor .token.constant,
+.st-expr__editor .token.symbol { color: var(--code-prop); }
+.st-expr__editor .token.selector,
+.st-expr__editor .token.attr-name,
+.st-expr__editor .token.string,
+.st-expr__editor .token.char,
+.st-expr__editor .token.builtin { color: var(--code-str); }
+.st-expr__editor .token.operator,
+.st-expr__editor .token.entity,
+.st-expr__editor .token.url { color: var(--code-num); }
+.st-expr__editor .token.keyword { color: var(--code-kw); }
+.st-expr__editor .token.function,
+.st-expr__editor .token.class-name { color: var(--code-fn); }
+.st-expr__editor .token.regex,
+.st-expr__editor .token.important,
+.st-expr__editor .token.variable { color: var(--code-var); }
+/* 表达式特有的 $ 绑定变量：独立青色，凸显数据来源 */
+.st-expr__editor .token.binding-var { color: var(--code-binding); }
+
+/* ------------------------------ 只读 / 兜底 ------------------------------ */
+
+/* 条件表达式（IfForm）：纵向堆叠，规范间距 */
+.st-ifform {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.st-raw {
+  width: 100%;
+  min-width: 0;
+  font-size: 11px;
+  color: var(--text-dim);
+  word-break: break-all;
+  background: var(--bg-input);
+  border: 1px dashed var(--border);
+  border-radius: 5px;
+  padding: 4px 8px;
+}
+.st-raw__type {
+  color: var(--text-faint);
+  margin-right: 4px;
+}
+
+/* Inspector / 抽屉内 setter 升一档（28 → 32），与节点面板控件高度对齐 */
+.ni-body .st-input,
+.ee-detail-body .st-input {
+  height: var(--ctrl-md);
+}