/* v4 specific — flat-grid + chip-strip switcher (no batch accordion) */

.scope-strip{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;font-size:12px;color:hsl(var(--muted-fg))}
.scope-stat{font-family:var(--mono);font-size:11px;color:hsl(var(--ink-3))}
.scope-stat strong{color:hsl(var(--foreground))}

/* batch chip-strip switcher (top, horizontal, no accordion) */
.batch-switcher{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:10px 0 14px;
  border-bottom:1px solid hsl(var(--border) / 0.5);
  margin-bottom:18px;
}
.bchip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  background:hsl(var(--card) / 0.5);
  border:1px solid hsl(var(--border));
  color:hsl(var(--muted-fg));font-size:12px;
  cursor:pointer;transition:background .12s, border-color .12s, color .12s;
  font-family:var(--mono);
}
.bchip:hover{background:hsl(var(--card-hover));color:hsl(var(--foreground))}
.bchip.active{
  background:hsl(var(--card-hover));border-color:hsl(var(--border-strong));
  color:hsl(var(--foreground));font-weight:600;
  box-shadow:inset 0 0 0 1px hsla(24,95%,60%,0.30);
}
.batch-switcher[data-accent="orange"]  .bchip.active{box-shadow:inset 0 0 0 1px hsla(24,95%,60%,0.40)}
.batch-switcher[data-accent="yellow"]  .bchip.active{box-shadow:inset 0 0 0 1px hsla(48,92%,60%,0.40)}
.batch-switcher[data-accent="emerald"] .bchip.active{box-shadow:inset 0 0 0 1px hsla(160,65%,50%,0.40)}
.bchip-name{}
.bchip-count{
  font-size:10.5px;padding:1px 6px;border-radius:5px;
  background:hsl(var(--muted));color:hsl(var(--muted-fg));
}
.bchip.active .bchip-count{background:hsla(24,95%,60%,0.18);color:hsl(24 95% 75%)}
.batch-switcher[data-accent="yellow"]  .bchip.active .bchip-count{background:hsla(48,92%,60%,0.18);color:hsl(48 92% 80%)}
.batch-switcher[data-accent="emerald"] .bchip.active .bchip-count{background:hsla(160,65%,50%,0.18);color:hsl(160 65% 70%)}
.bchip.muted{color:hsl(var(--ink-3));font-style:italic}

/* batch section (flat — not accordion) */
.batch-section{margin-bottom:34px}
.batch-line{
  display:flex;align-items:center;gap:10px;padding:6px 0 4px;
  flex-wrap:wrap;
}
.batch-line .hash{flex-shrink:0;color:hsl(24 95% 65%)}
.batch-section[data-batch*="creative"] .batch-line .hash,
[data-page="creative"] .batch-line .hash{color:hsl(48 92% 70%)}
[data-page="delivery"] .batch-line .hash{color:hsl(160 65% 65%)}
.batch-line .bid{font-family:var(--mono);font-size:13px;font-weight:600;color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.batch-line .bcount{font-size:11px;padding:2px 7px;border-radius:5px;background:hsl(var(--muted));color:hsl(var(--muted-fg));font-variant-numeric:tabular-nums;flex-shrink:0}
.batch-line .bdate{font-family:var(--mono);font-size:11px;color:hsl(var(--ink-3));flex-shrink:0}
.batch-line .copy-btn{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:5px;
  border:1px solid hsl(var(--border));background:hsl(var(--card) / 0.5);
  color:hsl(var(--muted-fg));font-family:var(--mono);font-size:10.5px;
  cursor:pointer;transition:background .12s;
}
.batch-line .copy-btn:hover{background:hsl(var(--card-hover));color:hsl(var(--foreground))}
.batch-line .kebab{
  width:24px;height:24px;display:grid;place-items:center;
  border-radius:5px;color:hsl(var(--muted-fg));
  border:1px solid hsl(var(--border));background:hsl(var(--card) / 0.5);
  cursor:pointer;
}
.batch-line .kebab:hover{background:hsla(0,70%,60%,0.15);color:hsl(0 70% 78%)}

.xstage{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;
  color:hsl(var(--muted-fg));
  margin:6px 0 12px;padding:0;
}
.xstage a{
  display:inline-flex;align-items:center;gap:4px;
  color:hsl(var(--muted-fg));
  border-bottom:1px dashed hsl(var(--border-strong));
  padding-bottom:1px;
}
.xstage a:hover{color:hsl(var(--foreground));border-bottom-color:hsl(var(--ink-3))}
.xstage a.here{color:hsl(var(--foreground));border-bottom:none;font-weight:500}
.xstage a .dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.xstage a[data-stage="hot"] .dot{background:hsl(24 95% 60%)}
.xstage a[data-stage="creative"] .dot{background:hsl(48 92% 60%)}
.xstage a[data-stage="delivery"] .dot{background:hsl(160 65% 50%)}
.xstage .off{color:hsl(var(--ink-3) / 0.6);display:inline-flex;align-items:center;gap:4px}
.xstage .off .dot{width:5px;height:5px;border-radius:50%;background:hsl(var(--ink-3) / 0.5)}
.xstage .arr{color:hsl(var(--border-strong))}

/* fixed: thumb-grid uses real images, no placeholder */
.thumb-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.thumb-shell{
  position:relative;aspect-ratio:9/16;border-radius:7px;overflow:hidden;
  background:hsl(var(--muted));
  box-shadow:inset 0 0 0 1px hsl(var(--border));
}
.thumb-shell img{width:100%;height:100%;object-fit:cover;display:block;background:hsl(var(--muted))}

.singleton-list{display:flex;flex-direction:column;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--card))}
.singleton-row{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:14px;align-items:center;
  padding:7px 14px;border-bottom:1px solid hsl(var(--border) / 0.5);
  font-family:var(--mono);font-size:11px;
}
.singleton-row:last-child{border-bottom:none}
.singleton-row .ks{color:hsl(var(--muted-fg))}
.singleton-row .bid{color:hsl(var(--foreground) / 0.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.singleton-row .time{color:hsl(var(--ink-3))}

/* slots-page-specific */
.page-band{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 18px;
  border:1px solid hsl(var(--border) / 0.6);
  background:hsl(var(--card) / 0.5);
  border-radius:10px;margin-bottom:18px;
}
.page-band-sub{margin:6px 0 0;font-size:12px;color:hsl(var(--muted-fg));max-width:680px;line-height:1.55}

.intro-card-v4{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;margin-bottom:16px;
  background:linear-gradient(135deg, hsla(0,75%,65%,0.10), transparent 65%);
  border:1px solid hsla(0,75%,65%,0.22);
  border-radius:14px;
}
.intro-card-v4 .intro-icon{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:hsla(0,75%,65%,0.18);
  box-shadow:inset 0 0 0 1px hsla(0,75%,65%,0.34);
  color:hsl(0 75% 80%);flex-shrink:0;
}
.intro-card-v4 .intro-body h3{margin:0 0 6px;font-size:15px;font-weight:600}
.intro-card-v4 .intro-body p{margin:0;font-size:13px;color:hsl(var(--muted-fg));line-height:1.6;max-width:780px}
.intro-card-v4 .intro-body .rose{color:hsl(0 75% 80%);font-weight:500}
.intro-card-v4 .intro-body .orange{font-family:var(--mono);color:hsl(24 95% 75%)}

.compose{padding:18px 20px;border:1px solid hsl(var(--border) / 0.6);background:hsl(var(--card) / 0.5);border-radius:14px;margin-bottom:24px}
.compose-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.compose textarea{
  width:100%;min-height:108px;resize:vertical;
  background:hsl(var(--background) / 0.5);
  border:1px solid hsl(var(--border));border-radius:10px;
  padding:12px 14px;
  color:hsl(var(--foreground));font-size:13px;line-height:1.55;font-family:inherit;
  outline:none;transition:border-color .12s, box-shadow .12s;
}
.compose textarea:focus{border-color:hsla(0,75%,65%,0.40);box-shadow:0 0 0 3px hsla(0,75%,65%,0.15)}
.compose-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:11px;color:hsl(var(--muted-fg))}
.btn.run-trial{
  padding:7px 14px;height:auto;font-size:13px;
  background:hsla(0,75%,65%,0.15);border:1px solid hsla(0,75%,65%,0.40);
  color:hsl(0 75% 82%);font-weight:500;
}
.btn.run-trial:hover{background:hsla(0,75%,65%,0.25)}

.trial-results{margin-bottom:24px}
.trial-results .card-head{margin-bottom:10px}
.trial-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}

