/* The studio (app.html). Builds on base.css. */
nav#tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
nav#tabs::-webkit-scrollbar{display:none}
nav#tabs button{background:none;border:0;padding:8px 13px;border-radius:9px;color:var(--mute);font-weight:650;font-size:14px;cursor:pointer;white-space:nowrap}
nav#tabs button:hover{color:var(--ink);background:var(--card)}
nav#tabs button.on{color:var(--ink);background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2)}
nav#tabs kbd{margin-left:6px}
.hright{display:flex;gap:8px;align-items:center}
#jobPill{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--card);border-radius:20px;padding:5px 12px 5px 8px;font-size:13px;cursor:pointer;max-width:260px}
#jobPill .ring{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--acc);animation:spin 1s linear infinite;flex:none}
#jobPill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes spin{to{transform:rotate(360deg)}}

main{max-width:1320px;margin:0 auto;padding:26px 18px 80px}
.sec{margin-top:28px}
.sechead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line2);background:var(--card);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:650;cursor:pointer;color:var(--ink2)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .n{opacity:.6;margin-left:4px;font-weight:500}
.notice{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--card));font-size:14px}
.notice.info{border-color:color-mix(in srgb,var(--acc) 40%,var(--line));background:color-mix(in srgb,var(--acc) 8%,var(--card))}
.notice b{display:block}
.privacy-line{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mute)}
.privacy-line svg{color:var(--ok);flex:none}

