:root{
  /* v0.11.47 — Restyle "Broadcast Premium": stessa struttura, palette editoriale
     rosso/nero (stile grande network sportivo) al posto dell'oro. Solo variabili
     colore + tipografia: nessuna classe rinominata, nessun markup toccato. */
  --bg:#0A0A0C; --surface:#111113; --panel:#141416; --elev:#1A1A1D;
  --border:#232326; --border-soft:#1c1c1f; --panel2:rgba(255,255,255,.03);
  --text:#F5F5F7; --muted:#9A9AA2; --faint:#55555C;
  --gold:#E4002B; --gold-fill:#E4002B; --gold-dim:rgba(228,0,43,.16); --gold-line:rgba(228,0,43,.45);
  --live:#FF3B3B; --live-dim:rgba(255,59,59,.14); --live-ink:#ff8a8a;
  --ok:#3FD08F; --ok-dim:rgba(63,208,143,.14);
  --warn-ink:#ffcf8a; --login-glow:#1a0508;
  --d:'Space Grotesk',system-ui,sans-serif; --b:'Inter',system-ui,sans-serif; --m:'IBM Plex Mono',ui-monospace,monospace;
}
/* v0.11.44 — TEMA CHIARO: non è il tema scuro invertito. Stessa identità (navy +
   oro), ripensata da zero per il bianco — testi, righe e toni "ink" ricalcolati
   per un contrasto vero (verificato con calcolo reale del rapporto di contrasto,
   non a occhio), non solo "più chiaro". Il riempimento pieno dei bottoni/pillole
   dorate (--gold-fill) resta lo stesso oro vivido in entrambi i temi — cambia
   solo il testo/icona (--gold) che nel tema chiaro è più profondo per restare
   leggibile sul bianco. */
[data-theme="light"]{
  --bg:#F3F1EC; --surface:#FFFFFF; --panel:#FFFFFF; --elev:#F7F5F1;
  --border:#E3DFD8; --border-soft:#ECE8E2; --panel2:rgba(10,14,20,.035);
  --text:#18171A; --muted:#5C5A57; --faint:#9C988F;
  --gold:#17161A; --gold-fill:#17161A; --gold-dim:rgba(23,22,26,.07); --gold-line:rgba(23,22,26,.30);
  --live:#D9342F; --live-dim:rgba(217,52,47,.10); --live-ink:#B23434;
  --ok:#0E7A50; --ok-dim:rgba(14,122,80,.10);
  --warn-ink:#8A5A0A; --login-glow:#EAE7E1;
}
/* v0.11.50 — handoff design "Sistema di temi a 4 combinazioni": accento oro per
   lo scuro, in aggiunta al rosso già esistente. Stessa struttura del blu (che
   ora vive solo nel tema chiaro, vedi sotto): cambia solo l'accento. */
[data-accent="gold"]{
  --gold:#D9A62B; --gold-fill:#D9A62B; --gold-dim:rgba(217,166,43,.16); --gold-line:rgba(217,166,43,.45);
  --login-glow:#1a1405;
}
/* v0.11.50 — nel nuovo sistema a 4 combinazioni il blu è un'opzione SOLO del
   tema chiaro (scuro ha rosso/oro) — il vecchio blocco scuro+blu non è più
   raggiungibile dal toggle e viene rimosso, come da handoff design. "--live"
   (indicatore ON AIR/errore) resta sempre rosso in ogni combinazione: è una
   convenzione da regia broadcast, non un colore di brand. */
/* v0.11.50 — nel nuovo sistema a 4 combinazioni il blu è un'opzione SOLO del
   tema chiaro (scuro ha rosso/oro) — il vecchio blocco scuro+blu non è più
   raggiungibile dal toggle e viene rimosso, come da handoff design. */
[data-theme="light"][data-accent="blue"]{
  --gold:#1959C7; --gold-fill:#3D7BEF; --gold-dim:rgba(61,123,239,.10); --gold-line:rgba(61,123,239,.35);
  --login-glow:#E7EEFA;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--b);font-size:14px;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}

/* LOGIN */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 90% at 50% -10%,var(--login-glow) 0%,var(--bg) 60%)}
.login-card{width:100%;max-width:360px}
.login-mark{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.login-mark .logo{width:30px;height:30px;border-radius:8px;background:var(--gold-fill);position:relative}
.login-mark .logo::after{content:"";position:absolute;inset:8px;border-radius:50%;border:2px solid var(--bg)}
.login-mark b{font-family:var(--d);font-weight:700;font-size:24px;letter-spacing:.06em}
.login-mark span{display:block;color:var(--faint);font-family:var(--m);font-size:10px;letter-spacing:.18em;margin-top:2px}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input{width:100%;padding:11px 13px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text)}
.field input:focus{border-color:var(--gold);outline:none}
.login-err{color:var(--live);font-size:13px;min-height:18px;margin:2px 0 10px;font-weight:500}

/* SHELL */
.app{display:none;grid-template-columns:228px 1fr;min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:20px 20px 16px}
.brand .logo{width:26px;height:26px;border-radius:7px;background:var(--gold-fill);position:relative;flex:none}
.brand .logo::after{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid var(--surface)}
.brand b{font-family:var(--d);font-weight:700;font-size:21px;letter-spacing:.1em}
.chan{margin:4px 14px 14px;padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:10px;cursor:pointer}
.chan:hover{border-color:var(--faint)}
.chan .row{display:flex;align-items:center;gap:9px}
.chan .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.chan .dot.on{background:var(--live);box-shadow:0 0 0 3px var(--live-dim)}
.chan .nm{font-weight:600;font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan .ch{color:var(--faint);font-family:var(--m);font-size:11px;margin-top:5px;padding-left:17px}
.chan i{color:var(--faint)}
.chan-menu{margin:-8px 14px 12px;border:1px solid var(--border);border-radius:10px;overflow:hidden;display:none}
.chan-menu.open{display:block}
.chan-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 12px;background:var(--panel);border:none;color:var(--muted);font-size:13px}
.chan-menu button:hover{background:var(--elev);color:var(--text)}
.chan-menu .dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.chan-menu .dot.on{background:var(--live)}

