:root {
    color-scheme: light;
    /* --- tavolozza del prototipo (12/08/2026): verde bosco al posto del lime,
       fondo caldo #eef1ea, quasi niente ombra — la profondità la fanno i bordi --- */
    --verde:        #1b9e4b;
    --verde-scuro:  #1b7a3d;
    --verde-tenue:  #e6f4e9;
    --verde-bordo:  #cfe6d6;
    /* --- superfici e inchiostri --- */
    --page:      #eef1ea;
    --surface:   #ffffff;
    --surface-2: #fbfcfa;
    --ink:       #14181a;
    --ink-2:     #4c5256;
    --ink-3:     #82898d;
    --grid:      #e6e8e1;
    --border:    #e3e6de;
    /* --- serie dati (validate su superficie chiara) --- */
    --fv:   #e0a020;
    --batt: #1b9e4b;
    --rete: #2563eb;
    --casa: #7c5cd6;
    /* --- stati --- */
    --ok: #14532b;  --ok-bg: #e6f4e9;  --ok-bordo: #cfe6d6;
    --err: #7c2420; --err-bg: #fcf2f1; --err-bordo: #f0d4d1;
    --warn: #8a5a10; --warn-bg: #fdf8ec; --warn-bordo: #f0e0be;
    /* pallini di stato: più saturi del testo, che sui fondi tenui deve stare scuro */
    --ok-dot: #1b9e4b; --err-dot: #c0392b; --warn-dot: #d69412;
    /* --- forma --- */
    --r-card: 12px; --r-tile: 10px; --r-pill: 50px;
    --ombra:      0 1px 2px rgba(20,24,26,.03);
    --ombra-alta: 0 2px 6px rgba(20,24,26,.06), 0 14px 40px rgba(20,24,26,.14);
    --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  /* ===== tema scuro: step ricalcolati sulla superficie scura, non un'inversione ===== */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --verde:        #2fb35e;
    --verde-scuro:  #27a251;
    --verde-tenue:  #142a1b;
    --verde-bordo:  #275238;
    --page:      #0f1319;
    --surface:   #151a21;
    --surface-2: #1b2129;
    --ink:       #eef1f4;
    --ink-2:     #aab3bd;
    --ink-3:     #79838f;
    --grid:      #27303a;
    --border:    #232b35;
    --fv:   #d29a26;
    --batt: #2fb35e;
    --rete: #4f83ef;
    --casa: #9585e5;
    --ok: #43c07f;  --ok-bg: #12281f;  --ok-bordo: #23543c;
    --err: #ef5350; --err-bg: #2a1618; --err-bordo: #5a2a2a;
    --warn: #e0a33a; --warn-bg: #2a2114; --warn-bordo: #5a4522;
    --ok-dot: #2fb35e; --err-dot: #ef5350; --warn-dot: #e0a33a;
    --ombra:      0 1px 2px rgba(0,0,0,.30);
    --ombra-alta: 0 2px 6px rgba(0,0,0,.38), 0 16px 34px rgba(0,0,0,.46);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--page); color: var(--ink);
    font: 400 14.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
    transition: background .2s, color .2s;
  }
  a { color: var(--verde-scuro); text-decoration: none; }
  :root[data-theme="dark"] a { color: var(--verde); }
  h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; margin: 0; }

  /* ---------- header ---------- */
  .topbar { background: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20; }
  .topbar .inner { max-width: 1240px; margin: 0 auto; padding: 11px 26px;
    display: flex; align-items: center; gap: 14px; }
  .logo { display: flex; align-items: center; gap: 10px; }
  .logo .mark { width: 30px; height: 30px; border-radius: 8px; flex: none;
    background: var(--verde-scuro); display: grid; place-items: center; }
  .logo .wm { font-weight: 700; font-size: 14px; letter-spacing: -.01em; line-height: 1.1; color: var(--ink); }
  .logo .wm span { color: var(--verde-scuro); }
  :root[data-theme="dark"] .logo .wm span { color: var(--verde); }
  .logo .sub { display: block; font-weight: 500; font-size: 8.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
  /* briciole di pane accanto al marchio, separate da un filo verticale */
  .crumbs { display: flex; align-items: center; gap: 9px; font-size: 12.5px;
    font-weight: 500; color: var(--ink-2); }
  .crumbs::before { content: ""; width: 1px; height: 22px; background: var(--border);
    margin-right: 4px; }
  .crumbs .sep { color: var(--ink-3); opacity: .6; }
  .topbar .spacer { flex: 1; }
  .topbar nav { display: flex; align-items: center; gap: 6px; }
  .navlink { font-size: 13px; font-weight: 500; color: var(--ink-2);
    padding: 7px 13px; border-radius: var(--r-pill); white-space: nowrap; }
  .navlink:hover { background: var(--surface-2); color: var(--ink); }
  .tema { background: transparent; border: 1px solid var(--border); color: var(--ink-2);
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid;
    place-items: center; transition: background .15s, color .15s, border-color .15s; }
  .tema:hover { background: var(--surface-2); color: var(--ink); border-color: var(--verde); }

  .wrap { max-width: 1240px; margin: 0 auto; padding: 26px 26px 64px; }
  .pagehead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
  .pagehead h1 { font-size: 23px; }
  .pagehead .oc { color: var(--ink-3); font-size: 13px; }
  .pagehead .spacer { flex: 1; }

  /* ---------- card ---------- */
  .card { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); box-shadow: var(--ombra); padding: 20px 22px; }
  .card + .card { margin-top: 16px; }
  .card > h2 { font-size: 15px; }
  .card > .sub { color: var(--ink-3); font-size: 12.5px; margin: 3px 0 16px; }
  .cardhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .cardhead h2 { font-size: 15px; }
  .cardhead .sub { color: var(--ink-3); font-size: 12.5px; margin: 2px 0 0; }
  .cardhead .spacer { flex: 1; }

  /* ---------- badge ---------- */
  .badge { display: inline-flex; align-items: center; gap: 6px; flex: none;
    font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill);
    padding: 3px 11px 3px 9px; border: 1px solid transparent; }
  .badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .badge.ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-bordo); }
  .badge.err  { background: var(--err-bg);  color: var(--err);  border-color: var(--err-bordo); }
  .badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bordo); }
  .badge.ok .dot { background: var(--ok-dot); box-shadow: 0 0 0 3px rgba(27,158,75,.20); }
  .badge.err .dot { background: var(--err-dot); }
  .badge.warn .dot { background: var(--warn-dot); }

  /* ---------- griglia impianti ---------- */
  .plants { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
  .plant { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); box-shadow: var(--ombra);
    padding: 18px 20px 16px; position: relative; overflow: hidden;
    transition: box-shadow .18s, transform .18s, border-color .18s; }
  .plant::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: linear-gradient(180deg, var(--verde), var(--verde-scuro));
    opacity: 0; transition: opacity .18s; }
  .plant:hover { box-shadow: var(--ombra-alta); transform: translateY(-2px); border-color: var(--verde-bordo); }
  .plant:hover::before { opacity: 1; }
  .plant .row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
  .plant .nome { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
  .plant .nome:hover { color: var(--verde-scuro); }
  :root[data-theme="dark"] .plant .nome:hover { color: var(--verde); }
  .plant .meta { font-size: 11.5px; color: var(--ink-3); margin-bottom: 15px; }
  .tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
    border-radius: var(--r-pill); padding: 2px 9px; margin-right: 5px; }
  .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .tile { background: var(--surface-2); border-radius: var(--r-tile); padding: 9px 11px; }
  .tile .l { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); display: flex; align-items: center; gap: 4px; }
  .tile .l i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
  .tile .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
    margin-top: 3px; color: var(--ink); }
  /* contatori fiscali al POD: totali da inizio vita, riga discreta sotto le tile */
  .contatori { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px;
    margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
  .contatori strong { color: var(--ink-2); font-weight: 700;
    font-variant-numeric: tabular-nums; }
  .btn-x { background: transparent; border: 0; color: var(--ink-3); cursor: pointer;
    font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 8px; }
  .btn-x:hover { background: var(--err-bg); color: var(--err); }

  /* ---------- KPI ---------- */
  .kpi-list { display: flex; flex-direction: column; gap: 10px; }
  .kpi { background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-tile); padding: 12px 15px; }
  .kpi .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .kpi .l { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
  .kpi .l i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
  .kpi .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .kpi .hint { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
  .bar { height: 8px; border-radius: 5px; background: var(--grid); overflow: hidden; margin-top: 9px; }
  .bar i { display: block; height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--verde-scuro), var(--verde)); transition: width .7s ease; }

  /* contatori energia del periodo */
  .energia { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-bottom: 16px; }
  .en { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-tile); padding: 11px 13px; }
  .en .l { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
  .en .l i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
  .en .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
  .en .u { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }

  /* tempo sul posto: l'icona allineata al numero, non appoggiata sulla riga di base */
  .kpi .v.meteo { display: inline-flex; align-items: center; gap: 8px; }
  .kpi .v.meteo svg { color: var(--ink-3); flex: none; }
  /* il riquadro è un pulsante che apre la settimana: deve dirlo, altrimenti nessuno
     scopre che si clicca */
  button.kpi { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border); }
  button.kpi:hover { border-color: var(--verde); }
  button.kpi .apri { font-size: 11px; color: var(--verde-scuro); font-weight: 600; }
  :root[data-theme="dark"] button.kpi .apri { color: var(--verde); }

  /* catalogo modelli: tabella larga, si scorre nel suo riquadro e non sborda la pagina */
  .tabella-scroll { overflow-x: auto; margin-top: 12px; }
  table.modelli { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 860px; }
  table.modelli th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-3); padding: 8px 10px;
    border-bottom: 1px solid var(--border); white-space: nowrap; }
  table.modelli td { padding: 9px 10px; border-bottom: 1px solid var(--border);
    vertical-align: top; font-variant-numeric: tabular-nums; }
  table.modelli td.note { color: var(--ink-3); font-size: 11.5px; max-width: 260px; }
  table.modelli td.azioni { white-space: nowrap; text-align: right; }
  table.modelli tr.sel td { background: var(--surface-2); }
  /* foto: piccola in tabella, il riquadro bianco aiuta i PNG col fondo trasparente */
  table.modelli td.foto { width: 56px; }
  table.modelli td.foto img { width: 48px; height: 48px; object-fit: contain;
    background: #fff; border: 1px solid var(--border); border-radius: 8px; }
  img.anteprima { width: 72px; height: 72px; object-fit: contain; background: #fff;
    border: 1px solid var(--border); border-radius: 10px; }
  /* la foto nel pannello dell'apparecchio, accanto al titolo */
  .dettnodo img.fotoapparecchio { width: 64px; height: 64px; object-fit: contain;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    margin-right: 14px; flex: none; }

  /* hamburger e menù laterale */
  .hamburger { background: transparent; border: 1px solid var(--border); color: var(--ink-2);
    border-radius: 10px; width: 36px; height: 36px; display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; margin-right: 12px; flex: none; }
  .hamburger:hover { color: var(--ink); border-color: var(--ink-3); }
  dialog.menu { position: fixed; margin: 0; inset: 0 auto 0 0; height: 100dvh; max-height: none;
    width: min(280px, 84vw); border: 0; border-right: 1px solid var(--border);
    border-radius: 0 var(--r-card) var(--r-card) 0; padding: 18px 14px;
    background: var(--surface); color: var(--ink); box-shadow: 12px 0 40px rgba(0,0,0,.18); }
  dialog.menu::backdrop { background: rgba(8,12,18,.45); }
  dialog.menu nav { display: flex; flex-direction: column; gap: 2px; }
  dialog.menu .voce { display: block; padding: 11px 14px; border-radius: 10px; font-size: 14px;
    font-weight: 500; color: var(--ink-2); text-decoration: none; }
  dialog.menu .voce:hover { background: var(--surface-2); color: var(--ink); }
  dialog.menu .sep { height: 1px; background: var(--border); margin: 10px 6px; }

  /* finestra modale: la scheda, ma sopra il resto */
  dialog.dialogo { background: var(--surface); color: var(--ink); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 20px; width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
  dialog.dialogo::backdrop { background: rgba(8,12,18,.55); backdrop-filter: blur(2px); }
  /* il pulsante di chiusura è l'unico modo ovvio con il mouse: Esc lo sanno in pochi */
  dialog.dialogo .cardhead { margin-bottom: 16px; }

  /* previsioni della settimana */
  .settimana { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .giorno { border: 1px solid var(--border); border-radius: var(--r-tile); padding: 10px 8px;
    text-align: center; background: var(--surface-2); }
  .giorno.oggi { border-color: var(--verde); background: var(--surface); }
  .giorno .d { font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3); }
  .giorno .i { margin: 6px 0 2px; color: var(--ink-2); min-height: 34px; }
  /* altezza fissa e non minima: "Sereno" sta su una riga e "Temporale con grandine" su
     tre, e senza questo vincolo i riquadri della stessa fila finiscono sfalsati in basso.
     40px = tre righe a 10,5px con interlinea 1,25. */
  .giorno .c { font-size: 10.5px; color: var(--ink-3); height: 40px; line-height: 1.25;
    overflow: hidden; }
  .giorno .t { margin-top: 6px; font-variant-numeric: tabular-nums; }
  .giorno .t strong { font-size: 16px; }
  .giorno .t span { font-size: 13px; color: var(--ink-3); margin-left: 5px; }
  /* i kWh attesi sono la ragione di questa tabella: si vedono più della temperatura */
  .giorno .k { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
    font-size: 15px; font-weight: 700; color: var(--verde-scuro);
    font-variant-numeric: tabular-nums; }
  :root[data-theme="dark"] .giorno .k { color: var(--verde); }
  .giorno .k span { font-size: 10.5px; font-weight: 600; color: var(--ink-3); margin-left: 3px; }
  .giorno .k.vuoto { color: var(--ink-3); font-weight: 600; font-size: 12px; }

  /* diagnostica di rete: il pallino dice l'esito prima che si legga il testo */
  .dati dt .esito { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 7px; vertical-align: 1px; }
  .dati dt .esito.ok { background: var(--verde); }
  .dati dt .esito.warn { background: #e2a615; }
  .dati dt .esito.male { background: #d64545; }

  /* mappa del sito */
  .mappa { border: 1px solid var(--border); border-radius: var(--r-tile); overflow: hidden;
    background: var(--surface-2); }
  .mappa iframe { display: block; width: 100%; height: 300px; border: 0; }
  /* la mappa è chiara anche col tema scuro: si smorza invece di restare abbagliante */
  :root[data-theme="dark"] .mappa iframe { filter: brightness(.82) contrast(1.06); }

  /* ricerca impianti: pensata per quando saranno cento, non due */
  .cerca { display: inline-flex; align-items: center; gap: 4px; }
  .cerca input { width: 260px; padding: 7px 12px; font-size: 13px; border-radius: 999px; }
  @media (max-width: 700px) { .cerca input { width: 100%; } .cerca { flex: 1; } }

  /* atteso dal meteo: sta sotto i contatori e non fra di loro, perché non è una
     misura dell'impianto ma un confronto — due cose che non vanno lette come pari */
  .atteso { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px; margin-bottom: 16px; }

  /* ---------- form ---------- */
  input, select { background: var(--surface); color: var(--ink); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 13px; font: inherit; font-size: 14px; width: 100%;
    transition: border-color .15s, box-shadow .15s; }
  input:focus, select:focus { outline: none; border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(27,158,75,.16); }
  label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
  /* Le celle di una riga vanno allineate sui CAMPI, non sui bordi della cella.
     Allineare il fondo (align-items:end) reggeva finché ogni cella finiva col
     suo campo, ma una cella che ha l'aiuto sotto viene tirata su di tutta
     l'altezza dell'aiuto: su Carnino "Potenza al POD" stava visibilmente più in
     alto delle tre celle accanto. Allineare l'alto sposta il problema
     sull'etichetta che va a capo — ed è il motivo per cui c'era `end`.
     Si risolvono entrambi riservando all'etichetta l'altezza di due righe (il
     caso peggiore) e appoggiandola in basso: i campi partono alla stessa quota
     comunque sia fatta l'etichetta, e l'aiuto scende sotto senza spostare nulla. */
  .fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; align-items: start; }
  .fgrid > * > label { display: flex; align-items: flex-end; min-height: 2.4em; }
  button.primary { background: var(--verde-scuro); color: #fff; border: 0; border-radius: var(--r-pill);
    padding: 11px 26px; font: inherit; font-weight: 700; font-size: 14px; letter-spacing: .3px;
    cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s;
    box-shadow: 0 4px 12px rgba(27,122,61,.20); }
  button.primary:hover { background: var(--verde); box-shadow: 0 6px 18px rgba(27,158,75,.32); }
  button.primary:active { transform: translateY(1px); }
  button.primary:disabled { opacity: .5; cursor: default; box-shadow: none; }
  button.primary:disabled:hover { background: var(--verde-scuro); }
  button.navlink { background: transparent; border: 0; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 500; }
  /* nome impianto in modifica: larghezza del titolo, non del contenitore */
  input.rinomina { width: auto; min-width: 280px; font-size: 19px; font-weight: 700; padding: 6px 11px; }
  /* proposte ricavate dalla telemetria */
  .rilevati { background: var(--verde-tenue); border: 1px solid var(--verde-bordo);
    border-radius: var(--r-tile); padding: 14px 16px; margin-bottom: 16px; }
  .rilevati .meta { font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }

  /* assegnazione impianti a un utente */
  .perm { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
    text-transform: none; letter-spacing: 0; color: var(--ink-2); margin-bottom: 4px; }
  .perm input { width: auto; }
  .riga-azioni { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

  /* ---------- tabella dello storico ---------- */
  table.storico { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.storico th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-3); padding: 0 10px 8px 0; white-space: nowrap; }
  table.storico td { padding: 7px 10px 7px 0; border-top: 1px solid var(--border);
    color: var(--ink-2); white-space: nowrap; }
  table.storico .n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }

  /* ---------- prezzi del mercato ---------- */
  .prezzi { display: flex; align-items: flex-end; gap: 1px; height: 150px; margin-top: 14px;
    padding: 0 2px; border-bottom: 1px solid var(--border); }
  .prezzi .q { flex: 1; min-width: 2px; background: var(--border);
    border-radius: 2px 2px 0 0; transition: background .15s; }
  .prezzi .q { cursor: pointer; }
  .prezzi .q:hover { filter: brightness(.85); }
  .prezzi .q:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
  .prezzi .q.scarica { background: var(--rete); }
  .prezzi .q.carica { background: var(--batt); }
  /* La barra scelta si segna con un contorno, non sostituendo il colore: così si
     vede insieme se è dentro un blocco del piano. E l'outline non è nella lista
     della transizione, quindi compare subito. */
  .prezzi .q.scelto { outline: 2px solid var(--ink); outline-offset: 1px;
    position: relative; z-index: 1; }
  .letturaq { font-size: 12.5px; color: var(--ink-2); margin-top: 10px;
    min-height: 19px; font-variant-numeric: tabular-nums; }
  .assex { display: flex; justify-content: space-between; font-size: 10.5px;
    color: var(--ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .legenda { display: flex; gap: 16px; font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
  .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    margin-right: 5px; vertical-align: -1px; }
  .legenda i.scarica { background: var(--rete); }
  .legenda i.carica { background: var(--batt); }
  textarea { width: 100%; background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px;
    font: inherit; font-size: 13px; font-family: ui-monospace, monospace; resize: vertical; }
  textarea:focus { outline: none; border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(27,158,75,.16); }

  /* selettore periodo (segmented control) */
  .periodi { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 3px; gap: 2px; }
  .periodi button { background: transparent; border: 0; color: var(--ink-2); cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px;
    border-radius: var(--r-pill); transition: background .15s, color .15s; white-space: nowrap; }
  .periodi button:hover { color: var(--ink); }
  .periodi button[aria-pressed="true"] { background: var(--verde-scuro); color: #fff;
    box-shadow: 0 2px 8px rgba(27,122,61,.24); }
  :root[data-theme="dark"] .periodi button[aria-pressed="true"] { background: var(--verde); color: #0f1319; }

  /* ---------- console impianto (versione definitiva del progetto di design) ----------
     La striscia dei numeri risponde a "sta funzionando?"; l'area a schede tiene
     flusso, schema, apparecchi, diagnostica e posizione nello stesso riquadro. */
  .striscia { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; margin-bottom: 16px; }
  .striscia .cella { background: var(--surface); padding: 14px 16px; min-width: 0; }
  .striscia .l { font-size: 10px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
  .striscia .l i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
  .striscia .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; white-space: nowrap; }
  .striscia .hint { font-size: 11px; color: var(--ink-3); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .striscia .bar.soc { max-width: 120px; margin-top: 5px; margin-bottom: 4px; height: 6px; }
  /* la salute: una riga intera sotto i numeri, pallino + frase, mai solo colore */
  .striscia .salute { background: var(--surface-2); grid-column: 1 / -1; padding: 12px 16px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
  .striscia .salute .voce { display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  .striscia .salute .voce .oc { font-weight: 400; }
  .striscia .salute .pall { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .striscia .salute .pall.ok { background: var(--verde); }
  .striscia .salute .pall.warn { background: var(--warn); }
  .striscia .salute .pall.err { background: var(--err); }

  .congrid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
  /* schema, apparecchi e diagnostica prendono tutta la riga: la colonna
     destra scende sotto, su due colonne */
  .congrid.larga { grid-template-columns: 1fr; }
  @media (max-width: 1020px) { .congrid { grid-template-columns: 1fr; } }
  .coldx { display: flex; flex-direction: column; }
  .coldx.larga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .coldx.larga .card + .card { margin-top: 0; }
  @media (max-width: 1020px) { .coldx.larga { grid-template-columns: 1fr; }
    .coldx.larga .card + .card { margin-top: 16px; } }
  /* allarmi e configurazione appaiati; il margine di "card dopo card" qui
     disallineerebbe la seconda cella della griglia */
  .duegrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px; align-items: start; }
  .duegrid > .card + .card { margin-top: 0; }
  @media (max-width: 1020px) { .duegrid { grid-template-columns: 1fr; } }

  /* l'area di lavoro a schede: la scheda attiva è una linguetta della cartella */
  .tabcard { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); box-shadow: var(--ombra); overflow: hidden; }
  .tabbar { display: flex; align-items: center; gap: 4px; padding: 10px 14px 0;
    border-bottom: 1px solid var(--border); }
  .tabbar button { background: transparent; border: 0; color: var(--ink-2); cursor: pointer;
    font: 600 12.5px var(--sans); padding: 9px 16px; white-space: nowrap; }
  .tabbar button:hover { color: var(--ink); }
  .tabbar button.attiva { background: var(--surface-2); border: 1px solid var(--border);
    border-bottom-color: var(--surface-2); color: var(--ink); border-radius: 10px 10px 0 0;
    margin-bottom: -1px; }
  .tabbar .nota { font-size: 11px; color: var(--ink-3); padding-right: 6px; white-space: nowrap; }
  .tabcorpo { padding: 14px 18px 18px; }
  .tabcorpo.diagnostica { min-height: 320px; }
  .tabcorpo.posizione { min-height: 560px; display: flex; flex-direction: column;
    justify-content: center; }
  .tabcorpo.posizione .mappa iframe { height: 470px; }

  /* righe della scheda "Oggi": come le specifiche, ma coi numeri grandi */
  .specs .k { display: flex; align-items: center; gap: 7px; }
  .specs .k i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
  .specs.grandi .v { font-size: 16px; font-weight: 700; }
  .specs .v .s { font-size: 11px; font-weight: 600; color: var(--ink-3); }
  /* il tempo e l'atteso di oggi, insieme: il cielo è la spiegazione dello scarto */
  .meteobox { margin-top: 12px; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-tile); padding: 12px 14px; }
  .meteobox .rigaalta { display: flex; align-items: center; gap: 12px; }
  .meteobox .icona { color: var(--ink-2); flex: none; display: grid; place-items: center; }
  .meteobox .chi { flex: 1; min-width: 0; }
  .meteobox .temp { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; }
  .meteobox .temp .cond { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-left: 4px; }
  .meteobox .hint { font-size: 11px; color: var(--ink-3); }
  .meteobox .atteso { text-align: right; flex: none; }
  .meteobox .atteso .l { font-size: 10px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); }
  .meteobox .atteso .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .meteobox .atteso .v .s { font-size: 11px; font-weight: 600; color: var(--ink-3); }
  .meteobox .atteso .scarto { font-size: 11px; font-weight: 600; color: var(--verde-scuro);
    font-variant-numeric: tabular-nums; }
  .meteobox .atteso .scarto.warn { color: var(--warn); }
  .meteobox .giudizio { font-size: 11px; color: var(--ink-3); margin-top: 8px;
    padding-top: 8px; border-top: 1px solid var(--border); }

  /* apparecchi per gruppo (proposta 2a): la fila di pallini è l'impianto in un colpo d'occhio */
  .apptesta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .apptesta .sub { color: var(--ink-3); font-size: 12.5px; }
  .gruppobox { border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    margin-bottom: 8px; }
  .gruppobox.warn { border-color: var(--warn-bordo); }
  .gtesta { display: flex; align-items: center; gap: 14px; padding: 13px 16px; flex-wrap: wrap; }
  .gruppobox.warn .gtesta { background: var(--warn-bg); }
  .gtesta .gicona { color: var(--ink-3); flex: none; display: grid; place-items: center; }
  .gtesta .gchi { flex: none; }
  .gtesta .gnome { font-size: 13.5px; font-weight: 700; }
  .gtesta .gmeta { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .pallini { display: flex; gap: 3px; align-items: center; margin-left: 8px; flex-wrap: wrap; }
  .pallini i { width: 9px; height: 9px; border-radius: 2px; background: var(--verde); }
  .pallini i.sotto { background: var(--warn); }
  .pallini i.muto { background: var(--err); }
  .pallini i.nd { background: var(--grid); }
  .gtesta .griass { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .gtesta .gtot { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .gcorpo { background: var(--surface); padding: 12px 16px 14px; display: grid;
    grid-template-columns: 1fr; gap: 6px; }
  .gcorpo.due { grid-template-columns: repeat(2, 1fr); gap: 6px 18px; }
  @media (max-width: 900px) { .gcorpo.due { grid-template-columns: 1fr; } }
  .gcorpo.sciolti { padding: 0; }
  .gcorpo .gnota { grid-column: 1 / -1; text-align: center; font-size: 12px;
    color: var(--ink-3); margin-top: 4px; }
  .invriga { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 11px; min-width: 0; }
  .invriga .pall { width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--verde); }
  .invriga.sotto { background: var(--warn-bg); border-color: var(--warn-bordo); }
  .invriga.sotto .pall { background: var(--warn); }
  .invriga.muto { background: var(--err-bg); border-color: var(--err-bordo); }
  .invriga.muto .pall { background: var(--err); }
  .invriga.nd .pall { background: var(--grid); }
  .invriga .inome { font-size: 12.5px; font-weight: 700; flex: none; }
  .invriga .imeta { font-size: 11px; color: var(--ink-3); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
  .invriga .istato { font-size: 11.5px; font-weight: 600; color: var(--ink-3); flex: none; }
  .invriga.sotto .istato { color: var(--warn); }
  .invriga.muto .istato { color: var(--err); }
  .invriga .ipot { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
    flex: none; }
  .invcella { min-width: 0; }
  .invriga { cursor: pointer; }
  .invriga:hover, .invriga.sel { border-color: var(--verde); }
  .invriga:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
  .invdett { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px;
    margin: 4px 6px 8px; padding: 10px 12px; border: 1px dashed var(--border);
    border-radius: 10px; background: var(--surface-2); }
  .invdett .e { font-size: 11px; color: var(--ink-3); }
  .invdett .v { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere; }

  /* i rimandi in fondo: quello che non sta in console, a un passo */
  .approfondimenti { display: flex; align-items: center; gap: 12px; margin-top: 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
    padding: 14px 20px; flex-wrap: wrap; }
  .approfondimenti .titolo { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .approfondimenti .sep { color: var(--border); }
  @media (max-width: 900px) { .tiles { grid-template-columns: repeat(2,1fr); } }
  /* bottone pillola a contorno, per le azioni della testata */
  .pillbtn { display: inline-flex; align-items: center; background: transparent;
    border: 1px solid var(--border); color: var(--ink-2); border-radius: var(--r-pill);
    padding: 6px 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    cursor: pointer; font-family: inherit; }
  .pillbtn:hover { border-color: var(--verde); color: var(--ink); }
  .pillbtn:disabled { opacity: .5; cursor: default; }
  .flowbox { position: relative; }

  /* ---------- scheda allarmi dell'impianto (proposta 3c) ----------
     colonne strette e data senza anno: la scheda convive con la configurazione
     sulla stessa riga, e sotto i 600px scorre dentro il suo riquadro */
  .tabella.alr .th, .tabella.alr .tr {
    grid-template-columns: 86px minmax(200px, 1.7fr) 132px 104px 64px; min-width: 600px; }

  /* ---------- sezione domotica ----------
     il canale porta sotto il nome la sua provenienza (slave e registro), quindi la
     prima colonna è la più larga; le tre della finestra 24 h sono numeri corti */
  .tabella.dom .th, .tabella.dom .tr {
    grid-template-columns: minmax(180px, 1.6fr) 1fr 1fr 0.8fr 0.8fr 0.8fr; }
  .tabella.dom .cosa small { color: var(--ink-3); font-size: 11px; font-weight: 400; }
  .tabella.dom-elenco .th, .tabella.dom-elenco .tr {
    grid-template-columns: 1fr 90px; min-width: 0; }
  .piede-allarmi { display: flex; align-items: center; gap: 12px; margin-top: 12px;
    padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
  /* paginazione della scheda allarmi: conteggio, frecce, righe per pagina */
  .pager { display: inline-flex; align-items: center; gap: 6px; }
  .pager .conta { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 4px; }
  .pager > button { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
    cursor: pointer; font: inherit; font-size: 15px; line-height: 1; width: 30px; height: 30px;
    border-radius: 8px; }
  .pager > button:disabled { opacity: .4; cursor: default; }

  /* ---------- scheda mercato (proposta 3a): la finestra sulle 24 ore ---------- */
  .prezzi.mini { height: 74px; margin-top: 4px; }
  .prezzi.mini .q { cursor: default; }
  .prezzi.mini .q:hover { filter: none; }
  .assex .finestra { font-weight: 700; color: var(--rete); }
  .minikpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
  .minikpi .l { font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); }
  .minikpi .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .minikpi .v .s { font-size: 11px; font-weight: 600; color: var(--ink-3); }
  .minikpi .v.ricavo { color: var(--verde-scuro); }
  :root[data-theme="dark"] .minikpi .v.ricavo { color: var(--verde); }
  .minikpi .hint { font-size: 11px; color: var(--ink-3); }
  .nota-piano { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--ink-3); }

  /* ---------- scheda configurazione (proposta 3a): tabella allineata ---------- */
  .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px;
    font-weight: 600; letter-spacing: .04em; background: var(--surface-2);
    border: 1px solid var(--border); color: var(--ink-2); border-radius: var(--r-pill);
    padding: 3px 10px; }
  .chip.verde { background: var(--verde-tenue); border-color: var(--verde-bordo);
    color: var(--verde-scuro); }
  :root[data-theme="dark"] .chip.verde { color: var(--verde); }
  .chip a { color: inherit; font-weight: 700; }
  .specs { display: flex; flex-direction: column; font-size: 12.5px; }
  .specs .riga { display: flex; align-items: baseline; gap: 16px; padding: 7px 0;
    border-bottom: 1px solid var(--border); }
  .specs .riga:last-child { border-bottom: 0; }
  .specs .k { color: var(--ink-3); flex: none; }
  .specs .spacer { flex: 1; }
  .specs .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
  /* il dato mancante è dichiarato mancante, non omesso */
  .specs .v.manca { color: var(--warn); }
  .notabox { margin-top: 14px; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-tile); padding: 11px 13px; }
  .notabox .l { font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
  .notabox .testo { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
  .notabox .testo.chiusa { display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }

  /* ---------- pagina di configurazione (proposta 3b) ---------- */
  /* la barra di salvataggio resta in vista sotto la topbar: una sola, per tutto */
  .salvabar { position: sticky; top: 70px; z-index: 15; display: flex; align-items: center;
    gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-tile); box-shadow: var(--ombra); padding: 10px 16px;
    margin-bottom: 16px; }
  .salvabar h1 { font-size: 18px; }
  .nonsalvate { font-size: 12px; font-weight: 600; color: var(--warn); }
  .confgrid { display: grid; grid-template-columns: 212px 1fr; gap: 20px; align-items: start; }
  .indice { position: sticky; top: 132px; display: flex; flex-direction: column; gap: 2px; }
  .indice > a { font-size: 12.5px; font-weight: 500; color: var(--ink-2);
    padding: 9px 12px; border-radius: 9px; }
  .indice > a:hover { background: var(--surface-2); color: var(--ink); }
  .indice > a span { color: var(--ink-3); font-weight: 400; }
  .indice .sep { height: 1px; background: var(--border); margin: 10px 6px; }
  .indice .completare { background: var(--warn-bg); border: 1px solid var(--warn-bordo);
    border-radius: 11px; padding: 10px 12px; }
  .indice .completare .l { font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--warn); margin-bottom: 4px; }
  .indice .completare .t { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
  @media (max-width: 900px) { .confgrid { grid-template-columns: 1fr; } .indice { display: none; } }
  /* gli anchor delle sezioni non finiscono sotto le barre appiccicate */
  .confmain .card, .confmain .sezione { scroll-margin-top: 140px; }
  /* unità dentro il campo: il numero e la sua misura sono una cosa sola */
  .unita { display: flex; align-items: center; gap: 8px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px; padding-right: 13px;
    transition: border-color .15s, box-shadow .15s; }
  .unita input { border: 0; background: transparent; box-shadow: none; flex: 1; min-width: 0; }
  .unita input:focus { border: 0; box-shadow: none; }
  .unita:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(27,158,75,.16); }
  .unita .u { font-size: 12px; font-weight: 600; color: var(--ink-3); flex: none; }
  .unita.manca, select.manca { border-color: var(--warn-bordo); }
  .aiuto.warn { color: var(--warn); }
  /* oggetti come righe della stessa altezza, con la foto dal catalogo */
  .oggetti { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .oggetto { display: grid; grid-template-columns: 52px 190px 1fr auto; gap: 14px;
    align-items: center; border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 12px; }
  .oggetto img, .oggetto .icona { width: 52px; height: 44px; object-fit: contain;
    background: #fff; border: 1px solid var(--border); border-radius: 8px; }
  .oggetto .icona { display: grid; place-items: center; background: var(--surface-2); }
  .oggetto .chi { min-width: 0; }
  .oggetto .chi .nome { font-size: 13px; font-weight: 700; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .oggetto .chi .tag { margin: 3px 0 0; }
  .oggetto .somma { font-size: 12px; color: var(--ink-2); min-width: 0;
    font-variant-numeric: tabular-nums; }
  .oggetto .azioni { display: flex; gap: 6px; align-items: center; }
  /* il figlio rientra sotto il padre col colore della sua serie */
  .oggetto.figlio { margin-left: 26px; border-left: 3px solid var(--border); }
  .oggetto.figlio.fv { border-left-color: var(--fv); }
  .oggetto.figlio.batt { border-left-color: var(--batt); }
  @media (max-width: 760px) { .oggetto { grid-template-columns: 52px 1fr auto; }
    .oggetto .somma { display: none; } }
  .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
  .legend span.k { display: inline-flex; align-items: center; gap: 6px; }
  .legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
  .legend i.tratteggio { background: repeating-linear-gradient(to right,
    var(--ink-3) 0 4px, transparent 4px 7px); }
  /* schema unifilare: su schermo stretto si scorre invece di diventare illeggibile */
  .schemabox { overflow-x: auto; }
  .schemabox svg { min-width: 620px; }
  /* nodo cliccabile: il selezionato si segna con un contorno, non con un colore che
     transiziona — una transizione in corso vince sulla cascata e il nodo resta acceso */
  .schemanodo { cursor: pointer; }
  .schemanodo:focus { outline: none; }
  .schemanodo rect.nodo { stroke-width: 1.9; }
  .schemanodo:hover rect.nodo, .schemanodo:focus-visible rect.nodo { stroke-width: 3; }
  .schemanodo.aperto rect.nodo { stroke-width: 3.4; }
  /* pulsante di accesso alla WebUI dell'apparecchio: si scurisce al passaggio, così si
     capisce che è un comando a sé e non parte del riquadro */
  .apriweb { cursor: pointer; opacity: .75; }
  .apriweb:hover, .apriweb:focus-visible { opacity: 1; }
  .apriweb:focus { outline: none; }
  .dettnodo { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); padding: 12px 14px; }
  .dettnodo h3 { font-size: 14px; margin: 0; color: var(--ink); }
  .dettnodo .sub { margin: 2px 0 0; }
  .dati { display: grid; grid-template-columns: minmax(160px, 42%) 1fr; gap: 4px 16px;
    margin: 10px 0 0; font-size: 12.5px; }
  .dati dt { color: var(--ink-3); }
  .dati dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  @media (max-width: 560px) { .dati { grid-template-columns: 1fr; gap: 0 0; }
    .dati dd { margin-bottom: 6px; } }
  .empty { color: var(--ink-3); font-size: 13px; padding: 26px 4px; text-align: center; }
  .foot { text-align: center; color: var(--ink-3); font-size: 11.5px; margin-top: 26px; }

  /* tooltip grafico */
  .chartbox { position: relative; }
  /* il grafico a tutto schermo: la stessa card fissata sulla finestra, sopra il velo;
     il riquadro del disegno prende l'altezza che resta e il JS lo ridisegna alto */
  .card:not(.grande) .chartbox { cursor: zoom-in; }
  .card.grande .chartbox { cursor: zoom-out; }
  .chiudi-grande { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px;
    border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2);
    color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
    display: grid; place-items: center; z-index: 2; }
  .chiudi-grande:hover { background: var(--err-bg); color: var(--err); border-color: var(--err-bordo); }
  .card.grande .cardhead { padding-right: 44px; }
  .card.grande { position: fixed; inset: 14px; z-index: 50; margin: 0 !important; overflow: auto;
    display: flex; flex-direction: column; box-shadow: var(--ombra-alta); }
  .card.grande .chartbox { flex: 1; min-height: 0; }
  .card.grande #chart svg { max-height: calc(100vh - 230px); }
  .tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--ombra-alta); padding: 9px 11px; font-size: 12px; min-width: 148px; z-index: 5; }
  .tip .t { font-weight: 700; margin-bottom: 5px; color: var(--ink); }
  .tip .r { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-2); }
  .tip .r b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .tip .r i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

  /* ---------- utenti ----------
     Il colore del ruolo è sempre accompagnato dall'etichetta: verde amministratore,
     blu installatore, viola utente finale — mai il solo colore. */
  .filtri { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
  .filtri button { background: var(--surface); border: 1px solid var(--border); color: var(--ink-2);
    border-radius: var(--r-pill); padding: 7px 15px; font: 600 12.5px var(--sans); cursor: pointer; }
  .filtri button:hover { border-color: var(--ink-3); color: var(--ink); }
  .filtri button.sel { background: var(--ink); border-color: var(--ink); color: var(--page); }
  .filtri button .n { opacity: .55; font-weight: 600; margin-left: 6px; }

  .utgrid { display: grid; grid-template-columns: minmax(300px, 390px) 1fr; gap: 16px;
    align-items: start; }
  @media (max-width: 900px) { .utgrid { grid-template-columns: 1fr; } }
  .utcolonna { display: grid; gap: 16px; }
  .utelenco { padding: 0; overflow: hidden; }
  .utintesta { padding: 11px 16px; border-bottom: 1px solid var(--border); display: flex;
    justify-content: space-between; font-size: 10px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); }
  .utriga { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 13px 16px; background: var(--surface); border: 0; border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent; font: inherit; color: inherit; cursor: pointer; }
  .utriga:hover { background: var(--surface-2); }
  .utriga.sel { background: var(--surface-2); border-left-color: var(--verde-scuro); }
  /* la colonna centrale si comprime e tronca; senza min-width:0 e overflow il nome
     e le pillole sfondavano la riga e finivano SOPRA la colonna di destra */
  .utriga .chi { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .utriga .r1 { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
  .utriga .nome { font-size: 14px; font-weight: 700; letter-spacing: -.01em; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .utriga .r1 .pill { flex: none; max-width: 100%; overflow: hidden; }
  .utriga .r2 { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .utriga .dx { text-align: right; flex: 0 0 auto; padding-left: 6px; }
  .utriga .dx .n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .utriga .dx .q { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
  .utpiede { padding: 12px 16px; background: var(--surface-2); border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--ink-3); }
  /* avatar e pillola del ruolo */
  .av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid;
    place-items: center; font: 700 13px var(--sans); }
  .av.grande { width: 46px; height: 46px; font-size: 18px; font-weight: 800; }
  .pill { display: inline-flex; align-items: center; border-radius: var(--r-pill);
    padding: 2px 9px; font: 600 10.5px var(--sans); white-space: nowrap;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
  .av.admin, .pill.admin { color: var(--verde-scuro); background: var(--verde-tenue);
    border: 1px solid var(--verde-bordo); }
  .av.inst, .pill.inst { color: var(--rete); background: rgba(42,120,214,.10);
    border: 1px solid rgba(42,120,214,.28); }
  .av.fin, .pill.fin { color: var(--casa); background: rgba(122,92,196,.10);
    border: 1px solid rgba(122,92,196,.28); }
  .pill.mercato { color: var(--fv); background: rgba(237,161,0,.12);
    border-color: rgba(237,161,0,.35); }

  .scheda .schedatesta { display: flex; align-items: center; gap: 14px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border); }
  .scheda .schedatesta .chi { flex: 1; min-width: 0; }
  .scheda .schedatesta .r1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .scheda .schedatesta .nome { font: 800 20px var(--sans); letter-spacing: -.025em; }
  .scheda .schedatesta .q { font-size: 12px; color: var(--ink-3); margin-top: 2px;
    font-variant-numeric: tabular-nums; }
  .schedagriglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); }
  .schedagriglia .l { font-size: 10px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
  .schedagriglia .fisso { font-size: 13.5px; font-weight: 600; }
  .sezione .conta { font-size: 11.5px; font-weight: 400; letter-spacing: 0;
    text-transform: none; color: var(--ink-3); margin-left: 8px; }
  /* fascia informativa: dice un fatto, non chiede niente */
  .banner { display: flex; align-items: center; gap: 10px; background: var(--verde-tenue);
    border: 1px solid var(--verde-bordo); border-radius: var(--r-tile); padding: 13px 16px;
    font-size: 13px; font-weight: 600; color: var(--verde-scuro); }
  :root[data-theme="dark"] .banner { color: var(--verde); }
  .banner .pall { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
  .azioni-sezione { display: flex; gap: 8px; margin-bottom: 10px; align-items: center;
    flex-wrap: wrap; }
  .azioni-sezione .spacer { flex: 1; }
  .azioni-sezione .cerca input { width: 220px; }
  .pillbtn.attivo { background: var(--verde-tenue); border-color: var(--verde-scuro);
    color: var(--verde-scuro); }
  :root[data-theme="dark"] .pillbtn.attivo { color: var(--verde); }
  .vuotobox { padding: 18px; text-align: center; font-size: 12.5px; color: var(--ink-3);
    background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-tile); }
  /* caselle a pillola: la scelta degli impianti alla creazione */
  .pillcheck { display: flex; gap: 8px; flex-wrap: wrap; }
  .pillcheck label { display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px 7px 11px;
    font: 600 12.5px var(--sans); color: var(--ink-2); background: var(--surface-2);
    cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
  .pillcheck label.on { background: var(--verde-tenue); border-color: var(--verde-bordo);
    color: var(--verde-scuro); }
  :root[data-theme="dark"] .pillcheck label.on { color: var(--verde); }
  .pillcheck input { width: auto; margin: 0; accent-color: var(--verde-scuro); }

  /* i due permessi del singolo utente, con l'interruttore a cursore */
  .permgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
  .permbox { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px;
    border: 1px solid var(--border); border-radius: var(--r-tile); background: var(--surface-2); }
  .permbox.on { border-color: var(--verde-bordo); background: var(--verde-tenue); }
  .permbox .chi { flex: 1; min-width: 0; }
  .permbox .titolo { font: 600 13.5px var(--sans); letter-spacing: -.01em; color: var(--ink); }
  .permbox .testo { font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }
  .permbox.fisso { opacity: .85; }
  /* l'interruttore: la casella resta, ma si vede come cursore che scorre */
  .sw { position: relative; width: 38px; height: 22px; flex: none; margin: 2px 0 0;
    display: block; cursor: pointer; }
  .sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer; }
  .sw input:disabled { cursor: default; }
  .sw .cursore { position: absolute; inset: 0; border-radius: var(--r-pill);
    background: var(--grid); transition: background .15s; pointer-events: none; }
  .sw .cursore::after { content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(30,30,30,.25); transition: transform .15s; }
  .sw input:checked ~ .cursore { background: var(--verde-scuro); }
  .sw input:checked ~ .cursore::after { transform: translateX(16px); }
  .sw input:focus-visible ~ .cursore { box-shadow: 0 0 0 3px rgba(27,158,75,.28); }
  .sw input:disabled ~ .cursore { opacity: .55; }
  .impgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 10px; }
  .impbox { display: flex; align-items: center; gap: 11px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--r-tile); background: var(--surface-2);
    cursor: pointer; text-transform: none; letter-spacing: 0; }
  .impbox.on { border-color: var(--verde-bordo); background: var(--verde-tenue); }
  :root[data-theme="dark"] .impbox.on { background: var(--verde-tenue); }
  .impbox input { width: auto; margin: 0; accent-color: var(--verde-scuro); flex: none; }
  .impbox .chi { flex: 1; min-width: 0; }
  .impbox .nome { display: block; font: 600 13.5px var(--sans); color: var(--ink);
    letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .impbox .det { display: block; font-size: 11.5px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .schedapiede { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
  .pillbtn.pericolo { border-color: var(--err-bordo); color: var(--err); }
  .pillbtn.pericolo:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
  /* matrice dei poteri per ruolo */
  table.ruoli th.admin { color: var(--verde-scuro); }
  table.ruoli th.inst { color: var(--rete); }
  table.ruoli th.fin { color: var(--casa); }
  table.ruoli th:not(:first-child) { text-align: center; width: 140px; }
  table.ruoli td.c { text-align: center; font-weight: 700; font-size: 12px; }
  table.ruoli td.c.no { color: var(--ink-3); font-weight: 400; }
  table.ruoli td.c.si { color: var(--verde-scuro); }
  :root[data-theme="dark"] table.ruoli td.c.si { color: var(--verde); }
  /* «se abilitato», «solo sui suoi impianti»: non è un sì e non è un no */
  table.ruoli td.c.forse { color: var(--ink-2); font-weight: 600; font-size: 11px;
    line-height: 1.35; }
  .card.nuovo { border-color: var(--verde-bordo); }

  /* ---------- login ---------- */
  .login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: radial-gradient(900px 420px at 50% -8%, rgba(27,158,75,.16), transparent 62%), var(--page); }
  .login { width: min(392px, 94vw); background: var(--surface); border: 1px solid var(--border);
    border-radius: 20px; box-shadow: var(--ombra-alta); padding: 38px 34px 30px; text-align: center; }
  .login .mark { width: 58px; height: 58px; border-radius: 17px; margin: 0 auto 16px;
    background: linear-gradient(140deg, var(--verde) 0%, var(--verde-scuro) 100%);
    display: grid; place-items: center; box-shadow: 0 8px 22px rgba(27,158,75,.35); }
  .login h1 { font-size: 20px; font-weight: 700; }
  .login p { color: var(--ink-3); font-size: 12.5px; margin: 4px 0 24px; }
  .login .err { color: var(--err); font-size: 12.5px; min-height: 18px; margin-top: 12px; font-weight: 500; }

  /* piè di pagina con la versione: discreto, ma sempre presente */
  .piede { margin: 28px 0 6px; text-align: center; font-size: 11px; color: var(--ink-3);
    letter-spacing: .03em; }

  /* nota sotto un campo: spiega la scelta senza rubare spazio all'etichetta */
  .aiuto { font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.35; }

  /* ---------- allarmi in corso ----------
     Il bordo colorato a sinistra distingue guasto e avviso anche di sfuggita, senza
     dover leggere: la fascia compare solo quando c'è qualcosa, quindi la sua presenza
     è già l'informazione. */
  .card.allarmi { border-left: 4px solid var(--warn); }
  .card.allarmi.conguasti { border-left-color: var(--err); }
  .card.allarmi h2 { display: flex; align-items: center; gap: 9px; }
  .card.allarmi .conta { font-size: 11.5px; font-weight: 700; color: var(--ink-3);
    background: var(--page); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
  .card.allarmi .riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
  .card.allarmi .riga:first-of-type { border-top: 0; }
  .card.allarmi .testo { color: var(--ink); font-weight: 500; }
  .card.allarmi .quando { color: var(--ink-3); font-variant-numeric: tabular-nums; }

  /* intestazione di gruppo dentro una scheda: separa i campi per domanda ("quando
     avvisare", "dove avvisare") invece di lasciarli in una griglia indistinta */
  .sezione { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); margin: 22px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
  .card > .sezione:first-of-type { margin-top: 18px; }

  /* interruttore principale: sta fuori dalla griglia dei campi, perché comanda su tutti
     e in mezzo agli altri rompeva l'allineamento delle etichette */
  .interruttore { display: inline-flex; align-items: center; gap: 9px; font-size: 13px;
    font-weight: 600; color: var(--ink); background: var(--page); border: 1px solid var(--border);
    border-radius: 10px; padding: 9px 14px; cursor: pointer; }
  .interruttore input { width: auto; margin: 0; }

  /* ---------- registro degli allarmi ----------
     Griglia e non <table>: le colonne restano allineate fra le righe, e sotto i 900 px
     si può impilare senza riscrivere il markup. */
  /* la tabella scorre DENTRO la sua scheda quando non ci sta: senza questo le colonne
     sbordavano a destra e l'ultima finiva fuori dal riquadro */
  .tabella { display: grid; gap: 0; overflow-x: auto; }
  .tabella .th, .tabella .tr { min-width: 640px; }
  /* le celle non si allargano oltre la loro colonna: un testo lungo va a capo o si
     tronca invece di spingere fuori le colonne accanto */
  .tabella .th > span, .tabella .tr > span { min-width: 0; overflow-wrap: anywhere; }
  .tabella .th, .tabella .tr { display: grid; align-items: center; gap: 12px;
    grid-template-columns: 96px 1.1fr 2.4fr 1.15fr 76px 1fr; padding: 10px 2px; }
  /* cella che apre un dettaglio: sembra testo, si comporta da pulsante */
  .tabella .apri { border: 0; background: transparent; padding: 0; font: inherit; color: inherit;
    cursor: pointer; text-align: left; display: inline-flex; align-items: baseline; gap: 5px;
    flex-wrap: wrap; }
  .tabella .apri:hover { color: var(--verde-scuro); }
  .tabella .apri .freccia { color: var(--ink-3); font-size: 10px; }

  /* dettaglio degli intervalli scelti, sotto la riga che lo apre */
  .tabella .dettaglio { padding: 4px 2px 14px; border-bottom: 1px solid var(--border); }
  .quarti { display: flex; flex-wrap: wrap; gap: 7px; }
  .quarto { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px;
    background: var(--page); border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 9px; font-variant-numeric: tabular-nums; }
  .quarto b { color: var(--ink); }

  /* sette colonne: le intestazioni andavano a capo e "costo" finiva sotto "giorno" */
  .tabella.sette .th, .tabella.sette .tr {
    grid-template-columns: 1.15fr 1.5fr 0.9fr 1.1fr 0.85fr 0.6fr 1fr; }
  .tabella .th { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--border); }
  .tabella .tr { border-bottom: 1px solid var(--border); font-size: 12.5px; }
  .tabella .tr:last-child { border-bottom: 0; }
  /* un guasto in corso si distingue dalla riga, non solo dall'etichetta */
  .tabella .tr.grave { background: var(--err-bg); border-radius: 8px; }
  .tabella .cosa { color: var(--ink); font-weight: 500; display: flex; flex-direction: column; gap: 2px; }
  .tabella .num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
  .tabella a { color: inherit; font-weight: 600; }

  /* stato vuoto: dice anche PERCHÉ è vuoto, altrimenti sembra che non funzioni */
  .vuoto { display: flex; flex-direction: column; gap: 4px; align-items: center;
    text-align: center; padding: 34px 16px; color: var(--ink-3); font-size: 12.5px; }
  .vuoto b { color: var(--ink); font-size: 13.5px; font-weight: 600; }

  /* due scelte che si escludono: più chiaro di due caselle da spuntare */
  .segmenti { display: inline-flex; background: var(--page); border: 1px solid var(--border);
    border-radius: 10px; padding: 3px; gap: 3px; }
  .segmenti button { border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 7px; }
  .segmenti button.sel { background: var(--surface); color: var(--ink); box-shadow: var(--ombra); }

  @media (max-width: 900px) {
    .tabella .th { display: none; }
    .tabella .tr { grid-template-columns: 1fr; gap: 5px; padding: 13px 2px; }
  }

  /* barra proporzionale dentro una riga di tabella: il confronto fra i mesi si vede
     prima di leggere i numeri */
  .barra { display: inline-block; height: 7px; border-radius: 999px; min-width: 2px;
    background: linear-gradient(90deg, var(--verde) 0%, var(--verde-scuro) 100%); }

  /* note sotto un risultato: dicono cosa il conto NON considera, e vanno lette */
  ul.note { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
  ul.note li { margin: 4px 0; }
  ul.note b { color: var(--ink); }

  /* pallino accanto al nome nell'elenco: dice che c'è da guardare, non cosa */
  .segnale { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
    font-weight: 700; color: var(--err); }
  .segnale i { width: 7px; height: 7px; border-radius: 999px; background: var(--err); display: inline-block; }
  .segnale.avviso { color: var(--warn); }
  .segnale.avviso i { background: var(--warn); }

  /* ==================== restyle "prototipo" (12/08/2026) ==================== */

  /* --- tessere di sintesi sopra l'elenco: quattro numeri, non quattro card --- */
  .tessere { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
  .tessere .tessera { padding: 14px 18px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-tile); min-width: 150px; }
  .tessere .tessera .l { font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3); }
  .tessere .tessera .v { font-size: 24px; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
  .tessere .tessera .v .u { font-size: 13px; font-weight: 600; color: var(--ink-3); }
  .tessere .tessera.warn { background: var(--warn-bg); border-color: var(--warn-bordo); }
  .tessere .tessera.warn .l, .tessere .tessera.warn .v { color: var(--warn); }
  .tessere .tessera.ok .v { color: var(--verde-scuro); }

  /* --- home di flotta: il colpo d'occhio prima dell'elenco (10/09/2026) --- */
  .hero { display: grid; grid-template-columns: minmax(280px, 1.3fr) 2fr; gap: 12px; margin-bottom: 14px; }
  .hero .principale { background: linear-gradient(135deg, var(--verde-scuro), var(--verde));
    color: #fff; border-radius: var(--r-tile); padding: 18px 20px; display: flex; flex-direction: column; }
  .hero .principale .l { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
  .hero .principale .v { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; line-height: 1; }
  .hero .principale .v .u { font-size: 16px; font-weight: 600; opacity: .85; margin-left: 4px; }
  .hero .principale .d { font-size: 12px; opacity: .9; margin-top: 8px; }
  .hero .principale .spark24 { width: 100%; height: 64px; margin-top: auto; padding-top: 10px; }
  .hero .griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero .griglia .tessera { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-tile); min-width: 0; }
  .hero .griglia .tessera .l { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .hero .griglia .tessera .v { font-size: 22px; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
  .hero .griglia .tessera .v .u { font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .hero .griglia .tessera .d { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
  .hero .griglia .tessera.warn { background: var(--warn-bg); border-color: var(--warn-bordo); }
  .hero .griglia .tessera.warn .l, .hero .griglia .tessera.warn .v { color: var(--warn); }
  .hero .griglia .tessera.ok .v { color: var(--verde-scuro); }
  .mappa-flotta { padding: 0; overflow: hidden; margin-bottom: 14px; }
  .mappa-flotta #mappa-flotta { height: 320px; width: 100%; }
  .mappa-flotta .nota { padding: 8px 14px; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--border); }
  .leaflet-container { font: inherit; background: var(--surface-2); }
  .leaflet-popup-content { font-size: 12.5px; line-height: 1.5; }
  [data-theme="dark"] .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
  [data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
  .attenzione { margin-bottom: 14px; }
  .attenzione .riga { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center;
    padding: 11px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
  .attenzione .riga:hover .nome { text-decoration: underline; }
  .attenzione .riga .pallino { width: 10px; height: 10px; border-radius: 50%; }
  .attenzione .riga .nome { font-weight: 600; font-size: 13.5px; }
  .attenzione .riga .cosa { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
  .attenzione .riga .peso { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; text-align: right; }
  .tutto-ok { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--verde-scuro); font-weight: 600; }
  .tutto-ok .pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--ok-dot); box-shadow: 0 0 0 4px rgba(27,158,75,.18); }
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero .griglia { grid-template-columns: repeat(2, 1fr); }
  }

  /* --- elenco impianti a tabella: una riga per impianto, sparkline compresa --- */
  .flotta { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); overflow: hidden; }
  .flotta .testata, .flotta .rigaimp { display: grid; align-items: center; gap: 14px;
    grid-template-columns: 1.6fr 84px 92px 96px 92px 1fr 20px; padding: 11px 20px; }
  .flotta .testata { background: var(--surface-2); border-bottom: 1px solid var(--border);
    font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); }
  .flotta .rigaimp { padding: 15px 20px; border-bottom: 1px solid var(--border);
    cursor: pointer; color: inherit; }
  .flotta .rigaimp:hover { background: var(--surface-2); }
  .flotta .rigaimp:last-of-type { border-bottom: 0; }
  .flotta .num { text-align: right; font-weight: 700; font-size: 15px; }
  .flotta .num2 { text-align: right; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
  .flotta .chi { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .flotta .chi .pallino { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .flotta .chi .nome { font-weight: 600; font-size: 13.5px; color: var(--ink); }
  .flotta .chi .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .flotta .chi .etich { font-size: 9px; font-weight: 600; letter-spacing: .05em;
    padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
  .flotta .freccia { color: var(--ink-3); opacity: .6; text-align: right; }
  .flotta .nota { padding: 13px 20px; font-size: 11.5px; color: var(--ink-3); }
  .flotta .spark { width: 100%; height: 32px; display: block; }
  @media (max-width: 900px) {
    .flotta .testata { display: none; }
    .flotta .rigaimp { grid-template-columns: 1fr 84px; }
    .flotta .rigaimp > :nth-child(n+3) { display: none; }
  }

  /* --- pannello laterale destro: l'approfondimento si apre accanto, non al posto --- */
  .velo { position: fixed; inset: 0; background: rgba(15,25,18,.34); z-index: 40; }
  .pannello { position: fixed; top: 0; right: 0; bottom: 0; width: 660px; max-width: 92vw;
    background: var(--page); z-index: 41; box-shadow: -14px 0 40px rgba(0,0,0,.16);
    display: flex; flex-direction: column; }
  .pannello .testa { display: flex; align-items: flex-start; gap: 14px;
    padding: 20px 24px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .pannello .testa h2 { font-size: 17px; }
  .pannello .testa .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
  .pannello .corpo { flex: 1; overflow: auto; padding: 20px 24px 32px; }

  /* --- banner di stato in testa alla console: risponde a "sta funzionando?" --- */
  .statobanner { display: flex; align-items: center; gap: 12px; padding: 15px 22px;
    border: 1px solid var(--border); border-radius: var(--r-card); background: var(--ok-bg);
    border-color: var(--ok-bordo); }
  .statobanner .pall { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ok-dot); }
  .statobanner .titolo { font-size: 17px; font-weight: 600; color: var(--ok); }
  .statobanner .dett { font-size: 13px; color: var(--ok); opacity: .75; }
  .statobanner a { font-size: 12.5px; font-weight: 500; color: var(--ok); }
  .statobanner.warn { background: var(--warn-bg); border-color: var(--warn-bordo); }
  .statobanner.warn .pall { background: var(--warn-dot); }
  .statobanner.warn .titolo, .statobanner.warn .dett, .statobanner.warn a { color: var(--warn); }
  .statobanner.err { background: var(--err-bg); border-color: var(--err-bordo); }
  .statobanner.err .pall { background: var(--err-dot); }
  .statobanner.err .titolo, .statobanner.err .dett, .statobanner.err a { color: var(--err); }

  /* --- i quadri della console: quattro celle unite in una card sola --- */
  .quadri { display: grid; grid-template-columns: 1fr 1fr 1fr;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
    overflow: hidden; }
  .quadri .q { padding: 20px 22px; border-right: 1px solid var(--border); min-width: 0; }
  .quadri .q:last-child { border-right: 0; }
  .quadri .q .l { font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
  .quadri .q .v { display: flex; align-items: baseline; gap: 6px; }
  .quadri .q .v b { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
  .quadri .q .v .u { font-size: 15px; font-weight: 600; color: var(--ink-3); }
  .quadri .q .v.ok b { color: var(--verde-scuro); }
  .quadri .q .hint { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); }
  .quadri .q .hint + .hint { margin-top: 3px; }
  .quadri .q .bar { margin-top: 10px; height: 5px; border-radius: 3px;
    background: var(--grid); overflow: hidden; }
  .quadri .q .bar i { display: block; height: 100%; background: var(--fv); }
  @media (max-width: 1000px) { .quadri { grid-template-columns: 1fr 1fr; }
    .quadri .q { border-bottom: 1px solid var(--border); } }

  /* --- fila di scorciatoie in fondo alla console --- */
  .chipbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 16px 18px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); }
  .chipbar .l { font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
  .chipbar button { font: 500 12.5px var(--sans); padding: 7px 13px; border-radius: 20px;
    border: 1px solid var(--border); background: transparent; color: var(--ink);
    cursor: pointer; }
  .chipbar button:hover { background: var(--surface-2); border-color: var(--ink-3); }

  /* grafico a sinistra, colonna "da completare + allarmi" a destra */
  .duecol-proto { display: grid; grid-template-columns: 1.62fr 1fr; gap: 16px;
    align-items: start; margin-top: 16px; }
  @media (max-width: 1000px) { .duecol-proto { grid-template-columns: 1fr; } }

  /* pannello largo: schema, apparecchi e diagnostica respirano in orizzontale,
     e schiacciarli in 660px li rendeva illeggibili (visto il 12/08 sullo schema) */
  .pannello.largo { width: 1100px; max-width: 94vw; }

  /* lo schema come flusso verticale di card, dal generatore al POD */
  .flussoverticale { display: flex; flex-direction: column; gap: 10px; }
  .flussoverticale .nodo { display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--fv); border-radius: var(--r-tile); }
  .flussoverticale .nodo .chi { flex: 1; min-width: 0; }
  .flussoverticale .nodo .chi .n { font-weight: 600; font-size: 13.5px; }
  .flussoverticale .nodo .chi .d { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
  .flussoverticale .nodo .val { font-weight: 700; font-size: 15px; white-space: nowrap; }
  .flussoverticale .nodo.rete { border-left-color: var(--rete); }
  .flussoverticale .nodo.rete .val { color: var(--rete); }
  .flussoverticale .nodo.casa { border-left-color: var(--casa); }
  .flussoverticale .nodo.casa .val { color: var(--casa); }
  .flussoverticale .nodo.batt { border-left-color: var(--batt); }
  .flussoverticale .nodo.batt .val { color: var(--batt); }
  .flussoverticale .nodo .val.fv { color: var(--fv); }
  .flussoverticale .freccia { padding-left: 26px; font-size: 12px; color: var(--ink-3); }
  .flussoverticale .coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding-left: 26px; }
  .flussoverticale .sep { height: 1px; background: var(--border); margin: 8px 0; }

  /* i sette giorni come righe: giorno, cielo, barra dei kWh attesi, numero */
  .settegiorni { display: flex; flex-direction: column; gap: 9px; }
  .settegiorni .giorno { display: flex; align-items: center; gap: 12px; }
  .settegiorni .g { font-size: 11.5px; font-weight: 600; width: 56px; flex: none; }
  .settegiorni .cond { font-size: 11.5px; color: var(--ink-3); width: 96px; flex: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settegiorni .asta { flex: 1; height: 8px; border-radius: 4px; background: var(--grid); }
  .settegiorni .asta i { display: block; height: 100%; border-radius: 4px; background: #d9c07a; }
  .settegiorni .asta i.oggi { background: var(--fv); }
  .settegiorni .kwh { font-size: 12px; font-weight: 600; width: 44px; text-align: right; flex: none; }

  /* ---------- domotica KNX: la vista d'edificio (15/09/2026) ----------
     colonna dei piani a sinistra, il piano scelto a destra come griglia di stanze,
     sotto la stanza scelta con le 24 ore. I colori di stato sono quelli dei badge. */
  .edificio { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
  @media (max-width: 860px) { .edificio { grid-template-columns: 1fr; } }
  .piani { display: flex; flex-direction: column; gap: 8px; }
  .piano { text-align: left; background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--border); border-radius: var(--r-card); padding: 12px 14px;
    cursor: pointer; font-family: inherit; color: var(--ink); box-shadow: var(--ombra);
    transition: box-shadow .18s, transform .18s, border-color .18s; }
  .piano:hover { box-shadow: var(--ombra-alta); transform: translateY(-1px); }
  .piano.scelto { border-color: var(--verde-bordo); border-left-color: var(--verde); background: var(--verde-tenue); }
  .piano.warn { border-left-color: var(--warn-dot); }
  .piano.err { border-left-color: var(--err-dot); }
  .piano .p-nome { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
  .piano .p-kpi { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px;
    font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
  .piano .p-kpi .temp { color: var(--fv); font-size: 15px; }
  .piano .p-kpi .all { color: var(--err); }
  .piano .p-kpi small { font-weight: 500; color: var(--ink-3); font-size: 10.5px; margin-left: 2px; }
  .piano .p-sub { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
  .pianovista { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); box-shadow: var(--ombra); padding: 18px 20px; min-width: 0; }
  .pianovista .ali { display: flex; gap: 6px; }
  .stanze { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
  .stanza { text-align: left; background: var(--surface-2); border: 1px solid var(--border);
    border-top: 3px solid var(--ok-dot); border-radius: var(--r-tile); padding: 10px 12px 9px;
    cursor: pointer; font-family: inherit; color: var(--ink); min-width: 0;
    transition: box-shadow .18s, transform .18s, border-color .18s; }
  .stanza:hover { box-shadow: var(--ombra-alta); transform: translateY(-1px); border-color: var(--verde-bordo); }
  .stanza.scelta { outline: 2px solid var(--verde); outline-offset: 1px; }
  .stanza.warn { border-top-color: var(--warn-dot); background: var(--warn-bg); }
  .stanza.err { border-top-color: var(--err-dot); background: var(--err-bg); }
  .stanza.muta { border-top-color: var(--grid); color: var(--ink-3); }
  .stanza .s-testa { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .stanza .s-nome { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stanza .s-ala { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); flex: none; }
  .stanza .s-temp { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
    margin-top: 6px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
  .stanza .s-temp small { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
  .stanza .s-temp .s-set { font-size: 12px; font-weight: 600; color: var(--rete); margin-left: 4px; }
  .stanza .s-temp.muta { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 8px; }
  .stanza .s-icone { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 8px; min-height: 16px; }
  .stanza .ic { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600;
    color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .stanza .ic svg { flex: none; }
  .stanza .ic.on { color: var(--verde-scuro); }
  :root[data-theme="dark"] .stanza .ic.on { color: var(--verde); }
  .stanza .ic.all { color: var(--err); }
  .stanza .ic.modo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 0 7px; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
  .stanza .ic small { font-size: 10.5px; font-weight: 600; }
  .dettstanza { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
  .dettstanza h3 { font-size: 14.5px; }
  .grafico24 { width: 100%; height: 200px; display: block; margin-top: 6px; }

  /* ---------- vetrina: lo schermo di ingresso (16/09/2026) ----------
     tema scuro fisso ridefinendo i token sul contenitore: i componenti (flusso, icone)
     leggono var(--fv) ecc. e seguono da soli. Caratteri grandi, da leggere da lontano. */
  .vetrina {
    --verde: #2fb35e; --verde-scuro: #27a251; --verde-tenue: #142a1b; --verde-bordo: #275238;
    --page: #0b0f14; --surface: #131920; --surface-2: #1a212a;
    --ink: #eef1f4; --ink-2: #aab3bd; --ink-3: #79838f; --grid: #27303a; --border: #232b35;
    --fv: #e6b037; --batt: #2fb35e; --rete: #5b8def; --casa: #9d8ff0;
    --ok-dot: #2fb35e; --err-dot: #ef5350; --warn-dot: #e0a33a;
    --ombra: 0 1px 2px rgba(0,0,0,.3); --ombra-alta: 0 2px 6px rgba(0,0,0,.4), 0 16px 34px rgba(0,0,0,.5);
    color-scheme: dark; background: var(--page); color: var(--ink); min-height: 100vh;
    padding-block: 28px 20px; padding-inline: 40px; display: flex; flex-direction: column; gap: 22px;
    font-size: 16px; }
  .vetrina .v-marchio { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .vetrina .v-marchio .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--verde-scuro); display: inline-block; }
  .vetrina h1 { font-size: 40px; font-weight: 700; letter-spacing: -.025em; margin-top: 6px; }
  .vetrina .v-testa { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
  .vetrina .v-ora { margin-left: auto; text-align: right; }
  .vetrina .v-ora .h { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
  .vetrina .v-ora .d { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
  .vetrina .stato { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
  .vetrina .stato i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok-dot); box-shadow: 0 0 0 4px rgba(47,179,94,.2); }
  .vetrina .stato.off i { background: var(--err-dot); box-shadow: none; }
  .vetrina .v-corpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 28px; align-items: start; flex: 1; }
  @media (max-width: 1000px) { .vetrina .v-corpo { grid-template-columns: 1fr; } .vetrina { padding-inline: 20px; } .vetrina h1 { font-size: 30px; } }
  .vetrina .v-flusso { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 22px 10px; }
  .vetrina .v-flusso svg { max-height: 62vh; margin: 0 auto; }
  .vetrina .v-flusso .legend { justify-content: center; font-size: 13px; }
  .vetrina .v-numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .vetrina .n { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; min-width: 0; }
  .vetrina .n.verde { border-color: var(--verde-bordo); background: linear-gradient(180deg, var(--verde-tenue), var(--surface)); }
  .vetrina .n .l { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .vetrina .n .v { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
  .vetrina .n .v b { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .vetrina .n .v .u { font-size: 16px; color: var(--ink-3); font-weight: 600; }
  .vetrina .n .v .ic { color: var(--fv); display: inline-flex; align-self: center; }
  .vetrina .n .hint { color: var(--ink-2); font-size: 13px; margin-top: 8px; min-height: 1.4em; }
  .vetrina .bar { height: 6px; background: var(--grid); border-radius: 3px; overflow: hidden; margin-top: 12px; }
  .vetrina .bar i { display: block; height: 100%; background: var(--fv); border-radius: 3px; transition: width .8s ease; }
  .vetrina .v-sez { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
  .vetrina .v-sez small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-left: 8px; }
  .vetrina .v-piani { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
  .vetrina .v-piano { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--verde); border-radius: 14px; padding: 14px 16px; }
  .vetrina .v-piano.all { border-left-color: var(--err-dot); }
  .vetrina .v-piano .pn { font-size: 17px; font-weight: 700; }
  .vetrina .v-piano .pk { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
  .vetrina .v-piano .pk b { color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
  .vetrina .v-piano .pk .on b { color: var(--verde); }
  .vetrina .v-piano .pk .all b { color: var(--err-dot); }
  .vetrina .v-piano .bar { margin-top: 10px; }
  .vetrina .v-piano .bar i { background: var(--casa); }
  .vetrina .v-piano .hint { color: var(--ink-3); font-size: 12px; margin-top: 6px; }
  .vetrina .v-piede { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-3); font-size: 12.5px; border-top: 1px solid var(--border); padding-top: 12px; }
  .vetrina .v-vuota { margin: auto; text-align: center; color: var(--ink-2); display: grid; gap: 14px; justify-items: center; }

  /* ---------- gemello dell'edificio (16/09/2026) ----------
     lastre e blocchi sono SVG generato; qui i colori strutturali e i movimenti. Il colore
     dei blocchi (temperatura) arriva inline dal componente. */
  /* altezza fissata e larghezza a seguire: con width:100% e max-height il riquadro restava
     largo e il disegno finiva piccolo e centrato in un mare vuoto */
  .gemello svg { display: block; margin: 0 auto; max-width: 100%; height: auto; max-height: 72vh; width: auto; }
  .gem-lastra { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
  .gem-lastra-lato { fill: var(--grid); stroke: var(--border); stroke-width: .8; }
  .gem-lastra-lato.scuro { filter: brightness(.86); }
  .gem-griglia { stroke: var(--border); stroke-width: .6; opacity: .8; }
  .gem-piano { font: 700 13px/1 var(--sans); fill: var(--ink); letter-spacing: -.01em; }
  .gem-sub { font: 500 10.5px/1 var(--sans); fill: var(--ink-3); }
  .gem-stanza { cursor: pointer; transition: filter .15s; }
  .gem-stanza .lato { filter: brightness(.82); }
  .gem-stanza .lato.scuro { filter: brightness(.66); }
  .gem-stanza .cima { stroke: rgba(0,0,0,.18); stroke-width: .6; }
  .gem-stanza.muta polygon { fill: var(--grid) !important; }
  .gem-stanza.luci .cima { stroke: #ffd34d; stroke-width: 1.8; }
  .gem-stanza.allarme .cima { stroke: var(--err-dot); stroke-width: 2.2; stroke-dasharray: 3 2; }
  .gem-stanza:hover, .gem-stanza:focus-visible { filter: brightness(1.12); outline: none; }
  .gem-stanza.scelta .cima { stroke: var(--ink); stroke-width: 2.2; }
  .gem-stanza .pres { fill: #fff; stroke: rgba(0,0,0,.25); stroke-width: .6; }
  .gem-stanza .pres.onda { fill: none; stroke: #fff; stroke-width: 1.2; animation: gem-onda 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes gem-onda { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .gem-stanza .pres.onda { animation: none; display: none; } }
  .gem-legenda i.scala { background: linear-gradient(90deg, hsl(210 72% 52%), hsl(110 72% 52%), hsl(10 72% 52%)); width: 34px; }
  .gem-legenda i.pres-l { background: #fff; border: 1px solid var(--ink-3); border-radius: 50%; width: 9px; height: 9px; }
  .gem-legenda i.luci-l { background: transparent; border: 2px solid #ffd34d; width: 12px; height: 8px; }
  .gem-legenda i.all-l { background: transparent; border: 2px dashed var(--err-dot); width: 12px; height: 8px; }
  .gem-legenda i.muta-l { background: var(--grid); width: 12px; height: 8px; }
  .gem-dett h3 small { font-weight: 500; margin-left: 6px; }
  .gemello.vetrina .gem-piano { font-size: 15px; }
  .gemello.vetrina .gem-sub { font-size: 12px; }
  .vetrina .v-gemello { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 18px 6px; margin-bottom: 14px; }
  .vetrina .v-gemello .gemello svg { height: 44vh; width: auto; max-width: 100%; }
  .vetrina .v-edificio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
  .vetrina .v-edificio .v-sez { grid-column: 1 / -1; margin-bottom: 0; }
  .vetrina .v-edificio .v-gemello { margin-bottom: 0; }
  .vetrina .v-edificio .v-piani { grid-template-columns: 1fr; }
  @media (max-width: 1000px) { .vetrina .v-edificio { grid-template-columns: 1fr; } }
  .vetrina .v-gemello .legend { justify-content: center; font-size: 12.5px; }

  /* ── Il replay della giornata: cielo, cursore, inverter ─────────────────────── */
  .replay { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
  .replay-cielo { width: 100%; height: 64px; display: block; border-radius: 10px; }
  .replay-barra { display: flex; align-items: center; gap: 10px; }
  .replay-barra input[type=range] { flex: 1; min-width: 0; accent-color: var(--verde-scuro); height: 28px; margin: 0; cursor: pointer; }
  .replay-play { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
    color: var(--ink); cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
  .replay-play:hover { border-color: var(--verde); }
  .replay-ora { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; line-height: 1.05; }
  .replay-ora b { font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
  .replay-ora small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
  .replay-giorno { display: flex; align-items: center; gap: 6px; }
  .replay-giorno .pillbtn { padding: 6px 10px; }
  .replay-giorno input[type=date] { flex: 1; min-width: 0; width: 100%; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 10px;
    font: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); }
  .card.in-replay { box-shadow: 0 0 0 2px var(--verde-bordo); }
  .inv-strip { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 12px; }
  .inv-strip i, .inv-legenda i { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--grid); }
  .inv-strip i.ok, .inv-legenda i.ok { background: var(--verde); }
  .inv-strip i.basso, .inv-legenda i.basso { background: #f4b26a; }
  .inv-strip i.caduto, .inv-legenda i.caduto { background: var(--err-dot); }
  .inv-strip i.notte { background: var(--grid); opacity: .55; }
  .inv-legenda { font-size: 11.5px; }

  /* ── La pianta vera del piano ───────────────────────────────────────────────── */
  .pianta svg { display: block; margin: 0 auto; max-width: 100%; height: auto; max-height: 70vh; width: auto; }
  .pia-contorno { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 12; stroke-linejoin: round; }
  .pia-stanza { cursor: pointer; transition: filter .15s; }
  .pia-stanza polygon { stroke: rgba(0,0,0,.28); stroke-width: 6; stroke-linejoin: round; fill-opacity: .82; }
  .pia-stanza.senza { cursor: default; }
  .pia-stanza.senza polygon { fill: var(--grid) !important; fill-opacity: .7; }
  .pia-stanza.muta polygon { fill: var(--grid) !important; }
  .pia-stanza.stimata polygon { stroke-dasharray: 22 14; }
  .pia-stanza.luci polygon { stroke: #ffd34d; stroke-width: 16; }
  .pia-stanza.allarme polygon { stroke: var(--err-dot); stroke-width: 18; stroke-dasharray: 30 18; }
  .pia-stanza.scelta polygon { stroke: var(--ink); stroke-width: 18; stroke-dasharray: none; }
  .pia-stanza:hover polygon, .pia-stanza:focus-visible polygon { filter: brightness(1.12); }
  .pia-stanza:focus-visible { outline: none; }
  .pia-nome { font: 600 44px/1 var(--sans); fill: rgba(0,0,0,.72); pointer-events: none; }
  .pia-temp { font: 700 50px/1 var(--sans); fill: rgba(0,0,0,.8); pointer-events: none; }
  .pia-stanza.muta .pia-nome, .pia-stanza.senza .pia-nome { fill: var(--ink-3); }
  .pia-stanza .pres { fill: #fff; stroke: rgba(0,0,0,.3); stroke-width: 4; }
  .pia-stanza .pres.onda { fill: none; stroke: #fff; stroke-width: 6; animation: gem-onda 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  @media (prefers-reduced-motion: reduce) { .pia-stanza .pres.onda { animation: none; display: none; } }
  .gem-legenda i.stim-l { background: transparent; border: 2px dashed var(--ink-3); width: 12px; height: 8px; }
  .pianta.vetrina .pia-nome { font-size: 58px; }
  .vetrina .v-pianta .pianta svg { height: 44vh; width: auto; max-width: 100%; }