/* ═══════════════════════════════════════════════════════════════════════════
   odss-api.com — sistema grafico «BRACE» (site.css)
   Condiviso da landing, accesso, area utente e pagine satellite; la console
   admin (artifacts/api-server/src/routes/admin-api-customers.ts) ne COPIA i
   token del §1: se cambiano, vanno ricopiati là. Guida con il markup esatto di
   ogni componente: docs/odss-api-design-system.md — le sezioni 1–28 qui sotto
   hanno gli stessi numeri; 29–31 raccolgono i pezzi comuni alle pagine
   satellite (prima ripetuti identici nello <style> di ogni pagina).

   Principi
   - Fondo quasi nero caldo, testo avorio in tre gradi, filetti al posto delle
     ombre (nessuna box-shadow, nessun glow).
   - Il colore dice solo un GIUDIZIO (good / warn / err). L'AZIONE primaria ha
     un colore suo, il brace: uno per vista, mai su badge, pill o decorazioni.
   - Paragrafi lunghi in --text-2 (≥ 8,6:1 su ogni superficie); --text-3 solo
     per metadati brevi (≥ 5,2:1); --text-4 mai per testo.
   - Hanken Grotesk per tutto; Geist Mono per codice, cifre tabulari, header.
   - Vincoli: CSP senza origini terze (immagini solo 'self' e data:), niente
     classi che contengano la parola riservata dal generatore .md (vedi guida),
     input a 16 px su touch, aree di tocco ≥ 44 px, reduced-motion rispettato,
     backdrop-filter sempre anche col prefisso -webkit-.

   Indice
    1 Token            8 Badge, chip, stato     15 Dialog              22 Menu ⋯, kbd
    2 Base e reset     9 Card, pannelli, metriche 16 Tabs, accordion   23 Area utente (sidebar)
    3 Tipografia      10 Tabelle                17 Pannello codice     24 Footer
    4 Link e focus    11 Moduli                 18 Albero JSON         25 Cookie, assistenza
    5 Layout          12 Selettori              19 Skeleton, empty     26 Tour (Driver.js)
    6 Header, tube    13 Alert, banner          20 Meter, scala        27 Utilità
    7 Bottoni         14 Toast                  21 Tooltip, popover    28 Media: motion, contrasto, stampa
                                                                   29 Satelliti: testata, sezioni, elenchi
                                                                   30 Satelliti: menu del telefono, briciole
                                                                   31 Documenti lunghi (Termini, Privacy)
                                                                   32 Piani: configuratore, dichiarazione, licenza
                                                                   33 Movimento e dati live
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKEN ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;

  /* Superfici, dalla più profonda alla più alta (a gradini caldi) */
  --bg:#0b0a09;          /* fondo pagina */
  --bg-1:#11100d;        /* fasce alternate, colonne laterali, riquadri incassati */
  --surface:#1b1714;     /* card, pannello codice, dialog */
  --surface-2:#241f1a;   /* menu, riga evidenziata, voce di nav attiva */
  --surface-3:#2e2822;   /* segmento/scheda selezionati, tracce delle barre */
  --surface-4:#3a322a;   /* hover su surface-3 */

  /* Linee */
  --line:#372f28;        /* filetti e divisori (decorativi) */
  --line-2:#473e35;      /* bordi di card in evidenza, gruppi */
  --line-3:#5f5448;      /* bordo dei bottoni secondari (hanno un'etichetta) */
  --ctl:#85796b;         /* bordo dei CONTROLLI: ≥ 3,4:1 su ogni superficie (WCAG 1.4.11) */

  /* Testo (rapporti di contrasto su --bg → su --surface-3) */
  --text:#f4ede2;        /* principale, titoli, dati: 16:1 → 13,4:1 */
  --text-2:#d6ccbe;      /* PARAGRAFI e testo secondario: 10,3:1 → 8,6:1 */
  --text-3:#ada292;      /* metadati brevi, assi, segnaposto: 6,2:1 → 5,2:1 */
  --text-4:#6a6157;      /* SOLO decorativo (trattini, barre del periodo precedente) */
  --sand:#d3bf9e;        /* stringhe nel codice */

  /* Link del testo (--acc): sabbia chiara, 12,8:1; si distingue dal testo per
     la sottolineatura, non per il colore (WCAG 1.4.1). NON è il brace. */
  --acc:#f0906a;
  --acc-line:rgba(240,144,106,.5);

  /* Azione primaria (una per vista) */
  --brace:#a8462c;       /* pieno; testo --on-brace 5,4:1 */
  --brace-hover:#963d26; /* hover: più scuro, 6,5:1 */
  --brace-press:#853522; /* premuto: 7,7:1 */
  --on-brace:#fbf5ec;
  --mark:#c4603c;        /* solo l'arco del marchio: non è un colore d'interfaccia */
  /* Brace come ACCENTO (25 set 2026, richiesta del titolare: più contrasto e più
     arancio): voce attiva, schede, etichette di sezione, link, controlli scelti,
     focus. Il brace pieno resta per l'azione primaria. */
  --brace-2:#ee7d55;     /* testo, icone e linee su scuro: 7,3:1 su --bg, 5,6:1 su --surface-3 */
  --brace-soft:rgba(238,125,85,.12);  /* fondo della voce attiva */
  --brace-line:rgba(238,125,85,.55);  /* bordo della voce/scelta attiva */

  /* Giudizi: solo come testo, icona, pallino, bordo; mai pillola piena */
  --good:#5fbf87;        /* 8,8:1 */
  --warn:#dba446;        /* 7,0:1 */
  --err:#e8676a;         /* 6,2:1 (5,2:1 sul suo tint) */
  --good-bg:rgba(95,191,135,.10);  --good-line:rgba(95,191,135,.38);
  --warn-bg:rgba(219,164,70,.12);  --warn-line:rgba(219,164,70,.45);
  --err-bg:rgba(232,103,106,.10);  --err-line:rgba(232,103,106,.48);

  /* Focus: sempre un contorno avorio, mai un'ombra */
  --focus:#ee7d55;
  --focus-w:2px;
  --focus-o:2px;

  /* Raggi */
  --r-lg:16px;           /* card, pannelli, dialog */
  --r-md:10px;           /* controlli, riquadri interni, menu */
  --r-sm:7px;            /* chip, kbd, codice inline */
  --r-pill:99px;         /* bottoni, segmenti, badge */

  /* Spaziature (scala da 4 px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px; --sp-12:112px;
  --sec-y:clamp(72px, 3.5rem + 3.4vw, 112px);   /* padding verticale tra sezioni */
  --gutter:clamp(16px, 2.6vw, 32px);            /* margine laterale del contenuto */

  /* Layout */
  --w:1264px;            /* larghezza massima del contenuto */
  --w-read:720px;        /* testo lungo (legali, satelliti) */
  --measure:64ch;        /* misura di lettura: in Hanken 1ch = 0,56em e il carattere medio 0,44em,
                            quindi 64ch ≈ 80 caratteri veri a ogni corpo (≈575 px a 16 px) */
  --nav-h:64px;          /* header */
  --tube-h:64px;         /* barra in basso su telefono (52 + 12 di padding) */
  --sbw:252px;           /* sidebar dell'area utente */
  --app-w:1188px;        /* contenuto dell'area utente: centrato nello spazio accanto alla sidebar */

  /* Tipografia */
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --fs-display:clamp(2.25rem, 1.35rem + 2.9vw, 3.5rem);   /* 36 → 56  H1 dell'hero (home e pagine prodotto) */
  --fs-1:clamp(1.875rem, 1.3rem + 1.6vw, 2.625rem);       /* 30 → 42  titolo di pagina (status, sla, dati, legali) */
  --fs-section:clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem);  /* 28 → 38  titolo di sezione (<h2 class="h1">) */
  --fs-2:clamp(1.5rem, 1.25rem + .7vw, 1.875rem);         /* 24 → 30  titolo di pagina dell'area utente */
  --fs-3:clamp(1.1875rem, 1.1rem + .25vw, 1.3125rem);     /* 19 → 21  titolo di card / passo */
  --fs-4:1.0625rem;                                        /* 17       titolo piccolo */
  --fs-lead:clamp(1.0625rem, 1rem + .25vw, 1.125rem);     /* 17 → 18  sottotitolo */
  --fs-body:1rem;        /* 16 */
  --fs-sm:.875rem;       /* 14   testo di interfaccia */
  --fs-xs:.78125rem;     /* 12,5 metadati (minimo per testo leggibile) */
  --fs-mono:.8125rem;    /* 13   codice */
  --fs-mono-sm:.75rem;   /* 12   codice denso, assi */
  --lh-tight:1.05; --lh-head:1.15; --lh-ui:1.4; --lh-body:1.6;
  --tr-display:-.036em; --tr-head:-.026em; --tr-ui:-.005em;

  /* Movimento */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,.7,.2,1);         /* uscita morbida, zero rimbalzo: default anche del movimento live */
  --ease-io:cubic-bezier(.65,0,.35,1);     /* tracciati disegnati una volta, rotazione del refresh */
  /* «Movimento e dati live» (§33, guida §13): nessun colore nuovo, solo alias */
  --dur-4:480ms;        /* cifre che rotolano, ingresso delle sezioni */
  --dur-tick:600ms;     /* lampo di un valore cambiato, poi torna com'era */
  --dur-correct:420ms;  /* punta del battito e punto del campo che si correggono alla lettura */
  --dur-ghost:900ms;    /* la vecchia previsione del battito che sfuma */
  --dur-draw:700ms;     /* grafico tracciato UNA volta al primo ingresso (con --ease-io) */
  --dur-step:1000ms;    /* passo del tempo: il battito scorre di 1 s, lineare */
  --dur-pulse:1300ms;   /* impulso singolo all'arrivo del dato (solo pallini «event») */
  --dur-breath:2600ms;  /* respiro: 52% movimento, 48% fermo */
  --dur-glyph:3000ms;   /* permanenza di ▲▼ dopo un cambio */
  --ease-step:linear;   /* SOLO per lo scorrere del tempo */
  --breath-scale:2.6; --breath-alpha:.6;   /* anello border 1 px: mai blur, box-shadow o filter */
  --reveal-y:8px; --stagger:40ms;
  --line-live:rgba(237,230,218,.72);       /* linea dei grafici live (avorio, mai brace) */
  --area-live:rgba(237,230,218,.05);       /* area sotto la linea */
  --spark:rgba(237,230,218,.55);           /* sparkline, tratto 1,25 px */
  --flash:rgba(237,230,218,.13);           /* lampo NEUTRO di una quota d'esempio: mai verde o rosso */
  /* soglie e cadenze: numeri puri letti da live.js */
  --age-warn:180; --age-err:600;           /* età dello snapshot: «In ritardo», «Fermo» (s) */
  --book-warn:300; --book-err:480;         /* età di un book nel campo (s) */
  --cad-clock:1000; --cad-status:30000; --cad-pulse:15000; --cad-sample:5000;
  --cad-account:60000; --cad-announce:60000;

  /* Livelli */
  --z-nav:50; --z-tube:60; --z-fixed:70; --z-pop:80; --z-grain:95; --z-toast:110;

  /* Codice «senza arcobaleno» (highlight.js e JSON) */
  --code-fg:var(--text);
  --code-key:var(--text-2);   /* chiavi JSON: un gradino sotto i valori, che restano avorio */
  --code-kw:#e0b39c;     /* parole chiave: avorio appena rosato, 9,9:1 */
  --code-str:var(--sand);
  --code-num:var(--text);
  --code-fn:#f3ede3;
  --code-com:var(--text-3);
  --code-punc:var(--text-3);

  /* Alias dei mockup (brace-*.html): stessi valori dei token semantici */
  --ivory:var(--text); --ivory-2:var(--text-2); --ivory-3:var(--text-3); --ivory-4:var(--text-4);
  --rust:var(--err);
}

/* ─── 2. BASE E RESET ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scrollbar-color:var(--line-3) var(--bg);-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:72px}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font:400 var(--fs-body)/var(--lh-body) var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
/* Grana 3,5% (SVG in data:, ammesso da img-src). Spenta con <html class="no-grain">,
   in stampa e con prefers-contrast:more. */
body::before{content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html.no-grain body::before{display:none}
[hidden]{display:none !important}
img,video,canvas{max-width:100%;height:auto}
svg{flex-shrink:0}
p,figure,blockquote,dl,dd{margin:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed}
table{border-collapse:collapse;border-spacing:0}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
::selection{background:rgba(168,70,44,.55);color:var(--on-brace)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:10px;border:2px solid var(--bg)}

/* ─── 3. TIPOGRAFIA ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;color:var(--text);text-wrap:balance}
h1{font-size:var(--fs-1);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
h2{font-size:var(--fs-2);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
h3{font-size:var(--fs-3);line-height:1.25;letter-spacing:-.018em}
h4{font-size:var(--fs-4);line-height:1.3;letter-spacing:-.01em}
/* Classi di dimensione, per separare la semantica dalla taglia (es. <h2 class="h1">) */
.display{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--tr-display);font-weight:600;text-wrap:balance}
/* Finestre basse da portatile (≥1101 × ≤860): l'H1 da vetrina scende a 48 px ovunque,
   come l'hero della home, così home e pagine prodotto hanno la stessa misura. */
