/* ---------- 批量图片卡 (qty>1: 折叠叠牌 / 展开宫格 · 方案1+方案2纯静态极简融合) ---------- */
.card.is-batch-card {
  --tc: #d97706;
  --tc-rgb: 217, 119, 6;
  border: 2px solid #d97706 !important;
  background: #11141c;
}
.card.is-batch-card.batch-expanded {
  border: 2.5px solid #f59e0b !important;
}

/* 🌟 方案2: 文件夹切角 Tab 标头 (物理形态突出，远看轮廓立判) */
.card .batch-card-header {
  background: linear-gradient(180deg, #271f14, #181410) !important;
  border-bottom: 2px solid #d97706 !important;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px 8px 0 0;
}
.card .batch-card-header .card-title {
  color: #fde68a;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.card .batch-tab-tag {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card .batch-tab-tag.is-fold {
  background: #b45309;
  color: #ffffff;
  border: 1px solid #f59e0b;
}
.card .batch-tab-tag.is-fold:hover {
  background: #d97706;
}
.card .batch-tab-tag.is-exp {
  background: #1d4ed8;
  color: #ffffff;
  border: 1px solid #60a5fa;
}
.card .batch-tab-tag.is-exp:hover {
  background: #2563eb;
}
.card .batch-hotkey-hint {
  font-size: 11px;
  color: #a1a1aa;
  font-weight: 500;
}

/* 右上角纯色静态大角标 (无动画、无闪烁、不卡顿) */
.batch-pile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  background: #d97706;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  user-select: none;
}
.batch-pile-badge.expanded {
  background: #2563eb;
  border-color: rgba(255, 255, 255, 0.7);
}
.batch-pile-badge .bp-icon { font-size: 13px; }
.batch-pile-badge .bp-count { font-weight: 900; font-size: 13px; }
.batch-pile-badge .bp-label { font-size: 11px; opacity: 0.95; padding-left: 1px; }

/* 拟物静态双层卡背 (纯静态几何层叠，零 GPU 模糊阴影) */
.card.image .b-holder { display: flex; flex-direction: column; }
.card.image .b-holder .mode-badge { bottom: auto; top: 6px; left: 6px; right: auto; }
.card.image .b-holder.b-folded { overflow: visible; }
.card.image .b-fold-wrap { position: relative; width: 100%; }

.card.image .b-plate {
  position: absolute; inset: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: #181b24;
  pointer-events: none;
}
.card.image .b-plate-1 {
  border-color: rgba(245, 158, 11, 0.55);
}
.card.image .b-plate-2 {
  border-color: rgba(245, 158, 11, 0.35);
}
.card.image .b-plate-3 {
  border-color: rgba(245, 158, 11, 0.2);
}

