/* ---------- 全屏灯箱 (双击图片/视频卡查看大图) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000000;
  background: rgba(5,7,12,.94);
  animation: lb-fade .16s ease;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox .lb-stage {
  position: absolute; inset: 0 0 34px 0;
  overflow: hidden;
}
.lightbox .lb-media {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  cursor: grab; user-select: none; -webkit-user-drag: none;
  box-shadow: 0 6px 48px rgba(0,0,0,.6);
  background: #000;
}
.lightbox .lb-media.grabbing { cursor: grabbing; }
.lightbox .lb-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px;
  background: rgba(12,14,20,.9); border-top: 1px solid rgba(70,78,96,.35);
  font-size: 12px; color: #9aa4b8;
}
.lightbox .lb-title {
  max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #dfe6f2; font-weight: 500;
}
.lightbox .lb-hint { flex: 1; text-align: center; opacity: .65; }
.lightbox .lb-locate {
  border: 1px solid rgba(91,140,255,.45); border-radius: 6px; height: 24px;
  padding: 0 10px;
  background: rgba(91,140,255,.18); color: #93c5fd; font-size: 11.5px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 500; line-height: 1; user-select: none;
  transition: all .15s ease;
}
.lightbox .lb-locate:hover {
  background: rgba(91,140,255,.35); color: #ffffff; border-color: rgba(91,140,255,.8);
  box-shadow: 0 0 10px rgba(91,140,255,.3);
}
.lightbox .lb-locate:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.lightbox .lb-close {
  border: none; border-radius: 6px; width: 26px; height: 26px;
  background: rgba(50,56,70,.8); color: #dfe6f2; font-size: 12px;
  cursor: pointer; line-height: 1;
}
.lightbox .lb-close:hover { background: rgba(90,98,116,.95); }

/* ---------- 🖼️ 沉浸式多图全景画廊浮层 (Batch Gallery Modal) ---------- */
.batch-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(8, 10, 15, 0.94);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 28px;
  animation: bgmFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}
