/* the studio screen: dark, large type, made to be read from a distance; our own colours (not a copy of any product) */
:root{--bg:#0f1216;--pane:#171b21;--pane2:#1e232b;--line:#2b323c;--text:#e8ecf1;--muted:#8b96a5;--acc:#3fb9ff;--green:#3ddc84;--red:#e5484d;--purple:#7a4fd0;--yellow:#e6b422;--deck:#12161b}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.35 Inter,"Segoe UI",system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
small{font-size:11px}
.scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:#3a4350 transparent}
#login{position:fixed;inset:0;display:grid;place-items:center}
#login form{display:grid;gap:10px;background:var(--pane);padding:26px;border-radius:12px;border:1px solid var(--line);min-width:300px}
#login input,#login button{padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#0b0e12;color:var(--text);font-size:15px}
#login button{background:var(--acc);color:#04121c;font-weight:700;border:0}
#le{color:var(--red);min-height:18px}
#app{display:grid;grid-template-rows:auto 1fr;height:100vh}

/* ---- top ---- */
#top{display:grid;grid-template-columns:70px 1fr auto 170px 190px 64px;gap:6px;background:#0a0d10;border-bottom:1px solid var(--line);padding:6px;height:150px}
#top button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--pane2);border:1px solid var(--line);border-radius:8px;font-size:24px}
#top button small{font-size:10px;color:var(--muted)}
#top button:hover{background:#28303a}
#top button.on{background:var(--red);border-color:var(--red)}#top button.on small{color:#fff}
.side{display:grid;gap:6px}
.tr{display:grid;grid-auto-flow:column;gap:6px}.tr button{width:72px}
#decks{display:grid;gap:6px;min-width:0}#decks.two{grid-template-columns:1fr 1fr}#decks.one #d-next{display:none}
.deck{position:relative;display:grid;grid-template-columns:44px 1fr auto;grid-template-rows:auto 1fr;gap:0 10px;background:var(--deck);border:1px solid var(--line);border-radius:8px;padding:8px 10px 0 30px;min-width:0;overflow:hidden}
.deck .tag{position:absolute;left:0;top:0;bottom:58px;width:22px;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-weight:800;font-size:11px;letter-spacing:2px;color:#fff;display:flex;align-items:center;justify-content:center}
.tag.now{background:var(--red)}.tag.nx{background:#a5161d}
.deck .ico{font-size:34px;line-height:1;opacity:.9;padding-top:4px}
.deck .txt{min-width:0}.deck .ar,.deck .ti{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.deck .ar{font-size:22px;font-weight:600}.deck .ti{font-size:22px;font-weight:800}
.deck .mt{font-size:11px;color:var(--muted);margin-top:2px}
.deck .cd{font:700 50px/1 "Segoe UI",system-ui,sans-serif;color:var(--green);font-variant-numeric:tabular-nums;align-self:center;letter-spacing:-1px}
.deck .cd.warn{color:var(--yellow)}.deck .cd.end{color:var(--red)}
.deck .wv{grid-column:1/4;width:100%;height:58px;display:block;margin:2px 0 0}
#clock{display:grid;place-content:center;text-align:center;border-radius:50%;width:150px;height:138px;margin:auto;border:2px dotted #2f6fa0}
#clock .d,#clock .y{font-size:12px;color:var(--muted)}#clock .t{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
#logo{display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#1b2733,#10161d);border-radius:8px;border:1px solid var(--line);padding:6px}
#logo b{font-size:20px;line-height:1.1}#logo small{color:var(--muted);margin-top:4px}
.cpb{font-size:22px!important}

/* ---- studio panes ---- */
#studio{display:grid;grid-template-columns:minmax(260px,22%) 1fr minmax(240px,20%) minmax(280px,24%);gap:6px;padding:6px;min-height:0}
.pane{background:var(--pane);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pane h3{margin:0;padding:6px 10px;background:var(--pane2);font-size:14px;font-weight:600;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.pane h3 small{color:var(--muted);font-weight:400}

/* queue */
#q-list{flex:1}
.qi{display:grid;grid-template-columns:46px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-bottom:1px solid #222831;cursor:default}
.qi .pl{width:40px;height:40px;border-radius:6px;border:0;background:#262d36;font-size:18px}
.qi .pl:hover{background:var(--green);color:#03140a}
.qi .h{font-size:11px;color:var(--muted)}.qi .h b{color:var(--text)}.qi .h i{color:var(--green);font-style:normal;margin-left:6px}
.qi .n{font-size:16px;font-weight:600;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi .c{font-size:11px;color:var(--muted)}
.qi.jingle{background:#3a2163}.qi.ad{background:#4a1a1e}.qi.handed{outline:1px solid #a5161d;outline-offset:-1px}
.qi .act{display:none;gap:4px}.qi:hover .act{display:flex}
.qi .act button{border:1px solid var(--line);background:#20262e;border-radius:6px;width:26px;height:26px;padding:0}
.qi.drag{opacity:.4}

/* libraries */
#l-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
#l-tabs button{flex:1;min-width:90px;padding:8px 6px;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted)}
#l-tabs button.on{background:#232a33;color:var(--text)}
.lbody{flex:1;display:grid;grid-template-columns:76px 1fr;min-height:0}
.lbtn{display:flex;flex-direction:column;gap:4px;padding:4px;background:#14181d}
.lbtn button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 2px;border:0;border-radius:6px;background:#262d36;font-size:22px}
.lbtn button small{font-size:10px;color:#cbd3dc}.lbtn button.g{background:#1f7a46}
.ltab{min-height:0}
.ltab table{width:100%;border-collapse:collapse;font-size:13px}
.ltab th{position:sticky;top:0;background:var(--pane2);text-align:left;font-weight:500;color:var(--muted);padding:5px 8px}
.ltab td{padding:5px 8px;border-bottom:1px solid #222831;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;text-transform:uppercase}
.ltab tr{cursor:pointer}.ltab tr:hover td{background:#1d232a}.ltab tr.sel td{background:#3a3418}
.ltab td.du{color:#fff;font-weight:700;background:#3a1518;text-align:center}
.ltab tr.off td{opacity:.45}.ltab tr.scan td{font-style:italic;color:var(--muted)}
.lsearch{display:flex;gap:6px;padding:6px;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.lsearch input,.lsearch select,.cpw input,.cpw select,.cpw textarea{background:#0b0e12;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:6px 8px;font:inherit}
.lsearch input{flex:1;min-width:140px}
.pv{display:flex;gap:6px;align-items:center;color:var(--yellow);font-variant-numeric:tabular-nums;flex:1 1 100%}.pv button{border:1px solid var(--line);background:#262d36;border-radius:6px;padding:4px 10px;color:var(--text)}.pv button.on{background:var(--yellow);color:#111}#pv-seek{flex:1;min-width:120px;accent-color:var(--yellow)}
#pv-n{color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* carts */
.big{font:700 44px/1 system-ui;color:var(--green);text-align:right;padding:6px 10px;font-variant-numeric:tabular-nums}
#c-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;align-content:start;overflow:auto}
#c-grid button{min-height:54px;border-radius:8px;border:1px solid var(--line);background:#1c3b35;padding:6px;text-align:left;font-size:12px;text-transform:uppercase;overflow:hidden}
#c-grid button:hover{background:#25564c}#c-grid button.playing{background:var(--green);color:#03140a}
#c-pages{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;border-top:1px solid var(--line)}
#c-pages button{padding:8px 0;border:1px solid var(--line);border-radius:6px;background:#262d36;font-size:18px}#c-pages button.on{background:var(--acc);color:#04121c}

/* right */
.hist{flex:1.4;font-size:12px}
.hist div{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:4px 10px;border-bottom:1px solid #20262e;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist div span:first-child{color:var(--muted);font-variant-numeric:tabular-nums}.hist div.jingle{background:#3a2163}.hist div.ad{background:#4a1a1e}
.brk{flex:1;overflow:auto;padding:8px 12px;font-size:12px}.brk b{display:block;background:#0b0e12;padding:4px 8px;border-radius:4px;margin-bottom:6px}
.probs{flex:.6;overflow:auto;padding:6px 10px;font-size:12px;color:#f3b3b5}.probs .ok{color:var(--green)}

/* control panel */
#cp{position:fixed;inset:0;background:rgba(5,7,10,.75);display:grid;place-items:center;z-index:20}
.cpw{width:min(1400px,96vw);height:92vh;background:var(--pane);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.cpw>header{display:flex;align-items:center;gap:18px;padding:10px 16px;background:#0f1318;border-bottom:1px solid var(--line)}
.cpw>header b{font-size:20px}
#cp-tabs{display:flex;gap:4px;flex:1;flex-wrap:wrap}
#cp-tabs button{background:none;border:0;padding:8px 12px;font-size:16px;color:var(--muted);border-radius:6px}#cp-tabs button.on{color:var(--text);background:#232a33}
#cp-x{background:#2a1517;border:1px solid #5a2a2d;border-radius:8px;width:40px;height:36px;font-size:18px}
#cp-body{flex:1;overflow:auto;padding:16px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.btn{background:var(--acc);color:#04121c;border:0;border-radius:8px;padding:8px 14px;font-weight:700}
.btn.sec{background:#2a323c;color:var(--text)}.btn.red{background:var(--red);color:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--muted);font-weight:500;padding:6px;border-bottom:1px solid var(--line);position:sticky;top:-16px;background:var(--pane)}
.tbl td{padding:5px 6px;border-bottom:1px solid #222831}
.tbl tr:hover td{background:#1d232a}
.card{background:var(--pane2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
.card h4{margin:0 0 10px;font-size:15px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
label.f{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.hint{color:var(--muted);font-size:12px}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;background:#2a323c}
/* clocks grid */
.wk{display:grid;grid-template-columns:90px repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);user-select:none}
.wk div{background:#14181d;padding:4px;font-size:11px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk .hd{background:var(--pane2);font-weight:600}.wk .cell{cursor:pointer}.wk .cell.sel{outline:2px solid #fff;outline-offset:-2px}
.clk{display:flex;flex-direction:column;gap:4px}
.clk button{text-align:left;padding:8px 10px;border-radius:6px;border:2px solid transparent;color:#fff;font-weight:600}
.clk button.on{border-color:#fff}
.slots{display:flex;flex-wrap:wrap;gap:6px}.slots span{padding:4px 8px;border-radius:6px;background:#2a323c;display:flex;gap:6px;align-items:center}
.slots span button{border:0;background:none;color:var(--muted);padding:0}
/* track editor waveform */
.ed{position:relative;height:120px;background:#0b0e12;border-radius:8px;border:1px solid var(--line);cursor:crosshair}
.ed canvas{width:100%;height:100%;display:block}
.mk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.mk label{display:grid;gap:3px;font-size:12px}.mk input{width:100%}
#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#111;border:1px solid var(--line);padding:10px 16px;border-radius:8px;opacity:0;transition:.2s;pointer-events:none;z-index:50}#toast.on{opacity:1}
@media (max-width:1100px){html,body{overflow:auto}#app{height:auto}#top{grid-template-columns:60px 1fr;height:auto}#top .tr,#clock,#logo{display:none}#decks.two{grid-template-columns:1fr}#studio{grid-template-columns:1fr;}.pane{min-height:300px}}

/* virtual console */
#mixer{position:fixed;right:12px;top:160px;z-index:15;background:var(--pane);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);width:560px;max-width:96vw}
#mixer header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#0f1318;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
#mixer header button{background:#2a1517;border:1px solid #5a2a2d;border-radius:6px;width:30px;height:28px}
.mx{display:flex;gap:10px;padding:14px;justify-content:space-between}
.strip,.meter{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;text-align:center}
.strip b,.meter b{font-size:12px}.strip small,.meter small{font-size:10px;color:var(--muted);min-height:12px}
.strip input[type=range]{writing-mode:vertical-lr;direction:rtl;height:220px;width:34px;accent-color:var(--acc)}
.strip.st input[type=range]{accent-color:var(--yellow)}
.db{font:700 14px system-ui;font-variant-numeric:tabular-nums;color:var(--yellow)}
.meter .bar{position:relative;width:22px;height:240px;background:linear-gradient(to top,#123 0,#123 100%);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.meter .bar::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,#1f9e55 0%,#3ddc84 60%,#e6b422 80%,#e5484d 95%);opacity:.18}
.meter .bar i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(to top,#1f9e55 0,#3ddc84 156px,#e6b422 192px,#e5484d 228px);background-size:100% 240px;background-position:bottom;transition:height .15s linear}
.nrm{display:flex;gap:8px;align-items:flex-start;padding:0 14px 14px;font-size:12px;color:var(--muted)}

#b-mon.on,#b-cue.on{background:#1f7a46!important;border-color:#3ddc84!important}#b-mon.on small,#b-cue.on small{color:#fff}
#top button em{font-style:normal;font-size:9px;color:#9aa5b3;line-height:1}#top button.on em{color:#d6ffe6}