@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600&display=swap');

:root {
  --void: #060404;
  --void-2: #141414;
  --text: #F3F4F1;
  --muted: #9CA39D;
  --faint: #6B716C;
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);
  --panel: rgba(255, 255, 255, .035);
  --panel-2: rgba(255, 255, 255, .06);
  --field: rgba(255, 255, 255, .05);
  --field-hover: rgba(255, 255, 255, .07);
  --btn: rgba(255, 255, 255, .05);
  --btn-hover: rgba(255, 255, 255, .09);
  --row-hover: rgba(255, 255, 255, .02);
  --acid: #CBFF00;
  --acid-text: #CBFF00;
  --acid-glow: rgba(203, 255, 0, .16);
  --acid-line: rgba(203, 255, 0, .30);
  --on-acid: #101400;
  --live: #CBFF00;
  --down: #FF5F52;
  --wait: #F5B301;
  --ok-text: #E2FF7A;
  --err-text: #FF9C93;
  --rail-bg: #222222;
  --rail-text: #9CA39D;
  --aura: .85;
  --screen-bg: #000;
  --radius: 22px;
  --radius-s: 14px;
  /* Due voci: una per i titoli e i numeri, una per il testo. La gerarchia
     si legge anche senza colore, che è quello che serve su un pannello con
     molte scritte. */
  --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Public Sans', system-ui, sans-serif;
  color-scheme: dark;
}

[data-theme="light"] {
  --void: #F1F2ED;
  --void-2: #FFFFFF;
  --text: #14170F;
  --muted: #5A6057;
  --faint: #6E7468;   /* scurito: a 3,3:1 le etichette piccole non si leggevano */
  --line: rgba(20, 23, 15, .14);
  --line-soft: rgba(20, 23, 15, .08);
  /* Vetro anche qui: carta velata invece di bianco pieno, così le superfici
     restano appoggiate sullo sfondo e non ritagliate dentro. */
  --panel: rgba(255, 255, 255, .72);
  --panel-2: rgba(255, 255, 255, .55);
  --field: #FFFFFF;
  --field-hover: #FFFFFF;
  --btn: #FFFFFF;
  --btn-hover: #F1F2ED;
  --row-hover: rgba(20, 23, 15, .03);
  --acid: #CBFF00;
  --acid-text: #4C6D00;
  --acid-glow: rgba(203, 255, 0, .28);
  --acid-line: rgba(126, 173, 0, .55);
  --on-acid: #101400;
  --live: #5C8A00;
  --down: #C8342A;
  --wait: #8A6212;
  --ok-text: #3F6300;
  --err-text: #96271F;
  --rail-bg: #222222;
  --rail-text: #B7BDB3;
  --aura: .35;
  --screen-bg: #14170F;
  color-scheme: light;
}

* { box-sizing: border-box; }

/*
 * Un elemento nascosto resta nascosto.
 *
 * L'attributo "hidden" vale meno di qualsiasi stile che dica come mostrare un
 * elemento: bastava dare a un riquadro una disposizione — flessibile, a
 * griglia — perché ricomparisse anche quando doveva stare nascosto. È
 * successo con il riquadro "Carico…" della libreria, sempre visibile.
 */
[hidden] { display: none !important; }

h1, h2, h3,
.stat b, .cifra b, .kpi b,
.screen-card h3 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Aura sfocata di sfondo, come nella presentazione */
body::before {
  content: '';
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vmax 36vmax at 84% -4%, rgba(150, 190, 40, .26), transparent 62%),
    radial-gradient(34vmax 30vmax at 4% 98%, rgba(72, 112, 170, .20), transparent 66%),
    radial-gradient(46vmax 36vmax at 50% 104%, rgba(120, 150, 30, .22), transparent 66%);
  filter: blur(70px);
  opacity: var(--aura);
}