@media (min-width:1101px) and (max-height:860px){:root{--fs-display:3rem}}
.h1{font-size:var(--fs-section);line-height:1.08;letter-spacing:-.032em}
.h2{font-size:var(--fs-2);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
.h3{font-size:var(--fs-3);line-height:1.25;letter-spacing:-.018em}
.h4{font-size:var(--fs-4);line-height:1.3;letter-spacing:-.01em}
.display,.h1,.h2,.h3,.h4{font-weight:600;color:var(--text);text-wrap:balance}
.lead,.lede{font-size:var(--fs-lead);line-height:1.6;color:var(--text-2);max-width:640px;text-wrap:pretty}
.small,small{font-size:var(--fs-sm)}
small{color:var(--text-3)}
.meta{font-size:var(--fs-xs);line-height:1.5;color:var(--text-3)}
b,strong{font-weight:600;color:var(--text)}
em,i{font-style:italic}
/* Seconda voce di un titolo in due toni (es. «… <span class="g">in un'unica API</span>»):
   avorio attenuato ma leggibile (--text-2, non --text-3). Stessa classe dei dizionari. */
.g{color:var(--brace-2)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:500;color:var(--brace-2);letter-spacing:.005em}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--brace-2)}
/* Mono: codice, cifre, endpoint, header. MAI nei titoli. */
.mono{font-family:var(--mono);font-size:.9em;font-variant-numeric:tabular-nums;font-variant-ligatures:none;overflow-wrap:anywhere}
.num,.tnum{font-variant-numeric:tabular-nums}
code,kbd,samp,pre{font-family:var(--mono);font-variant-ligatures:none}
:not(pre)>code{font-size:.86em;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.08em .38em;overflow-wrap:anywhere}
/* Identificatore nel testo corrente (endpoint, campo, header, valore): lo stesso
   riquadrino di <code>, qualunque sia il markup. Specificità bassa (:where), così
   le regole di contesto (.tbl td .mono, .status-pill .mono…) vincono ancora. Non
   tocca titoli, prime colonne delle tabelle (nomi dei campi) né l'indice. */
:where(.doc p,.doc li,.doc td+td,.vs td,.acc-b p,.prose p,.prose li,.sat-body p,.sat-body li,p.lede) .mono{font-size:.86em;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.08em .38em}
/* Testo lungo (pagine legali, satelliti, FAQ): margini fra blocchi */
.prose{max-width:var(--w-read);color:var(--text-2);font-size:var(--fs-body);line-height:1.7}
.prose>*+*{margin-top:1em}
.prose h2{margin-top:2.2em;color:var(--text);font-size:var(--fs-2)}
.prose h3{margin-top:1.8em;color:var(--text);font-size:var(--fs-3)}
.prose h4{margin-top:1.5em;color:var(--text)}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--text-3)}
.prose table{width:100%;font-size:var(--fs-sm)}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--text-3);font-weight:500}
.prose blockquote{padding-left:16px;border-left:2px solid var(--line-3);color:var(--text-2)}

/* ─── 4. LINK E FOCUS ───────────────────────────────────────────────────────── */
a{color:var(--acc);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--acc-line);transition:color var(--dur-1),text-decoration-color var(--dur-1)}
a:hover{color:var(--text);text-decoration-color:currentColor}
/* Link di interfaccia con freccia (senza sottolineatura: la freccia è il segnale) */
.alink{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:500;font-size:var(--fs-sm);text-decoration:none;white-space:nowrap}
.alink .ic{width:16px;height:16px;transition:transform var(--dur-1) var(--ease)}
.alink:hover{color:var(--text)}
.alink:hover .ic{transform:translateX(2px)}
/* Link «tranquillo» nel testo di interfaccia (es. «Dettagli», «Confronta i piani») */
.link{color:var(--text);text-decoration:underline;text-decoration-color:var(--ctl);text-underline-offset:3px}
.link:hover{text-decoration-color:var(--text)}
/* Focus: contorno avorio 2 px su tutto ciò che si raggiunge da tastiera */
:where(a,button,input,select,textarea,summary,[tabindex],[contenteditable]):focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
:where(a,button,summary,[tabindex]):focus:not(:focus-visible){outline:none}
.skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:var(--r-md);font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:var(--bg)}
/* Solo per lettori di schermo */
.sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ─── 5. LAYOUT ─────────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--w) + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right))}
.wrap-read{max-width:calc(var(--w-read) + 2 * var(--gutter))}
.wrap-mid{max-width:calc(960px + 2 * var(--gutter))}
section{scroll-margin-top:80px}
.sec{padding-block:var(--sec-y)}
.sec-tight{padding-block:calc(var(--sec-y) * .6)}
.band{background:var(--bg-1);border-block:1px solid var(--line)}
.sec-head{max-width:760px}
.sec-head>h2,.sec-head>.h1{margin-top:16px}
.sec-head>.lede,.sec-head>.lead{margin-top:18px}
.sec-head.split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--sp-8)}
.sec-body{margin-top:var(--sp-9)}
/* Griglie: le colonne si riducono da sole sotto le soglie */
.grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span-2{grid-column:span 2}
.span-all{grid-column:1 / -1}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.stack-sm{display:flex;flex-direction:column;gap:var(--sp-2)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.split{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.divider{height:1px;background:var(--line);border:0;margin:0}
/* Alone neutro (profondità, NON un glow: niente colore d'azione) — fermo con reduced-motion */
.halo{position:absolute;inset:-120px 0 auto 0;height:900px;z-index:-1;pointer-events:none;overflow:hidden}
.halo::before{content:"";position:absolute;width:880px;height:620px;right:-160px;top:20px;border-radius:50%;background:radial-gradient(closest-side,rgba(237,230,218,.05),rgba(237,230,218,.015) 55%,transparent);animation:drift 44s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-80px,40px,0)}}

/* ─── 6. HEADER, NAV E «TUBE» (barra in basso su telefono) ─────────────────── */
/* Brand: marchio inline (guida, «Marchio») + parola «odss-api» */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.025em;line-height:1;white-space:nowrap}
.brand:hover{color:var(--text)}
.brand-mark{width:24px;height:24px;display:block;fill:none;stroke-width:3.6}
.brand-mark .r{stroke:var(--text)}
.brand-mark .m{stroke:var(--mark)}
.brand-dim{color:var(--text-3);font-weight:500}
.site-nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(11,10,9,.9);border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;gap:var(--sp-7)}
.nav-links{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-links a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--text-2);text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.nav-links a[aria-current]{color:var(--brace-2);background:var(--brace-soft)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.nav-login{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:var(--r-pill);color:var(--text);font-size:15px;font-weight:500;text-decoration:none}
.nav-login:hover{background:var(--surface);color:var(--text)}
/* Stato del feed nella nav: pallino + parola + dato misurato (mai solo il pallino) */
.status-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:13.5px;color:var(--text-2);text-decoration:none;white-space:nowrap}
.status-pill:hover{border-color:var(--line-3);color:var(--text)}
.status-pill b{color:var(--text);font-weight:600}
.status-pill .mono{font-size:12px;color:var(--text-3)}
/* Selettore lingua: <select> nativo (16 px su touch: niente zoom iOS) */
.lang{position:relative;display:inline-flex;align-items:center}
.lang select{-webkit-appearance:none;appearance:none;height:36px;padding:0 30px 0 12px;border:1px solid var(--line-3);border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:500 13px/1 var(--sans);cursor:pointer}
.lang select:hover{border-color:var(--ctl);color:var(--text)}
.lang .ic{position:absolute;right:10px;width:14px;height:14px;pointer-events:none;color:var(--text-3)}
.lang option{background:var(--surface-2);color:var(--text)}
/* Tube: navigazione primaria del telefono (≤ 760 px), 5 voci icona + etichetta.
   Va FUORI dall'header (il backdrop-filter dell'header ancorerebbe un fixed discendente).
   Nascosta mentre si vedono le CTA dell'hero (body.hero-cta) e sul footer (body.at-foot). */
.tube{display:none}
.tube a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;border-radius:12px;font-size:12px;font-weight:500;line-height:1.1;color:var(--text-2);text-decoration:none;text-align:center}
.tube a .ic{width:20px;height:20px;color:var(--text-3)}
.tube a[aria-current]{color:var(--text);background:var(--surface-2)}
.tube a[aria-current] .ic{color:var(--brace-2)}
.tube,.ody-fab,#cookienote{transition:transform var(--dur-3) var(--ease),opacity var(--dur-3) var(--ease),visibility 0s linear 0s}

/* ─── 7. BOTTONI ────────────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-pill);background:transparent;color:var(--text);font:600 15px/1 var(--sans);letter-spacing:var(--tr-ui);text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1)}
.btn:hover{color:var(--text)}
.btn .ic{width:17px;height:17px}
/* Primario: l'UNICA azione brace della vista */
.btn-primary{background:var(--brace);color:var(--on-brace)}
.btn-primary:hover{background:var(--brace-hover);color:var(--on-brace)}
.btn-primary:active{background:var(--brace-press)}
/* Secondario: contorno, per le azioni alternative */
.btn-secondary{border-color:var(--line-3);color:var(--text)}
.btn-secondary:hover{border-color:var(--brace-line);background:var(--surface)}
.btn-secondary:active{background:var(--surface-2)}
/* Ghost: solo testo, per azioni terziarie in barre e card */
.btn-ghost{color:var(--text-2);padding-inline:12px}
.btn-ghost:hover{color:var(--text);background:var(--surface)}
/* Distruttivo: testo + icona + parola, contorno; mai pieno */
.btn-danger{border-color:var(--err-line);color:var(--err)}
.btn-danger:hover{background:var(--err-bg);color:var(--err)}
/* Taglie */
.btn-lg{height:50px;padding:0 24px;font-size:16px}
.btn-sm{height:36px;padding:0 14px;font-size:13.5px;gap:6px}
.btn-sm .ic{width:15px;height:15px}
.btn-block{display:flex;width:100%}
/* Solo icona: nome accessibile con aria-label (data-i18n-aria) */
.btn-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:1px solid var(--line-3);border-radius:var(--r-md);background:transparent;color:var(--text-2);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1)}
.btn-icon:hover{color:var(--text);border-color:var(--ctl);background:var(--surface)}
.btn-icon .ic{width:17px;height:17px}
.btn-icon.btn-sm{width:32px;height:32px;padding:0;border-radius:8px}
.btn-icon.btn-sm .ic{width:15px;height:15px}
.btn-icon.plain{border-color:transparent}
.btn-icon[aria-expanded="true"],.btn-icon[aria-pressed="true"]{background:var(--surface-2);border-color:var(--line-3);color:var(--text)}
/* Area di tocco ≥ 44 px anche per i bottoni piccoli */
.btn-sm::after,.btn-icon::after{content:"";position:absolute;inset:-4px}
.btn-icon.btn-sm::after{inset:-6px}
/* Disabilitato e in corso */
.btn:disabled,.btn[aria-disabled="true"],.btn-icon:disabled{background:var(--surface-2);border-color:var(--line-2);color:var(--text-3);cursor:not-allowed}
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"] .ic:not(.spin){display:none}
.spin{animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* CTA dell'header (landing e satelliti): contorno, non brace — il brace resta
   all'azione primaria della vista (hero, piano, CTA finale) */
.nav-in>nav{min-width:0}
.nav-cta,#nav-cta.btn-secondary{border-color:var(--brace-line);color:var(--brace-2)}
.nav-cta:hover,#nav-cta.btn-secondary:hover{border-color:var(--brace-2);background:var(--brace-soft);color:var(--text)}
/* Pallino della pillola di stato guidato da data-st (landing, area utente) */
.status-pill[data-st="good"] .dot{background:var(--good)}
.status-pill[data-st="warn"] .dot{background:var(--warn)}
.status-pill[data-st="err"] .dot{background:var(--err)}

/* ─── 8. BADGE, CHIP, STATO ─────────────────────────────────────────────────── */
/* Badge: etichetta breve non interattiva. Nessuna variante brace. */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border:1px solid var(--line-2);border-radius:var(--r-pill);font:500 12px/1 var(--sans);color:var(--text-2);white-space:nowrap;vertical-align:middle}
.badge .ic{width:13px;height:13px}
.badge-solid{background:var(--surface-3);border-color:transparent;color:var(--text)}
.badge-good{color:var(--good);border-color:var(--good-line);background:var(--good-bg)}
.badge-warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.badge-err{color:var(--err);border-color:var(--err-line);background:var(--err-bg)}
/* Chip: un valore o parametro, in mono */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font:400 12px/1 var(--mono);color:var(--text-2);white-space:nowrap}
.chip-more{background:transparent;color:var(--text-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
/* Opzione a pillola (filtri, scelta di sport): <button aria-pressed> */
.opt{position:relative;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid var(--line-3);border-radius:var(--r-pill);background:transparent;color:var(--text-2);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.opt:hover{border-color:var(--ctl);color:var(--text)}
.opt .ic{width:15px;height:15px}
.opt[aria-pressed="true"]{border-color:var(--brace-2);background:var(--brace-soft);color:var(--text)}
.opt::after{content:"";position:absolute;inset:-4px}
/* Stato: pallino + testo (il colore non è mai l'unico segnale) */
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--text-3)}
.dot-good{background:var(--good)}
.dot-warn{background:var(--warn)}
.dot-err{background:var(--err)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text);white-space:nowrap}
.status-good .dot{background:var(--good)}
.status-warn .dot{background:var(--warn)}
.status-err .dot{background:var(--err)}
.status-err{color:var(--err)}
.status .meta{margin-left:2px}
/* Token rimovibile (leghe scelte in un campo) */
.tok{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 10px;border-radius:var(--r-sm);background:var(--surface-3);font-size:13px;color:var(--text)}
.tok button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;color:var(--text-2)}
.tok button:hover{background:var(--surface-4);color:var(--text)}
.tok button::after{content:"";position:absolute;inset:-6px}
.tok .ic{width:13px;height:13px}

