/* ─────────── Plancia · stile 2.2 ─────────── */
:root {
  --sfondo: #f5f6f8; --laterale: #fbfbfc; --sup: #ffffff; --sup2: #f1f3f6; --sup3: #e9ecf1; --bordo: #e2e5ea; --bordo-forte: #cfd4dc;
  --testo: #0f141a; --tenue: #56606e; --debole: #7a8494;
  --accento: #4b5ef0; --accento-2: #6a4bf0; --accento-t: #ffffff; --accento-tenue: #eceefe;
  --ok: #10a050; --avviso: #c77d00; --errore: #de3b33; --info: #2f7de1; --spento: #9aa2ae;
  --ok-tenue: #e6f6ec; --avviso-tenue: #fdf3e0; --errore-tenue: #fdeceb; --info-tenue: #e8f1fc;
  --cpu: #4b5ef0; --ram: #b04be0;
  --ombra-s: 0 1px 2px rgb(15 20 26 / .05);
  --ombra: 0 1px 2px rgb(15 20 26 / .04), 0 2px 8px rgb(15 20 26 / .05);
  --ombra-l: 0 24px 60px rgb(15 20 26 / .22), 0 2px 8px rgb(15 20 26 / .08);
  --r: 16px; --r-m: 12px; --r-s: 10px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --font-titoli: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, sans-serif;
  --larghezza-laterale: 264px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sfondo: #0b0d12; --laterale: #0e1117; --sup: #13171e; --sup2: #1a1f28; --sup3: #212733; --bordo: #232a35; --bordo-forte: #313a48;
    --testo: #eaedf2; --tenue: #a2abb9; --debole: #7e8898;
    --accento: #7385ff; --accento-2: #9b7bff; --accento-t: #0a0d1c; --accento-tenue: #1d2340;
    --ok: #36d07f; --avviso: #f2b33d; --errore: #ff6b62; --info: #5aa2ff; --spento: #6b7482;
    --ok-tenue: #10271b; --avviso-tenue: #2b2210; --errore-tenue: #2e1413; --info-tenue: #11223a;
    --cpu: #7385ff; --ram: #d27cf0;
    --ombra-s: none; --ombra: 0 1px 0 rgb(255 255 255 / .02) inset; --ombra-l: 0 30px 80px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sfondo: #0b0d12; --laterale: #0e1117; --sup: #13171e; --sup2: #1a1f28; --sup3: #212733; --bordo: #232a35; --bordo-forte: #313a48;
  --testo: #eaedf2; --tenue: #a2abb9; --debole: #7e8898;
  --accento: #7385ff; --accento-2: #9b7bff; --accento-t: #0a0d1c; --accento-tenue: #1d2340;
  --ok: #36d07f; --avviso: #f2b33d; --errore: #ff6b62; --info: #5aa2ff; --spento: #6b7482;
  --ok-tenue: #10271b; --avviso-tenue: #2b2210; --errore-tenue: #2e1413; --info-tenue: #11223a;
  --cpu: #7385ff; --ram: #d27cf0;
  --ombra-s: none; --ombra: 0 1px 0 rgb(255 255 255 / .02) inset; --ombra-l: 0 30px 80px rgb(0 0 0 / .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sfondo); color: var(--testo);
  font: 16px/1.5 var(--font); letter-spacing: -.005em;
  min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-family: var(--font-titoli); }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: 19px; font-weight: 650; letter-spacing: -.012em; }
h3 { font-size: 14px; font-weight: 650; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
p { margin: 0; }
a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .88em; background: var(--sup2); border: 1px solid var(--bordo); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
small, .sotto { color: var(--tenue); font-size: 14px; }
.aiuto { color: var(--tenue); font-size: 15px; line-height: 1.55; }
.aiuto:empty { display: none; }
.sprite { display: none; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic.grande { width: 32px; height: 32px; stroke-width: 1.6; }
::selection { background: color-mix(in srgb, var(--accento) 28%, transparent); }

/* ─── logo ─── */
.logo { display: flex; align-items: center; gap: 11px; font: 700 19px/1 var(--font-titoli); letter-spacing: -.02em; }
.logo.grande { font-size: 30px; gap: 14px; }
.logo-segno {
  width: 28px; height: 28px; border-radius: 8px; flex: none; position: relative;
  background: linear-gradient(135deg, var(--accento), var(--accento-2));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accento) 35%, transparent);
}
.logo-segno::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2.5px solid #fff; }
.logo-segno::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; left: 12px; top: 12px; }
.logo.grande .logo-segno { width: 40px; height: 40px; border-radius: 11px; }
.logo.grande .logo-segno::after { inset: 10px; border-width: 3px; }
.logo.grande .logo-segno::before { width: 6px; height: 6px; left: 17px; top: 17px; }
.versione { font: 600 12.5px/1 var(--font); color: var(--tenue); background: var(--sup2); border: 1px solid var(--bordo); border-radius: 999px; padding: 4px 8px; margin-left: auto; letter-spacing: 0; }
.versione:empty { display: none; }

/* ─── pulsanti ─── */
.btn {
  appearance: none; border: 1px solid var(--bordo-forte); background: var(--sup); color: var(--testo);
  border-radius: var(--r-s); padding: 0 16px; height: 42px; font: 600 15px/1 var(--font); letter-spacing: -.005em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none !important; white-space: nowrap; box-shadow: var(--ombra-s);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s, filter .15s;
}
.btn:hover { background: var(--sup2); border-color: var(--bordo-forte); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primario {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accento) 92%, #fff), var(--accento));
  border-color: color-mix(in srgb, var(--accento) 80%, #000); color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 4px 14px color-mix(in srgb, var(--accento) 30%, transparent), inset 0 1px 0 rgb(255 255 255 / .18);
}
:root[data-theme="dark"] .btn.primario { color: #fff; }
.btn.primario:hover { filter: brightness(1.07); }
.btn.pericolo { color: var(--errore); }
.btn.pericolo:hover { background: var(--errore-tenue); border-color: color-mix(in srgb, var(--errore) 45%, var(--bordo)); }
.btn.piccolo { height: 36px; padding: 0 13px; font-size: 14.5px; gap: 6px; }
.btn.piccolo .ic { width: 16px; height: 16px; }
.btn.icona { width: 42px; padding: 0; }
.btn.icona.piccolo { width: 36px; }
.btn.fantasma { border-color: transparent; background: transparent; box-shadow: none; color: var(--tenue); }
.btn.fantasma:hover { background: var(--sup2); color: var(--testo); }
.btn.largo { width: 100%; height: 48px; font-size: 16px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .link:focus-visible, summary:focus-visible, a:focus-visible, .scelta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accento) 45%, transparent); outline-offset: 2px;
}
.link { background: none; border: 0; color: var(--accento); font: 600 15px/1.4 var(--font); padding: 0; cursor: pointer; justify-self: start; }
.link:hover { text-decoration: underline; }

/* ─── campi ─── */
.modulo { display: grid; gap: 16px; }
.modulo.compatto { gap: 12px; }
label { display: grid; gap: 7px; font-size: 15px; font-weight: 600; }
label small { font-weight: 500; margin-left: 4px; }
input, select, textarea {
  font: 16px/1.4 var(--font); height: 46px; padding: 0 14px; border-radius: var(--r-s);
  border: 1px solid var(--bordo-forte); background: var(--sup); color: var(--testo); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 12px 14px; resize: vertical; font-family: var(--mono); font-size: 14.5px; }
