cardbuddy 0.7.0 → 0.9.0

package/dist/vendored/styles/app.css

@@ -64,6 +64,9 @@
   --scrim: rgba(0, 0, 0, 0.55);
   --scrim-soft: rgba(0, 0, 0, 0.45);
   --scrim-faint: rgba(0, 0, 0, 0.4);
+  /* 模态模糊遮罩（深浅主题统一，不随主题翻转）：确认框 / 网格预览 / 添加组件 / 远端预览 / 登录框共用 */
+  --scrim-modal: rgba(8, 10, 16, 0.55);
+  --scrim-modal-blur: 2px;
   /* 顶栏渐变、分隔条、分隔条抓手微光、白色叠加微光 */
   --bar-grad: linear-gradient(180deg, #171a20, #131519);
   --splitter: #5b6cff;
@@ -85,6 +88,8 @@
   --log-warn-border: rgba(224, 179, 65, 0.35);
   --scroll-thumb: rgba(148, 154, 171, 0.28);
   --scroll-thumb-hover: rgba(148, 154, 171, 0.45);
+  /* 静止档：鼠标不在滚动区域时弱化显示 */
+  --scroll-thumb-idle: rgba(148, 154, 171, 0.14);
   /* 语法高亮配色（JSON 树 / 结构树 / 代码编辑器），随主题切换；暗色默认=原硬编码值，保证暗色外观不变 */
   --jt-key: #9db4ff;
   --jt-string: #8fe39a;
@@ -239,6 +244,7 @@
   --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);
   /* 语法高亮配色：浅色主题参考 GitHub Light / VSCode Light+，保证白底上的可读性 */
   --jt-key: #953800;
   --jt-string: #0a3069;
@@ -301,23 +307,47 @@ body {
   height: 100vh;
 }
 
-/* 全局滚动条（Firefox） */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scroll-thumb) transparent;
+/* 全局滚动条（仅 Firefox）：FF 不识别 ::-webkit-scrollbar，也不支持悬停分档/过渡，取中间档常显。
+   必须隔离在 FF：Chrome 121+ 一旦命中 scrollbar-width 会改走标准滚动条，
+   忽略 ::-webkit-scrollbar 定制（含下方三档透明度与过渡）。 */
+@supports (-moz-appearance: none) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scroll-thumb) transparent;
+  }
 }
-/* 全局滚动条（WebKit） */
+/* 全局滚动条（WebKit）三档透明度：
+   静止（鼠标不在滚动区域）弱化 → 鼠标进入区域回常 → 按住 thumb 再提亮；
+   background-color 过渡保证移入/移出平滑淡入淡出。页面所有滚动区域继承本规则。
+   注：区域档必须用 :has(:hover)（容器内有被悬停后代）而非容器自身 :hover ——
+   Chromium 不会因滚动容器自身 hover 状态变化重算其 ::-webkit-scrollbar-* 样式（实测无效），
+   :has(:hover) 与祖先 hover 均可正常触发重绘。 */
 *::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 *::-webkit-scrollbar-thumb {
-  background: var(--scroll-thumb);
+  background: var(--scroll-thumb-idle);
   border-radius: 8px;
+  transition: background-color 0.2s ease;
+}
+*:has(:hover)::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+}
+/* 纯文本滚动区兜底：CodeJar 编辑器与原生对话框正文以文本节点为主，容器内几乎没有可命中的
+   悬停后代，仅靠 :has(:hover) 会随鼠标落在「文字 / 缩进空白」上而闪烁，故改用紧贴外层容器的 hover。 */
+.st-expr:hover .st-expr__editor::-webkit-scrollbar-thumb,
+.st-code:hover .st-code__editor::-webkit-scrollbar-thumb,
+.debug__scope-raw:hover .debug__raw-editor::-webkit-scrollbar-thumb,
+.dlg:hover .dlg__msg::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
 }
 *::-webkit-scrollbar-thumb:hover {
   background: var(--scroll-thumb-hover);
 }
+*::-webkit-scrollbar-thumb:active {
+  background: var(--scroll-thumb-hover);
+}
 *::-webkit-scrollbar-track {
   background: transparent;
 }