.card.image .b-main-img {
  position: relative; width: 100%; border-radius: 8px; display: block;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
/* 比例锁定 (跟随生成参数比例): 框高由 aspect-ratio 决定, 主图铺满裁切 */
.card.image .b-main-img.b-ratio-lock { position: absolute; inset: 0; height: 100%; object-fit: cover; }
/* 数量角标 (左下) — 跟随卡宽自适应 */
.card.image .b-count {
  position: absolute; bottom: 6px; left: 6px; z-index: 3;
  padding: clamp(4px, 1cqw, 10px) clamp(8px, 1.8cqw, 18px);
  border-radius: 16px; font-size: clamp(12px, 2.2cqw, 18px); font-weight: 600;
  background: rgba(20,22,28,.85); color: #cfd6e4; pointer-events: none;
}
.card.image .b-warn {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  padding: clamp(4px, 1cqw, 10px) clamp(8px, 1.8cqw, 18px);
  border-radius: 14px; font-size: clamp(12px, 2.2cqw, 18px);
  background: rgba(90,60,10,.9); color: #ffd9a0; pointer-events: none;
}
/* 生成中进度角标 (折叠态右上 / 展开态顶栏) */
.card.image .b-progress-badge {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  padding: clamp(4px, 1cqw, 10px) clamp(8px, 1.8cqw, 18px);
  border-radius: 14px; font-size: clamp(12px, 2.2cqw, 18px); font-weight: 600;
  background: rgba(30,60,40,.92); color: #a8e6b8; pointer-events: none;
}
.card.image .b-expanded .b-progress-badge { position: static; }
@keyframes b-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.card.image .b-holder .b-expand { color: #ffd9a0; }
/* 展开态: 560 宽宫格 (列数=√张数, 由内联 grid-template-columns 控制; 卡片整体向右拉宽) */
.card.image .b-expanded .b-grid {
  display: grid; gap: 8px;
  padding: 6px;
}
.card.image .b-cell {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 7px; overflow: hidden;
  background: #171b24; border: 2px solid transparent; cursor: pointer;
  container-type: inline-size;   /* 格内按钮按格子宽度自适应 */
}
.card.image .b-cell.main { border-color: rgba(139,148,255,.85); }
.card.image .b-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.image .b-cell.failed { cursor: default; }
.card.image .b-cell-err {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; font-size: 18px; color: #e58f8f; gap: 3px;
}
.card.image .b-cell-err small { font-size: 9px; color: #9a6a6a; padding: 0 4px; text-align: center; }
.card.image .b-cell-run { display: flex; align-items: center; justify-content: center; height: 100%; }
.card.image .b-cell .b-detach {
  position: absolute; top: 8px; right: clamp(44px, 8.5cqw, 72px);
  border: none; border-radius: 8px;
  padding: clamp(4px, 1.2cqw, 12px) clamp(8px, 2.2cqw, 22px);
  font-size: clamp(13px, 2.5cqw, 21px);
  background: rgba(20,22,28,.8); color: #cfd6e4; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.card.image .b-cell:hover .b-detach { opacity: 1; }
.card.image .b-cell .b-detach:hover { background: rgba(60,70,100,.95); color: #fff; }
/* 宫格内每张图的独立 ❌ (位于右上角最右侧, 与拆出按钮并排) */
.card.image .b-cell .b-delete {
  position: absolute; top: 8px; right: 8px;
  border: none; border-radius: 8px;
  padding: clamp(4px, 1.2cqw, 12px) clamp(8px, 2.2cqw, 22px);
  font-size: clamp(13px, 2.5cqw, 21px);
  background: rgba(20,22,28,.8); color: #cfd6e4; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.card.image .b-cell:hover .b-delete { opacity: 1; }
/* 失败格与生成中格的 ❌ 常显: 一点就删掉这条记录/取消生成，不再卡死占位置 */
.card.image .b-cell.failed .b-delete,
.card.image .b-cell.running .b-delete { opacity: 1; }
.card.image .b-cell .b-delete:hover { background: rgba(140,30,30,.92); color: #ffd9d9; }
.card.image .b-cell .b-delete:disabled { opacity: .45; cursor: wait; }
.card.image .b-cell .b-retry {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  border: none; border-radius: 8px;
  padding: clamp(5px, 1.2cqw, 12px) clamp(12px, 2.6cqw, 26px);
  font-size: clamp(13px, 2.4cqw, 20px);
  background: rgba(90,60,10,.9); color: #ffd9a0; cursor: pointer;
}
.card.image .b-cell .b-retry:hover { background: rgba(130,90,20,.95); color: #fff; }
.card.image .b-cell .b-cell-err { font-size: clamp(18px, 4cqw, 34px); }
.card.image .b-actions {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; width: 100%;
}
.card.image .b-actions .b-collapse {
  border: 1px solid rgba(120,130,150,.4); border-radius: 9px;
  padding: clamp(6px, 1.3cqw, 13px) clamp(14px, 2.8cqw, 28px);
  background: rgba(28,32,42,.8); color: #cfd6e4;
  font-size: clamp(13px, 2.5cqw, 21px); cursor: pointer;
}
.card.image .b-actions .b-collapse:hover { background: rgba(44,50,64,.95); color: #fff; }
.card.image .b-actions .b-count { position: static; pointer-events: none; }
.card.image .b-holder.no-media { justify-content: center; }