.slot-card-v4{
  border:1px solid hsl(var(--border));background:hsl(var(--card) / 0.6);
  border-radius:10px;padding:14px 16px;margin-bottom:10px;
}
.slot-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.slot-head .status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.slot-head .slot-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:1.5px 8px;border-radius:5px;
  font-size:10.5px;font-weight:500;
  background:hsla(160,65%,50%,0.15);color:hsl(160 65% 70%);
}
.slot-head .slot-id{font-family:var(--mono);font-size:11.5px;color:hsl(var(--muted-fg))}
.slot-head .slot-meta{margin-left:auto;font-size:11px;color:hsl(var(--ink-3));font-family:var(--mono)}
.slot-head .slot-actions{display:flex;gap:4px}
.slot-brief{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:hsl(var(--foreground) / 0.85);max-width:880px}
.slot-samples-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.slot-samples-row img{width:64px;aspect-ratio:9/16;object-fit:cover;border-radius:6px;flex-shrink:0;background:hsl(var(--muted));box-shadow:inset 0 0 0 1px hsl(var(--border))}

/* status pill colors */
.slot-status[class~="paused"]{background:hsl(var(--muted));color:hsl(var(--muted-fg))}
.slot-card-v4 .slot-status:not(.active):not(.paused){background:hsla(38,92%,60%,0.15);color:hsl(38 92% 75%)}

/* delivery status dots */
.thumb-shell .duration{position:absolute;left:6px;bottom:6px;background:hsla(0,0%,0%,0.7);color:hsl(var(--foreground));font-size:9.5px;font-family:var(--mono);padding:1.5px 5px;border-radius:3px}
.thumb-shell .status-dot{position:absolute;right:6px;bottom:6px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px hsla(0,0%,0%,0.5)}
.status-dot.final{background:hsl(160 65% 55%)}
.status-dot.draft{background:hsl(38 92% 60%)}
.status-dot.rejected{background:hsl(0 75% 60%)}
.thumb-shell .corner-tr{position:absolute;right:6px;top:6px;background:hsla(48,92%,60%,0.92);color:hsl(48 92% 12%);font-size:9.5px;font-weight:700;padding:1.5px 5px;border-radius:3px;display:inline-flex;align-items:center;gap:2px}

@media (max-width: 820px){
  .batch-switcher{padding:8px 0 12px}
  .batch-line .bid{max-width:240px}
}