cardbuddy 0.6.0 → 0.8.0

package/dist/vendored/styles/app.css

@@ -3,8 +3,9 @@
    说明：设备模拟 UI（.dlg / .dtoast / .pk-* 等原生弹框白底）模拟真机外观，不随主题变化，保持固定。 */
 /* 配色 Token 与《深浅主题配色规范手册》映射（语义单一 / 双主题同义词切换）：
    --accent/-2/-soft/-border/-hover = 主色 color-primary（及 hover/active 变体）
-   --ok/-soft/-border/-strong       = 成功 success（深色提亮 #34D399 / 浅色 #10B981）
-   --warn/-soft/-border             = 警告 warning（琥珀）
+   --ok/-soft/-border/-strong/-solid = 成功 success（深色提亮 #34D399 / 浅色 #10B981）
+   --on-ok                           = 成功实心填充（--ok-solid）上的文字
+   --warn/-soft/-border/-hover      = 警告 warning（琥珀）；--on-warn = 警告实心填充上的深色文字
    --danger/-soft/-hover            = 错误 / 危险 error（红）
    --info/-soft/-border             = 信息 info（与主色同源，均为蓝）
    --on-accent                      = 主色填充上的文字（深色 #0F1115 / 浅色 #fff）
@@ -38,10 +39,16 @@
   --warn: #FBBF24;
   --warn-soft: rgba(251, 191, 36, 0.14);
   --warn-border: rgba(251, 191, 36, 0.4);
+  --warn-hover: #F59E0B;
+  --on-warn: #0F1115;
   --ok: #34D399;
   --ok-soft: rgba(52, 211, 153, 0.16);
   --ok-border: rgba(52, 211, 153, 0.45);
   --ok-strong: #34D399;
+  /* 成功态「实心填充」徽标（标签 / 角标浮在任意底色上时用）：--ok-solid 为底、--on-ok 为其上文字。
+     与 --ok-soft（半透明，仅适合压在已知面板色上）区分：实心版不透明，浮在白色缩略图上仍达 WCAG AA。 */
+  --ok-solid: #17734A;
+  --on-ok: #ffffff;
   --info: #6B83F7;
   --info-soft: rgba(107, 131, 247, 0.14);
   --info-border: rgba(107, 131, 247, 0.45);
@@ -57,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;
@@ -192,10 +202,14 @@
   --warn: #F59E0B;
   --warn-soft: rgba(245, 158, 11, 0.14);
   --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-border: rgba(16, 185, 129, 0.4);
   --ok-strong: #166534;
+  --ok-solid: #166534;
+  --on-ok: #ffffff;
   --info: #4F6BF2;
   --info-soft: rgba(79, 107, 242, 0.12);
   --info-border: rgba(79, 107, 242, 0.4);
@@ -382,6 +396,12 @@ body {
   height: var(--ctrl-md);
   padding: 0 8px;
 }