/* ─── 9. CARD, PANNELLI, METRICHE ───────────────────────────────────────────── */
.card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6)}
/* Card in evidenza: UN solo trattamento in tutto il sito. Lo riusano i listini
   (.plan.hl della home, la prima .offer di surebet-api) invece di ricopiarlo.
   Dentro, l'unico brace PIENO è il bottone primario. --fs-price: la cifra dei
   prezzi a listino (home, landing SEO), un solo clamp. */
:root{--hl-bg:linear-gradient(180deg,rgba(238,125,85,.07) 0%,var(--surface) 60%);--fs-price:clamp(2.1rem,1.6rem + .9vw,2.75rem)}
.card-hl,.plan.hl{border-color:var(--brace-line);background:var(--hl-bg)}
.card-flat{background:transparent}
.card-h{display:flex;align-items:center;gap:10px;min-height:24px}
.card-h>h2,.card-h>h3{font-size:16px;line-height:1.3;letter-spacing:-.01em}
.card-h .aside{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-3)}
.card-b{margin-top:var(--sp-4)}
.card-f{margin:var(--sp-5) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6));padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
:where(.card) p{color:var(--text-2)}
/* Card interamente cliccabile: il link è sul titolo, l'area estesa col ::after */
.card-link{position:relative;transition:border-color var(--dur-1),background var(--dur-1)}
.card-link:hover{border-color:var(--ctl);background:#171411}
.card-link a.card-a{color:inherit;text-decoration:none}
.card-link a.card-a::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* Icona in riquadro (testata di una card) */
.ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--text)}
.ico .ic{width:18px;height:18px}
/* Riquadro incassato dentro una card (esempi, mini-codice, riepiloghi) */
.panel{background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4)}
.panel-inset{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md)}
/* Coppie chiave → valore */
.kv{display:grid;margin:0}
.kv>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding:9px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.kv>div:first-child{border-top:0}
.kv dt{color:var(--text-3)}
.kv dd{margin:0;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
/* Metriche: numeri scritti nell'HTML (mai contatori animati da 0) */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(27,23,20,.6)}
.metric{min-width:0;padding:var(--sp-5) var(--sp-6)}
.metric+.metric{border-left:1px solid var(--line)}
.metric .v{display:block;font-size:clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);line-height:1;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.metric .v small{margin-left:3px;font-size:.46em;font-weight:500;letter-spacing:0;color:var(--text-2)}
.metric .l{display:block;margin-top:8px;font-size:var(--fs-sm);line-height:1.35;color:var(--text-2)}
.metric .meta{display:block;margin-top:4px}

/* ─── 10. TABELLE ───────────────────────────────────────────────────────────── */
.tbl{width:100%;font-size:var(--fs-sm)}
.tbl caption{caption-side:top;text-align:left;padding:0 0 10px;font-size:var(--fs-xs);color:var(--text-3)}
.tbl th{padding:11px 14px;border-bottom:1px solid var(--line-2);font:500 12.5px/1.2 var(--sans);color:var(--text-3);text-align:left;white-space:nowrap;vertical-align:bottom}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .c{text-align:center}
.tbl td.mono,.tbl td .mono{font-size:12.5px;color:var(--text-2)}
.tbl .muted,.tbl tr.muted td{color:var(--text-3)}
.tbl th[aria-sort]{cursor:pointer}
.tbl th[aria-sort] button{display:inline-flex;align-items:center;gap:4px;color:inherit;font:inherit}
.tbl th[aria-sort="ascending"],.tbl th[aria-sort="descending"]{color:var(--text)}
/* Dentro una card con padding: righe a filo; fuori: .tbl-boxed */
.tbl-boxed{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.tbl-boxed .tbl th{background:var(--bg-1)}
.tbl-boxed .tbl th:first-child,.tbl-boxed .tbl td:first-child{padding-left:20px}
.tbl-boxed .tbl th:last-child,.tbl-boxed .tbl td:last-child{padding-right:20px}
.tbl-dense th{padding-block:9px}
.tbl-dense td{padding-block:8px;font-size:13px}
.tbl-hover tbody tr:hover td{background:var(--surface-2)}
/* Scorrimento orizzontale: <div class="tbl-wrap" role="region" tabindex="0" aria-label="…"> */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.tbl-wrap:focus-visible{outline-offset:4px;border-radius:var(--r-md)}
/* Etichetta di cella per la vista a schede (.tbl-stack): testo vero, tradotto e
   LETTO dai lettori di schermo (sotto i 760 px il <thead> è display:none, quindi
   senza etichetta le colonne resterebbero senza nome). Su desktop è display:none,
   quindi non si legge due volte. Tabelle statiche: <header class="tbl-l"> (build-md
   lo toglie dal .md); tabelle generate dal JS: <span class="tbl-l">. Mai aria-hidden. */
.tbl-l{display:none}
/* Barretta d'uso in cella */
.bar-in{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;font-variant-numeric:tabular-nums;font-weight:500}
.bar-in i{position:relative;display:block;width:64px;height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.bar-in i b{position:absolute;inset:0 auto 0 0;width:var(--v,0%);border-radius:4px;background:var(--text-2)}

/* ─── 11. MODULI ────────────────────────────────────────────────────────────── */
.field{min-width:0}
.field>label,.field .lbl{display:flex;align-items:baseline;gap:6px;margin-bottom:7px;font-size:13.5px;font-weight:500;color:var(--text-2)}
.field .opt-l{font-weight:400;color:var(--text-3)}
.field .lbl-aside{margin-left:auto;font-size:13px;font-weight:400}
/* Controlli di testo: 16 px su telefono e touch (niente zoom iOS) */
.input,.select,.textarea{display:block;width:100%;height:46px;padding:0 14px;border:1px solid var(--ctl);border-radius:var(--r-md);background:var(--bg);color:var(--text);font:400 15px/1.3 var(--sans);transition:border-color var(--dur-1),background var(--dur-1);-webkit-appearance:none;appearance:none}
.textarea{height:auto;min-height:112px;padding:12px 14px;line-height:1.55;resize:vertical}
.input.mono,.textarea.mono{font-family:var(--mono);font-size:14px}
.input::placeholder,.textarea::placeholder{color:var(--text-3);opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-3)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,.input:focus,.select:focus,.textarea:focus{border-color:var(--text-2);outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
.select{padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a8f81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.select option{background:var(--surface-2);color:var(--text)}
.input-sm,.select.input-sm{height:36px;padding-inline:10px;font-size:13.5px}
/* Errore: aria-invalid="true" + aria-describedby → id del messaggio */
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"],.ctl.is-invalid,.ctl:has([aria-invalid="true"]){border-color:var(--err)}
.input:disabled,.select:disabled,.textarea:disabled,.ctl.is-disabled{background:var(--surface);border-color:var(--line-2);color:var(--text-3);cursor:not-allowed}
.input[readonly]{background:var(--bg-1);border-color:var(--line-2)}
/* Gruppo con prefisso/suffisso: <div class="ctl"><span class="ctl-pre">…</span><input>…</div> */
.ctl{position:relative;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid var(--ctl);border-radius:var(--r-md);background:var(--bg);transition:border-color var(--dur-1)}
.ctl:hover{border-color:var(--text-3)}
.ctl:focus-within{border-color:var(--text-2);outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
.ctl input,.ctl select{flex:1 1 0;min-width:0;width:0;height:44px;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--text);font:400 15px/1.2 var(--sans);-webkit-appearance:none;appearance:none}
.ctl input::placeholder{color:var(--text-3);opacity:1}
.ctl input:focus-visible{outline:none}
.ctl-pre{display:inline-flex;align-items:center;height:20px;padding-right:10px;border-right:1px solid var(--line-3);font:500 13px/1 var(--mono);color:var(--text-3);white-space:nowrap}
.ctl>.ic{width:17px;height:17px;color:var(--text-3)}
.ctl-suf{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:-8px;border-radius:8px;color:var(--text-2)}
.ctl-suf:hover{background:var(--surface-2);color:var(--text)}
.ctl-suf::after{content:"";position:absolute;inset:-4px}
.ctl-suf .ic{width:17px;height:17px}
/* Testo d'aiuto e messaggio d'errore del campo */
.hint{display:flex;align-items:flex-start;gap:6px;margin-top:7px;font-size:13px;line-height:1.5;color:var(--text-3)}
.hint .ic{width:15px;height:15px;margin-top:2px;flex:none}
.hint-ok{color:var(--good)}
.field-err{display:flex;align-items:flex-start;gap:6px;margin-top:7px;font-size:13px;line-height:1.5;color:var(--err)}
.field-err .ic{width:15px;height:15px;margin-top:2px;flex:none}
.field-err:empty{display:none}
/* Griglie dei moduli (collassano a una colonna sotto i 640 px) */
.fgrid{display:grid;gap:14px}
.fgrid>*{min-width:0}
.fgrid.c2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fgrid.c3{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)}
/* Gruppo di campi con titolo: <fieldset class="fset"><legend>…</legend> */
.fset{margin:0;padding:0;border:0;min-width:0}
.fset>legend{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:12px;padding:0;margin-bottom:12px;font-size:13.5px;font-weight:600;color:var(--text)}
.fset>legend .meta{font-weight:400}
.fset+.fset{margin-top:var(--sp-6)}
/* Robustezza della password: 4 tacche */
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:9px}
.pw-meter i{height:3px;border-radius:3px;background:var(--surface-3)}
.pw-meter[data-score="1"] i:nth-child(-n+1){background:var(--err)}
.pw-meter[data-score="2"] i:nth-child(-n+2){background:var(--warn)}
.pw-meter[data-score="3"] i:nth-child(-n+3),.pw-meter[data-score="4"] i{background:var(--good)}

/* ─── 12. SELETTORI: checkbox, radio, scelta, segmenti, switch, range ─────── */
.cb,.rd{-webkit-appearance:none;appearance:none;flex:none;display:inline-grid;place-content:center;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--ctl);background:var(--bg);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1)}
.cb{border-radius:5px}
.rd{border-radius:50%}
.cb:hover,.rd:hover{border-color:var(--text-2)}
.cb:checked{border-color:var(--brace);background:var(--brace) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf5ec' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/14px no-repeat}
.cb:indeterminate{border-color:var(--text);background:var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0a09' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat}
.rd:checked{border-color:var(--brace-2);background:radial-gradient(circle,var(--brace-2) 0 4.5px,transparent 5px) var(--bg)}
.cb[aria-invalid="true"],.rd[aria-invalid="true"]{border-color:var(--err)}
.cb:disabled,.rd:disabled{opacity:.5;cursor:not-allowed}
/* Etichetta cliccabile per l'intera riga (area di tocco ≥ 44 px) */
.check{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:12px;min-height:24px;font-size:var(--fs-sm);line-height:1.55;color:var(--text-2);cursor:pointer}
.check b{color:var(--text)}
.check+.check{margin-top:12px}
/* Scelta a scheda (consumatore / professionista, piano): radio o checkbox dentro */
.choice{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:4px 12px;padding:14px 16px;border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--bg);cursor:pointer;transition:border-color var(--dur-1),background var(--dur-1)}
.choice:hover{border-color:var(--ctl)}
.choice:has(:checked),.choice.is-on{border-color:var(--brace-line);background:var(--brace-soft)}
.choice:has(:focus-visible){outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
.choice .cb:focus-visible,.choice .rd:focus-visible{outline:none}
.choice b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.choice .choice-d{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.choice .choice-v{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.choices{display:grid;gap:10px}
/* Segmenti: <div class="seg" role="group" aria-label="…"><button aria-pressed="true">…</button>…</div> */
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-3);border-radius:var(--r-pill);background:var(--surface)}
.seg>button,.seg>a{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border:0;border-radius:var(--r-pill);background:none;color:var(--text-3);font:500 14px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.seg>button:hover,.seg>a:hover{color:var(--text)}
.seg>button[aria-pressed="true"],.seg>button[aria-selected="true"],.seg>a[aria-current]{background:var(--brace-soft);color:var(--brace-2)}
.seg-sm{padding:2px}
.seg-sm>button,.seg-sm>a{height:28px;padding:0 11px;font-size:13px}
.seg-sm>button::after,.seg-sm>a::after{content:"";position:absolute;inset:-6px -1px}
.seg-block{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}
/* Interruttore: <label class="sw"><input type="checkbox" role="switch"><span class="sw-t" aria-hidden="true"></span><span>…</span></label> */
.sw{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:28px;font-size:var(--fs-sm);color:var(--text);cursor:pointer}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw-t{position:relative;flex:none;width:38px;height:22px;border:1.5px solid var(--ctl);border-radius:var(--r-pill);background:var(--bg);transition:background var(--dur-2),border-color var(--dur-2)}
.sw-t::after{content:"";position:absolute;top:2.5px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--text-3);transition:transform var(--dur-2) var(--ease),background var(--dur-2)}
.sw input:checked+.sw-t{background:var(--brace);border-color:var(--brace)}
.sw input:checked+.sw-t::after{transform:translateX(15px);background:var(--on-brace)}
.sw input:focus-visible+.sw-t{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
.sw input:disabled+.sw-t{opacity:.5}
/* Range: la parte piena la disegna --p (0%–100%, impostata da JS) */
.rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;--p:0%}
/* Traccia vuota in --ctl (4,2:1 su --surface, WCAG 1.4.11): col cursore al
   minimo deve restare visibile. Pollice e parte piena restano --brace-2. */
.rng::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brace-2) var(--p),var(--ctl) var(--p))}
.rng::-moz-range-track{height:4px;border-radius:4px;background:var(--ctl)}
.rng::-moz-range-progress{height:4px;border-radius:4px;background:var(--brace-2)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;border:4px solid var(--surface);background:var(--brace-2)}
.rng::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:4px solid var(--surface);background:var(--brace-2)}
.rng:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:4px;border-radius:8px}
.rng-ax{display:flex;justify-content:space-between;margin-top:4px;font:400 12px/1 var(--mono);color:var(--text-3)}