.nav{display:flex;flex-direction:column;gap:1px;padding:4px 12px;overflow:auto}
.nav .lbl{font-family:var(--m);font-size:10px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;padding:12px 10px 6px}
.nav button{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:var(--muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;background:none;border:none;text-align:left;width:100%}
.nav button i{font-size:18px;width:18px;text-align:center;color:var(--faint)}
.nav button:hover{background:var(--panel);color:var(--text)}
.nav button.on{background:var(--gold-dim);color:var(--gold)}
.nav button.on i{color:var(--gold)}
.rail-foot{margin-top:auto;padding:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.rail-foot .av{width:30px;height:30px;border-radius:50%;background:var(--elev);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;color:var(--gold)}
.rail-foot .who{font-size:12px;line-height:1.3;flex:1}
.rail-foot .who b{font-weight:600}.rail-foot .who span{color:var(--faint);display:block}
.rail-foot .lg{color:var(--faint);background:none;border:none;padding:6px}
.rail-foot .lg:hover{color:var(--live)}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;border-bottom:1px solid var(--border);background:var(--bg)}
.top .title{display:flex;align-items:center;gap:14px}
.top h1{font-family:var(--d);font-weight:700;font-size:20px;margin:0;text-transform:uppercase;letter-spacing:.03em}
.onair{display:inline-flex;align-items:center;gap:7px;background:var(--live-dim);color:var(--live);font-family:var(--m);font-size:11px;letter-spacing:.14em;padding:5px 10px;border-radius:6px}
.onair.off{background:var(--elev);color:var(--faint)}
.onair .b{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
.onair.off .b{background:var(--faint);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.top .right{display:flex;align-items:center;gap:10px}
#topRight{display:flex;align-items:center;gap:14px}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--muted);flex:none}
.theme-toggle:hover{color:var(--gold);border-color:var(--gold-line)}
.theme-toggle i{font-size:17px}
.accent-dot{width:15px;height:15px;border-radius:50%;background:var(--gold-fill);border:1px solid rgba(255,255,255,.25)}
.now-live{font-size:12.5px;color:var(--muted)}.now-live b{color:var(--text);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:9px;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;border:1px solid var(--border);background:var(--panel);color:var(--text);text-decoration:none;white-space:nowrap;flex-shrink:0}
.btn:hover{border-color:var(--faint)}
.btn.gold{background:var(--gold-fill);color:#fff;border-color:var(--gold);text-transform:uppercase;letter-spacing:.03em}.btn.gold:hover{background:#ff2647}
.btn i{font-size:16px}
.content{padding:18px 22px}

/* DASHBOARD */
.grid2{display:grid;grid-template-columns:1fr 326px;gap:16px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid var(--border-soft)}
.card-h h2{font-family:var(--d);font-size:14px;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:.03em}
.card-h .meta{font-family:var(--m);font-size:11px;color:var(--faint)}
.monitor{aspect-ratio:16/9;background:radial-gradient(120% 120% at 50% 30%,#10151f 0%,#070a0f 100%);position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border-soft)}
.monitor .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);background-size:44px 44px;opacity:.25}
.monitor .badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;background:var(--live);color:#fff;font-family:var(--m);font-size:11px;letter-spacing:.12em;padding:5px 9px;border-radius:6px}
.monitor .badge .b{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.monitor .tc{position:absolute;bottom:14px;right:16px;font-family:var(--m);font-size:13px;color:#cdd6e4;background:rgba(7,10,15,.6);padding:4px 8px;border-radius:6px}
.monitor .play{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff}
.monitor .play i{font-size:26px;margin-left:3px}
.monitor .lower{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px}
.monitor .lower .l{width:3px;height:30px;background:var(--gold-fill);border-radius:2px}
.monitor .lower .tt{font-family:var(--d);font-weight:600;font-size:15px;color:#fff}
.monitor .lower .ct{font-size:11px;color:#aebbcd;font-family:var(--m)}
.monitor .offmsg{color:var(--faint);font-family:var(--m);font-size:13px;text-align:center}
.play-row{display:flex;align-items:center;gap:14px;padding:13px 16px}
.play-row .chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--live-dim);color:var(--live-ink)}
.play-row .nm{font-weight:600}
.play-row .nx{margin-left:auto;font-size:12.5px;color:var(--faint)}.play-row .nx b{color:var(--muted);font-weight:600}
.bar{height:4px;background:var(--elev);border-radius:3px;margin:0 16px 14px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold-fill)}
.tl{padding:16px}
.tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.tl-head .d{font-family:var(--d);font-weight:600;font-size:14px}
.tl-head .legend{display:flex;gap:14px;font-size:11px;color:var(--muted)}
.tl-head .legend span{display:inline-flex;align-items:center;gap:6px}
.tl-head .legend i{width:9px;height:9px;border-radius:3px}
/* v0.11.67 — barra Gantt del palinsesto del giorno, al posto della vecchia striscia
   spoglia da 12px (solo colore, nessun testo leggibile senza passarci sopra col
   mouse). Più alta, con il nome del programma dentro ai blocchi abbastanza larghi, e
   una griglia oraria leggera integrata (ogni 3h) invece di una riga di numeri a parte. */
.gantt{position:relative;height:56px;background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;background-image:repeating-linear-gradient(to right,var(--border-soft) 0,var(--border-soft) 1px,transparent 1px,transparent 12.5%)}
.gseg{position:absolute;top:0;bottom:0;border-left:3px solid;display:flex;align-items:center;padding:0 9px;overflow:hidden;cursor:pointer;transition:background .15s}
.gseg:hover{filter:brightness(1.3)}
.gseg-label{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.gantt-hours{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--m);font-size:10px;color:var(--faint)}
.nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--gold-fill);z-index:3}
.nowline::before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--gold-fill)}
.nowline-t{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--gold-fill);color:#0b0e14;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;white-space:nowrap}
.tl-foot{margin-top:12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.tl-foot i{color:var(--gold)}
.tl-clock{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gold);background:var(--gold-dim);padding:4px 10px;border-radius:20px;border:1px solid var(--gold-line)}
.tl-clock i{font-size:14px}
.tl-cols{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.tl-cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.tl-cols{grid-template-columns:1fr}}
@media (min-width:761px) and (max-width:1100px){.tl-cols-4{grid-template-columns:repeat(2,1fr)}}
.tl-col{background:var(--bg);border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.tl-col-h{display:flex;justify-content:space-between;align-items:baseline;padding:9px 12px;font-family:var(--d);font-weight:600;font-size:12.5px;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--border-soft)}
.tl-col-h span:last-child{color:var(--faint);font-weight:500;font-size:10.5px}
.tl-col.active .tl-col-h{color:var(--gold);border-bottom-color:var(--gold-line);background:var(--gold-dim)}
/* v0.11.66 — richiesto dal committente: il palinsesto del giorno era diventato
   "immenso" (ogni colonna cresceva quanto serviva per contenere TUTTI i programmi
   della fascia, anche 20-30 righe). Ora ogni colonna ha un'altezza massima con
   scorrimento interno: la programmazione resta tutta lì (nulla viene tagliato o
   nascosto), semplicemente non fa più crescere la pagina all'infinito. La fascia
   "in corso" scorre da sola fino al programma in onda quando la pagina si apre. */
.tl-col-body{display:flex;flex-direction:column;gap:1px;padding:5px}
.tl-col-empty{padding:16px 10px;text-align:center;color:var(--faint);font-size:12px}
.tl-row{padding:8px 10px;border-radius:0 8px 8px 0;cursor:pointer;min-width:0}
.tl-row:hover{background:var(--surface)}
.trow-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.trow-t{font-size:11.5px;color:var(--muted);font-weight:700}
.trow-dur{font-size:10px;color:var(--faint);white-space:nowrap}
.trow-name{font-weight:600;font-size:12.5px;margin-top:3px;line-height:1.32;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.trow-bottom{display:flex;align-items:center;gap:7px;margin-top:4px;min-height:15px}
.trow-cat{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.tl-row.onnow{background:var(--gold-dim)}
.tl-row.onnow .trow-t{color:var(--gold)}
.tl-row.onnow .liveBadge{display:inline-flex}
/* v0.11.68 — divisore compatto per le pause pubblicitarie nell'agenda, al posto di
   una scheda a tutta larghezza identica a quella di un programma vero */
.tl-ad{display:flex;align-items:center;gap:6px;padding:3px 10px;margin:1px 0;font-size:10px;color:var(--faint);cursor:pointer;opacity:.75}
.tl-ad:hover{opacity:1;color:var(--muted)}
.tl-ad i{font-size:12px}
.tl-ad.onnow{color:var(--gold);opacity:1;background:var(--gold-dim);border-radius:6px}
.side{display:flex;flex-direction:column;gap:16px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px 14px}
.metric .k{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}.metric .k i{font-size:14px;color:var(--faint)}
.metric .v{font-family:var(--d);font-weight:600;font-size:25px;margin-top:7px}.metric .v small{font-size:13px;color:var(--faint);font-weight:500}
.metric .v.live{color:var(--live)}
.outs .o{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--border-soft)}.outs .o:last-child{border-bottom:none}
.outs .o .ic{width:30px;height:30px;border-radius:8px;background:var(--elev);display:flex;align-items:center;justify-content:center;color:var(--muted)}.outs .o .ic i{font-size:16px}
.outs .o .nm{font-weight:600;font-size:13px}.outs .o .sub{font-size:11px;color:var(--faint);font-family:var(--m)}
.outs .o .st{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ok);font-weight:600}
.outs .o .st.off{color:var(--faint)}
.outs .o .st .b{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-dim)}.outs .o .st.off .b{background:var(--faint);box-shadow:none}

/* v0.11.66 — mini-gauge di sistema (CPU/RAM/disco) in Plancia, versione compatta
   degli stessi gauge di Statistiche */
.sysmini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 12px}
.sysmini{display:flex;flex-direction:column;align-items:center;gap:2px}
.sysmini-g svg{width:64px;height:64px}
.sysmini-k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:flex;align-items:center;gap:4px}
.sysmini-k i{font-size:12px;color:var(--gold)}
.shelf{margin-top:16px}
.shelf-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.shelf-h h2{font-family:var(--d);font-size:15px;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:.03em}
.shelf-h button{color:var(--gold);font-size:12.5px;background:none;border:none;font-weight:600}
.reel{display:grid;grid-auto-flow:column;grid-auto-columns:188px;gap:14px;overflow-x:auto;padding-bottom:6px}
.vod{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.vod .thumb{aspect-ratio:2/3;position:relative;display:flex;align-items:flex-end;padding:8px}
.vod .thumb .dur{font-family:var(--m);font-size:10px;background:rgba(7,10,15,.7);padding:2px 6px;border-radius:5px;color:#dde4ef}
.vod .meta{padding:10px 11px}.vod .meta .t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vod .meta .c{font-size:11px;color:var(--faint);margin-top:3px}

/* PLACEHOLDER */
.soon{border:1px dashed var(--border);border-radius:14px;padding:60px 28px;text-align:center;color:var(--muted);max-width:560px}
.soon i{font-size:30px;color:var(--gold);display:block;margin-bottom:14px}
.soon b{display:block;font-family:var(--d);font-size:20px;color:var(--text);margin-bottom:8px;font-weight:600}

@media (max-width:1080px){.grid2{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap}.metrics{flex:1}}
@media (max-width:720px){.app{grid-template-columns:1fr}.rail{position:static;height:auto}.nav{flex-direction:row;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* LIBRERIA */
.uploadbar{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.ub-grid{display:grid;grid-template-columns:1fr 220px 170px auto;gap:12px;align-items:center}
.filedrop{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px dashed var(--border);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filedrop:hover{border-color:var(--gold-line);color:var(--text)}
.filedrop i{font-size:18px;flex:none}
.ub-grid input,.ub-grid select{padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text)}
.ub-grid input:focus,.ub-grid select:focus{border-color:var(--gold);outline:none}
.progress{height:4px;background:var(--elev);border-radius:3px;margin-top:14px;overflow:hidden;display:none}
.progress.show{display:block}
.progress i{display:block;height:100%;width:0;background:var(--gold-fill);transition:width .2s}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.vodcard{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:11px}
.vodcard:hover{border-color:var(--faint)}
.vc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.vc-title{font-weight:600;font-size:15px;line-height:1.3;word-break:break-word}
.chip-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:20px;background:var(--gold-dim);color:var(--gold);white-space:nowrap;flex:none}
.vc-meta{display:flex;gap:12px;color:var(--faint);font-size:12px;font-family:var(--m)}
.vc-meta .tc{color:var(--gold)}
.vc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.vc-left{display:flex;gap:7px}
.iconb{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.iconb:hover{color:var(--text);border-color:var(--faint)}
.iconb i{font-size:16px}
.iconb.danger:hover{color:var(--live);border-color:var(--live)}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(7,10,15,.82);display:flex;align-items:center;justify-content:center;padding:24px;z-index:60}
.modal-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:820px;width:100%;overflow:hidden}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border-soft)}
.modal-h b{font-family:var(--d);font-size:16px;font-weight:600}
.modal-card video{width:100%;display:block;background:#000;max-height:64vh}

/* TOAST */
#toasts{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:10px;z-index:80}
.toast{background:var(--elev);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:9px;padding:12px 16px;min-width:240px;font-size:13px;font-weight:500;transition:opacity .3s}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--live)}