@keyframes bgmFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.bgm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.bgm-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.bgm-badge {
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.25), rgba(147, 51, 234, 0.25));
  border: 1px solid rgba(147, 197, 253, 0.4);
  color: #93c5fd;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.bgm-title {
  color: #f1f5f9;
  font-size: 15px;
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bgm-count {
  color: #22c55e;
  font-size: 12px;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 2px 8px;
  border-radius: 8px;
}
.bgm-prompt-preview {
  flex: 1;
  max-width: 700px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 12px;
}
.bgm-prompt-preview strong {
  color: #cbd5e1;
}
.bgm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.bgm-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bgm-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.bgm-btn.bgm-del-unlocked {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-weight: 600;
}
.bgm-btn.bgm-del-unlocked:hover {
  background: rgba(239, 68, 68, 0.88);
  border-color: #fca5a5;
  color: #ffffff;
}
.bgm-btn.bgm-close {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  font-weight: 600;
}
.bgm-btn.bgm-close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.bgm-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  min-height: 0;
  overflow: hidden;
}
.bgm-grid {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1560px;
  max-height: calc(100vh - 128px);
  justify-content: center;
  align-content: center;
}
.bgm-grid.bgm-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bgm-grid.bgm-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bgm-grid.bgm-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bgm-item {
  position: relative;
  background: rgba(18, 22, 34, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  max-height: calc((100vh - 150px) / 2);
  cursor: pointer;
}
.bgm-item:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(91, 140, 255, 0.7);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(91, 140, 255, 0.3);
}
.bgm-item-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: calc((100vh - 150px) / 2);
}
.bgm-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}
.bgm-item:hover img {
  transform: scale(1.02);
}
.bgm-num-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.bgm-item.bgm-item-main .bgm-num-badge {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-color: #93c5fd;
  color: #fff;
}
/* 🌟 右上角操作栏 (拆卡、删除) */
.bgm-item-top-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 6;
}
.bgm-item:hover .bgm-item-top-actions {
  opacity: 1;
  transform: translateY(0);
}
/* 🌟 右下角操作栏 (大图、设封面、存资产、定位) */
.bgm-item-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}
.bgm-item:hover .bgm-item-actions {
  opacity: 1;
  transform: translateY(0);
}
/* 🌟 H画廊 & 画布悬停: 资产按钮共用同一套样式 */
/* 分类菜单保持原样 hover/click 弹出(不强制常驻, 避免网格视图空间不足挤乱布局) */
/* 已存状态通过主按钮文字「✅已存·角色」+ 橙色发光直接展示, 一眼可知存到哪 */
.bgm-item-actions { flex-wrap: wrap; max-width: calc(100% - 20px); }
.bgm-item-actions .bgm-asset-wrap { position: relative; }
.bgm-act-btn {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
/* ⭐ 存资产: 已存为资产 → 绿色常亮徽章 (提示本卡已入库) */
.bgm-act-btn.bgm-act-asset.is-saved {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
  color: #bbf7d0;
}
.bgm-act-btn.bgm-act-asset.is-saved:hover {
  background: rgba(34, 197, 94, 0.4);
  border-color: #4ade80;
  color: #dcfce7;
}
.bgm-act-btn:hover {
  background: rgba(91, 140, 255, 0.88);
  border-color: #93c5fd;
  color: #ffffff;
  transform: scale(1.05);
}
.bgm-asset-wrap {
  position: relative;
  display: inline-flex;
}
.bgm-asset-menu {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(91, 140, 255, 0.45);
  border-radius: 8px;
  padding: 4px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
  z-index: 20;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .18s cubic-bezier(0.16, 1, 0.3, 1), transform .18s cubic-bezier(0.16, 1, 0.3, 1), visibility .18s;
}
.bgm-asset-menu::before {
  content: '';
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: -14px;
  height: 18px;
  background: transparent;
  pointer-events: auto;
}
.bgm-asset-wrap:hover .bgm-asset-menu,
.bgm-asset-wrap.is-open .bgm-asset-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.bgm-quick-cat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.bgm-quick-cat:hover {
  background: rgba(91, 140, 255, 0.45);
  border-color: #93c5fd;
  color: #ffffff;
  transform: scale(1.05);
}
/* 已存到该分类 → 橙色发光 (点击它即取消存资产) */
.bgm-quick-cat.is-saved-cat {
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.42), rgba(249, 115, 22, 0.28));
  border-color: rgba(251, 146, 60, 0.85);
  color: #ffedd5;
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.75), 0 0 3px rgba(251, 146, 60, 0.9) inset;
  font-weight: 700;
}
.bgm-quick-cat.is-saved-cat:hover {
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.62), rgba(249, 115, 22, 0.45));
  border-color: #fb923c;
  color: #fff7ed;
  transform: scale(1.06);
}
/* 🌟 已存分类: 橙色按钮常亮(菜单收起时只显示这颗, 其余隐藏); hover 时恢复浮层展开全部 */
.bgm-asset-wrap.has-saved-cat:not(:hover) .bgm-asset-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  margin: 0 0 0 4px;
}
.bgm-asset-wrap.has-saved-cat:not(:hover) .bgm-asset-menu::before { display: none; }
.bgm-asset-wrap.has-saved-cat:not(:hover) .bgm-asset-menu .bgm-quick-cat:not(.is-saved-cat) { display: none; }
/* 🌟 橙色锁定常驻: 已存状态下(JS 给父级操作栏加 .force-show-asset),
   无论画布(.img-actions)还是 H画廊(.bgm-item-actions), 整条操作栏都不依赖 hover 强制常显,
   否则父级 opacity:0 会把常驻的橙色也藏掉 */
.img-actions.force-show-asset,
.bgm-item-actions.force-show-asset {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.bgm-act-btn.bgm-act-del-all {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.45);
  font-weight: 600;
}
.bgm-act-btn.bgm-act-del-all:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: #fca5a5;
  color: #ffffff;
  transform: scale(1.05);
}
.bgm-act-btn.bgm-act-lock {
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.88);
}
.bgm-act-btn.bgm-act-lock:hover {
  background: rgba(234, 179, 8, 0.3);
  border-color: #facc15;
  color: #fef08a;
}
.bgm-act-btn.bgm-act-lock.is-locked {
  background: rgba(234, 179, 8, 0.35) !important;
  border-color: #facc15 !important;
  color: #fef08a !important;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.45);
}
.bgm-act-btn.bgm-act-del {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.15);
}
.bgm-act-btn.bgm-act-del:hover {
  background: rgba(239, 68, 68, 0.88);
  border-color: #fca5a5;
  color: #ffffff;
}
.bgm-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.bgm-hotkeys {
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.bgm-k {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #93c5fd;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 600;
}