input:focus, select:focus, textarea:focus { border-color: var(--accento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accento) 16%, transparent); outline: none; }
input::placeholder, textarea::placeholder { color: var(--debole); letter-spacing: normal; }
input.codice { font-family: var(--mono); letter-spacing: .2em; font-size: 17px; }
select { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select.auto { width: auto; }
.spunta { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.spunta input { width: 20px; height: 20px; accent-color: var(--accento); flex: none; }
input[type=radio] { accent-color: var(--accento); }
.errore { color: var(--errore); font-size: 15px; font-weight: 500; }
.errore:empty { display: none; }
.riga { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.riga.fine { justify-content: flex-end; }
.spazio { flex: 1; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.due.allinea-inizio { align-items: start; }
.in-linea { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 500; }
.in-linea select { width: auto; height: 42px; }
select.piccolo { height: 36px; font-size: 14.5px; width: auto; padding: 0 34px 0 12px; }

/* interruttore */
.interruttore { display: flex; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; }
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruttore .cursore { width: 46px; height: 28px; border-radius: 999px; background: var(--sup3); border: 1px solid var(--bordo-forte); position: relative; transition: background .2s; flex: none; }
.interruttore .cursore::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.interruttore input:checked + .cursore { background: var(--accento); border-color: var(--accento); }
.interruttore input:checked + .cursore::after { transform: translateX(18px); }
.interruttore input:focus-visible + .cursore { outline: 3px solid color-mix(in srgb, var(--accento) 45%, transparent); outline-offset: 2px; }

/* ─── accesso e primo avvio ─── */
.vista.centro { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.sfondo-auth {
  background:
    radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--accento) 16%, transparent), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, color-mix(in srgb, var(--accento-2) 14%, transparent), transparent 60%), var(--sfondo);
}
.scheda-auth { width: min(440px, 100%); background: var(--sup); border: 1px solid var(--bordo); border-radius: 22px; padding: 34px; box-shadow: var(--ombra-l); display: grid; gap: 20px; }
.intro-auth { display: grid; gap: 6px; }
.intro-auth h1 { font-size: 26px; }
.passi { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.passi li { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--debole); border-top: 3px solid var(--bordo); padding-top: 8px; }
.passi li.attivo, .passi li.fatto { color: var(--testo); border-color: var(--accento); }
.qr { background: #fff; border-radius: var(--r-m); padding: 14px; width: 232px; margin: 0 auto; border: 1px solid var(--bordo); }
.qr svg { display: block; width: 100%; height: auto; }
.chiave-manuale summary { cursor: pointer; color: var(--accento); font-size: 15px; font-weight: 600; }
.chiave-manuale p { margin: 10px 0 6px; font-size: 15px; color: var(--tenue); }
.chiave-manuale .btn { margin-top: 10px; }
.codici { list-style: none; padding: 16px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; background: var(--sup2); border: 1px solid var(--bordo); border-radius: var(--r-m); font: 16px/1.4 var(--mono); }
.nota-sicura { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: var(--tenue); }
.nota-sicura .ic { width: 16px; height: 16px; }
.passkey-btn { height: 52px; font-size: 16.5px; }
.passkey-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.separatore { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: 14px; margin: -4px 0; }
.separatore::before, .separatore::after { content: ""; flex: 1; height: 1px; background: var(--bordo); }

/* ─── struttura dell'applicazione ─── */
.vista.app { display: grid; grid-template-columns: var(--larghezza-laterale) minmax(0, 1fr); min-height: 100dvh;
  background: linear-gradient(to right, var(--laterale) calc(var(--larghezza-laterale) - 1px), var(--bordo) calc(var(--larghezza-laterale) - 1px) var(--larghezza-laterale), transparent var(--larghezza-laterale)); }
.laterale {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 22px;
  padding: 22px 16px 18px; background: var(--laterale); border-right: 1px solid var(--bordo); overflow-y: auto;
}
.laterale > .logo { padding: 4px 8px 6px; }
.nav { display: grid; gap: 3px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 44px; border-radius: var(--r-s);
  color: var(--tenue); font: 600 15.5px/1 var(--font); text-decoration: none; position: relative; transition: background .12s, color .12s;
}
.nav a .ic { width: 20px; height: 20px; }
.nav a:hover { background: var(--sup2); color: var(--testo); }
.nav a.attiva { background: var(--accento-tenue); color: var(--accento); }
:root[data-theme="dark"] .nav a.attiva { color: #c5ccff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav a.attiva { color: #c5ccff; } }
.conta { margin-left: auto; font: 700 12.5px/1 var(--font); font-style: normal; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--sup3); color: var(--tenue); }
.conta:empty { display: none; }
.conta.problema { background: var(--errore); color: #fff; }
.conta.attenzione { background: var(--avviso); color: #1b1300; }
.laterale-piede { margin-top: auto; display: grid; gap: 12px; }
.scheda-licenza {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: var(--r-m); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accento) 25%, var(--bordo)); color: var(--testo); font: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accento) 10%, var(--sup)), color-mix(in srgb, var(--accento-2) 8%, var(--sup)));
}
.scheda-licenza .ic { width: 22px; height: 22px; color: var(--accento); }
.scheda-licenza span { display: grid; gap: 2px; min-width: 0; }
.scheda-licenza b { font-size: 15px; }
.scheda-licenza small { font-size: 13.5px; }
.scheda-licenza.scaduta { border-color: color-mix(in srgb, var(--avviso) 50%, var(--bordo)); background: var(--avviso-tenue); }
.scheda-licenza.scaduta .ic { color: var(--avviso); }
.host-box, .utente-box { display: flex; align-items: center; gap: 11px; padding: 0 6px; min-width: 0; }
.host-box > span:last-child, .utente-testo { display: grid; min-width: 0; line-height: 1.3; }
.host-box b, .utente-testo b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-box small, .utente-testo small { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utente-box { border-top: 1px solid var(--bordo); padding-top: 14px; }
.utente-testo { flex: 1; }
.utente-box .btn.icona { width: 36px; height: 36px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, var(--accento), var(--accento-2)); color: #fff; font: 700 15px/1 var(--font); text-transform: uppercase;
}
.avatar.grande { width: 64px; height: 64px; font-size: 24px; cursor: default; }

.principale { min-width: 0; display: flex; flex-direction: column; }
.testata {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px;
  padding: 22px 36px 18px; background: color-mix(in srgb, var(--sfondo) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px);
}
.titoli { min-width: 0; display: grid; gap: 3px; }
.titoli p { color: var(--tenue); font-size: 15px; }
.titoli p:empty { display: none; }
.azioni-testata { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.solo-mobile { display: none !important; }
.contenuto { width: 100%; max-width: 1240px; padding: 8px 36px 48px; }
.pagina { display: grid; gap: 22px; animation: entra .22s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } }
.avviso {
  margin: 0 36px 14px; padding: 14px 16px; border-radius: var(--r-m); font-size: 15px; line-height: 1.5;
  background: var(--avviso-tenue); border: 1px solid color-mix(in srgb, var(--avviso) 40%, var(--bordo));
}
.pagina .avviso { margin: 0; }
.barra-schede { display: none; }

/* ─── schede e tessere ─── */
.intestazione { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.intestazione > div { display: grid; gap: 4px; }
.scheda { background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--ombra); }
.colonne { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.griglia-sistema { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tessera { background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--ombra); display: grid; gap: 6px; align-content: start; }
.tessera-testa { display: flex; align-items: center; gap: 10px; }
.tessera h3 { margin: 0; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.valore { font: 700 32px/1.1 var(--font-titoli); font-variant-numeric: tabular-nums; letter-spacing: -.03em; margin-top: 6px; }
.tessera .sotto { min-height: 1.3em; }
.barra-uso { height: 6px; border-radius: 3px; background: var(--sup3); overflow: hidden; margin-top: 8px; }
.barra-uso i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accento), var(--accento-2)); border-radius: 3px; transition: width .6s, background .3s; }
.barra-uso i.alto { background: var(--avviso); } .barra-uso i.critico { background: var(--errore); }
.icona-tonda { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--sup2); color: var(--tenue); }
.icona-tonda .ic { width: 19px; height: 19px; }
.icona-tonda.blu { background: color-mix(in srgb, var(--accento) 14%, transparent); color: var(--accento); }
.icona-tonda.viola { background: color-mix(in srgb, var(--ram) 14%, transparent); color: var(--ram); }
.icona-tonda.verde { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.icona-tonda.arancio { background: color-mix(in srgb, var(--avviso) 16%, transparent); color: var(--avviso); }
.icona-tonda.azzurro { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.icona-tonda.rosso { background: color-mix(in srgb, var(--errore) 14%, transparent); color: var(--errore); }
.icona-tonda.scuro { background: var(--testo); color: var(--sfondo); }
.icona-tonda.grigio { background: var(--sup3); color: var(--tenue); }

.grafico-scheda canvas { width: 100%; height: 200px; display: block; }
.legenda { display: flex; gap: 16px; font-size: 14px; color: var(--tenue); font-weight: 500; }
.legenda span::before { content: ""; display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.l-cpu::before { background: var(--cpu); } .l-ram::before { background: var(--ram); }

/* eroe salute */
.eroe {
  display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-radius: var(--r); border: 1px solid var(--bordo);
  background: var(--sup); box-shadow: var(--ombra); flex-wrap: wrap;
}
.eroe-testo { flex: 1; min-width: 200px; display: grid; gap: 4px; }
.eroe-testo p { color: var(--tenue); font-size: 15.5px; }
.eroe.grande { padding: 28px; }
.eroe.grande h2 { font-size: 24px; }
.eroe.ok { background: linear-gradient(120deg, var(--ok-tenue), var(--sup) 60%); border-color: color-mix(in srgb, var(--ok) 30%, var(--bordo)); }
.eroe.attenzione { background: linear-gradient(120deg, var(--avviso-tenue), var(--sup) 60%); border-color: color-mix(in srgb, var(--avviso) 35%, var(--bordo)); }
.eroe.problema { background: linear-gradient(120deg, var(--errore-tenue), var(--sup) 60%); border-color: color-mix(in srgb, var(--errore) 35%, var(--bordo)); }
.semaforo { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sup2); position: relative; }
.eroe.grande .semaforo { width: 72px; height: 72px; }
.semaforo span { width: 22px; height: 22px; border-radius: 50%; background: var(--spento); }
.eroe.grande .semaforo span { width: 28px; height: 28px; }
.semaforo.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); } .semaforo.ok span { background: var(--ok); box-shadow: 0 0 18px color-mix(in srgb, var(--ok) 70%, transparent); }
.semaforo.attenzione { background: color-mix(in srgb, var(--avviso) 18%, transparent); } .semaforo.attenzione span { background: var(--avviso); box-shadow: 0 0 18px color-mix(in srgb, var(--avviso) 70%, transparent); }
.semaforo.problema { background: color-mix(in srgb, var(--errore) 16%, transparent); } .semaforo.problema span { background: var(--errore); box-shadow: 0 0 18px color-mix(in srgb, var(--errore) 70%, transparent); animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(.82); opacity: .75; } }