h1, h2, h3 { font-weight: 400; margin: 0 0 .45em; letter-spacing: -.01em; }
h1 { font-size: 1.85rem; line-height: 1.15; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; font-weight: 500; }
h1 em, h2 em { font-style: normal; color: var(--acid-text); }
p { margin: 0 0 1rem; max-width: 72ch; }
a { color: var(--acid-text); text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
a:hover { color: var(--acid-text); opacity: .8; }
:focus-visible { outline: 2px solid var(--acid-text); outline-offset: 3px; border-radius: 6px; }

/* ---------- marchio ---------- */

.logo-mark { display: block; text-decoration: none; padding: 2px 4px; }
.logo-mark img { display: block; width: 172px; max-width: 100%; height: auto; }
.logo-mark.large img { width: 240px; margin-bottom: 4px; }

/* ---------- struttura ---------- */

.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

/*
 * Menu laterale a scorrimento.
 *
 * Su un portatile lo schermo è basso e le ultime voci finivano sotto il bordo
 * senza modo di raggiungerle. Ora le voci scorrono, mentre marchio in alto e
 * scelta del tema in basso restano sempre al loro posto.
 */
.rail {
  padding: 24px 16px 16px;
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh; min-height: 0;
  background: var(--rail-bg);
  border-right: 1px solid rgba(255, 255, 255, .07);
}
.rail nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  margin: 0 -8px; padding: 0 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.rail nav::-webkit-scrollbar { width: 6px; }
.rail nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 99px; }
.rail .foot { flex: none; }
.nav-group {
  font-size: .68rem; font-weight: 500; letter-spacing: .14em; color: #7A7E78;
  padding: 18px 13px 8px;
}
.nav-group:first-child { padding-top: 4px; }
.rail nav a {
  color: #D0D4CD; padding: 9px 13px; border-radius: 11px;
  font-size: .87rem; font-weight: 700; letter-spacing: .005em;
  border: 1px solid transparent; display: flex; align-items: center; gap: 11px;
}
.rail nav a svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.rail nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.rail nav a.on { color: #16200A; background: var(--acid); border-color: var(--acid); }
.rail nav a.on svg { opacity: 1; }
.rail .foot { margin-top: auto; font-size: .8rem; color: var(--faint); line-height: 1.7; }

.main { padding: 30px 34px 70px; min-width: 0; }
.topline { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.topline .sub { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- pannelli ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/*
 * Reazione al passaggio del mouse.
 *
 * Due pixel di sollevamento, il bordo che si accende appena e un'ombra
 * morbida: si nota quando serve e non stanca alla ventesima volta. Chi ha
 * chiesto di ridurre le animazioni non ne vede nessuna.
 */
.panel:hover,
.screen-card:hover,
.cifra:hover {
  transform: translateY(-2px);
  border-color: var(--acid-line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), 0 0 0 1px var(--acid-glow);
}

[data-theme="light"] .panel:hover,
[data-theme="light"] .screen-card:hover,
[data-theme="light"] .cifra:hover {
  /* Su fondo chiaro un bordo acceso stanca: meglio l'ombra. */
  box-shadow: 0 14px 30px rgba(20, 23, 15, .12);
  border-color: rgba(76, 109, 0, .30);
}

.screen-card, .cifra {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.btn { transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary:hover { filter: brightness(1.05); box-shadow: 0 10px 26px var(--acid-glow); }

table.list tbody tr { transition: background .18s ease; }
.rail a, .scorciatoie a { transition: background .16s ease, color .16s ease, border-color .16s ease; }

/* Il pallino di chi è in onda respira: si capisce da lontano che trasmette */
.led.live { animation: respiro 2.8s ease-in-out infinite; }
@keyframes respiro {
  0%, 100% { box-shadow: 0 0 0 0 var(--acid-glow); }
  50%      { box-shadow: 0 0 0 6px rgba(203, 255, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .screen-card, .cifra, .btn, .led.live { transition: none; animation: none; }
  .panel:hover, .screen-card:hover, .cifra:hover, .btn:hover { transform: none; }
}
.panel + .panel { margin-top: 20px; }
.panel > h2 { margin-bottom: 14px; }

.grid { display: grid; gap: 18px; }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-items: stretch; }
.grid.cards .screen-card { height: 100%; }
/* I pulsanti restano in fondo, allineati fra una scheda e l'altra */
.screen-card .actions { margin-top: auto; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 15px 17px;
}
.stat b { display: block; font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.stat span { color: var(--muted); font-size: .84rem; }

/* ---------- schede schermo ---------- */

.screen-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; backdrop-filter: blur(10px);
}
.screen-card .glass {
  aspect-ratio: 16 / 9; background: var(--screen-bg) center/cover no-repeat; position: relative;
  display: grid; place-items: center; border-bottom: 1px solid var(--line-soft);
  /* Il riquadro tiene la sua forma qualunque cosa contenga: senza questo, un
     contenuto verticale allungava la scheda e rompeva l'allineamento. */
  overflow: hidden; min-height: 0;
}
/* Contenuto verticale: si vede intero, con le bande scure ai lati */
.screen-card .glass.portrait { background-size: contain; background-color: #080907; }
.screen-card .glass .noimg { color: #3E443F; font-size: .88rem; }
.screen-card .glass .off-badge {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .86); color: var(--faint); font-size: .88rem; letter-spacing: .04em;
}
.screen-card .body { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.screen-card .body h3 { margin: 0; }
.screen-card .meta { color: var(--muted); font-size: .84rem; }
.screen-card .actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px 16px; }

.led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.led.live { background: var(--live); box-shadow: 0 0 0 3px var(--acid-glow); }
.led.down { background: var(--down); box-shadow: 0 0 0 3px rgba(255, 95, 82, .16); }
.led.wait { background: var(--wait); box-shadow: 0 0 0 3px rgba(245, 179, 1, .16); }
.status-line { display: flex; align-items: center; gap: 9px; font-size: .88rem; }

/* ---------- tabelle ---------- */

table.list { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.list th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: .82rem;
  border-bottom: 1px solid var(--line); padding: 9px 11px; white-space: nowrap;
}
table.list td { border-bottom: 1px solid var(--line-soft); padding: 11px; vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list td.tight { width: 1%; white-space: nowrap; }
table.list tbody tr:hover td { background: var(--row-hover); }

/* ---------- moduli ---------- */

.stack { display: flex; flex-direction: column; gap: 15px; }
.row { display: flex; gap: 13px; flex-wrap: wrap; align-items: flex-end; }
label { display: block; font-size: .85rem; color: var(--muted); }

input[type=text], input[type=password], input[type=number], input[type=time], input[type=url],
input[type=search], input[type=file], select, textarea {
  width: 100%; margin-top: 5px; padding: 10px 12px; font: inherit; font-weight: 400; color: var(--text);
  background: var(--field); border: 1px solid var(--line); border-radius: 10px;
}
input[type=number] { max-width: 130px; }
textarea { min-height: 90px; }
select option { background: var(--void-2); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--acid-text); background: var(--field-hover); }
input::placeholder { color: var(--faint); }
input[type=checkbox] { accent-color: var(--acid); width: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--btn); color: var(--text); font: 400 .92rem/1 var(--font);
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--btn-hover); color: var(--text); }
.btn.primary { background: var(--acid); border-color: var(--acid); color: var(--on-acid); font-weight: 500; }
.btn.primary:hover { background: #D9FF3D; color: var(--on-acid); }
.btn.danger { color: var(--down); border-color: rgba(255, 95, 82, .35); }
.btn.danger:hover { background: rgba(255, 95, 82, .12); color: var(--down); }
.btn.small { padding: 7px 11px; font-size: .84rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.alert { border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; border: 1px solid; font-size: .92rem; }
.alert.ok { background: var(--acid-glow); border-color: var(--acid-line); color: var(--ok-text); }
.alert.err { background: rgba(255, 95, 82, .10); border-color: rgba(255, 95, 82, .35); color: var(--err-text); }
.alert.info { background: var(--panel-2); border-color: var(--line); color: var(--text); }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem;
  border: 1px solid var(--line); color: var(--muted); background: var(--panel-2);
}
.pill.acid { border-color: var(--acid-line); color: var(--acid-text); background: var(--acid-glow); }
.tagrow { display: flex; flex-wrap: wrap; gap: 5px; }
.tagrow a.pill:hover { border-color: var(--acid-line); color: var(--acid-text); text-decoration: none; }

.code-chip {
  display: inline-block; font-size: 1.15rem; letter-spacing: .22em; font-weight: 600; color: var(--acid-text);
  background: var(--acid-glow); border: 1px solid var(--acid-line);
  border-radius: 8px; padding: 3px 12px;
}

.muted { color: var(--faint); }
.nowrap { white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 20px 0; }
pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; overflow: auto; font-size: .85rem; }
code { font-size: .9em; color: var(--acid-text); }

/* barra filtri */
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); margin-bottom: 18px;
}
.filters label { flex: 0 1 180px; }
.filters .wide { flex: 1 1 240px; }

/* miniature */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.thumb { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.thumb .img { aspect-ratio: 16/9; background: var(--screen-bg) center/cover no-repeat; display: grid; place-items: center; color: #4A504B; font-size: .78rem; }
.thumb .cap { padding: 8px 10px; font-size: .78rem; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.thumb .cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- accesso e installazione ---------- */

.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 26px; }
.auth-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 34px; width: 100%; max-width: 440px; backdrop-filter: blur(14px);
}
.auth-card .lead { color: var(--muted); }
.auth-card .logo-mark { margin-bottom: 22px; }
.checklist { list-style: none; margin: 0 0 22px; padding: 0; font-size: .9rem; }
.checklist li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.checklist li span { font-size: .82rem; }
.checklist li.ok span { color: var(--acid-text); }
.checklist li.ko span { color: var(--down); }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .main { padding: 20px 16px 60px; }

  /*
   * Menu del telefono.
   *
   * In alto una barra sottile con il marchio e il pulsante del menu, sempre
   * in vista. Toccando il pulsante il menu si apre a tutto schermo, con le
   * stesse voci del computer in colonna, grandi abbastanza per un dito. Prima
   * le voci erano messe in fila orizzontale e finivano schiacciate fuori vista.
   */
  .rail {
    position: sticky; top: 0; z-index: 60; height: auto; min-height: 0;
    padding: 0; gap: 0; display: block; overflow: visible;
    background: var(--rail-bg); border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .rail-testa { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
  .rail-testa .logo-mark img { width: 128px; }
  .menu-mobile {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #F2F3F1;
  }
  .menu-mobile svg { width: 22px; height: 22px; }
  .menu-mobile .aperto-si { display: none; }
  .rail.aperto .menu-mobile .aperto-si { display: inline; }
  .rail.aperto .menu-mobile .aperto-no { display: none; }

  .rail nav, .rail .theme-switch, .rail .foot { display: none; }
  .rail.aperto nav {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; left: 0; right: 0; top: 65px; bottom: 132px;
    margin: 0; padding: 8px 14px 14px; overflow-y: auto; background: var(--rail-bg);
  }
  .rail.aperto nav a { padding: 13px 14px; font-size: 1rem; }
  .rail.aperto .theme-switch {
    display: flex; position: fixed; left: 14px; right: 14px; bottom: 74px; margin: 0;
  }
  .rail.aperto .foot {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 64px;
    padding: 12px 18px; background: var(--rail-bg); border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .rail.aperto::after {
    content: ""; position: fixed; left: 0; right: 0; top: 65px; bottom: 0; z-index: -1; background: var(--rail-bg);
  }
  body.menu-aperto { overflow: hidden; }
}

/* Sul computer il pulsante del menu non serve */
@media (min-width: 901px) {
  .menu-mobile { display: none; }
  .rail-testa { flex: none; }
}

/* La barra del menu resta scura anche nel tema chiaro: il marchio bianco è
   quello giusto in entrambi i casi. */
[data-theme="light"] .rail { background: var(--void-2-fisso, #12141A); }
[data-theme="light"] .rail nav a { color: #C7CEC2; }
[data-theme="light"] .rail nav a:hover { background: rgba(255, 255, 255, .08); color: #FFF; }
[data-theme="light"] .rail nav a.on { background: var(--acid); color: #0B0D10; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .rail nav a, table.list tbody tr { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
}


/* ---------- avanzamento aggiornamento ---------- */

.progress-box { display: none; margin-top: 18px; }
.progress-box.on { display: block; }
.progress-track {
  height: 10px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0; background: var(--live); border-radius: 999px;
  transition: width .2s ease;
}
.progress-box.working .progress-fill { background: var(--live); }
.progress-label { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
.progress-box.failed .progress-fill { background: var(--down); }


/* ---------- anteprima video nelle schede ---------- */

.screen-card .glass video.preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: var(--screen-bg);
}
.screen-card .glass.portrait video.preview { object-fit: contain; background: #080907; }

/* ---------- interruttore chiaro / scuro ---------- */

.theme-switch {
  display: flex; gap: 4px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .10);
}
.theme-switch button {
  flex: 1; border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 6px 8px; font: 400 .8rem/1 var(--font); color: #9CA39D;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.theme-switch button.on { background: var(--acid); color: #101400; font-weight: 500; }

/* ---------- editor playlist ---------- */

.pl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-toolbar .right { margin-left: auto; display: flex; gap: 6px; }
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.view-switch button {
  border: 0; background: var(--btn); color: var(--muted); cursor: pointer;
  padding: 8px 13px; font: 400 .86rem/1 var(--font);
}
.view-switch button.on { background: var(--acid); color: var(--on-acid); font-weight: 500; }

.pl-items { list-style: none; margin: 0; padding: 0; }
.pl-items.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

.pl-item {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; margin-bottom: 10px;
}
.pl-items.grid .pl-item { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 10px; }
.pl-item.dragging { opacity: .4; }
.pl-item.over { border-color: var(--acid-text); }
.pl-item .grip {
  cursor: grab; color: var(--faint); font-size: 1.1rem; line-height: 1; padding: 0 4px;
  user-select: none; flex: none;
}
.pl-item .shot {
  width: 128px; aspect-ratio: 16/9; border-radius: 8px; flex: none;
  background: var(--screen-bg) center/cover no-repeat; display: grid; place-items: center;
  color: #6B716C; font-size: .74rem; overflow: hidden;
}
.pl-items.grid .pl-item .shot { width: 100%; }
.pl-item .shot video { width: 100%; height: 100%; object-fit: cover; }
.pl-item .info { flex: 1; min-width: 0; }
.pl-item .info b { display: block; font-weight: 400; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-item .info span { color: var(--faint); font-size: .8rem; }
.pl-item .dur { flex: none; display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.pl-item .dur input { width: 74px; margin: 0; }
.pl-item .tools { flex: none; display: flex; gap: 6px; }
.pl-item .row2 { display: contents; }
.pl-items.grid .pl-item .row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-hint { color: var(--faint); font-size: .84rem; margin: 0 0 12px; }
.pl-dirty { display: none; }
.pl-dirty.on { display: inline-flex; }

/* La barra laterale resta scura in entrambi i temi:
   i suoi collegamenti devono restare chiari. */
.rail a { color: #CBFF00; }
.rail .foot { color: #8A9086; }

/* ---------- editor del menu ---------- */

.menu-section {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px;
  background: var(--panel-2);
}
.dishes { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.dish {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px; background: var(--panel);
}
.dish-photo {
  width: 130px; aspect-ratio: 4/3; flex: none; border-radius: 10px; overflow: hidden;
  background: var(--screen-bg); display: grid; place-items: center; color: var(--faint); font-size: .76rem;
}
.dish-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish-fields { flex: 1; min-width: 0; }

/* ---------- editor dei template ---------- */

.tpl-frame { display: flex; justify-content: center; }
.tpl-stage {
  position: relative; width: 100%; max-width: 100%; aspect-ratio: 16/9; background: #000;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; user-select: none;
  touch-action: none;
}
.tpl-stage.portrait { aspect-ratio: 9/16; max-width: 420px; }

.tpl-zone {
  position: absolute; border: 2px solid var(--acid); border-radius: 8px;
  cursor: move; overflow: hidden; box-sizing: border-box;
}
.tpl-zone.sel { box-shadow: 0 0 0 2px rgba(203, 255, 0, .45); }
.tpl-zone .tpl-live { position: absolute; inset: 0; overflow: hidden; background: #0A0B09; pointer-events: none; }
.tpl-zone .tpl-live iframe {
  position: absolute; top: 0; left: 0; width: 400%; height: 400%;
  transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none;
}
.tpl-zone .tpl-void { position: absolute; inset: 0; display: grid; place-items: center; color: #4A504B; font-size: .78rem; }
.tpl-stage.no-live .tpl-live { display: none; }
.tpl-stage.no-live .tpl-zone { background: rgba(203, 255, 0, .12); }

.tpl-zone .lab {
  position: absolute; left: 8px; top: 6px; font-size: .78rem; color: #EAFFA8; font-weight: 500;
  text-shadow: 0 1px 3px #000; pointer-events: none; z-index: 3;
}
.tpl-zone .src {
  position: absolute; left: 8px; bottom: 6px; right: 8px; font-size: .72rem; color: #D6DED2;
  text-shadow: 0 1px 3px #000; pointer-events: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; z-index: 3;
}

/* maniglie su tutti i lati e gli angoli */
.tpl-zone .grab { position: absolute; z-index: 4; }
.tpl-zone .grab::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 11px; height: 11px; border-radius: 3px; background: var(--acid);
  border: 1px solid rgba(0, 0, 0, .5);
}
.tpl-zone .g-n, .tpl-zone .g-s { left: 50%; width: 22px; height: 14px; margin-left: -11px; }
.tpl-zone .g-e, .tpl-zone .g-w { top: 50%; width: 14px; height: 22px; margin-top: -11px; }
.tpl-zone .g-n { top: -7px; cursor: ns-resize; }
.tpl-zone .g-s { bottom: -7px; cursor: ns-resize; }
.tpl-zone .g-w { left: -7px; cursor: ew-resize; }
.tpl-zone .g-e { right: -7px; cursor: ew-resize; }
.tpl-zone .g-nw, .tpl-zone .g-ne, .tpl-zone .g-sw, .tpl-zone .g-se { width: 16px; height: 16px; }
.tpl-zone .g-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.tpl-zone .g-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.tpl-zone .g-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.tpl-zone .g-se { right: -8px; bottom: -8px; cursor: nwse-resize; }

.tpl-legend { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; font-size: .84rem; color: var(--muted); }
.tpl-legend .right { margin-left: auto; }

/* ---------- schede e catalogo applicazioni ---------- */

.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 20px; }
.tabs button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  padding: 9px 16px; border-radius: 9px; font: 400 .93rem/1 var(--font);
}
.tabs button.on { background: var(--acid); color: var(--on-acid); font-weight: 500; }

.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.app-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.app-card.store { justify-content: space-between; }
.app-card-main { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--text); }
.app-card-main:hover { text-decoration: none; }
.app-ico {
  width: 54px; height: 54px; flex: none; border-radius: 14px; padding: 7px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
}
.app-ico svg { width: 100%; height: 100%; display: block; }
.app-txt { min-width: 0; }
.app-txt b { display: block; font-weight: 500; font-size: 1.05rem; }
.app-txt span { display: block; color: var(--muted); font-size: .87rem; margin-top: 3px; line-height: 1.4; }
.app-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.app-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: auto; }

.store-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.store-head h2 { margin: 0; }
.store-head input { flex: 1 1 260px; max-width: 420px; margin: 0; }

.pager { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 18px; }
.pager .btn.disabled { opacity: .4; pointer-events: none; }

/* ---------- mappa degli schermi ---------- */

.map-box { width: 100%; height: 420px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.leaflet-container { background: var(--panel-2); font-family: var(--font); }
[data-theme] .leaflet-tile, :root .leaflet-tile { filter: none; }
:root .map-box .leaflet-tile-pane { filter: grayscale(.35) brightness(.72) contrast(1.05); }
[data-theme="light"] .map-box .leaflet-tile-pane { filter: none; }
.map-box { height: 460px; }
.map-marker { background: none; border: 0; }
.map-marker svg { display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.map-marker:hover svg { transform: translateY(-2px); }

/* Alone che pulsa sugli schermi accesi */
.pin-pulse {
  position: absolute; left: 50%; top: 44px; width: 14px; height: 14px; margin-left: -7px; margin-top: -7px;
  border-radius: 50%; background: rgba(203, 255, 0, .45);
}
@media (prefers-reduced-motion: no-preference) {
  .pin-pulse { animation: pinPulse 2.4s ease-out infinite; }
  .map-marker svg { transition: transform .15s ease; }
}
@keyframes pinPulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

.leaflet-popup-content-wrapper {
  background: var(--void-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.leaflet-popup-tip { background: var(--void-2); border: 1px solid var(--line); }
.leaflet-popup-content { font-family: var(--font); font-size: .9rem; margin: 12px 14px; font-weight: 300; }
.leaflet-popup-content b { display: block; font-weight: 500; font-size: 1rem; margin-bottom: 4px; }
.leaflet-popup-content .pop-place { display: block; color: var(--muted); font-size: .84rem; }
.leaflet-popup-content .pop-state { display: block; margin-top: 6px; font-size: .84rem; }
.leaflet-popup-content .pop-state.live { color: var(--live); }
.leaflet-popup-content .pop-state.down { color: var(--down); }
.leaflet-popup-content .pop-state.wait { color: var(--wait); }
.leaflet-popup-content .pop-link { display: inline-block; margin-top: 8px; }
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-control-zoom a { background: var(--void-2); color: var(--text); border-color: var(--line); }
.leaflet-control-zoom a:hover { background: var(--panel-2); }


/* ---------- barra superiore ---------- */

.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line-soft);
}
.topsearch {
  flex: 1 1 320px; max-width: 520px; position: relative; display: flex; align-items: center;
}
.topsearch svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--faint); pointer-events: none; }
.topsearch input {
  margin: 0; padding: 12px 16px 12px 48px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line); font-size: .95rem;
}
.topactions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  font-size: .82rem; font-weight: 500; letter-spacing: .04em;
}
.topactions .btn { padding: 12px 20px; border-radius: 14px; }

/* ---------- riquadro delle cose da sistemare ---------- */

.attention {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid rgba(245, 179, 1, .45); border-left: 6px solid var(--wait);
  background: rgba(245, 179, 1, .08); border-radius: 18px; padding: 20px 24px; margin-bottom: 26px;
}
.attention h3 { margin: 0 0 4px; color: #FFD678; font-weight: 500; }
[data-theme="light"] .attention h3 { color: #8A6100; }
.attention p { margin: 0; color: var(--muted); font-size: .93rem; max-width: none; }
.attention .btn { margin-left: auto; }

/* ---------- finestre di dialogo ---------- */

.modal-back {
  position: fixed; inset: 0; background: rgba(4, 6, 3, .72); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 24px; z-index: 60;
}
.modal-back.on { display: flex; }
.modal {
  background: var(--void-2); border: 1px solid var(--line); border-radius: 22px;
  width: 100%; max-width: 620px; max-height: 88vh; overflow: auto; padding: 28px 30px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.modal h2 { margin: 0 0 6px; }
.modal .lead { color: var(--muted); font-size: .93rem; margin-bottom: 22px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 26px; }
.modal-close {
  float: right; border: 0; background: none; color: var(--muted); font-size: 1.4rem;
  cursor: pointer; line-height: 1; padding: 0 4px;
}
/* Il disegno della croce ha sempre una misura: senza, riempiva la finestra */
.modal-close svg { width: 20px; height: 20px; display: block; }

/* schede di scelta dentro le finestre */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.choice {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px; background: var(--panel);
}
.choice:has(input:checked) { border-color: var(--acid); background: var(--acid-glow); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .ico { height: 62px; display: grid; place-items: center; color: var(--acid-text); }
.choice .ico svg { width: 46px; height: 46px; }
.choice b { font-weight: 500; font-size: .96rem; }
.choice span { color: var(--muted); font-size: .82rem; line-height: 1.4; }

/* ---------- elenchi con selezione ---------- */

.list-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.list-toolbar .count { color: var(--muted); font-size: .9rem; }
.bulkbar {
  display: none; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--acid-glow); border: 1px solid var(--acid-line);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
}
.bulkbar.on { display: flex; }
.bulkbar b { font-weight: 500; }
table.list td .subtle { color: var(--faint); font-size: .82rem; display: block; margin-top: 2px; }


.map-msg {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 500;
  background: rgba(6, 6, 4, .86); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; color: var(--muted); font-size: .86rem;
}
.map-box { position: relative; }

/* ---------- cartelle della libreria ---------- */

.crumbs {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; font-size: .92rem; color: var(--faint);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover, .crumbs .on { color: var(--acid-text); }
.crumb-search { margin-left: auto; }
.crumb-search input { margin: 0; width: 240px; border-radius: 12px; }

.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 22px; }
.folder {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--text);
}
.folder:hover { border-color: var(--acid-line); }
.folder svg { width: 30px; height: 30px; flex: none; color: var(--acid-text); }
.folder b { display: block; font-weight: 500; font-size: .95rem; }
.folder i { font-style: normal; color: var(--muted); font-size: .8rem; }

/* selezione dei contenuti */
.thumb.pick { cursor: pointer; position: relative; }
.thumb.pick .img { position: relative; }
.thumb.pick .img input[type=checkbox] {
  position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; margin: 0; z-index: 2;
}
.thumb.pick:has(input:checked) { border-color: var(--acid); box-shadow: 0 0 0 2px var(--acid-glow); }

/* ---------- tabella dispositivi ---------- */

.table-wrap { overflow-x: auto; }
table.list.devices td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.state-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  font-size: .82rem; border: 1px solid var(--line); background: var(--panel-2); white-space: nowrap;
}
.state-pill.live { border-color: rgba(203, 255, 0, .35); color: var(--acid-text); }
.state-pill.down { border-color: rgba(255, 95, 82, .35); color: var(--down); }
.state-pill.wait { border-color: rgba(245, 179, 1, .35); color: var(--wait); }

/* ---------- tipo di dispositivo ---------- */

.dev-type { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dev-icon { width: 20px; height: 20px; flex: none; color: var(--muted); }
.dev-type:hover .dev-icon { color: var(--acid-text); }

/* ---------- trascinamento nel menu ---------- */

.menu-section { position: relative; }
.menu-section.dragging, .dish.dragging { opacity: .35; }
.menu-section.over { border-color: var(--acid); box-shadow: 0 0 0 2px var(--acid-glow); }
.dish { position: relative; }
.dish.over { border-color: var(--acid); }
.grip {
  cursor: grab; color: var(--faint); font-size: 1.15rem; line-height: 1;
  user-select: none; flex: none; padding: 4px 2px;
}
.grip:active { cursor: grabbing; }
.sec-grip { align-self: center; }
.dish-grip { align-self: center; margin-right: -4px; }
.dishes.drop-here { outline: 2px dashed var(--acid-line); outline-offset: 6px; border-radius: 12px; }

/* ---------- schede dei codici QR ---------- */

.qr-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  margin-bottom: 14px; background: var(--panel-2);
}

/* ---------- schermo disegnato con dentro il contenuto ---------- */

.screen-stage { display: flex; justify-content: center; padding: 10px 0 6px; }
.screen-frame { display: flex; flex-direction: column; align-items: center; }

/* Cornice sottile e uniforme: sono schermi professionali da parete,
   non monitor da scrivania. Nessun piedistallo. */
.screen-frame .bezel {
  position: relative; background: #000; overflow: hidden;
  border: 9px solid #141513; border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55),
              0 0 0 1px rgba(255, 255, 255, .07),
              inset 0 0 0 1px rgba(0, 0, 0, .9);
}
.screen-frame .bezel iframe {
  position: absolute; top: 0; left: 0; border: 0; display: block;
  transform-origin: 0 0; pointer-events: none;
}
.screen-frame .nosig {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #4A504B; font-size: .88rem;
}

.screen-frame.tv_landscape .bezel { width: 592px; height: 333px; }
.screen-frame.tv_landscape .bezel iframe { width: 1920px; height: 1080px; transform: scale(.30833); }

.screen-frame.tv_portrait .bezel { width: 270px; height: 480px; }
.screen-frame.tv_portrait .bezel iframe { width: 1080px; height: 1920px; transform: scale(.25); }

/* Il totem ha la colonna: cornice più alta sotto lo schermo e basamento */
.screen-frame.totem .bezel {
  width: 270px; height: 480px;
  border: 16px solid #171816; border-top-width: 40px; border-bottom-width: 88px;
  border-radius: 12px 12px 4px 4px;
}
.screen-frame.totem .bezel iframe { width: 1080px; height: 1920px; transform: scale(.25); }
.screen-frame.totem .base {
  width: 320px; height: 12px; border-radius: 3px;
  background: linear-gradient(#1B1C1A, #0E0F0D);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

/* ---------- ingrandimento dei contenuti in libreria ---------- */

.zoom-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(8, 8, 6, .72); color: var(--text); cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity .15s ease;
}
.thumb:hover .zoom-btn, .zoom-btn:focus { opacity: 1; }
.zoom-btn svg { width: 17px; height: 17px; }

.viewer {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 3vh 3vw;
  background: rgba(4, 5, 3, .88); backdrop-filter: blur(6px);
}
.viewer.on { display: flex; }
.viewer figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.viewer img, .viewer video {
  max-width: 92vw; max-height: 84vh; border-radius: 12px; display: block;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.viewer figcaption { color: var(--muted); font-size: .9rem; margin-top: 14px; }
.viewer .close {
  position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.viewer .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 1.3rem; cursor: pointer;
}
.viewer .prev { left: 24px; }
.viewer .next { right: 24px; }

/* ---------- scheda dispositivo ---------- */

.crumb-back { display: inline-block; color: var(--faint); font-size: .92rem; margin-bottom: 8px; }
.dev-title { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; }
.dev-title .state-pill { font-size: .84rem; }
.dev-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

.dev-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.dev-main > .panel:first-child, .dev-side > .panel:first-child { margin-top: 0; }
.dev-side { position: sticky; top: 24px; }
@media (max-width: 1180px) {
  .dev-grid { grid-template-columns: minmax(0, 1fr); }
  .dev-side { position: static; }
}

.onair { margin: 18px 0 0; text-align: center; font-size: 1rem; color: var(--text); }
.cmd-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cmd-row form { display: inline; }

/* scelta del contenuto */
.source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.source-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  background: var(--panel-2); cursor: pointer; display: block; margin: 0;
}
.source-card:has(input:checked) { border-color: var(--acid); background: var(--acid-glow); }
.source-card input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.source-card b { display: block; font-weight: 500; font-size: 1.05rem; margin-bottom: 10px; }
.source-card:has(input:checked) b { color: var(--acid-text); }
.source-card select { margin: 0; }

/* fasce orarie */
.sched { margin-top: 16px; }
.sched-head { display: flex; align-items: center; gap: 14px; font-size: .92rem; margin-bottom: 8px; }
.sched-bar {
  position: relative; height: 22px; border-radius: 11px;
  background: var(--panel-2); border: 1px solid var(--line); overflow: hidden;
}
.sched-bar i { position: absolute; top: 0; bottom: 0; background: var(--acid); display: block; }
.sched-scale { display: flex; justify-content: space-between; color: var(--faint); font-size: .76rem; margin-top: 5px; }

/* elenco di dati */
.factlist { list-style: none; margin: 0; padding: 0; }
.factlist li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: .92rem;
}
.factlist li:last-child { border-bottom: 0; }
.factlist li span { color: var(--text); text-align: right; }
.factlist li span.good { color: var(--acid-text); }
.factlist li span.bad { color: var(--down); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  color: var(--muted); font-size: .9rem; line-height: 1.45;
}
.timeline li:last-child { border-bottom: 0; }
.timeline li span { color: var(--faint); font-size: .8rem; display: inline-block; min-width: 88px; }
.timeline li em { font-style: normal; font-size: .8rem; margin-left: 6px; }

/* la tendina della scheda non scelta resta smorzata */
.source-card select.spento { opacity: .45; }
.source-card:has(input:checked) select.spento { opacity: 1; }

/* la lente resta visibile anche sulle immagini scure */
.zoom-btn {
  opacity: 1; background: var(--acid); color: var(--on-acid);
  border-color: rgba(0, 0, 0, .35); box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.thumb:hover .zoom-btn { transform: scale(1.06); }

/* ---------- area di lavoro delle playlist ---------- */

.pl-workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .pl-workspace { grid-template-columns: minmax(0, 1fr); } }

.pl-side {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; position: sticky; top: 24px;
}
.pl-side-top { display: flex; flex-direction: column; gap: 10px; }
.pl-side-top input { margin: 0; border-radius: 12px; }
.pl-side-label {
  margin: 22px 0 10px; font-size: .7rem; letter-spacing: .14em; color: var(--faint); font-weight: 500;
}
.pl-list { display: flex; flex-direction: column; gap: 2px; }
.pl-list a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px;
  color: var(--text); font-size: .93rem;
}
.pl-list a:hover { background: var(--panel-2); }
.pl-list a.on { background: var(--acid-glow); color: var(--acid-text); }
.pl-list a i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pl-list a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-list a em { font-style: normal; color: var(--faint); font-size: .78rem; }

.pl-head { margin-bottom: 18px; }
.pl-title { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.pl-title i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pl-title h1 { margin: 0; }
.pl-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  font-size: .84rem; color: var(--muted); background: var(--panel-2);
}
.chip.acid { border-color: var(--acid-line); color: var(--acid-text); background: var(--acid-glow); }
.pl-actions { display: flex; gap: 8px; align-items: center; }

.menu-drop { position: relative; }
.menu-drop summary { list-style: none; cursor: pointer; padding: 10px 16px; }
.menu-drop summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 280px;
  background: var(--void-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
}

table.list.pl-table td { vertical-align: middle; }
.pl-table .num { color: var(--faint); font-size: .85rem; white-space: nowrap; }
.pl-table .num .grip { margin-right: 6px; }
.pl-table .mini {
  width: 62px; height: 40px; border-radius: 8px; background: var(--screen-bg) center/cover no-repeat;
  display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-soft);
}
.pl-table .mini video { width: 100%; height: 100%; object-fit: cover; }
.pl-table .mini .acid-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--acid); }
.pl-table tr.pl-item { cursor: default; }
.pl-table tr.dragging { opacity: .35; }
.pl-table tr.over td { box-shadow: inset 0 2px 0 var(--acid); }

.pl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }

/* ---------- scelta del contenuto da mandare ---------- */

.step-q { font-size: 1.06rem; color: var(--text); margin: 0 0 14px; }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pick {
  position: relative; display: block; cursor: pointer; margin: 0;
  border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  background: var(--panel-2); text-align: center;
}
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .ico { display: block; color: var(--muted); margin-bottom: 12px; }
.pick .ico svg { width: 34px; height: 34px; }
.pick b { display: block; font-weight: 500; font-size: 1.05rem; }
.pick .hint { display: block; color: var(--muted); font-size: .85rem; margin-top: 5px; line-height: 1.4; }
.pick.on, .pick:has(input:checked) {
  border-color: var(--acid); background: var(--acid-glow);
}
.pick:has(input:checked) .ico, .pick:has(input:checked) b { color: var(--acid-text); }
.pick:has(input:checked)::after {
  content: '✓'; position: absolute; top: 14px; right: 16px;
  color: var(--acid-text); font-size: 1.1rem;
}

.pick-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px;
  margin-top: 22px; align-items: start;
}
@media (max-width: 860px) { .pick-body { grid-template-columns: minmax(0, 1fr); } }
.pick-choices label { color: var(--muted); font-size: .88rem; }
.pick-choices select { margin-top: 6px; }

.pick-preview { margin: 0; text-align: center; }
.mini-screen {
  position: relative; width: 100%; aspect-ratio: 16/9; margin: 0 auto;
  background: #000; border: 7px solid #141513; border-radius: 6px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
.mini-screen.portrait { aspect-ratio: 9/16; max-width: 190px; }
.mini-screen iframe {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; border: 0; pointer-events: none;
}
.mini-screen.portrait iframe { width: 1080px; height: 1920px; }
.mini-screen .empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #4A504B; font-size: .82rem; line-height: 1.5; background: #0A0B09;
}
.pick-preview figcaption { color: var(--muted); font-size: .86rem; margin-top: 12px; }

/* ---------- editor playlist: tabella, griglia, libreria ---------- */

.pl-list a.archive { color: var(--muted); font-size: .86rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; margin-bottom: 6px; }

table.list.pl-table { table-layout: fixed; }
.pl-table th { font-weight: 500; color: var(--faint); }
.pl-table td { vertical-align: middle; }
.pl-table .num { color: var(--faint); font-size: .85rem; white-space: nowrap; }
.pl-table .num .grip { margin-right: 8px; cursor: grab; }
.pl-table .name { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.pl-table .mini {
  position: relative; width: 72px; height: 41px; border-radius: 7px; overflow: hidden;
  background: var(--screen-bg) center/cover no-repeat; border: 1px solid var(--line-soft);
}
.pl-table .mini video { width: 100%; height: 100%; object-fit: cover; }
.pl-table .mini iframe {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  transform: scale(.0375); transform-origin: 0 0; border: 0; pointer-events: none;
}
.pl-table tr.dragging { opacity: .35; }
.pl-table tr.over td { box-shadow: inset 0 2px 0 var(--acid); }

/* vista a griglia */
.pl-grid-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.pl-card {
  margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--panel-2); cursor: grab;
}
.pl-card.dragging { opacity: .35; }
.pl-card.over { border-color: var(--acid); box-shadow: 0 0 0 2px var(--acid-glow); }
.pl-card .shot {
  position: relative; aspect-ratio: 16/9; background: var(--screen-bg) center/cover no-repeat;
  overflow: hidden;
}
.pl-card .shot video { width: 100%; height: 100%; object-fit: cover; }
.pl-card .shot iframe {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; border: 0; pointer-events: none; transform: scale(.109);
}
.pl-card .pos {
  position: absolute; left: 8px; top: 8px; z-index: 2; min-width: 24px; height: 24px;
  border-radius: 12px; background: rgba(6, 6, 4, .78); color: var(--acid-text);
  display: grid; place-items: center; font-size: .78rem; padding: 0 7px;
}
.pl-card figcaption { padding: 11px 13px; }
.pl-card figcaption b { display: block; font-weight: 400; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card figcaption span { font-size: .78rem; }

.view-switch { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line); }
.view-switch button { border: 0; background: none; color: var(--muted); padding: 7px 14px; border-radius: 9px; cursor: pointer; font: 400 .85rem var(--font); }
.view-switch button.on { background: var(--acid); color: var(--on-acid); font-weight: 500; }

/* trascinamento dalla libreria alla sequenza */
.lib-item { cursor: grab; }
.lib-item.used { opacity: .55; }
.lib-item .used-flag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; font-size: .7rem;
  background: rgba(6, 6, 4, .8); color: var(--acid-text); padding: 3px 8px; border-radius: 8px;
}
[data-drop-target].drop-ready { outline: 2px dashed var(--acid); outline-offset: -8px; }
.drop-hint { padding: 26px 0; text-align: center; }

/* la tabella dei contenuti non deve mai scivolare fuori colonna */
table.list.pl-table { table-layout: fixed; width: 100%; }
.pl-table th, .pl-table td { overflow: hidden; }
.pl-table th:first-child, .pl-table td:first-child { text-align: left; }
.pl-table .name { white-space: nowrap; }

/* ---------- palinsesto ---------- */

.slot-day { margin-top: 16px; }
.slot-bar {
  position: relative; height: 30px; border-radius: 15px;
  background: var(--panel-2); border: 1px solid var(--line); overflow: hidden;
}
.slot-bar i { position: absolute; top: 0; bottom: 0; display: block; opacity: .85; }
.slots-table tr.now td { background: var(--acid-glow); }
.slots-table tr.now td:first-child { box-shadow: inset 3px 0 0 var(--acid); }
.slot-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

.days-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.days-pick label { position: relative; margin: 0; cursor: pointer; }
.days-pick input { position: absolute; opacity: 0; pointer-events: none; }
.days-pick span {
  display: block; padding: 8px 13px; border-radius: 10px; font-size: .85rem;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
}
.days-pick input:checked + span {
  border-color: var(--acid); background: var(--acid-glow); color: var(--acid-text);
}

/* ---------- sequenza della playlist, allineata a griglia ---------- */

.pl-rows { --pl-cols: 62px 104px minmax(0, 1fr) 130px 168px 104px; }
.pl-rowhead, .pl-row {
  display: grid; grid-template-columns: var(--pl-cols);
  align-items: center; gap: 14px;
}
.pl-rowhead {
  padding: 0 6px 12px; border-bottom: 1px solid var(--line);
  color: var(--faint); font-size: .8rem; font-weight: 500;
}
.pl-row {
  padding: 12px 6px; border-bottom: 1px solid var(--line-soft);
  background: transparent;
}
.pl-row:last-child { border-bottom: 0; }
.pl-row:hover { background: var(--row-hover); }
.pl-row.dragging { opacity: .35; }
.pl-row.over { box-shadow: inset 0 2px 0 var(--acid); }

.pl-row .c-num { color: var(--faint); font-size: .85rem; white-space: nowrap; }
.pl-row .c-num .grip { margin-right: 8px; cursor: grab; }
.pl-row .c-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row .c-type, .pl-row .c-dur, .pl-row .c-act { white-space: nowrap; }
.pl-row .c-dur input { width: 84px; margin: 0; display: inline-block; }
.pl-row .mini {
  position: relative; display: block; width: 88px; height: 50px; border-radius: 7px;
  overflow: hidden; background: var(--screen-bg) center/cover no-repeat;
  border: 1px solid var(--line-soft);
}
.pl-row .mini video { width: 100%; height: 100%; object-fit: cover; }
.pl-row .mini iframe {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  transform: scale(.0458); transform-origin: 0 0; border: 0; pointer-events: none;
}
@media (max-width: 820px) {
  .pl-rows { --pl-cols: 46px 76px minmax(0, 1fr) 120px; }
  .pl-rowhead span:nth-child(5), .pl-rowhead span:nth-child(6),
  .pl-row .c-dur, .pl-row .c-act { display: none; }
}

/* ---------- meno testo mandato a capo ---------- */

.chip, .pill, .btn, .state-pill, .factlist li span, .sched-head { white-space: nowrap; }
.pl-stats { flex-wrap: wrap; }
table.list td.nowrap, table.list th { white-space: nowrap; }
.folder b, .app-txt b, .thumb .cap span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- saluto nella barra in alto ---------- */

.greet { display: flex; flex-direction: column; line-height: 1.35; text-align: right; margin-right: 4px; }
.greet b { font-weight: 500; font-size: .95rem; white-space: nowrap; }
.greet i { font-style: normal; color: var(--muted); font-size: .82rem; white-space: nowrap; }
@media (max-width: 900px) { .greet { display: none; } }

/* ---------- editor della giornata ---------- */

.day-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.day-tabs button {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  padding: 8px 15px; border-radius: 10px; cursor: pointer; font: 400 .86rem var(--font);
}
.day-tabs button.on { background: var(--acid); color: var(--on-acid); border-color: var(--acid); font-weight: 500; }

.day-track {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel-2); padding: 34px 0 12px; overflow: hidden; user-select: none;
}
.day-track .hours { position: absolute; inset: 0; pointer-events: none; }
.day-track .hours i {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft);
}
.day-track .hours b {
  position: absolute; top: 8px; transform: translateX(-50%);
  font-size: .7rem; font-weight: 400; color: var(--faint);
}
.day-track .lane {
  position: relative; height: 52px; margin: 0 10px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft);
}
.day-track .lane:last-of-type { margin-bottom: 0; }
.day-track .lane-name {
  position: absolute; left: 10px; top: -1px; transform: translateY(-100%);
  font-size: .72rem; color: var(--faint); letter-spacing: .06em;
}
.day-track .lane.content { height: 66px; }

.block {
  position: absolute; top: 4px; bottom: 4px; border-radius: 8px; cursor: grab;
  display: flex; flex-direction: column; justify-content: center; padding: 0 12px;
  overflow: hidden; color: #14180F; font-size: .82rem; line-height: 1.25;
}
.block.sel { box-shadow: 0 0 0 2px var(--text), 0 0 0 4px rgba(0, 0, 0, .35); z-index: 3; }
.block b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block span { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .edge {
  position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize;
}
.block .edge.l { left: 0; } .block .edge.r { right: 0; }
.block.dragging { opacity: .8; cursor: grabbing; }

.now-line { position: absolute; top: 26px; bottom: 8px; width: 2px; background: var(--down); z-index: 4; }
.now-line::after {
  content: 'adesso'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: .68rem; color: var(--down); white-space: nowrap;
}

.day-legend { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: .84rem; color: var(--muted); }
.day-legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }
.day-legend .sw.power { background: rgba(203, 255, 0, .55); }
.day-legend .sw.base { background: var(--panel); border: 1px solid var(--line); }

.day-editor {
  margin-top: 18px; padding: 18px; border: 1px solid var(--acid-line);
  border-radius: 16px; background: var(--acid-glow);
}

.rolelist { list-style: none; margin: 0; padding: 0; }
.rolelist li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.rolelist li:last-child { border-bottom: 0; }
.rolelist b { display: block; font-weight: 500; margin-bottom: 3px; }
.rolelist span { color: var(--muted); font-size: .9rem; line-height: 1.5; }


/* ---------- rifiniture tipografiche e di allineamento ---------- */

/* Il testo giustificato apre fiumi bianchi e su schermo si legge peggio:
   in tutto il pannello l'allineamento è a sinistra. */
body, p, li, td, th, label, .lead, .sub, figcaption { text-align: left; }
p, li, .lead, .sub, .muted { text-wrap: pretty; }
h1, h2, h3, .pl-title h1, .dev-title { text-wrap: balance; }

/* Righe di lettura non troppo lunghe: oltre i settanta caratteri l'occhio si perde */
.panel > p, .lead, .sub, .rolelist span, .app-txt span { max-width: 72ch; }

/* Numeri e orari incolonnati, con cifre della stessa larghezza */
.factlist li span, .pl-row .c-dur, .sched-scale, .day-track .hours b,
table.list td.nowrap, .chip, .timeline li span { font-variant-numeric: tabular-nums; }

/* Titoli con lo stesso ritmo verticale ovunque */
.panel h2 { margin: 0 0 4px; font-size: 1.22rem; font-weight: 500; letter-spacing: -.01em; }
.panel h2 + p, .panel h2 + .muted { margin-top: 0; }
.panel h3 { font-size: 1.02rem; font-weight: 500; }
.panel + .panel { margin-top: 22px; }

/* I pulsanti di una stessa riga hanno tutti la stessa altezza */
.row > .btn, .list-toolbar .btn, .pl-actions .btn, .cmd-row .btn { min-height: 44px; }
.btn.small { min-height: 34px; }

/* Le celle con azioni restano allineate a destra, come ci si aspetta */
table.list td:last-child, table.list th:last-child { text-align: right; }
table.list td:last-child .btn { margin-left: 6px; }

/* Campi e tendine della stessa altezza, così le righe non ballano */
input, select, textarea { min-height: 44px; }
input[type=checkbox], input[type=radio] { min-height: 0; }

/* Stati vuoti: un messaggio centrato invece di una riga persa in alto */
.panel > p.muted:only-of-type { padding: 6px 0; }

.permlist { display: grid; gap: 10px; margin-top: 10px; }
.perm { display: flex; gap: 12px; align-items: flex-start; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--panel-2); }
.perm:has(input:checked) { border-color: var(--acid); background: var(--acid-glow); }
.perm input { width: auto; margin: 3px 0 0; min-height: 0; }
.perm b { display: block; font-weight: 500; }
.perm i { font-style: normal; color: var(--muted); font-size: .86rem; line-height: 1.45; }

/* ---------- elemento appena aggiunto ---------- */

@keyframes appena {
  0%   { box-shadow: 0 0 0 0 var(--acid); border-color: var(--acid); }
  100% { box-shadow: 0 0 0 8px transparent; border-color: var(--line); }
}
.appena-aggiunto {
  animation: appena 1.4s ease-out;
  border-color: var(--acid) !important;
}
.dish.appena-aggiunto, .menu-section.appena-aggiunto { scroll-margin: 120px; }

/* ---------- anteprima dello schermo su mobile ---------- */

@media (max-width: 720px) {
  /* Le cornici hanno misure fisse pensate per il desktop: su un telefono
     uscivano dal bordo destro. Qui si adattano alla larghezza disponibile. */
  .screen-stage { width: 100%; overflow: hidden; }
  .screen-frame { width: 100%; }
  .screen-frame .bezel { width: 100% !important; height: auto !important; aspect-ratio: 16/9; }
  .screen-frame.tv_portrait .bezel,
  .screen-frame.totem .bezel {
    width: 62% !important; margin: 0 auto; aspect-ratio: 9/16;
  }
  .screen-frame .bezel iframe { width: 1920px; height: 1080px; }
  .screen-frame.tv_portrait .bezel iframe,
  .screen-frame.totem .bezel iframe { width: 1080px; height: 1920px; }
  .screen-frame.totem .base { width: 74%; }
  .pick-body { grid-template-columns: minmax(0, 1fr); }
  .mini-screen.portrait { max-width: 150px; }
}

[data-preview-reload].spin { animation: gira .9s linear; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- editor delle applicazioni con anteprima dal vivo ---------- */

.app-work { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .app-work { grid-template-columns: minmax(0, 1fr); } }

.app-live {
  position: sticky; top: 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.app-live-head {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--muted); font-size: .86rem; margin-bottom: 12px;
}
.app-live-screen {
  position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: #000; border: 6px solid #141513; border-radius: 8px;
}
.app-live-screen.verticale { aspect-ratio: 9/16; width: 62%; margin: 0 auto; }
.app-live-screen iframe { position: absolute; top: 0; left: 0; border: 0; pointer-events: none; }
.app-live-note { color: var(--faint); font-size: .82rem; margin: 12px 0 0; line-height: 1.5; }

/* colore: griglia di sistema accanto al valore esadecimale */
.colore { display: flex; gap: 8px; align-items: center; }
.colore input[type=color] {
  width: 46px; min-height: 44px; padding: 3px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2); cursor: pointer;
}
.colore input[type=text] { margin: 0; }

/* catalogo delle fonti nelle notizie */
.catalogo { margin-bottom: 14px; }
.catalogo b { display: block; color: var(--faint); font-size: .78rem; letter-spacing: .12em; margin-bottom: 7px; }
.pill.scelta { cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.pill.scelta:hover { border-color: var(--acid); color: var(--acid-text); }

/* ---------- barra di salvataggio sempre in vista ---------- */

.save-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 18px;
  background: var(--void-2); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .35);
}
.save-bar .muted { flex: 1; font-size: .88rem; min-width: 220px; }
.save-bar .btn { min-width: 180px; justify-content: center; }