+/* 开关型图标按钮的「开启」态（如右侧接口调用面板开关）：用主题色标示当前已展开 */
+.app__btn--active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--accent-border);
+}
 /* 顶栏图标按钮（刷新 / 连接）与远端、op-group 统一为 28px（--ctrl-sm），不再高 32px */
 .app__bar .app__btn--icon {
   height: var(--ctrl-sm);
@@ -423,11 +443,16 @@ body {
 .app__icon--chev {
   transition: transform 0.15s;
 }
-/* 下拉项：保存类 hover 蓝色、同步类 hover 绿色（基础布局见 dropdown.css .app__remote-item） */
+/* 下拉项：保存/上传类 hover 蓝色与琥珀、同步类 hover 绿色（基础布局见 dropdown.css .app__remote-item） */
 .app__remote-item--save:hover {
   background: var(--accent-soft);
   color: var(--accent);
 }
+/* 切图上传：琥珀色，与「版本推送」（蓝）、「同步」（绿）区分——传的是素材不是版本 */
+.app__remote-item--upload:hover {
+  background: var(--warn-soft);
+  color: var(--warn);
+}
 .app__remote-item--sync:hover {
   background: var(--ok-soft);
   color: var(--ok);
@@ -845,6 +870,37 @@ body {
   position: relative; /* 作为绝对定位 splitter 的定位上下文 */
 }
 
+/* 中右工作区：纵向 flex——上为「调试面板 + 接口调用面板」两栏，下为贯穿两栏的共同状态栏。
+   状态栏由 DebugPanel 内 Teleport 注入 .workside__bar；该目标在 DOM 中先于两栏容器
+   （Teleport 挂载要求目标已存在），故用 order 把它视觉置底。 */
+.workside {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  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 {
   flex: 0 0 auto;
   display: flex;
@@ -877,21 +933,40 @@ 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;
   z-index: var(--z-sticky);
   transition: background 0.15s ease;
 }
-.splitter:hover,
-.splitter.is-dragging {
+/* 中右分隔条：以右侧「接口调用」面板右缘（即舞台右缘）回推面板宽度定位接缝 */
+.splitter--api {
+  left: auto;
+  right: calc(var(--api-panel-width, 360px) - 3px);
+}
+/* 拖拽高亮统一规格：左 / 右竖向分隔条与底部面板头部横向拖拽条，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,
@@ -1082,17 +1157,118 @@ body {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-  min-width: 300px;
+  /* 中栏最小宽度：不得小于三分之一屏幕宽度（与中右分隔条 startApiDrag 的夹取一致） */
+  min-width: 33.333vw;
   background: var(--bg-panel);
   border-left: 1px solid var(--border);
 }
+
+/* 右侧常驻「接口调用」面板：默认 360px 宽，可经中右分隔条拖拽调节（最小 320px，
+   宽度由 App 以 --api-panel-width CSS 变量下发），与预览列 / 调试面板呈左中右布局。
+   展开/收起由顶栏按钮与面板内 ✕ 控制（v-if 整体挂载/卸载）。 */
+.apipanel {
+  flex: 0 0 auto;
+  width: var(--api-panel-width, 360px);
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg-panel);
+  border-left: 1px solid var(--border);
+}
+.apipanel__head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  /* 与调试面板 tab 条同高（12px 上下 padding + 13px 字号 ≈ 42px），保证三条栏顶线对齐 */
+  height: 40px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border);
+}
+.apipanel__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+}
+.apipanel__spacer {
+  flex: 1 1 auto;
+}
+.apipanel__btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
+}
+.apipanel__btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+  border-color: var(--border);
+  color: var(--text);
+}
+.apipanel__btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.apipanel__btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.apipanel__body {
+  flex: 1 1 auto;
+  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);
 }
 .debug__tab {
   flex: 1;
-  padding: 12px 8px;
+  padding: 10px 8px;
+  height: 39px;
   background: transparent;
   border: none;
   color: var(--text-dim);
@@ -1133,12 +1309,14 @@ body {
   position: relative;
   flex: 1 1 auto;
   overflow: auto;
-  padding: 12px 16px;
+  /* padding: 12px 16px; */
 }
-.debug__placeholder {
-  display: block;
-  width: 100%;
-  height: 38px;
+.debug__meta {
+  margin: 0;
+  padding: 8px 12px 0; /* 底部留白交给 hint 页脚，保证贴底无缝 */
+  display: flex;
+  flex-direction: column;
+  min-height: 100%; /* 内容不足一屏时也能把 hint 推到面板底部 */
 }
 .debug__empty {
   color: var(--text-faint);
@@ -1184,8 +1362,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;
@@ -1198,14 +1380,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);
 }
@@ -1216,13 +1398,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;
@@ -1231,27 +1437,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;
@@ -1282,63 +1495,72 @@ body {
   color: var(--danger);
   background: var(--danger-soft);
 }
-/* 接口调用标签页工具条（仿 Chrome 控制台） */
-.debug__clear {
-  /* 通用带边框按钮：固定在接口调用 tab 右上角、不随滚动，方便随时清空日志 */
-  position: sticky;
-  top: 0;
-  float: right;
-  z-index: var(--z-sticky);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  background: var(--bg-input);
-  color: var(--text);
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  cursor: pointer;
-  box-shadow: -10px 0 10px var(--bg-panel);
-  transition: background 0.15s, border-color 0.15s, transform 0.05s;
-}
-.debug__clear:hover:not(:disabled) {
-  background: var(--bg-hover);
-  border-color: var(--accent-border);
-}
-.debug__clear:active:not(:disabled) {
-  transform: translateY(1px);
-}
-.debug__clear:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-/* 接口调用列表顶部留白，避免首行被右上角浮动的清空按钮遮挡 */
-.debug__list--api {
-  padding-top: 34px;
-}
 .debug__list {
   list-style: none;
   margin: 0;
   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;
@@ -1403,12 +1625,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);
@@ -1456,7 +1693,7 @@ body {
   /* right:0 让 JSON 树滚动条紧贴面板最右边（与其他 tab 用 body padding 作
      16px 滚动框不同，本 tab 滚动交给内部 .debug__scope-tree，需要贴边）；
      left:16px 与 body 的 16px 内边距对齐，让树内容左缘与其他 tab 一致。 */
-  inset: 10px 10px 10px 16px;
+  inset: 0;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -1467,36 +1704,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 内容区），
@@ -1521,8 +1790,8 @@ body {
   padding: 12px 14px;
   background: var(--bg-input);
   color: var(--text);
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
+  /* 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;
@@ -1531,9 +1800,9 @@ body {
   overflow: auto;
   outline: none;
 }
-.debug__raw-editor:focus {
+/* .debug__raw-editor:focus {
   border-color: var(--accent-border);
-}
+} */
 /* CodeJar 托管的原始 JSON 编辑器：Prism(json) 语法高亮配色（与 SetCode 暗色面板一致） */
 .debug__raw-editor .token.property,
 .debug__raw-editor .token.tag,
@@ -1639,12 +1908,12 @@ body {
   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);
 }
@@ -1655,10 +1924,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);
@@ -1679,18 +1944,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;
@@ -1699,33 +1969,100 @@ 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;
 }