/* ─── 13. ALERT E BANNER ────────────────────────────────────────────────────── */
/* role="alert" per gli errori che arrivano dopo un'azione; role="status" per il resto */
.alert{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:10px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-1);font-size:var(--fs-sm);line-height:1.55;color:var(--text)}
.alert>.ic{width:18px;height:18px;margin-top:1px;color:var(--text-2)}
.alert b{font-weight:600}
:where(.alert) p{color:var(--text-2)}
.alert p+p,.alert b+p{margin-top:4px}
.alert-act{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px}
.alert-x{position:relative;align-self:start;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -6px 0 0;border-radius:8px;color:var(--text-2)}
.alert-x:hover{background:var(--surface-3);color:var(--text)}
.alert-x::after{content:"";position:absolute;inset:-8px}
.alert-x .ic{width:15px;height:15px}
.alert-ok{background:var(--good-bg);border-color:var(--good-line)}
.alert-ok>.ic{color:var(--good)}
.alert-warn{background:var(--warn-bg);border-color:var(--warn-line)}
.alert-warn>.ic{color:var(--warn)}
.alert-err{background:var(--err-bg);border-color:var(--err-line)}
.alert-err>.ic{color:var(--err)}
:where(.alert-ok,.alert-warn,.alert-err) p{color:var(--text)}
/* Banner: striscia a tutta larghezza in cima alla pagina (servizio sospeso, ritorni da Stripe) */
.banner{border-bottom:1px solid var(--line-2);background:var(--bg-1);font-size:var(--fs-sm);color:var(--text)}
.banner .wrap{display:flex;align-items:center;gap:12px;min-height:48px;padding-block:10px}
.banner .ic{width:18px;height:18px;flex:none;color:var(--text-2)}
.banner p{flex:1;color:var(--text)}
.banner-warn{background:#1a130b;border-color:var(--warn-line)}
.banner-warn .ic{color:var(--warn)}
.banner-err{background:#1b0f0e;border-color:var(--err-line)}
.banner-err .ic{color:var(--err)}
.banner-ok .ic{color:var(--good)}

/* ─── 14. TOAST ─────────────────────────────────────────────────────────────── */
/* <div class="toasts" role="status" aria-live="polite"></div> una volta per pagina;
   gli errori in un secondo contenitore con role="alert". */
.toasts{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:var(--z-toast);display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:min(400px, calc(100vw - 32px));pointer-events:none}
.toast{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:start;gap:10px;width:100%;padding:12px 12px 12px 14px;border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);line-height:1.5;color:var(--text);pointer-events:auto;animation:toast-in var(--dur-3) var(--ease)}
.toast>.ic{width:18px;height:18px;margin-top:1px;color:var(--text-2)}
.toast-ok>.ic{color:var(--good)}
.toast-warn>.ic{color:var(--warn)}
.toast-err{border-color:var(--err-line)}
.toast-err>.ic{color:var(--err)}
.toast .toast-act{display:flex;gap:6px;align-items:center;margin:-7px -4px -7px 0}
.toast>.alert-x{margin:-3px -4px 0 0}
.toast.is-out{opacity:0;transform:translateY(6px);transition:opacity var(--dur-2),transform var(--dur-2)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─── 15. DIALOG (<dialog> nativo, mai alert/confirm) ───────────────────────── */
/* <dialog class="dlg" aria-labelledby="…-t" aria-describedby="…-d">; si apre con showModal():
   focus intrappolato e Esc gestiti dal browser. Su telefono diventa un foglio dal basso. */
.dlg{width:min(520px, calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--line-3);border-radius:var(--r-lg);background:var(--surface);color:var(--text);overflow:auto;overscroll-behavior:contain}
.dlg-lg{width:min(720px, calc(100vw - 32px))}
.dlg::backdrop{background:rgba(7,6,5,.74);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dlg[open]{animation:dlg-in var(--dur-3) var(--ease)}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.dlg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 0}
.dlg-h h2{font-size:20px;line-height:1.25;letter-spacing:-.02em}
.dlg-h p{margin-top:6px;font-size:var(--fs-sm);line-height:1.55;color:var(--text-2)}
.dlg-b{display:grid;gap:16px;padding:20px 24px}
.dlg-b>*{min-width:0}   /* un contenuto che non va a capo (chiave, comando) non allarga il dialog */
.dlg-f{position:sticky;bottom:0;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:16px 24px;border-top:1px solid var(--line);background:var(--surface)}
/* Chiave/segreto mostrato una volta sola */
.keybox{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border:1px solid var(--text-2);border-radius:var(--r-md);background:var(--bg);font:500 13px/1.45 var(--mono);color:var(--text);word-break:break-all}
.keybox .btn{flex:none;margin-left:auto}

/* ─── 16. TABS E ACCORDION ──────────────────────────────────────────────────── */
/* Schede di sezione (sottolineate): role="tablist" > button role="tab" aria-selected aria-controls */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--text-3);font-size:14.5px;font-weight:500;white-space:nowrap;text-decoration:none}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"],.tab[aria-current]{color:var(--text);border-bottom-color:var(--brace-2)}
.tab .ic{width:16px;height:16px}
.tab .cnt{font:500 12px/1 var(--mono);color:var(--text-3)}
/* Accordion: <details class="acc"><summary><h3 class="acc-q">…</h3><span class="acc-i">…</span></summary>
   (l'<h3> dentro <summary> è valido e finisce nel .md; il testo del solo <summary> no) */
.accs{border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc>summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:56px;padding:16px 0;list-style:none;cursor:pointer;border-radius:6px}
.acc>summary::-webkit-details-marker{display:none}
.acc-q{font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--text);text-wrap:pretty}
.acc-i{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:1px solid var(--line-3);border-radius:50%;color:var(--text-2);transition:transform var(--dur-2) var(--ease)}
.acc-i .ic{width:14px;height:14px}
.acc[open] .acc-i{transform:rotate(45deg)}
.acc>summary:hover .acc-i{border-color:var(--ctl);color:var(--text)}
.acc-b{padding:0 56px 22px 0;color:var(--text-2);font-size:var(--fs-body);line-height:1.65}
.acc-b>*+*{margin-top:10px}

/* ─── 17. PANNELLO CODICE ───────────────────────────────────────────────────── */
/* Commenti traducibili (data-i18n) FUORI dal <pre>: highlight.js riscrive l'innerHTML. */
.code{min-width:0;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface)}
.code-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;min-height:54px;padding:8px 10px 8px 12px;border-bottom:1px solid var(--line)}
.code-act{margin-left:auto;display:flex;align-items:center;gap:10px}
.code-pane{position:relative;min-width:0;padding:16px 20px 18px}
.code-pane+.code-pane{border-top:1px solid var(--line)}
.code-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:12.5px;font-weight:500;color:var(--text-3)}
.code-h .mono{font-size:12px;color:var(--text-2)}
.code-note{margin-top:12px;font-size:13px;line-height:1.55;color:var(--text-2)}
.code-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-height:44px;padding:10px 20px;border-top:1px solid var(--line);font:400 12px/1.3 var(--mono);color:var(--text-3)}
.code-foot>span{white-space:nowrap}
.code-foot .status{font:inherit;color:var(--text)}
.code-foot .sep{width:1px;height:12px;background:var(--line-2)}
.code-foot .aside{margin-left:auto;font-family:var(--sans);font-size:12.5px;white-space:normal}
pre{margin:0;overflow:auto;font:400 var(--fs-mono)/1.7 var(--mono);color:var(--code-fg);white-space:pre;tab-size:2;scrollbar-width:thin}
pre code{display:block;font:inherit;background:none;border:0;padding:0}
.code pre{font-size:12.5px}
/* Blocco di codice autonomo (passi, SDK, docs) */
.pre{padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.pre-wrap{white-space:pre-wrap;overflow-wrap:anywhere}
/* Riga di comando copiabile */
.cmd{display:flex;align-items:center;gap:10px;min-width:0;height:46px;padding:0 6px 0 16px;border:1px solid var(--line-3);border-radius:var(--r-pill);background:var(--bg);font:400 12.5px/1 var(--mono);color:var(--text-2)}
.cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;background:none;border:0;padding:0;font-size:12.5px;color:var(--text-2);scrollbar-width:none}
.cmd code::-webkit-scrollbar{display:none}
.cmd .p{color:var(--text-3)}
.cmd .btn-icon{border-radius:50%}
/* highlight.js 11 — «senza arcobaleno»: chiavi avorio, stringhe sabbia, punteggiatura attenuata */
.hljs{color:var(--code-fg);background:none}
.hljs-keyword,.hljs-selector-tag,.hljs-meta .hljs-keyword,.hljs-doctag,.hljs-section{color:var(--code-kw)}
.hljs-built_in,.hljs-title,.hljs-title.function_,.hljs-title.class_,.hljs-name{color:var(--code-fn);font-weight:500}
.hljs-string,.hljs-meta .hljs-string,.hljs-regexp,.hljs-template-string,.hljs-char.escape_,.hljs-link{color:var(--code-str)}
.hljs-number,.hljs-literal,.hljs-symbol,.hljs-bullet{color:var(--code-num);font-weight:500}
.hljs-attr,.hljs-attribute,.hljs-property,.hljs-variable,.hljs-template-variable,.hljs-params,.hljs-selector-class,.hljs-selector-id{color:var(--code-fg)}
.language-json .hljs-attr{color:var(--code-key)}  /* solo le chiavi JSON: JS e Python restano come sono */
.hljs-variable.language_,.hljs-type{color:var(--text-2)}
.hljs-comment,.hljs-quote{color:var(--code-com)}
.hljs-punctuation,.hljs-operator,.hljs-meta,.hljs-subst{color:var(--code-punc)}
.hljs-addition{color:var(--good)}
.hljs-deletion{color:var(--err)}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:600}
/* Classi a mano per esempi statici senza highlight.js (come nei mockup) */
.t-k{color:var(--code-key)} .t-s{color:var(--code-str)} .t-n{color:var(--code-num);font-weight:500} .t-p{color:var(--code-punc)} .t-c{color:var(--code-com)} .t-kw{color:var(--code-kw)} .t-f{color:var(--code-fn)}

/* ─── 18. ALBERO JSON (json-formatter-js 2.5, tema "brace") ─────────────────── */
/* new JSONFormatter(data, 2, {theme:"brace", hoverPreviewEnabled:false}) dentro <div class="jtree">.
   La libreria inietta il SUO css nella <head> dopo site.css: qui ogni regola ha
   un selettore più specifico (.jtree …) per vincere a prescindere dall'ordine. */
.jtree{padding:10px 16px 14px;overflow:auto;font:400 12.5px/1.9 var(--mono);color:var(--text-2)}
.jtree .json-formatter-row{font-family:var(--mono)}
.jtree .json-formatter-row,.jtree .json-formatter-row a,.jtree .json-formatter-row a:hover{color:var(--text-2);text-decoration:none}
.jtree .json-formatter-row .json-formatter-row{margin-left:16px}
.jtree .json-formatter-row .json-formatter-key{color:var(--code-key);padding-right:4px}
.jtree .json-formatter-row .json-formatter-string,.jtree .json-formatter-row .json-formatter-stringifiable{color:var(--code-str);white-space:pre-wrap;overflow-wrap:anywhere}
.jtree .json-formatter-row .json-formatter-number{color:var(--code-num);font-weight:500}
.jtree .json-formatter-row .json-formatter-boolean,.jtree .json-formatter-row .json-formatter-null,.jtree .json-formatter-row .json-formatter-undefined{color:var(--code-kw)}
.jtree .json-formatter-row .json-formatter-date{background:none;color:var(--code-str)}
.jtree .json-formatter-row .json-formatter-url{color:var(--acc);text-decoration:underline;text-decoration-color:var(--acc-line)}
.jtree .json-formatter-row .json-formatter-bracket{color:var(--code-punc)}
.jtree .json-formatter-row .json-formatter-constructor-name{color:var(--text-3)}
.jtree .json-formatter-row .json-formatter-toggler{opacity:1;color:var(--text-3);font-size:10px;line-height:1.9}
.jtree .json-formatter-row .json-formatter-toggler-link{border-radius:4px}
.jtree .json-formatter-row .json-formatter-toggler-link:hover .json-formatter-key{text-decoration:underline;text-decoration-color:var(--ctl)}
.jtree .json-formatter-row .json-formatter-children.json-formatter-empty{opacity:1;color:var(--text-3)}
.jtree .json-formatter-row>a>.json-formatter-preview-text{color:var(--text-3);font-style:normal}

/* ─── 19. SKELETON E EMPTY STATE ────────────────────────────────────────────── */
/* Contenitore in caricamento: aria-busy="true"; gli .sk sono aria-hidden */
.sk{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 40%,var(--surface-2) 80%) 0 0/300% 100%;animation:sk 1.4s ease-in-out infinite}
.sk-t{height:18px;width:40%}
.sk-num{height:36px;width:55%;border-radius:8px}
.sk-line{width:100%}
.sk-line.w-80{width:80%} .sk-line.w-60{width:60%} .sk-line.w-40{width:40%}
.sk-block{height:120px;border-radius:var(--r-md)}
.sk+.sk{margin-top:10px}
@keyframes sk{from{background-position:100% 0}to{background-position:0 0}}
.empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;border:1px dashed var(--line-3);border-radius:var(--r-md);text-align:center}
.empty-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);color:var(--text-2)}
.empty-ic .ic{width:20px;height:20px}
.empty h3,.empty .empty-t{font-size:15px;font-weight:600;color:var(--text)}
:where(.empty) p{max-width:420px;font-size:var(--fs-sm);line-height:1.55;color:var(--text-2)}
.empty .btn-row{justify-content:center;margin-top:10px}