/* ---------- impostazioni dell'applicazione dal template ---------- */

.zone-gear {
  position: absolute; top: 8px; right: 8px; z-index: 8;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  /* Pieno e luminoso: sopra un contenuto scuro un pulsante trasparente
     sparisce, e questo è il comando più usato dell'editor. */
  border: 2px solid rgba(0, 0, 0, .45); background: var(--acid); color: var(--on-acid);
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}
.zone-gear:hover { transform: scale(1.08); }
.zone-gear:active { transform: scale(.96); }

.modal.wide { max-width: 1060px; width: 94vw; }
.app-frame {
  height: 66vh; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--void-2); margin-top: 8px;
}
.app-frame iframe { width: 100%; height: 100%; border: 0; display: block; }



/* ---------- panoramica: riquadri con icona ---------- */

.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 24px; }
.cifra {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.cifra-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cifra-ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-soft);
}
.cifra-ico svg { width: 19px; height: 19px; }
.cifra-ico.buono { color: var(--acid-text); border-color: var(--acid-line); background: var(--acid-glow); }
.cifra-ico.male { color: var(--down); border-color: rgba(255, 95, 82, .3); background: rgba(255, 95, 82, .1); }
.cifra-var {
  font-size: .78rem; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-soft);
}
.cifra-var.buono { color: var(--acid-text); border-color: var(--acid-line); }
.cifra-var.male { color: var(--down); border-color: rgba(255, 95, 82, .3); }
.cifra b { font-size: 1.9rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.cifra span { color: var(--muted); font-size: .86rem; }

/* ---------- panoramica: fondo pagina ---------- */

.fondo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; margin-top: 26px; align-items: start; }
@media (max-width: 1000px) { .fondo { grid-template-columns: minmax(0, 1fr); } }
.fondo .colonna { display: flex; flex-direction: column; gap: 22px; }
.fondo .panel { margin: 0; }

