/* ============================================================================
   Batch Workflow — "edit a month in one click".

   A full-screen panel (opened from the header "Batch" button). A folder PINS one
   style; clips added to it inherit that look. The user reviews every clip with a
   per-clip checkbox and only the CHECKED clips render — so a bad clip never burns
   a video from the monthly quota.

   Reuses the existing backend end to end: /api/folders (CRUD + pinned style),
   /api/folders/{id}/render (all-or-nothing quota pre-flight + enqueue), and
   /api/folders/{id}/status (per-clip progress). No new endpoints.

   Same two rules as the rest of the app: [hidden] wins, and no unverified value
   renders (blocks hide on a failed fetch instead of showing zeros).
   ============================================================================ */
#batchPanel[hidden]{ display:none !important; }
#batchPanel{
  position:fixed; inset:0; z-index:1200;
  display:flex; flex-direction:column;
  background:rgba(7,6,9,.9); backdrop-filter:blur(10px);
  overflow:auto; overscroll-behavior:contain; animation:bFade .18s ease;
}
@keyframes bFade{ from{opacity:0} to{opacity:1} }

.batch-wrap{ width:100%; max-width:1040px; margin:auto; padding:clamp(20px,4vw,44px) clamp(16px,4vw,36px); position:relative; }

.batch-top{ text-align:center; margin-bottom:26px; padding:0 46px; }
.batch-title{ font-family:var(--font-disp); font-size:1.6rem; font-weight:700; letter-spacing:-.025em; color:var(--tx); }
.batch-sub{ color:var(--tx2); font-size:.92rem; margin-top:6px; }
.batch-close{
  position:absolute; top:0; right:0; width:38px; height:38px; border-radius:50%;
  background:var(--srf2); border:1px solid var(--bd); color:var(--tx2);
  font-size:1.25rem; line-height:1; cursor:pointer; transition:.15s;
}
.batch-close:hover{ background:var(--srf3); color:var(--tx); border-color:var(--bd2); }

.batch-err{ text-align:center; color:#ff6b6b; font-size:.86rem; margin:14px 0; }
.batch-back{ background:none; border:none; color:var(--tx2); font-weight:600; font-size:.9rem; cursor:pointer; padding:6px 0; margin-bottom:10px; }
.batch-back:hover{ color:var(--tx); }

/* ---- folder grid ---- */
.batch-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.fcard{
  background:var(--srf); border:1px solid var(--bd); border-radius:var(--r-lg);
  padding:18px; cursor:pointer; transition:.15s; display:flex; flex-direction:column; gap:6px; min-height:118px;
}
.fcard:hover{ border-color:var(--brand); background:var(--srf2); }
.fcard .fn{ font-family:var(--font-disp); font-weight:700; font-size:1.02rem; color:var(--tx); }
.fcard .fmeta{ color:var(--tx2); font-size:.82rem; }
.fcard .fmeta b{ color:var(--tx); }
.fcard .fstyle{ margin-top:auto; font-size:.76rem; color:var(--accent); font-weight:600; }
.fcard--new{ align-items:center; justify-content:center; border-style:dashed; color:var(--tx2); font-weight:700; }
.fcard--new:hover{ color:var(--accent); border-color:var(--accent); }

/* ---- create form ---- */
.batch-form{ background:var(--srf); border:1px solid var(--bd); border-radius:var(--r-lg); padding:20px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:22px; }
.batch-field{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:180px; }
.batch-field label{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); font-weight:700; }
.batch-input, .batch-select{
  background:var(--srf2); border:1px solid var(--bd); border-radius:var(--r-sm); color:var(--tx);
  padding:11px 12px; font-size:.92rem; font-family:inherit;
}
.batch-input:focus, .batch-select:focus{ outline:none; border-color:var(--brand); }

/* ---- buttons ---- */
.b-btn{ padding:12px 20px; border-radius:var(--r-sm); font-weight:700; font-size:.92rem; cursor:pointer; border:1px solid transparent; transition:.15s; }
.b-btn--primary{ background:var(--grad); color:#fff; }
.b-btn--primary:hover{ filter:brightness(1.08); }
.b-btn--ghost{ background:var(--srf2); color:var(--tx); border-color:var(--bd); }
.b-btn--ghost:hover{ background:var(--srf3); border-color:var(--brand); }
.b-btn--go{ background:linear-gradient(180deg,#E8FF7A 0%,#D9FF4B 46%,#C2EE28 100%); color:#0a0a0a; border:0;
  box-shadow:0 6px 18px rgba(217,255,75,.22); }
.b-btn--go:hover{ transform:translateY(-2px); }
.b-btn:disabled{ opacity:.5; cursor:default; transform:none; filter:none; }
.b-btn--danger{ background:none; border:1px solid rgba(255,80,80,.3); color:#ff8080; }
.b-btn--danger:hover{ background:rgba(255,80,80,.1); }

/* ---- folder detail ---- */
.batch-detailhead{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.batch-detailhead .dn{ font-family:var(--font-disp); font-weight:700; font-size:1.4rem; color:var(--tx); }
.batch-detailhead .dstyle{ font-size:.82rem; color:var(--tx2); }
.batch-detailhead .dstyle b{ color:var(--accent); }
.batch-spacer{ flex:1; }
.batch-actions{ display:flex; gap:10px; align-items:center; margin:18px 0 20px; flex-wrap:wrap; }
.batch-selcount{ color:var(--tx2); font-size:.86rem; }
.batch-selcount b{ color:var(--tx); }

/* ---- clip review grid ---- */
.clip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.clip{
  position:relative; background:var(--srf); border:1px solid var(--bd); border-radius:var(--r-lg);
  overflow:hidden; transition:.15s;
}
.clip.sel{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.clip .cthumb{ aspect-ratio:9/16; max-height:230px; background:#000 center/cover no-repeat; position:relative; }
.clip .ccheck{
  position:absolute; top:10px; left:10px; width:26px; height:26px; border-radius:7px;
  background:rgba(7,6,9,.7); border:2px solid rgba(255,255,255,.5); cursor:pointer;
  display:grid; place-items:center; color:#0a0a0a; font-weight:900; font-size:15px; z-index:2;
}
.clip.sel .ccheck{ background:var(--accent); border-color:var(--accent); }
.clip .cstate{ position:absolute; top:10px; right:10px; font-size:.66rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 8px; border-radius:99px; background:rgba(7,6,9,.72); color:var(--tx2); z-index:2; }
.clip .cstate.done{ background:var(--accent); color:#0a0a0a; }
.clip .cstate.err{ background:#ff5555; color:#fff; }
.clip .cbody{ padding:11px 12px; }
.clip .cname{ font-weight:600; font-size:.86rem; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clip .cprog{ height:4px; border-radius:99px; background:var(--srf3); overflow:hidden; margin-top:8px; display:none; }
.clip .cprog.on{ display:block; }
.clip .cprog i{ display:block; height:100%; background:var(--accent); width:0; transition:width .4s ease; }
.clip .cdl{ display:inline-block; margin-top:8px; font-size:.8rem; font-weight:700; color:var(--accent); text-decoration:none; }
.batch-empty{ text-align:center; color:var(--tx2); padding:40px 0; }
.batch-empty b{ color:var(--tx); display:block; font-size:1.05rem; margin-bottom:6px; }