/* ─── 20. METER (quota), BARRE, SCALA DELLA FRESCHEZZA ─────────────────────── */
/* <div class="meter" role="meter" aria-valuemin="0" aria-valuemax="100000" aria-valuenow="62418"
        aria-valuetext="62.418 su 100.000" aria-labelledby="…" style="--v:62.4%" data-level="ok|warn|err">
     <div class="meter-bar"><i class="meter-fill"></i><i class="meter-th" style="--t:80%"></i></div>
   data-level: warn da 80%, err a 100% (lo decide lo script, il colore segue). */
.meter{--v:0%;--t:80%}
.meter-bar{position:relative;height:10px;border-radius:10px;background:var(--surface-3)}
.meter-fill{position:absolute;inset:0 auto 0 0;width:var(--v);max-width:100%;border-radius:10px;background:var(--brace-2);transition:width var(--dur-3) var(--ease)}
.meter[data-level="warn"] .meter-fill{background:var(--warn)}
.meter[data-level="err"] .meter-fill{background:var(--err)}
.meter-th{position:absolute;top:-5px;bottom:-5px;left:var(--t);width:2px;border-radius:2px;background:var(--warn)}
.meter-ax{position:relative;height:14px;margin-top:9px;font:400 11.5px/1 var(--mono);color:var(--text-3)}
.meter-ax span{position:absolute;top:0;white-space:nowrap}
.meter-ax span:first-child{left:0}
.meter-ax span:last-child{right:0}
.meter-ax .at-t{left:var(--t);transform:translateX(-50%);color:var(--warn)}
.meter-sm .meter-bar{height:5px}
.meter-sm .meter-fill{background:var(--brace-2)}
/* Scala 0–10 min con p50 e p95 (i valori arrivano da GET /api/v1/status):
   <div class="fscale" style="--p50:29.2%;--p95:50.7%"><div class="fscale-t"><i class="fscale-f"></i>
   <i class="fscale-m" style="left:var(--p50)"></i><i class="fscale-m" style="left:var(--p95)"></i></div>
   <div class="fscale-ax"><span>0 s</span><span>5 min</span><span>10 min</span></div></div> */
.fscale{--p50:0%;--p95:0%}
.fscale-t{position:relative;height:4px;margin-top:18px;border-radius:4px;background:var(--surface-3)}
.fscale-f{position:absolute;inset:0 auto 0 0;width:var(--p95);border-radius:4px;background:linear-gradient(90deg,rgba(95,191,135,.25),var(--good))}
.fscale-m{position:absolute;top:-5px;width:2px;height:14px;margin-left:-1px;border-radius:2px;background:var(--text)}
.fscale-m span{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:500 11.5px/1 var(--mono);color:var(--text-2);white-space:nowrap}
.fscale-ax{display:flex;justify-content:space-between;margin-top:8px;font:400 11.5px/1 var(--mono);color:var(--text-3)}

/* Varianti: data-tone="warn|err" quando p50/p95 superano gli obiettivi pubblicati;
   .is-close quando p50 e p95 sono vicini (le etichette si scostano). Marcatori .m50/.m95. */
.fscale[data-tone="warn"] .fscale-f{background:linear-gradient(90deg,var(--warn-bg),var(--warn))}
.fscale[data-tone="err"] .fscale-f{background:linear-gradient(90deg,var(--err-bg),var(--err))}
.fscale.is-close .m50 span{left:auto;right:5px;transform:none}
.fscale.is-close .m95 span{left:5px;transform:none}

/* ─── 21. TOOLTIP E POPOVER ─────────────────────────────────────────────────── */
/* Tooltip: il testo è un elemento vero (traducibile con data-i18n), visibile su hover e focus.
   <span class="tip"><button class="btn-icon btn-sm plain" aria-describedby="tip-x" …>…</button>
   <span class="tip-b" role="tooltip" id="tip-x">…</span></span> */
.tip{position:relative;display:inline-flex}
.tip-b{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:var(--z-pop);width:max-content;max-width:260px;padding:8px 10px;border:1px solid var(--line-3);border-radius:8px;background:var(--surface-2);font:400 12.5px/1.45 var(--sans);color:var(--text);text-align:left;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity var(--dur-1),transform var(--dur-1),visibility 0s linear var(--dur-1)}
.tip:hover .tip-b,.tip:focus-within .tip-b{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.tip-b.below{bottom:auto;top:calc(100% + 8px)}
.tip-b.start{left:0;transform:translate(0,4px)}
.tip:hover .tip-b.start,.tip:focus-within .tip-b.start{transform:none}
.tip-b.end{left:auto;right:0;transform:translate(0,4px)}
.tip:hover .tip-b.end,.tip:focus-within .tip-b.end{transform:none}
/* Popover: pannello ancorato (attributo HTML popover o [hidden] gestito da JS) */
.pop{position:absolute;z-index:var(--z-pop);min-width:220px;max-width:min(360px, calc(100vw - 24px));padding:14px 16px;border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--surface-2);color:var(--text);font-size:var(--fs-sm);line-height:1.5}
[popover].pop{position:fixed;inset:auto;margin:0}
:where(.pop) p{color:var(--text-2)}

/* ─── 22. MENU ⋯ E KBD ──────────────────────────────────────────────────────── */
/* <div class="menu"><button class="btn-icon plain" aria-haspopup="menu" aria-expanded="false" aria-controls="m1">…</button>
   <div class="menu-list" role="menu" id="m1" hidden><button role="menuitem" class="menu-i">…</button>…</div></div> */
.menu{position:relative;display:inline-flex}
.menu-list{position:absolute;top:calc(100% + 6px);right:0;z-index:var(--z-pop);display:flex;flex-direction:column;min-width:220px;padding:6px;border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--surface-2)}
.menu-list.left{right:auto;left:0}
.menu-i{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border-radius:7px;color:var(--text-2);font-size:13.5px;text-align:left;text-decoration:none;white-space:nowrap}
.menu-i:hover,.menu-i:focus-visible{background:var(--surface-3);color:var(--text);outline:none}
.menu-i .ic{width:15px;height:15px;color:var(--text-3)}
.menu-i:hover .ic{color:var(--text)}
.menu-i .menu-k{margin-left:auto;font:400 11.5px/1 var(--mono);color:var(--text-3)}
.menu-i.danger,.menu-i.danger .ic{color:var(--err)}
.menu-i.danger:hover{background:var(--err-bg)}
.menu-i[aria-disabled="true"]{color:var(--text-3);cursor:not-allowed}
.menu-i[aria-disabled="true"]:hover{background:none}
.menu-sep{height:1px;margin:5px 2px;background:var(--line-2)}
.menu-h{padding:8px 10px 4px;font-size:12px;font-weight:500;color:var(--text-3)}
kbd,.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line-3);border-bottom-width:2px;border-radius:6px;background:var(--bg);font:500 11.5px/1 var(--sans);color:var(--text-2);white-space:nowrap}

/* ─── 23. AREA UTENTE: shell con sidebar, topbar, sottonavigazione ─────────── */
.app{display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:linear-gradient(90deg,var(--bg-1) calc(var(--sbw) - 1px),var(--line) calc(var(--sbw) - 1px),var(--line) var(--sbw),transparent var(--sbw))}
.sb{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;max-height:100vh;max-height:100dvh;overflow-y:auto;padding:18px 14px}
.sb .brand{padding:4px 10px}
.sb-acct{display:flex;align-items:center;gap:10px;margin:18px 0 8px;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface)}
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--surface-3);font:600 12px/1 var(--sans);color:var(--text)}
.av-round{border-radius:50%}
.sb-acct>div{min-width:0}
.sb-acct b{display:block;font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-acct>div>span{display:block;font-size:12.5px;line-height:1.3;color:var(--text-3)}
.sb-acct>.ic{margin-left:auto;width:15px;height:15px;color:var(--text-3)}
.sb-nav{display:grid;gap:2px;margin-top:10px}
.sb-l{padding:14px 10px 6px;font-size:12.5px;font-weight:500;color:var(--text-3)}
.sb-nav a{display:flex;align-items:center;gap:11px;height:40px;padding:0 10px;border:1px solid transparent;border-radius:var(--r-md);color:var(--text-2);font-size:14px;font-weight:500;text-decoration:none}
.sb-nav a .ic{width:17px;height:17px;color:var(--text-3)}
.sb-nav a:hover{background:var(--surface);color:var(--text)}
.sb-nav a[aria-current]{background:var(--brace-soft);border-color:var(--brace-line);color:var(--text)}
.sb-nav a[aria-current] .ic{color:var(--brace-2)}
.sb-nav .aside{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:400 12px/1 var(--sans);color:var(--text-3)}
.sb-nav .cnt{margin-left:auto;font:500 12px/1 var(--mono);color:var(--text-3)}
.sb-nav .aside .ic{width:13px;height:13px}
.sb-q{margin-top:24px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface)}
.sb-q-h{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--text-3)}
.sb-q-h b{font-size:13px}
.sb-q .meter{margin-top:10px}
.sb-q p{margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--text-3)}
.app-main{min-width:0;display:flex;flex-direction:column}
/* la topbar allinea i suoi bordi a quelli del contenuto centrato (.app-content) */
.app-top{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;gap:12px;height:64px;padding:0 max(32px, calc((100% - var(--app-w)) / 2 + 32px));border-bottom:1px solid var(--line);background:rgba(11,10,9,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.app-top .grow{flex:1}
.m-brand{display:none}
/* Ricerca / palette ⌘K: è un bottone che apre il dialog */
.search{display:flex;align-items:center;gap:10px;width:380px;max-width:100%;height:40px;padding:0 8px 0 14px;border:1px solid var(--ctl);border-radius:var(--r-pill);background:var(--surface);color:var(--text-2);font-size:14px;text-align:left;cursor:pointer}
.search:hover{border-color:var(--text-3);color:var(--text)}
.search .ic{width:16px;height:16px}
.search .kbds{margin-left:auto;display:inline-flex;gap:3px}
.user-btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 10px 0 5px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:13.5px;font-weight:500;color:var(--text)}
.user-btn:hover{border-color:var(--line-3)}
.user-btn .ic{width:14px;height:14px;color:var(--text-3)}
/* Contenuto dell'area utente: CENTRATO nello spazio a destra della sidebar, mai
   schiacciato a sinistra; sugli schermi larghi (≥ 1800 px) si allarga a --app-w
   1360 px e le griglie delle card prendono lo spazio. Test in check-site. */
.app-content{width:100%;max-width:var(--app-w);margin-inline:auto;padding:32px 32px 72px}
@media (min-width:1800px){ :root{--app-w:1360px} }
/* Paragrafi nelle card dell'area utente: misura leggibile anche quando la card è larga */
.app-content .card>p,.app-content .card-note{max-width:72ch}
/* Testata di pagina dell'area utente */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ph h1{font-size:var(--fs-2);line-height:1.1;letter-spacing:-.03em}
.ph p{margin-top:8px;font-size:15px;color:var(--text-2)}
.ph-act{display:flex;gap:10px;flex-wrap:wrap}
/* Sottonavigazione a segmenti scorrevoli (telefono): sticky sotto la topbar */
.subnav{display:none}
.subnav a{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--text-2);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.subnav a .ic{width:16px;height:16px;color:var(--text-3)}
.subnav a[aria-current]{border-color:var(--brace-line);background:var(--brace-soft);color:var(--text)}
.subnav a[aria-current] .ic{color:var(--brace-2)}
/* Palette ⌘K (dentro un <dialog class="dlg dlg-lg palette">) */
.palette{padding:0}
.pal-in{display:flex;align-items:center;gap:12px;height:56px;padding:0 18px;border-bottom:1px solid var(--line)}
.pal-in .ic{color:var(--text-2)}
.pal-in input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--text);font-size:16px}
.pal-in input::placeholder{color:var(--text-3)}
.pal-g{padding:8px}
.pal-g h3,.pal-h{padding:8px 10px 6px;font-size:12px;font-weight:500;color:var(--text-3)}
.pal-i{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 10px;border-radius:9px;color:var(--text-2);font-size:14px;text-align:left;text-decoration:none}
.pal-i .ic{width:16px;height:16px;color:var(--text-3)}
.pal-i[aria-selected="true"],.pal-i:hover{background:var(--surface-3);color:var(--text)}
.pal-i[aria-selected="true"] .ic{color:var(--text)}
.pal-i mark{background:none;color:var(--text);font-weight:600}
.pal-i .menu-k{margin-left:auto;font:400 12px/1 var(--mono);color:var(--text-3)}
.pal-f{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}
.pal-f span{display:inline-flex;align-items:center;gap:6px}

/* ─── 24. FOOTER ────────────────────────────────────────────────────────────── */
/* <footer class="site-foot"> (build-md lo toglie dal .md: i dati legali stanno anche in pagina) */
.site-foot{margin-top:var(--sec-y);padding:var(--sp-10) 0 calc(var(--sp-9) + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:var(--sp-8)}
.foot-brand p{max-width:300px;margin-top:16px;font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.foot h2,.foot h4,.foot .foot-h{margin:4px 0 14px;font-size:13.5px;font-weight:600;letter-spacing:0;color:var(--text)}
.foot ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.foot li a{display:inline-flex;align-items:center;min-height:32px;font-size:var(--fs-sm);color:var(--text-2);text-decoration:none}
.foot li a:hover{color:var(--brace-2);text-decoration:underline;text-decoration-color:var(--brace-line)}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:var(--sp-9);padding-top:var(--sp-6);border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--text-3)}
.foot-bottom .co{flex:1 1 360px}
/* Badge +18 (obbligatorio nel footer: prodotto di dati, non servizio di gioco) */
.adult{display:inline-flex;align-items:center;gap:10px;color:var(--text-2)}
.adult b{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 9px;border:1.5px solid var(--text-2);border-radius:var(--r-pill);font:700 12px/1 var(--sans);letter-spacing:.02em;color:var(--text)}
.langs{display:inline-flex;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-pill)}
.langs a{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--text-3);text-decoration:none}
.langs a:hover{color:var(--text)}
.langs a[aria-current]{background:var(--surface-3);color:var(--text)}