-/* 事件面板日志：每行 = 等级标签 + 内容（语法高亮 / JSON 折叠） */
+.errpanel__body .empty-state__hint {
+  max-width: 460px;
+}
+/* 事件面板日志：控制台风格高密度行 = 时间 | 等级 | 内容，发丝线分隔 */
 .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 {
@@ -1734,31 +2071,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 {
@@ -1767,10 +2113,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 {
@@ -1779,7 +2125,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);
@@ -2196,8 +2558,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;
@@ -2378,8 +2740,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;
@@ -2478,8 +2840,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;
@@ -2503,6 +2865,10 @@ body {
 .confirm-modal__title.is-danger {
   color: var(--danger);
 }
+/* 警告级（warn）：覆盖推送类操作（版本推送等）——标题与图标取琥珀警告色，见配色规范 §2.7 / §3.4 */
+.confirm-modal__title.is-warn {
+  color: var(--warn);
+}
 .confirm-modal__icon {
   width: 18px;
   height: 18px;
@@ -2555,6 +2921,15 @@ body {
 .confirm-modal__btn--danger:hover {
   background: var(--danger-hover);
 }
+/* 警告级确认按钮：琥珀实心 + 深色文字（琥珀底白字对比度不足，双主题统一深色 ink） */
+.confirm-modal__btn--warn {
+  border-color: var(--warn);
+  background: var(--warn);
+  color: var(--on-warn);
+}
+.confirm-modal__btn--warn:hover {
+  background: var(--warn-hover);
+}
 .confirm-fade-enter-active,
 .confirm-fade-leave-active {
   transition: opacity 0.15s ease;