cardbuddy 0.6.0

package/dist/vendored/styles/node-inspector.css

@@ -0,0 +1,1003 @@
+/**
+ * 节点属性面板样式（NodeInspector.vue）
+ * 单一样式来源，避免与 scoped 冲突。
+ */
+
+.ni-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-appmodal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 遮罩完全透明：不遮挡预览区，仅面板自身浮于其上 */
+  background: transparent;
+}
+
+.ni-panel {
+  width: 560px;
+  max-width: 94vw;
+  height: 80vh;
+  min-height: 420px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: var(--shadow-4);
+  position: relative;
+  overflow: hidden;
+}
+
+.ni-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.ni-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.ni-close {
+  width: var(--ctrl-sm);
+  height: var(--ctrl-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  color: var(--text-dim);
+  font-size: 18px;
+  cursor: pointer;
+  line-height: 1;
+  transition: background 0.15s, color 0.15s;
+}
+
+.ni-close::before {
+  content: '✕';
+}
+
+.ni-close:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.ni-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  /* 去掉左右内边距，让 .ni-scroll 撑满面板；滚动条因此紧贴最外层边缘 */
+  padding: 16px 0;
+}
+
+.ni-body .ni-empty {
+  padding: 0 16px;
+}
+
+.ni-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  /* 仅给内容留 16px 横向间距，滚动条（右侧）紧贴面板边缘；
+     底部 76px 预留给悬浮的 .ni-foot，避免内容被遮挡 */
+  padding: 0 16px 76px;
+}
+
+.ni-body > .ni-sec {
+  margin-bottom: 12px;
+}
+
+.ni-body > .ni-sec:last-child {
+  margin-bottom: 0;
+}
+
+.ni-sec-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 统一折叠箭头（ni-caret / ptree__caret / st__caret 共用同一形态）：
+   右尖三角，收起朝右、展开旋转 90° 朝下，尺寸 10px、与文字基线对齐。 */
+.ni-caret,
+.ptree__caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 12px;
+  width: 12px;
+  height: 12px;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--text-dim);
+  transition: transform 0.15s ease;
+  user-select: none;
+}
+
+.ni-caret.is-open,
+.ptree__caret.is-open {
+  transform: rotate(90deg);
+}
+
+.ni-sec-body {
+  margin-bottom: 0;
+}
+
+.ni-empty {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+/* 基本信息：标签 + 控件横向 */
+.ni-field-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.ni-field-row .ni-field-label {
+  flex: 0 0 88px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-dim);
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ni-field-row .ni-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ni-input {
+  box-sizing: border-box;
+  width: 100%;                            /* 撑满父元素：修复 st-input → ni-input 换类后遗失的 100% 宽度（地址框等文本输入不再回落浏览器默认内宽） */
+  min-width: 0;                           /* 配合 flex 容器（如 .st-image__row 的清空按钮并排）不被 min-content 撑爆 */
+  height: var(--ctrl-sm);                 /* 28px：节点属性面板输入框统一高度，与 setter 输入家族（st-input 已换 ni-input）一致，消除 28/32 混排 */
+  font-size: 12px;
+  padding: 6px 12px;
+  background: var(--bg-input);
+  color: var(--text);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ni-input:focus {
+  border-color: var(--accent);
+}
+
+select.ni-input {
+  height: var(--ctrl-sm);
+}
+
+/* 属性行：标签 + 控件 + 删除 */
+.ni-prop-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  background: var(--bg-panel);
+}
+
+.ni-prop-label {
+  flex: 0 0 88px;
+  padding-top: 5px;
+  font-size: 12px;
+  color: var(--text);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ni-prop-control {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ni-prop-del {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--danger);
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+  transition: background 0.15s;
+}
+
+.ni-prop-del:hover {
+  background: var(--danger-soft);
+}
+
+/* 新增行 */
+.ni-addrow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.ni-addrow select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.ni-addbtn {
+  flex: 0 0 auto;
+  height: var(--ctrl-sm);
+  padding: 0 12px;
+  font-size: 13px;
+  border: 1px dashed var(--border-strong);
+  background: transparent;
+  color: var(--text-dim);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.ni-addbtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ni-addbtn:not(:disabled):hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+/* 指令 / 事件只读行 */
+.ni-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ni-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: var(--bg-input);
+}
+
+.ni-key {
+  color: var(--text-dim);
+  flex: 0 0 auto;
+  max-width: 168px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ni-val {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--text);
+  word-break: break-all;
+}
+
+.ni-tag {
+  margin-left: auto;
+  font-size: 12px;
+  padding: 2px 8px;
+  background: var(--bg-soft);
+  border-radius: 4px;
+  color: var(--accent);
+}
+
+.ni-editbtn {
+  margin-left: auto;
+  height: var(--ctrl-sm);
+  padding: 0 10px;
+  font-size: 12px;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-input);
+  color: var(--text-dim);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.ni-editbtn:hover {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+/* 标题里的 className */
+.ni-cls {
+  font-style: normal;
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-left: 6px;
+}
+
+.ni-static {
+  font-size: 13px;
+  color: var(--text);
+}
+
+/* 事件列表 */
+.ni-event-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ni-event-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  background: var(--bg-input);
+  border-radius: 7px;
+}
+
+.ni-event-name {
+  font-size: 12px;
+  color: var(--text);
+}
+
+/* 属性树（PropTree 递归渲染） */
+.ptree {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3); /* 12px：节点设置面板「组和组之间」纵向间距，须 > 控件内 .pc（6px），确立「组间 > 组内核」层级 */
+}
+
+.ptree__group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ptree__group-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: var(--bg-input);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+
+.ptree:not(.ptree--plain) .ptree__group-head:hover {
+  background: var(--bg-hover);
+}
+
+.ptree__group-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ptree__group-count {
+  flex: 0 0 auto;
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+/* 嵌套分组（第二级及更深）淡化头背景，靠左竖线区分层级 */
+.ptree__group-body > .ptree__group > .ptree__group-head {
+  background: transparent;
+  padding-left: 2px;
+  font-weight: 500;
+}
+.ptree:not(.ptree--plain) .ptree__group-body > .ptree__group > .ptree__group-head:hover {
+  background: var(--bg-hover);
+}
+
+.ptree__group-body {
+  padding: 6px 0 2px 10px;
+  margin-left: 6px;
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ptree__row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  /* min-height 而非 height：含「常量/变量/图片」来源切换的两行行（来源 tab + 控件）
+     需自然撑高避免溢出与邻行重叠；单行行（标签 + 控件）仍精确 32px，与手册高行式节奏一致。 */
+  min-height: var(--ctrl-md);
+  padding: 0 8px;
+  border-radius: 6px;
+}
+
+.ptree:not(.ptree--plain) .ptree__row:hover {
+  background: var(--bg-hover);
+}
+
+.ptree__label {
+  flex: 0 0 96px;
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ptree__control {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* 底部：悬浮操作条，不占布局高度（内容可滚到其下方） */
+.ni-foot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--bg-panel);
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -8px 24px var(--shadow-card);
+}
+
+.ni-tip {
+  font-size: 12px;
+  color: var(--text-faint);
+  line-height: 1.5;
+}
+
+.ni-foot-btns {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.ni-btn {
+  white-space: nowrap;
+  height: var(--ctrl-sm);
+  padding: 0 16px;
+  font-size: 13px;
+  border-radius: 6px;
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: var(--on-accent);
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.ni-btn:hover {
+  opacity: 0.92;
+}
+
+.ni-btn--ghost {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.ni-btn--ghost:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  opacity: 1;
+}
+
+/* ===================== 事件页签（开关式：事件列表 + 开关 + 动作参数） ===================== */
+
+.ni-evt-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ni-evt {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--bg-panel);
+}
+
+.ni-evt-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+}
+
+.ni-evt-name {
+  flex: 0 0 auto;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.ni-evt-desc {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--text-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 开关 */
+.ni-switch {
+  flex: 0 0 auto;
+  position: relative;
+  width: 36px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 10px;
+  background: var(--border-strong);
+  cursor: pointer;
+  transition: background 0.18s;
+  flex-shrink: 0;
+}
+
+.ni-switch.is-on {
+  background: var(--accent);
+}
+
+.ni-switch__dot {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--on-accent);
+  transition: transform 0.18s;
+}
+
+.ni-switch.is-on .ni-switch__dot {
+  transform: translateX(16px);
+}
+
+.ni-evt-body {
+  padding: 4px 12px 12px;
+  border-top: 1px solid var(--border);
+}
+
+.ni-evt-body .ni-field-row {
+  margin-top: 12px;
+  margin-bottom: 0;
+}
+
+.ni-evt-body .ni-field-row:first-child {
+  margin-top: 10px;
+}
+
+.ni-evt-body .ptree {
+  margin-top: 8px;
+}
+
+/* 整行铺开的控件（代码编辑器） */
+.ptree__row--block {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+}
+
+.ptree__row--block .ptree__label {
+  flex: 0 0 auto;
+  padding-top: 0;
+}
+
+/* 小屏适配 */
+@media (max-width: 600px) {
+  .ni-panel {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+  }
+
+  .ni-prop-label {
+    flex: 0 0 72px;
+  }
+}
+
+/* ===================== 事件编辑抽屉（EventEditor.vue，右侧滑出） ===================== */
+/* 100vh × calc(100vw - 预览面板宽度)；上下排布，上方事件开关列表 + 下方动作/脚本编辑区；
+   抽屉主体不产生滚动条，脚本编辑区填满剩余高度。 */
+
+.ee-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  /* 左缘 = 当前预览面板宽度（由 App 根节点注入的 --preview-width 实时驱动），
+     不再写死 375px；面板宽度随之 = 100vw − 预览面板宽度，随分隔条拖拽动态变化 */
+  left: var(--preview-width, 375px);
+  z-index: var(--z-appmodal);
+  /* 透明：手机区（左侧预览面板）保持可见且可交互，不遮罩 */
+  background: transparent;
+}
+
+/* 抽屉主体：右侧贴边、满高、宽度 = 视口减去手机宽度 */
+.ee-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 720px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-panel);
+  border-left: 1px solid var(--border-strong);
+  box-shadow: var(--shadow-5);
+  overflow: hidden;
+}
+
+/* 从右往左滑入/滑出（DebugPanel 中 <Transition name="ee-drawer"> 驱动） */
+.ee-drawer-enter-active,
+.ee-drawer-leave-active {
+  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.ee-drawer-enter-from,
+.ee-drawer-leave-to {
+  transform: translateX(100%);
+}
+
+.ee-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.ee-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.ee-cls {
+  font-style: normal;
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-left: 6px;
+}
+
+.ee-close {
+  width: var(--ctrl-sm);
+  height: var(--ctrl-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  color: var(--text-dim);
+  font-size: 18px;
+  cursor: pointer;
+  line-height: 1;
+  transition: background 0.15s, color 0.15s;
+}
+
+.ee-close::before { content: '✕'; }
+.ee-close:hover { background: var(--bg-hover); color: var(--text); }
+
+/* 主体：上事件开关列表 + 下动作/脚本编辑区，纵向上下排布，不滚动 */
+.ee-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 上方事件开关列表：有界高度（最多约 40%），内部独立滚动，不再单列占宽 */
+.ee-side {
+  flex: 0 0 auto;
+  max-height: 40%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--border);
+  overflow-y: auto;
+  padding: 12px 16px;
+  line-height: 28px;
+}
+
+.ee-evt-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ee-evt {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: var(--ctrl-lg);
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-input);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.ee-evt:hover {
+  background: var(--bg-hover);
+}
+
+.ee-evt-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 下方详情区：填满剩余高度，底部 76px 预留给悬浮的 .ee-foot */
+.ee-detail {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  /* 底部 76px 预留给悬浮的 .ee-foot，避免详情最末内容被遮挡 */
+  padding: 16px 24px 76px;
+  overflow: hidden;
+}
+
+.ee-detail-head {
+  flex: 0 0 auto;
+}
+
+.ee-detail-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  overflow: hidden;
+}
+
+/* 让脚本编辑区（Code 控件）撑满详情区剩余高度 */
+.ee-detail-body .ptree {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+/* 事件面板的设置项在 UI 层为并列关系（非树结构），不需要每行左右内缩 */
+.ee-detail-body .ptree__row {
+  padding: 0;
+}
+.ee-detail-body .ptree__row--block {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.ee-detail-body .st-code {
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: 2px;
+}
+.ee-detail-body .st-code__foot {
+  flex: 0 0 auto;
+  font-size: 11px;
+  line-height: normal;
+  padding: 4px 2px 2px;
+}
+
+.ee-detail-body .ptree__row--block .ptree__control {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.ee-detail-body .ptree__row--block .ptree__control > .pc {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.ee-detail-body .pc-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.ee-detail-body .pc-body > .st-code {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.ee-detail-body .st-code__editor {
+  flex: 1 1 auto;
+  min-height: 120px;
+  max-height: none;
+}
+
+.ee-detail-empty {
+  margin: auto;
+  text-align: center;
+}
+
+.ee-empty {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-faint);
+}
+
+.ee-field-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ee-field-label {
+  flex: 0 0 80px;
+  font-size: 12px;
+  color: var(--text-dim);
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ee-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  box-sizing: border-box;
+  font-size: 12px;
+  padding: 6px 10px;
+  background: var(--bg-input);
+  color: var(--text);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ee-input:focus { border-color: var(--accent); }
+
+select.ee-input { height: 32px; }
+
+.ee-evt-desc {
+  margin: 8px 0 0;
+  font-size: 11px;
+  color: var(--text-faint);
+  line-height: 1.4;
+}
+
+/* 开关 */
+.ee-switch {
+  flex: 0 0 auto;
+  position: relative;
+  width: 36px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 10px;
+  background: var(--border-strong);
+  cursor: pointer;
+  transition: background 0.18s;
+}
+
+.ee-switch.is-on { background: var(--accent); }
+
+.ee-switch__dot {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--on-accent);
+  transition: transform 0.18s;
+}
+
+.ee-switch.is-on .ee-switch__dot { transform: translateX(16px); }
+
+.ee-evt-orphan {
+  flex: 0 0 auto;
+  margin: 10px 0 0;
+  font-size: 11px;
+  color: var(--warn);
+}
+
+/* 底栏 */
+/* 底部：悬浮操作条，不占布局高度（内容可滚到其下方） */
+.ee-foot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 24px;
+  background: var(--bg-panel);
+  border-top: 1px solid var(--border);
+  box-shadow: 0 -8px 24px var(--shadow-card);
+}
+
+.ee-tip {
+  font-size: 11px;
+  color: var(--text-faint);
+  line-height: 1.4;
+}
+
+.ee-foot-btns {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.ee-btn {
+  white-space: nowrap;
+  height: var(--ctrl-sm);
+  padding: 0 16px;
+  font-size: 13px;
+  border-radius: 6px;
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: var(--on-accent);
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.ee-btn:hover { opacity: 0.92; }
+
+.ee-btn--ghost {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.ee-btn--ghost:hover {
+  background: var(--bg-hover);
+  opacity: 1;
+}