/* ─── 25. AVVISO COOKIE E PULSANTE ASSISTENZA ──────────────────────────────── */
/* #cookienote: primo figlio del <body> dopo lo skip-link, nascosto con style="display:none"
   INLINE (mai una classe col nome riservato). Mentre è aperto: <html class="cn-open">. */
#cookienote{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:var(--z-fixed);display:flex;align-items:center;gap:14px;width:440px;max-width:calc(100vw - 40px);padding:12px 12px 12px 16px;border:1px solid var(--line-3);border-radius:14px;background:var(--surface-2);font-size:13.5px;line-height:1.5;color:var(--text-2)}
#cookienote>span,#cookienote>p{flex:1}
#cookienote a{color:var(--text)}
#cookienote .btn{flex:none}
/* Assistenza: icona + etichetta, SENZA mascotte. */
.ody-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:var(--z-fixed);display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px 0 15px;border:1px solid var(--line-3);border-radius:var(--r-pill);background:var(--surface-2);color:var(--text);font:600 14px/1 var(--sans);text-decoration:none;cursor:pointer}
.ody-fab:hover{border-color:var(--ctl);background:var(--surface-3);color:var(--text)}
.ody-fab .ic{width:18px;height:18px;color:var(--text-2)}
body.at-foot .ody-fab{opacity:0;pointer-events:none;transform:translateY(14px);visibility:hidden;transition-delay:0s,0s,.32s}

/* Mentre l'avviso è aperto la pagina si allunga della sua altezza (--cn-h, misurata
   dal JS con un ResizeObserver): in fondo footer, lingue e +18 restano cliccabili.
   Sul footer la tube sparisce e l'avviso scende al bordo. */
@media (max-width:760px){
  body.at-foot #cookienote{bottom:calc(12px + env(safe-area-inset-bottom))}
}
html.cn-open body{padding-bottom:calc(var(--cn-h,64px) + 40px + env(safe-area-inset-bottom))}
@media (max-width:760px){
  html.cn-open body{padding-bottom:calc(var(--cn-h,96px) + 24px + env(safe-area-inset-bottom))}
}
/* Desktop: l'avviso è una barra bassa a tutta larghezza, con lo stesso materiale
   dell'header (fondo scuro velato, filetto, nessun raggio né ombra): si legge come
   cornice del sito, non come una card sopra i contenuti. Il testo si allinea alla
   colonna del contenuto (.wrap) col solo padding. Mentre è aperta, il focus e le
   ancore si fermano sopra di lei (scroll-padding, WCAG 2.4.11) e l'assistenza si
   alza della sua altezza; dopo «Ho capito» ridiscende con la sua transizione. */
@media (min-width:761px){
  #cookienote{left:0;right:0;bottom:0;width:auto;max-width:none;gap:24px;padding:10px max(var(--gutter),calc((100% - var(--w)) / 2)) calc(10px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:rgba(11,10,9,.94);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
  html.cn-open body{padding-bottom:var(--cn-h,56px)}
  html.cn-open{scroll-padding-bottom:calc(var(--cn-h,56px) + 16px)}
  html.cn-open .ody-fab{transform:translateY(calc(-1 * var(--cn-h,56px)))}
  /* Accesso: il pannello laterale è sticky e scorre da sé, il padding del body lì
     non arriva; la card in fondo (.as-bottom) resta sopra la barra. */
  html.cn-open .auth-side{padding-bottom:calc(var(--cn-h,56px) + 28px)}
}

/* ─── 26. TOUR (Driver.js 1.8) ──────────────────────────────────────────────── */
/* Stili del vendor sovrascritti con selettori più specifici (html …): funziona in
   qualunque ordine di caricamento. driver({overlayColor:"#070605", overlayOpacity:.72,
   stagePadding:6, stageRadius:12, popoverClass:"odss-tour"}) */
html .driver-popover{box-sizing:border-box;min-width:260px;max-width:340px;padding:18px 18px 16px;border:1px solid var(--line-3);border-radius:14px;background:var(--surface-2);color:var(--text);font-family:var(--sans);box-shadow:none}
html .driver-popover-title{font:600 16px/1.35 var(--sans);letter-spacing:-.01em;color:var(--text)}
html .driver-popover-description{margin-top:6px;font:400 13.5px/1.55 var(--sans);color:var(--text-2)}
html .driver-popover-progress-text{font:400 12px/1 var(--mono);color:var(--text-3)}
html .driver-popover-footer{margin-top:16px;gap:10px}
html .driver-popover-footer-btn{display:inline-flex;align-items:center;height:32px;padding:0 13px;border:1px solid var(--line-3);border-radius:var(--r-pill);background:transparent;color:var(--text);font:600 13px/1 var(--sans);text-shadow:none}
html .driver-popover-footer-btn:hover,html .driver-popover-footer-btn:focus{background:var(--surface-3);color:var(--text)}
html .driver-popover-footer-btn:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-o)}
html .driver-popover-next-btn{border-color:transparent;background:var(--brace);color:var(--on-brace)}
html .driver-popover-next-btn:hover,html .driver-popover-next-btn:focus{background:var(--brace-hover);color:var(--on-brace)}
html .driver-popover-close-btn{width:32px;height:32px;color:var(--text-3)}
html .driver-popover-close-btn:hover,html .driver-popover-close-btn:focus{color:var(--text)}
html .driver-popover-arrow{border-width:6px}
html .driver-popover-arrow-side-left{border-left-color:var(--surface-2)}
html .driver-popover-arrow-side-right{border-right-color:var(--surface-2)}
html .driver-popover-arrow-side-top{border-top-color:var(--surface-2)}
html .driver-popover-arrow-side-bottom{border-bottom-color:var(--surface-2)}
html .driver-active-element{outline:2px solid var(--focus);outline-offset:4px}

/* ─── 27. UTILITÀ ───────────────────────────────────────────────────────────── */
/* I colori di utilità vincono sui componenti (es. una cella di .tbl): !important voluto */
.text{color:var(--text) !important} .text-2{color:var(--text-2) !important} .text-3{color:var(--text-3) !important}
.t-good{color:var(--good) !important} .t-warn{color:var(--warn) !important} .t-err{color:var(--err) !important}
.nowrap{white-space:nowrap} .center{text-align:center} .right{text-align:right}
.fw-5{font-weight:500} .fw-6{font-weight:600}
.mt-0{margin-top:0} .mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mt-7{margin-top:var(--sp-7)} .mt-8{margin-top:var(--sp-8)} .mt-9{margin-top:var(--sp-9)}
.ml-auto{margin-left:auto}
.w-full{width:100%}
/* Icone dello sprite: <svg class="ic" aria-hidden="true"><use href="/icons.svg#i-key"/></svg> */
.ic{display:inline-block;flex:none;width:18px;height:18px;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:15px;height:15px}
.ic-lg{width:22px;height:22px}
.ic-2{stroke-width:2.1}

/* ─── 28. MEDIA: layout responsivo, touch, motion, contrasto, stampa ──────── */
@media (max-width:1180px){
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:1100px){
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app{grid-template-columns:minmax(0,1fr);background:none}
  .sb{display:none}
  .m-brand{display:inline-flex}
  .subnav{position:sticky;top:64px;z-index:calc(var(--z-nav) - 1);display:flex;gap:6px;padding:8px var(--gutter);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);background:rgba(11,10,9,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .subnav::-webkit-scrollbar{display:none}
}
@media (max-width:900px){
  .nav-links{display:none}
  .cols-2{grid-template-columns:minmax(0,1fr)}
  .sec-head.split{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
}
@media (max-width:760px){
  :root{--nav-h:58px}
  .cols-3,.cols-4{grid-template-columns:minmax(0,1fr)}
  .span-2{grid-column:auto}
  .nav-in{gap:12px}
  .nav-right .lang,.nav-right .nav-login,.nav-right .status-pill{display:none}
  .card{padding:18px 16px}
  .card-f{margin:var(--sp-4) -16px -18px;padding:14px 16px}
  .metric{padding:16px 18px}
  .metric+.metric{border-left:0}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics .metric:nth-child(odd):not(:last-child){border-right:1px solid var(--line)}
  .metrics .metric:nth-child(n+3){border-top:1px solid var(--line)}
  .metrics .metric:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
  /* Tube: barra fissa in basso, 5 voci con etichetta, tocco ≥ 52 px, safe-area */
  .tube{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tube);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2);background:rgba(15,13,11,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  body.hero-cta .tube{opacity:0;pointer-events:none;transform:translateY(110%);visibility:hidden;transition-delay:0s,0s,.32s}
  body.at-foot .tube{opacity:0;pointer-events:none;transform:translateY(110%);visibility:hidden;transition-delay:0s,0s,.32s}
  body.has-tube,body:has(>.tube){padding-bottom:calc(var(--tube-h) + env(safe-area-inset-bottom))}
  html:has(.tube){scroll-padding-bottom:calc(var(--tube-h) + 16px)}
  /* Cookie e assistenza sopra la tube; mai sopra le CTA dell'hero; mai insieme */
  #cookienote{left:12px;right:12px;width:auto;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom));font-size:13px;padding:10px 10px 10px 14px}
  body.has-tube #cookienote,body:has(>.tube) #cookienote{bottom:calc(var(--tube-h) + 10px + env(safe-area-inset-bottom))}
  body.hero-cta #cookienote{opacity:0;pointer-events:none;transform:translateY(16px);visibility:hidden;transition-delay:0s,0s,.32s}
  .ody-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:48px;height:48px;padding:0;justify-content:center}
  body.has-tube .ody-fab,body:has(>.tube) .ody-fab{bottom:calc(var(--tube-h) + 10px + env(safe-area-inset-bottom))}
  .ody-fab .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  html.cn-open .ody-fab,#cookienote:not([hidden]):not([style*="none"])~.ody-fab,body.hero-cta .ody-fab{opacity:0;pointer-events:none;transform:translateY(14px);visibility:hidden;transition-delay:0s,0s,.32s}
  .toasts{left:12px;right:12px;width:auto;align-items:stretch;bottom:calc(12px + env(safe-area-inset-bottom))}
  body.has-tube .toasts,body:has(>.tube) .toasts{bottom:calc(var(--tube-h) + 10px + env(safe-area-inset-bottom))}
  /* Tabelle a schede: <table class="tbl tbl-stack"> + etichetta .tbl-l nelle celle (vedi §10) */
  .tbl-stack thead{display:none}
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:auto}
  .tbl-stack tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .tbl-stack tbody tr:last-child{border-bottom:0}
  .tbl-stack td{padding:3px 0 !important;border:0 !important;text-align:left}
  .tbl-stack td.r{text-align:left}
  .tbl-stack .tbl-l{display:inline-block;min-width:112px;margin-right:8px;font-size:12.5px;color:var(--text-3);font-family:var(--sans);font-weight:400}
  .tbl-boxed .tbl-stack tr{padding-inline:16px}
  /* Pannello codice: la risposta scorre in orizzontale con una sfumatura */
  .code-top .code-act{margin-left:0;width:100%;justify-content:space-between}
  .code-pane{padding:14px 16px 16px}
  .code-foot{padding:10px 16px}
  .code-foot .aside{margin-left:0;width:100%}
  .code pre{font-size:11.5px}
  .code pre.fade{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);padding-right:24px}
  .acc-b{padding-right:0}
  .acc-q{font-size:16px}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7) var(--sp-6)}
  .site-foot{padding-top:var(--sp-9)}
  .app-top{height:56px;padding:0 12px 0 16px;gap:8px}
  .subnav{top:56px}
  .search{width:44px;height:44px;padding:0;justify-content:center;flex:none}
  .search .kbds{display:none}
  .search .lbl,.user-btn .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .app-top .status-pill{padding:0 10px;height:40px}
  .app-top .status-pill .mono{display:none}
  .user-btn{padding:0 4px;height:44px}
  .user-btn .ic{display:none}
  .meter-ax .at-t{display:none}
  .app-content{padding:20px 16px 56px}
  .ph{flex-direction:column;align-items:stretch;gap:16px}
  .ph-act .btn{flex:1}
  .fgrid.c2,.fgrid.c3{grid-template-columns:minmax(0,1fr)}
  .dlg-h{padding:18px 16px 0}
  .dlg-b{padding:16px}
  .dlg-f{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .dlg-f .btn{flex:1 1 140px}
}
/* Area clienti sotto i 390 px (320/360/375): la pillola dello stato mostra solo il
   pallino, così l'avatar con «Esci» resta nello schermo in ogni lingua. Il testo
   resta nel DOM come nome del link verso /status. */