.attivita { list-style: none; margin: 0; padding: 0; }
.attivita li {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft); font-size: .9rem;
}
.attivita li:last-child { border-bottom: 0; }
.attivita i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.attivita i.buono { background: var(--acid); }
.attivita i.male { background: var(--down); }
.attivita .quando { color: var(--faint); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.attivita .cosa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.riassunto.sereno { border-color: var(--acid-line); background: var(--acid-glow); }
.riassunto.sereno h2 { color: var(--acid-text); }
.riassunto.attenzione { border-color: rgba(245, 179, 1, .35); background: rgba(245, 179, 1, .08); }

.scorciatoie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px; }
.scorciatoie a {
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 10px;
  background: var(--panel-2); color: var(--text); font-size: .86rem;
}
.scorciatoie a:hover { border-color: var(--acid); color: var(--acid-text); }
.scorciatoie a span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line-soft); color: var(--muted); }
.scorciatoie a:hover span { color: var(--acid-text); border-color: var(--acid-line); }
.scorciatoie a span svg { width: 19px; height: 19px; }

/* ---------- mappa: contenuta e ordinata ---------- */

.map-box {
  position: relative; overflow: hidden; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.map-box .leaflet-container { background: var(--panel-2); }
/* I riquadri di errore dei server delle mappe non devono sfondare il riquadro */
.map-box .leaflet-tile-container img[src*="blocked"],
.map-box .leaflet-tile-container img[alt] { max-width: 256px; max-height: 256px; }
.map-box .leaflet-control-attribution {
  background: rgba(6, 6, 4, .7); color: var(--faint); font-size: .68rem;
}
.map-box .leaflet-control-attribution a { color: var(--muted); }


/* ---------- scelta del contenuto: anteprime invece di elenchi ---------- */

/*
   Scegliere cosa va su uno schermo guardando un nome in un elenco è un atto
   di fede. Qui si vede: la prima immagine della playlist, la foto stessa, il
   disegno delle aree del template.
*/
.scelte {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 10px;
}

.scelte .scelta {
  display: flex; flex-direction: column; gap: 6px; cursor: pointer; margin: 0;
  padding: 10px; border-radius: 14px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.scelte .scelta:hover { transform: translateY(-2px); border-color: var(--acid-line); }
.scelte .scelta.on {
  border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid), 0 10px 24px rgba(0, 0, 0, .3);
}
.scelte .scelta input { position: absolute; opacity: 0; width: 0; height: 0; }

.scelte .mini {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 9px;
  background: #0A0C0A center/cover no-repeat; border: 1px solid var(--line);
  overflow: hidden;
}
/* I marchi si guardano interi, non ritagliati */
.scelte .scelta[data-marchio] .mini { background-size: 82% auto; background-repeat: no-repeat; }
.scelte .mini.verticale { aspect-ratio: 16 / 9; background-size: contain; }
.scelte .mini i { display: grid; place-items: center; height: 100%; color: var(--faint);
  font-style: normal; font-size: 1.5rem; font-family: var(--font-display); }
.scelte .mini u.video {
  position: absolute; left: 7px; bottom: 7px; padding: 2px 7px; border-radius: 6px;
  background: rgba(0, 0, 0, .6); color: #FFF; font-size: .66rem; text-decoration: none;
}

/* Il template si riconosce dalla disposizione delle sue aree */
.scelte .mini.disegno { background: #0A0C0A; }
.scelte .mini.disegno .area {
  position: absolute; border: 1px solid var(--acid-line); border-radius: 3px;
  background: rgba(203, 255, 0, .12);
}

.scelte .scelta b { font-size: .88rem; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scelte .scelta .meta { font-size: .76rem; color: var(--muted); }

/* I menu a tendina restano leggibili: su alcuni browser le voci ereditavano
   la trasparenza del pannello e diventavano illeggibili. */
select, select option, select optgroup {
  background-color: #12161A; color: var(--text);
}
[data-theme="light"] select,
[data-theme="light"] select option,
[data-theme="light"] select optgroup {
  background-color: #FFFFFF; color: var(--text);
}

/*
 * La finestra di scelta del contenuto occupa quasi tutto lo schermo e usa lo
 * spazio per le schede: più ne stanno, meno si scorre. Lo schermo di
 * anteprima non c'è più — le schede mostrano già com'è ogni contenuto — e in
 * alto c'è la ricerca per nome.
 */
/*
 * Quasi a tutto schermo, lasciando libero il menu a sinistra, con la croce
 * di chiusura sempre visibile in alto a destra.
 */
.modal-back.grande { padding: 18px 18px 18px calc(236px + 18px); }
.modal.larga {
  position: relative; width: 100%; max-width: none; height: calc(100vh - 36px); max-height: none;
  display: flex; flex-direction: column; overflow: hidden; padding: 26px 30px 20px;
}
.modal.larga .modal-close {
  position: absolute; top: 16px; right: 16px; float: none; z-index: 2;
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
}
.modal.larga .modal-close:hover { border-color: var(--acid-line); }
.modal.larga h2 { padding-right: 56px; }
/*
 * Ogni livello della finestra occupa tutta la larghezza.
 *
 * La vecchia impaginazione a due colonne allineava il contenuto "all'inizio":
 * in colonna, quell'allineamento stringeva tutto alla larghezza di una sola
 * scheda, con la griglia schiacciata a sinistra. Qui si dichiara per ogni
 * livello che deve allargarsi, così non dipende da regole scritte altrove.
 */
.modal.larga .pick-body {
  flex: 1; min-height: 0; width: 100%; margin-top: 0;
  display: flex; flex-direction: column; align-items: stretch;
}
.modal.larga .pick-choices {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: stretch;
}
.modal.larga [data-panel-playlist],
.modal.larga [data-panel-single],
.modal.larga [data-panel-template] {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: stretch;
}
.modal.larga [data-panel-playlist] > label,
.modal.larga [data-panel-single] > label,
.modal.larga [data-panel-template] > label { display: none; }
.modal.larga .scelte {
  flex: 1; min-height: 0; width: 100%; max-height: none; margin-top: 0;
  overflow-y: auto; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; padding: 4px 8px 12px 2px;
}
.modal.larga .scelte .scelta { padding: 12px; }
.modal.larga .scelte .scelta b { font-size: .95rem; }
.modal.larga .modal-foot { align-items: center; }
.modal.larga .riepilogo-scelta { margin-right: auto; font-size: .9rem; }

.cerca-scelta {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; padding: 4px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--field);
}
.cerca-scelta svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cerca-scelta input { flex: 1; border: 0; background: transparent; padding: 10px 0; font-size: 1rem; }
/* Il campo sta dentro la sua cornice: niente secondo bordo quando è attivo,
   si accende la cornice intera */
.cerca-scelta input, .cerca-scelta input:focus {
  background: transparent; border: 0; outline: none; box-shadow: none; border-radius: 0; margin: 0;
}
.cerca-scelta:focus-within { border-color: var(--acid-text); }
.cerca-scelta .conteggio { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.nessun-risultato { margin: 14px 2px; }

@media (max-width: 900px) {
  /* Sul telefono la finestra prende tutto lo schermo */
  .modal-back.grande { padding: 0; }
  .modal.larga { height: 100vh; height: 100dvh; border-radius: 0; border: 0; padding: 18px 16px 14px; }
  .modal.larga .modal-close { top: 12px; right: 12px; }
  .modal.larga .scelte { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .modal.larga .modal-foot { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .modal.larga .riepilogo-scelta { flex: 1 1 100%; }
  .modal.larga .modal-foot .btn { flex: 1; }
}

@media (max-width: 860px) {
  .modal.larga .pick-body { grid-template-columns: minmax(0, 1fr); }
  .modal.larga .scelte { max-height: none; }
}

/* Cifre del riquadro di salute: valore grande, etichetta sotto */
.cifra-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.cifra-lab { font-size: .82rem; color: var(--muted); margin-top: 4px; }

/* ---------- righe visuali: località e clienti ---------- */

/* Un elenco che si compila aggiungendo schede, non scrivendo testo. */
.righe-visuali { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.riga-visuale {
  display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px;
  transition: border-color .16s ease;
}
.riga-visuale:hover { border-color: var(--acid-line); }
.riga-visuale .campo { flex: 0 0 120px; display: flex; flex-direction: column; gap: 5px;
  font-size: .78rem; color: var(--muted); margin: 0; }
.riga-visuale .campo.grande { flex: 1 1 180px; }
.riga-visuale .campo.piccolo { flex: 0 0 104px; }
.riga-visuale .campo input { padding: 9px 11px; font-size: .92rem; }

.riga-visuale .segno {
  width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--acid-glow); color: var(--acid-text); margin-bottom: 2px;
}
.riga-visuale .segno svg { width: 19px; height: 19px; }

.riga-visuale .marchio-scelto,
.cliente-scheda .marchio-scelto {
  width: 96px; height: 52px; flex: none; border-radius: 10px; margin-bottom: 2px;
  background: #FFF center/contain no-repeat; background-size: 84% auto;
  border: 1px solid var(--line); cursor: pointer;
  display: grid; place-items: center; color: #6E7468; font-size: .72rem;
}
.riga-visuale .marchio-scelto:hover { border-color: var(--acid); }

.riga-visuale .via {
  width: 34px; height: 34px; flex: none; margin-bottom: 6px; border-radius: 9px;
  background: transparent; border: 1px solid var(--line); color: var(--faint); cursor: pointer;
}
.riga-visuale .via:hover { border-color: #C0392B; color: #FF8A7E; }

@media (max-width: 760px) {
  .riga-visuale { flex-wrap: wrap; }
  .riga-visuale .campo, .riga-visuale .campo.grande, .riga-visuale .campo.piccolo { flex: 1 1 140px; }
}

/* ---------- clienti e sedi della mappa della presenza ---------- */

.cliente-scheda {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 15px;
  padding: 14px 16px; margin-top: 12px;
}
.cliente-scheda .testa { display: flex; align-items: flex-end; gap: 12px; }
.cliente-scheda .testa .totale { margin-left: auto; font-size: .84rem; color: var(--muted);
  white-space: nowrap; padding-bottom: 8px; }
.cliente-scheda .testa .totale b, .cliente-scheda .testa .totale i {
  color: var(--acid-text); font-style: normal; font-weight: 600; }

.cliente-scheda .sedi { margin: 12px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.riga-sede {
  display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px;
  background: var(--field); border: 1px solid var(--line); border-radius: 11px;
}
.riga-sede .campo { flex: 0 0 110px; display: flex; flex-direction: column; gap: 5px;
  font-size: .76rem; color: var(--muted); margin: 0; }
.riga-sede .campo.grande { flex: 1 1 220px; }
.riga-sede .campo input { padding: 8px 10px; font-size: .9rem; }
.riga-sede .esito { flex: 0 0 150px; font-size: .8rem; color: var(--faint); padding-bottom: 9px; }
.riga-sede .esito b { color: var(--acid-text); font-weight: 600; }
.riga-sede .esito u { color: #C0392B; text-decoration: none; }

.btn.piccolo { padding: 8px 13px; font-size: .84rem; }
.cliente-scheda > .btn.piccolo { margin-top: 2px; }
.riga-sede .btn.piccolo { margin-bottom: 4px; }

.riga-sede .via, .cliente-scheda .via {
  width: 32px; height: 32px; flex: none; margin-bottom: 4px; border-radius: 9px;
  background: transparent; border: 1px solid var(--line); color: var(--faint); cursor: pointer;
}
.riga-sede .via:hover, .cliente-scheda .via:hover { border-color: #C0392B; color: #FF8A7E; }

.barra-salva {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  margin-top: 18px; padding: 14px 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.barra-salva .btn.primary { margin-left: auto; }

@media (max-width: 760px) {
  .riga-sede { flex-wrap: wrap; }
  .riga-sede .campo, .riga-sede .campo.grande { flex: 1 1 150px; }
  .riga-sede .esito { flex: 1 1 100%; padding: 0; }
}

/* Come si vede il marchio: automatico, su bianco o su scuro */
.fondo-marchio { flex: 0 0 132px; margin: 0 0 2px; }
.fondo-marchio select { padding: 8px 10px; font-size: .82rem; }

/* Etichette delle piattaforme: si aggiungono scrivendo, si tolgono con la croce */
.etichette {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px;
  padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--field);
}
.etichetta {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px;
  border-radius: 99px; background: var(--acid-glow); color: var(--acid-text);
  border: 1px solid var(--acid-line); font-size: .86rem; font-weight: 500;
}
.etichetta button { background: none; border: 0; color: inherit; cursor: pointer; font-size: .78rem; padding: 0 2px; }
.etichette input { flex: 1 1 180px; border: 0; background: transparent; padding: 6px; min-width: 160px; }
.etichette input:focus { background: transparent; }

/* ---------- libreria: trascinamento e rinomina ---------- */
.thumb[draggable="true"] { cursor: grab; }
.trascinando .folder, .trascinando .crumbs [data-cartella] {
  outline: 2px dashed var(--acid-line); outline-offset: 3px;
}
.folder.bersaglio, .crumbs [data-cartella].bersaglio {
  outline: 2px solid var(--acid); background: var(--acid-glow);
}
.folder { position: relative; }
.rinomina {
  background: none; border: 0; color: var(--faint); cursor: pointer; font-size: .95rem;
  padding: 2px 6px; border-radius: 6px; opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.folder:hover .rinomina, .thumb:hover .rinomina, .rinomina:focus { opacity: 1; }
.rinomina:hover { color: var(--acid-text); }
.folder .rinomina { position: absolute; top: 8px; right: 8px; }
.thumb .cap { display: flex; align-items: center; gap: 4px; }
.thumb .cap span { flex: 1; min-width: 0; }
@media (hover: none) { .rinomina { opacity: 1; } }
.rinomina.visibile { opacity: .55; font-size: 1.05rem; vertical-align: middle; }
.rinomina.visibile:hover { opacity: 1; }
tr:hover .rinomina, li:hover .rinomina, .row:hover .rinomina { opacity: 1; }

/* ---------- segnale Wi-Fi ---------- */
.tacche { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; vertical-align: middle; margin: 0 6px; }
.tacche i { width: 4px; border-radius: 1px; background: var(--line); display: block; }
.tacche.ottimo i.piena, .tacche.buono i.piena { background: var(--live); }
.tacche.discreto i.piena { background: var(--wait); }
.tacche.debole i.piena { background: #E0513F; }

.rete-riquadro { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--panel-2); }
.rete-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rete-testa .tacche { height: 20px; margin: 0; }
.rete-testa .tacche i { width: 6px; }
.rete-grafico { width: 100%; height: 70px; margin-top: 12px; display: block; }
.rete-grafico .linea { fill: none; stroke: var(--acid-text); stroke-width: .8; vector-effect: non-scaling-stroke; }
.rete-grafico .soglia { stroke: #E0513F; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .7; }

/* ---------- cambio rete Wi-Fi ---------- */
.wifi-reti { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }
.wifi-rete {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--text);
}
.wifi-rete:hover { border-color: var(--acid-line); }
.wifi-rete input { width: auto; margin: 0; accent-color: var(--acid); }
.wifi-rete b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wifi-rete .muted { font-size: .78rem; }
.wifi-rete.attuale { border-color: var(--acid-line); background: var(--acid-glow); }
.barra-mem { width: 90px; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; display: inline-block; }
.barra-mem i { display: block; height: 100%; background: var(--live); }
.barra-mem i.attenta { background: var(--wait); }
.barra-mem i.critica { background: #E0513F; }

/* ---------- spazio delle librerie ---------- */
.spazio-libreria { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.scelta-libreria label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem; color: var(--muted); }
.scelta-libreria select { width: auto; min-width: 200px; margin: 0; }
.spazio-libreria .quota { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); }
.spazio-libreria .quota b { color: var(--text); font-weight: 600; }
.barra-mem.grande { width: 160px; height: 9px; }
.spazio-mini { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }

/* ---------- caricamento trascinando i file ---------- */
.rilascio {
  position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 30px;
  background: rgba(8, 10, 8, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.rilascio.on { display: grid; }
.rilascio .dentro {
  width: min(560px, 100%); padding: 48px 30px; border-radius: 22px; text-align: center;
  border: 2px dashed var(--acid); background: rgba(203, 255, 0, .06); color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.rilascio svg { width: 54px; height: 54px; color: var(--acid); }
.rilascio b { font-family: var(--font-display); font-size: 1.4rem; }
.rilascio span { color: var(--muted); }
.carico {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 91;
  width: min(420px, calc(100% - 40px)); padding: 14px 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column; gap: 8px;
}
.carico .barra { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.carico .barra i { display: block; height: 100%; width: 0; background: var(--acid); transition: width .2s ease; }


/* ---------- barra delle sezioni nella scheda dispositivo ---------- */
.sezioni-dev {
  position: sticky; top: 0; z-index: 30; margin: 0 0 18px;
  display: flex; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.sezioni-dev::-webkit-scrollbar { display: none; }
.sezioni-dev a {
  flex: none; padding: 9px 14px; border-radius: 10px; font-size: .9rem; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.sezioni-dev a:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
[data-theme="light"] .sezioni-dev a:hover { background: rgba(20, 23, 15, .06); }
.sezioni-dev a.on { background: var(--acid); color: #0B0D10; }
.ancora-alta { display: block; height: 0; }
@media (max-width: 900px) {
  /* Sul telefono il menu principale è già fisso in alto: la barra si mette sotto */
  .sezioni-dev { top: 64px; }
}


/* ---------- dirette TV ---------- */
.righe-live { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.riga-live {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2);
}
.riga-live .campo { flex: 0 0 180px; display: flex; flex-direction: column; gap: 5px; margin: 0;
  font-size: .78rem; color: var(--muted); }
.riga-live .campo.grande { flex: 1 1 300px; }
.riga-live .esito { flex: 0 0 170px; font-size: .8rem; color: var(--faint); padding-bottom: 9px; }
.riga-live .esito b { color: var(--acid-text); font-weight: 600; }
.riga-live .esito u { color: #E0513F; text-decoration: none; }
.riga-live .via { width: 32px; height: 32px; margin-bottom: 4px; border-radius: 9px; background: transparent;
  border: 1px solid var(--line); color: var(--faint); cursor: pointer; }
.in-onda { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 4px;
  font-size: .72rem; color: var(--muted); cursor: pointer; }
.in-onda input { width: auto; margin: 0; accent-color: #FF3B30; }
.suggeriti-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.suggerito {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); color: var(--text); text-align: left;
  font-family: inherit;
}
.suggerito:hover { border-color: var(--acid-line); }
.suggerito span { font-size: .8rem; color: var(--acid-text); }


/* Finestra delle impostazioni di un'applicazione dentro il template: il
   modulo occupa tutta la finestra e scorre al suo interno */
.modal-app .app-frame { flex: 1; min-height: 0; margin-top: 8px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); }
.modal-app .app-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }


/* Stili del meteo, da scegliere guardandoli */
.stili-meteo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.stile-meteo { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); color: var(--text); }
.stile-meteo input { position: absolute; opacity: 0; width: 0; height: 0; }
.stile-meteo .campione { height: 64px; border-radius: 9px; display: flex; align-items: center; padding: 0 14px;
  border: 1px solid var(--line); }
.stile-meteo .campione i { font-style: normal; font-weight: 600; font-size: 1.6rem; }
.stile-meteo b { font-weight: 600; }
.stile-meteo small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.stile-meteo.on, .stile-meteo:has(input:checked) { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid); }

.causa-offline { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel-2); display: flex; flex-direction: column; gap: 4px; }
.causa-offline b { font-weight: 600; }
.causa-offline .muted { font-size: .82rem; }

.riavvio-notturno { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel-2); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.riavvio-notturno .interruttore { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); flex: 1 1 320px; }
.riavvio-notturno .interruttore input { width: auto; margin: 0; }
.riavvio-notturno .ora { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
.riavvio-notturno .ora select { width: auto; margin: 0; }
.riavvio-notturno p { flex: 1 1 100%; margin: 0; font-size: .84rem; }

/* ---------- avvisi offline ---------- */
.avvisi .interruttore { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); }
.avvisi .interruttore input { width: auto; margin: 0; }
.avvisi .row > .btn { align-self: flex-end; }
.avvisi code.copiabile { display: inline-block; padding: 8px 10px; border-radius: 8px; background: rgba(127,127,127,.12); cursor: copy; }
.avvisi .pill.acceso { background: rgba(34,197,94,.16); color: #16a34a; }

/* Telefono: le tabelle larghe scorrono dentro il loro riquadro, non allargano la pagina */
@media (max-width: 900px) {
  .panel table.list { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}
@media (max-width: 600px) {
  .cliente-scheda .testa { flex-wrap: wrap; }
  .cliente-scheda .testa > label, .cliente-scheda .testa > .nome { flex: 1 1 100%; min-width: 0; }
}

/* ---------- libreria: griglia di schede, come una raccolta ---------- */
.lib-cerca { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 18px; }
.lib-campo { position: relative; flex: 0 1 340px; margin: 0; }
.lib-campo input { margin: 0; padding-right: 40px; border-radius: 12px; }
.lib-campo svg { position: absolute; right: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); pointer-events: none; }
.lib-tipi { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.lib-tipi a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; font-size: .88rem; color: var(--muted); text-decoration: none; }
.lib-tipi a svg { width: 16px; height: 16px; }
.lib-tipi a:hover { color: var(--text); }
.lib-tipi a.on { background: var(--panel-2); color: var(--acid-text); }

.lib-testa { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.lib-testa .crumbs { margin: 0 0 6px; font-size: .86rem; }
.lib-testa h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.lib-testa h2 .rinomina { font-size: .9rem; }
.lib-conta { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: .84rem; color: var(--muted); }
.lib-conta > span { padding-right: 12px; border-right: 1px solid var(--line); }
.per-pagina { margin: 0; }
.per-pagina label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .84rem; color: var(--muted); }
.per-pagina select { width: auto; margin: 0; padding: 3px 26px 3px 8px; font-size: .84rem; border-radius: 8px; }
.lib-strumenti { display: flex; gap: 8px; align-items: center; }
.lib-strumenti .btn svg { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.vista-scelta { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.vista-scelta button { background: transparent; border: 0; padding: 9px 11px; color: var(--muted); cursor: pointer; }
.vista-scelta button + button { border-left: 1px solid var(--line); }
.vista-scelta button svg { width: 18px; height: 18px; display: block; }
.vista-scelta button.on { background: var(--panel-2); color: var(--acid-text); }

.raccolta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.voce {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px;
  color: var(--text); text-decoration: none; min-width: 0;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.voce:hover { border-color: var(--acid-line, var(--acid)); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.voce.scelta-on { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid); }
.voce .anteprima {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 9px; background: #0A0C0A; color: var(--faint);
}
.voce .anteprima img, .voce .anteprima video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.voce .anteprima > svg { width: 44px; height: 44px; }
.voce .segno-video {
  position: absolute; left: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; color: #fff; background: rgba(0, 0, 0, .55);
}
.voce-cartella .anteprima { background: transparent; color: var(--muted); }
.voce-cartella .anteprima > .cartella-grande { width: 62%; height: auto; color: var(--acid-text); opacity: .75; }
.voce-cartella:hover .cartella-grande { opacity: 1; }
.voce .nome { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 500; }
.voce .nome svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.voce .nome span, .voce .nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.voce .dettagli { display: none; font-size: .8rem; color: var(--muted); }
.voce-cartella .dettagli { display: block; margin-top: -6px; }
.voce .dettagli i, .voce .dettagli em { font-style: normal; }
.voce .spunta {
  position: absolute; top: 18px; left: 18px; z-index: 2; margin: 0; width: 24px; height: 24px; cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}
.voce:hover .spunta, .voce.scelta-on .spunta, .raccolta.con-scelta .spunta { opacity: 1; }
@media (hover: none) { .voce .spunta { opacity: 1; } }
.voce .spunta input { position: absolute; opacity: 0; width: 0; height: 0; }
.voce .spunta i {
  display: block; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .45); box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.voce .spunta input:checked + i { background: var(--acid); border-color: var(--acid); }
.voce .spunta input:checked + i::after {
  content: ""; display: block; width: 6px; height: 11px; margin: 3px 0 0 7px;
  border: solid #0A0C0A; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.voce .spunta input:focus-visible + i { outline: 2px solid var(--acid); outline-offset: 2px; }
.voce-altre { display: grid; place-items: center; text-align: center; min-height: 160px; color: var(--muted); border-style: dashed; }
.voce-altre b { display: block; color: var(--text); font-weight: 600; margin-top: 2px; }
.voce[data-cartella].bersaglio { border-color: var(--acid); background: rgba(212, 255, 0, .06); }

/* vista a elenco */
.raccolta.elenco { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.raccolta.elenco .voce { flex-direction: row; align-items: center; gap: 14px; padding: 8px 12px 8px 46px; }
.raccolta.elenco .voce:hover { transform: none; }
.raccolta.elenco .anteprima { width: 72px; flex: none; }
.raccolta.elenco .voce-cartella .anteprima > .cartella-grande { width: 70%; }
.raccolta.elenco .nome { flex: 1; }
.raccolta.elenco .dettagli { display: flex; gap: 16px; margin: 0; white-space: nowrap; }
.raccolta.elenco .spunta { top: 50%; left: 12px; margin-top: -12px; opacity: 1; }
.raccolta.elenco .voce-cartella { padding-left: 46px; }
.raccolta.elenco .voce-altre { min-height: 0; padding: 12px; }
.raccolta.elenco .segno-video { display: none; }

.lib-vuota { padding: 30px 0; text-align: center; }
.lib-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.azioni-menu { position: relative; }
.azioni-menu .conta-scelti:not(:empty) {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 10px; background: var(--acid); color: #0A0C0A; font-size: .75rem; font-weight: 700;
}
.azioni-menu .menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40; width: 290px;
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--panel-solid, #151815); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
[data-theme="light"] .azioni-menu .menu { background: #fff; }
.azioni-menu .menu[hidden] { display: none !important; }
.azioni-menu .menu > button:not(.btn) {
  background: transparent; border: 0; text-align: left; padding: 7px 8px; border-radius: 8px;
  color: var(--text); cursor: pointer; font: inherit; font-size: .9rem;
}
.azioni-menu .menu > button:not(.btn):hover { background: var(--panel-2); }
.azioni-menu .menu hr { margin: 2px 0; border: 0; border-top: 1px solid var(--line); }
.azioni-menu .menu label { margin: 0; font-size: .82rem; color: var(--muted); }
.azioni-menu .menu select { margin: 4px 0 0; }
.azioni-menu .menu .btn:disabled { opacity: .45; cursor: not-allowed; }
.pagine { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: .9rem; }
.pagine a { padding: 6px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.pagine a:hover { color: var(--text); background: var(--panel-2); }
.pagine a.on { color: var(--acid-text); font-weight: 700; }
.pagine a.spento { opacity: .35; pointer-events: none; }
.pagine span { color: var(--faint); }

@media (max-width: 700px) {
  .raccolta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .voce { padding: 8px; gap: 8px; }
  .voce .spunta { top: 12px; left: 12px; }
  .lib-campo { flex: 1 1 100%; }
  .raccolta.elenco .dettagli em { display: none; }
  .raccolta.elenco .anteprima { width: 56px; }
  .pagine { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------- scheda di un contenuto ---------- */
.titolo-media { overflow-wrap: anywhere; }
.anteprima-media { padding: 14px; display: grid; place-items: center; background: #0A0C0A; }
.anteprima-media img, .anteprima-media video {
  display: block; max-width: 100%; max-height: 62vh; border-radius: 10px; object-fit: contain;
}
.info-media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 16px; margin: 0 0 18px; font-size: .9rem; }
.info-media dt { color: var(--muted); }
.info-media dd { margin: 0; overflow-wrap: anywhere; }
.cerca-schermi { margin: 0 0 12px; }
.schermi-scelta { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.schermo-voce {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text);
}
.schermo-voce[hidden] { display: none; }
.schermo-voce:hover { border-color: var(--acid-line); }
.schermo-voce:has(input:checked) { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid); }
.schermo-voce input { width: auto; margin: 0; accent-color: var(--acid); }
.schermo-voce .pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--down, #e5484d); flex: none; }
.schermo-voce .pallino.acceso { background: #22c55e; }
.schermo-voce .testo { display: flex; flex-direction: column; min-width: 0; }
.schermo-voce b { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schermo-voce small { color: var(--muted); font-size: .78rem; }
.schermo-voce em { font-style: normal; }
.schermo-voce em.gia { color: var(--acid-text); }
.schermo-voce em.avviso { color: #f59e0b; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 700px) {
  .raccolta:not(.elenco) .voce .nome span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; font-size: .84rem; }
}

/* ---------- La nostra presenza: tessere dei clienti e schermi per tipo ---------- */
.clienti-strumenti { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 12px; }
.clienti-strumenti input[type=search] { flex: 1 1 240px; margin: 0; max-width: 360px; }
.clienti-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: start; }
.clienti-griglia .cliente-scheda { margin: 0; padding: 0; overflow: hidden; }
.clienti-griglia .cliente-scheda.aperta { grid-column: 1 / -1; padding: 14px 16px; border-color: var(--acid-line); }
.cliente-scheda .corpo { display: none; }
.cliente-scheda.aperta .corpo { display: block; }
.cliente-scheda.aperta .tessera { display: none; }
.tessera {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 16px 12px 14px;
  background: transparent; border: 0; color: var(--text); cursor: pointer; font: inherit; text-align: center;
  transition: background .15s ease;
}
.tessera:hover { background: rgba(255, 255, 255, .04); }
[data-theme="light"] .tessera:hover { background: rgba(20, 23, 15, .04); }
.logo-tessera {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px;
  background: #fff center / 78% auto no-repeat; border: 1px solid var(--line);
}
.logo-tessera i { font-style: normal; font-size: 1.8rem; font-weight: 600; color: #0A0C0A; opacity: .35; }
.nome-tessera { font-weight: 600; font-size: .92rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.conta-tessera { font-size: .78rem; color: var(--muted); }
.cliente-scheda .testa [data-chiudi-cliente] { margin-bottom: 4px; white-space: nowrap; }

.riga-sede { flex-wrap: wrap; }
.riga-sede .ripartizione { flex: 1 1 300px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.riga-sede .ripartizione .titolo-campo { flex: 1 1 100%; }
.riga-tipo { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2); }
.riga-tipo input { width: 64px; margin: 0; padding: 6px 8px; font-size: .9rem; }
.riga-tipo select { width: auto; min-width: 110px; margin: 0; padding: 6px 26px 6px 8px; font-size: .86rem; }
.riga-tipo .via { width: 26px !important; height: 26px !important; margin: 0 !important; font-size: .75rem; }
.aggiungi-tipo { background: transparent; border: 1px dashed var(--line); color: var(--muted); border-radius: 9px;
  padding: 7px 10px; font: inherit; font-size: .82rem; cursor: pointer; }
.aggiungi-tipo:hover { border-color: var(--acid); color: var(--acid-text); }
@media (max-width: 600px) {
  .clienti-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La riga della sede: indirizzo, Trova, località e croce sopra; gli schermi per tipo sotto */
.cliente-scheda .riga-sede {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(90px, auto) auto;
  grid-template-areas: "ind trova esito via" "rip rip rip rip"; align-items: end; gap: 8px 10px;
}
.cliente-scheda .riga-sede > .campo.grande { grid-area: ind; }
.cliente-scheda .riga-sede > [data-trova] { grid-area: trova; }
.cliente-scheda .riga-sede > .esito { grid-area: esito; flex: none; padding-bottom: 12px; }
.cliente-scheda .riga-sede > .via { grid-area: via; }
.cliente-scheda .riga-sede > .ripartizione { grid-area: rip; }
.cliente-scheda .riga-sede .ripartizione .titolo-campo { flex: 0 0 auto; margin-right: 4px; }
@media (max-width: 600px) {
  .cliente-scheda .riga-sede { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ind ind" "trova via" "esito esito" "rip rip"; }
}
.cliente-scheda .riga-sede > .ripartizione { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.logo-tessera.su-scuro { background-color: #0A0C0A; }

/* =====================================================================
   Editor della playlist: libreria · sequenza · anteprima
   ===================================================================== */
.ed { display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ed-libreria {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 12px;
  padding: 18px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-sizing: border-box;
}
.ed-lib-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ed-lib-testa h2 { margin: 0; font-size: 1.1rem; }
.ed-lib-testa span { font-size: .76rem; color: var(--faint); }
.ed-cerca { position: relative; margin: 0; }
.ed-cerca svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); }
.ed-cerca input { margin: 0; padding-left: 36px; border-radius: 12px; }
.ed-tipi { display: flex; gap: 3px; padding: 3px; border-radius: 11px; border: 1px solid var(--line); }
.ed-tipi button { flex: 1; padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.ed-tipi button.on { background: var(--panel-2); color: var(--acid-text); }
.ed-libreria select { margin: 0; font-size: .85rem; padding: 8px 10px; }
.ed-lib-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow-y: auto; min-height: 120px; padding-right: 2px; }
.ed-lib-voce { display: flex; flex-direction: column; gap: 5px; cursor: grab; min-width: 0; }
.ed-lib-voce[hidden] { display: none; }
.ed-lib-img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #0A0C0A; border: 1px solid var(--line); }
.ed-lib-img img, .ed-lib-img video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ed-lib-voce.usata .ed-lib-img { box-shadow: inset 0 0 0 2px var(--acid-line); }
.ed-segno-video { position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: .55rem; font-style: normal; }
.ed-aggiungi {
  position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 9px; border: 0;
  background: var(--acid); color: var(--on-acid); font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer;
  opacity: 0; transform: scale(.9); transition: opacity .15s ease, transform .15s ease;
}
.ed-lib-voce:hover .ed-aggiungi, .ed-aggiungi:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .ed-aggiungi { opacity: 1; transform: none; } }
.ed-aggiungi.fisso { position: static; opacity: 1; transform: none; flex: none; }
.ed-lib-nome { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-lib-vuota { font-size: .85rem; margin: 0; }
.ed-carica { width: 100%; }
.ed-app-lista { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.ed-app-voce { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.ed-app-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(183,140,240,.18); color: #C9A9F5; font-weight: 700; flex: none; }
.ed-app-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ed-app-testo b { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-app-testo i { font-style: normal; font-size: .76rem; color: var(--muted); }

.ed-centro { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ed-briciole { display: flex; gap: 10px; font-size: .86rem; color: var(--muted); }
.ed-briciole a { color: var(--muted); text-decoration: none; }
.ed-briciole a:hover { color: var(--text); }
.ed-briciole span:last-child { color: var(--text); }
.ed-titolo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ed-titolo h1 { margin: 0; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.ed-titolo .sub { margin: 6px 0 0; }
.ed-stato { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.ed-stato.in-corso { color: var(--wait); }
.ed-stato.ok { color: var(--acid-text); }
.ed-stato.errore { color: var(--err-text); }

.ed-giro { display: flex; flex-direction: column; gap: 6px; }
.ed-barra { display: flex; gap: 3px; height: 32px; border-radius: 10px; overflow: hidden; }
.ed-barra span {
  flex: 1 1 0; min-width: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: .72rem; font-weight: 700; color: rgba(10,12,10,.78); white-space: nowrap; overflow: hidden;
  transition: filter .15s ease;
}
.ed-barra span:hover { filter: brightness(1.15); }
.ed-barra span.con-fascia { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.18) 0 6px, transparent 6px 12px) !important; }
.ed-tacche { display: flex; justify-content: space-between; font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; }

.ed-voci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ed-voce {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); transition: border-color .15s ease, background .15s ease;
}
.ed-voce:hover { border-color: rgba(255,255,255,.18); }
[data-theme="light"] .ed-voce:hover { border-color: rgba(20,23,15,.22); }
.ed-voce.in-volo { opacity: .45; border-style: dashed; }
.ed-voce.lampo { border-color: var(--acid); background: rgba(203,255,0,.06); }
.ed-presa { width: 16px; color: var(--faint); cursor: grab; display: flex; flex: none; }
.ed-presa svg { width: 16px; height: 16px; }
.ed-num { width: 22px; text-align: right; font-size: .82rem; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.ed-mini { width: 72px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #0A0C0A; flex: none; display: grid; place-items: center; }
.ed-mini.verticale { width: 34px; aspect-ratio: 9 / 16; }
.ed-mini img, .ed-mini video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ed-mini i { font-style: normal; font-size: .66rem; font-weight: 700; color: #C9A9F5; letter-spacing: .06em; }
.ed-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-nome b { font-weight: 500; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-nome span { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-fascia-box { position: relative; flex: none; }
.ed-fascia {
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); font: inherit; font-size: .8rem; white-space: nowrap; cursor: pointer;
}
.ed-fascia:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.ed-fascia.attiva { color: var(--acid-text); border-color: var(--acid-line); background: rgba(203,255,0,.08); }
.ed-fascia-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 250px; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 14px; background: #151815; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
[data-theme="light"] .ed-fascia-pop { background: #fff; }
.ed-fascia-pop[hidden] { display: none !important; }
.ed-fascia-pop b { font-size: .88rem; font-weight: 600; }
.ed-fascia-campi { display: flex; gap: 8px; }
.ed-fascia-campi label { flex: 1; margin: 0; font-size: .76rem; color: var(--muted); }
.ed-fascia-campi input { margin: 4px 0 0; padding: 7px 8px; }
.ed-fascia-azioni { display: flex; justify-content: space-between; gap: 8px; }
.ed-fascia-pop small { font-size: .74rem; color: var(--faint); line-height: 1.4; }
.ed-passo { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.ed-passo button { width: 30px; height: 34px; border: 0; background: transparent; color: var(--text); font-size: 1rem; cursor: pointer; }
.ed-passo button:hover { background: var(--panel-2); }
.ed-passo input {
  width: 44px; margin: 0; padding: 0; height: 34px; border: 0; border-radius: 0; background: transparent;
  text-align: center; font-weight: 600; font-size: .92rem; -moz-appearance: textfield;
}
.ed-passo input::-webkit-outer-spin-button, .ed-passo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-passo span { font-size: .78rem; color: var(--muted); padding-right: 2px; }
.ed-durata-file { min-width: 110px; text-align: center; font-size: .82rem; color: var(--muted); flex: none; }
.ed-togli { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--faint); cursor: pointer; flex: none; }
.ed-togli:hover { border-color: #C0392B; color: #FF8A7E; }
.ed-rilascio {
  padding: 18px; border-radius: 14px; border: 1.5px dashed var(--acid-line); color: var(--muted);
  font-size: .9rem; text-align: center; transition: background .15s ease, border-color .15s ease;
}
body.ed-trascino .ed-rilascio, .ed-rilascio.sopra { border-color: var(--acid); background: rgba(203,255,0,.06); color: var(--text); }

.ed-destra { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.ed-riquadro { padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ed-riquadro h2 { margin: 0; font-size: 1rem; }
.ed-riquadro-testa { display: flex; align-items: baseline; justify-content: space-between; }
.ed-riquadro-testa a { font-size: .8rem; }
.ed-tv { position: relative; padding: 6px; border-radius: 12px; background: #000; border: 1px solid var(--line); }
.ed-tv iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: #000; }
.ed-tv.verticale { width: 58%; margin: 0 auto; }
.ed-tv.verticale iframe { aspect-ratio: 9 / 16; }
.ed-tv-vuota { display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--faint); font-size: .85rem; text-align: center; padding: 10px; }
.ed-schermo { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text); text-decoration: none; padding: 3px 0; }
.ed-schermo:hover .nome { color: var(--acid-text); }
.ed-schermo .punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--down); }
.ed-schermo .punto.on { background: var(--acid); }
.ed-schermo .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-schermo .stato { font-size: .78rem; color: var(--muted); }
.ed-manda { margin-top: 4px; }
.ed-altro summary { cursor: pointer; font-size: .9rem; color: var(--muted); list-style: none; }
.ed-altro summary::-webkit-details-marker { display: none; }
.ed-altro form { margin: 0; }

@media (max-width: 1599px) {
  .ed { grid-template-columns: 260px minmax(0, 1fr); }
  .ed-destra { grid-column: 2; position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .ed-libreria { grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed-libreria { position: static; max-height: none; order: 2; grid-row: auto; }
  .ed-destra { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .ed-lib-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 340px; }
  .ed-centro { order: 1; }
  .ed-destra { order: 3; }
  .ed-voce { flex-wrap: wrap; gap: 8px 10px; }
  .ed-nome { flex: 1 1 calc(100% - 160px); }
  .ed-presa, .ed-num { display: none; }
  .ed-fascia-box { margin-left: 0; }
  .ed-fascia-pop { right: auto; left: 0; }
}

/* =====================================================================
   Testata, filtri e caselle comuni a Dispositivi e Playlist
   ===================================================================== */
.vt-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin: 6px 0 22px; }
.vt-testa h1 { margin: 0; }
.vt-testa .sub { margin: 6px 0 0; }
.vt-azioni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vt-cerca { position: relative; margin: 0; width: 320px; max-width: 100%; }
.vt-cerca svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); pointer-events: none; }
.vt-cerca input { margin: 0; height: 46px; padding-left: 42px; border-radius: 14px; }
.vt-alto { height: 46px; }
.vt-filtri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.vt-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: .85rem; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.vt-chip:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
[data-theme="light"] .vt-chip:hover { border-color: rgba(20,23,15,.25); }
.vt-chip.on { color: var(--acid-text); border-color: var(--acid-line); background: rgba(203,255,0,.08); font-weight: 600; }
.vt-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.vt-spazio { flex: 1; }
.vt-ordina { margin: 0; }
.vt-ordina label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .82rem; color: var(--faint); }
.vt-ordina select { width: auto; margin: 0; padding: 7px 28px 7px 10px; font-size: .85rem; border-radius: 10px; }
.vt-vuoto { padding: 50px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.vt-vuoto p { margin: 0 0 14px; }

.pls-scheda .spunta, .dv-scheda .spunta {
  position: absolute; z-index: 3; margin: 0; width: 24px; height: 24px; cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}
.pls-scheda:hover .spunta, .dv-scheda:hover .spunta,
.pls-scheda .spunta:has(input:checked), .dv-scheda .spunta:has(input:checked),
form.con-scelta .spunta { opacity: 1; }
@media (hover: none) { .pls-scheda .spunta, .dv-scheda .spunta { opacity: 1; } }
.pls-scheda .spunta input, .dv-scheda .spunta input { position: absolute; opacity: 0; width: 0; height: 0; }
.pls-scheda .spunta i, .dv-scheda .spunta i {
  display: block; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.45); box-shadow: 0 1px 4px rgba(0,0,0,.4); box-sizing: border-box;
}
.pls-scheda .spunta input:checked + i, .dv-scheda .spunta input:checked + i { background: var(--acid); border-color: var(--acid); }
.pls-scheda .spunta input:checked + i::after, .dv-scheda .spunta input:checked + i::after {
  content: ""; display: block; width: 6px; height: 11px; margin: 2px 0 0 7px;
  border: solid #0A0C0A; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.pls-scheda .spunta input:focus-visible + i, .dv-scheda .spunta input:focus-visible + i { outline: 2px solid var(--acid); outline-offset: 2px; }
.pls-scheda:has(.spunta input:checked), .dv-scheda:has(.spunta input:checked) { border-color: var(--acid); box-shadow: 0 0 0 1px var(--acid); }

/* =====================================================================
   Elenco delle playlist
   ===================================================================== */
.pls-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.pls-scheda {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line); min-width: 0;
  transition: border-color .15s ease, transform .15s ease;
}
.pls-scheda:hover { border-color: rgba(255,255,255,.2); }
[data-theme="light"] .pls-scheda:hover { border-color: rgba(20,23,15,.25); }
.pls-scheda.libera { border-style: dashed; }
.pls-spunta { top: 24px; left: 24px; }
.pls-striscia { display: flex; gap: 6px; height: 92px; text-decoration: none; }
.pls-foto {
  position: relative; flex: 1 1 0; min-width: 0; border-radius: 8px; overflow: hidden; background: #0A0C0A;
  display: grid; place-items: center;
}
.pls-striscia.verticale .pls-foto { flex: 0 0 52px; }
.pls-foto img, .pls-foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pls-foto.app { background: rgba(183,140,240,.16); }
.pls-foto.app b { padding: 6px; font-size: .68rem; font-weight: 600; color: #D9C4FA; text-align: center; line-height: 1.2; word-break: break-word; }
.pls-foto em { position: absolute; right: 6px; bottom: 5px; font-style: normal; font-size: .68rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.pls-play { position: absolute; left: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: .5rem; font-style: normal; }
.pls-altri { flex: 0 0 50px; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; font-size: .85rem; color: var(--muted); }
.pls-niente { flex: 1; border-radius: 8px; border: 1px dashed var(--line); display: grid; place-items: center; font-size: .85rem; color: var(--faint); }
.pls-titolo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pls-titolo h2 { margin: 0 0 4px; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pls-titolo h2 a { color: var(--text); text-decoration: none; }
.pls-titolo h2 a:hover { color: var(--acid-text); }
.pls-meta { font-size: .84rem; color: var(--muted); }
.pls-verso { flex: none; padding: 4px 10px; border-radius: 99px; font-size: .66rem; font-weight: 700; letter-spacing: .05em; border: 1px solid var(--line); color: var(--muted); }
.pls-giro { display: flex; gap: 2px; height: 6px; border-radius: 99px; overflow: hidden; }
.pls-giro span { flex: 1 1 0; min-width: 2px; }
.pls-giro span.con-fascia { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3) 0 3px, transparent 3px 6px) !important; }
.pls-piede { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.pls-dove { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pls-dove i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); flex: none; }
.pls-dove.spenta { color: var(--faint); }
.pls-manda { background: rgba(203,255,0,.12); border-color: var(--acid-line); color: var(--acid-text); font-weight: 600; }
.pls-quando { font-size: .76rem; color: var(--faint); margin-top: -6px; }
@media (max-width: 700px) {
  .pls-griglia { grid-template-columns: minmax(0, 1fr); }
  .vt-cerca { width: 100%; }
  .vt-azioni { width: 100%; }
  .vt-azioni .vt-alto { width: 100%; }
  .vt-sep, .vt-spazio { display: none; }
  .vt-filtri { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .vt-filtri::-webkit-scrollbar { display: none; }
}

/* =====================================================================
   Dispositivi: contatori, avvisi e schede
   ===================================================================== */
.dv-contatori { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.dv-conta {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-radius: 18px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color .15s ease;
}
.dv-conta:hover { border-color: rgba(255,255,255,.22); }
[data-theme="light"] .dv-conta:hover { border-color: rgba(20,23,15,.25); }
.dv-conta span { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }
.dv-conta span i { width: 8px; height: 8px; border-radius: 50%; }
.dv-conta span i.online { background: var(--acid); }
.dv-conta span i.offline { background: var(--down); }
.dv-conta span i.attenzione { background: var(--wait); }
.dv-conta b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1; }
.dv-conta.on { background: rgba(203,255,0,.08); border-color: var(--acid-line); }
.dv-conta.rosso b { color: var(--err-text); }
.dv-conta.giallo b { color: #F5C94A; }
[data-theme="light"] .dv-conta.giallo b { color: #9A6A00; }

.dv-avviso { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 16px; margin-bottom: 14px; font-size: .9rem; line-height: 1.5; }
.dv-avviso.rosso { background: rgba(255,95,82,.08); border: 1px solid rgba(255,95,82,.35); }
.dv-avviso.giallo { background: rgba(245,179,1,.08); border: 1px solid rgba(245,179,1,.35); }
.dv-avviso .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.dv-avviso.rosso .ico { background: rgba(255,95,82,.16); color: var(--err-text); }
.dv-avviso.giallo .ico { background: rgba(245,179,1,.16); color: #F5C94A; }
.dv-avviso .ico svg { width: 18px; height: 18px; }
.dv-avviso .testo { flex: 1; min-width: 0; }
.dv-avviso .testo b { font-weight: 600; }
.dv-avviso-link { font-weight: 600; white-space: nowrap; text-decoration: none; }
.dv-etich { font-size: .82rem; color: var(--faint); margin-right: 2px; }
.dv-azzera { font-size: .84rem; color: var(--muted); }

.dv-gruppo { margin-bottom: 28px; }
.dv-gruppo h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: 1.2rem; }
.dv-gruppo h2 span { font-family: var(--font); font-weight: 400; font-size: .84rem; color: var(--muted); }
.dv-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.dv-scheda {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 18px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); transition: border-color .15s ease;
}
.dv-scheda:hover { border-color: rgba(255,255,255,.2); }
[data-theme="light"] .dv-scheda:hover { border-color: rgba(20,23,15,.25); }
.dv-scheda[data-stato="offline"] { border-color: rgba(255,95,82,.45); }
.dv-scheda[data-stato="attenzione"] { border-color: rgba(245,179,1,.45); }
.dv-spunta { top: 20px; right: 20px; }
.dv-schermo { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #0A0C0A; text-decoration: none; }
.dv-quadro { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #111; }
.dv-quadro.verticale { width: auto; height: 92%; aspect-ratio: 9 / 16; border-radius: 4px; }
.dv-quadro.spento { opacity: .35; }
.dv-quadro img, .dv-quadro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv-zone { position: absolute; inset: 6%; }
.dv-zone i { position: absolute; box-sizing: border-box; border-radius: 3px; background: rgba(127,178,229,.55); border: 1px solid rgba(10,12,10,.6); }
.dv-vuoto { position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; color: var(--faint); }
.dv-vuoto.app { color: #C9A9F5; background: rgba(183,140,240,.12); }
.dv-velo { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; font-size: .84rem; color: #FF9C93; background: rgba(6,4,4,.72); }
.dv-velo.grigio { color: #C9CEC9; background: rgba(6,4,4,.55); }
.dv-pillola {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; background: rgba(6,4,4,.8); border: 1px solid rgba(255,255,255,.12);
}
.dv-pillola i { width: 6px; height: 6px; border-radius: 50%; }
.dv-pillola.online { color: #CBFF00; } .dv-pillola.online i { background: #CBFF00; }
.dv-pillola.offline { color: #FF5F52; border-color: rgba(255,95,82,.55); } .dv-pillola.offline i { background: #FF5F52; }
.dv-pillola.attenzione { color: #F5B301; border-color: rgba(245,179,1,.55); } .dv-pillola.attenzione i { background: #F5B301; }
.dv-nome { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dv-nome h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-nome h3 a { color: var(--text); text-decoration: none; }
.dv-nome h3 a:hover { color: var(--acid-text); }
.dv-nome span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-onda { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; background: var(--panel-2); font-size: .82rem; min-width: 0; }
.dv-onda svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.dv-onda span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-problema { font-size: .8rem; color: #F5C94A; margin-top: -4px; }
[data-theme="light"] .dv-problema { color: #9A6A00; }
.dv-salute { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--muted); min-height: 32px; }
.dv-riempi { flex: 1; }
.dv-tasto {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); background: transparent; cursor: pointer; list-style: none; box-sizing: border-box;
}
.dv-tasto::-webkit-details-marker { display: none; }
.dv-tasto:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.dv-tasto svg { width: 15px; height: 15px; }
.dv-menu { position: relative; }
.dv-menu-pop {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; width: 210px; display: flex; flex-direction: column; padding: 6px;
  background: #151815; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
[data-theme="light"] .dv-menu-pop { background: #fff; }
.dv-menu-pop button, .dv-menu-pop a {
  text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-size: .86rem; cursor: pointer; text-decoration: none;
}
.dv-menu-pop button:hover, .dv-menu-pop a:hover { background: var(--panel-2); }

@media (max-width: 1100px) { .dv-contatori { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Telefono: le schede diventano righe compatte, i problemi restano in vista */
@media (max-width: 700px) {
  .dv-contatori { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .dv-conta { padding: 10px 8px; border-radius: 12px; align-items: center; text-align: center; }
  .dv-conta span { font-size: .7rem; gap: 4px; }
  .dv-conta span i { display: none; }
  .dv-conta b { font-size: 1.4rem; }
  .dv-avviso { flex-wrap: wrap; }
  .dv-griglia { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dv-scheda { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; padding: 10px; border-radius: 14px; align-items: center; }
  .dv-schermo { grid-row: 1 / 4; width: 76px; border-radius: 8px; }
  .dv-pillola { top: auto; bottom: 4px; left: 4px; padding: 0; width: 10px; height: 10px; border: 0; background: transparent; }
  .dv-pillola span { display: none; }
  .dv-pillola i { width: 9px; height: 9px; box-shadow: 0 0 0 2px rgba(6,4,4,.8); }
  .dv-velo { display: none; }
  .dv-nome h3 { font-size: .98rem; }
  .dv-onda { padding: 0; background: none; font-size: .78rem; color: var(--muted); }
  .dv-onda svg { display: none; }
  .dv-problema { margin: 0; grid-column: 2; }
  .dv-salute { grid-column: 1 / -1; min-height: 0; }
  .dv-salute .dv-tasto { width: 36px; height: 36px; }
  .dv-spunta { top: 8px; right: 8px; }
  .vista-scelta { display: none; }
}
.nav-conta { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.07); color: inherit; opacity: .85; }
.rail a.on .nav-conta { background: rgba(16,20,0,.16); }
.dv-salute > span { white-space: nowrap; }
.ed-frecce { display: none; gap: 4px; }
.ed-frecce button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 1rem; cursor: pointer; }
@media (max-width: 900px) {
  .ed-frecce { display: inline-flex; margin-left: auto; }
}
@media (max-width: 700px) {
  .dv-vuoto { font-size: .62rem; padding: 2px; text-align: center; }
}

/* ---------- accesso: logo per tema e verifica "non sono un robot" ---------- */
.logo-login .per-chiaro { display: none; }
[data-theme="light"] .logo-login .per-scuro { display: none; }
[data-theme="light"] .logo-login .per-chiaro { display: block; }
.trappola { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.umano {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; margin: 2px 0 4px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease;
}
.umano:hover { border-color: rgba(255,255,255,.25); }
[data-theme="light"] .umano:hover { border-color: rgba(20,23,15,.3); }
.umano:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.umano-casella {
  position: relative; width: 28px; height: 28px; flex: none; border-radius: 7px;
  border: 2px solid var(--muted); background: var(--panel); display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.umano-casella svg { position: absolute; width: 22px; height: 22px; opacity: 0; transition: opacity .2s ease; }
.umano-giro { color: var(--acid-text); }
.umano.in-corso .umano-casella { border-color: transparent; background: transparent; }
.umano.in-corso .umano-giro { opacity: 1; animation: umano-gira .8s linear infinite; }
.umano.ok .umano-casella { background: var(--acid); border-color: var(--acid); }
.umano.ok .umano-spunta { opacity: 1; color: var(--on-acid); }
.umano.ok { border-color: var(--acid-line); cursor: default; }
@keyframes umano-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .umano.in-corso .umano-giro { animation-duration: 2.4s; } }
.umano-testo { flex: 1; font-size: .95rem; }
.umano-marchio { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); }
.umano-marchio svg { width: 22px; height: 22px; }
.umano-marchio small { font-size: .58rem; line-height: 1.15; text-align: center; letter-spacing: .02em; }
.umano-nota { margin: 0; font-size: .74rem; color: var(--faint); text-align: center; }

/* Wi-Fi: consigli e banda preferita */
.wifi-consigli ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}
.wifi-banda{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.wifi-banda h3{margin:0 0 10px;font-size:1rem}
.wifi-banda-scelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}
.wifi-banda-scelta{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.wifi-banda-scelta input{position:absolute;opacity:0;pointer-events:none}
.wifi-banda-scelta:has(input:checked){border-color:var(--acid);background:var(--acid-glow)}
.wifi-banda-scelta:has(input:focus-visible){outline:2px solid var(--acid);outline-offset:2px}
.wifi-banda-scelta .muted{font-size:.82rem}

/* Dispositivi: player da aggiornare */
.dv-conta span i.aggiornare { background: #5AB0FF; }
.dv-conta.blu b { color: #7CC0FF; }
[data-theme="light"] .dv-conta.blu b { color: #1F6FB8; }
.dv-aggiorna-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; margin-bottom: 14px;
  border-radius: 16px; border: 1px solid rgba(90,176,255,.40); background: rgba(90,176,255,.08); font-size: .9rem; line-height: 1.45; }
.dv-aggiorna-banner svg { width: 20px; height: 20px; flex: none; color: #7CC0FF; }
.dv-aggiorna-banner > span { flex: 1 1 260px; min-width: 0; }
[data-theme="light"] .dv-aggiorna-banner svg { color: #1F6FB8; }
.dv-aggiorna { display: flex; align-items: center; gap: 10px; margin-top: -4px; font-size: .8rem; color: #7CC0FF; min-width: 0; }
[data-theme="light"] .dv-aggiorna { color: #1F6FB8; }
.dv-aggiorna span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-aggiorna button { flex: none; padding: 4px 10px; border-radius: 8px; border: 1px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.dv-aggiorna button:hover { background: rgba(90,176,255,.14); }
.dv-agg-testo { color: #7CC0FF; }
[data-theme="light"] .dv-agg-testo { color: #1F6FB8; }
@media (max-width: 640px) { .dv-aggiorna { margin: 0; grid-column: 2; } }
.dv-contatori.cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dv-contatori.cinque { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .dv-contatori.cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .dv-contatori.cinque .dv-conta { padding: 9px 4px; }
  .dv-contatori.cinque .dv-conta span { font-size: .62rem; }
  .dv-aggiorna-banner .btn { flex: 1 1 auto; }
}

/* Menu: invito al costruttore libero */
.ml-invito { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ml-invito-testo { flex: 1 1 360px; min-width: 0; }
.ml-invito h2 { display: flex; align-items: center; gap: 10px; }
.ml-invito p { margin: 0; font-size: .9rem; line-height: 1.55; }
.ml-invito.acceso { border-color: var(--acid-line); }

/* Trasloco */
.trasloco-passi { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .92rem; line-height: 1.55; }
.trasloco-conti { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.trasloco-conti b { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); margin-right: 4px; }
.trasloco-conti .giallo b { color: #F5C94A; }
.trasloco-conti .rosso b { color: var(--err-text); }

/* Storico dei comandi nella scheda del dispositivo */
.cmd-stato { font-style: normal; font-size: .8rem; color: var(--muted); }
.cmd-stato.ok { color: var(--ok-text, #9BD64A); }
.cmd-stato.attesa, .cmd-stato.coda { color: #F5C94A; }
[data-theme="light"] .cmd-stato.attesa, [data-theme="light"] .cmd-stato.coda { color: #9A6A00; }
.cmd-risposta { display: block; margin-top: 3px; font-size: .8rem; color: var(--muted); }
.cmd-risposta::before { content: '↳ '; }