cardbuddy 0.6.0

package/dist/vendored/styles/app.css

@@ -0,0 +1,2565 @@
+/* 预览外壳样式 —— 配色集中在 :root（深色主题，贴近 Codex / WorkBuddy 暗色风格）。
+   所有关键颜色均通过配色变量设置；[data-theme="light"] 复用同名变量切换到浅色主题。
+   说明：设备模拟 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（琥珀）
+   --danger/-soft/-hover            = 错误 / 危险 error（红）
+   --info/-soft/-border             = 信息 info（与主色同源，均为蓝）
+   --on-accent                      = 主色填充上的文字（深色 #0F1115 / 浅色 #fff）
+   --bg-* / --text-* / --border*    = 中性背景 / 文本 / 边框（Slate 阶梯）
+   --st-id / --st-badge-bg / --st-hl-bg = 结构树节点 id / 类型徽标 / 选中高亮（蓝，非绿）
+   已移除冲突的第 4 色相 --teal 与重复绿 --save（绿仅代表 success，见规范 §七.4）。 */
+:root {
+  --bg-app: #0e0f13;
+  --bg-bar: #15171c;
+  --bg-panel: #181b21;
+  --bg-stage: #0b0c0f;
+  --bg-input: #1b1e25;
+  --bg-hover: #232733;
+  --bg-active: #2b2f3d;
+  --bg-pop: rgba(28, 31, 38, 0.96);
+  --bg-soft: #0f1219;
+  --border: #2a2e38;
+  --border-strong: #353b48;
+  --text: #e8eaf0;
+  --text-dim: #949aab;
+  --text-faint: #626a7d;
+  --accent: #6B83F7;
+  --accent-2: #5A6FF0;
+  --accent-soft: rgba(107, 131, 247, 0.14);
+  --accent-border: rgba(107, 131, 247, 0.45);
+  --accent-hover: #8195F9;
+  --danger: #F87171;
+  --danger-soft: rgba(248, 113, 113, 0.14);
+  --danger-hover: #EF4444;
+  /* 语义状态色（警告/成功/信息/保存）及其柔和底、描边变体 */
+  --warn: #FBBF24;
+  --warn-soft: rgba(251, 191, 36, 0.14);
+  --warn-border: rgba(251, 191, 36, 0.4);
+  --ok: #34D399;
+  --ok-soft: rgba(52, 211, 153, 0.16);
+  --ok-border: rgba(52, 211, 153, 0.45);
+  --ok-strong: #34D399;
+  --info: #6B83F7;
+  --info-soft: rgba(107, 131, 247, 0.14);
+  --info-border: rgba(107, 131, 247, 0.45);
+  /* 强调色填充上的文字（按钮实心态等） */
+  --on-accent: #0F1115;
+  /* 层级阴影与遮罩（弹层 / 抽屉 / 卡片框 / 滚动容器 / 模态遮罩） */
+  --radius: 8px;
+  --radius-sm: 6px;
+  --shadow-pop: rgba(0, 0, 0, 0.55);
+  --shadow-card: rgba(0, 0, 0, 0.5);
+  --shadow-drawer: rgba(0, 0, 0, 0.45);
+  --shadow-toast: rgba(0, 0, 0, 0.28);
+  --scrim: rgba(0, 0, 0, 0.55);
+  --scrim-soft: rgba(0, 0, 0, 0.45);
+  --scrim-faint: rgba(0, 0, 0, 0.4);
+  /* 顶栏渐变、分隔条、分隔条抓手微光、白色叠加微光 */
+  --bar-grad: linear-gradient(180deg, #171a20, #131519);
+  --splitter: #5b6cff;
+  --splitter-grip: rgba(255, 255, 255, 0.28);
+  --overlay-tint: rgba(255, 255, 255, 0.03);
+  --overlay-tint-strong: rgba(255, 255, 255, 0.28);
+  /* 调试面板细节色（接口调用条目、日志、标签、复制成功等） */
+  --err-item-fg: #ffb3a3;
+  --api-item-fg: #bcd3ff;
+  --api-item-border: rgb(124 140 255 / 20%);
+  --api-item-bg: #384c890f;
+  --copy-ok: #8fe39a;
+  --tag-ok-fg: #1a7f37;
+  --tag-ok-bg: rgba(26, 127, 55, 0.14);
+  --tag-warn-fg: #b58105;
+  --tag-warn-bg: rgba(181, 129, 5, 0.16);
+  --log-warn-fg: #e0b341;
+  --log-warn-bg: rgba(224, 179, 65, 0.14);
+  --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);
+  /* 语法高亮配色（JSON 树 / 结构树 / 代码编辑器），随主题切换；暗色默认=原硬编码值，保证暗色外观不变 */
+  --jt-key: #9db4ff;
+  --jt-string: #8fe39a;
+  --jt-number: #f0b86e;
+  --jt-boolean: #f08e8e;
+  --jt-null: #626a7d;
+  --jt-faint: #8b93a7;
+  --jt-ring: rgba(157, 180, 255, 0.25);
+  --jt-del-fg: #f08e8e;
+  --jt-del-bg: rgba(240, 100, 100, 0.15);
+  --jt-add-bg: rgba(157, 180, 255, 0.1);
+  --st-label: #cccccc;
+  --st-id: #8b93a7;
+  --st-badge-bg: #6B83F7;
+  --st-badge-fg: #ffffff;
+  --st-hl-bg: rgba(107, 131, 247, 0.28);
+  --code-comment: #6b7280;
+  --code-punc: #9ca3af;
+  --code-prop: #f0883e;
+  --code-str: #7ee787;
+  --code-num: #79c0ff;
+  --code-kw: #ff7b72;
+  --code-fn: #d2a8ff;
+  --code-var: #ffa657;
+  --code-binding: #56d4dd;
+  --code-warn: #f59e0b;
+  /* === CardBuddy UI 尺寸与节奏规范手册 §四（单一来源，尺寸/节奏不随主题变）== */
+  /* 间距 8 pt 网格 */
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 32px;
+  --space-8: 40px;
+  --space-9: 48px;
+  /* 字号与行高 */
+  --fs-xs:   11px; --lh-xs:   16px;
+  --fs-sm:   12px; --lh-sm:   18px;
+  --fs-base: 13px; --lh-base: 20px;
+  --fs-md:   14px; --lh-md:   22px;
+  --fs-lg:   15px; --lh-lg:   22px;
+  --fs-xl:   16px; --lh-xl:   24px;
+  --fs-2xl:  20px; --lh-2xl:  28px;
+  /* 圆角（新增阶梯：md/lg/xl/2xl/pill；--radius/--radius-sm 为历史变量，渐进迁移到 --radius-md/--radius-sm） */
+  --radius-xs:   4px;
+  --radius-md:   8px;
+  --radius-lg:   10px;
+  --radius-xl:   12px;
+  --radius-2xl:  16px;
+  --radius-pill: 999px;
+  /* 控件高度阶梯 */
+  --ctrl-xs: 24px;
+  --ctrl-sm: 28px;
+  --ctrl-md: 32px;
+  --ctrl-lg: 36px;
+  --ctrl-xl: 40px;
+  /* 列表 / 树行高 */
+  --row-h: 28px;
+  /* 图标尺寸 / 描边 */
+  --icon-xs: 12px;
+  --icon-sm: 14px;
+  --icon-md: 16px;
+  --icon-lg: 20px;
+  --icon-xl: 24px;
+  --stroke: 1.75;
+  /* 阴影形状（颜色交给配色手册） */
+  --shadow-1: 0 1px 2px var(--shadow-card);
+  --shadow-2: 0 4px 12px var(--shadow-card);
+  --shadow-3: 0 8px 24px var(--shadow-card);
+  --shadow-4: 0 20px 64px var(--shadow-pop);
+  --shadow-5: -20px 0 32px var(--shadow-drawer);
+  /* z-index 阶梯（单一来源，禁止中间塞值） */
+  --z-base:         1;
+  --z-sticky:       20;
+  --z-overlay-low:  50;
+  --z-overlay:      60;
+  --z-pop:          70;
+  --z-panel:        100;
+  --z-modal:        1000;
+  --z-deviceui:     1100;
+  --z-appmodal:     2000;
+  --z-toast-app:    2100;
+}
+
+/* 浅色主题：以白色为基色调，复用同名变量整体切换。仅覆盖配色变量，布局不变。 */
+:root[data-theme='light'] {
+  --bg-app: #f4f5f7;
+  --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;
+  --accent: #4F6BF2;
+  --accent-2: #3D57D9;
+  --accent-soft: rgba(79, 107, 242, 0.12);
+  --accent-border: rgba(79, 107, 242, 0.4);
+  --accent-hover: #3D57D9;
+  --danger: #EF4444;
+  --danger-soft: rgba(239, 68, 68, 0.12);
+  --danger-hover: #DC2626;
+  --warn: #F59E0B;
+  --warn-soft: rgba(245, 158, 11, 0.14);
+  --warn-border: rgba(245, 158, 11, 0.4);
+  --ok: #10B981;
+  --ok-soft: rgba(16, 185, 129, 0.14);
+  --ok-border: rgba(16, 185, 129, 0.4);
+  --ok-strong: #166534;
+  --info: #4F6BF2;
+  --info-soft: rgba(79, 107, 242, 0.12);
+  --info-border: rgba(79, 107, 242, 0.4);
+  --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);
+  --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);
+  /* 语法高亮配色：浅色主题参考 GitHub Light / VSCode Light+，保证白底上的可读性 */
+  --jt-key: #953800;
+  --jt-string: #0a3069;
+  --jt-number: #116329;
+  --jt-boolean: #cf222e;
+  --jt-null: #57606a;
+  --jt-faint: #6b7280;
+  --jt-ring: rgba(91, 108, 255, 0.3);
+  --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;
+  --st-id: #64748b;
+  --st-badge-bg: #4F6BF2;
+  --st-badge-fg: #ffffff;
+  --st-hl-bg: rgba(79, 107, 242, 0.16);
+  --code-comment: #6e7781;
+  --code-punc: #6e7781;
+  --code-prop: #953800;
+  --code-str: #0a3069;
+  --code-num: #0550ae;
+  --code-kw: #cf222e;
+  --code-fn: #8250df;
+  --code-var: #953800;
+  --code-binding: #0d9488;
+  --code-warn: #b58105;
+}
+
+* {
+  box-sizing: border-box;
+  /* 移除浏览器默认 focus 轮廓（UA :focus outline），统一由组件自定义 focus 视觉
+     （如 .st-input 的 border + box-shadow 光环、.app__btn 的 hover/active）。
+     author 规则优先级高于 UA，故此处可全局屏蔽原生 outline。 */
+  outline: none;
+}
+
+/* 表单控件继承外壳字体与颜色，去掉 UA 默认的数字字体 / 外边距 / 颜色等不一致样式；
+   组件类（.st-input / .st-select / .app__btn 等）特异性更高，会覆盖以下继承值。 */
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  background: var(--bg-app);
+  color: var(--text);
+  -webkit-font-smoothing: antialiased;
+}
+#app {
+  height: 100vh;
+}
+
+/* 全局滚动条（Firefox） */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-thumb) transparent;
+}
+/* 全局滚动条（WebKit） */
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+  border-radius: 8px;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-thumb-hover);
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--bg-app);
+}
+
+.app__bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  height: 48px;
+  background: var(--bar-grad);
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+.app__logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+}
+.app__logo-icon {
+  width: var(--icon-xl); /* 24px：品牌 logo 图标 */
+  height: var(--icon-xl);
+  display: block;
+}
+.app__logo-version {
+  font-size: var(--fs-xs); /* 11px：顶栏版本号徽标小字 */
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--text-faint);
+}
+
+.app__btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--ctrl-md);
+  padding: 0 12px;
+  background: var(--bg-input);
+  color: var(--text);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s, border-color 0.15s, transform 0.05s;
+}
+.app__btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+.app__btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.app__btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.app__btn--icon {
+  height: var(--ctrl-md);
+  padding: 0 8px;
+}
+/* 顶栏图标按钮（刷新 / 连接）与远端、op-group 统一为 28px（--ctrl-sm），不再高 32px */
+.app__bar .app__btn--icon {
+  height: var(--ctrl-sm);
+}
+/* 远端分组：合并「远端保存 / 远端预览 / 全量同步 / 选中卡片同步」为一个下拉，
+   组名「远端」，云图标；保存类项蓝色、同步类项绿色，与本地保存区分。 */
+.app__btn--remote {
+  height: var(--ctrl-sm);
+  padding: 0 10px;
+  font-size: 12px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--accent-border);
+}
+.app__btn--remote:hover:not(:disabled) {
+  background: var(--accent);
+  color: var(--on-accent);
+  border-color: var(--accent);
+}
+/* 已保存但校验不符：触发按钮切换为琥珀警告色 */
+.app__btn--remote.app__btn--warn {
+  background: var(--warn-soft);
+  color: var(--warn);
+  border-color: var(--warn-border);
+}
+.app__btn--remote.app__btn--warn:hover:not(:disabled) {
+  background: var(--warn);
+  color: var(--on-accent);
+  border-color: var(--warn);
+}
+.app__remote-menu {
+  position: relative;
+  display: inline-flex;
+}
+.app__remote-menu .app__btn--remote {
+  gap: 6px;
+}
+/* 触发器内的下拉箭头：菜单展开时旋转 180°（由 .app__icon--chev--open 驱动，见 dropdown.css） */
+.app__icon--chev {
+  transition: transform 0.15s;
+}
+/* 下拉项：保存类 hover 蓝色、同步类 hover 绿色（基础布局见 dropdown.css .app__remote-item） */
+.app__remote-item--save:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.app__remote-item--sync:hover {
+  background: var(--ok-soft);
+  color: var(--ok);
+}
+/* 编辑历史 / 复制 按钮组：配色与通用下拉框组件(.dd__trigger)一致 ——
+   bg-input 底色、border 边框色、text 文本色、radius-sm 圆角；连体分段控件（外圆角、内分隔线平方）。 */
+.app__op-group {
+  display: inline-flex;
+}
+.app__op-group > .app__btn {
+  background: var(--bg-input);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  margin-left: -1px;
+  height: var(--ctrl-sm);
+  padding: 0 10px;
+  font-size: 12px;
+}
+.app__op-group > .app__btn:first-child {
+  margin-left: 0;
+  border-top-left-radius: var(--radius-sm, 6px);
+  border-bottom-left-radius: var(--radius-sm, 6px);
+}
+.app__op-group > .app__btn:last-child {
+  border-top-right-radius: var(--radius-sm, 6px);
+  border-bottom-right-radius: var(--radius-sm, 6px);
+}
+.app__op-group > .app__btn:hover:not(:disabled) {
+  position: relative;
+  z-index: var(--z-base);
+  border-color: var(--border-strong);
+  background: var(--bg-hover);
+}
+.app__op-group > .app__btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+/* 顶栏「保存到本地」：当前显示版本与本地磁盘不一致（撤销/重做到历史版本或编辑未保存）时
+   高亮（实心强调色 + 外发光环），提示可点击保存；一致时仅作普通分段按钮、置灰不可用。 */
+/* 禁用态优先：即使带 is-dirty（脏标记）也保持置灰，绝不能显得可点 */
+.app__btn--history-save.is-dirty:disabled {
+  background: var(--bg-input);
+  color: var(--text);
+  border-color: var(--border-strong);
+  box-shadow: none;
+  opacity: 0.5;
+  cursor: default;
+}
+.app__btn--history-save.is-dirty:not(:disabled) {
+  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;
+  align-items: center;
+  gap: 12px;                  /* 与 .app__bar 的 gap 保持一致 */
+}
+/* 本地开发服务设置入口（前后端分离 Phase 2） */
+.app__dev-svc {
+  position: relative;
+  display: inline-flex;
+}
+.app__btn--warn {
+  background: var(--warn-soft);
+  color: var(--warn);
+  border-color: var(--warn-border);
+}
+/* 本地开发服务「已连接」状态：绿色常亮（绿=健康/连通，对齐语义色规范 §七.4；
+   仅在 apiBaseResolved !== null 即已配置并启用本地服务时点亮，断开后回到 --warn 警示态） */
+.app__btn--connected {
+  background: var(--ok-soft);
+  color: var(--ok);
+  border-color: var(--ok-border);
+}
+.app__btn--connected:hover:not(:disabled) {
+  background: var(--ok-soft);
+  color: var(--ok-strong);
+  border-color: var(--ok);
+}
+/* 本地开发服务「连接中 / 重连中」：琥珀色（正在建立或重连 SSE 连接） */
+.app__btn--reconnecting {
+  background: var(--warn-soft);
+  color: var(--warn);
+  border-color: var(--warn-border);
+}
+/* 本地开发服务「已断开」：红色（连接彻底失败或服务已停止，见 onDevServiceState 的 watchdog） */
+.app__btn--disconnected {
+  background: var(--danger-soft);
+  color: var(--danger);
+  border-color: var(--danger);
+}
+.app__btn--sm {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+.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);
+  text-align: left;
+}
+.app__dev-svc-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.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);
+}
+.app__dev-svc-row--col {
+  flex-direction: column;
+  align-items: stretch;
+}
+.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 光环。 */
+.app__dev-svc-row input[type='text'],
+.app__dev-svc-row input[type='password'],
+.app__dev-svc-row textarea {
+  width: 100%;
+  min-width: 0;
+  height: var(--ctrl-md);
+  padding: 0 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 12px;
+  font-family: inherit;
+  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 {
+  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 {
+  color: var(--text-faint);
+}
+.app__dev-svc-row .switch {
+  flex: 0 0 auto;
+}
+.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 {
+  color: var(--danger, #ef4444);
+  background: var(--danger-soft, rgba(239, 68, 68, 0.12));
+}
+/* 外部改动自动重载提示条：信息蓝（品牌主色 #0079F2 的柔和变体），非阻塞、自动消失 */
+.app__extreload-banner {
+  color: var(--info, #0079F2);
+  background: var(--info-soft, rgba(0, 121, 242, 0.12));
+}
+/* 主题切换开关：复用同名 CSS 变量换肤；轨道/滑块配色随主题自适应 */
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s;
+}
+.theme-toggle:hover {
+  color: var(--text);
+}
+.theme-toggle__track {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  transition: background 0.18s, border-color 0.18s;
+}
+.theme-toggle__thumb {
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-faint);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.18s ease, background 0.18s;
+}
+.theme-toggle__icon {
+  width: 11px;
+  height: 11px;
+  color: var(--bg-app);
+}
+/* 浅色主题：滑块滑到右侧，轨道着 accent */
+:root[data-theme='light'] .theme-toggle__track {
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
+}
+:root[data-theme='light'] .theme-toggle__thumb {
+  transform: translateY(-50%) translateX(16px);
+  background: var(--accent);
+}
+:root[data-theme='light'] .theme-toggle__icon {
+  color: var(--on-accent);
+}
+/* 开关 Switch（通用受控组件，对齐 .theme-toggle 视觉范式，遵循《配色规范》§4.5）：
+   关闭=中性灰（--bg-input / --border-strong / --text-faint），开启=主色实心（--accent），
+   滑块用主色上的文字（--on-accent）；双主题仅切换同名 Token 取值，不写颜色分支、零硬编码。 */
+.switch {
+  display: inline-flex;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  vertical-align: middle;
+  line-height: 0;
+}
+.switch--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.switch__track {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  box-sizing: border-box;
+  transition: background 0.18s ease, border-color 0.18s ease;
+}
+.switch__thumb {
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--text-faint);
+  transition: transform 0.18s ease, background 0.18s ease;
+}
+.switch--on .switch__track {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.switch--on .switch__thumb {
+  transform: translateY(-50%) translateX(16px);
+  background: var(--on-accent);
+}
+/* 整卡校验徽标（Q3：仅 ok/error，不展开 bindingErrors 明细） */
+.app__badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-input);
+  color: var(--text-dim);
+  font-size: 11px;
+  font-weight: 600;
+  user-select: none;
+  white-space: nowrap;
+}
+.app__badge-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text-faint);
+  flex: 0 0 auto;
+}
+.app__badge--ok {
+  color: var(--ok);
+  border-color: var(--ok-border);
+  background: var(--ok-soft);
+}
+.app__badge--ok .app__badge-dot { background: var(--ok); }
+.app__badge--error {
+  color: var(--danger);
+  border-color: var(--danger-soft);
+  background: var(--danger-soft);
+}
+.app__badge--error .app__badge-dot { background: var(--danger); }
+.app__badge--pending {
+  color: var(--warn);
+  border-color: var(--warn-border);
+  background: var(--warn-soft);
+}
+.app__badge--pending .app__badge-dot {
+  background: var(--warn);
+  animation: app-badge-pulse 1s ease-in-out infinite;
+}
+.app__badge--nopython,
+.app__badge--fail {
+  color: var(--text-faint);
+  border-color: var(--border);
+  background: var(--bg-input);
+}
+.app__badge--nopython .app__badge-dot,
+.app__badge--fail .app__badge-dot { background: var(--text-faint); }
+@keyframes app-badge-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+.app__icon {
+  width: 15px;
+  height: 15px;
+  display: block;
+}
+.app__icon--spin {
+  animation: app__spin 0.8s linear infinite;
+}
+@keyframes app__spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.app__stage {
+  flex: 1 1 auto;
+  display: flex;
+  min-height: 0;
+  position: relative; /* 作为绝对定位 splitter 的定位上下文 */
+}
+
+.phone {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 水平居中缩放后的手机框 */
+  justify-content: center; /* 垂直居中：contain 缩放后手机始终完整，留白上下均衡 */
+  min-height: 0;
+  overflow: hidden; /* contain 缩放已保证手机不溢出，隐藏兜底避免偶发 1px 滚动条 */
+  background:
+    radial-gradient(circle at 30% 20%, rgba(124, 140, 255, 0.05), transparent 60%),
+    var(--bg-stage);
+}
+/* 缩放外框：占满整列（宽高均填满预览列），内部 flex 居中手机，保证「框架填满宽高、手机居中」 */
+.phone__frame {
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+/* 画布层：直接按实际列宽/列高布局（width/height 100% 填满外框），不再使用 transform 缩放；内部 device-bar 固定高、phone-viewport 弹性填充 */
+.phone__scaler {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 拖拽分隔条：覆盖在预览列与调试面板的接缝上，绝对定位不占布局宽度 */
+.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 {
+  background: var(--splitter);
+}
+/* 拖拽中：禁用文本选择，全局保持 col-resize 光标 */
+.phone--dragging,
+.phone--dragging * {
+  user-select: none !important;
+  cursor: col-resize !important;
+}
+
+/* 设备工具条（类 Chrome DevTools 设备模式顶部预留的细条）：
+   与手机框等宽、紧贴其上，通过下拉选择画布背景 */
+.device-bar {
+  flex: 0 0 auto;
+  width: 100%;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  background: var(--bg-bar);
+  border-bottom: 1px solid var(--border);
+}
+/* 背景下拉框由 Dropdown 组件统一渲染（.dd 体系），无边框模式见 dropdown.css 的 .dd--borderless */
+.device-bar__spacer {
+  flex: 1 1 auto;
+}
+.device-bar__info {
+  color: var(--text-faint);
+  font-size: 12px;
+  white-space: nowrap;
+}
+/* 底部状态条刷新按钮：仅图标、与左侧尺寸文本上下对齐（同高 28px / 居中） */
+.statusbar__refresh {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  color: var(--text-faint);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, transform 0.05s;
+}
+.statusbar__refresh:hover:not(:disabled) {
+  color: var(--accent);
+}
+.statusbar__refresh:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.statusbar__refresh:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.device-bar__label {
+  color: var(--text-faint);
+  font-size: 12px;
+  white-space: nowrap;
+}
+/* 预览区底部状态条：与顶部 device-bar 同款风格，固定于画布底部展示画布宽高 */
+.preview-statusbar {
+  flex: 0 0 auto;
+  width: 100%;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 12px;
+  background: var(--bg-bar);
+  border-top: 1px solid var(--border);
+}
+/* 预览区底部状态条：本地开发服务连接状态（连接图标 + 状态文案）。
+   配色复用顶栏「连接」按钮的语义色类（app__btn--connected / --reconnecting / --disconnected / --warn），
+   仅取各自 color，不带入按钮的背景与边框，保证与右上角按钮状态实时一致；
+   通过更高优先级选择器覆盖背景/边框，颜色仍由各自语义色类提供。 */
+/* 底部状态栏「本地开发服务连接状态」指示器（事件按钮之后）：
+   复用顶栏「连接」按钮同款语义色类（app__btn--connected / --reconnecting / --disconnected / --warn），
+   仅取各自 color，用更高优先级(0,2,0)覆盖其按钮背景/边框与默认文字色，保证与右上角按钮实时一致。 */
+.statusbar__conn-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
+.statusbar .app__btn--connected,
+.statusbar .app__btn--reconnecting,
+.statusbar .app__btn--disconnected,
+.statusbar .app__btn--warn {
+  background: transparent;
+  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); }
+
+/* 颜色选择器（@ckpack/vue-color Sketch）预设区顶部分隔线：与系统边框色保持一致，
+   覆盖组件默认的 1px solid #eee（深色主题下刺眼）。组件样式为全局注入且非 scoped，
+   用 !important 确保稳定覆盖其载入顺序。 */
+.vc-sketch-presets {
+  border-top-color: var(--border) !important;
+}
+
+/* 固定视口：弹层（alertCard / alertDialog / toast）的包含块，
+   不滚动，遮罩 absolute inset:0 始终精确覆盖可视区域 */
+.phone-viewport {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  box-shadow: 0 12px 48px var(--shadow-pop);
+  cursor: default;
+}
+.phone__screen {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  /* 作为选中遮罩覆盖层 (.ce-sel-overlay) 的绝对定位包含块 */
+  position: relative;
+  /* 长卡片超出高度时，在手机框内纵向滚动（背景固定不随内容滚动） */
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* 隐藏滚动条但保留滚动能力（Firefox / 旧版 Edge） */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+/* Photoshop 透明区棋盘格：白 + 浅灰 16px 方格，用于透出卡片半透明区域 */
+.phone__screen--bg-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: 16px 16px;
+  background-position: 0 0, 8px 8px;
+}
+.phone__screen--bg-white {
+  background: #ffffff;
+}
+.phone__screen--bg-gray {
+  background: #f0f0f0;
+}
+.phone__screen::-webkit-scrollbar {
+  display: none; /* WebKit：隐藏滚动条（仍可滚动） */
+}
+
+/* 节点选中遮罩覆盖层（DevTools 风格）：作为 .phone__screen 的子节点，绝对定位在
+   屏幕 content 坐标系，随内容滚动贴合选中元素。pointer-events:none 不挡交互；
+   box-sizing:border-box 让虚线边框不撑大尺寸；z-index 高于卡片内容。 */
+.ce-sel-overlay {
+  position: absolute;
+  background: rgba(66, 133, 244, 0.18);
+  pointer-events: none;
+  box-sizing: border-box;
+  z-index: var(--z-overlay-low);
+}
+
+/* 结构树 hover 参考线（Photoshop 风格辅助线）：一对竖线（元素左/右边缘，贯穿画布全高）
+   + 一对横线（元素上/下边缘，贯穿画布全宽）。荧光绿，与选中态蓝色虚线框区分；
+   z-index 低于选中态，不与选中框争图层。覆盖层为 .phone__screen 子节点，随内容滚动。 */
+.ce-guides {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: var(--z-overlay-low);
+}
+.ce-guide {
+  position: absolute;
+  background: #68ffff;
+}
+/* 竖线：宽 1px，纵向贯穿画布全高（height 由容器 100% 撑开） */
+.ce-guide--v {
+  top: 0;
+  width: 1px;
+  height: 100%;
+  transform: translateX(-0.5px);
+}
+/* 横线：高 1px，横向贯穿画布全宽（width 由容器 100% 撑开） */
+.ce-guide--h {
+  left: 0;
+  height: 1px;
+  width: 100%;
+  transform: translateY(-0.5px);
+}
+
+/* 调试面板 */
+.debug {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  background: var(--bg-panel);
+  border-left: 1px solid var(--border);
+}
+.debug__tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+.debug__tab {
+  flex: 1;
+  padding: 12px 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  /* border-bottom: 2px solid transparent; */
+  transition: color 0.15s;
+  position: relative;
+}
+.debug__tab:hover {
+  color: var(--text);
+}
+.debug__tab--active {
+  color: var(--accent);
+  /* border-bottom-color: var(--accent); */
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 20%;
+    right: 20%;
+    height: 2px;
+    background: var(--accent);
+  }
+}
+.debug__count {
+  display: inline-block;
+  min-width: 16px;
+  padding: 0 5px;
+  margin-left: 5px;
+  border-radius: 999px;
+  background: var(--bg-hover);
+  color: var(--text-dim);
+  font-size: 12px;
+}
+.debug__body {
+  position: relative;
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 12px 16px;
+}
+.debug__placeholder {
+  display: block;
+  width: 100%;
+  height: 38px;
+}
+.debug__empty {
+  color: var(--text-faint);
+  font-size: 13px;
+  text-align: center;
+}
+/* 来源 tab（Phase E：导入来源可追溯） */
+.debug__meta-list {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.debug__meta-row {
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  gap: 8px;
+  align-items: baseline;
+  font-size: 13px;
+}
+.debug__meta-row dt {
+  color: var(--text-faint);
+  margin: 0;
+}
+.debug__meta-row dd {
+  margin: 0;
+  color: var(--text);
+  word-break: break-all;
+}
+.debug__meta-row code {
+  font-family: var(--mono, ui-monospace, monospace);
+  font-size: 12px;
+  background: var(--bg-hover);
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+.debug__meta-muted {
+  color: var(--text-faint);
+  font-size: 12px;
+}
+.debug__meta-err {
+  color: var(--danger);
+  font-size: 12px;
+}
+.debug__meta-hint {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  color: var(--text-faint);
+  font-size: 12px;
+  line-height: 1.6;
+}
+/* 运行态面板（点击状态栏「运行态」指示器弹出 / 收起）。高度由面板头部拖拽调整
+   （startResize，无专门拖拽节点，与预览区宽度调节同一套 mousedown 机制），初始 240px，
+   约束 [120px, 60vh]，与错误/事件面板共用。 */
+.statepanel {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  /* 初始高度 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);
+}
+.statepanel__head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  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);
+  /* 头部即拖拽手柄（无专门节点）：整条可抓取，向上拖放大面板 */
+  cursor: row-resize;
+  user-select: none;
+}
+.statepanel__title {
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+.statepanel__title code {
+  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 12px;
+  color: var(--accent);
+}
+.statepanel__close {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.statepanel__close:hover {
+  color: var(--text);
+}
+.statepanel__tree {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 8px 12px 10px;
+}
+
+/* 状态栏「运行态」指示器：复用问题/事件指示器的统一语言（无边框/无圆角/无 hover 背景块）。
+   展开时仅文字着 accent 色，与 is-log 一致，作为「面板已打开」的轻量提示。 */
+.statusbar__item--prob.is-open {
+  color: var(--accent);
+}
+.debug__tag {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.debug__tag--ok {
+  color: var(--ok-strong);
+  background: var(--ok-soft);
+}
+.debug__tag--warn {
+  color: var(--tag-warn-fg);
+  background: var(--tag-warn-bg);
+}
+.debug__tag--err {
+  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;
+  margin-bottom: 6px;
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 1.6;
+  word-break: break-all;
+}
+.debug__item--err {
+  background: var(--danger-soft);
+  color: var(--err-item-fg);
+}
+.debug__item--api {
+  border: 1px solid var(--api-item-border);
+  color: var(--api-item-fg);
+  background: var(--api-item-bg);
+}
+.debug__kind {
+  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 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.debug__copy-ic {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 22px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--text-faint);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.debug__copy-ic:hover {
+  background: var(--bg-hover);
+  border-color: var(--border);
+  color: var(--text);
+}
+.debug__copy-ok {
+  font-size: 14px;
+  color: var(--copy-ok);
+  line-height: 1;
+}
+
+/* 接口调用「返回数据」结构化折叠树（复用 json-tree.css 的 .jt__* 配色） */
+.apt {
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-dim);
+  margin-top: 4px;
+}
+.apt__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.apt__node {
+  position: relative;
+}
+.apt__branch,
+.apt__leaf {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.apt__branch:hover,
+.apt__leaf:hover {
+  background: var(--bg-hover);
+}
+.apt__caret {
+  flex: 0 0 auto;
+  width: 12px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 9px;
+  transition: transform 0.15s ease;
+  transform: rotate(0deg);
+  user-select: none;
+}
+.apt__caret--open {
+  transform: rotate(90deg);
+  color: var(--accent);
+}
+.apt__caret--leaf {
+  visibility: hidden;
+}
+.apt__children {
+  padding-left: 16px;
+  border-left: 1px 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 树 + 底部操作按钮
+   容器铺满调试面板主体（绝对定位贴合 body 内边距区域），内部用 flex 列布局，
+   JSON 树占据剩余空间并可独立滚动，底部操作按钮始终钉在底部——
+   数据较少时不再上浮，数据较多时树内部滚动而按钮不随之移动。 */
+.debug__scope-wrap {
+  position: absolute;
+  /* right:0 让 JSON 树滚动条紧贴面板最右边（与其他 tab 用 body padding 作
+     16px 滚动框不同，本 tab 滚动交给内部 .debug__scope-tree，需要贴边）；
+     left:16px 与 body 的 16px 内边距对齐，让树内容左缘与其他 tab 一致。 */
+  inset: 10px 10px 10px 16px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.debug__scope-tree {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+.debug__scope-foot {
+  flex: 0 0 auto;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+}
+.debug__copied {
+  font-size: 12px;
+  color: var(--accent);
+}
+.debug__copy {
+  display: inline-flex;
+  align-items: center;
+  height: var(--ctrl-sm);
+  padding: 0 14px;
+  background: var(--bg-input);
+  color: var(--text);
+  border: 1px solid var(--accent-border);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+.debug__copy:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent);
+}
+
+/* 数据绑定 Raw 模式：直接复用 .debug__scope-wrap 的绝对定位盒（inset 已占满 body 内容区），
+   不再额外设 height:100%——否则 top/inset 的 bottom 与 height 冲突，盒子会比内容区高 10px，
+   底部「应用/取消」按钮被挤出可视区、需滚动才见。这里仅保留 flex 列布局语义：
+   编辑器占剩余空间并内部滚动，底部操作按钮始终钉在底部。 */
+.debug__scope-wrap--raw {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.debug__scope-raw {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.debug__raw-editor {
+  flex: 1 1 auto;
+  min-height: 160px;
+  width: 100%;
+  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;
+  tab-size: 2;
+  white-space: pre;
+  overflow: auto;
+  outline: none;
+}
+.debug__raw-editor:focus {
+  border-color: var(--accent-border);
+}
+/* CodeJar 托管的原始 JSON 编辑器：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.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.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.keyword,
+.debug__raw-editor .token.null { color: var(--code-kw); }
+.debug__raw-editor .token.function,
+.debug__raw-editor .token.class-name { color: var(--code-fn); }
+.debug__raw-err {
+  flex: 0 0 auto;
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--danger);
+}
+
+/* 底部状态栏（类 VSCode 暗色状态栏，沿用主题 token，与顶栏/面板统一） */
+.statusbar {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: stretch;
+  height: 28px;
+  /* 永远在底部面板之上（order 最大），保证状态栏始终贴底，不被面板顶上来 */
+  order: 3;
+  padding: 0 2px;
+  background: var(--bg-bar);
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-dim);
+  user-select: none;
+}
+.statusbar__spacer {
+  flex: 1 1 auto;
+}
+.statusbar__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 10px;
+  height: 100%;
+  white-space: nowrap;
+  cursor: default;
+}
+.statusbar__item--right {
+  color: var(--text-faint);
+}
+/* 问题指示器：沿用统一 hover 语言（bg-hover + accent 文字），保持与整体风格一致 */
+/* 问题指示器：本质是一行状态栏文本读数，不是按钮——
+   无边框 / 无圆角 / 无 hover 背景块；仅在有错误时文字+图标着 danger 红作为提示 */
+.statusbar__item--prob {
+  cursor: pointer;
+  color: var(--text-dim);
+  font-weight: 400;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+.statusbar__item--prob:hover {
+  color: var(--text);
+}
+.statusbar__item--prob.is-error {
+  color: var(--danger);
+}
+.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;
+}
+.statusbar__item--prob.is-ok:hover {
+  color: var(--text-faint);
+}
+.statusbar__icon {
+  font-size: 14px;
+  line-height: 1;
+}
+/* 运行态偏离基线（有未落库的临时调试值）时，状态栏小点变琥珀黄提示 */
+.statusbar__icon.is-dirty {
+  color: var(--warn);
+}
+
+/* 底部面板（事件面板 / 绑定错误面板）：点击状态栏指示器弹出 / 收起。与运行态面板互斥，
+   三者共用面板高度，由头部拖拽调整（无专门拖拽节点，与预览区宽度调节同一机制），约束 [120px, 60vh]。 */
+.errpanel {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: 240px;
+  min-height: 120px;
+  max-height: 60vh;
+  overflow: hidden;
+  /* 与运行态面板同属「状态栏之上的底部面板」，固定 order 确保状态栏始终贴底 */
+  order: 2;
+  background: var(--bg-panel);
+  border-top: 1px solid var(--border-strong);
+}
+.errpanel__head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  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);
+}
+.errpanel__title {
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+/* 头部右侧操作区：图标按钮统一靠右 */
+.errpanel__actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+/* 图标按钮（关闭 / 清空）：纯图标，无背景/边框/圆角，仅字形 + hover 变色，节省空间 */
+.errpanel__iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.errpanel__iconbtn:hover:not(:disabled) {
+  color: var(--text);
+}
+.errpanel__iconbtn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+/* 清空按钮（垃圾桶）hover 偏危险色提示 */
+.errpanel__clear:hover:not(:disabled) {
+  color: var(--danger);
+}
+.errpanel__body {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 12px 16px;
+}
+/* 事件面板内「日志 / 错误」分区标题 */
+.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);
+}
+.ep__sec-title:first-child {
+  margin-top: 0;
+}
+/* 事件面板日志：每行 = 等级标签 + 内容（语法高亮 / JSON 折叠） */
+.debug__list--log {
+  display: flex;
+  flex-direction: column;
+}
+.log__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border);
+}
+.log__item:last-child {
+  border-bottom: none;
+}
+.log__item:hover {
+  background: var(--bg-input);
+}
+/* 等级标签：小药丸，按级别着色 */
+.log__tag {
+  flex: 0 0 auto;
+  margin-top: 1px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.5;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--text-dim);
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+}
+.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 {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 4px 10px;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text);
+}
+.log__val {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.log__json {
+  flex: 1 1 100%;
+  padding: 2px 0;
+}
+.log__empty {
+  color: var(--text-faint);
+}
+
+/* 弹窗卡片图层（alertCard）：在预览区域内定位，按 gravity 定位的卡片面板 */
+.alert-layer {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-modal);
+}
+.alert-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  background: rgba(0, 0, 0, 0.55);
+  padding: 16px;
+}
+.alert-mask--bottom {
+  align-items: flex-end;
+  justify-content: center;
+}
+.alert-mask--top {
+  align-items: flex-start;
+  justify-content: center;
+}
+.alert-mask--center {
+  align-items: center;
+  justify-content: center;
+}
+.alert-mask--left {
+  align-items: center;
+  justify-content: flex-start;
+}
+.alert-mask--right {
+  align-items: center;
+  justify-content: flex-end;
+}
+.alert-panel {
+  width: 100%;
+  max-width: 100%;
+  max-height: 92vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
+  /* 入场动画 */
+  animation: alert-pop 0.20s ease-out;
+}
+@keyframes alert-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.alert-mask--center .alert-panel,
+.alert-mask--left .alert-panel,
+.alert-mask--right .alert-panel {
+  /* 居中 / 左右定位时取消大圆角，更像原生弹框 */
+  border-radius: 12px;
+}
+
+/* ============ 设备级模拟 UI（alertDialog 对话框 / showToast 弱提示） ============ */
+/* 相对固定视口 phone-viewport 定位，不随卡片内容滚动；
+   z-index 高于 alertCard 图层（1000），模拟原生对话框盖住弹窗卡片 */
+.device-ui {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-deviceui);
+  pointer-events: none; /* 默认不拦截卡片交互，弹层元素各自开启 */
+}
+
+/* alertDialog：原生风格居中确认对话框 */
+.dlg-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  pointer-events: auto;
+}
+.dlg {
+  width: 288px;
+  max-width: 82%;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 24px 20px 0;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+  text-align: center;
+  animation: dlg-pop 0.20s ease-out;
+}
+@keyframes dlg-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.dlg__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333333;
+}
+.dlg__msg {
+  margin-top: 10px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #666666;
+  text-align: left;
+  word-break: break-all;
+  white-space: pre-wrap;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.dlg__title + .dlg__msg {
+  margin-top: 12px;
+}
+.dlg__btns {
+  display: flex;
+  /* 负外边距抵消对话框左右内边距，分割线贯通左右边缘 */
+  margin: 18px -20px 0;
+  border-top: 1px solid #e8e8e8;
+}
+.dlg__btn {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 14px 0;
+  background: none;
+  border: none;
+  font-size: 15px;
+  cursor: pointer;
+}
+.dlg__btn--ok {
+  color: #1677ff;
+  font-weight: 500;
+}
+.dlg__btn--cancel {
+  color: #1677ff;
+  border-right: 1px solid #e8e8e8;
+}
+/* cancelGrayStyle：取消按钮灰色风格 */
+.dlg__btn--cancel.dlg__btn--gray {
+  color: #888888;
+}
+
+/* showToast：居中弱提示（对齐 Vant Toast 视觉语言：屏幕正中、暗色半透明胶囊、
+   白描边图标、圆角 8px；设备框为独立显示区，不随编辑器主题变化） */
+.dtoast {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  max-width: 76%;
+  min-width: 0;
+  padding: 10px 14px;
+  background: rgba(0, 0, 0, 0.7);
+  color: #ffffff;
+  border-radius: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+/* 带图标的 Toast：图标在上、文案在下，方形布局（对齐 Vant 图标型 Toast） */
+.dtoast--icon {
+  min-width: 96px;
+  padding: 16px;
+}
+.dtoast__icon {
+  flex: 0 0 auto;
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* 去掉彩色圆底，改为白描边图标（Vant Toast 语义：成功/失败仅以形状区分） */
+}
+.dtoast__icon-svg {
+  width: 28px;
+  height: 28px;
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.dtoast__msg {
+  word-break: break-all;
+}
+
+/* App 级弱提示（顶栏异步操作完成反馈）：固定悬浮在 App 外壳顶部居中，
+   不被手机预览框裁切；视觉语言与设备框内 .dtoast 一致。 */
+.apptoast {
+  position: fixed;
+  top: 56px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--z-toast-app);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 76%;
+  padding: 12px 20px;
+  background: rgba(17, 17, 17, 0.82);
+  color: #fff;
+  border-radius: 10px;
+  font-size: 14px;
+  line-height: 1.4;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
+  pointer-events: none;
+}
+.apptoast__icon {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* 图标底色：仅显式声明类型才着色（ok=成功绿 / err=危险红），
+     未知/缺失类型落在中性灰（--text-faint），绝不默认成功绿——
+     防止调用方传错类型（如 'error'）时把失败提示显示成成功色 */
+  background: var(--text-faint);
+}
+.apptoast--ok .apptoast__icon {
+  background: var(--ok);
+}
+.apptoast--err .apptoast__icon {
+  background: var(--danger);
+}
+.apptoast__icon-svg {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: #ffffff;
+  stroke-width: 2.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.apptoast__msg {
+  word-break: break-all;
+}
+.apptoast-fade-enter-active,
+.apptoast-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.apptoast-fade-enter,
+.apptoast-fade-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -8px);
+}
+
+/* 弹层淡入淡出 */
+.dlg-fade-enter-active,
+.dlg-fade-leave-active,
+.toast-fade-enter-active,
+.toast-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.dlg-fade-enter,
+.dlg-fade-leave-to,
+.toast-fade-enter,
+.toast-fade-leave-to {
+  opacity: 0;
+}
+
+/* showPicker：底部弹出级联选择器（对齐原生 picker） */
+.pk-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  background: rgba(0, 0, 0, 0.4);
+  pointer-events: auto;
+}
+.pk-sheet {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 12px 12px 0 0;
+  animation: pk-up 0.20s ease-out;
+}
+@keyframes pk-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.pk-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #eef0f2;
+}
+.pk-bar__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333333;
+}
+.pk-bar__btn {
+  background: none;
+  border: none;
+  font-size: 15px;
+  cursor: pointer;
+  padding: 4px 2px;
+}
+.pk-bar__btn--cancel {
+  color: #888888;
+}
+.pk-bar__btn--ok {
+  color: #1677ff;
+  font-weight: 600;
+}
+.pk-cols {
+  display: flex;
+  position: relative;
+  height: 230px;
+  overflow: hidden;
+}
+.pk-col {
+  flex: 1 1 0;
+  position: relative;
+  height: 100%;
+  min-width: 0;
+}
+/* 中间选中高亮带：列中线一条浅色带 */
+.pk-col__band {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 40px;
+  transform: translateY(-50%);
+  background: rgba(22, 119, 255, 0.08);
+  border-top: 1px solid #d6e4ff;
+  border-bottom: 1px solid #d6e4ff;
+  pointer-events: none;
+}
+.pk-col__list {
+  height: 100%;
+  overflow-y: auto;
+  /* 上下留白使中间项对齐高亮带（230/2=115，项高40，padding 95 -> 首项中线落在115） */
+  padding: 95px 0;
+  -webkit-overflow-scrolling: touch;
+}
+.pk-item {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  color: #333333;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 6px;
+}
+.pk-item--on {
+  color: #1677ff;
+  font-weight: 600;
+}
+/* showDatePicker（滚轮模式）：保留 .pk-col__list 原生 overflow-y:auto + padding 结构，
+   通过 scrollTop 定位，避免大幅 translateY 在部分浏览器中的渲染裁剪问题。
+   仅作用于 .pk-cols--wheel，不影响 showPicker 的 .pk-cols 原生滚动交互。 */
+.pk-cols--wheel .pk-col {
+  cursor: grab;
+  touch-action: none;
+}
+.pk-cols--wheel.is-dragging {
+  user-select: none;
+  cursor: grabbing;
+}
+.pk-cols--wheel .pk-col__list {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.pk-cols--wheel .pk-col__list::-webkit-scrollbar {
+  display: none;
+}
+/* 选择器淡入淡出（与 dialog/toast 一致） */
+.picker-fade-enter-active,
+.picker-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.picker-fade-enter,
+.picker-fade-leave-to {
+  opacity: 0;
+}
+
+/* ===== 远端预览二维码弹层 ===== */
+.rp-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-appmodal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(8, 10, 16, 0.55);
+  backdrop-filter: blur(2px);
+}
+.rp-card {
+  width: 300px;
+  max-width: calc(100vw - 32px);
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 18px 50px var(--shadow-card);
+  overflow: hidden;
+  color: var(--text);
+}
+.rp-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.rp-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+.rp-x {
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.rp-x:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.rp-body {
+  padding: 18px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.rp-qr-wrap {
+  position: relative;
+  width: 220px;
+  height: 220px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 10px;
+  padding: 8px;
+  box-sizing: border-box;
+}
+.rp-qr {
+  width: 204px;
+  height: 204px;
+  display: block;
+}
+.rp-qr--loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-placeholder);
+  font-size: 14px;
+}
+/* 发布链路（保存/取code/发布/通知）进行中：二维码模糊 + 加载遮罩 */
+.rp-qr--blurred {
+  filter: blur(7px);
+  opacity: 0.55;
+  transition: filter 0.25s ease, opacity 0.25s ease;
+}
+.rp-qr-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 12px;
+}
+.rp-spinner {
+  width: 30px;
+  height: 30px;
+  border: 3px solid rgba(16, 19, 26, 0.18);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: rp-spin 0.8s linear infinite;
+}
+.rp-loading-text {
+  font-size: 13px;
+  color: var(--text-dim);
+}
+@keyframes rp-spin {
+  to { transform: rotate(360deg); }
+}
+.rp-tip {
+  margin: 12px 0 10px;
+  font-size: 12.5px;
+  color: var(--text-dim);
+  text-align: center;
+}
+.rp-url {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+.rp-url-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  color: var(--text-dim);
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  padding: 6px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rp-copy {
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  font-size: 12px;
+  border-radius: 7px;
+  border: 1px solid var(--accent-border);
+  background: var(--accent);
+  color: var(--on-accent);
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+.rp-copy:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+.rp-copy:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* ============ 纯净截图模式（?chrome=off，配合 /__screenshot 无头截图） ============ */
+/* 此时顶栏 / 设备条 / 调试面板已由 v-show 隐藏，这里仅做布局收尾：
+   把手机框在舞台内居中、去掉设备框阴影，让截出的卡片更干净。 */
+.app--chrome-off .app__stage {
+  justify-content: center;
+}
+.app--chrome-off .phone-viewport {
+  box-shadow: none;
+}
+/* 截图/度量基准：chrome=off 下 .phone__screen 固定为卡片设计宽度（view.width，标准 375px）、
+   去掉 16px padding——设计稿元素坐标以 0..375 为基准，渲染度量必须同基准，否则对拍
+   （/__bbox + fidelity_report.mjs）的宽度基准错位（此前 width:100% 撑满视口，渲染卡宽随视口漂移）。 */
+.app--chrome-off .phone__screen {
+  width: 375px;
+  padding: 0;
+  margin: 0 auto;
+}
+.rp-warn {
+  margin: 10px 0 0;
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--warn);
+  text-align: center;
+}
+
+/* ===== 登录凭据弹窗（远程同步缺凭据时弹出） ===== */
+.login-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-appmodal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(8, 10, 16, 0.55);
+  backdrop-filter: blur(2px);
+}
+.login-modal {
+  width: 320px;
+  max-width: calc(100vw - 32px);
+  padding: 18px 18px 16px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 18px 50px var(--shadow-card);
+  color: var(--text);
+  box-sizing: border-box;
+}
+.login-modal__title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+.login-modal__desc {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-dim);
+  margin-bottom: 14px;
+}
+.login-modal__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.login-modal__label {
+  flex: 0 0 36px;
+  font-size: 13px;
+  color: var(--text-dim);
+}
+.login-modal__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 34px;
+  padding: 0 10px;
+  font-size: 13px;
+  color: var(--text);
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  outline: none;
+  box-sizing: border-box;
+}
+.login-modal__input:focus {
+  border-color: var(--accent);
+}
+.login-modal__error {
+  font-size: 12px;
+  color: var(--danger);
+  margin-bottom: 10px;
+}
+.login-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 4px;
+}
+.login-modal__btn {
+  padding: 7px 14px;
+  font-size: 13px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
+}
+.login-modal__btn--ghost {
+  background: transparent;
+  color: var(--text-dim);
+}
+.login-modal__btn--ghost:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.login-modal__btn--primary {
+  border-color: var(--accent-border);
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.login-modal__btn--primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+.login-modal__btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* ===== 二次确认弹窗（版本推送 / 当前同步 / 全量同步 操作前弹出） ===== */
+.confirm-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-appmodal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(8, 10, 16, 0.55);
+  backdrop-filter: blur(2px);
+}
+.confirm-modal {
+  width: 360px;
+  max-width: calc(100vw - 32px);
+  padding: 18px 18px 16px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 18px 50px var(--shadow-card);
+  color: var(--text);
+  box-sizing: border-box;
+}
+.confirm-modal__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.confirm-modal__title.is-danger {
+  color: var(--danger);
+}
+.confirm-modal__icon {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+}
+.confirm-modal__icon :is(path, line, polyline, circle, rect) {
+  vector-effect: non-scaling-stroke;
+}
+.confirm-modal__desc {
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: var(--text-dim);
+  margin-bottom: 16px;
+  white-space: pre-line;
+}
+.confirm-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.confirm-modal__btn {
+  padding: 7px 16px;
+  font-size: 13px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
+}
+.confirm-modal__btn--ghost {
+  background: transparent;
+  color: var(--text-dim);
+}
+.confirm-modal__btn--ghost:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.confirm-modal__btn--primary {
+  border-color: var(--accent-border);
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.confirm-modal__btn--primary:hover {
+  background: var(--accent-hover);
+}
+.confirm-modal__btn--danger {
+  border-color: var(--danger);
+  background: var(--danger);
+  color: var(--on-accent);
+}
+.confirm-modal__btn--danger:hover {
+  background: var(--danger-hover);
+}
+.confirm-fade-enter-active,
+.confirm-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.confirm-fade-enter-from,
+.confirm-fade-leave-to {
+  opacity: 0;
+}