@media (max-width:389px){
  .app-top .status-pill{position:relative;width:44px;padding:0;justify-content:center;flex:none}
  .app-top .status-pill b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:560px){
  /* Dialog come foglio dal basso */
  .dlg,.dlg-lg{width:100%;max-width:100%;max-height:calc(100dvh - 24px);margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
  @keyframes dlg-in{from{opacity:.4;transform:translateY(40px)}to{opacity:1;transform:none}}
  #cookienote{flex-wrap:wrap}
  #cookienote .btn{margin-left:auto}
}
/* Touch e telefoni: controlli di testo a 16 px (niente zoom al focus su iOS).
   Anche le varianti .mono e .input-sm, che altrimenti vincerebbero per specificità. */
@media (max-width:760px),(pointer:coarse){
  .input,.select,.textarea,.ctl input,.ctl select,.lang select,.pal-in input,input,select,textarea,
  .input.mono,.textarea.mono,.select.mono,.input-sm,.select.input-sm{font-size:16px}
  .input-sm,.select.input-sm{height:44px}
  .seg>button,.seg>a{min-height:40px}
  .tab{min-height:44px}
  .check{padding-block:10px}
  .check+.check{margin-top:0}
}
/* Aree di tocco da 44 px anche nel box (non solo nell'area estesa ::after) */
@media (max-width:760px),(pointer:coarse){
  .btn-sm{height:44px}
  .btn-icon.btn-sm{width:44px;height:44px}
  .langs a{height:44px;min-width:44px;justify-content:center}
  .alink{min-height:44px}
  .foot ul{gap:0}
  .foot li a{min-height:44px;min-width:44px}
}
/* Senza JavaScript nessuno toglie hero-cta dal body: la tube resta visibile */
@media (scripting:none){
  body.hero-cta .tube{opacity:1;pointer-events:auto;transform:none;visibility:visible}
}

@media (hover:none){
  .tip:hover .tip-b{opacity:0;visibility:hidden}
  .tip:focus-within .tip-b{opacity:1;visibility:visible}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .halo::before,.sk{animation:none !important}
  .lv-dot::after,.lv-ic *,.lv-beat *,.lv-field-d{animation:none !important;transition:none !important}
}
@media (prefers-contrast:more){
  :root{--text-2:#ddd4c6;--text-3:#b9ae9f;--line:#3a332b;--line-2:#4d443a;--ctl:#968b7e}
  body::before{display:none}
}
@media (forced-colors:active){
  .btn,.btn-icon,.opt,.seg,.input,.select,.textarea,.ctl,.card,.dlg,.alert,.toast,.badge{border:1px solid CanvasText}
  .dot,.meter-fill,.fscale-f{forced-color-adjust:none}
  body::before{display:none}
}
@media print{
  :root{--bg:#fff;--bg-1:#fff;--surface:#fff;--surface-2:#f3f3f3;--text:#000;--text-2:#222;--text-3:#444;--line:#ccc;--line-2:#bbb;--acc:#000}
  body{background:#fff;color:#000}
  body::before,.site-nav,.tube,.ody-fab,#cookienote,.toasts,.sb,.app-top,.subnav,.halo,.skip{display:none !important}
  .app{display:block;background:none}
  .card,.code,.tbl-boxed{break-inside:avoid;border-color:#bbb}
  a{color:#000}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  pre{white-space:pre-wrap}
}

/* ─── 29. PAGINE SATELLITE: testata, schede «Trasparenza», sezioni, elenchi ─── */
/* Status, SLA, Dati, Surebet API. Testata .phero (+ .trustnav a schede), sezioni
   .sat-sec con titolo a sinistra (.sat-side) e testo a destra (.sat-body), elenchi
   .pts (varianti .two, .rule, .tiles), nota .verify, comando <pre class="cmd-c">. */
.nav-main{display:flex;align-items:center;min-width:0}
.status-pill[aria-current]{border-color:var(--line-3);color:var(--text)}
.langs-in{display:contents}
.phero{position:relative;padding-top:clamp(28px, 1.6rem + 1.4vw, 48px)}
.trustnav{margin-bottom:clamp(28px, 1.4rem + 1.6vw, 44px)}
.trustnav .tab .ic{color:var(--text-3)}
.trustnav .tab[aria-current] .ic{color:var(--text)}
.phero h1{max-width:900px;font-size:var(--fs-1);line-height:1.08;letter-spacing:-.032em}
.phero .lede{margin-top:16px;max-width:720px}
.phero .eyebrow+h1{margin-top:14px}
.sat-sec{padding-block:clamp(44px, 2rem + 2.6vw, 80px)}
.sat-sec+.sat-sec:not(.band){border-top:1px solid var(--line)}
.sat-2col{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px, 1rem + 3vw, 72px);align-items:start}
.sat-side{position:sticky;top:calc(var(--nav-h) + 24px)}
.sat-side h2{font-size:var(--fs-2)}
.sat-side .eyebrow{margin-bottom:12px}
.sat-side p{margin-top:12px;font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.sec-head.split .lede{margin-top:14px}
/* Un solo bordo destro: le SCATOLE (card, tabelle, griglie, filetti) arrivano al
   bordo del .wrap come la striscia dei numeri e il footer; il TESTO corrente
   resta alla sua misura di lettura (--w-read). Nei .pts.rule il filetto va al
   bordo e il testo si ferma a --w-read; la nota .verify (una riga o due) è una
   scatola e va al bordo anche lei. */
.sat-body{min-width:0}
.sat-body>p{max-width:var(--w-read)}
.sat-body>.contact>p{flex:1 1 320px;max-width:64ch}
.sat-body>.pts.rule>li{padding-inline-end:max(0px, calc(100% - var(--w-read)))}
.sat-body>*+*{margin-top:18px}
.sat-body p,.sat-body li{color:var(--text-2);line-height:1.7}
.sat-body b{color:var(--text)}
.sat-sm{font-size:var(--fs-sm)}
.pts{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.pts>li{position:relative;padding:16px 18px 16px 48px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:15px;line-height:1.65;color:var(--text-2)}
.pts>li::before{content:"";position:absolute;left:18px;top:21px;width:16px;height:16px;background:var(--text-3);-webkit-mask:var(--pt-ic) center/16px no-repeat;mask:var(--pt-ic) center/16px no-repeat}
.pts{--pt-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E")}
.pts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pts>li b:first-child{display:block;margin-bottom:2px;color:var(--text);font-weight:600}
.pts.rule{gap:0}
.pts.rule>li{padding:18px 0 18px 34px;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.pts.rule>li:last-child{border-bottom:1px solid var(--line)}
.pts.rule>li::before{left:2px;top:23px}
.pts.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.pts.tiles>li{padding:18px;font-size:14.5px;line-height:1.55}
.pts.tiles>li::before{position:static;display:block;width:20px;height:20px;margin-bottom:14px;background:var(--text-2);-webkit-mask-size:20px;mask-size:20px}
.verify{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:14px 16px;border:1px dashed var(--line-3);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.65;color:var(--text-2)}
.verify>.ic{width:17px;height:17px;margin-top:3px;color:var(--text-3)}
.cmd .btn-icon .sr{position:absolute}
.cmd .cmd-c{flex:1;min-width:0;margin:0;overflow-x:auto;font:inherit;line-height:1;color:inherit;white-space:nowrap;scrollbar-width:none}
.cmd .cmd-c::-webkit-scrollbar{display:none}
.cmd .cmd-c code{display:inline}
.cmd .btn-icon[data-done] .ic{color:var(--good)}
@media (max-width:900px){
  .sat-2col{grid-template-columns:minmax(0,1fr)}
  .sat-side{position:static}
  .pts.two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pts.tiles{grid-template-columns:minmax(0,1fr)}
  .pts.tiles>li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 14px;align-items:start}
  .pts.tiles>li::before{margin:1px 0 0;grid-row:1 / span 2}
}
@media (max-width:760px){
  .pts>li{padding:14px 14px 14px 42px;font-size:14.5px}
  .pts>li::before{left:15px;top:19px}
  .pts.rule>li{padding:16px 0 16px 30px}
  .pts.rule>li::before{left:1px;top:20px}
}
@media (max-width:760px),(pointer:coarse){
  .site-nav .brand,.site-foot .brand{position:relative}
  .site-nav .brand::after,.site-foot .brand::after{content:"";position:absolute;inset:-10px -6px}
}
@media (max-width:560px){
  .trustnav{gap:0}
  .trustnav .tab{padding:0 10px}
  .trustnav .tab .ic{display:none}
}

/* ─── 30. SATELLITI: menu del telefono, briciole ─────────────────────────────── */
/* Pagine SEO (quote-bookmaker-italiani, odds-api-italy), Termini, Privacy, Recesso:
   <details class="nav-menu"> con il foglio .nav-sheet sotto i 960 px; .crumbs. */
.site-nav details{position:relative}
.site-nav summary{list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.site-nav summary::-webkit-details-marker{display:none}
.nav-menu{display:none}
.nav-menu>summary{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-3);border-radius:var(--r-md);color:var(--text)}
.nav-menu>summary:hover,.nav-menu[open]>summary{border-color:var(--ctl);background:var(--surface)}
.nav-menu>summary .ic{width:20px;height:20px}
.nav-menu>summary .ic-close,.nav-menu[open]>summary .ic-open{display:none}
.nav-menu[open]>summary .ic-close{display:inline-block}
.nav-sheet{position:absolute;top:calc(100% + 10px);right:0;z-index:var(--z-pop);width:min(320px,calc(100vw - 24px));max-height:calc(100vh - var(--nav-h) - 24px);max-height:calc(100dvh - var(--nav-h) - 24px);overflow:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--surface-2)}
.sheet-g{margin:0;padding:4px 0;list-style:none}
.sheet-g+.sheet-g{border-top:1px solid var(--line-2)}
.nav-sheet .menu-i .ic{width:18px;height:18px}
.nav-sheet .menu-i .dot{margin:0 5px}
.nav-sheet .menu-k{font-family:var(--sans);font-size:13px;color:var(--text-2)}
.nav-sheet .langs{display:flex;margin:2px 4px 6px}
.nav-sheet .langs a{flex:1 1 0;justify-content:center}
.sheet-st,.sheet-lang{display:none}
.sheet-lang[hidden]{display:none !important}
@media (max-width:960px){
  .nav-menu{display:block}
}
@media (max-width:760px){
  .sheet-st{display:list-item}
  .sheet-lang{display:block}
}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--text-3)}
.crumbs li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.crumbs li+li::before{content:"/";color:var(--text-4)}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--ctl)}
@media (max-width:760px),(pointer:coarse){
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .nav-menu>summary{width:44px;height:44px}
}

/* ─── 31. DOCUMENTI LUNGHI (Termini, Privacy) ─────────────────────────────────── */
/* Indice laterale sticky (.doc-aside > .toc), indice a tendina sotto i 1000 px (.toc-m),
   colonna di lettura a 68ch. Le regole sul contenuto (.doc …) restano nelle pagine:
   la classe .doc ha un altro significato nella landing. */
.legal-main{padding:32px 0 var(--sp-10)}
.doc-grid{display:grid;grid-template-columns:236px minmax(0,68ch);justify-content:center;gap:clamp(40px,7vw,112px);align-items:start;font-size:1.0625rem}
.doc-aside{position:sticky;top:calc(var(--nav-h) + 32px);max-height:calc(100vh - var(--nav-h) - 56px);max-height:calc(100dvh - var(--nav-h) - 56px);overflow:auto;padding:4px 4px 8px 0;scrollbar-width:thin;overscroll-behavior:contain}
.toc-h{margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--text)}
.toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line-2)}
.toc a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px;margin-left:-1px;padding:6px 8px 6px 14px;border-left:2px solid transparent;font-size:13.5px;line-height:1.4;color:var(--text-2);text-decoration:none}
.toc a:hover{color:var(--text)}
.toc a[aria-current]{border-left-color:var(--text);color:var(--text)}
.toc .n{font:500 12px/1.45 var(--mono);color:var(--text-3)}
.toc a[aria-current] .n{color:var(--text-2)}
.doc-rel{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.doc-rel ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.doc-rel a{display:inline-flex;align-items:center;min-height:34px;font-size:13.5px;color:var(--text-2);text-decoration:none}
.doc-rel a:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--ctl)}
.doc-rel a[aria-current]{color:var(--text);font-weight:500}
.doc-col{min-width:0;font-size:1.0625rem}
.doc-head{padding-bottom:28px;border-bottom:1px solid var(--line)}
.doc-head .crumbs{margin-bottom:28px}
.doc-head h1{letter-spacing:-.03em}
.doc-sub{margin-top:14px;font-size:var(--fs-lead);line-height:1.6;color:var(--text-2)}
.doc-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:24px}
.doc-langs{display:flex;align-items:center;gap:12px}
.doc-langs .lbl{font-size:13px;color:var(--text-3)}
.toc-m{margin-top:20px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-1)}
.toc-m>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 16px;list-style:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--text);border-radius:var(--r-md)}
.toc-m>summary::-webkit-details-marker{display:none}
.toc-m>summary .ic{width:18px;height:18px;color:var(--text-2);transition:transform var(--dur-2) var(--ease)}
.toc-m[open]>summary .ic{transform:rotate(180deg)}
.toc-m ol{margin:0;padding:6px 6px 10px;list-style:none;border-top:1px solid var(--line)}
.toc-m a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px;align-items:center;min-height:44px;padding:4px 10px;border-radius:8px;font-size:15px;line-height:1.35;color:var(--text-2);text-decoration:none}
.toc-m a:hover{background:var(--surface);color:var(--text)}
.toc-m .n{font:500 12.5px/1 var(--mono);color:var(--text-3)}
.doc-end{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:1000px){
  .doc-grid{grid-template-columns:minmax(0,68ch)}
  .doc-aside{display:none}
}
@media (min-width:1001px){
  .toc-m{display:none}
}
@media (max-width:760px){
  .doc-grid{grid-template-columns:minmax(0,1fr);font-size:1rem}
  .legal-main{padding-top:18px}
  .doc-head .crumbs{margin-bottom:20px}
  .doc-col{font-size:1rem}
  .doc-tools .btn{flex:1 1 auto}
}
@media (pointer:coarse){
  .toc a{padding-block:11px}
  .doc-rel a{min-height:44px}
}
@media print{
  .doc-grid{display:block}
  .doc-col{max-width:none}
  .legal-main{padding:0}
}