@@ -878,14 +908,24 @@ body {
   min-height: 0;
 }
 .workside__bar {
+  flex: 0 0 auto;
+  order: 2;
+}
+/* 底部弹出面板容器（运行态 / 事件 / 变量绑定）：Teleport 目标，宽度贯穿中右两栏；
+   空容器（面板均 v-show 隐藏时）高度为 0，不占位 */
+.workside__panels {
   flex: 0 0 auto;
   order: 1;
+  display: flex;
+  flex-direction: column;
 }
 .workside__cols {
   flex: 1 1 auto;
   display: flex;
   min-width: 0;
   min-height: 0;
+  /* 绝对定位 splitter 的定位上下文：分隔条只贯穿两栏区高度，不穿过底部面板 / 状态栏 */
+  position: relative;
 }
 
 .phone {
@@ -920,12 +960,13 @@ body {
   flex-direction: column;
 }
 
-/* 拖拽分隔条：覆盖在预览列与调试面板的接缝上，绝对定位不占布局宽度 */
+/* 拖拽分隔条：覆盖在接缝上，绝对定位不占布局宽度（命中宽 6px → 两侧各压 3px）。
+   左条定位上下文为 .app__stage：预览列 | 工作区 的缝贯穿底面板 / 状态栏左缘，通到底部全程可拖；
+   右条（.splitter--api）定位上下文为 .workside__cols：该缝在底面板区域不存在，只贯穿列区高度。 */
 .splitter {
   position: absolute;
   top: 0;
   bottom: 0;
-  /* 以预览列右缘为接缝居中覆盖（宽 6px → 两侧各压 3px），不挤占实际宽度 */
   left: calc(var(--preview-width) - 3px);
   width: 6px;
   cursor: col-resize;
@@ -937,9 +978,22 @@ body {
   left: auto;
   right: calc(var(--api-panel-width, 360px) - 3px);
 }
-.splitter:hover,
-.splitter.is-dragging {
+/* 拖拽高亮统一规格：左 / 右竖向分隔条与底部面板头部横向拖拽条，hover / 拖拽中一律
+   显示 2px 的 --splitter 高亮线（同色同粗细）；竖条命中区仍为 6px，高亮只画居中 2px */
+.splitter::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 1.5px;
+  width: 3px;
   background: var(--splitter);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.splitter:hover::after,
+.splitter.is-dragging::after {
+  opacity: 1;
 }
 /* 拖拽中：禁用文本选择，全局保持 col-resize 光标 */
 .phone--dragging,
@@ -999,7 +1053,9 @@ body {
   font-size: 12px;
   white-space: nowrap;
 }
-/* 预览区底部状态条：与顶部 device-bar 同款风格，固定于画布底部展示画布宽高 */
+/* 预览区底部状态条：画布尺寸读数 + 刷新按钮。
+   底色透明（融入手机框 --bg-stage），不再作为独立暗面板——消除其与全局 .statusbar
+   （bg-bar）因所处父容器底色不同而产生的“颜色细微差异”观感；仅保留 1px 分隔线作页脚边界。 */
 .preview-statusbar {
   flex: 0 0 auto;
   width: 100%;
@@ -1008,7 +1064,7 @@ body {
   align-items: center;
   gap: 12px;
   padding: 0 12px;
-  background: var(--bg-bar);
+  background: transparent;
   border-top: 1px solid var(--border);
 }
 /* 预览区底部状态条：本地开发服务连接状态（连接图标 + 状态文案）。
@@ -1035,6 +1091,20 @@ body {
 .statusbar .app__btn--reconnecting { color: var(--warn); }
 .statusbar .app__btn--disconnected { color: var(--danger); }
 .statusbar .app__btn--warn { color: var(--warn); }
+/* 连接指示器现为可点按钮（开合底部「服务日志」面板）：保持状态栏读数观感
+   （无边框 / 无圆角 / 语义色由 app__btn--* 提供），hover 仅加极淡底色提示可点，
+   展开态用 accent 底线标识（与 .statusbar__item--prob.is-open 同一语言，不抢语义色）。 */
+button.statusbar__conn {
+  cursor: pointer;
+  font: inherit;
+}
+.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，
@@ -1200,6 +1270,40 @@ body {
   overflow: auto;
   padding: 8px 12px;
 }
+/* 通用空状态占位（API 调用面板 / 卡片来源 tab 复用）：徽章 + 图标 + 文案 + 弱提示，垂直居中 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 56px 16px;
+  color: var(--text-faint);
+}
+/* 虚线圆形徽章：复用全局弱态配色（bg-hover 底 + 虚线描边），内嵌 20px 线性图标（插头/云等，随场景） */
+.empty-state__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--bg-hover);
+  border: 1px dashed var(--border-strong);
+  color: var(--text-faint);
+}
+.empty-state__badge svg {
+  width: 20px;
+  height: 20px;
+}
+.empty-state__hint {
+  margin: 0;
+  max-width: 240px;
+  color: var(--text-faint);
+  font-size: 11px;
+  line-height: 1.6;
+  text-align: center;
+}
 .debug__tabs {
   display: flex;
   border-bottom: 1px solid var(--border);
@@ -1252,7 +1356,10 @@ body {
 }
 .debug__meta {
   margin: 0;
-  padding: 8px 12px;
+  padding: 8px 12px 0; /* 底部留白交给 hint 页脚，保证贴底无缝 */
+  display: flex;
+  flex-direction: column;
+  min-height: 100%; /* 内容不足一屏时也能把 hint 推到面板底部 */
 }
 .debug__empty {
   color: var(--text-faint);
@@ -1298,8 +1405,12 @@ body {
   font-size: 12px;
 }
 .debug__meta-hint {
-  margin-top: 12px;
-  padding-top: 10px;
+  /* 固定在面板底部：内容短时由 margin-top:auto 推底；内容超长滚动时 sticky 吸底不随列表滚走 */
+  position: sticky;
+  bottom: 0;
+  margin: auto -12px 0;
+  padding: 10px 12px;
+  background: var(--bg-panel);
   border-top: 1px solid var(--border);
   color: var(--text-faint);
   font-size: 12px;
@@ -1312,14 +1423,14 @@ body {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
+  /* 顶缘拖拽条 .panelhead__edge 的定位上下文 */
+  position: relative;
   /* 初始高度 240px；运行时由头部拖拽调整，并通过 JS 持久化回写 height */
   height: 240px;
   min-height: 120px;
   max-height: 60vh;
   /* hidden 避免面板自身出现滚动条（滚动交给 .statepanel__tree） */
   overflow: hidden;
-  /* 通过 flex order 把面板固定到状态栏之上，确保状态栏始终贴底（不被面板顶上来） */
-  order: 1;
   background: var(--bg-panel);
   border-top: 1px solid var(--border-strong);
 }
@@ -1330,13 +1441,37 @@ body {
   gap: 8px;
   height: var(--ctrl-lg);
   padding: 0 12px;
-  background: var(--bg-bar);
   border-bottom: 1px solid var(--border);
   font-size: 13px;
   color: var(--text);
-  /* 头部即拖拽手柄（无专门节点）：整条可抓取，向上拖放大面板 */
+}
+/* 底面板顶缘拖拽条：与竖向分隔条同一规格——命中 6px、高亮 3px --splitter；
+   仅鼠标进入分割边缘才触发高亮 / 拖拽，头部本体不再响应（面板 overflow:hidden，
+   高亮线贴缝内侧 0~3px 绘制）。拖拽中经 is-dragging 保持高亮。 */
+.panelhead__edge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 6px;
   cursor: row-resize;
   user-select: none;
+  z-index: var(--z-sticky);
+}
+.panelhead__edge::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 3px;
+  background: var(--splitter);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.panelhead__edge:hover::after,
+.panelhead__edge.is-dragging::after {
+  opacity: 1;
 }
 .statepanel__title {
   font-weight: 600;
@@ -1345,27 +1480,34 @@ body {
 .statepanel__title code {
   font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--accent);
+  /* 与 .debug__meta-row code 同一芯片语言：浅底 + 弱文字色，不用 accent 抢焦 */
+  color: var(--text-dim);
+  background: var(--bg-hover);
+  padding: 1px 5px;
+  border-radius: 4px;
 }
 .statepanel__close {
   margin-left: auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: none;
   border: none;
-  color: var(--text-faint);
-  font-size: 15px;
-  line-height: 1;
+  color: var(--text-dim);
   cursor: pointer;
-  transition: color 0.15s;
+  border-radius: var(--radius-xs);
+  transition: background 0.15s, color 0.15s;
 }
 .statepanel__close:hover {
+  background: var(--bg-hover);
   color: var(--text);
 }
+.statepanel__close svg {
+  display: block;
+}
 .statepanel__tree {
   flex: 1 1 auto;
   overflow: auto;
@@ -1402,21 +1544,66 @@ body {
   padding: 0;
 }
 .debug__item {
-  padding: 4px 8px;
+  padding: 9px 11px;
   margin-bottom: 6px;
   border-radius: 8px;
   font-size: 12px;
   line-height: 1.6;
-  word-break: break-all;
+  /* break-all 会把键名/标识符拦腰拆行（msg → ms/g）；anywhere 仅在单词真放不下时才断 */
+  word-break: normal;
+  overflow-wrap: anywhere;
 }
 .debug__item--err {
-  background: var(--danger-soft);
+  display: grid;
+  grid-template-columns: 52px 84px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 0;
+  padding: 3px 12px 3px 10px;
+  border-radius: 0;
+  /* 左侧红条标示错误归属；行底透明避免整片红块，hover 才整行染 danger 色 */
+  border-left: 2px solid var(--danger);
+  border-bottom: 1px solid var(--border);
+  background: transparent;
   color: var(--err-item-fg);
+  font-size: 11px;
+  line-height: 1.45;
+  word-break: normal;
+}
+.debug__item--err:last-child {
+  border-bottom: none;
+}
+.debug__item--err:hover {
+  background: var(--danger-soft);
+}
+/* 错误类型列：等宽小标签，超长省略 */
+.debug__item--err .debug__kind {
+  overflow: hidden;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 10px;
+  color: var(--danger);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 1;
+}
+.err__msg {
+  min-width: 0;
+  word-break: break-word;
 }
 .debug__item--api {
   border: 1px solid var(--api-item-border);
   color: var(--api-item-fg);
   background: var(--api-item-bg);
+  margin-bottom: 8px;
+}
+.debug__item--api:last-child {
+  margin-bottom: 0;
+}
+/* 方法名与下方代码树同语言：等宽 + 显式行高（规范手册 6.2） */
+.debug__item--api .debug__kind {
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.6;
 }
 .debug__kind {
   font-weight: 600;
@@ -1481,12 +1668,27 @@ body {
 .apt__branch,
 .apt__leaf {
   display: flex;
-  align-items: center;
+  /* 值折行时键名/冒号保持首行对齐，center 会让它们悬在多行值的垂直中部 */
+  align-items: baseline;
   gap: 4px;
   padding: 1px 4px;
   border-radius: 4px;
   cursor: pointer;
 }
+/* 冒号贴键（DevTools 风格）：抵消与键之间的 flex gap，值仍保留 4px 间隔 */
+.apt .jt__colon {
+  margin-left: -4px;
+}
+/* 键名不参与 flex 收缩：否则长值会把小 basis 的键列按比例挤到拦腰换行（msg → ms/g）；
+   折行只应发生在值上（值已 min-width:0 + overflow-wrap:anywhere） */
+.apt .jt__key {
+  flex-shrink: 0;
+}
+/* 值/摘要允许在剩余宽度内折行：解除 flex 项 min-content 下限 */
+.apt .jt__val,
+.apt .jt__preview {
+  min-width: 0;
+}
 .apt__branch:hover,
 .apt__leaf:hover {
   background: var(--bg-hover);
@@ -1545,36 +1747,68 @@ body {
   overflow: auto;
 }
 .debug__scope-foot {
-  flex: 0 0 auto;
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: 10px;
+  right: 10px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
+  /* 悬浮操作条：卡片容器 + 投影，与滚动内容分层，不再“贴”在树内容上 */
+  padding: 6px;
+  background: var(--bg-bar);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
 }
 .debug__copied {
+  margin: 0 4px 0 8px;
   font-size: 12px;
   color: var(--accent);
 }
+/* 次级按钮：中性描边 + 弱文本色，hover 提亮 */
 .debug__copy {
   display: inline-flex;
   align-items: center;
-  height: var(--ctrl-sm);
-  padding: 0 14px;
+  gap: 5px;
+  height: 26px;
+  padding: 0 10px;
   background: var(--bg-input);
-  color: var(--text);
-  border: 1px solid var(--accent-border);
-  border-radius: var(--radius-sm);
-  font-size: 13px;
+  color: var(--text-dim);
+  border: 1px solid var(--border-strong);
+  border-radius: 7px;
+  font-size: 12px;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 .debug__copy:hover {
   background: var(--bg-hover);
-  border-color: var(--accent);
+  border-color: var(--accent-border);
+  color: var(--text);
+}
+.debug__copy-icn {
+  flex: 0 0 auto;
+  width: 13px;
+  height: 13px;
+}
+/* 主按钮（应用）：常态与其他边线按钮一致，hover 转绿色系（ok）提示“提交/生效”语义 */
+.debug__copy--primary:hover {
+  background: var(--ok-soft);
+  border-color: var(--ok-border);
+  color: var(--ok);
+}
+/* 丢弃类次级按钮：hover 转 warn 色提示破坏性（重置丢弃内存编辑） */
+.debug__copy--warn:hover {
+  background: var(--warn-soft);
+  border-color: var(--warn-border);
+  color: var(--warn);
+}
+/* 按钮分组间的竖向分隔线 */
+.debug__sep {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: var(--border-strong);
 }
 
 /* 数据绑定 Raw 模式：直接复用 .debug__scope-wrap 的绝对定位盒（inset 已占满 body 内容区），
@@ -1711,18 +1945,18 @@ body {
   color: var(--warn);
 }
 
-/* 底部面板（事件面板 / 绑定错误面板）：点击状态栏指示器弹出 / 收起。与运行态面板互斥，
+/* 底部面板（事件 / 变量绑定）：点击状态栏指示器弹出 / 收起。与运行态面板互斥，
    三者共用面板高度，由头部拖拽调整（无专门拖拽节点，与预览区宽度调节同一机制），约束 [120px, 60vh]。 */
 .errpanel {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
+  /* 顶缘拖拽条 .panelhead__edge 的定位上下文 */
+  position: relative;
   height: 240px;
   min-height: 120px;
   max-height: 60vh;
   overflow: hidden;
-  /* 与运行态面板同属「状态栏之上的底部面板」，固定 order 确保状态栏始终贴底 */
-  order: 2;
   background: var(--bg-panel);
   border-top: 1px solid var(--border-strong);
 }
@@ -1733,10 +1967,6 @@ body {
   gap: 8px;
   height: var(--ctrl-lg);
   padding: 0 12px;
-  background: var(--bg-bar);
-  /* 头部即拖拽手柄（无专门节点）：整条可抓取，向上拖放大面板 */
-  cursor: row-resize;
-  user-select: none;
   border-bottom: 1px solid var(--border);
   font-size: 13px;
   color: var(--text);
@@ -1757,18 +1987,23 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: none;
   border: none;
-  color: var(--text-faint);
+  color: var(--text-dim);
   cursor: pointer;
-  transition: color 0.15s;
+  border-radius: var(--radius-xs);
+  transition: background 0.15s, color 0.15s;
 }
 .errpanel__iconbtn:hover:not(:disabled) {
+  background: var(--bg-hover);
   color: var(--text);
 }
+.errpanel__iconbtn svg {
+  display: block;
+}
 .errpanel__iconbtn:disabled {
   opacity: 0.35;
   cursor: not-allowed;
@@ -1777,33 +2012,172 @@ body {
 .errpanel__clear:hover:not(:disabled) {
   color: var(--danger);
 }
+/* 事件面板 tab 条：日志 / 错误 二选一，并入头部单行（标题之后、操作按钮之前）。
+   沿用 .debug__tabs 视觉语言（选中项 accent 短下划线，落到头部底发丝线上），
+   与头部同高，不再单独占一行面板高度。 */
+.errpanel__tabs {
+  flex: 0 0 auto;
+  align-self: stretch;
+  display: flex;
+  align-items: stretch;
+  gap: 2px;
+  margin-left: 4px;
+}
+.errpanel__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 100%;
+  padding: 0 10px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.errpanel__tab:hover {
+  color: var(--text);
+}
+.errpanel__tab--active {
+  color: var(--accent);
+}
+.errpanel__tab--active::after {
+  content: '';
+  position: absolute;
+  left: 20%;
+  right: 20%;
+  bottom: -1px;
+  height: 2px;
+  background: var(--accent);
+}
+/* tab 计数小药丸：错误侧计数非 0 时转红，不切 tab 也能看出那边有货 */
+.errpanel__tab-count {
+  min-width: 16px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--bg-hover);
+  color: var(--text-faint);
+  font-size: 11px;
+  line-height: 15px;
+  text-align: center;
+}
+.errpanel__tab--active .errpanel__tab-count {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.errpanel__tab-count.is-hit,
+.errpanel__tab--active .errpanel__tab-count.is-hit {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
 .errpanel__body {
   flex: 1 1 auto;
   overflow: auto;
-  padding: 12px 16px;
+  /* 行贴边排布（行自带左右内边距），把竖向空间全部留给内容 */
+  padding: 4px 0 6px;
 }
-/* 事件面板内「日志 / 错误」分区标题 */
-.ep__sec-title {
-  margin: 8px 0 6px;
-  padding-bottom: 4px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-dim);
-  border-bottom: 1px dashed var(--border);
+/* 空态占位（复用 API 调用面板 .empty-state 语言）：底部面板高度有限，
+   压缩留白与徽章尺寸，避免空态自身撑出滚动条 */
+.errpanel__body .empty-state {
+  padding: 20px 16px;
+  gap: 8px;
 }
-.ep__sec-title:first-child {
-  margin-top: 0;
+.errpanel__body .empty-state__badge {
+  width: 40px;
+  height: 40px;
+}
+.errpanel__body .empty-state__badge svg {
+  width: 18px;
+  height: 18px;
+}
+.errpanel__body .empty-state__hint {
+  max-width: 460px;
+}
+
+/* ——— 服务日志面板（底部第四面板）：本地服务 cardbuddy 终端输出的实时镜像 ———
+   服务端按行镜像 stdout/stderr 并保留原始 ANSI，前端 preview/ansi.js 转成内联 style，
+   因此这里固定深色终端底 + 等宽字体：chalk 的等级色取自深色设计令牌，浅色主题下同样可读。
+   仅在有日志时切深底（见 .errpanel__body--term 绑定），空态仍走主题底色。 */
+.errpanel__body--term {
+  padding: 0;
+  background: #14161c;
+  color: #e8eaf0;
+}
+.svclog {
+  padding: 6px 0 10px;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+.svclog__line {
+  display: flex;
+  min-height: 1.55em;
+  padding: 0 12px;
+  /* 长行折行而非横向滚动：底部面板高度有限，横向滚动会同时吃掉两向空间 */
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-left: 2px solid transparent;
+}
+.svclog__line:hover {
+  background: rgba(255, 255, 255, 0.045);
+}
+/* 级别只作左侧色条 + 极淡底：ANSI 本身已带终端配色，不叠加二次着色以免打架 */
+.svclog__line--ok {
+  border-left-color: rgba(52, 211, 153, 0.55);
+}
+.svclog__line--warn {
+  border-left-color: var(--warn);
+  background: rgba(251, 191, 36, 0.07);
+}
+.svclog__line--error {
+  border-left-color: var(--danger);
+  background: rgba(248, 113, 113, 0.08);
 }
-/* 事件面板日志：每行 = 等级标签 + 内容（语法高亮 / JSON 折叠） */
+.svclog__text {
+  min-width: 0;
+}
+/* 头部读数：行数 + 实时态小圆点，落在标题之后（与事件面板 tab 同一位置语言） */
+.svclog__meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 8px;
+  color: var(--text-faint);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.svclog__dot {
+  width: 6px;
+  height: 6px;
+  margin-left: 4px;
+  border-radius: 50%;
+  background: var(--text-faint);
+}
+.svclog__dot.is-live {
+  background: var(--ok);
+  box-shadow: 0 0 0 2px var(--ok-soft);
+}
+/* 跟随最新输出按钮：开启态 accent，暂停态弱化（与其它头部图标按钮同一规格） */
+.svclog__follow.is-on {
+  color: var(--accent);
+}
+/* 复制完成瞬时反馈：与「已复制」语义一致的成功绿 */
+.errpanel__iconbtn.is-done {
+  color: var(--ok);
+}
+/* 事件面板日志：控制台风格高密度行 = 时间 | 等级 | 内容，发丝线分隔 */
 .debug__list--log {
   display: flex;
   flex-direction: column;
 }
 .log__item {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 6px 8px;
+  display: grid;
+  grid-template-columns: 52px 44px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px;
+  padding: 2px 12px;
   border-bottom: 1px solid var(--border);
 }
 .log__item:last-child {
@@ -1812,31 +2186,40 @@ body {
 .log__item:hover {
   background: var(--bg-input);
 }
-/* 等级标签：小药丸，按级别着色 */
+/* 行首时间戳：tabular-nums 保证整列对齐 */
+.log__time,
+.err__time {
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-faint);
+}
+/* 等级标签：无边框小药丸，定宽成列对齐 */
 .log__tag {
-  flex: 0 0 auto;
-  margin-top: 1px;
-  padding: 1px 6px;
-  border-radius: 4px;
+  justify-self: start;
+  padding: 0 5px;
+  border: none;
+  border-radius: 3px;
   font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 600;
-  line-height: 1.5;
+  line-height: 14px;
   text-transform: uppercase;
-  letter-spacing: 0.4px;
+  letter-spacing: 0.3px;
   color: var(--text-dim);
-  background: var(--bg-input);
-  border: 1px solid var(--border);
+  background: var(--bg-hover);
+}
+.log__tag--info {
+  color: var(--accent);
+  background: var(--accent-soft);
 }
 .log__tag--warn {
   color: var(--log-warn-fg);
   background: var(--log-warn-bg);
-  border-color: var(--log-warn-border);
 }
 .log__tag--error {
   color: var(--danger);
   background: var(--danger-soft);
-  border-color: var(--danger-soft);
 }
 /* 内容区：基础类型内联、复合类型独占整行 */
 .log__content {
@@ -1845,10 +2228,10 @@ body {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  gap: 4px 10px;
+  gap: 3px 8px;
   font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.5;
+  font-size: 11px;
+  line-height: 1.45;
   color: var(--text);
 }
 .log__val {
@@ -1857,7 +2240,23 @@ body {
 }
 .log__json {
   flex: 1 1 100%;
-  padding: 2px 0;
+  padding: 0;
+}
+/* 日志内嵌 JSON 树比接口面板再紧一档，去掉多余上下留白 */
+.log__json .apt {
+  margin-top: 0;
+  font-size: 11px;
+  line-height: 1.4;
+}
+/* 根摘要行可点：hover 给底色提示；展开后明细列表缩进一级 */
+.log__json .apt__branch--root {
+  cursor: pointer;
+  border-radius: 4px;
+}
+.log__json .apt__list--nested {
+  margin-left: 4px;
+  padding-left: 14px;
+  border-left: 1px solid var(--border);
 }
 .log__empty {
   color: var(--text-faint);
@@ -2274,8 +2673,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(8, 10, 16, 0.55);
-  backdrop-filter: blur(2px);
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
 }
 .rp-card {
   width: 300px;
@@ -2456,8 +2855,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(8, 10, 16, 0.55);
-  backdrop-filter: blur(2px);
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
 }
 .login-modal {
   width: 320px;
@@ -2556,8 +2955,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(8, 10, 16, 0.55);
-  backdrop-filter: blur(2px);
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
 }
 .confirm-modal {
   width: 360px;
@@ -2646,11 +3045,45 @@ body {
 .confirm-modal__btn--warn:hover {
   background: var(--warn-hover);
 }
-.confirm-fade-enter-active,
-.confirm-fade-leave-active {
-  transition: opacity 0.15s ease;
+/* ===== 轻量浮层（帮助 / 快捷键弹层）统一进出场 =====
+   淡入 + 轻弹性缩放（过冲回稳），缩放原点由各浮层按锚定方位自定（transform-origin）；
+   离场快速收回、不回弹。 */
+.pop-enter-active {
+  transition: opacity 0.15s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.confirm-fade-enter-from,
-.confirm-fade-leave-to {
+.pop-leave-active {
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+.pop-enter-from,
+.pop-leave-to {
+  opacity: 0;
+  transform: translateY(6px) scale(0.95);
+}
+/* ===== 带遮罩模态的统一进出场动画 =====
+   适用：确认框 / 卡片网格预览 / 远端预览二维码 / 登录凭据 / 组件选择 / 节点属性等居中模态。
+   遮罩仅淡入/淡出；弹卡片（.modal-card）微抬 + 缩放入场、原路离场。
+   右侧抽屉（ee-drawer）保留自己的右滑语言，不复用本组。 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.modal-leave-active {
+  transition: opacity 0.16s ease;
+}
+.modal-enter-from,
+.modal-leave-to {
   opacity: 0;
 }
+/* 入场带一点弹性：back-out 过冲曲线让弹卡片微 overshoot 后回稳；离场干脆不回弹 */
+.modal-enter-active .modal-card {
+  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.modal-leave-active .modal-card {
+  transition: transform 0.16s ease;
+}
+.modal-enter-from .modal-card {
+  transform: translateY(14px) scale(0.94);
+}
+.modal-leave-to .modal-card {
+  transform: translateY(6px) scale(0.98);
+}