/* Clastop live control room · nf3-native skin.
   Base tokens/typography/buttons/cards come from the copied nf3 CSS (css/nf3/*: admin.tpl.html :root, admin_v3.css, admin_dark.css,
   admin_navtabs.css). This file only adds cl- components. Broadcast semantics are mapped onto nf3 tokens:
   PROGRAM = nf3 red (--red #db0000 light / nav accent #FF3B30 dark), PREVIEW = nf3 --ok, REC/IFB = nf3 --warn. */
html[data-ui=v3]{--cl-pgm:#db0000;--cl-pvw:#0a7d43;--cl-rec:#b76e00;--cl-acc:#1f6feb;--cl-ai:#7c3aed;--cl-pvw-hi:#30a46c;--cl-ai-w:288px}
html[data-ui=v3][data-mode=dark]{--cl-pgm:#ff3b30;--cl-pvw:#22c55e;--cl-rec:#ffab00;--cl-acc:#5b9dff;--cl-ai:#b794f6;--cl-pvw-hi:#22c55e}
.cl-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.cl-dim{color:var(--mute)}.cl-amber{color:var(--cl-rec)}
/* shell: nf3 .main hosts page + AI column */
.cl-shell{display:grid;grid-template-columns:minmax(0,1fr) var(--cl-ai-w);gap:24px;padding:4px 24px 32px 24px;min-height:100%;align-items:start}
.cl-shell:has(.cl-ai.hide){grid-template-columns:minmax(0,1fr)}
.cl-page h2{margin:0 0 16px;font:700 1.375rem/1.4 var(--f);color:var(--ink)}
.cl-page h4{margin:0 0 12px;font:600 .8125rem/1.5 var(--f);color:var(--mute)}
.v3 .top{gap:10px;padding-inline:24px}
.v3 .top .sbtn{min-width:150px}
.cl-onair{display:flex;gap:8px;align-items:center;margin-inline-start:8px}
.cl-onair-pill{background:var(--cl-pgm);color:#fff;font:800 11px/1 var(--f);padding:6px 9px;border-radius:6px;letter-spacing:.08em;direction:ltr;animation:cl-pulse 2s infinite}
.cl-clock{font:700 20px var(--mono)}
@keyframes cl-pulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--cl-pgm) 18%,transparent)}}
.cl-show{font-size:14px;white-space:nowrap}
.cl-dests{display:flex;gap:6px}
.cl-dest{display:inline-flex;gap:6px;align-items:center;height:30px;padding:0 10px;border-radius:999px;background:var(--paper);box-shadow:var(--sh-card);font:600 12px var(--f);cursor:pointer;white-space:nowrap}
.cl-dest i{width:7px;height:7px;border-radius:50%;background:var(--cl-pvw);animation:cl-blink 1.6s infinite}
.cl-dest.warn i{background:var(--cl-rec)}.cl-dest.off i{background:var(--mute);animation:none}.cl-dest.off{opacity:.55}
.cl-dest .cl-mono{display:none}
@media (min-width:1600px){.cl-dest .cl-mono{display:inline}}
@keyframes cl-blink{50%{opacity:.35}}
.cl-rec{display:inline-flex;gap:5px;align-items:center;color:var(--cl-rec);font:700 12px var(--f)}.cl-rec i{width:8px;height:8px;border-radius:50%;background:var(--cl-rec);animation:cl-blink 1s infinite}
.v3 .top .ib{width:40px;height:40px;display:inline-grid;place-items:center;border:0;background:none;border-radius:50%}
.v3 .top .ib:hover{background:color-mix(in srgb,var(--coal) 7%,transparent)}
.v3 .top .ib svg,.v3 .top .sbtn svg{width:20px;height:20px}
.v3 .top .ib.lng{font:700 13px var(--f)}
#clAiToggle{color:var(--cl-ai)}
/* buttons = nf3 .v3 .btn geometry */
.cl-btn{height:32px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border-radius:var(--r1);border:1px solid var(--hair2);background:var(--paper);color:var(--ink);font:700 .8125rem/1 var(--f);cursor:pointer;transition:background .15s,border-color .15s}
.cl-btn:hover{border-color:var(--ink);background:rgba(145,158,171,.08)}
.cl-btn.cl-acc,.cl-btn.cl-pri{background:var(--coal);border-color:var(--coal);color:var(--snow)}
.cl-btn.cl-red{background:var(--cl-pgm);border-color:var(--cl-pgm);color:#fff}
.cl-btn.cl-pvb{background:color-mix(in srgb,var(--cl-pvw) 12%,var(--paper));border-color:var(--cl-pvw);color:var(--cl-pvw)}
.cl-btn.cl-amberb{background:var(--cl-rec);border-color:var(--cl-rec);color:#fff}
.cl-btn.act{background:color-mix(in srgb,var(--cl-rec) 16%,var(--paper));border-color:var(--cl-rec);color:var(--cl-rec)}
.cl-btn.on{background:var(--coal);border-color:var(--coal);color:var(--snow)}
/* cards = nf3 .v3 .card */
.cl-card,.cl-pc,.cl-strip,.cl-seg,.cl-tl{background:var(--paper);border:0!important;border-radius:var(--r2);box-shadow:var(--sh-card)}
.cl-card{padding:20px}
/* AI column */
.cl-ai{position:sticky;top:0;background:var(--paper);border-radius:var(--r2);box-shadow:var(--sh-card);padding:16px;max-height:calc(100vh - var(--hh) - 24px);overflow:auto}
.cl-ai.hide{display:none}
.cl-ai-h{display:flex;gap:8px;align-items:center;color:var(--cl-ai);margin-bottom:12px;font-size:15px}.cl-ai-h svg{width:20px;height:20px}.cl-ai-h b{color:var(--ink)}.cl-ai-h span.cl-dim{margin-inline-start:auto;font-size:12px}
.cl-sug{background:color-mix(in srgb,var(--cl-ai) 6%,var(--paper));border:1px solid color-mix(in srgb,var(--cl-ai) 24%,transparent);border-radius:var(--r1);padding:12px;margin-bottom:10px}
.cl-sug b{display:block;margin-bottom:2px;font-weight:600}.cl-sug p{margin:0 0 8px;color:var(--mute);font-size:12.5px}
.cl-sug .cl-conf{height:4px;background:var(--soft);border-radius:2px;margin-bottom:10px}.cl-sug .cl-conf i{display:block;height:100%;background:var(--cl-ai);border-radius:2px}
.cl-stub{max-width:560px}.cl-stub p{margin:0 0 16px}
.cl-toast{background:var(--coal)!important;color:var(--snow);border:0!important;border-radius:var(--r1)!important;font-weight:600;box-shadow:var(--sh-card)}
.cl-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.cl-dim{color:var(--mute)}.cl-amber{color:var(--cl-rec)}
.cl-h3{font-size:13px;color:var(--mute);margin:14px 0 8px;font-weight:500}
.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(--soft);border:1px solid var(--hair);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-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(--neutral);color:var(--ink);border:1px solid var(--hair);border-radius:7px;padding:6px 12px;font:600 12px var(--f);cursor:pointer;transition:.15s}
.cl-btn:hover{border-color:var(--ink);background:var(--neutral)}.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:color-mix(in srgb,var(--cl-pvw) 14%,var(--paper));border-color:var(--cl-pvw);color:var(--cl-pvw)}.cl-amberb{background:var(--cl-rec);border-color:var(--cl-rec);color:#111}
.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(--paper);border-inline-start:1px solid var(--hair);padding:12px;overflow:auto}
.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(--r2);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(--mute);font-size:12px}
.cl-sug .cl-conf{height:3px;background:var(--neutral);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(--r2);overflow:hidden;border:2px solid var(--hair)}
.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(--paper)}
.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(--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(--neutral);border:1px solid var(--hair)}
kbd{font:500 10px var(--mono);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(--f);padding:5px 0;background:var(--soft);border:1px solid var(--hair);color:var(--mute);border-radius:4px;cursor:pointer}.cl-tsel button.on{color:#fff;border-color:var(--cl-acc)}
.cl-tbar{height:6px;background:var(--neutral);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(--mono);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(--paper);border:1px solid var(--hair);border-radius:var(--r2);padding:10px;border-top:3px solid var(--hair2)}
.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(--f);padding:2px 6px;border-radius:3px;background:var(--hair2);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(--mute)}.cl-pc-g b{color:var(--ink);font-family:var(--mono);font-weight:500}
.cl-meter{height:6px;background:var(--neutral);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(--mute);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:var(--hair2)}
.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(--paper);border:1px solid var(--hair);border-radius:var(--r2);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(--mute);font-size:10px}.cl-rdstat b{font-size:16px}
.cl-seg{margin-bottom:10px;border:1px solid var(--hair);border-radius:var(--r2);overflow:hidden}
.cl-seg-h{background:var(--soft);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(--hair);align-items:center;background:var(--paper);cursor:pointer;position:relative}
.cl-part:hover{background:var(--neutral)}
.cl-part.cur{background:color-mix(in srgb,var(--cl-pgm) 9%,var(--paper));box-shadow:inset 4px 0 0 var(--cl-pgm)}.cl-part.nxt{background:color-mix(in srgb,var(--cl-pvw) 9%,var(--paper));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(--neutral)}
.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:var(--cl-pvw)}.cl-piece.camera{background:#a371f733;color:#cdb0ff}
.cl-part-hd{color:var(--mute);font-size:10px;text-transform:uppercase;background:var(--snow);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(--mute)}
.cl-form input{display:block;width:100%;margin-top:4px;background:var(--snow);border:1px solid var(--hair);color:var(--ink);padding:8px;border-radius:6px;font:13px var(--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(--soft);margin-bottom:4px;font-size:12px;cursor:pointer}
.cl-json{margin:0;padding:10px;background:#07080a;color:#8fb8ff;font:11px var(--mono);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(--paper);border:1px solid var(--hair);border-radius:var(--r2);padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center}
.cl-strip.master{background:color-mix(in srgb,var(--cl-pgm) 4%,var(--paper));border-color:var(--hair2)}
.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(--mono)}
.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(--paper);border-radius:var(--r2);overflow:hidden}
.cl-matrix td,.cl-matrix th{border:1px solid var(--hair);padding:6px 10px;font-size:12px;text-align:center}
.cl-matrix th{color:var(--mute);font-weight:500}
.cl-x{width:22px;height:22px;border-radius:4px;background:var(--neutral);display:inline-block;cursor:pointer}.cl-x.on{background:var(--cl-pvw)}.cl-x.self{background:repeating-linear-gradient(45deg,var(--hair2) 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(--soft);border-radius:7px;margin-bottom:6px}.cl-link code{flex:1;font:11px var(--mono);color:var(--mute);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(--soft);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(--mute);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(--hair);background:radial-gradient(circle,#252a33,#14171c);color:#fff;font:700 15px var(--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(--mute)}
.cl-tl{position:relative;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r2);padding:30px 12px 12px;margin-bottom:14px;direction:ltr;overflow:hidden}
.cl-lane{position:relative;height:38px;margin-bottom:6px;background:var(--snow);border-radius:5px}
.cl-lane-l{position:absolute;left:6px;top:-1px;font-size:10px;color:var(--mute);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(--mono);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(--mono);color:var(--mute)}
.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 var(--hair)}
/* health */
.cl-health{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cl-hc canvas{width:100%;height:90px;display:block;background:var(--snow);border-radius:6px}
.cl-hc .cl-row{justify-content:space-between}.cl-hk{display:flex;gap:14px;font-size:11px;color:var(--mute);margin:6px 0}.cl-hk b{color:var(--ink);font-family:var(--mono)}
.cl-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.cl-path{background:var(--soft);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 var(--hair2);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 var(--hair2);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(--f);background:var(--hair2);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(--mono);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(--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(--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(--neutral);border:1px solid var(--hair);padding:10px 18px;border-radius:8px;transition:.25s;z-index:99}.cl-toast.on{transform:translateX(-50%)}

/* ---- nf3 harmonization overrides (after legacy cl- rules) ---- */
.cl-pp{grid-template-columns:1fr 104px 1fr}
.cl-mon{border-radius:var(--r2);border-width:3px;background:#000;box-shadow:var(--sh-card)}
.cl-mon-h{background:#0b0b0c;color:#fff;font-family:var(--f)}
.cl-pg{box-shadow:0 0 0 1px var(--cl-pgm),0 12px 24px -6px color-mix(in srgb,var(--cl-pgm) 35%,transparent)}
.cl-l3{border-left-color:var(--l3a,#db0000);font-family:var(--f)}
.cl-big{border-radius:var(--r2);font-family:var(--f)}
.cl-auto{background:var(--coal);color:var(--snow);border:0}
.cl-ftb{width:100%}
.cl-tsel button{background:var(--paper);border:1px solid var(--hair2);color:var(--mute);font-family:var(--f);border-radius:6px}.cl-tsel button.on{background:var(--coal);color:var(--snow);border-color:var(--coal)}
.cl-tbar{background:var(--soft)}
.cl-mvh b{font-weight:600}
.cl-mv{grid-template-columns:repeat(4,1fr);gap:8px}
.cl-tile{border-radius:10px;border-width:3px;border-color:transparent;box-shadow:var(--sh-card)}
.cl-tile .lab{font-family:var(--f);color:#fff}
.cl-phones{grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:1700px){.cl-phones{grid-template-columns:repeat(4,1fr)}}
.cl-pc{padding:16px;border-top:4px solid var(--hair2)!important}
.cl-pc.pg{border-top-color:var(--cl-pgm)!important}.cl-pc.pv{border-top-color:var(--cl-pvw)!important}
.cl-tally{color:#fff;background:var(--mute);border-radius:6px;padding:0 8px;height:22px;display:inline-flex;align-items:center;font:700 11px var(--f)}
.cl-meter{background:var(--soft)}
.cl-bond i.o{background:var(--hair2)}
.cl-h3{font:600 .9375rem var(--f);color:var(--ink);margin:24px 0 12px}
/* rundown table (nf3 .tbl look) */
.cl-seg{overflow:hidden;margin-bottom:16px}
.cl-seg-h{background:var(--neutral);color:var(--ink);padding:10px 16px;font-weight:700}
.cl-part{background:var(--paper);border-top:1px solid var(--hair);padding:12px 16px}
.cl-part-hd{background:transparent!important;font:700 12px var(--f);text-transform:none;color:var(--mute);border:0;padding:0 16px 8px}
.cl-piece{border-radius:6px;padding:2px 8px;font:600 11px var(--f)}
.cl-piece.graphic{background:#00b8d929;color:#006c9c}.cl-piece.ifb_cue{background:#ffab0029;color:#b76e00}.cl-piece.ad_break{background:#ff563029;color:#b71d18}.cl-piece.device_command{background:#22c55e29;color:#118d57}.cl-piece.camera{background:#8e33ff29;color:#5119b7}
html[data-mode=dark] .cl-piece.graphic{color:#61f3f3}html[data-mode=dark] .cl-piece.ifb_cue{color:#ffd666}html[data-mode=dark] .cl-piece.ad_break{color:#ffac82}html[data-mode=dark] .cl-piece.device_command{color:#77ed8b}html[data-mode=dark] .cl-piece.camera{color:#c684ff}
.cl-rdstat b{font-size:18px}
/* forms */
.cl-form input{background:var(--paper);border:1px solid var(--hair2);border-radius:var(--r1);color:var(--ink);font:500 14px var(--f);padding:10px 12px}
.cl-form input:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:transparent}
.cl-q div{background:var(--soft);border-radius:var(--r1)}
.cl-gfx{grid-template-columns:380px 1fr;gap:24px}
.cl-json{background:#0b0b0c;color:#9cc3ff;font-family:var(--mono)}
/* audio */
.cl-strip{padding:12px 8px}
.cl-vu2{background:#0b0b0c}
.cl-fader{accent-color:var(--coal)}
.cl-mute.on{background:var(--cl-pgm);border-color:var(--cl-pgm);color:#fff}
.cl-afv.on{background:var(--coal);border-color:var(--coal);color:var(--snow)}
.cl-matrix table{border-collapse:separate;border-spacing:0;background:var(--paper);border-radius:var(--r2);box-shadow:var(--sh-card);overflow:hidden}
.cl-matrix td,.cl-matrix th{border:0;border-bottom:1px solid var(--hair);padding:10px 12px}
.cl-matrix th{font:700 12px var(--f);color:var(--mute);background:var(--neutral)}
.cl-x{background:var(--soft);border:1px solid var(--hair2)}.cl-x.on{background:var(--cl-pvw);border-color:var(--cl-pvw)}
.cl-x.self{background:repeating-linear-gradient(45deg,var(--hair2) 0 3px,transparent 3px 6px)}
/* comms */
.cl-comms{grid-template-columns:1fr 1fr;gap:24px}
.cl-ptt-card{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:start;gap:20px}
.cl-ptt-card h4{grid-column:1/-1;margin:0}
.cl-link,.cl-guest{background:var(--soft);border-radius:var(--r1)}
.cl-link code{color:var(--ink2)}
.cl-ptt{border:4px solid var(--hair2);background:var(--paper);color:var(--ink);font-family:var(--f);box-shadow:var(--sh-card);margin:0}
.cl-ptt.on{border-color:var(--cl-rec);background:color-mix(in srgb,var(--cl-rec) 18%,var(--paper));box-shadow:0 0 0 10px color-mix(in srgb,var(--cl-rec) 15%,transparent)}
/* ads */
.cl-lane{background:var(--soft)}
.cl-blk.prog{background:color-mix(in srgb,var(--cl-acc) 18%,var(--paper));border:1px solid color-mix(in srgb,var(--cl-acc) 50%,transparent);color:var(--ink)}
.cl-blk.ad{background:color-mix(in srgb,var(--cl-rec) 20%,var(--paper));border-color:var(--cl-rec);color:var(--ink)}
.cl-blk.gfx{background:color-mix(in srgb,var(--cl-ai) 18%,var(--paper));border:1px solid color-mix(in srgb,var(--cl-ai) 50%,transparent);color:var(--ink)}
.cl-adcd b{font:800 30px var(--mono)}
.cl-log{color:var(--ink2)}
/* health */
.cl-health{gap:20px}
.cl-hc canvas{background:var(--snow);border-radius:var(--r1)}
.cl-path{background:var(--soft);border-radius:var(--r1)}
.cl-ok{color:var(--cl-pvw)}.cl-bad{color:var(--cl-pgm)}
/* phone frame keeps device look in both modes */
.cl-device{border-color:#2a2a2a}
.cl-scr{border-color:#2a2a2a}
.cl-ptally,.cl-pcd,.cl-pmsg,.cl-ptalk{font-family:var(--f)}
.cl-pcd{font-family:var(--mono)}
.cl-pmsg{background:#ffab00;color:#111}
.cl-pnet{color:#fff}
/* hide the main multiview header shortcut hint when narrow */
@media (max-width:1500px){.cl-mvh .cl-mono{display:none}}
.cl-onair-pill{white-space:nowrap}
.cl-l3-n{color:#fff}.cl-l3-t{color:#d6d5d1}
.v3 .top .sbtn{min-width:0}.v3 .top .sbtn span:not(.ni){display:none}
@media (min-width:1600px){.v3 .top .sbtn span:not(.ni){display:inline}}
.cl-onair-pill{flex:none;display:inline-block}.cl-onair,.cl-show{flex:none}
.cl-comms{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.cl-link code{min-width:0}
.cl-strip{width:74px}.cl-strip .db{direction:ltr}
.cl-mixer{gap:6px}
.cl-strip{width:auto;flex:1 1 0;min-width:58px}.cl-strip .nm{font-size:10.5px}
.cl-scr{color:#fff}.cl-ptally{white-space:nowrap;color:#fff}.cl-pcd{color:#fff}