:root{--cl-bg:#0B0D10;--cl-s1:#14171C;--cl-s2:#1B1F26;--cl-s3:#252A33;--cl-line:#2A2F38;--cl-tx:#E6E8EB;--cl-dim:#8A919C;
--cl-pgm:#E5484D;--cl-pvw:#30A46C;--cl-rec:#F5A524;--cl-acc:#3E8BFF;--cl-ai:#A371F7;--cl-nf:#db0000;
--cl-f:'Inter','Heebo',system-ui,sans-serif;--cl-m:'JetBrains Mono',ui-monospace,monospace;--cl-r:10px}
[dir=rtl] .cl-root,[dir=rtl]{--cl-f:'Heebo','Inter',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
.cl-root{background:var(--cl-bg);color:var(--cl-tx);font:13px/1.4 var(--cl-f);overflow:hidden}
.cl-mono{font-family:var(--cl-m);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.cl-dim{color:var(--cl-dim)}.cl-amber{color:var(--cl-rec)}
h2{margin:0 0 12px;font-size:18px;font-weight:600}h4{margin:0 0 10px;font-size:13px;color:var(--cl-dim);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.cl-h3{font-size:13px;color:var(--cl-dim);margin:14px 0 8px;font-weight:500}
.cl-top{height:52px;display:flex;align-items:center;gap:18px;padding:0 16px;background:var(--cl-s1);border-bottom:1px solid var(--cl-line)}
.cl-brand{font-weight:700;font-size:15px;display:flex;gap:6px;align-items:center}.cl-brand small{color:var(--cl-dim);font-weight:400}
.cl-logo{color:var(--cl-pgm)}
.cl-onair{display:flex;gap:8px;align-items:center}.cl-onair-pill{background:var(--cl-pgm);color:#fff;font-weight:700;font-size:11px;padding:3px 8px;border-radius:4px;letter-spacing:.08em;animation:cl-pulse 2s infinite;direction:ltr}
.cl-onair .cl-mono{font-size:18px;font-weight:600}
@keyframes cl-pulse{50%{box-shadow:0 0 0 6px #e5484d22}}
.cl-dests{display:flex;gap:6px;margin-inline-start:auto}
.cl-dest{display:flex;gap:6px;align-items:center;background:var(--cl-s2);border:1px solid var(--cl-line);padding:4px 9px;border-radius:20px;font-size:12px;cursor:pointer}
.cl-dest i{width:7px;height:7px;border-radius:50%;background:var(--cl-pvw);box-shadow:0 0 6px var(--cl-pvw);animation:cl-blink 1.6s infinite}
.cl-dest.warn i{background:var(--cl-rec);box-shadow:0 0 6px var(--cl-rec)}.cl-dest.off i{background:#555;box-shadow:none;animation:none}
@keyframes cl-blink{50%{opacity:.4}}
.cl-topr{display:flex;gap:8px;align-items:center}
.cl-rec{display:flex;gap:5px;align-items:center;color:var(--cl-rec);font-weight:600;font-size:12px}.cl-rec i{width:8px;height:8px;border-radius:50%;background:var(--cl-rec);animation:cl-blink 1s infinite}
.cl-btn{background:var(--cl-s3);color:var(--cl-tx);border:1px solid var(--cl-line);border-radius:7px;padding:6px 12px;font:600 12px var(--cl-f);cursor:pointer;transition:.15s}
.cl-btn:hover{border-color:#3a414c;background:#2c323c}.cl-ghost{background:transparent}
.cl-acc{background:var(--cl-acc);border-color:var(--cl-acc)}.cl-red{background:var(--cl-pgm);border-color:var(--cl-pgm)}.cl-pvb{background:#1d3b2c;border-color:var(--cl-pvw);color:#7ee2a8}.cl-amberb{background:var(--cl-rec);border-color:var(--cl-rec);color:#111}
.cl-body{display:flex;height:calc(100vh - 52px)}
.cl-nav{width:150px;background:var(--cl-s1);border-inline-end:1px solid var(--cl-line);padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.cl-nav button{all:unset;cursor:pointer;padding:9px 10px;border-radius:7px;color:var(--cl-dim);font-size:13px}
.cl-nav button:hover{background:var(--cl-s2);color:var(--cl-tx)}.cl-nav button.on{background:var(--cl-s3);color:#fff;box-shadow:inset 3px 0 0 var(--cl-acc)}
[dir=rtl] .cl-nav button.on{box-shadow:inset -3px 0 0 var(--cl-acc)}
.cl-main{flex:1;overflow:auto;padding:14px 16px}
.cl-view{display:none}.cl-view.on{display:block;animation:cl-in .25s}
@keyframes cl-in{from{opacity:0;transform:translateY(4px)}}
.cl-ai{width:280px;background:var(--cl-s1);border-inline-start:1px solid var(--cl-line);padding:12px;overflow:auto}
.cl-ai.hide{display:none}
.cl-ai-h{display:flex;gap:6px;align-items:baseline;color:var(--cl-ai);margin-bottom:10px}.cl-ai-h span{margin-inline-start:auto;font-size:11px}
.cl-sug{background:linear-gradient(180deg,#a371f714,transparent);border:1px solid #a371f744;border-radius:var(--cl-r);padding:10px;margin-bottom:8px;animation:cl-in .3s}
.cl-sug b{display:block;margin-bottom:3px}.cl-sug p{margin:0 0 8px;color:var(--cl-dim);font-size:12px}
.cl-sug .cl-conf{height:3px;background:var(--cl-s3);border-radius:2px;margin-bottom:8px}.cl-sug .cl-conf i{display:block;height:100%;background:var(--cl-ai);border-radius:2px}
.cl-sug .cl-row{gap:6px}.cl-sug.done{opacity:.4}
/* control */
.cl-pp{display:grid;grid-template-columns:1fr 120px 1fr;gap:12px;direction:ltr}
.cl-mon{background:#000;border-radius:var(--cl-r);overflow:hidden;border:2px solid var(--cl-line)}
.cl-pv{border-color:var(--cl-pvw)}.cl-pg{border-color:var(--cl-pgm);box-shadow:0 0 24px #e5484d22}
.cl-mon-h{display:flex;justify-content:space-between;padding:5px 9px;font-size:11px;font-weight:700;letter-spacing:.08em;background:var(--cl-s1)}
.cl-pv .cl-mon-h span{color:var(--cl-pvw)}.cl-pg .cl-mon-h span{color:var(--cl-pgm)}.cl-mon-h b{font-weight:500;letter-spacing:0}
.cl-mon canvas{display:block;width:100%;aspect-ratio:16/9}
.cl-pgwrap{position:relative}
.cl-l3{position:absolute;left:5%;bottom:13%;width:50%;background:linear-gradient(90deg,#0b0d10ee,#0b0d10aa);border-left:5px solid var(--l3a,#e11d48);padding:8px 12px;transform:translateX(-120%);opacity:0;transition:.35s cubic-bezier(.2,.8,.2,1);direction:ltr}
.cl-l3.in{transform:none;opacity:1}.cl-l3-n{font-weight:700;font-size:17px}.cl-l3-t{font-size:12px;color:#c9ced6}
.cl-trans{display:flex;flex-direction:column;gap:8px;align-items:stretch;justify-content:center}
.cl-big{border:0;border-radius:10px;padding:14px 0;font:800 16px var(--cl-f);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.1s}
.cl-big:active{transform:scale(.96)}.cl-cut{background:var(--cl-pgm)}.cl-auto{background:var(--cl-s3);border:1px solid var(--cl-line)}
kbd{font:500 10px var(--cl-m);opacity:.7;background:#0003;border-radius:3px;padding:1px 5px}
.cl-tsel{display:flex;gap:2px}.cl-tsel button{flex:1;font:600 9px var(--cl-f);padding:5px 0;background:var(--cl-s2);border:1px solid var(--cl-line);color:var(--cl-dim);border-radius:4px;cursor:pointer}.cl-tsel button.on{color:#fff;border-color:var(--cl-acc)}
.cl-tbar{height:6px;background:var(--cl-s3);border-radius:3px;overflow:hidden}.cl-tbar i{display:block;height:100%;width:0;background:var(--cl-acc)}
.cl-mvh{display:flex;justify-content:space-between;margin:12px 0 6px;font-size:12px}
.cl-mv{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;direction:ltr}
.cl-tile{position:relative;border-radius:6px;overflow:hidden;border:2px solid #222;cursor:pointer;background:#000}
.cl-tile canvas{display:block;width:100%;aspect-ratio:16/9}
.cl-tile.pv{border-color:var(--cl-pvw)}.cl-tile.pg{border-color:var(--cl-pgm)}
.cl-tile .lab{position:absolute;left:0;right:0;bottom:0;background:#000a;padding:2px 6px;font-size:11px;display:flex;justify-content:space-between}
.cl-tile .n{position:absolute;top:3px;left:5px;font:600 10px var(--cl-m);color:#fffa}
.cl-tile .vu{position:absolute;right:3px;top:3px;bottom:20px;width:4px;background:#0006;display:flex;flex-direction:column-reverse}.cl-tile .vu i{background:linear-gradient(0deg,#30A46C,#F5A524 80%,#E5484D);height:30%}
.cl-phones{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cl-pc{background:var(--cl-s1);border:1px solid var(--cl-line);border-radius:var(--cl-r);padding:10px;border-top:3px solid #333}
.cl-pc.pg{border-top-color:var(--cl-pgm)}.cl-pc.pv{border-top-color:var(--cl-pvw)}
.cl-pc-h{display:flex;justify-content:space-between;align-items:center}.cl-pc-h b{font-size:14px}
.cl-tally{font:700 10px var(--cl-f);padding:2px 6px;border-radius:3px;background:#333;letter-spacing:.06em}.pg .cl-tally{background:var(--cl-pgm)}.pv .cl-tally{background:var(--cl-pvw)}
.cl-pc-g{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:8px 0;font-size:11px;color:var(--cl-dim)}.cl-pc-g b{color:var(--cl-tx);font-family:var(--cl-m);font-weight:500}
.cl-meter{height:6px;background:var(--cl-s3);border-radius:3px;overflow:hidden;margin:6px 0;direction:ltr}.cl-meter i{display:block;height:100%;background:linear-gradient(90deg,#30A46C 60%,#F5A524 85%,#E5484D);transition:width .08s}
.cl-spark{width:100%;height:28px;display:block}
.cl-bond{display:flex;gap:10px;font-size:10px;color:var(--cl-dim);direction:ltr}.cl-bond span{display:flex;align-items:end;gap:1px}.cl-bond i{width:3px;background:var(--cl-acc);border-radius:1px}.cl-bond i.o{background:#333}
.cl-pc .cl-row{gap:4px;margin-top:8px}.cl-pc .cl-btn{flex:1;padding:5px 0;font-size:11px}
.cl-btn.act{background:var(--cl-rec);color:#111;border-color:var(--cl-rec)}
.cl-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cl-card{background:var(--cl-s1);border:1px solid var(--cl-line);border-radius:var(--cl-r);padding:14px}
/* rundown */
.cl-row:has(h2){justify-content:space-between;margin-bottom:10px}.cl-row h2{margin:0}
.cl-rdstat{display:flex;gap:18px;align-items:center}.cl-rdstat small{display:block;color:var(--cl-dim);font-size:10px}.cl-rdstat b{font-size:16px}
.cl-seg{margin-bottom:10px;border:1px solid var(--cl-line);border-radius:var(--cl-r);overflow:hidden}
.cl-seg-h{background:var(--cl-s2);padding:7px 12px;display:flex;justify-content:space-between;font-weight:600}
.cl-part{display:grid;grid-template-columns:40px 1.3fr 2fr 90px 90px 90px;gap:10px;padding:8px 12px;border-top:1px solid var(--cl-line);align-items:center;background:var(--cl-s1);cursor:pointer;position:relative}
.cl-part:hover{background:#181c22}
.cl-part.cur{background:#2a1416;box-shadow:inset 4px 0 0 var(--cl-pgm)}.cl-part.nxt{background:#12261b;box-shadow:inset 4px 0 0 var(--cl-pvw)}
[dir=rtl] .cl-part.cur{box-shadow:inset -4px 0 0 var(--cl-pgm)}[dir=rtl] .cl-part.nxt{box-shadow:inset -4px 0 0 var(--cl-pvw)}
.cl-part .prog{position:absolute;bottom:0;inset-inline-start:0;height:2px;background:var(--cl-pgm)}
.cl-pieces{display:flex;gap:4px;flex-wrap:wrap}.cl-piece{font-size:10px;padding:2px 6px;border-radius:3px;background:var(--cl-s3)}
.cl-piece.graphic{background:#3e8bff33;color:#9cc3ff}.cl-piece.ifb_cue{background:#f5a52433;color:#f5c26b}.cl-piece.ad_break{background:#e5484d33;color:#ff9a9d}.cl-piece.device_command{background:#30a46c33;color:#7ee2a8}.cl-piece.camera{background:#a371f733;color:#cdb0ff}
.cl-part-hd{color:var(--cl-dim);font-size:10px;text-transform:uppercase;background:var(--cl-bg);cursor:default}
/* graphics */
.cl-gfx{display:grid;grid-template-columns:360px 1fr;gap:14px}
.cl-form label{display:block;margin-bottom:10px;font-size:12px;color:var(--cl-dim)}
.cl-form input{display:block;width:100%;margin-top:4px;background:var(--cl-bg);border:1px solid var(--cl-line);color:var(--cl-tx);padding:8px;border-radius:6px;font:13px var(--cl-f)}
.cl-form input[type=color]{height:36px;padding:2px}
.cl-q div{display:flex;justify-content:space-between;padding:6px 8px;border-radius:6px;background:var(--cl-s2);margin-bottom:4px;font-size:12px;cursor:pointer}
.cl-json{margin:0;padding:10px;background:#07080a;color:#8fb8ff;font:11px var(--cl-m);white-space:pre-wrap;direction:ltr;text-align:left;max-height:180px;overflow:auto}
/* audio */
.cl-mixer{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.cl-strip{width:96px;flex:none;background:var(--cl-s1);border:1px solid var(--cl-line);border-radius:var(--cl-r);padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center}
.cl-strip.master{background:#1a1418;border-color:#3a2a2e}
.cl-strip .nm{font-size:11px;font-weight:600;text-align:center;height:30px}
.cl-sm{display:flex;gap:6px;height:200px;direction:ltr}
.cl-vu2{width:8px;background:#000;border-radius:2px;position:relative;overflow:hidden}.cl-vu2 i{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,#30A46C 0 60%,#F5A524 80%,#E5484D);transition:height .08s}
.cl-fader{writing-mode:vertical-lr;direction:rtl;width:24px;height:200px;accent-color:var(--cl-acc)}
.cl-strip .db{font:11px var(--cl-m)}
.cl-mute{width:100%;padding:4px 0;font-size:11px}.cl-mute.on{background:var(--cl-pgm);border-color:var(--cl-pgm)}
.cl-afv.on{background:var(--cl-acc);border-color:var(--cl-acc)}
.cl-matrix table{border-collapse:collapse;background:var(--cl-s1);border-radius:var(--cl-r);overflow:hidden}
.cl-matrix td,.cl-matrix th{border:1px solid var(--cl-line);padding:6px 10px;font-size:12px;text-align:center}
.cl-matrix th{color:var(--cl-dim);font-weight:500}
.cl-x{width:22px;height:22px;border-radius:4px;background:var(--cl-s3);display:inline-block;cursor:pointer}.cl-x.on{background:var(--cl-pvw)}.cl-x.self{background:repeating-linear-gradient(45deg,#333 0 3px,#222 3px 6px);cursor:not-allowed}
/* comms */
.cl-comms{display:grid;grid-template-columns:1.2fr 1fr 300px;gap:14px}
.cl-link{display:flex;gap:8px;align-items:center;padding:8px;background:var(--cl-s2);border-radius:7px;margin-bottom:6px}.cl-link code{flex:1;font:11px var(--cl-m);color:var(--cl-dim);direction:ltr;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-guest{display:flex;gap:10px;align-items:center;padding:8px;background:var(--cl-s2);border-radius:7px;margin-bottom:6px}
.cl-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex:none}
.cl-guest .info{flex:1}.cl-guest small{color:var(--cl-dim);display:block}
.cl-ptt-card{text-align:center}.cl-ptt-targets{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:14px}
.cl-ptt-targets button{font-size:11px}.cl-ptt-targets button.on{background:var(--cl-acc);border-color:var(--cl-acc)}
.cl-ptt{width:170px;height:170px;border-radius:50%;border:4px solid var(--cl-line);background:radial-gradient(circle,#252a33,#14171c);color:#fff;font:700 15px var(--cl-f);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;user-select:none;margin:0 auto 10px}
.cl-ptt.on{border-color:var(--cl-rec);background:radial-gradient(circle,#f5a52466,#3a2a0a);box-shadow:0 0 0 10px #f5a52422}
/* ads */
.cl-adcd{display:flex;gap:12px;align-items:center}.cl-adcd b{font-size:26px;color:var(--cl-rec)}.cl-adcd small{color:var(--cl-dim)}
.cl-tl{position:relative;background:var(--cl-s1);border:1px solid var(--cl-line);border-radius:var(--cl-r);padding:30px 12px 12px;margin-bottom:14px;direction:ltr;overflow:hidden}
.cl-lane{position:relative;height:38px;margin-bottom:6px;background:var(--cl-bg);border-radius:5px}
.cl-lane-l{position:absolute;left:6px;top:-1px;font-size:10px;color:var(--cl-dim);z-index:2}
.cl-blk{position:absolute;top:10px;bottom:4px;border-radius:4px;font-size:10px;padding:3px 6px;overflow:hidden;white-space:nowrap}
.cl-blk.prog{background:#3e8bff44;border:1px solid #3e8bff88}.cl-blk.ad{background:#f5a52455;border:1px solid var(--cl-rec);color:#ffd27a}.cl-blk.gfx{background:#a371f744;border:1px solid #a371f788}
.cl-scte{position:absolute;top:18px;bottom:0;width:0;border-left:2px dashed var(--cl-rec)}.cl-scte span{position:absolute;top:-16px;left:-30px;width:60px;text-align:center;font:600 9px var(--cl-m);color:var(--cl-rec)}
.cl-scte.in{border-color:var(--cl-pvw)}.cl-scte.in span{color:var(--cl-pvw)}
.cl-ph{position:absolute;top:0;bottom:0;width:2px;background:var(--cl-pgm);z-index:3;box-shadow:0 0 8px var(--cl-pgm)}.cl-ph::before{content:'';position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--cl-pgm)}
.cl-ruler{position:absolute;top:6px;left:12px;right:12px;height:14px;font:9px var(--cl-m);color:var(--cl-dim)}
.cl-log{font-size:11px;max-height:220px;overflow:auto;direction:ltr;text-align:left}.cl-log div{padding:3px 0;border-bottom:1px solid #1d2128}
/* health */
.cl-health{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cl-hc canvas{width:100%;height:90px;display:block;background:var(--cl-bg);border-radius:6px}
.cl-hc .cl-row{justify-content:space-between}.cl-hk{display:flex;gap:14px;font-size:11px;color:var(--cl-dim);margin:6px 0}.cl-hk b{color:var(--cl-tx);font-family:var(--cl-m)}
.cl-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.cl-path{background:var(--cl-s2);border-radius:6px;padding:6px;font-size:11px}.cl-path .cl-meter{margin:4px 0 0}
.cl-ok{color:var(--cl-pvw)}.cl-bad{color:var(--cl-pgm)}
/* phone */
.cl-phonewrap{display:flex;gap:30px;align-items:flex-start}
.cl-device{width:320px;height:660px;border-radius:44px;background:#000;padding:12px;border:2px solid #333;position:relative;box-shadow:0 30px 60px #0008;flex:none}
.cl-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:#000;border-radius:14px;z-index:5}
.cl-scr{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;border:6px solid #333;direction:ltr}
.cl-scr.program{border-color:var(--cl-pgm)}.cl-scr.preview{border-color:var(--cl-pvw)}
.cl-scr>canvas{width:100%;height:100%;display:block}
.cl-ptally{position:absolute;top:44px;left:50%;transform:translateX(-50%);padding:4px 14px;border-radius:20px;font:800 13px var(--cl-f);background:#333;letter-spacing:.1em}
.program .cl-ptally{background:var(--cl-pgm)}.preview .cl-ptally{background:var(--cl-pvw)}
.cl-pcd{position:absolute;top:40%;left:0;right:0;text-align:center;font:800 72px var(--cl-m);text-shadow:0 4px 20px #000}
.cl-pip{position:absolute;top:84px;right:12px;width:110px;border:2px solid var(--cl-pgm);border-radius:8px;overflow:hidden}.cl-pip canvas{display:block;width:100%}.cl-pip small{position:absolute;top:2px;left:4px;font:700 8px var(--cl-f)}
.cl-pnet{position:absolute;top:84px;left:12px;display:flex;flex-direction:column;gap:2px;font-size:10px;background:#0008;padding:5px 7px;border-radius:6px}
.cl-pmsg{position:absolute;bottom:120px;left:16px;right:16px;background:#f5a524ee;color:#111;font-weight:700;padding:8px;border-radius:10px;text-align:center}
.cl-ptalk{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:200px;height:64px;border-radius:32px;border:0;background:#fff;color:#111;font:800 18px var(--cl-f);cursor:pointer}
.cl-ptalk.on{background:var(--cl-rec)}
.cl-pnotes{max-width:380px}
.cl-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--cl-s3);border:1px solid var(--cl-line);padding:10px 18px;border-radius:8px;transition:.25s;z-index:99}.cl-toast.on{transform:translateX(-50%)}