/* LIBRERIA v0.3 */
.addpanel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:3px;margin-bottom:14px}
.seg button{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:7px;background:none;border:none;color:var(--muted);font-weight:600;font-size:13px}
.seg button.on{background:var(--gold-fill);color:#0b0e14}
.seg button i{font-size:16px}
.add-grid{display:grid;grid-template-columns:1.4fr 1fr 150px auto;gap:11px;align-items:start}
.add-grid textarea,.add-grid input,.add-grid select{padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;resize:vertical}
.add-grid textarea:focus,.add-grid input:focus,.add-grid select:focus{border-color:var(--gold);outline:none}
.filedrop{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px dashed var(--border);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filedrop:hover{border-color:var(--gold-line);color:var(--text)}.filedrop i{font-size:18px;flex:none}
.hint{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:12px;color:var(--muted)}.hint i{color:var(--gold);font-size:15px;flex:none;margin-top:1px}
.progress2{display:none;margin-top:14px}.progress2.show{display:block}
.pbar{height:5px;background:var(--elev);border-radius:3px;overflow:hidden}.pbar i{display:block;height:100%;width:0;background:var(--gold-fill);transition:width .2s}
.pmeta{display:flex;gap:16px;margin-top:8px;font-family:var(--m);font-size:12px;color:var(--muted)}.pmeta #ppct{color:var(--gold);font-weight:500}

.libtools{display:flex;gap:11px;margin-bottom:16px;flex-wrap:wrap}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:0 12px}
.search i{color:var(--faint);font-size:17px}.search input{flex:1;background:none;border:none;color:var(--text);padding:10px 0;font-family:inherit}.search input:focus{outline:none}
.libtools select{padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:9px;color:var(--text)}
.libtools select:focus{border-color:var(--gold);outline:none}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px}
.vodcard{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.vodcard:hover{border-color:var(--faint)}
.vodcard.busy{opacity:.85}
.vc-thumb{aspect-ratio:16/9;position:relative;background:#0b0e14;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vc-thumb .src{position:absolute;top:8px;left:8px;font-family:var(--m);font-size:9px;font-weight:600;letter-spacing:.08em;padding:3px 7px;border-radius:5px;background:rgba(11,14,20,.78);color:#cdd6e4}
.vc-thumb .src.external{color:var(--live-ink)}
.vc-thumb .dur{position:absolute;bottom:8px;right:8px;font-family:var(--m);font-size:10px;background:rgba(7,10,15,.75);padding:2px 6px;border-radius:5px;color:#dde4ef}
.vc-playover{width:46px;height:46px;border-radius:50%;background:rgba(11,14,20,.55);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .15s}
.vc-thumb:hover .vc-playover{opacity:1}.vc-playover i{font-size:20px;margin-left:2px}
.vc-busy{display:flex;align-items:center;gap:8px;background:rgba(11,14,20,.7);color:var(--gold);font-size:12px;font-weight:600;padding:7px 11px;border-radius:8px}
.vc-busy i{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.vc-body{padding:12px 13px 0;flex:1}
.vc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.vc-title{font-weight:600;font-size:14.5px;line-height:1.3;word-break:break-word}
.chip-cat{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--gold-dim);color:var(--gold);white-space:nowrap;flex:none}
.vc-desc{font-size:12.5px;color:var(--muted);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.vc-meta{display:flex;gap:12px;color:var(--faint);font-size:12px;font-family:var(--m);margin-top:8px}
.vc-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 13px}
.vc-left{display:flex;gap:6px}
.iconb{width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.iconb:hover{color:var(--text);border-color:var(--faint)}.iconb i{font-size:16px}
.iconb.danger:hover{color:var(--live);border-color:var(--live)}
.iconb:disabled{opacity:.4;cursor:not-allowed}

/* MODALI form */
.modal-card.sm{max-width:440px}
.flbl{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.flbl i{font-size:13px;color:var(--gold);flex:none}
.flbl-check{display:flex;align-items:center;gap:8px;height:38px;font-size:13px;color:var(--text);cursor:pointer}
.flbl-check input{width:auto;cursor:pointer}
.flbl-check i{color:var(--gold);font-size:15px}
.modal-card input,.modal-card textarea,.modal-card select{width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;resize:vertical}
.modal-card input:focus,.modal-card textarea:focus,.modal-card select:focus{border-color:var(--gold);outline:none}
.qopts{display:flex;flex-direction:column;gap:8px}
.qopts label{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--border);border-radius:9px;cursor:pointer;background:var(--surface)}
.qopts label:hover{border-color:var(--faint)}
.qopts input{width:auto}
.qopts b{font-weight:600;font-size:14px}.qopts span{display:block;font-size:12px;color:var(--faint)}

/* v0.11.61 — schede qualità motore in Impostazioni: prima una lista verticale di
   radio button spoglia, ora tre schede orizzontali con icona a "segnale" (più tacche
   = più qualità), stato selezionato evidente (bordo/gradiente oro + spunta) invece del
   solo pallino radio nativo. */
.qtier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.qtier{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,transform .15s,background .15s}
.qtier:hover{border-color:var(--faint);transform:translateY(-2px)}
.qtier input{position:absolute;opacity:0;pointer-events:none}
.qtier-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--elev);color:var(--faint);font-size:20px;margin-bottom:2px;transition:background .15s,color .15s}
.qtier b{font-size:14.5px;font-weight:700}
.qtier-res{font-family:var(--m);font-size:11px;color:var(--faint);letter-spacing:.03em}
.qtier small{font-size:11.5px;color:var(--muted);margin-top:2px}
.qtier-check{position:absolute;top:9px;right:9px;font-size:17px;color:var(--gold);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.qtier.on{border-color:var(--gold-line);background:linear-gradient(160deg,var(--gold-dim),var(--surface))}
.qtier.on .qtier-ico{background:var(--gold-fill);color:#0b0e14}
.qtier.on .qtier-check{opacity:1;transform:scale(1)}

@media (max-width:760px){.add-grid{grid-template-columns:1fr}}

/* LIBRERIA v0.4 — form pulito + schede */
.addform{display:flex;flex-direction:column;gap:13px;max-width:760px}
.frow{display:grid;grid-template-columns:1fr 210px;gap:12px}
.frow-ch{grid-template-columns:1fr 100px}
/* v0.11.64 — due colonne bilanciate (metà e metà), per coppie di campi ugualmente
   importanti come Utente/Password SMTP o Mittente/Email amministratore — .frow-ch
   invece stringe la seconda colonna a 100px, pensata per il campo "CH" (poche cifre),
   troppo stretta per una password o un indirizzo email. */
.frow-even{grid-template-columns:1fr 1fr}
@media (max-width:560px){.frow-even{grid-template-columns:1fr}}
.pwrow{display:flex;gap:8px;align-items:center}
.pwrow input{flex:1;min-width:0}
.pwrow .iconb{flex:none}
.fcol{display:flex;flex-direction:column}
.addform input,.addform textarea,.addform select{width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;resize:vertical}
.addform input:focus,.addform textarea:focus,.addform select:focus{border-color:var(--gold);outline:none}
.fbtn{display:flex;justify-content:flex-end}
.add-grid{display:flex;flex-direction:column;gap:12px} /* legacy safe */

.lib-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.vodcard{border-radius:16px}
/* v0.11.60 — richiesto dal committente: le card erano diventate verticali (formato
   2:3, da "poster") invece che orizzontali come un fotogramma video vero (16:9).
   Riportato a 16:9 e allargata la larghezza minima della card (200px erano troppo
   strette per un 16:9 leggibile). */
.vc-thumb{aspect-ratio:16/9}
.vc-title{text-transform:uppercase;letter-spacing:.02em;font-size:13px}
.vc-body{padding:14px 15px 2px}
.vc-top{align-items:center;gap:10px}
.vc-title{font-size:15px;font-weight:600;line-height:1.3}
.vc-desc{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
.vc-err{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:7px 10px;background:rgba(255,75,75,.1);border:1px solid rgba(255,75,75,.3);border-radius:7px;color:var(--live-ink);font-size:12px;line-height:1.4}
.vc-err i{flex:none;font-size:14px;margin-top:1px}
.vc-meta{margin-top:10px;align-items:center}
.vc-meta .saved{color:var(--ok)}
.vc-foot{padding:13px 15px}
.vc-busy{flex-direction:row;text-align:center}
.vc-busy span{white-space:nowrap}

/* v0.11.60 — paginazione libreria (4 righe max per pagina, invece di lista infinita) */
.libpager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;flex-wrap:wrap}
.pgnum{min-width:34px;height:34px;padding:0 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-weight:600;font-size:13px;cursor:pointer}
.pgnum:hover{color:var(--text);border-color:var(--faint)}
.pgnum.on{background:var(--gold-fill);border-color:var(--gold-fill);color:#0b0e14}
.pgdots{color:var(--faint);padding:0 4px;font-size:13px}

@media (max-width:760px){.frow{grid-template-columns:1fr}}
/* Nome canale + DTT: resta un'unica riga fin verso il formato telefono — DTT è al
   massimo 4 cifre, non ha senso fargli occupare una riga intera già a 760px come
   le altre coppie campo/campo più generiche che condividono la classe .frow. */
@media (max-width:760px){.frow-ch{grid-template-columns:1fr 90px}}
@media (max-width:380px){.frow-ch{grid-template-columns:1fr}}

.hint.warn{color:var(--warn-ink)}.hint.warn i{color:var(--live)}

.brandtxt{display:flex;flex-direction:column;line-height:1.05}
.brandtxt .ver{font-family:var(--m);font-size:9px;letter-spacing:.14em;color:var(--faint);margin-bottom:3px}

/* ════ PALINSESTO ════ */
.pal{display:flex;flex-direction:column;gap:14px}
.palgrid{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
/* monitor */
#palMon .mon2{display:grid;grid-template-columns:240px 1fr;gap:16px;padding:16px}
.monposter{aspect-ratio:16/9;border-radius:10px;position:relative;background:#0b0e14}
.monposter .onair{position:absolute;top:10px;left:10px}
.moninfo{display:flex;flex-direction:column;justify-content:center}
.mtt{font-family:var(--d);font-size:19px;font-weight:600}
.mcat{font-size:11px;color:var(--faint);letter-spacing:.1em;margin-top:3px}
.mtimes{font-size:12px;color:var(--muted)}
.monoff,.monlive{padding:22px 16px;color:var(--muted)}
.monlive .mlmsg{margin-top:10px;font-family:var(--d);font-size:18px;color:var(--text)}
/* calendario */
.calwrap{padding:16px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-head b{font-family:var(--d);font-size:17px;font-weight:600;text-transform:capitalize}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-family:var(--m);font-size:10px;color:var(--faint);text-align:center;padding:4px 0}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;cursor:pointer;position:relative}
.cal-day:hover{background:var(--elev)}
.cal-day.empty-cell{visibility:hidden;cursor:default}
.cal-day.today{box-shadow:inset 0 0 0 1px var(--faint)}
.cal-day.has::after{content:"";position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--gold-fill)}
.cal-day.sel{background:var(--gold-fill);color:#0b0e14;font-weight:700}
.cal-day.sel.has::after{background:#0b0e14}
.cal-legend{margin-top:14px;font-size:11px;color:var(--faint);display:flex;align-items:center;gap:6px}
.cal-legend .d{width:8px;height:8px;border-radius:50%;display:inline-block}.cal-legend .d.has{background:var(--gold-fill)}.cal-legend .d.today{box-shadow:inset 0 0 0 1px var(--faint)}
/* editor giorno */
.emptyday{padding:48px 24px;text-align:center;color:var(--muted)}.emptyday i{font-size:28px;color:var(--gold);display:block;margin-bottom:12px}.emptyday b{display:block;font-family:var(--d);font-size:18px;color:var(--text);margin-bottom:6px}
.day-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:16px 16px 14px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.day-head h2{font-family:var(--d);font-size:19px;font-weight:600;text-transform:capitalize}
.dayfill{display:flex;flex-direction:column;gap:5px;min-width:200px}
.dfbar{height:5px;background:var(--elev);border-radius:3px;overflow:hidden}.dfbar i{display:block;height:100%;background:var(--gold-fill)}
.dayfill span{font-size:11px;color:var(--muted)}
.rundown{padding:8px;display:flex;flex-direction:column;gap:2px;max-height:440px;overflow:auto}
.slot{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:9px}
.slot:hover{background:var(--surface)}
.slot .stime{font-size:14px;color:var(--text);font-weight:500}
.sname{font-weight:600;font-size:14px}
.ssub{font-size:12px;color:var(--faint);margin-top:3px}
.sctrl{display:flex;gap:5px}
.slot.incoming{opacity:.8;background:var(--surface)}
.slot.incoming .stime{color:var(--gold)}
.slot.over .ssub{color:var(--gold)}
.slot.warn .ssub{color:var(--live)}
.tagi{font-family:var(--m);font-size:9px;letter-spacing:.08em;background:var(--gold-dim);color:var(--gold);padding:2px 6px;border-radius:5px;margin-left:6px}
.emptyslot{padding:24px 12px;text-align:center;color:var(--faint);font-size:13px}
.day-actions{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--border-soft);flex-wrap:wrap}
/* picker */
.picklist{display:flex;flex-direction:column;gap:6px;max-height:54vh;overflow:auto}
.pickitem{display:flex;gap:11px;align-items:center;padding:8px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.pickitem:hover{background:var(--surface);border-color:var(--border)}
.pickitem.active{background:var(--gold-dim);border-color:var(--gold)}
.pkthumb{width:84px;aspect-ratio:16/9;border-radius:7px;flex:none;background:#0b0e14}
.pkname{font-weight:600;font-size:13px}.pksub{font-size:11px;color:var(--faint);margin-top:3px}
/* pannello diretta */
.livegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px}
.lblk{background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;padding:14px}
.lblk.wide{grid-column:1/-1}
.lh{font-family:var(--d);font-weight:600;font-size:14px;margin-bottom:4px}
.lp{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.switch input{display:none}
.track2{width:42px;height:24px;border-radius:14px;background:var(--elev);position:relative;transition:background .15s;flex:none}
.track2::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s}
.switch input:checked+.track2{background:var(--live)}
.switch input:checked+.track2::after{transform:translateX(18px);background:#fff}
.slbl{font-size:13px;font-weight:600}
.kv{display:flex;align-items:center;gap:8px;margin-top:8px}
.kv span{font-size:11px;color:var(--faint);width:54px;flex:none}
.kv code{flex:1;font-family:var(--m);font-size:12px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:7px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addtgt{display:grid;grid-template-columns:1fr 1.4fr 1fr auto;gap:9px;margin-bottom:12px}
.addtgt input{padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text)}
.addtgt input:focus{border-color:var(--gold);outline:none}
.tgts{display:flex;flex-direction:column;gap:7px}
.tgt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.tname{font-weight:600;font-size:13px}.tsub{font-size:11px;color:var(--faint);margin-top:2px}
@media (max-width:1080px){.palgrid{grid-template-columns:1fr}.livegrid{grid-template-columns:1fr}#palMon .mon2{grid-template-columns:1fr}.addtgt{grid-template-columns:1fr}}

/* monitor piccolo con audio */
.monwrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#05070b}
.monvid{width:100%;height:100%;object-fit:cover;display:block;border:0}
.monwrap .onair{position:absolute;top:10px;left:10px;z-index:2}
.monmute{position:absolute;bottom:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:none;background:rgba(5,7,11,.7);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.monmute:hover{background:rgba(5,7,11,.92)}
.streamurl{background:linear-gradient(180deg,var(--gold-dim),var(--surface));border-color:var(--gold)!important}
.streamurl .lh i{color:var(--gold)}
.streamurl code{background:#05070b}

.ingestwrap{margin-top:8px;max-width:320px}
.ingest-nosig{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#05070b;color:var(--faint);font-size:12px}
.ingest-nosig i{font-size:24px}

/* ════════ v0.7.0 ════════ */
.btn.sm{padding:6px 10px;font-size:12px;border-radius:7px}
.btn.sm i{font-size:14px}
.btn.danger-btn{border-color:var(--live);color:var(--live-ink);background:var(--live-dim)}
.btn.danger-btn:hover{background:rgba(255,75,75,.22);border-color:var(--live)}

/* identità canale in alto a destra */
.chan-id{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;margin-right:4px}
.chan-id b{font-family:var(--d);font-weight:600;font-size:15px}
.chan-id span{font-family:var(--m);font-size:11px;color:var(--faint)}

/* motore */
.engineblk{border-color:var(--border)}
.engineblk.eng-on{border-color:var(--gold-line);background:linear-gradient(180deg,var(--gold-dim),transparent)}
.engineblk .lh i{color:var(--gold)}
.engrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.eng-mode{font-size:12.5px;color:var(--muted)}.eng-mode b{color:var(--gold);text-transform:uppercase;font-family:var(--m);font-size:11px;letter-spacing:.08em}
.engineblk .switch input:checked+.track2{background:var(--gold-fill)}
.engineblk .switch input:checked+.track2::after{background:#0B0E14}

/* restream targets */
.tgt-main{min-width:0;flex:1}
.tgt-main .tname{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px}
.tgt-main .tsub{font-family:var(--m);font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.tgt-ctrl{display:flex;align-items:center;gap:7px;flex:none}
.tgt.tgt-live{border-color:var(--live);box-shadow:0 0 0 1px var(--live-dim)}
.rs-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--m);font-size:10px;letter-spacing:.1em;padding:3px 8px;border-radius:20px}
.rs-badge.live{background:var(--live-dim);color:var(--live)}
.rs-badge.live .b{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
.rs-badge.err{background:rgba(255,75,75,.10);color:var(--live-ink)}
.rs-badge.err .b{width:7px;height:7px;border-radius:50%;background:var(--live-ink)}
.rs-badge.off{background:var(--elev);color:var(--faint)}

/* impostazioni — v0.11.53: da grid 2 colonne (lasciava vuoti sotto le card più
   corte quando la card affiancata era più alta, per come funzionano le righe
   in un normale grid) a layout "a colonne" tipo masonry: le card scorrono in
   verticale riempiendo prima la colonna 1 poi la 2, senza spazi morti, e
   restano compatte a qualunque altezza. break-inside:avoid evita che una
   card venga tagliata a metà tra una colonna e l'altra. */
.settings{column-count:2;column-gap:12px;orphans:1;widows:1}
.setcard{display:inline-block;width:100%;margin:0 0 12px;break-inside:avoid;-webkit-column-break-inside:avoid}
.monlist{display:flex;flex-direction:column;gap:8px}
.monrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--panel2);flex-wrap:wrap}
.monrow b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.monrow .meta{font-size:11px}
/* v0.11.102 — richiesto dal committente: riga a parte (va sempre a capo nel
   riquadro, grazie a flex-basis:100% dentro un contenitore flex-wrap) per la
   scelta della qualità/pulsante di conversione o per il progresso in corso. */
.monrow .ivconv{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:2px}
/* v0.11.104 — richiesto dal committente: scelta della qualità di conversione
   più curata di un anonimo menu a tendina — quattro "pillole" affiancate,
   ciascuna con nome (SD/HD/Full HD/4K) e risoluzione vera sotto, quella
   scelta si accende con l'accento del tema. */
.ivqpills{display:flex;gap:6px;flex-wrap:wrap}
.ivqpill{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 11px;background:var(--elev);border:1px solid var(--border);border-radius:9px;color:var(--muted);cursor:pointer;font-family:inherit;line-height:1.25;transition:border-color .15s,background .15s,color .15s}
.ivqpill b{font-size:11.5px;font-weight:700;color:var(--text)}
.ivqpill span{font-size:9.5px;font-family:var(--m);color:var(--faint)}
.ivqpill:hover{border-color:var(--gold-line)}
.ivqpill.on{background:var(--gold-dim);border-color:var(--gold-fill)}
.ivqpill.on b{color:var(--gold)}
.ivqpill.on span{color:var(--gold)}
.monchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:20px;flex:none}
.monchip i{font-size:13px}
.monswitch{display:flex;align-items:center;gap:8px;white-space:nowrap;flex:none}
.toggle-lbl{font-size:12px;color:var(--faint)}

/* v0.11.62 — interruttore a levetta riutilizzabile (allarmi attivi, ripartenza
   automatica) invece del semplice checkbox nativo, per coerenza col resto del
   restyling grafico fatto sulle altre card di Impostazioni. */
.toggle{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:none}
.toggle input{position:absolute;opacity:0;width:42px;height:24px;margin:0;cursor:pointer;z-index:1}
.toggle-track{width:42px;height:24px;border-radius:20px;background:var(--elev);border:1px solid var(--border);position:relative;transition:background .15s,border-color .15s;flex:none}
.toggle-track::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--faint);transition:transform .15s,background .15s}
.toggle input:checked+.toggle-track{background:var(--gold-dim);border-color:var(--gold-line)}
.toggle input:checked+.toggle-track::after{transform:translateX(18px);background:var(--gold-fill)}

.alerts-banner{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;margin-bottom:14px;border:1px solid var(--border-soft);transition:background .15s,border-color .15s}
.alerts-banner i{font-size:26px;flex:none}
.alerts-banner-txt{flex:1;display:flex;flex-direction:column;gap:2px}
.alerts-banner-txt b{font-size:14px}
.alerts-banner-txt span{font-size:12px;color:var(--muted)}
.alerts-banner.off{background:var(--panel2)}
.alerts-banner.off i{color:var(--faint)}
.alerts-banner.on{background:linear-gradient(120deg,var(--gold-dim),transparent)}
.alerts-banner.on i{color:var(--gold)}
.setbody{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.setbody input,.setbody select{width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit}
.setbody input:focus,.setbody select:focus{border-color:var(--gold);outline:none}
.setbtns{display:flex;gap:10px;flex-wrap:wrap}
.setcard .qopts label span{color:var(--faint);font-size:12px}
@media (max-width:980px){.settings{column-count:1}}
@media (max-width:480px){.card-h{padding:10px 12px}.setbody{padding:10px 12px;gap:8px}.settings{column-gap:8px}.setcard{margin-bottom:8px}}

/* editor categorie */
.catrow{display:grid;grid-template-columns:1fr 46px minmax(120px,160px) 34px;gap:9px;align-items:center;margin-bottom:9px}
.catrow .catname{width:100%}
.catrow .catcolor{padding:2px;height:38px;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer}
.catrow .catloc{height:38px;padding:0 8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:12px}
@media (max-width:560px){.catrow{grid-template-columns:1fr 46px 34px}.catrow .catloc{grid-column:1/-1}}

/* archiviazione — dischi/cartelle per i VOD */
.storlist{display:flex;flex-direction:column;gap:12px}
.storrow{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel2)}
.storrow-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.storrow-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.storbar{height:6px;border-radius:4px;background:var(--surface);overflow:hidden;margin:6px 0 4px}
.storbar i{display:block;height:100%;background:var(--gold-fill,var(--gold));border-radius:4px}

/* v0.11.63 — modale "Sfoglia cartelle" (Storage → Aggiungi disco/cartella) */
.fb-path{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:12px;color:var(--muted);word-break:break-all;margin-bottom:10px}
.fb-shortcuts{display:flex;flex-wrap:wrap;margin-bottom:10px}
.fb-list{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel2)}
.fb-row{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border-soft)}
.fb-row:last-child{border-bottom:none}
.fb-row:hover{background:var(--elev)}
.fb-row i{color:var(--gold);font-size:16px;flex:none}
.fb-row[data-up]{color:var(--muted)}
.fb-row[data-up] i{color:var(--faint)}

/* utenti */
.ulist{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.urow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.uinfo{min-width:0}
.uname{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px}
.usub{font-family:var(--m);font-size:11px;color:var(--faint);margin-top:3px}
.uctrl{display:flex;align-items:center;gap:7px;flex:none}
.ubuiltin{font-family:var(--m);font-size:9px;letter-spacing:.1em;color:var(--gold);background:var(--gold-dim);padding:2px 7px;border-radius:20px;text-transform:uppercase}
.urole{text-transform:uppercase;font-size:10px;letter-spacing:.08em;font-weight:600}
.urole.admin{color:var(--gold)}.urole.senior{color:var(--ok)}.urole.user{color:var(--muted)}
.uadd{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:11px}
.uadd-h{font-family:var(--d);font-weight:600;font-size:13.5px}

/* readout countdown motore */
.eng-readout{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft)}
.ro-prog{display:flex;align-items:center;gap:9px;font-size:14px}
.ro-prog b{font-weight:600}
.ro-dot{width:9px;height:9px;border-radius:50%;background:var(--gold-fill);flex:none}
.ro-dot.live{background:var(--live);animation:pulse 1.6s infinite}
.ro-times{display:flex;gap:18px;margin-top:6px;font-size:12.5px;color:var(--muted);font-family:var(--m)}
.ro-times b{color:var(--text)}
.ro-rem b{color:var(--gold)}
.ro-bar{height:4px;border-radius:3px;background:var(--elev);margin-top:9px;overflow:hidden}
.ro-bar i{display:block;height:100%;background:var(--gold-fill);transition:width 1s linear}

/* ══════════════ v0.10.0 — editor a segmenti, schema, plancia ══════════════ */

/* -- layout editor: rundown + libreria laterale -- */
.editgrid{display:grid;grid-template-columns:1fr 300px;gap:14px;padding:8px 8px 0;align-items:start}
.rundown-col{min-width:0}
@media (max-width:900px){.editgrid{grid-template-columns:1fr}}

/* -- slot trascinabili -- */
.slot.real{grid-template-columns:22px 64px 1fr auto;cursor:default}
.slot.real .drag-h{display:flex;align-items:center;justify-content:center;color:var(--faint);cursor:grab}
.slot.real .drag-h:active{cursor:grabbing}
.slot.real:hover .drag-h{color:var(--muted)}
.slot.dragging{opacity:.45}
.slot.drop-before{box-shadow:inset 0 3px 0 -1px var(--gold)}
.slot.drop-after{box-shadow:inset 0 -3px 0 -1px var(--gold)}
.rundown.drop-empty{outline:2px dashed var(--gold-line);outline-offset:-6px;border-radius:10px}
.sname{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* -- evidenziazione "in onda ora" (rettangolo giallo) -- */
.liveBadge{display:none;align-items:center;gap:6px;font-family:var(--m);font-size:10px;letter-spacing:.1em;background:var(--gold-fill);color:#0b0e14;padding:2px 8px;border-radius:5px;font-weight:700}
.liveBadge .b{width:6px;height:6px;border-radius:50%;background:#0b0e14;animation:pulse 1.6s infinite}
.slot.onnow{background:var(--gold-dim);border:1.5px solid var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.slot.onnow:hover{background:var(--gold-dim)}
.slot.onnow .stime{color:var(--gold)}
.slot.onnow .liveBadge{display:inline-flex}

/* -- slot pubblicità (spot automatico, read-only) -- */
.slot.adslot{grid-template-columns:64px 1fr auto;background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 10px,var(--panel) 10px,var(--panel) 20px);opacity:.9}
.slot.adslot .sname{font-size:13px;color:var(--muted);font-weight:600}
.slot.adslot .sname i{color:var(--gold)}
.slot.adslot .stime{color:var(--faint)}

/* -- libreria laterale a segmenti -- */
.vodside{background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;padding:12px;position:sticky;top:8px}
.vodside-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:10px}
.vodside-h i{color:var(--gold)}
.search.sm{min-width:0;padding:0 10px;margin-bottom:10px}
.search.sm input{padding:8px 0;font-size:13px}
.vodside-list{display:flex;flex-direction:column;gap:6px;max-height:392px;overflow:auto}
.vchip{display:grid;grid-template-columns:44px 1fr auto;gap:9px;align-items:center;padding:6px;border:1px solid var(--border);border-radius:9px;background:var(--panel);cursor:grab}
.vchip:hover{border-color:var(--faint)}
.vchip:active{cursor:grabbing}
.vchip.dragging{opacity:.45}
.vthumb{width:44px;height:32px;border-radius:6px;background:var(--elev);background-size:cover;background-position:center;flex:none}
.vmeta{min-width:0}
.vn{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs{font-size:10.5px;color:var(--faint);margin-top:2px}

/* -- schema ad albero della generazione -- */
.autotree{margin:8px 0 4px}
.tree-empty{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);padding:12px 14px;background:var(--bg);border:1px dashed var(--border);border-radius:10px}
.tree-empty i{color:var(--gold)}
.tree-flow{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:16px;background:var(--bg);border:1px solid var(--border-soft);border-radius:12px}
.tnode{position:relative;display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--border);border-radius:12px;padding:10px 13px;min-width:118px}
.tnode-top{display:flex;align-items:center;gap:7px}
.tnode-dot{width:8px;height:8px;border-radius:50%;flex:none}
.tnode-step{font-family:var(--m);font-size:10px;letter-spacing:.04em;color:var(--faint);text-transform:uppercase}
.tnode-label{font-family:var(--d);font-weight:700;font-size:13.5px;color:var(--text)}
.tnode-count{font-family:var(--m);font-size:10.5px;color:var(--muted)}
.tnode-count.zero{color:var(--live)}
.tnode-ctrl{display:flex;gap:3px;margin-top:5px;opacity:.4;transition:opacity .15s}
.tnode:hover .tnode-ctrl{opacity:1}
.tnode-ctrl .iconb{width:21px;height:21px;font-size:11px}
.tarrow{display:flex;align-items:center;color:var(--faint);flex:none}
.tarrow.loopback{color:var(--gold);margin-left:6px}
.tloop{display:inline-flex;align-items:center;gap:6px;font-family:var(--m);font-size:10.5px;color:var(--gold);background:var(--gold-dim);border:1px dashed var(--gold-line);border-radius:20px;padding:6px 13px;white-space:nowrap}
.treeadd{display:flex;gap:9px;align-items:center;margin-top:10px}
.treeadd select{padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit}

/* ══════════════ PLANCIA — stato messa in onda ridisegnato ══════════════ */
.bcstage{position:relative;aspect-ratio:16/9;background:radial-gradient(120% 120% at 50% 30%,#10151f 0%,#070a0f 100%);overflow:hidden;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center}
.bcstage .monvid{width:100%;height:100%;object-fit:cover;background:#000}
.bc-poster{position:absolute;inset:0;background-size:cover;background-position:center}
.bc-poster.empty{background:transparent}
.bc-poster .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);background-size:44px 44px;opacity:.25}
.bcbadge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;font-family:var(--m);font-size:11px;letter-spacing:.12em;padding:5px 10px;border-radius:6px;z-index:2}
.bcbadge.live{background:var(--live);color:#fff}
.bcbadge.off{background:rgba(7,10,15,.72);color:var(--muted);border:1px solid var(--border)}
.bcbadge .b{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}
.bcbadge.live .b{background:#fff}
.bc-offnote{position:absolute;bottom:14px;left:14px;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#aebbcd;background:rgba(7,10,15,.6);padding:5px 10px;border-radius:6px}
.bc-offnote i{color:var(--gold)}
.bc-nosig{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--faint);background:rgba(7,10,15,.82);font-size:13px}
.bc-nosig i{font-size:30px}
.bcstage .monmute{position:absolute;bottom:14px;right:14px;z-index:2}

/* barra "in onda ora" sotto lo stage — v0.11.66: restyling "stile notizie"
   (lower third da telegiornale): striscia di accento colorata a sinistra,
   orologio live fisso a destra, titolo più marcato. Il contenuto di #npbar
   resta generato dallo stesso codice di sempre (fillBcOverlay) — qui si
   ridisegna solo il "vestito" attorno. */
.newsbar{position:relative;display:flex;align-items:stretch;background:linear-gradient(90deg,#0d1119,#141a24);border-bottom:1px solid var(--border-soft)}
.newsbar-accent{width:5px;flex:none;background:linear-gradient(180deg,var(--live),#8a1f1f)}
.newsbar-accent.off{background:var(--faint)}
.newsbar-clock{display:flex;align-items:center;gap:7px;padding:0 18px;font-size:13.5px;font-weight:700;color:var(--text);background:rgba(255,255,255,.03);border-left:1px solid var(--border-soft);flex:none;white-space:nowrap}
.newsbar-clock i{color:var(--gold);font-size:15px}
.npbar{flex:1;min-width:0;display:grid;grid-template-columns:74px 1fr;gap:13px;align-items:center;padding:13px 16px}
.np-thumb{width:74px;height:48px;border-radius:8px;background:var(--elev);background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center;color:var(--faint);flex:none}
.np-thumb.live{background:var(--live-dim);color:var(--live)}
.np-thumb.live i,.np-thumb.empty i{font-size:22px}
.np-ad{position:absolute;top:4px;left:4px;font-family:var(--m);font-size:9px;letter-spacing:.08em;background:var(--gold-fill);color:#0b0e14;padding:1px 5px;border-radius:4px;font-weight:700}
.np-main{min-width:0}
.np-t{font-family:var(--d);font-weight:700;font-size:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.np-c{font-size:12px;color:var(--faint);margin-top:2px}
.np-chip{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:20px;white-space:nowrap}
.np-prog{display:flex;align-items:center;gap:11px;margin-top:8px}
.np-bar{flex:1;height:5px;background:var(--elev);border-radius:3px;overflow:hidden}
.np-bar i{display:block;height:100%;background:var(--gold-fill);transition:width 1s linear}
.np-times{font-size:11.5px;color:var(--muted);white-space:nowrap}
.np-next{font-size:12px;color:var(--faint);margin-top:7px}
.np-next b{color:var(--muted);font-weight:600}
@media (max-width:560px){.newsbar-clock{display:none}}

/* ══════════════ v0.10.3 — ingressi live multipli, pause pubblicitarie, registrazione ══════════════ */
.liveinputs{display:flex;flex-direction:column;gap:8px}
.recdot{width:9px;height:9px;border-radius:50%;background:var(--live);display:block}
.iconb:hover .recdot{box-shadow:0 0 0 3px var(--live-dim)}
.adbreaks{flex-direction:column;align-items:flex-start;background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;padding:12px 14px;margin-top:10px}
.abh{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.abh i{color:var(--gold)}
.abchips{display:flex;flex-wrap:wrap;gap:7px}
.abchip{display:inline-flex;align-items:center;gap:4px;background:var(--elev);border:1px solid var(--border);border-radius:20px;padding:4px 4px 4px 11px;font-size:12px;color:var(--text)}
.abchip .iconb{width:20px;height:20px}

/* ══════════════ v0.11.13 — monitor/test della stringa DASH ══════════════ */
.dashtest{margin-top:8px}
.dashtest-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:8px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--border-soft)}
.dashtest-row.ok{color:var(--ok);background:var(--ok-dim);border-color:transparent}
.dashtest-row.err{color:var(--live);background:var(--live-dim);border-color:transparent}
.dashtest-detail{font-size:11.5px;color:var(--muted);padding:8px 10px 2px;line-height:1.6}

/* ══════════════ v0.11.9 — link di prelievo RTMP/SRT/HLS ══════════════ */
.pulllinks{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border-soft);display:flex;flex-direction:column;gap:5px}
.pulltitle{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);margin-bottom:2px}
.pulltitle i{color:var(--gold);font-size:14px}
.pullrow{margin-top:0}
.pullrow span{width:44px}
.pullrow code{font-size:11px}

/* ══════════════ v0.11.9 — registrazioni ══════════════ */
.recgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px}
.recquick{display:flex;flex-direction:column;gap:8px}

/* ══════════════ v0.11.9 — statistiche di sistema ══════════════ */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px}
.statgrid.wide3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.statgrid{grid-template-columns:1fr}}
/* v0.11.61 — restyling grafico della sezione Statistiche: sfondi sfumati, angoli più
   morbidi, piccolo effetto di sollevamento al passaggio del mouse (era tutto piatto e
   identico al resto dei pannelli, poco leggibile a colpo d'occhio). */
.gaugecard{background:linear-gradient(160deg,var(--surface),var(--panel));border:1px solid var(--border-soft);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s,box-shadow .15s,border-color .15s}
.gaugecard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22);border-color:var(--faint)}
.gaugecard .gh{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);align-self:flex-start}
.gaugecard .gh i{color:var(--gold);font-size:15px}
.gaugecard .gv{font-family:var(--d);font-weight:700;font-size:16px;margin-top:2px}
.gaugecard .gsub{font-size:11px;color:var(--faint);text-align:center}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 16px 16px}
@media (max-width:1000px){.statrow{grid-template-columns:repeat(2,1fr)}}
.statmini{background:linear-gradient(160deg,var(--panel),var(--elev));border:1px solid var(--border);border-radius:12px;padding:13px 15px;transition:border-color .15s,transform .15s,box-shadow .15s}
.statmini:hover{border-color:var(--gold-line);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.statmini .k{font-size:10.5px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.04em}
.statmini .k i{font-size:14px;color:var(--gold);width:26px;height:26px;border-radius:8px;background:var(--gold-dim);display:inline-flex;align-items:center;justify-content:center;flex:none}
.statmini .v{font-family:var(--d);font-weight:700;font-size:20px;margin-top:8px}
.statmini .v small{font-size:11.5px;color:var(--faint);font-weight:500}
.livechart{padding:2px 16px 18px}
.livechart .lc-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:9px}
.lc-svg{width:100%;height:110px;background:var(--bg);border:1px solid var(--border-soft);border-radius:12px;display:block}
.stattable{width:100%;border-collapse:collapse;font-size:12.5px}
.stattable th{text-align:left;color:var(--faint);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;border-bottom:1px solid var(--border-soft)}
.stattable td{padding:10px 12px;border-bottom:1px solid var(--border-soft);transition:background .1s}
.stattable tr:hover td{background:var(--panel2)}
.stattable tr:last-child td{border-bottom:none}
.stattable .num{font-family:var(--m);color:var(--muted);text-align:right}

/* ══════════════ v0.11.2 — pannello generazione riordinato, fix motore/monitor ══════════════ */
.genpanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:12px;padding:14px;background:var(--bg);border:1px solid var(--border-soft);border-radius:12px}
.genfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.genfield .flbl{margin:0}
.geninput{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:0 10px}
.geninput input{border:none;background:transparent;color:var(--text);padding:9px 0;width:100%;font-family:var(--m);font-size:13px}
.geninput input:focus{outline:none}
.geninput span{font-size:11.5px;color:var(--faint);white-space:nowrap}
.gendate{padding:9px 11px;background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--text);width:100%;font-family:inherit}
.genactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ══════════════ v0.11.17 — pannello YouTube: rifinitura grafica ══════════════ */
.yt-settings{display:block}
.yt-settings .setcard{margin-bottom:18px}
.ytcfg-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ytcfg-col{display:flex;flex-direction:column;min-width:0}
.ytcfg-col input{padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit}
.ytcfg-col input:focus{border-color:var(--gold);outline:none}
.ytdlp-status{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:500;background:var(--surface);border:1px solid var(--border)}
.ytdlp-status.ok{color:var(--ok);border-color:rgba(63,208,143,.35)}
.ytdlp-status.bad{color:var(--live-ink);border-color:rgba(255,75,75,.35)}
.ytdlp-status i{font-size:16px;flex:none}
.ytcookies{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft)}
@media (max-width:760px){.ytcfg-row{grid-template-columns:1fr}}

.ytsearch-row{display:flex;gap:10px;flex-wrap:wrap}
.ytsearch-row input{flex:1;min-width:220px;padding:10px 13px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit}
.ytsearch-row input:focus{border-color:var(--gold);outline:none}

.ytchan{display:flex;align-items:center;gap:14px;margin-top:16px;padding:13px 15px;background:var(--surface);border:1px solid var(--border-soft);border-radius:10px}
.ytchan img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--border)}
.ytchan-noimg{width:52px;height:52px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:20px;flex:none}
.ytchan-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.ytchan-info b{font-size:15px;font-weight:600;font-family:var(--d)}
.ytchan-info span{font-size:12px;color:var(--muted);font-family:var(--m)}

.yttoolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border-soft)}
.yttoolbar-group{display:flex;align-items:center;gap:8px;flex-shrink:0}
.yttoolbar-group i{color:var(--faint);font-size:16px}
.yttoolbar select{padding:9px 11px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px}
.yttoolbar select:focus{border-color:var(--gold);outline:none}
#ytPlaylist{min-width:210px}
.yttoolbar-import{margin-left:auto}
.btn.sm.ghost{background:transparent}
.btn.sm.ghost:hover{background:var(--surface)}

.ytgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1300px){.ytgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.ytgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ytgrid{grid-template-columns:1fr}}
.ytcard{cursor:pointer;user-select:none;transition:border-color .12s,transform .1s}
.ytcard:hover{border-color:var(--gold-line);transform:translateY(-1px)}
.ytcard.ytsel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.ytcard.ytalready{cursor:default}
.ytcard.ytalready:hover{transform:none;border-color:var(--border)}
.ytcheck{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;background:rgba(11,14,20,.55);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ytcard.ytsel .ytcheck{color:var(--gold);background:rgba(11,14,20,.75)}
.ytalready-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,14,20,.62)}
.ytalready-badge span{display:flex;align-items:center;gap:6px;background:rgba(11,14,20,.85);color:var(--muted);font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:20px;border:1px solid var(--border)}
.ytcard .vc-body{padding:11px 12px 12px}
.ytcard .vc-title{font-size:13.5px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

.ytpager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px}
.ytpg{min-width:34px;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-family:var(--m);font-size:13px}
.ytpg:hover:not(:disabled){border-color:var(--gold-line);color:var(--text)}
.ytpg:disabled{opacity:.35;cursor:default}
.ytpg.num.on{background:var(--gold-dim);border-color:var(--gold-line);color:var(--gold);font-weight:700}

