/* ===== 顶部工具栏 ===== */
#toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #1c2130, var(--panel));
  border-bottom: 1px solid var(--panel-line);
  box-shadow: 0 4px 18px rgba(3,6,14,.45);
  z-index: 30;
  overflow: visible;
}
.tb-title {
  font-size: 15px; font-weight: 700; margin-right: 6px;
  background: linear-gradient(90deg, #7dd3fc, #8b8cf8, #f472b6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; flex-shrink: 0;
}
.tb-sep { width: 1px; height: 22px; background: var(--panel-line); margin: 0 4px; flex-shrink: 0; }
.tb-btn {
  padding: 6px 12px; border: 1px solid transparent; border-radius: 9px;
  background: rgba(255,255,255,.045); color: var(--tx-2);
  font-size: 13px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;        /* 单行不折行, 不被挤压 */
  transition: background .15s, color .15s, transform .1s, box-shadow .15s;
}
.tb-btn:hover { background: rgba(255,255,255,.1); color: var(--tx); transform: translateY(-1px); }
.tb-btn:active { transform: scale(.96); }
/* 顶栏拆镜头入口: 琥珀色醒目, 一眼可见 (SC-Detect, 本地 ffmpeg 零贝壳) */
.tb-btn.tb-scandet {
  border-color: rgba(var(--c-note-rgb), .5); color: #ffd97a;
  background: rgba(var(--c-note-rgb), .1);
}
.tb-btn.tb-scandet:hover { background: rgba(var(--c-note-rgb), .22); color: #ffe9a8; }
/* 顶栏资产库入口: 红色高亮框 */
.tb-btn.tb-assets {
  border-color: rgba(239, 68, 68, .55); color: #fca5a5;
  background: rgba(239, 68, 68, .1);
  box-shadow: 0 0 10px rgba(239, 68, 68, .12);
}
.tb-btn.tb-assets:hover {
  background: rgba(239, 68, 68, .22); color: #fee2e2;
  border-color: rgba(239, 68, 68, .85);
  box-shadow: 0 0 14px rgba(239, 68, 68, .25);
}
.tb-btn.disabled {
  opacity: .32; pointer-events: auto; cursor: default;   /* 保留 hover title 提示, 但视觉禁用 */
}
.tb-danger { color: #e8929e; }

/* 顶栏清空按钮外层容器与向下悬浮彻底清空胶囊 */
.tb-clear-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.clear-quick-strip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  transform: translateY(-4px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  display: flex;
  align-items: center;
  padding: 4px 6px;
  background: rgba(15, 23, 42, .98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(239, 68, 68, .6);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .75), 0 0 14px rgba(239, 68, 68, .3);
  z-index: 9999;
  white-space: nowrap;
  transition: opacity .18s cubic-bezier(0.16, 1, 0.3, 1), transform .18s cubic-bezier(0.16, 1, 0.3, 1), visibility .18s;
}

/* 隐形安全桥（Safe Hover Bridge）: 覆盖胶囊条与上方清空按钮之间的空隙，防止斜向滑出丢失 */
.clear-quick-strip::before {
  content: '';
  position: absolute;
  left: -12px;
  right: -12px;
  top: -12px;
  height: 16px;
  background: transparent;
  pointer-events: auto;
}

/* 悬停或处于打开防抖状态 */
.tb-clear-wrap:hover .clear-quick-strip,
.tb-clear-wrap.is-open .clear-quick-strip {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

.btn-purge-all {
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid rgba(239, 68, 68, .4);
  background: rgba(239, 68, 68, .15);
  color: #fca5a5;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
}

.btn-purge-all:hover {
  background: rgba(239, 68, 68, .35);
  color: #fff;
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, .4);
  transform: translateY(1px);
}

.tb-btn.tb-remove-failed {
  border-color: rgba(248, 113, 113, .35); color: #f87171;
  background: rgba(248, 113, 113, .08);
}
.tb-btn.tb-remove-failed:hover {
  background: rgba(248, 113, 113, .22); color: #fca5a5;
  border-color: rgba(248, 113, 113, .6);
}

/* 「＋ 新建卡片」下拉菜单 (与画布列表菜单同风格) */
#add-card-menu {
  position: fixed; z-index: 50;
  min-width: 170px;
  background: #1e2129; border: 1px solid #2a2e38; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  padding: 6px;
}
#add-card-menu .ac-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  cursor: pointer; color: #cfd6e4; font-size: 13px; white-space: nowrap;
  transition: background .12s, color .12s;
}
#add-card-menu .ac-item:hover { background: #2a2f3c; color: var(--tx); }
#add-card-menu .ac-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
#add-card-menu .ac-emoji { font-size: 14px; }
#add-card-menu .ac-sep { height: 1px; background: rgba(255,255,255,.08); margin: 5px 6px; }

/* 「📁 文件」下拉菜单 (导出JSON/PNG/导入, 与新建卡片菜单同风格) */
#file-menu {
  position: fixed; z-index: 50;
  min-width: 170px;
  background: #1e2129; border: 1px solid #2a2e38; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  padding: 6px;
}
#file-menu .fm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  cursor: pointer; color: #cfd6e4; font-size: 13px; white-space: nowrap;
  transition: background .12s, color .12s;
}
#file-menu .fm-item:hover { background: #2a2f3c; color: var(--tx); }
#file-menu .fm-emoji { font-size: 14px; width: 18px; text-align: center; }
.tb-accent {
  background: linear-gradient(135deg, rgba(91,140,255,.22), rgba(139,90,248,.22));
  border-color: rgba(var(--c-accent-rgb), .35); color: #a9c4ff; font-weight: 600;
}
.tb-accent:hover {
  background: linear-gradient(135deg, rgba(91,140,255,.34), rgba(139,90,248,.34));
  box-shadow: 0 4px 14px rgba(var(--c-accent-rgb), .25); color: #cfe0ff;
}

/* 画布列表下拉菜单 */
#canvas-menu {
  position: fixed; z-index: 50;
  min-width: 280px; max-width: 380px; max-height: 60vh; overflow-y: auto;
  background: #1e2129; border: 1px solid #2a2e38; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  padding: 6px;
}
.cm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  cursor: pointer; color: #cfd6e4; font-size: 13px;
}
.cm-item:hover { background: #2a2f3c; }
.cm-item.active .cm-name { color: #9fc6ff; font-weight: 600; }
.cm-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-meta { font-size: 11px; color: #6b7280; white-space: nowrap; }
.cm-acts { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.cm-item:hover .cm-acts { opacity: 1; }
.cm-acts button {
  width: 24px; height: 24px; border: none; border-radius: 6px;
  background: transparent; color: #9aa2b1; font-size: 12px; cursor: pointer;
}
.cm-acts button:hover { background: #3a4050; color: #e2e8f0; }
.cm-del:hover { color: #f0a8b0 !important; }
.cm-new { color: #8a93a5; border-top: 1px solid #2a2e38; margin-top: 4px; border-radius: 0 0 7px 7px; }
.cm-new:hover { color: #9fc6ff; }
.tb-danger:hover { background: #3a2530; }