/* home */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:22px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.kpi .lbl{font-size:13px;color:var(--mute);font-weight:650}
.kpi .val{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.kpi .foot{font-size:12.5px;color:var(--mute)}
.kpi a{font-size:13px;font-weight:650;text-decoration:none;margin-top:4px}
.kpi.accent::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 40%,transparent),transparent 70%)}
.kpi.money .val{color:var(--ok)}
.steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.step .num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--card2);border:1px solid var(--line2);font-size:13px}
.step.done .num{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.step b{display:block;font-size:14px}
.step p{margin:2px 0 8px;color:var(--mute);font-size:13px}
.camps{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.camp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.camp .nm{font-weight:700}
.camp .pay{font-size:22px;font-weight:800;color:var(--ok)}
.empty{border:1px dashed var(--line2);border-radius:var(--r);padding:22px;text-align:center;color:var(--mute)}

/* clip cards */
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:16px}
.clip{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s;outline:none;min-width:0}
.clip:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.clip.sel{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 45%,transparent),var(--shadow)}
.thumb{position:relative;aspect-ratio:9/16;background:#000;cursor:pointer;overflow:hidden}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb .nomedia{position:absolute;inset:0;display:grid;place-items:center;color:#aaa;font-size:13px;text-align:center;padding:14px}
.thumb .badge{position:absolute;font-size:12px;font-weight:800;border-radius:7px;padding:2px 7px;z-index:2}
.thumb .score{top:8px;left:8px;background:var(--yel);color:var(--yel-ink)}
.thumb .dur{bottom:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-weight:650}
.thumb .st{top:8px;right:8px;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;background:rgba(0,0,0,.65);color:#fff}
.thumb .st.posted{background:var(--ok);color:var(--ok-ink)}.thumb .st.skipped{background:#555b70}
.thumb .play{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:opacity .15s;pointer-events:none;z-index:1}
.thumb:hover .play{opacity:1}
.thumb .hint{position:absolute;left:8px;bottom:8px;font-size:11.5px;color:#fff;opacity:0;transition:opacity .15s;font-weight:650;z-index:2}
.thumb:hover .hint{opacity:.9}
.cbody{padding:12px 12px 13px;display:flex;flex-direction:column;gap:8px;flex:1}
.ctitle{font-weight:700;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.ctags{color:var(--blue);font-size:12.5px;overflow-wrap:anywhere}
.cmeta{font-size:12px;color:var(--mute)}
.stars{display:flex;gap:2px}
.stars button{background:none;border:0;padding:0 1px;font-size:19px;line-height:1;cursor:pointer;color:var(--line2)}
.stars button.on{color:var(--yel)}
.stars button:hover{transform:scale(1.15)}
.postrow{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.postrow .lbl{font-size:11.5px;color:var(--mute);font-weight:650;width:100%}
.pbtn{border:1px solid var(--line2);background:var(--card2);border-radius:8px;padding:4px 8px;font-size:12px;font-weight:700;cursor:pointer}
.pbtn:hover{border-color:currentColor}
.pbtn.tt{color:var(--tt)}.pbtn.yt{color:var(--yt)}.pbtn.ig{color:var(--ig)}.pbtn.sk{color:var(--mute)}
.pbtn.on{background:currentColor}
.pbtn.on span{color:#fff}
.cbody details{font-size:13px}
.cbody summary{cursor:pointer;color:var(--mute);font-size:12.5px;font-weight:650}
.cbody details .fields{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.cbody details .full{grid-column:1/-1}
.cbody details input,.cbody details select,.cbody details textarea{padding:6px 8px;font-size:13px}
.copybtn{width:100%}

/* make */
#drop{border:2px dashed var(--line2);border-radius:var(--r);padding:38px 14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--bg2)}
#drop:hover,#drop.over{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--bg2))}
#drop b{display:block;font-size:17px;margin-bottom:4px}
#drop .big-ic{width:46px;height:46px;border-radius:14px;margin:0 auto 10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--pink));color:#fff}
.campbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--acc) 10%,var(--card));border:1px solid color-mix(in srgb,var(--acc) 40%,var(--line));border-radius:12px;padding:10px 14px;margin-bottom:16px}
.caps{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cap{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--line);border-radius:20px;padding:3px 10px;color:var(--ink2);background:var(--bg2)}
.cap i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.cap.no i{background:var(--bad)}.cap.mid i{background:var(--warn)}
.progress{height:8px;background:var(--bg2);border-radius:6px;overflow:hidden;margin:12px 0 8px}
.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--pink));transition:width .4s;border-radius:6px}
.stagelist{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.stagelist span{font-size:12px;font-weight:700;border-radius:20px;padding:3px 10px;background:var(--bg2);color:var(--mute);border:1px solid var(--line)}
.stagelist span.now{color:var(--ink);border-color:var(--acc)}
.stagelist span.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,var(--line))}
.heard{font-style:italic;color:var(--ink2);font-size:13.5px;min-height:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
pre{font-size:12px;max-height:220px;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px;white-space:pre-wrap;word-break:break-word}
.runs{list-style:none;margin:0;padding:0}
.runs li{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.runs li:first-child{border-top:0}
.alts{display:flex;flex-direction:column;gap:8px}
.alt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.alt .sc{font-weight:800;background:var(--yel);color:var(--yel-ink);border-radius:7px;padding:2px 7px;font-size:12px}
.alt .t{min-width:0}
.alt .t b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.why{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.why span{font-size:11px;border-radius:5px;padding:0 6px;background:var(--card2);border:1px solid var(--line);color:var(--mute)}

/* tables */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px;border-top:1px solid var(--line);vertical-align:middle}
th{font-size:12px;color:var(--mute);font-weight:700;border-top:0;text-transform:uppercase;letter-spacing:.04em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:800}
.vin{width:120px;text-align:right}

/* who pays */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 6px}
.subtabs button{background:var(--card);color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:650;font-size:13.5px;cursor:pointer}
.subtabs button.on{color:var(--ink);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,var(--card))}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.tile .n{font-size:24px;font-weight:800}
.tile .l{color:var(--mute);font-size:12.5px;font-weight:650}
.tile .s{color:var(--mute);font-size:12px;margin-top:2px}
/* Who pays: the figures are buttons that list what they count */
button.tile{display:flex;flex-direction:column;justify-content:flex-start;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
button.tile:hover{border-color:var(--acc);transform:translateY(-1px)}
button.tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button.tile.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,var(--card));box-shadow:var(--glow)}
button.tile.on .l{color:var(--ink)}
button.tile.on .s{color:var(--ink2)}
button.tile-flag .n{color:var(--bad)}
button.tile-flag:hover{border-color:var(--bad)}
.pfilters{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.pfilters label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.pfilters input,.pfilters select{padding:7px 9px;font-size:13px}
.plist{display:flex;flex-direction:column;gap:8px}
.prow{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.prow>.head{display:grid;grid-template-columns:minmax(160px,1.4fr) 1.6fr 1fr auto;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;width:100%;background:none;border:0;color:inherit;text-align:left;font:inherit}
.prow .name{font-weight:700;font-size:15px}
.prow .type{color:var(--mute);font-size:12px}
.pchip{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:12px;color:var(--ink2);white-space:nowrap}
.pill{border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700;white-space:nowrap}
.ca-yes{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}.ca-likely{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.ca-no{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}.ca-unk{background:var(--card2);color:var(--mute)}
.prow .rate{font-size:12.5px;color:var(--ink2)}
.prow .right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.prow .mystatus{font-size:11.5px;color:var(--mute)}
.prow .body{border-top:1px solid var(--line);padding:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:0}
.grid2 dt{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.grid2 dd{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.src{font-size:12px;color:var(--mute)}
.box{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:12px}
.box h4{margin:0 0 6px;font-size:13px}
.mine{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:start}
.starbtns button{background:none;border:0;color:var(--line2);font-size:20px;cursor:pointer;padding:0 1px}
.starbtns button.on{color:var(--yel)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.card h3{margin:0 0 6px}
.card p{margin:0 0 6px}
.card.flag{border-left:3px solid var(--bad)}

/* overlays */
.scrim{position:fixed;inset:0;background:rgba(5,6,10,.66);backdrop-filter:blur(3px);z-index:50;display:grid;place-items:center;padding:16px}
.dialog{background:var(--card);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px}
.dialog h2{font-size:20px}
.dialog .foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.rates{font-size:12.5px;color:var(--mute);margin:6px 0 0;padding-left:18px}
.player{background:#000;border-radius:16px;overflow:hidden;aspect-ratio:9/16;height:min(calc(100vh - 40px),calc((100vw - 32px) * 16 / 9));max-width:100%}
.player video{width:100%;height:100%;display:block}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;align-items:center}
.meter{height:8px;border-radius:5px;background:var(--bg2);overflow:hidden;margin:6px 0}
.meter div{height:100%;background:linear-gradient(90deg,var(--acc),var(--pink))}

@media (max-width:860px){
  .pfilters{grid-template-columns:1fr 1fr}
  .pfilters .search{grid-column:1/-1}
  .prow>.head{grid-template-columns:1fr auto}
  .prow>.head .rate-cell,.prow>.head .plat-cell{grid-column:1/-1}
  .grid2{grid-template-columns:1fr}
  .mine{grid-template-columns:1fr}
}
@media (max-width:720px){
  .top .in{gap:10px;height:auto;padding:8px 12px;flex-wrap:wrap}
  nav#tabs{order:3;width:100%;flex:none;margin:0 -4px}
  nav#tabs kbd,.hright .kbdhelp{display:none}
  .hright{margin-left:auto}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px 14px}
  main{padding:18px 16px 70px}
  .clips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cbody{padding:10px}
  .postrow .pbtn{padding:4px 6px}
  h1{font-size:23px}
  .kpi .val{font-size:28px}
  .alt{grid-template-columns:1fr;gap:6px}
  .dialog{padding:18px}
  .fields{grid-template-columns:1fr 1fr}
}
@media (max-width:380px){ .clips{grid-template-columns:1fr} }