/* ══════════════ v0.11.15 — Brand white-label ══════════════ */
.brandlogo-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.brandlogo-preview{width:120px;height:120px;border-radius:12px;background:repeating-conic-gradient(#1a1e28 0% 25%,#14171f 0% 50%) 50%/16px 16px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.brandlogo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.brandlogo-preview i{font-size:26px;color:var(--faint)}
.brandlogo-ctrl{display:flex;flex-direction:column;gap:10px;flex:1;min-width:220px}
.brandcolor-row{display:flex;align-items:center;gap:12px}
.brandcolor-row input[type=color]{width:52px;height:38px;padding:2px;border-radius:8px;border:1px solid var(--border);background:var(--surface);cursor:pointer}
.brandcolor-row input.mono{padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--m);text-transform:uppercase}
.brandcolor-row input.mono:focus{border-color:var(--gold);outline:none}
.brandpreview{border-radius:12px;overflow:hidden;border:1px solid var(--border);max-width:420px;background:#0b0e14}
.bp-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:3px solid;background:#10141c}
.bp-header img{width:30px;height:30px;object-fit:contain;flex:none}
.bp-logofallback{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--d);flex:none}
.bp-header b{flex:1;font-family:var(--d);font-size:14.5px;color:#fff;font-weight:600}
.bp-live{font-family:var(--m);font-size:9.5px;font-weight:700;letter-spacing:.05em;color:#0b0e14;padding:3px 8px;border-radius:20px;flex:none}
.bp-body{aspect-ratio:16/9;background:linear-gradient(135deg,#171b24,#0b0e14);display:flex;align-items:center;justify-content:center}
.bp-play{width:54px;height:54px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:22px}

/* ══════════════ v0.11.16 — colori dell'interfaccia (Impostazioni) ══════════════ */
.themegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.themeswatch{display:flex;align-items:center;gap:8px;margin-top:6px}
.themeswatch input[type=color]{width:44px;height:36px;padding:2px;border-radius:8px;border:1px solid var(--border);background:var(--surface);cursor:pointer;flex:none}
.themeswatch input.mono{flex:1;min-width:0;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--m);text-transform:uppercase}
.themeswatch input.mono:focus{border-color:var(--gold);outline:none}

/* ══════════════ v0.11.78 — griglia video del Monitor Interviste ══════════════
   CORREZIONE: "la finestra del monitor si allarga e non riesce a contenere
   tutti dentro". Causa reale: il Monitor riusa le classi "jv-grid"/"jv-tile"
   della pagina pubblica degli ospiti (join.js), ma quelle classi sono definite
   SOLO nello <style> interno di join.html — pagina che il pannello admin non
   carica mai. Qui dentro, quindi, quelle classi non avevano NESSUN effetto: i
   video uscivano a dimensione nativa, uno sotto l'altro, e il riquadro si
   allargava senza limite invece di restare fisso e dividersi lo spazio tra i
   partecipanti. Qui le stesse regole della pagina ospiti, adattate a un
   riquadro di dimensione FISSA dentro il pannello (non a tutta la pagina): se
   i partecipanti non ci stanno tutti, si scorre invece di continuare ad
   allargarsi. */
/* v0.11.94 — richiesto dal committente: griglia "stile Zoom" che si adatta al
   numero di persone sul palco (2/3/4/5...) invece di tagliare male le
   proporzioni o accavallare le tessere. Prima il riquadro non aveva
   un'altezza vera (solo un max-height con contenuto libero di crescere fino
   lì): la disposizione calcolata in JavaScript (vedi layoutJvGrid in app.js)
   ha bisogno di uno spazio DEFINITO su cui ragionare, non di uno che dipende
   a sua volta dalle tessere che ci mette dentro. Qui un'altezza fissa vera —
   le regole sotto (grid-template-columns ecc.) restano solo come aspetto
   prima ancora che il JavaScript sia partito, o se dovesse mai fallire. */
#ivMonModal .jv-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-auto-rows:1fr;height:420px;overflow:auto}
#ivMonModal .jv-tile{position:relative;background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--border-soft);aspect-ratio:16/9}
/* v0.11.90 — stessa correzione della vista tra ospiti: due dimensioni standard
   invece di tagliare male chi è verticale (anche qui nel Monitor, non solo tra
   ospiti). */
#ivMonModal .jv-tile.portrait{aspect-ratio:9/16}
/* v0.11.93 — stessa correzione della vista tra ospiti: mai più ritagliare,
   sempre adattare (bande nere ai lati se le proporzioni non combaciano). */
#ivMonModal .jv-tile video{width:100%;height:100%;object-fit:contain}
#ivMonModal .jv-tile .jv-tag{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
/* v0.11.96 — richiesto dal committente: il Monitor deve indicare SUBITO
   quando il file di un ospite è appena stato caricato (non solo nella lista
   interviste separata, da controllare a parte). Badge verde in alto al
   centro della tessera, resta visibile per tutta la sessione una volta
   arrivato. */
#ivMonModal .jv-upl-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(63,208,143,.16);color:var(--ok,#3FD08F);border:1px solid rgba(63,208,143,.4);backdrop-filter:blur(4px);padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.02em}
/* v0.11.106 — richiesto dal committente: stessa veste "monitor in attesa di
   segnale" degli ingressi diretta RTMP (vedi .ingest-nosig) invece del
   semplice sfondo grigio con spinner — sfondo quasi nero, icona antenna,
   scansione animata. */
#ivMonModal .jv-tile .jv-state{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--faint);background:#05070b;font-size:12px;text-align:center;padding:8px;overflow:hidden}
#ivMonModal .jv-tile .jv-state.on{display:flex}
#ivMonModal .jv-tile .jv-state i{font-size:24px}
#ivMonModal .jv-tile .jv-state span{font-family:var(--m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
#ivMonModal .jv-state-scan{position:absolute;left:0;right:0;height:45%;top:-45%;background:linear-gradient(rgba(255,255,255,.06),transparent);animation:jvScan 2.6s linear infinite;pointer-events:none}
@keyframes jvScan{0%{top:-45%}100%{top:100%}}
/* v0.11.80 — layout "scelta manuale": l'admin decide chi mettere in grande
   (bottone in alto a sinistra su ogni tessera); gli altri restano in una
   striscia piccola e scorrevole sotto. Cambiare chi è in grande sposta solo
   il <div> nel DOM — non tocca mai la connessione video di nessuno. */
#ivMonModal .spotbtn{background:rgba(0,0,0,.5);color:#fff;border-color:transparent}
#ivMonModal .spotbtn.active{background:var(--gold-fill);color:#fff}
#ivMonModal .jv-spotlight{display:flex;flex-direction:column;gap:10px;padding:10px;max-height:480px}
#ivMonModal .jv-spot-big{position:relative}
#ivMonModal .jv-spot-big .jv-tile{width:100%;aspect-ratio:16/9}
#ivMonModal .jv-spot-strip{display:flex;gap:8px;overflow-x:auto;flex:none;padding-bottom:2px}
#ivMonModal .jv-spot-strip .jv-tile{flex:0 0 150px;width:150px;aspect-ratio:16/9}
/* v0.11.86 — riga di template (scelta del tipo di disposizione del palco) e
   retropalco (tutti i collegati, pillole cliccabili per metterli dentro/fuori
   dal palco) — la veste "da regia" tipo StreamYard richiesta dal committente. */
#ivMonModal .ivmon-tplrow{display:flex;gap:8px;margin-top:12px}
#ivMonModal .ivmon-tplbtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:11px;cursor:pointer}
#ivMonModal .ivmon-tplbtn i{font-size:18px}
#ivMonModal .ivmon-tplbtn:hover{color:var(--text);border-color:var(--faint)}
#ivMonModal .ivmon-tplbtn.active{border-color:var(--gold,#C9A34C);color:var(--gold,#C9A34C);background:#C9A34C0f}
#ivMonModal .ivmon-backstage{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-soft)}
#ivMonModal .ivmon-backstage-label{font-size:11.5px;color:var(--faint);margin-bottom:8px;display:flex;align-items:center;gap:6px}
#ivMonModal .ivmon-backstage-strip{display:flex;gap:8px;flex-wrap:wrap}
#ivMonModal .ivmon-backpill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;cursor:pointer}
#ivMonModal .ivmon-backpill:hover{border-color:var(--faint)}
#ivMonModal .ivmon-backpill.on{border-color:var(--ok,#3FD08F);color:var(--ok,#3FD08F);background:#3FD08F0f}
/* v0.11.89 — anteprima di sé stessi (conduttore) nel Monitor, quando ha dato
   accesso a webcam/microfono. È solo un promemoria visivo per lui, separato dal
   palco/griglia: la sua webcam viene comunque inviata come partecipante vero. */
#ivMonModal .ivmon-selfpreview{position:relative;width:160px;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;margin:0 16px;border:1px solid var(--border-soft)}
#ivMonModal .ivmon-selfpreview.hidden-from-guests{border-color:#E0664D;opacity:.55}
#ivMonModal .ivmon-selfpreview video{width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}
#ivMonModal .ivmon-selfpreview .jv-tag{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:20px;font-size:10.5px;color:#fff}
#ivMonModal #ivMonSelfHideBtn{position:absolute;top:6px;right:6px;width:26px;height:26px;background:rgba(0,0,0,.55);border-color:transparent;color:#fff}
#ivMonModal .ivmon-selfwarn{margin:0 16px 12px;padding:10px 14px;background:#E0664D14;border:1px solid #E0664D40;color:#E0664D;border-radius:10px;font-size:12px;display:flex;align-items:center;gap:8px}