/* ─── 32. PIANI: configuratore Enterprise, dichiarazione d'uso, licenza ───────
   Comuni al listino della home e alla sezione Piano dell'area account (la
   logica sta in /piani.js). Cursore con etichetta e valore: <div class="sl-h">
   <label>…</label><span class="sl-v"><output>…</output><span class="add">+30 €
   </span></span></div> + <input class="rng"> + <div class="sl-p">. La licenza
   Display è una .choice.ent-saas; la dichiarazione d'uso un riquadro .ent-decl
   con .decl-grid di .dfield e un .dradio; le due spunte della Licenza un
   .lic-acc (classe .err sul contenitore quando ne manca una). */
.sl-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.sl-h label{font-size:15px;font-weight:500;color:var(--text)}
.sl-v{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap}
.sl-v output{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.sl-v .add{font:400 12.5px/1 var(--mono);color:var(--text-3)}
.sl-p{margin-top:8px;font-size:13px;color:var(--text-3)}
.ent-saas{cursor:default}
.ent-saas>label{font-size:15px;font-weight:600;line-height:1.35;color:var(--text);cursor:pointer}
.ent-saas>.choice-d{grid-column:2 / -1;margin-top:0}
.ent-saas .choice-d b{display:inline;font-size:inherit;font-weight:600}
.ent-saas .choice-d a{white-space:nowrap}
.ent-decl,.sb-decl{gap:14px;padding:18px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-1)}
.ent-decl .dhead,.sb-decl .dhead{margin:0;font-size:14.5px;font-weight:600;color:var(--text)}
.ent-decl .dnote,.sb-decl .dnote{font-size:13.5px;color:var(--text-2)}
.decl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* :not(.field-err): l'errore scritto sotto il campo (piani.js) è uno <span> nella
   <label>, e senza l'esclusione avrebbe l'aspetto grigio dell'etichetta */
.dfield>span:not(.field-err){display:block;margin-bottom:7px;font-size:13.5px;font-weight:500;color:var(--text-2)}
.dfield.err .input{border-color:var(--err)}
.dradio{margin:0;padding:0;border:0;min-width:0}
.dradio legend{margin-bottom:8px;padding:0;font-size:13.5px;font-weight:500;color:var(--text-2)}
.dradios{display:flex;flex-wrap:wrap;gap:8px 22px}
.dradios .check{grid-template-columns:20px auto;color:var(--text)}
.dradios .check+.check{margin-top:0}
.dradio.err legend{color:var(--err)}
.dradio.err .rd{border-color:var(--err)}
.lic-acc{display:grid;gap:12px}
.lic-acc .check{font-size:13.5px}
.lic-acc.err .cb:not(:checked){border-color:var(--err)}
/* «Prima del pagamento» (dialog): per chi è l'acquisto, richiesta di avvio */
.dlg .choices{margin-top:4px}
#buy-cons,#buy-biz{margin-top:4px}
.buy-alt{margin-top:12px;font-size:13.5px;color:var(--text-2)}
@media (max-width:760px){
  .decl-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px),(pointer:coarse){
  .dradios .check{padding-block:10px;min-height:44px;align-items:center}
}

/* ─── 33. MOVIMENTO E DATI LIVE (live.js; guida §13) ───────────────────────────
   Si muove solo ciò che è arrivato. Proprietà ammesse: transform, opacity,
   color, background-color, stroke-dashoffset. Mai blur, filter, box-shadow,
   glow o gradienti animati. Il respiro è un ANELLO di 1 px, non un alone. */
/* Un solo movimento ambientale per schermata: con il respiro attivo l'alone si ferma */
html.lv-breathing .halo::before{animation:none}
number-flow-group{display:contents}
number-flow{font-variant-numeric:tabular-nums}
/* <number-flow> è più alto del testo: la maschera delle cifre aggiunge sopra e
   sotto 2 × round(mask-height / 2) (0,25em col default) e abbassa le cifre
   rispetto al testo semplice della tessera accanto (≈10 px a 40 px). Il margine
   negativo è lo STESSO calcolo della libreria col segno opposto: il box torna
   alto 1em e le cifre che rotolano stanno sulla linea del testo e del «—».
   Se si cambia versione di NumberFlow, va ricontrollato. */
.metric .v number-flow{margin-block:calc(-2 * round(nearest, calc(var(--number-flow-mask-height, .25em) / 2), 1px))}
/* stessa distanza cifra→etichetta con o senza rotolamento (e col «—» d'attesa) */
html.lv-js .metric .v{min-height:1.25em}

/* Pallino live: data-st = good | warn | err | off; data-live = a | b (respiro,
   il nome cambia a ogni snapshot nuovo e riallinea il ciclo al dato) */
.lv-dot{position:relative}
.lv-dot[data-st="good"]{background:var(--good)}
.lv-dot[data-st="warn"]{background:var(--warn)}
.lv-dot[data-st="err"]{background:var(--err)}
.lv-dot[data-st="off"]{background:var(--text-3)}
.lv-dot::after{content:"";position:absolute;inset:-1px;border:1px solid;border-color:inherit;border-radius:50%;opacity:0;pointer-events:none}
.lv-dot[data-st="good"]::after{border-color:var(--good)}
.lv-dot[data-st="warn"]::after{border-color:var(--warn)}
@media (prefers-reduced-motion:no-preference){
  html:not(.lv-paused) .lv-dot[data-live="a"]::after{animation:lv-breath-a var(--dur-breath) var(--ease) infinite}
  html:not(.lv-paused) .lv-dot[data-live="b"]::after{animation:lv-breath-b var(--dur-breath) var(--ease) infinite}
  html:not(.lv-paused) .lv-dot[data-pulse="a"]::after{animation:lv-breath-a var(--dur-pulse) var(--ease) 1}
  html:not(.lv-paused) .lv-dot[data-pulse="b"]::after{animation:lv-breath-b var(--dur-pulse) var(--ease) 1}
}
@keyframes lv-breath-a{0%{transform:scale(1);opacity:var(--breath-alpha)}52%,100%{transform:scale(var(--breath-scale));opacity:0}}
@keyframes lv-breath-b{0%{transform:scale(1);opacity:var(--breath-alpha)}52%,100%{transform:scale(var(--breath-scale));opacity:0}}

/* Età della misura: testo con cifre tabulari, aggiornato dall'orologio */
.lv-age{font-variant-numeric:tabular-nums;white-space:nowrap}
.lv-age[data-lv="warn"]{color:var(--warn)}
.lv-age[data-lv="err"]{color:var(--err)}

/* Glifo ▲▼ accanto a un valore cambiato (sempre insieme al valore, mai il solo colore) */
.lv-g{display:inline-block;width:.8em;font-size:.72em;font-style:normal;color:var(--text-2);opacity:0;transition:opacity var(--dur-3)}
.lv-g.is-on{opacity:1}
.is-fl{background-color:var(--flash)}

/* Battito della freschezza: dente di sega dell'età dello snapshot */
.lv-beat{position:relative;height:48px;border-bottom:1px solid var(--line-2)}
.lv-beat-c{position:absolute;top:0;right:12px;bottom:0;left:0;overflow:hidden}
.lv-beat-s{position:absolute;left:0;top:0;display:block}
.lv-beat-a{fill:var(--area-live);stroke:none}
.lv-beat-l{fill:none;stroke:var(--line-live);stroke-width:1.5;stroke-linejoin:round}
.lv-beat-g{fill:none;stroke:rgba(237,230,218,.4);stroke-width:1.5;stroke-linejoin:round;opacity:0}
.lv-beat-tip{position:absolute;top:0;right:8.5px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--good)}
.lv-beat-tip[data-lv="warn"]{background:var(--warn)}
.lv-beat-tip[data-lv="err"]{background:var(--err)}
.lv-beat[data-empty]::after{content:attr(data-empty-l);position:absolute;left:0;bottom:8px;font:400 var(--fs-mono-sm)/1 var(--mono);color:var(--text-3)}
.lv-hh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;margin:0 0 8px;font-size:var(--fs-xs);color:var(--text-2)}
.lv-hh .ic{margin-right:6px;vertical-align:-3px;color:var(--text-3)}
.lv-mono{font:400 var(--fs-mono-sm)/1.3 var(--mono);color:var(--text-3);font-variant-numeric:tabular-nums}

/* Campo dei book: un punto per book, x = età/600 s, 4 corsie */
.lv-field{position:relative;height:76px;border-bottom:1px solid var(--line-2)}
.lv-field-l{position:absolute;inset:0 3.5px}
.lv-field-d{position:absolute;left:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--good);transition:background-color var(--dur-3)}
.lv-field-d.is-rr{transition:transform var(--dur-correct) var(--ease),background-color var(--dur-3)}
.lv-field-d[data-lv="warn"]{background:var(--warn)}
.lv-field-d[data-lv="err"]{background:var(--err)}
.lv-field-mk{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--line-3);opacity:.6}
.lv-field-mk span{position:absolute;top:0;left:4px;font:400 11px/1 var(--mono);color:var(--text-3)}
.lv-ax{display:flex;justify-content:space-between;margin-top:6px}
.lv-lg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.lv-lg i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:0}

/* Quote d'ESEMPIO: tabella neutra, lampo avorio, ▲▼ in --text-2, sparkline a gradini */
.lv-ex{font:400 var(--fs-mono-sm)/1.3 var(--mono);color:var(--warn)}
.lv-tk{width:100%;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lv-tk th{padding:0 0 6px;font:400 11.5px/1 var(--mono);color:var(--text-3);text-align:right}
.lv-tk th:first-child{text-align:left}
.lv-tk td{padding:5px 0;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.lv-tk td:first-child{overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:13px;color:var(--text-2)}
.lv-q{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:2px;padding:2px 4px;border-radius:5px;font:400 13px/1.2 var(--mono);color:var(--text)}
.lv-spark{display:block;width:44px;height:16px;margin-left:auto;overflow:visible}
.lv-spark path{fill:none;stroke:var(--spark);stroke-width:1.25;stroke-linejoin:round}
.lv-spark circle{fill:var(--text)}

@media (max-width:479px){.lv-spark{display:none}}
@media (max-width:599px){.lv-field-d{width:5px;height:5px;margin-left:-2.5px}}
/* Nastro degli aggiornamenti: righe in grid, la nuova entra in cima */
.lv-log{display:grid;gap:0;margin:0;padding:0;list-style:none;overflow:hidden}
.lv-log>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-2)}
.lv-log>li:first-child{border-top:0}
.lv-log time{font:400 var(--fs-mono-sm)/1.3 var(--mono);color:var(--text-3);font-variant-numeric:tabular-nums}
.lv-log>li[data-k="err"] b{color:var(--err);font-weight:500}
.lv-log>li[data-k="good"] b{color:var(--good);font-weight:500}
.lv-log>li[data-k="warn"] b{color:var(--warn);font-weight:500}
.lv-log>li[data-k="err"] .lv-ic{width:15px;height:15px;margin-right:6px;vertical-align:-3px;color:var(--err)}

/* Barre delle 24 ore: neutre quando va bene, ambra/rosso solo se c'è un giudizio
   da dare (colore = giudizio). Si muove solo l'ultima, l'intervallo in corso. */
.lv-bars{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));gap:2px;align-items:end;height:64px;border-bottom:1px solid var(--line-2)}
.lv-bars>i{display:block;position:relative;min-height:2px;border-radius:2px 2px 0 0;background:var(--line-3);transform-origin:bottom}
.lv-bars>i:last-child{background:var(--text-3)}
.lv-bars>i[data-lv="warn"]{background:var(--warn)}
.lv-bars>i[data-lv="err"]{background:var(--err)}
.lv-bars>i[data-lv="none"]{background:var(--surface-3)}
.lv-bars>i>b{position:absolute;left:0;right:0;height:1.5px;margin-bottom:-1px;background:var(--text)}

/* uPlot (solo area clienti e console admin): il canvas riempie il riquadro del grafico */
.lv-uplot{position:absolute;inset:0}
.lv-uplot .uplot,.lv-uplot .u-wrap{width:100% !important}

/* Icone animate: solo su eventi veri */
.lv-ic{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.lv-ic-check path{stroke-dasharray:1;stroke-dashoffset:0}
.lv-ic-alert path:last-child{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .lv-ic-check path{animation:lv-draw var(--dur-3) var(--ease) both}
  .lv-ic-alert path:last-child{animation:lv-draw var(--dur-2) var(--ease) both}
}
@keyframes lv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Pausa: area di tocco 44 px su telefono (§28 porta già .btn-sm a 44) */
.lv-pause[aria-pressed="true"]{border-color:var(--ctl);color:var(--text)}

/* Ingresso delle sezioni, UNA volta: il contenuto è visibile di default (senza
   JS, in stampa, per i crawler); live.js aggiunge html.lv-reveal-on solo se il
   movimento è permesso, e marca le sezioni SOTTO la piega */
html.lv-reveal-on [data-lv-reveal]{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease)}
html.lv-reveal-on [data-lv-reveal].is-in{opacity:1;transform:none}
@media print{html.lv-reveal-on [data-lv-reveal]{opacity:1;transform:none}}
@media (forced-colors:active){.lv-dot,.lv-field-d,.lv-beat-tip,.lv-bars>i{forced-color-adjust:none}}