/* CastCut — mobile-first dark UI. One accent color, big tap targets, no layout shift. */
:root{
  --bg:#0d1117; --panel:#161c26; --panel2:#1c2330; --line:#2a3342;
  --ink:#e8edf7; --dim:#8b97ab;
  --acc:#4f8cff; --acc-ink:#071225;
  --ok:#3fb950; --fail:#f85149; --cancel:#d29922; --await:#bc8cff;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior-y:none}
main{padding:12px 12px 120px;max-width:680px;margin:0 auto}
h1,h2,h3{margin:0}
h2{font-size:17px;font-weight:700}
h3{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin:16px 0 8px}
.dim{color:var(--dim)} .sm{font-size:12.5px} .center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
code{background:var(--panel2);padding:1px 5px;border-radius:6px;font-size:12px}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;background:rgba(13,17,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-size:18px;font-weight:800;letter-spacing:.02em}

/* cards & fields */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0}
.field{width:100%;min-height:48px;padding:12px 14px;margin-top:8px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:inherit}
textarea.field{min-height:88px;resize:vertical}
.lbl{display:block;margin:12px 0 0;font-size:12.5px;color:var(--dim)}
.err{color:#ff9d9d;white-space:pre-wrap;font-size:13px;margin:8px 0 0;min-height:0}
.err:empty{display:none}

/* buttons — 48px tap targets */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;
  border-radius:12px;border:1px solid transparent;font:inherit;font-weight:650;cursor:pointer;user-select:none}
.btn.block{width:100%;margin-top:12px}
.btn.sm{min-height:38px;padding:8px 14px;font-size:13.5px;border-radius:10px}
.btn.primary{background:var(--acc);color:var(--acc-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.warn{background:transparent;color:var(--cancel);border-color:var(--cancel)}
.btn.danger{background:transparent;color:var(--fail);border-color:var(--fail)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn:active{transform:scale(.98)}
.rowgap{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.rowgap .btn{flex:1}

/* source kind pills */
.pillrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 4px}
.pill{min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.pill.sel{border-color:var(--acc);color:var(--ink);background:rgba(79,140,255,.12)}

/* status badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:12.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.badge.queued,.badge.running{color:var(--acc);border-color:rgba(79,140,255,.5);background:rgba(79,140,255,.10)}
.badge.running::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pulse 1.1s infinite}
.badge.queued::before{content:"⏳"}
.badge.await{color:var(--await);border-color:rgba(188,140,255,.5);background:rgba(188,140,255,.10)}
.badge.await::before{content:"✋"}
.badge.ok{color:var(--ok);border-color:rgba(63,185,80,.45);background:rgba(63,185,80,.08)}
.badge.ok::before{content:"●"}
.badge.done{color:#07130b;background:var(--ok);border-color:var(--ok)}
.badge.done::before{content:"✅"}
.badge.failed{color:#fff;background:var(--fail);border-color:var(--fail)}
.badge.failed::before{content:"✖"}
.badge.cancelled{color:#1a1405;background:var(--cancel);border-color:var(--cancel)}
.badge.cancelled::before{content:"⛔"}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* job list */
#jobList{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.jobcard{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;cursor:pointer;min-height:64px}
.jobcard:active{background:var(--panel2)}
.jobcard.failed{border-left:4px solid var(--fail)}
.jobcard.cancelled{border-left:4px solid var(--cancel)}
.jobcard .jt{flex:1;min-width:0}
.jobcard .jt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobcard .jt small{color:var(--dim)}
.rowhead{display:flex;align-items:center;justify-content:space-between;margin-top:22px}

/* job head */
.jobhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.jobhead h2{flex:1;min-width:0;overflow-wrap:anywhere}
.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.actions .btn{flex:1;min-width:110px}

.alert{border-radius:12px;padding:12px 14px;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.alert.fail{background:rgba(248,81,73,.10);border:1px solid rgba(248,81,73,.45)}
.alert.fail a{align-self:flex-start}

/* file selection */
.filelist{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:46vh;overflow-y:auto}
.frow{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1.5px solid var(--line);
  border-radius:12px;padding:12px 14px;min-height:56px;cursor:pointer;user-select:none}
.frow.sel{border-color:var(--acc);background:rgba(79,140,255,.10)}
.frow.novideo{opacity:.45}
.frow .chk{width:26px;height:26px;flex:none;border-radius:8px;border:2px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-size:15px;color:var(--acc-ink)}
.frow.sel .chk{background:var(--acc);border-color:var(--acc)}
.frow .fi{flex:1;min-width:0}
.frow .fi b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .fi small{color:var(--dim)}
.frow .vbadge{font-size:10px;font-weight:800;color:var(--acc);border:1px solid rgba(79,140,255,.5);
  padding:2px 6px;border-radius:6px;flex:none}

/* sticky action bar */
.stickybar{position:sticky;bottom:12px;z-index:15;display:flex;align-items:center;gap:12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.45)}
.stickybar span{flex:1;color:var(--dim)}
.stickybar .btn{flex:none;min-width:150px}

/* mode cards */
.modegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.modecard{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  background:var(--panel2);border:1.5px solid var(--line);border-radius:14px;padding:16px;color:var(--ink);
  font:inherit;cursor:pointer;min-height:110px}
.modecard:active,.modecard.on{border-color:var(--acc);background:rgba(79,140,255,.10)}
.modecard .mi{font-size:26px}
.modecard small{font-weight:400}

/* face gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:12px}
.face{position:relative;background:var(--panel2);border:2.5px solid var(--line);border-radius:14px;
  padding:6px;cursor:pointer;text-align:center;min-height:120px}
.face img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;display:block;background:#0a0d13}
.face.sel{border-color:var(--acc);background:rgba(79,140,255,.10)}
.face.sel .ord{position:absolute;top:8px;left:8px;background:var(--acc);color:var(--acc-ink);border-radius:999px;
  min-width:26px;height:26px;line-height:26px;font-weight:800;font-size:13px}
.face.ignored{opacity:.28}
.face small{display:block;color:var(--dim);font-size:11px;margin-top:4px}
.tuners{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* downloads */
#downloads{display:flex;flex-direction:column;gap:10px;margin-top:12px}
#downloads a{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;color:var(--acc);text-decoration:none;font-weight:600;
  overflow-wrap:anywhere}
#downloads a small{color:var(--dim);font-weight:400;margin-left:auto;flex:none}

/* modal + toast */
#confirmModal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:flex;
  align-items:flex-end;justify-content:center;padding:16px}
#confirmModal[hidden]{display:none}
.modalcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;
  width:100%;max-width:420px}
.modalcard p{margin:0 0 6px;font-size:15px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:13.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
#toast[hidden]{display:none}

@media (min-width:560px){
  main{padding-top:20px}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
}