/* ─── servizi ─── */
.filtri { display: flex; gap: 8px; flex-wrap: wrap; }
.filtri button { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--bordo-forte); background: var(--sup); color: var(--tenue); font: 600 14.5px/1 var(--font); cursor: pointer; }
.filtri button:hover { color: var(--testo); }
.filtri button.attiva { background: var(--testo); color: var(--sfondo); border-color: var(--testo); }
.griglia-servizi { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.griglia-servizi > *, .contenuto > *, .colonne > * { min-width: 0; }
.servizio {
  background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--ombra);
  display: grid; gap: 14px; align-content: start; transition: border-color .15s, box-shadow .15s;
}
.servizio:hover { border-color: var(--bordo-forte); }
.servizio .testa { display: flex; align-items: center; gap: 12px; min-width: 0; }
.servizio .testa .icona-tonda { width: 42px; height: 42px; border-radius: 12px; }
.servizio .testa .icona-tonda .ic { width: 21px; height: 21px; }
.nome-box { display: grid; gap: 2px; min-width: 0; flex: 1; }
.servizio .nome { font: 650 17px/1.25 var(--font-titoli); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.servizio .desc { color: var(--tenue); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.servizio .etichette { display: flex; gap: 6px; flex-wrap: wrap; }
.pallino { width: 9px; height: 9px; border-radius: 50%; background: var(--spento); flex: none; display: inline-block; }
.pallino.online { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.pallino.errored, .pallino.offline { background: var(--errore); box-shadow: 0 0 0 3px color-mix(in srgb, var(--errore) 22%, transparent); }
.pallino.launching, .pallino.stopping, .pallino.waiting { background: var(--avviso); box-shadow: 0 0 0 3px color-mix(in srgb, var(--avviso) 22%, transparent); }
.metriche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metriche div { background: var(--sup2); border-radius: var(--r-s); padding: 9px 11px; display: grid; gap: 1px; }
.metriche b { font: 650 16px/1.3 var(--font); font-variant-numeric: tabular-nums; }
.metriche span { color: var(--tenue); font-size: 13px; font-weight: 500; }
.servizio .riga { gap: 8px; }
.servizio .azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--bordo); padding-top: 14px; }
.vuoto { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--tenue); background: var(--sup); border: 1.5px dashed var(--bordo-forte); border-radius: var(--r); font-size: 16px; display: grid; gap: 10px; justify-items: center; }
.vuoto .ic { width: 36px; height: 36px; color: var(--debole); }
.stato-testo { font-size: 15px; color: var(--tenue); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stato-testo.errore { color: var(--errore); }
.mini-servizi { list-style: none; margin: 0; padding: 0; display: grid; }
.mini-servizi li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--bordo); font-size: 15px; }
.mini-servizi li:first-child { border-top: 0; padding-top: 2px; }
.mini-servizi b { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-servizi .sotto { white-space: nowrap; }

/* ─── chip ─── */
.chip { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1 var(--font); background: var(--sup2); color: var(--tenue); border: 1px solid var(--bordo); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; }
.chip.ok { color: var(--ok); background: var(--ok-tenue); border-color: color-mix(in srgb, var(--ok) 30%, var(--bordo)); }
.chip.no { color: var(--errore); background: var(--errore-tenue); border-color: color-mix(in srgb, var(--errore) 30%, var(--bordo)); }
.chip.warn { color: var(--avviso); background: var(--avviso-tenue); border-color: color-mix(in srgb, var(--avviso) 35%, var(--bordo)); }
.chip.info { color: var(--info); background: var(--info-tenue); border-color: color-mix(in srgb, var(--info) 30%, var(--bordo)); }
.chip.pro { color: #fff; border: 0; background: linear-gradient(135deg, var(--accento), var(--accento-2)); }
h2 .chip { vertical-align: middle; margin-left: 8px; }

/* ─── registro ─── */
.registro { list-style: none; margin: 0; padding: 0; display: grid; font-size: 15px; }
.registro.lungo { max-height: none; }
.registro li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--bordo); }
.registro li:first-child { border-top: 0; }
.registro time { color: var(--tenue); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.registro .fallito { color: var(--errore); } .registro .avviso { color: var(--avviso); background: none; border: 0; padding: 0; margin: 0; }
.registro .chi { color: var(--tenue); }

/* ─── salute ─── */
.conteggi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.conteggi div { background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r-m); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--ombra); }
.conteggi b { font: 700 26px/1 var(--font-titoli); font-variant-numeric: tabular-nums; }
.conteggi span { color: var(--tenue); font-size: 14.5px; font-weight: 500; }
.salute-gruppi { display: grid; gap: 22px; }
.gruppo-salute h3 { margin: 0 0 10px; }
.voci-salute { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.voce-salute {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic tit az" "ic det az" ". cons cons";
  gap: 4px 14px; align-items: center;
  background: var(--sup); border: 1px solid var(--bordo); border-left-width: 4px; border-radius: var(--r-m); padding: 14px 18px; box-shadow: var(--ombra);
}
.voce-salute .icona-tonda { grid-area: ic; }
.voce-salute b { grid-area: tit; font-size: 16px; font-weight: 650; }
.voce-salute .dettaglio { grid-area: det; color: var(--tenue); font-size: 15px; overflow-wrap: anywhere; }
.voce-salute .consiglio { grid-area: cons; font-size: 15px; margin-top: 4px; }
.voce-salute .azione { grid-area: az; }
.voce-salute.problema { border-left-color: var(--errore); }
.voce-salute.attenzione { border-left-color: var(--avviso); }
.voce-salute.info { border-left-color: var(--info); }
.voce-salute.ok { border-left-color: var(--ok); }

/* ─── elenchi ─── */
.elenco-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.elenco-righe:empty { display: none; }
.elenco-righe > li { background: var(--sup2); border: 1px solid var(--bordo); border-radius: var(--r-m); padding: 13px 16px; display: grid; gap: 10px; font-size: 15px; }
.elenco-righe .testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.elenco-righe .testa b { font-size: 16px; font-weight: 650; }
.elenco-righe .sotto { font-size: 14px; }
.elenco-righe details > summary { color: var(--accento); font-size: 15px; font-weight: 600; }
.elenco-righe details[open] > summary { margin-bottom: 10px; }
.elenco-righe.annidato { margin-top: 4px; }
.elenco-righe.annidato > li { background: var(--sup); }
.elenco-righe > li.evidenza { border-color: var(--avviso); background: var(--avviso-tenue); }
.scheda .elenco-righe > li { background: var(--sup2); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.avanzate > summary { color: var(--accento); font-weight: 600; font-size: 15px; }
details.avanzate[open] > summary { margin-bottom: 12px; }

/* ─── impostazioni ─── */
.schede { display: flex; gap: 2px; margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--bordo); }
.schede::-webkit-scrollbar { display: none; }
.schede button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--tenue); font: 600 15px/1 var(--font); padding: 13px 14px; cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.schede button:hover { color: var(--testo); }
.schede button.attiva { color: var(--testo); border-bottom-color: var(--accento); }
.schede button .ic { width: 17px; height: 17px; }
[data-pannello] { display: grid; gap: 18px; align-content: start; }
.blocco { display: grid; gap: 14px; align-content: start; }
.blocco > .btn, .modulo.compatto > .btn { justify-self: start; }
.blocco-testa { display: flex; gap: 14px; align-items: flex-start; }
.blocco-testa > div { display: grid; gap: 3px; }
.blocco-testa .icona-tonda { width: 42px; height: 42px; border-radius: 12px; }
.profilo-scheda { display: flex; align-items: center; gap: 18px; }
.profilo-scheda h2 { font-size: 22px; }
.codice-macchina { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.codice-macchina code { font-size: 17px; padding: 8px 14px; letter-spacing: .06em; border-radius: var(--r-s); }
.licenza-eroe { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(130deg, color-mix(in srgb, var(--accento) 13%, var(--sup)), color-mix(in srgb, var(--accento-2) 10%, var(--sup)) 55%, var(--sup));
  border-color: color-mix(in srgb, var(--accento) 25%, var(--bordo)); }
.licenza-eroe .icona-tonda { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--accento), var(--accento-2)); color: #fff; }
.licenza-eroe .icona-tonda .ic { width: 30px; height: 30px; }
.licenza-eroe > div:nth-child(2) { flex: 1; min-width: 220px; display: grid; gap: 5px; }
.licenza-eroe h2 { font-size: 24px; }
.licenza-eroe p { color: var(--tenue); font-size: 15.5px; }
.progresso { height: 8px; border-radius: 4px; background: var(--sup3); overflow: hidden; margin-top: 8px; max-width: 360px; }
.progresso i { display: block; height: 100%; background: linear-gradient(90deg, var(--accento), var(--accento-2)); border-radius: 4px; }
.tabella-piani { display: grid; border: 1px solid var(--bordo); border-radius: var(--r-m); overflow: hidden; }
.tabella-piani .rp { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px; align-items: center; border-top: 1px solid var(--bordo); font-size: 15px; }
.tabella-piani .rp:first-child { border-top: 0; background: var(--sup2); font-weight: 650; }
.tabella-piani .rp > * { padding: 12px 16px; }
.tabella-piani .rp > :not(:first-child) { text-align: center; display: flex; justify-content: center; }
.tabella-piani .si { color: var(--ok); } .tabella-piani .no { color: var(--debole); }
.tabella-piani .attuale { background: color-mix(in srgb, var(--accento) 8%, transparent); }
.zona-pericolo { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--errore) 35%, var(--bordo)); border-radius: var(--r-m); background: var(--errore-tenue); }
.zona-pericolo > div { display: grid; gap: 3px; }
.bloccato-pro { display: grid; justify-items: start; gap: 12px; padding: 24px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--accento) 25%, var(--bordo)); background: linear-gradient(130deg, color-mix(in srgb, var(--accento) 10%, var(--sup)), var(--sup)); }
.bloccato-pro p { color: var(--tenue); font-size: 15.5px; }
.barra-azioni-pagina:empty { display: none; }
.scheda-stato { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.scheda-stato > div { background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r-m); padding: 13px 15px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.scheda-stato b { font-size: 15.5px; font-weight: 650; }

/* git */
#git-contenuto { display: grid; gap: 14px; align-content: start; }
#git-contenuto h3 { margin-top: 10px; }
.git-riassunto { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.git-riassunto > div { background: var(--sup2); border: 1px solid var(--bordo); border-radius: var(--r-m); padding: 12px 14px; display: grid; gap: 3px; overflow-wrap: anywhere; }
.git-riassunto b { font-size: 15.5px; }
.storico-git li .testa code { font-size: 13.5px; }

/* ─── media ─── */
.in-onda .intestazione { margin-bottom: 8px; }
.sessioni-media { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sessioni-media > li.vuota { color: var(--tenue); font-size: 15px; padding: 4px 0 6px; }
.sessione-media { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; padding: 13px 16px; background: var(--sup2); border-radius: var(--r-m); align-items: center; }
.sessione-media .titolo { font-weight: 650; overflow-wrap: anywhere; }
.sessione-media .dettagli { color: var(--tenue); font-size: 14.5px; grid-column: 1; overflow-wrap: anywhere; }
.sessione-media .azioni { grid-row: 1 / span 3; grid-column: 2; display: flex; gap: 8px; }
.sessione-media .avanzamento { grid-column: 1; height: 5px; background: var(--bordo); border-radius: 3px; overflow: hidden; }
.sessione-media .avanzamento i { display: block; height: 100%; background: var(--accento); }
.sessione-media .trans { color: var(--avviso); }
.campo-librerie { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
.campo-librerie label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.campo-librerie input { width: 19px; height: 19px; accent-color: var(--accento); }
.campo-librerie .tutte { flex-basis: 100%; font-weight: 650; }

/* ─── finestre ─── */
.finestra {
  border: 1px solid var(--bordo); border-radius: 22px; background: var(--sup); color: var(--testo);
  padding: 26px 28px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-shadow: var(--ombra-l);
}
.finestra[open] { animation: apri .18s ease-out; }
@keyframes apri { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.finestra.larga { width: min(900px, calc(100vw - 24px)); }
.finestra::backdrop { background: rgb(8 10 14 / .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.finestra > .intestazione, .finestra .modulo > .intestazione { margin-bottom: 8px; align-items: flex-start; }
.finestra h2 { font-size: 21px; }
.finestra h3 { margin-top: 10px; }
.finestra > * + * { margin-top: 14px; }
.finestra > .intestazione + * { margin-top: 6px; }
.log { background: #0a0d12; color: #d6dce6; font: 13.5px/1.6 var(--mono); padding: 14px 16px; border-radius: var(--r-m); height: min(60vh, 540px); overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; border: 1px solid #1c222c; }
.schede-log { display: flex; gap: 6px; }
.schede-log button { border: 0; background: none; color: var(--tenue); font: 600 15px/1 var(--font); padding: 10px 14px; border-radius: var(--r-s); cursor: pointer; }
.schede-log button.attiva { background: var(--sup2); color: var(--testo); }
.finestra .blocco { border-top: 1px solid var(--bordo); padding-top: 18px; }

.tessere-scelta { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.scelta {
  text-align: left; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--r); border: 1px solid var(--bordo);
  background: var(--sup); color: var(--testo); font: inherit; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.scelta:hover { border-color: var(--accento); box-shadow: 0 6px 22px color-mix(in srgb, var(--accento) 14%, transparent); transform: translateY(-1px); }
.scelta .icona-tonda { margin-bottom: 6px; width: 42px; height: 42px; border-radius: 12px; }
.scelta b { font-size: 16.5px; }
.scelta > span:not(.icona-tonda):not(.chip) { color: var(--tenue); font-size: 14.5px; line-height: 1.5; }
.scelta .chip.pro { position: absolute; top: 16px; right: 16px; }
.scelta code { word-break: normal; white-space: nowrap; }
.zona-carica { border: 2px dashed var(--bordo-forte); border-radius: var(--r); padding: 30px 18px; text-align: center; display: grid; gap: 6px; justify-items: center; color: var(--tenue); transition: border-color .15s, background .15s; font-size: 15px; }
.zona-carica .ic { color: var(--accento); }
.zona-carica b { color: var(--testo); font-size: 16px; }
.zona-carica.sopra { border-color: var(--accento); background: color-mix(in srgb, var(--accento) 8%, transparent); }
.zona-carica .link, label.link { color: var(--accento); cursor: pointer; font-weight: 600; display: inline; }
label.btn { display: inline-flex; font-size: 15px; }
.link-copia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.link-copia a { overflow-wrap: anywhere; font-family: var(--mono); font-size: 14px; }
.avviso-piccolo { padding: 11px 14px; border-radius: var(--r-s); font-size: 15px; background: var(--avviso-tenue); border: 1px solid color-mix(in srgb, var(--avviso) 35%, var(--bordo)); }
.stato-pubblica { font-size: 16px; }
.modulo-pubblica { display: grid; gap: 14px; }
.mc-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-testa #mc-stato { font-size: 15px; color: var(--tenue); }
.riga.comando { flex-wrap: nowrap; }
.riga.comando input { flex: 1; min-width: 0; }
#mc-log { height: min(46vh, 440px); }
.rotella { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--bordo-forte); border-top-color: var(--accento); border-radius: 50%; animation: gira .8s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.spunta.allinea { align-self: end; min-height: 46px; }
#mc-proprieta { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
#mc-proprieta .aiuto, #mc-proprieta .errore, #mc-proprieta button { grid-column: 1 / -1; justify-self: start; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--testo); color: var(--sfondo); padding: 13px 20px; border-radius: 12px; font: 600 15px/1.4 var(--font);
  transition: .25s; z-index: 50; max-width: calc(100vw - 32px); box-shadow: var(--ombra-l);
}
.toast.visibile { opacity: 1; transform: translate(-50%, 0); }
.toast.errore-t { background: var(--errore); color: #fff; }

/* ─── schermi medi ─── */
@media (max-width: 1180px) {
  .griglia-sistema { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonne { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  :root { --larghezza-laterale: 232px; }
  .testata { padding: 18px 24px 14px; }
  .contenuto { padding: 6px 24px 40px; }
  .avviso { margin: 0 24px 12px; }
}

/* ─── telefono ─── */
@media (max-width: 820px) {
  .vista.app { grid-template-columns: minmax(0, 1fr); }
  .laterale { display: none; }
  .solo-mobile { display: inline-flex !important; }
  .logo.solo-mobile { display: flex !important; }
  .testata { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; gap: 12px; border-bottom: 1px solid var(--bordo); }
  .testata h1 { font-size: 22px; }
  .titoli p { display: none; }
  .azioni-testata { gap: 6px; }
  .azioni-testata .btn.icona { width: 40px; height: 40px; }
  #btn-aggiungi { height: 40px; padding: 0 14px; }
  .contenuto { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .avviso { margin: 12px 16px 0; }
  .pagina { gap: 16px; }
  .griglia-sistema { gap: 12px; }
  .tessera { padding: 14px 16px; }
  .valore { font-size: 26px; }
  .scheda { padding: 18px; }
  .eroe { padding: 16px 18px; gap: 14px; }
  .eroe .btn { width: 100%; }
  .eroe.grande { padding: 20px; }
  .eroe.grande h2 { font-size: 20px; }
  .conteggi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .griglia-servizi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vista.app { background: none; }
  .filtri { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .filtri::-webkit-scrollbar { display: none; }
  .filtri button { flex: none; }
  .barra-schede {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--sup) 90%, transparent);
    backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid var(--bordo);
  }
  .barra-schede a { display: grid; justify-items: center; gap: 4px; padding: 6px 0 2px; color: var(--tenue); font: 600 12.5px/1 var(--font); text-decoration: none; position: relative; border-radius: 10px; }
  .barra-schede a .ic { width: 24px; height: 24px; }
  .barra-schede a.attiva { color: var(--accento); }
  .barra-schede .conta { position: absolute; top: 0; left: calc(50% + 6px); min-width: 20px; height: 20px; font-size: 12px; padding: 0 5px; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  h1 { font-size: 24px; }
  .scheda-auth { padding: 26px 20px; border-radius: 18px; }
  .due { grid-template-columns: 1fr; }
  .registro li { grid-template-columns: 1fr; gap: 2px; }
  .finestra { padding: 20px 18px; border-radius: 18px; }
  .finestra.larga, .finestra { width: calc(100vw - 16px); }
  .riga.comando { flex-wrap: wrap; }
  .mc-testa .spazio { flex-basis: 100%; height: 0; }
  .sessione-media { grid-template-columns: minmax(0, 1fr); }
  .sessione-media .azioni { grid-row: auto; grid-column: 1; }
  .voce-salute { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic tit" "ic det" "cons cons" "az az"; padding: 14px 16px; }
  .voce-salute .azione { justify-self: start; margin-top: 8px; }
  .conteggi .icona-tonda { display: none; }
  .conteggi div { padding: 12px 14px; gap: 10px; }
  .tabella-piani .rp { grid-template-columns: minmax(0, 1fr) 84px 84px; font-size: 14.5px; }
  .tabella-piani .rp > * { padding: 11px 10px; }
  .metriche b { font-size: 15px; }
  .servizio .azioni .btn.piccolo { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ─── 2.3: dischi ─── */
.barra-dischi { margin-bottom: 4px; }
#dischi-contenuto { display: grid; gap: 18px; }
.griglia-dischi { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.griglia-dischi > * { min-width: 0; }
.servizio.disco { border-top: 4px solid var(--bordo); }
.servizio.disco.ok { border-top-color: var(--ok); }
.servizio.disco.attenzione { border-top-color: var(--avviso); }
.servizio.disco.problema { border-top-color: var(--errore); }
.misure-disco { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 10px; }
.misure-disco.compatte { grid-template-columns: repeat(2, minmax(0, 150px)); }
.misura { background: var(--sup2); border-radius: var(--r-s); padding: 11px 13px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.misura b { font: 700 18px/1.2 var(--font-titoli); font-variant-numeric: tabular-nums; }
.misura.grande b { font-size: 26px; }
.misura .sotto { font-size: 13.5px; }
.misura .giudizio { font-size: 13.5px; font-weight: 600; color: var(--tenue); }
.perc.ok, .temp.ok { color: var(--ok); } .perc.attenzione, .temp.attenzione { color: var(--avviso); } .perc.problema, .temp.problema { color: var(--errore); }
.barra-salute { height: 7px; border-radius: 4px; background: var(--sup3); overflow: hidden; }
.barra-salute i { display: block; height: 100%; border-radius: 4px; background: var(--spento); }
.barra-salute i.ok { background: var(--ok); } .barra-salute i.attenzione { background: var(--avviso); } .barra-salute i.problema { background: var(--errore); }
.nota-dischi { font-size: 14px; }
.dischi-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.disco-mini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bordo); border-radius: var(--r-m); color: var(--testo); text-decoration: none !important; background: var(--sup2); transition: border-color .15s; }
.disco-mini:hover { border-color: var(--accento); }
.disco-mini .nome-box b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disco-mini .barra-salute { margin-top: 4px; }
.disco-eroe { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 6px 0; }
.disco-eroe-testo { display: grid; gap: 12px; flex: 1; min-width: 220px; }
.disco-eroe-testo h2 { font-size: 22px; }
.anello { width: 120px; height: 120px; border-radius: 50%; display: grid; place-content: center; text-align: center; flex: none;
  border: 10px solid var(--sup3); background: var(--sup); }
.anello b { font: 800 30px/1 var(--font-titoli); font-variant-numeric: tabular-nums; }
.anello span { color: var(--tenue); font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.anello.ok { border-color: color-mix(in srgb, var(--ok) 70%, var(--sup3)); } .anello.ok b { color: var(--ok); }
.anello.attenzione { border-color: color-mix(in srgb, var(--avviso) 70%, var(--sup3)); } .anello.attenzione b { color: var(--avviso); }
.anello.problema { border-color: color-mix(in srgb, var(--errore) 75%, var(--sup3)); } .anello.problema b { color: var(--errore); }
.note-disco { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.note-disco li { display: flex; gap: 12px; align-items: center; font-size: 15px; background: var(--sup2); border-radius: var(--r-s); padding: 9px 12px; }
.note-disco .icona-tonda { width: 30px; height: 30px; border-radius: 8px; }
.note-disco .icona-tonda .ic { width: 16px; height: 16px; }
.info-disco { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; margin: 0; font-size: 15px; }
.info-disco dt { color: var(--tenue); font-weight: 500; }
.info-disco dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tabella-scorre { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--r-m); }
.tabella-smart { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabella-smart th { text-align: left; background: var(--sup2); font-weight: 650; padding: 10px 12px; white-space: nowrap; position: sticky; top: 0; }
.tabella-smart td { padding: 9px 12px; border-top: 1px solid var(--bordo); vertical-align: top; font-variant-numeric: tabular-nums; }
.tabella-smart td small { display: block; color: var(--debole); font-size: 12.5px; font-family: var(--mono); }
.tabella-smart td.mono { font-family: var(--mono); font-size: 14px; }
.tabella-smart tr.critico td:nth-child(-n+2) { font-weight: 650; }
.tabella-smart tr.anomalo td { background: var(--avviso-tenue); }
.tabella-smart tr.guasto td { background: var(--errore-tenue); }
.grafico-disco { width: 100%; height: 200px; display: block; }
#grafico-salute-disco { height: 220px; }
.test-in-corso { display: grid; gap: 10px; padding: 16px 18px; }
@media (max-width: 820px) {
  .griglia-dischi { grid-template-columns: minmax(0, 1fr); }
  .misure-disco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .anello { width: 100px; height: 100px; border-width: 8px; }
  .anello b { font-size: 26px; }
  .info-disco { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .info-disco dd { margin-bottom: 8px; }
  .misure-disco.compatte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#disco-riepilogo { display: grid; gap: 14px; }
#disco-riepilogo h3 { margin: 6px 0 -4px; }
.tabella-piani .rp.tre { grid-template-columns: minmax(0, 1fr) 110px 110px 110px; }
@media (max-width: 560px) { .tabella-piani .rp.tre { grid-template-columns: minmax(0, 1fr) 70px 60px 82px; font-size: 13.5px; } .tabella-piani .rp.tre > * { padding: 10px 6px; } }
/* ─── 2.5: Enterprise ─── */
.campo-permessi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; }
.campo-permessi .spunta { font-size: 15px; }
form.esporta { background: var(--sup2); border: 1px solid var(--bordo); border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 14px; }
form.esporta input[type=date] { width: auto; height: 42px; }
.link-pubblico { display: grid; gap: 4px; background: var(--ok-tenue); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--bordo)); border-radius: var(--r-s); padding: 9px 12px; }
.link-pubblico .link-copia a { font-size: 14px; }
#modulo-indirizzo { flex-wrap: wrap; }
#modulo-indirizzo .errore { flex-basis: 100%; }
.link-pubblico.spento { background: var(--avviso-tenue); border-color: color-mix(in srgb, var(--avviso) 35%, var(--bordo)); }
.elenco-problemi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.elenco-problemi li { padding: 11px 14px; border-radius: var(--r-s); font-size: 15px; background: var(--avviso-tenue); border: 1px solid color-mix(in srgb, var(--avviso) 35%, var(--bordo)); }
.elenco-problemi a, #accesso-tailscale a { font-weight: 600; word-break: break-all; }
.log-diagnostica { white-space: pre-wrap; word-break: break-word; font-size: 14px; max-height: 420px; overflow: auto; background: var(--sup2); padding: 12px; border-radius: var(--r-s); }

/* ─────────── 2.6 · lavori con avanzamento ─────────── */
.pannello-lavori { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 860px) { .pannello-lavori { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); } }
.lavoro { pointer-events: auto; background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r-m); box-shadow: var(--ombra-l); padding: 14px 16px; display: grid; gap: 9px;
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.2), border-color .3s; }
.lavoro.entra { opacity: 1; transform: none; }
.lavoro.esce { opacity: 0; transform: translateX(30px); }
.lavoro .testa { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.lavoro .perc { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--accento); }
.lavoro .passo { font-size: 14.5px; color: var(--tenue); min-height: 1.3em; }
.lavoro .ic { width: 20px; height: 20px; }
.lavoro.riuscito { border-color: color-mix(in srgb, var(--ok) 55%, var(--bordo)); }
.lavoro.riuscito .ic, .lavoro.riuscito .perc { color: var(--ok); }
.lavoro.riuscito .ic { animation: spunta .45s cubic-bezier(.2,.9,.3,1.4); }
.lavoro.fallito { border-color: color-mix(in srgb, var(--errore) 55%, var(--bordo)); }
.lavoro.fallito .ic, .lavoro.fallito .perc, .lavoro.fallito .passo { color: var(--errore); }
.barra-avanzamento { height: 10px; border-radius: 999px; background: var(--sup3); overflow: hidden; }
.barra-avanzamento .riempi { display: block; height: 100%; width: 2%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accento), var(--accento-2), #e0499b); background-size: 200% 100%;
  transition: width .45s ease; animation: scorri 1.6s linear infinite; position: relative; }
.lavoro.in-corso .barra-avanzamento .riempi::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgb(255 255 255 / .22) 0 8px, transparent 8px 16px); background-size: 22px 22px; animation: strisce .7s linear infinite; }
.lavoro.riuscito .barra-avanzamento .riempi { background: var(--ok); animation: none; }
.lavoro.fallito .barra-avanzamento .riempi { background: var(--errore); animation: none; }
@keyframes scorri { to { background-position: -200% 0; } }
@keyframes strisce { to { background-position: 22px 0; } }
@keyframes spunta { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.btn.lavora .ic { animation: gira .9s linear infinite; }
.scansione { position: relative; overflow: hidden; }
.scansione::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--accento) 18%, transparent) 50%, transparent 80%);
  transform: translateX(-100%); animation: passata 1.4s ease-in-out infinite; }
@keyframes passata { to { transform: translateX(100%); } }

/* backup: modalità e destinazioni */
.scelta-modalita { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.opzione-modalita { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--bordo); border-radius: var(--r-m); cursor: pointer; background: var(--sup); transition: border-color .2s, box-shadow .2s, transform .15s; }
.opzione-modalita:hover { transform: translateY(-1px); }
.opzione-modalita input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opzione-modalita > span:last-child { display: grid; gap: 3px; font-size: 15px; }
.opzione-modalita.scelta { border-color: var(--accento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accento) 16%, transparent); background: color-mix(in srgb, var(--accento) 5%, var(--sup)); }
.opzione-modalita:focus-within { outline: 3px solid color-mix(in srgb, var(--accento) 40%, transparent); outline-offset: 2px; }
.destinazione { transition: opacity .25s; }
.destinazione.spenta { opacity: .6; }
.destinazione .interruttore { gap: 0; }
.chip.ordine { background: color-mix(in srgb, var(--accento-2) 14%, transparent); color: var(--accento-2); }
.btn.icona-sola { padding-inline: 8px; }
.btn.icona-sola .ic { margin: 0; }

/* ─────────── 2.6 · più colore ─────────── */
:root {
  --rosa: #e0499b; --verdeacqua: #0ea5a0; --arancio: #f26b1d; --giallo: #d99a00; --indaco: #5b4bf0;
  --grad: linear-gradient(135deg, #4b5ef0 0%, #8a4bf0 45%, #e0499b 100%);
  --grad-caldo: linear-gradient(135deg, #f26b1d, #e0499b);
  --grad-fresco: linear-gradient(135deg, #0ea5a0, #2f7de1);
}
:root[data-theme="dark"] { --rosa: #ff6fb5; --verdeacqua: #2fd4c9; --arancio: #ff8a47; --giallo: #f2c14b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rosa: #ff6fb5; --verdeacqua: #2fd4c9; --arancio: #ff8a47; --giallo: #f2c14b; } }

/* barra laterale: ogni voce ha il suo colore */
.nav a, .barra-schede a { --c: var(--accento); }
[data-vai="panoramica"] { --c: #4b5ef0; }
[data-vai="servizi"] { --c: var(--verdeacqua); }
[data-vai="media"] { --c: var(--rosa); }
[data-vai="salute"] { --c: #e5484d; }
[data-vai="dischi"] { --c: var(--arancio); }
[data-vai="attivita"] { --c: #8a4bf0; }
[data-vai="impostazioni"], [data-vai="altro"] { --c: #64748b; }
.barra-schede a .ic { color: var(--c); }
.nav a .ic { color: var(--c); transition: transform .2s cubic-bezier(.2,.9,.3,1.4); }
.nav a:hover .ic { transform: scale(1.12) rotate(-4deg); }
.nav a.attiva { background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--testo); }
.nav a.attiva::before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
:root[data-theme="dark"] .nav a.attiva { color: var(--testo); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav a.attiva { color: var(--testo); } }
.laterale { background: linear-gradient(180deg, color-mix(in srgb, #4b5ef0 5%, var(--laterale)), var(--laterale) 40%, color-mix(in srgb, #e0499b 4%, var(--laterale))); }
.logo-segno { background: var(--grad); }

/* pulsanti principali con sfumatura */
.btn.primario { background: var(--grad); background-size: 160% 160%; border-color: transparent; transition: background-position .5s, box-shadow .2s, transform .08s, filter .15s; }
.btn.primario:hover { background-position: 100% 0; box-shadow: 0 6px 20px color-mix(in srgb, #8a4bf0 35%, transparent); filter: none; }

/* schede delle impostazioni: sottolineatura colorata */
.schede button { position: relative; }
.schede button.attiva { border-bottom-color: transparent; }
.schede button.attiva::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); animation: allarga .3s ease-out; }
@keyframes allarga { from { transform: scaleX(.2); opacity: 0; } }
.schede button .ic { color: var(--accento-2); }

/* tessere del sistema: una tinta per ciascuna */
.griglia-sistema .tessera { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.griglia-sistema .tessera::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--t, var(--grad)); }
.griglia-sistema .tessera:nth-child(1) { --t: linear-gradient(90deg, #4b5ef0, #6a8bff); background: linear-gradient(160deg, color-mix(in srgb, #4b5ef0 7%, var(--sup)), var(--sup) 55%); }
.griglia-sistema .tessera:nth-child(2) { --t: linear-gradient(90deg, #b04be0, #e0499b); background: linear-gradient(160deg, color-mix(in srgb, #b04be0 7%, var(--sup)), var(--sup) 55%); }
.griglia-sistema .tessera:nth-child(3) { --t: linear-gradient(90deg, #10a050, #0ea5a0); background: linear-gradient(160deg, color-mix(in srgb, #10a050 7%, var(--sup)), var(--sup) 55%); }
.griglia-sistema .tessera:nth-child(4) { --t: linear-gradient(90deg, #f26b1d, #d99a00); background: linear-gradient(160deg, color-mix(in srgb, #f26b1d 7%, var(--sup)), var(--sup) 55%); }
.griglia-sistema .tessera:hover, .servizio:hover { transform: translateY(-3px); box-shadow: var(--ombra-l); }
.servizio { transition: transform .2s, box-shadow .2s, border-color .2s; }

/* nuove tinte per le icone */
.icona-tonda.rosa { background: color-mix(in srgb, var(--rosa) 15%, transparent); color: var(--rosa); }
.icona-tonda.verdeacqua { background: color-mix(in srgb, var(--verdeacqua) 15%, transparent); color: var(--verdeacqua); }
.icona-tonda.arcobaleno { background: var(--grad); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, #8a4bf0 30%, transparent); }
.icona-tonda { transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.blocco-testa:hover .icona-tonda, .tessera:hover .icona-tonda { transform: scale(1.08) rotate(-5deg); }

/* titolo della pagina con sottolineatura a colori */
.titoli h1 { position: relative; }
.titoli h1::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; margin-top: 6px; background: var(--grad); animation: allunga .5s ease-out; }
@keyframes allunga { from { width: 0; } }

/* chip più vivaci */
.chip.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.chip.no, .chip.warn { background: color-mix(in srgb, var(--avviso) 17%, transparent); color: var(--avviso); }
.chip.pro { background: var(--grad); color: #fff; }

/* eroe della salute: bagliore animato quando è tutto a posto */
.eroe.ok .semaforo.ok span { animation: respira 3s ease-in-out infinite; }
@keyframes respira { 50% { box-shadow: 0 0 30px color-mix(in srgb, var(--ok) 90%, transparent); } }

/* ─────────── 2.6 · animazioni ─────────── */
.pagina > * { animation: sale .35s cubic-bezier(.2,.8,.3,1) both; }
.pagina > *:nth-child(2) { animation-delay: .04s; } .pagina > *:nth-child(3) { animation-delay: .08s; }
.pagina > *:nth-child(4) { animation-delay: .12s; } .pagina > *:nth-child(5) { animation-delay: .16s; }
@keyframes sale { from { opacity: 0; transform: translateY(10px); } }
/* le liste entrano animate solo quando apri la pagina, non a ogni aggiornamento automatico
   (altrimenti ogni 5 secondi le schede sembrerebbero "ripartire") */
.anima :is(.voci-salute > li, .elenco-righe > li, .griglia-servizi > *, .griglia-cartelle > *) { animation: sale .3s ease-out both; }
.anima :is(.voci-salute, .elenco-righe, .griglia-servizi) > :nth-child(2) { animation-delay: .03s; }
.anima :is(.voci-salute, .elenco-righe, .griglia-servizi) > :nth-child(3) { animation-delay: .06s; }
.anima :is(.voci-salute, .elenco-righe, .griglia-servizi) > :nth-child(4) { animation-delay: .09s; }
.anima :is(.voci-salute, .elenco-righe, .griglia-servizi) > :nth-child(n+5) { animation-delay: .12s; }
.barra-uso i { transition: width .9s cubic-bezier(.2,.8,.3,1), background .3s; }
.scheda, .tessera { transition: box-shadow .2s, transform .2s, border-color .2s; }
dialog[open] { animation: finestra .28s cubic-bezier(.2,.9,.3,1.15); }
@keyframes finestra { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.pallino.online { animation: batte 2.4s ease-in-out infinite; }
@keyframes batte { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

/* backup del computer */
.sezione-computer { background: linear-gradient(160deg, color-mix(in srgb, #8a4bf0 6%, var(--sup)), var(--sup) 45%, color-mix(in srgb, #0ea5a0 5%, var(--sup))); }
.bc-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bc-numero { border-radius: var(--r-m); padding: 14px; display: grid; gap: 4px; background: color-mix(in srgb, var(--c) 10%, var(--sup)); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--bordo)); }
.bc-numero b { font: 700 24px/1.1 var(--font-titoli); color: var(--c); font-variant-numeric: tabular-nums; }
.bc-numero span { font-size: 14px; color: var(--tenue); }
.bc-numero.verde { --c: var(--ok); } .bc-numero.arancio { --c: var(--avviso); } .bc-numero.blu { --c: var(--accento); }
.bc-numero.viola { --c: #8a4bf0; } .bc-numero.rosa { --c: var(--rosa); }
.bc-stato { display: grid; gap: 10px; margin: 6px 0 14px; }
.cartelle-bc { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.cartelle-bc legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.griglia-cartelle { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cartella-bc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--bordo); border-radius: var(--r-m); cursor: pointer; background: var(--sup); transition: border-color .2s, background .2s, transform .15s; min-width: 0; }
.cartella-bc:hover { transform: translateY(-1px); }
.cartella-bc input { width: 18px; height: 18px; accent-color: var(--accento); flex: none; }
.cartella-bc > span:last-child { display: grid; min-width: 0; }
.cartella-bc .sotto { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartella-bc.scelta { border-color: var(--verdeacqua); background: color-mix(in srgb, var(--verdeacqua) 8%, var(--sup)); }
.bc-tm { margin-top: 16px; padding: 14px; border-radius: var(--r-m); background: var(--sup2); }
.bc-errori summary { cursor: pointer; color: var(--avviso); font-weight: 600; }
.bc-errori li { font-size: 14px; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.griglia-sistema .tessera:nth-child(2) .barra-uso i:not(.alto):not(.critico) { background: linear-gradient(90deg, #b04be0, #e0499b); }
.griglia-sistema .tessera:nth-child(3) .barra-uso i:not(.alto):not(.critico) { background: linear-gradient(90deg, #10a050, #0ea5a0); }
.opzione-modalita .sotto { font-weight: 400; }

/* icona di Plancia (cambia con la licenza) */
.logo-icona { width: 34px; height: 34px; flex: none; display: block; filter: drop-shadow(0 3px 8px rgb(40 60 160 / .25)); }
.logo.grande .logo-icona { width: 56px; height: 56px; }
.logo.solo-mobile .logo-icona { width: 32px; height: 32px; }
.logo-icona.cambia { animation: icona-nuova .6s cubic-bezier(.2,.9,.3,1.4); }
@keyframes icona-nuova { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }

/* ─────────── 2.7 · Strumenti ─────────── */
[data-vai="strumenti"] { --c: #0ea5a0; }
.memoria-eroe { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.memoria-eroe.ok { background: linear-gradient(120deg, var(--ok-tenue), var(--sup) 60%); }
.memoria-eroe.attenzione { background: linear-gradient(120deg, var(--avviso-tenue), var(--sup) 60%); }
.memoria-eroe.problema { background: linear-gradient(120deg, var(--errore-tenue), var(--sup) 60%); }
.mem-anello { position: relative; width: 132px; height: 132px; flex: none; }
.mem-anello svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mem-anello circle { fill: none; stroke-width: 12; }
.mem-anello .traccia { stroke: var(--sup3); }
.mem-anello .valore { stroke: var(--accento); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.3,1); }
.memoria-eroe.attenzione .mem-anello .valore { stroke: var(--avviso); }
.memoria-eroe.problema .mem-anello .valore { stroke: var(--errore); }
.mem-anello b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 28px/1 var(--font-titoli); font-variant-numeric: tabular-nums; }
.mem-testo { flex: 1; min-width: 220px; display: grid; gap: 8px; }
.mem-testo h2 { font-size: 22px; margin: 0; }
.consigli-mem, .app-mem, .motori-ai { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.consigli-mem li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--sup2); font-size: 15px; }
.consigli-mem li > span:nth-child(2) { flex: 1; }
.app-mem li { display: grid; gap: 6px; padding: 10px 2px; border-bottom: 1px solid var(--bordo); }
.app-mem li:last-child { border-bottom: 0; }
.app-mem .testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-mem .peso { font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.app-mem .chip { font-size: 13px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-mem { height: 8px; border-radius: 99px; background: var(--sup3); overflow: hidden; }
.barra-mem i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .9s cubic-bezier(.2,.8,.3,1); background: var(--cm); }
.pallino-col { width: 12px; height: 12px; border-radius: 4px; background: var(--cm); flex: none; }
.c0 { --cm: #4b5ef0; } .c1 { --cm: #8a4bf0; } .c2 { --cm: #e0499b; } .c3 { --cm: #0ea5a0; } .c4 { --cm: #f26b1d; } .c5 { --cm: #10a050; }
.ai-scheda textarea { width: 100%; font: 16px/1.45 var(--font); padding: 12px; border-radius: var(--r-m); border: 1px solid var(--bordo-forte); background: var(--sup); color: var(--testo); resize: vertical; }
.suggerimenti-ai { margin: 6px 0 12px; }
.risposta-ai { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-m); background: linear-gradient(160deg, color-mix(in srgb, #8a4bf0 8%, var(--sup)), var(--sup)); border: 1px solid color-mix(in srgb, #8a4bf0 30%, var(--bordo)); font-size: 15.5px; line-height: 1.55; }
.risposta-ai p { margin: 0 0 8px; } .risposta-ai li { margin: 0 0 6px 18px; }
.risposta-ai.appare { animation: sale .4s ease-out; }
.firma-ai { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #8a4bf0; margin-bottom: 8px; }
.firma-ai .ic { width: 16px; height: 16px; }
.motori-ai li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.motori-ai .sotto { flex-basis: 100%; padding-left: 46px; margin-top: -6px; }
.guida-apple { margin-top: 14px; }
.guida-apple summary { cursor: pointer; font-weight: 600; color: var(--accento); }
.guida-apple li { margin: 6px 0; font-size: 15px; }

.icona-piano { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 6px 14px rgb(40 60 160 / .25)); }
.scelta-icona { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* dischi di rete */
.dischi-rete { margin-top: 18px; }
.griglia-rete { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.disco-rete { border: 1px solid var(--bordo); border-radius: var(--r-m); padding: 14px 16px; display: grid; gap: 10px; background: var(--sup); }
.disco-rete.attenzione { border-color: color-mix(in srgb, var(--avviso) 45%, var(--bordo)); }
.disco-rete.problema { border-color: color-mix(in srgb, var(--errore) 50%, var(--bordo)); }
.disco-rete .testa { display: flex; align-items: center; gap: 10px; }
.disco-rete .nome-box { display: grid; flex: 1; min-width: 0; }
.disco-rete .nome-box .sotto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.uso-rete { display: grid; gap: 6px; }
.riga-uso { display: flex; align-items: baseline; gap: 10px; }
.riga-uso b { font: 700 22px/1 var(--font-titoli); }
.barra-uso.attenzione i { background: var(--avviso) !important; } .barra-uso.problema i { background: var(--errore) !important; }

/* foto profilo */
.avatar { position: relative; overflow: hidden; padding: 0; }
.foto-profilo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar .foto-profilo { position: absolute; inset: 0; }
.cambia-foto { cursor: pointer; }
.cambia-foto .matita { position: absolute; inset: auto 0 0 0; height: 40%; display: grid; place-items: center; background: rgb(0 0 0 / .45); color: #fff; opacity: 0; transition: opacity .2s; }
.cambia-foto:hover .matita { opacity: 1; }
.cambia-foto .matita .ic { width: 16px; height: 16px; }
.profilo-scheda .riga { margin-top: 8px; }
.mini-foto { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }

/* icone delle app */
.icona-app { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex: none; background: var(--sup); }
.icona-app.piccola { width: 30px; height: 30px; border-radius: 7px; background: none; }
.lettera-app { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font: 700 15px/1 var(--font-titoli); color: #fff; background: var(--cm); }

#box-nomi h3 { margin: 16px 0 6px; font-size: 16px; }
.passi-cf { margin: 8px 0 12px; padding-left: 20px; } .passi-cf li { margin: 6px 0; font-size: 15px; }

/* ─────────── 3.0 · Media e AI, catalogo, pulizia, manutenzione, assistente ovunque ─────────── */
.barra-azioni-pagina .spazio { flex: 1; }
.servizio.non-installato { border-style: dashed; background: var(--sup2); }
.servizio.non-installato .icona-tonda { filter: grayscale(.7); opacity: .75; }
.servizio .azioni .btn.icona { margin-left: auto; }
.griglia-catalogo, .griglia-comandi, .griglia-browser { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.voce-catalogo { border: 1px solid var(--bordo); border-radius: var(--r-m); padding: 14px 16px; display: grid; gap: 8px; align-content: start; background: var(--sup);
  transition: border-color .2s, transform .2s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s; }
.voce-catalogo:hover { border-color: color-mix(in srgb, var(--accento) 40%, var(--bordo)); transform: translateY(-2px); box-shadow: var(--ombra); }
.voce-catalogo.installata { background: linear-gradient(160deg, var(--ok-tenue), var(--sup) 55%); }
.voce-catalogo .testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.voce-catalogo .testa .spazio { flex: 1; }
.voce-catalogo .riga { flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.voce-catalogo .peso { font-variant-numeric: tabular-nums; }
.voce-catalogo .tecnico { justify-self: start; font-size: 13px; }
.consigli-brevi { margin: 0; padding-left: 18px; font-size: 14px; color: var(--tenue); display: grid; gap: 4px; }
.elenco-modelli { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.elenco-modelli li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-m); background: var(--sup2); flex-wrap: wrap; }
#cat-manca { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--avviso-tenue); }
#cat-categorie > section { margin-bottom: 16px; }

/* pulizia */
.pulizia-eroe { display: grid; gap: 14px; background: linear-gradient(120deg, var(--ok-tenue), var(--sup) 60%); }
.barra-disco { height: 12px; border-radius: 99px; background: var(--sup3); overflow: hidden; }
.barra-disco i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ok), var(--accento)); transition: width 1s cubic-bezier(.2,.8,.3,1); }
.barra-disco i.alto { background: linear-gradient(90deg, var(--avviso), #f26b1d); } .barra-disco i.critico { background: var(--errore); }
.voci-pulizia { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; }
.voci-pulizia li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-m); background: var(--sup2); }
.voci-pulizia li label { display: flex; gap: 12px; align-items: flex-start; flex: 1; cursor: pointer; }
.voci-pulizia li input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accento); }
.voci-pulizia li .chip { margin-left: 8px; }
.voci-pulizia li .peso { font-variant-numeric: tabular-nums; white-space: nowrap; }
.voci-pulizia li.bloccata { opacity: .7; }
.intestazione b#pul-totale { color: var(--ok); font: 700 20px/1 var(--font-titoli); }

/* manutenzione */
.uscita-comando { margin: 10px 0 0; max-height: 420px; min-height: 120px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 13.5px/1.5 var(--mono);
  background: #0d1117; color: #d7dde6; padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--bordo); }
#man-consiglio { margin-top: 10px; background: var(--avviso-tenue); padding: 10px 14px; border-radius: var(--r-s); }
.aiuto.avviso { background: var(--avviso-tenue); padding: 8px 12px; border-radius: var(--r-s); }
.scelta-tipo { flex-wrap: wrap; gap: 14px; }

/* assistente in ogni pagina */
.pannello-lavori { bottom: 92px; }
.ai-ovunque { position: fixed; right: 20px; bottom: 20px; z-index: 70; }
.ai-bolla { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--grad, linear-gradient(135deg, #4b5ef0, #8a4bf0));
  box-shadow: 0 10px 30px color-mix(in srgb, #8a4bf0 45%, transparent); transition: transform .25s cubic-bezier(.2,.9,.3,1.4); }
.ai-bolla:hover { transform: scale(1.08) rotate(-8deg); }
.ai-bolla.aperta { transform: scale(.92); }
.ai-bolla .ic { width: 26px; height: 26px; }
.ai-pannello { position: absolute; right: 0; bottom: 70px; width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 140px)); display: flex; flex-direction: column;
  background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-l); overflow: hidden; animation: sale .25s ease-out; }
.ai-pannello header { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--bordo); }
.ai-pannello header > div { display: grid; line-height: 1.2; }
.ai-pannello header .spazio { flex: 1; }
.icona-tonda.piccola { width: 32px; height: 32px; border-radius: 9px; }
.ai-messaggi { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.ai-msg p { margin: 0 0 6px; } .ai-msg p:last-child { margin: 0; } .ai-msg li { margin: 0 0 4px 16px; }
.ai-msg.utente { align-self: flex-end; background: var(--accento); color: var(--accento-t); border-bottom-right-radius: 4px; }
.ai-msg.assistente { align-self: flex-start; background: var(--sup2); border-bottom-left-radius: 4px; }
.ai-msg.pensa { color: var(--tenue); animation: pulsa 1.4s ease-in-out infinite; }
.ai-msg.errore-ai { background: var(--errore-tenue); }
.ai-msg .btn { margin-top: 8px; }
.ai-scrivi { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--bordo); }
.ai-scrivi textarea { flex: 1; resize: none; font: 15px/1.4 var(--font); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bordo-forte); background: var(--sup); color: var(--testo); max-height: 140px; }
@keyframes pulsa { 50% { opacity: .5; } }
@media (max-width: 860px) {
  .ai-ovunque { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .pannello-lavori { bottom: calc(156px + env(safe-area-inset-bottom)); }
  .ai-pannello { height: min(520px, calc(100dvh - 200px)); }
}
@media (prefers-reduced-motion: reduce) { .ai-bolla, .voce-catalogo, .ai-pannello { transition: none; animation: none; } }

/* 3.0.1 · stato del Comando Rapido */
.stato-apple { margin: 12px 0 4px; }
.riga-apple { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--sup2); }
.riga-apple.ok { background: var(--ok-tenue); } .riga-apple.no { background: var(--avviso-tenue); }
.guida-apple ul { margin: 6px 0; padding-left: 20px; }
#modulo-scorciatoia { margin: 8px 0; flex-wrap: wrap; }
#modulo-scorciatoia select { max-width: 320px; }

/* ─────────── 3.1 · campanella, comunicazioni, Team, azioni dell'assistente ─────────── */
.campanella { position: relative; }
.campanella .btn .conta { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--errore); color: #fff; font: 700 11px/18px var(--font); font-style: normal; text-align: center; }
.pannello-avvisi { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: min(380px, calc(100vw - 32px)); max-height: min(520px, 70dvh);
  display: flex; flex-direction: column; background: var(--sup); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-l); animation: sale .2s ease-out; }
.pannello-avvisi header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bordo); }
.pannello-avvisi header .spazio { flex: 1; }
.pannello-avvisi ul { list-style: none; margin: 0; padding: 6px; overflow: auto; }
.pannello-avvisi li { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--r-s); cursor: default; }
.pannello-avvisi li[class*="livello"]:hover { background: var(--sup2); }
.pannello-avvisi li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pannello-avvisi li p { font-size: 14px; color: var(--tenue); }
.pannello-avvisi li.nuovo b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accento); margin-right: 6px; vertical-align: middle; }
.pannello-avvisi li.vuoto { color: var(--tenue); justify-content: center; }
.banner-comunicazioni { display: grid; gap: 10px; margin: 0 36px 14px; }
.banner-comunicazioni:empty { display: none; }
.banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--bordo); background: var(--info-tenue); animation: sale .3s ease-out; }
.banner > .ic { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--info); }
.banner > div { flex: 1; min-width: 0; }
.banner p { font-size: 14.5px; margin-top: 2px; }
.banner .conto { font-variant-numeric: tabular-nums; }
.banner.livello-attenzione { background: var(--avviso-tenue); border-color: color-mix(in srgb, var(--avviso) 40%, var(--bordo)); }
.banner.livello-attenzione > .ic { color: var(--avviso); }
.banner.livello-urgente { background: var(--errore-tenue); border-color: color-mix(in srgb, var(--errore) 45%, var(--bordo)); }
.banner.livello-urgente > .ic { color: var(--errore); animation: pulsa 1.4s ease-in-out infinite; }
.banner.tipo-aggiornamento { background: var(--accento-tenue); border-color: color-mix(in srgb, var(--accento) 35%, var(--bordo)); }
.banner.tipo-aggiornamento > .ic { color: var(--accento); }

.azione-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.azione-ai .errore-ai { color: var(--errore); }

/* Team */
[data-vai="team"] { --c: #8a4bf0; }
.team-griglia { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.team-lato { padding: 14px; align-self: start; }
.team-lato h3 { margin: 4px 6px 8px; }
.team-lato h3 + ul + h3 { margin-top: 16px; }
.team-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.team-elenco li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); cursor: pointer; flex-wrap: wrap; }
.team-elenco li:hover { background: var(--sup2); }
.team-elenco li.attivo { background: var(--accento-tenue); color: var(--accento); font-weight: 600; }
.team-elenco li .nome { flex: 1; min-width: 0; }
.team-elenco li .ruolo { flex-basis: 100%; padding-left: 40px; margin-top: -6px; font-size: 12.5px; }
.team-elenco li .conta { font-style: normal; background: var(--accento); color: var(--accento-t); border-radius: 99px; padding: 0 7px; font-size: 12px; font-weight: 700; }
.team-elenco li.vuoto { cursor: default; color: var(--tenue); font-size: 14px; }
.cancelletto { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--sup3); font-weight: 700; }
.avatar-stato { position: relative; display: inline-flex; }
.avatar-stato::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--spento); border: 2px solid var(--sup); }
.avatar-stato.online::after { background: var(--ok); }
.team-chat { display: flex; flex-direction: column; height: min(640px, calc(100dvh - 220px)); min-height: 380px; padding: 0; overflow: hidden; }
.team-chat > header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--bordo); }
.team-chat > header > div { display: grid; line-height: 1.25; }
.team-messaggi { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.team-messaggi .vuoto { margin: auto; color: var(--tenue); }
.msg-team { max-width: min(75%, 560px); align-self: flex-start; background: var(--sup2); padding: 8px 12px 6px; border-radius: 14px; border-bottom-left-radius: 4px; display: grid; gap: 2px; animation: sale .2s ease-out; }
.msg-team.mio { align-self: flex-end; background: var(--accento); color: var(--accento-t); border-radius: 14px; border-bottom-right-radius: 4px; }
.msg-team .autore { font-size: 13px; color: var(--accento); }
.msg-team p { white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.msg-team .ora { font-size: 11.5px; opacity: .7; justify-self: end; }
#lista-comunicazioni { margin-top: 12px; }
#modulo-comunicazione textarea { width: 100%; font: 15px/1.45 var(--font); padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--bordo-forte); background: var(--sup); color: var(--testo); resize: vertical; }
@media (max-width: 820px) {
  .team-griglia { grid-template-columns: 1fr; }
  .team-lato { order: 2; }
  .team-chat { height: min(560px, calc(100dvh - 240px)); }
}
@media (max-width: 1000px) { .banner-comunicazioni { margin: 0 24px 12px; } }
@media (max-width: 820px) { .banner-comunicazioni { margin: 12px 16px 0; } }
.team-elenco li .ruolo { padding-left: 40px; }
@media (max-width: 860px) { .ai-ovunque.su-team { bottom: calc(170px + env(safe-area-inset-bottom)); } }

/* ─────────── 3.2 · la bolla dell'assistente: anello arcobaleno e fumo colorato ─────────── */
.ai-ovunque { isolation: isolate; }
.ai-bolla { position: relative; overflow: visible; background: #1b1440; z-index: 2;
  box-shadow: 0 10px 30px rgb(80 40 200 / .35), inset 0 0 0 2px rgb(255 255 255 / .12); }
.ai-bolla .ai-anello { position: absolute; inset: -3px; border-radius: 50%; z-index: -1; overflow: hidden; }
.ai-bolla .ai-anello::before { content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, #ff3d7f, #ff9a3d, #ffe53d, #3dff8b, #3dd5ff, #6a5bff, #d23dff, #ff3d7f);
  animation: ai-giro 3.2s linear infinite; }
.ai-bolla .ai-anello::after { content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #5b4bff, #2a1a6e 55%, #140c35); }
.ai-bolla > .ic { position: relative; z-index: 1; filter: drop-shadow(0 0 6px rgb(255 255 255 / .7)); animation: ai-scintilla 2.6s ease-in-out infinite; }
.ai-bolla:hover { transform: scale(1.1) rotate(-6deg); }
.ai-bolla.aperta { transform: scale(.94); }
.ai-bolla.squilla { animation: ai-squilla .8s cubic-bezier(.3,1.6,.4,1); }
.ai-bolla.parla::after, .ai-bolla.parla::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(160 120 255 / .7);
  animation: ai-onda 1.4s ease-out infinite; z-index: -2; }
.ai-bolla.parla::before { animation-delay: .7s; }
.badge-ai { position: absolute; top: -5px; right: -5px; z-index: 3; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #ff2d55;
  color: #fff; font: 700 11.5px/20px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--sfondo), 0 3px 10px rgb(255 45 85 / .5);
  animation: ai-badge .5s cubic-bezier(.3,1.8,.4,1); }
/* fumo: macchie di colore sfocate che salgono e si allargano dietro la bolla */
.ai-fumo { position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; z-index: 1; pointer-events: none; }
.ai-fumo i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; filter: blur(14px); opacity: 0;
  mix-blend-mode: normal; animation: ai-fumo 5.5s ease-out infinite; }
.ai-fumo i:nth-child(1) { background: #ff3d7f; animation-delay: 0s; --dx: -26px; }
.ai-fumo i:nth-child(2) { background: #ffb13d; animation-delay: 1.1s; --dx: 18px; }
.ai-fumo i:nth-child(3) { background: #3dff9e; animation-delay: 2.2s; --dx: -10px; }
.ai-fumo i:nth-child(4) { background: #3dc8ff; animation-delay: 3.3s; --dx: 24px; }
.ai-fumo i:nth-child(5) { background: #a53dff; animation-delay: 4.4s; --dx: -20px; }
.ai-ovunque:hover .ai-fumo i { animation-duration: 3.2s; }
@keyframes ai-giro { to { transform: rotate(360deg); } }
@keyframes ai-scintilla { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(12deg); } }
@keyframes ai-fumo {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: .75; }
  100% { opacity: 0; transform: translate(var(--dx), -70px) scale(2.1); }
}
@keyframes ai-squilla { 0% { transform: scale(1); } 30% { transform: scale(1.22) rotate(-10deg); } 60% { transform: scale(.95) rotate(6deg); } 100% { transform: scale(1); } }
@keyframes ai-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes ai-badge { from { transform: scale(0); } }
#btn-ai-voce.attivo { color: #8a4bf0; background: color-mix(in srgb, #8a4bf0 14%, transparent); }
#btn-ai-detta.ascolta { color: #ff2d55; animation: pulsa 1s ease-in-out infinite; }
.esito-ai { margin-top: 8px; font-weight: 600; } .esito-ai.ok { color: var(--ok); } .esito-ai.no { color: var(--errore); }
@media (prefers-reduced-motion: reduce) {
  .ai-bolla .ai-anello::before, .ai-bolla > .ic, .ai-fumo i, .ai-bolla.squilla, .ai-bolla.parla::after, .ai-bolla.parla::before { animation: none; }
  .ai-fumo { display: none; }
}

/* 3.2 · chat cifrata */
.e2e-blocco { padding: 18px; border-top: 1px solid var(--bordo); background: linear-gradient(160deg, color-mix(in srgb, #8a4bf0 7%, var(--sup)), var(--sup)); }
.e2e-blocco form { max-width: 460px; display: grid; gap: 10px; }
.e2e-blocco p { font-size: 14.5px; }
#team-e2e { font-size: 12.5px; white-space: nowrap; } #team-e2e:empty { display: none; }
.team-chat > header .spazio { flex: 1; }
.msg-team .ora { display: inline-flex; align-items: center; gap: 4px; }
.msg-team .ora .ic { width: 11px; height: 11px; }
.msg-team.illeggibile p { font-style: italic; opacity: .75; }
.msg-team .chiaro { opacity: .8; }
.codice-abbinamento { margin-top: 14px; padding: 16px; border-radius: var(--r-m); background: var(--accento-tenue); display: grid; gap: 6px; justify-items: start; }
.codice-grande { font: 700 34px/1.1 var(--mono); letter-spacing: .12em; color: var(--accento); }

/* 3.2 · cartelle condivise e scambio file */
[data-vai="file"] { --c: #0ea5a0; }
.cartella-voce .percorso-vero { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.cartella-voce .percorso-vero .ic { width: 12px; height: 12px; flex: none; }
.con-prefisso { display: flex; align-items: stretch; }
.con-prefisso > span { display: grid; place-items: center; padding: 0 10px; background: var(--sup2); border: 1px solid var(--bordo-forte); border-right: 0; border-radius: var(--r-s) 0 0 var(--r-s); font-family: var(--mono); font-size: 13.5px; color: var(--tenue); }
.con-prefisso input { border-radius: 0 var(--r-s) var(--r-s) 0 !important; flex: 1; min-width: 0; }
.chi-entra { border: 1px solid var(--bordo); border-radius: var(--r-s); padding: 10px 14px; display: grid; gap: 6px; }
.chi-entra legend { font-weight: 600; padding: 0 6px; }
.scelta-utenti { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-left: 4px; }
.sfoglia-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sfoglia-testa .spazio { flex: 1; }
#btn-torna-cartelle .ic { transform: rotate(180deg); }
.briciole { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.briciole .sep { color: var(--debole); }
.zona-rilascio { border: 2px dashed transparent; border-radius: var(--r-m); transition: border-color .2s, background .2s; }
.zona-rilascio.sopra { border-color: var(--accento); background: var(--accento-tenue); }
.zona-rilascio.grande { border-color: var(--bordo-forte); padding: 28px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.elenco-file { list-style: none; margin: 0; padding: 0; display: grid; }
.elenco-file li { display: grid; grid-template-columns: auto minmax(0, 1fr) 90px 130px auto; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--bordo); }
.elenco-file li:last-child { border-bottom: 0; }
.elenco-file li .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--testo); }
.elenco-file li.e-cartella .nome { color: var(--accento); }
.elenco-file li.vuoto { display: block; color: var(--tenue); text-align: center; padding: 24px; }
@media (max-width: 640px) { .elenco-file li { grid-template-columns: auto minmax(0, 1fr) auto; } .elenco-file li .data, .elenco-file li > .sotto:not(.data) { display: none; } }
#scambio-miei li, #scambio-ricevuti li, #scambio-principale li { display: grid; gap: 6px; }
#scambio-miei .testa, #scambio-ricevuti .testa, #scambio-principale .testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#scambio-miei .testa .spazio, #scambio-ricevuti .testa .spazio, #scambio-principale .testa .spazio { flex: 1; }
#scambio-miei details .modulo { margin-top: 8px; padding: 12px; border-radius: var(--r-s); background: var(--sup2); }

/* 3.3 · richiesta di licenza */
.esito-richiesta { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: var(--r-m); background: var(--accento-tenue); animation: sale .3s ease-out; }
.esito-richiesta textarea { width: 100%; font: 13px/1.45 var(--mono); padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--bordo-forte); background: var(--sup); color: var(--testo); resize: vertical; word-break: break-all; }
.esito-richiesta .riga { flex-wrap: wrap; gap: 8px; }