/* ===========================================================================
   Hub NSAI — foglio di stile
   Costruito sul linguaggio visivo di nsai.eu, non solo sui suoi colori:
   pillole chiare smerigliate, vetro scuro con bordo bianco sottile,
   riquadri-icona colorati, aloni ampi e morbidi.
   =========================================================================== */

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

/* 1.52.0 — la veste di NSAi OS, chiara e scura.
   Fino alla 1.51 l'Hub era solo scuro, a vetro e aloni. Adesso prende i colori
   dell'applicativo NSAi OS e segue il tema del Mac: chiaro di giorno, scuro di
   sera. I nomi dei colori sono rimasti quelli di prima, così ogni regola scritta
   in questi mesi continua a funzionare: cambia quello che c'è dentro. */
:root {
  /* fondo e riquadri */
  --guscio:       #E4DDF2;
  --fondo:        #F7F5FC;
  --fondo-2:      #FAF8FF;
  --vetro:        #FFFFFF;
  --vetro-alto:   #FAF8FF;
  --vetro-bordo:  rgba(29, 23, 48, .13);
  --vetro-bordo2: rgba(29, 23, 48, .075);
  --riempi:       #F3EFFB;

  /* i pulsanti chiari */
  --chiaro:       #FFFFFF;
  --chiaro-bordo: rgba(29, 23, 48, .16);
  --chiaro-hover: #F3EFFB;

  /* testo */
  --testo:        #1D1730;
  --testo2:       #4F4868;
  --testo3:       #77708F;
  --su-chiaro:    #1D1730;
  /* la pastiglia rovesciata: quella scelta in un gruppo di filtri */
  --inverso-fondo: #1D1730;
  --inverso-testo: #FFFFFF;

  /* l'inchiostro delle trasparenze: sul chiaro è scuro, sullo scuro è bianco */
  --ink:          29, 23, 48;
  --nero:         29, 23, 48;
  --nero-k:       .22;
  --nero-k-fondo: .10;

  /* accenti: il viola di NSAi OS */
  --viola:        #7A2BD6;
  --viola-2:      #7A2BD6;
  --viola-tenue:  rgba(122, 43, 214, .10);
  --arancio:      #F97316;
  --verde:        #12B886;
  --indaco:       #6366F1;
  --rosa:         #E8579B;
  --ambra:        #F59E0B;
  --rosso:        #E5484D;

  /* il colore del testo dentro le pastiglie colorate */
  --t-viola:      #6B22C4;
  --t-verde:      #0E7051;
  --t-rosso:      #B0243E;
  --t-ambra:      #8F5406;
  --t-blu:        #2F6FB3;
  --t-codice:     #5B1FA6;

  /* il menu scuro a sinistra (uguale nei due temi, come in NSAi OS) */
  --menu:         #16121F;
  --menu-testo:   #E9E3F5;
  --menu-tenue:   #A79FB8;
  --menu-bordo:   #2A2238;
  --accento:      #B36BFF;
  --accento-testo:#D4B4FF;
  --accento-fondo:rgba(179, 107, 255, .16);

  /* forme */
  --pillola:      50px;
  --r-card:       14px;
  --r-medio:      12px;
  --r-piccolo:    9px;
  --r-lastra:     18px;

  --ombra-pill:   0 1px 2px rgba(29, 23, 48, .06);
  --ombra-card:   0 1px 2px rgba(29, 23, 48, .05), 0 4px 14px -6px rgba(29, 23, 48, .10);
  --sfoca-pill:   none;
  --sfoca-card:   none;

  --f:      "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-tit:  "Sora", "Space Grotesk", system-ui, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --guscio: #07050D; --fondo: #0E0A1A; --fondo-2: #171226;
    --vetro: #171226; --vetro-alto: #1E1733;
    --vetro-bordo: rgba(255, 255, 255, .12); --vetro-bordo2: rgba(255, 255, 255, .07);
    --riempi: #221A3A;
    --chiaro: #221A3A; --chiaro-bordo: rgba(255, 255, 255, .16); --chiaro-hover: #2A2140;
    --testo: #ECE7F8; --testo2: #C2B9D8; --testo3: #8F86AB; --su-chiaro: #ECE7F8;
    --inverso-fondo: rgba(255, 255, 255, .92); --inverso-testo: #0E0A1A;
    --ink: 255, 255, 255; --nero: 0, 0, 0; --nero-k: 1; --nero-k-fondo: 1;
    --viola: #9544EB; --viola-2: #B36BFF; --viola-tenue: rgba(149, 68, 235, .16);
    --rosso: #F2555A;
    --t-viola: #CBA6F7; --t-verde: #5EE9B5; --t-rosso: #FF8A8D; --t-ambra: #FBBF5C;
    --t-blu: #7FB2FF; --t-codice: #D9C9F5;
    --menu: #0D0A14; --menu-bordo: #241D33;
    --ombra-pill: rgba(0, 0, 0, .5) 0 12px 34px -10px;
    --ombra-card: rgba(0, 0, 0, .6) 0 18px 40px -24px;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --guscio: #07050D; --fondo: #0E0A1A; --fondo-2: #171226;
  --vetro: #171226; --vetro-alto: #1E1733;
  --vetro-bordo: rgba(255, 255, 255, .12); --vetro-bordo2: rgba(255, 255, 255, .07);
  --riempi: #221A3A;
  --chiaro: #221A3A; --chiaro-bordo: rgba(255, 255, 255, .16); --chiaro-hover: #2A2140;
  --testo: #ECE7F8; --testo2: #C2B9D8; --testo3: #8F86AB; --su-chiaro: #ECE7F8;
  --inverso-fondo: rgba(255, 255, 255, .92); --inverso-testo: #0E0A1A;
  --ink: 255, 255, 255; --nero: 0, 0, 0; --nero-k: 1; --nero-k-fondo: 1;
  --viola: #9544EB; --viola-2: #B36BFF; --viola-tenue: rgba(149, 68, 235, .16);
  --rosso: #F2555A;
  --t-viola: #CBA6F7; --t-verde: #5EE9B5; --t-rosso: #FF8A8D; --t-ambra: #FBBF5C;
  --t-blu: #7FB2FF; --t-codice: #D9C9F5;
  --menu: #0D0A14; --menu-bordo: #241D33;
  --ombra-pill: rgba(0, 0, 0, .5) 0 12px 34px -10px;
  --ombra-card: rgba(0, 0, 0, .6) 0 18px 40px -24px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--f);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Gli aloni del sito: ampi, morbidi, mai a fuoco. Fissi, così restano
   dietro al contenuto mentre si scorre. */
body::before, body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
body::before {
  top: -380px; left: -240px;
  width: 1100px; height: 900px;
  background: radial-gradient(ellipse at center, rgba(149, 68, 235, .38), transparent 62%);
}
body::after {
  top: 40px; right: -420px;
  width: 1000px; height: 900px;
  background: radial-gradient(ellipse at center, rgba(124, 92, 252, .26), transparent 62%);
}
body > * { position: relative; z-index: 1; }

/* ===========================  intestazione  =============================== */

.barra {
  padding: 22px 24px 0;
  /* 1.17.1 — la testata sta SOPRA il contenuto.
     `body > * { z-index: 1 }` mette testata e contenuto sullo stesso piano, e
     a parità di piano vince chi viene dopo: il contenuto. Finché dalla
     testata non usciva niente non si vedeva; la tendina di chi sei, invece,
     spuntava sotto il primo riquadro della pagina. */
  position: relative; z-index: 50;
}
.barra-interno {
  max-width: 1220px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* la pillola chiara che contiene marchio e voci di menu */
.pillola-menu {
  display: flex; align-items: center; gap: 6px;
  background: var(--chiaro);
  border: 1px solid var(--chiaro-bordo);
  border-radius: var(--pillola);
  box-shadow: var(--ombra-pill);
  backdrop-filter: var(--sfoca-pill);
  -webkit-backdrop-filter: var(--sfoca-pill);
  padding: 8px 14px 8px 10px;
}
/* Il marchio, nella stessa costruzione dell'area clienti di NSAI OS:
   glifo quadrato + marchio su due righe. Stessi valori, così le due stanze si
   riconoscono come la stessa casa. */
.marchio {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; margin-right: 6px; flex: none;
}
/* Il quadratino esiste per un caso solo: nessuna icona quadrata da metterci
   dentro. Quando l'icona c'è, il contenitore sparisce e resta lei —
   incorniciare un marchio che ha già la sua forma vuol dire coprirlo. */
.glifo {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(150deg, #A55CF0, #7C3AED);
  display: grid; place-items: center;
  color: #fff; font-family: var(--f-tit); font-weight: 800; font-size: 12.5px; letter-spacing: -.02em;
  box-shadow: 0 8px 22px -6px rgba(149, 68, 235, .9);
  overflow: hidden; flex: none;
}
.glifo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.glifo-img { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.glifo-img b { display: none; }      /* le due lettere tornano se l'icona non carica */

.mk { display: flex; flex-direction: column; line-height: 1; }

/* La «i» a gradiente: la sfumatura sta sulla parola intera e viene ritagliata
   sul testo, così la lettera mostra la fetta che le tocca. «NSA» si riprende
   l'inchiostro con -webkit-text-fill-color, l'unica proprietà che vince su un
   testo ritagliato. */
.mk-r {
  font-family: var(--f-tit); font-size: 18px; font-weight: 700; letter-spacing: -.6px;
  background: linear-gradient(100deg, #7C3AED, #C026D3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mk-r .nsa { color: #1C1630; -webkit-text-fill-color: #1C1630; }
.mk small {
  display: block; margin-top: 5px;
  font-size: 8.6px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  background: linear-gradient(100deg, #7C3AED, #C026D3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pillola-menu nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.pillola-menu nav a {
  color: rgba(13, 10, 20, .74); text-decoration: none;
  padding: 6px 13px; border-radius: var(--pillola);
  font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  transition: background .16s, color .16s;
}
.pillola-menu nav a:hover { background: rgba(13, 10, 20, .07); color: var(--su-chiaro); }
.pillola-menu nav a.attivo { background: var(--viola); color: #fff; font-weight: 600; }

/* 1.14.0 — due mestieri, una barra sola. Dopo la linea c'è come l'Hub è messo
   insieme: si tocca una volta al mese, e sta in grigio perché non rubi l'occhio
   a quello che fai tutti i giorni. */
.pillola-menu nav a.tenue { color: rgba(13, 10, 20, .5); font-weight: 400; }
.pillola-menu nav a.tenue.attivo { color: #fff; font-weight: 600; }
.pillola-menu .separatore {
  width: 1px; height: 18px; background: rgba(13, 10, 20, .16); margin: 0 7px; flex: none;
}
/* Il numero compare solo quando c'è qualcosa: una voce che mostra sempre «0»
   smette di essere letta in una settimana. */
.pillola-menu nav a .conta {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: var(--pillola);
  font-size: 10.5px; font-weight: 800; background: rgba(242, 85, 90, .16); color: #C0332F;
}
.pillola-menu nav a.attivo .conta { background: rgba(var(--ink), .26); color: #fff; }
/* «Come si usa» è documentazione: si legge due volte in tutta la vita, e non
   può pesare come «Licenze». Resta raggiungibile, smette di gridare. */
.pillola-menu nav a.info {
  width: 24px; height: 24px; padding: 0; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid rgba(13, 10, 20, .22);
  font-family: var(--f-tit); font-weight: 700; font-size: 12.5px; color: rgba(13, 10, 20, .6);
}
.pillola-menu nav a.info:hover { background: rgba(13, 10, 20, .07); color: var(--su-chiaro); }
.pillola-menu nav a.info.attivo { background: var(--viola); border-color: var(--viola); color: #fff; }

/* la pillola a destra con l'utente */
.pillola-utente {
  margin-left: auto; position: relative;
  display: flex; align-items: center; gap: 14px;
  background: var(--vetro); border: 1px solid var(--vetro-bordo);
  border-radius: var(--pillola); box-shadow: var(--ombra-pill);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
  padding: 8px 18px; font-size: 13.5px; color: var(--testo2);
}
.pillola-utente strong { color: var(--testo); font-weight: 600; }
.pillola-utente a { color: var(--testo2); text-decoration: none; }
.pillola-utente a:hover { color: var(--testo); }

.contenuto { max-width: 1220px; margin: 0 auto; padding: 40px 24px 90px; }

/* ============================  tipografia  ================================ */

h1 {
  font-family: var(--f-tit);
  font-size: 34px; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.15; margin: 0 0 6px;
}
h2 { font-family: var(--f-tit); font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 16px; }
h3 { font-size: 15px; font-weight: 700; margin: 26px 0 8px; }

/* l'occhiello del sito: maiuscoletto spaziato sopra il titolo */
.occhiello {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--viola-2); margin: 0 0 10px;
}
.sottotitolo { color: var(--testo2); margin: 0 0 28px; font-size: 15px; max-width: 68ch; }
.titolo-riga {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 22px; flex-wrap: wrap; margin-bottom: 30px;
}
.titolo-riga h1 { margin-bottom: 0; }
.titolo-riga .sottotitolo { margin: 8px 0 0; }

/* ==========================  vetro e riquadri  ============================ */

.scheda {
  background: var(--vetro);
  border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-card);
  box-shadow: var(--ombra-card);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
  padding: 28px;
  margin-bottom: 22px;
}
.scheda.evidenza {
  border-color: rgba(149, 68, 235, .42);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(149, 68, 235, .20), transparent 58%),
    var(--vetro);
}
.vuoto {
  background: var(--vetro);
  border: 1px dashed rgba(var(--ink), .18);
  border-radius: var(--r-card);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
  padding: 58px 34px; text-align: center; color: var(--testo2);
}
.vuoto p { margin: 0 0 12px; max-width: 54ch; margin-left: auto; margin-right: auto; }
.vuoto strong { color: var(--testo); }

/* card statistica con riquadro-icona colorato, come le card dei servizi */
.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; margin-bottom: 26px; }
.riquadrino {
  display: flex; align-items: center; gap: 14px;
  background: var(--vetro); border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-card); box-shadow: var(--ombra-card);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
  padding: 15px 18px 15px 15px;
}
.icona {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: #fff;
  background: var(--viola);
  box-shadow: 0 6px 18px -6px rgba(var(--nero), calc(.8 * var(--nero-k)));
}
.icona.viola   { background: linear-gradient(150deg, #A55CF0, #7C3AED); }
.icona.arancio { background: linear-gradient(150deg, #FB923C, #EA580C); }
.icona.verde   { background: linear-gradient(150deg, #34D399, #059669); }
.icona.indaco  { background: linear-gradient(150deg, #818CF8, #4F46E5); }
.icona.rosa    { background: linear-gradient(150deg, #F472B6, #DB2777); }
.riquadrino .testi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.riquadrino .etichetta { font-size: 12.5px; color: var(--testo2); font-weight: 500; }
.riquadrino .valore {
  font-family: var(--f-tit); font-size: 19px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2;
}

/* =============================  messaggi  ================================= */

.messaggio {
  border-radius: var(--r-medio); padding: 16px 20px; margin-bottom: 20px;
  border: 1px solid; font-size: 14.5px;
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
}
.messaggio p { margin: 8px 0 0; }
.messaggio strong { font-weight: 700; }
.messaggio.buono      { background: rgba(18,184,134,.12); border-color: rgba(18,184,134,.42); color: var(--t-verde); }
.messaggio.errore     { background: rgba(242,85,90,.12);  border-color: rgba(242,85,90,.42);  color: var(--t-rosso); }
.messaggio.attenzione { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.40); color: var(--t-ambra); }
.messaggio.info       { background: rgba(149,68,235,.14); border-color: rgba(149,68,235,.44); color: var(--t-viola); }
.messaggio a { color: inherit; font-weight: 700; }

/* ==============================  moduli  ================================== */

.modulo { max-width: 700px; }
label { display: block; margin-bottom: 20px; font-weight: 600; font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=search], input[type=file],
select, textarea {
  display: block; width: 100%; margin-top: 8px;
  padding: 12px 16px; font-size: 14.5px; font-family: inherit; font-weight: 400;
  color: var(--testo); background: rgba(var(--ink), .05);
  border: 1px solid var(--vetro-bordo); border-radius: var(--r-medio);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input::placeholder, textarea::placeholder { color: var(--testo3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(149, 68, 235, .8);
  background: rgba(var(--ink), .07);
  box-shadow: 0 0 0 4px rgba(149, 68, 235, .18);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--ink), .5) 50%),
                    linear-gradient(135deg, rgba(var(--ink), .5) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 40px;
}
textarea { resize: vertical; line-height: 1.6; }
input[type=file] { padding: 11px 14px; cursor: pointer; }
input[type=file]::file-selector-button {
  background: var(--chiaro); color: var(--su-chiaro); border: 1px solid var(--chiaro-bordo);
  border-radius: var(--pillola); padding: 6px 16px; margin-right: 14px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.aiuto { display: block; margin-top: 7px; font-weight: 400; font-size: 12.5px; color: var(--testo2); }
.spiegazione { color: var(--testo2); font-size: 14.5px; margin: 0 0 18px; max-width: 72ch; }
.spiegazione strong { color: var(--testo); }
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.tre-colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
@media (max-width: 700px) { .due-colonne, .tre-colonne { grid-template-columns: 1fr; } }

.riga-casella { display: flex; align-items: flex-start; gap: 11px; font-weight: 400; }
.riga-casella input { width: auto; margin: 4px 0 0; accent-color: var(--viola); }
.casella-elenco {
  border: 1px solid var(--vetro-bordo); border-radius: var(--r-medio);
  padding: 16px 18px; margin-bottom: 20px; background: rgba(var(--ink), .04);
}
.casella-elenco .riga-casella { margin-bottom: 10px; }
.casella-elenco .riga-casella:last-child { margin-bottom: 0; }

.azioni { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ricerca { display: flex; gap: 10px; margin-bottom: 24px; max-width: 600px; }
.ricerca input { margin-top: 0; }

/* Riga di filtri del Registro (1.10.0): stanno tutti su una riga sola, e
   vanno a capo da soli quando lo schermo è stretto. */
.filtri { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
          margin-bottom: 20px; max-width: none; }
.filtri select, .filtri input { margin-top: 0; width: auto; }
.filtri select { min-width: 150px; }
.filtri input[type=search] { flex: 1 1 220px; min-width: 200px; }
.filtri .bottone { padding: 9px 18px; }

/* ==============================  pulsanti  ================================ */
/* Pillole, come sul sito: la principale è chiara smerigliata con testo scuro. */

.bottone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: var(--pillola);
  background: var(--chiaro); color: var(--su-chiaro);
  border: 1px solid var(--chiaro-bordo);
  box-shadow: var(--ombra-pill);
  backdrop-filter: var(--sfoca-pill); -webkit-backdrop-filter: var(--sfoca-pill);
  font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
  cursor: pointer; text-decoration: none; font-family: inherit; white-space: nowrap;
  transition: background .16s, transform .07s, box-shadow .16s;
}
.bottone:hover { background: var(--chiaro-hover); }
.bottone:active { transform: translateY(1px); }
.bottone:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 3px; }

.bottone.viola {
  background: var(--viola); color: #fff; border-color: rgba(var(--ink), .18);
  box-shadow: 0 12px 34px -12px rgba(149, 68, 235, .9);
}
.bottone.viola:hover { background: #A55CF0; }

.bottone.vetro {
  background: var(--vetro); color: var(--testo); border-color: var(--vetro-bordo);
}
.bottone.vetro:hover { background: var(--vetro-alto); }

.bottone.pieno { width: 100%; justify-content: center; }
.bottone.pericolo { background: transparent; color: var(--t-rosso); border-color: rgba(242,85,90,.5); box-shadow: none; }
.bottone.pericolo:hover { background: rgba(242,85,90,.12); }

/* Dalla 1.11.0 «mini» veste anche un link e un riepilogo che si apre, non solo
   un pulsante: nella cronologia stanno in fila e devono sembrare uguali. */
button.mini, a.mini, summary.mini {
  padding: 6px 15px; display: inline-block; text-decoration: none; list-style: none; font-size: 12.5px; border-radius: var(--pillola); cursor: pointer;
  background: rgba(var(--ink), .07); color: var(--testo2);
  border: 1px solid var(--vetro-bordo); font-family: inherit; font-weight: 600;
  transition: background .16s, color .16s;
}
button.mini:hover, a.mini:hover, summary.mini:hover { background: rgba(var(--ink), .14); color: var(--testo); }
button.mini.pericolo { color: var(--t-rosso); border-color: rgba(242,85,90,.4); }
summary.mini::-webkit-details-marker { display: none; }
.in-linea { display: inline; }
.azioni-riga { display: flex; gap: 8px; justify-content: flex-end; }

/* Riga di azioni della cronologia (1.11.0): i pulsanti stanno in fila, vanno a
   capo da soli, e un link fra loro si comporta come gli altri. */
.azioni-versione { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                   justify-content: flex-start; margin-top: 12px; }
.azioni-versione form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.azioni-versione .mini, .azioni-versione summary.mini { display: inline-block; }
.azioni-versione a.mini { text-decoration: none; line-height: 1.9; }
.azioni-versione details { display: inline-block; }
.azioni-versione details[open] { display: block; width: 100%; }
.azioni-versione input[type=text] { margin: 0; }

/* ==============================  tabelle  ================================= */

.tabellone {
  overflow-x: auto; border-radius: var(--r-card);
  border: 1px solid var(--vetro-bordo);
  background: var(--vetro); box-shadow: var(--ombra-card);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
}
.elenco, .tabella { width: 100%; border-collapse: collapse; }
.elenco th, .tabella th {
  text-align: left; padding: 14px 20px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--testo3); border-bottom: 1px solid var(--vetro-bordo);
}
.elenco td, .tabella td {
  padding: 16px 20px; border-bottom: 1px solid var(--vetro-bordo2); vertical-align: middle;
}
.elenco tr:last-child td, .tabella tr:last-child td { border-bottom: none; }
.elenco tbody tr { transition: background .16s; }
.elenco tbody tr:hover { background: rgba(var(--ink), .04); }
.elenco a { color: var(--testo); text-decoration: none; font-weight: 600; }
.elenco a:hover { color: var(--t-viola); }
.elenco .numero { text-align: right; font-variant-numeric: tabular-nums; color: var(--testo2); }
.elenco.compatta td { padding: 10px 18px; }
.tabella tr.ok .segno { color: var(--t-verde); font-size: 16px; }
.tabella tr.ko .segno { color: var(--t-rosso); font-size: 16px; }
.tabella .segno { width: 38px; text-align: center; }
.suggerimento { color: var(--t-ambra); }

/* ============================  minuterie  ================================= */

code {
  font-family: var(--mono); font-size: .87em;
  background: rgba(var(--ink), .07); color: var(--t-codice);
  padding: 3px 8px; border-radius: 7px;
  border: 1px solid var(--vetro-bordo2);
}
code.grande { font-size: 19px; padding: 6px 14px; letter-spacing: .05em; }
pre.codice {
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  background: rgba(var(--nero), calc(.42 * var(--nero-k-fondo))); border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-medio); padding: 18px 20px;
  overflow-x: auto; margin: 0 0 18px; color: var(--t-codice);
}
.pillola {
  display: inline-block; padding: 4px 12px; border-radius: var(--pillola);
  font-size: 11px; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid;
}
.pillola.verde  { background: rgba(18,184,134,.14);  border-color: rgba(18,184,134,.4);  color: var(--t-verde); }
.pillola.gialla { background: rgba(245,158,11,.14);  border-color: rgba(245,158,11,.4);  color: var(--t-ambra); }
.pillola.rossa  { background: rgba(242,85,90,.14);   border-color: rgba(242,85,90,.42);  color: var(--t-rosso); }
.pillola.viola  { background: rgba(149,68,235,.16);  border-color: rgba(149,68,235,.44); color: var(--t-viola); }
.pillola.grigia { background: rgba(var(--ink), .06); border-color: var(--vetro-bordo);   color: var(--testo3); }
.piccolo { font-size: 12.5px; color: var(--testo2); }
.lista-semplice { margin: 0; padding-left: 20px; color: var(--testo2); }
.lista-semplice li { margin-bottom: 8px; }
.lista-semplice strong, .lista-semplice a { color: var(--testo); }
.passi { margin: 0; padding-left: 24px; color: var(--testo2); }
.passi li { margin-bottom: 12px; }
.passi strong { color: var(--testo); }
.passi a { color: var(--t-viola); }

.piede {
  max-width: 1220px; margin: 0 auto; padding: 26px 24px 40px;
  color: var(--testo3); font-size: 12.5px;
  border-top: 1px solid var(--vetro-bordo2);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

/* ==========================  pagine di accesso  =========================== */

body.pagina-stretta {
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 22px; min-height: 100vh;
}
body.pagina-stretta .riquadro {
  background: var(--vetro);
  border: 1px solid var(--vetro-bordo);
  border-radius: 24px;
  box-shadow: var(--ombra-card);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
  padding: 40px; width: 100%; max-width: 440px;
}
/* Lo stesso marchio, più grande e sul fondo scuro della schermata d'accesso.
   Qui «NSA» non può restare inchiostro — sotto non c'è più il vetro chiaro —
   e la sfumatura si schiarisce, altrimenti il viola sul quasi-nero non si
   legge. È la stessa costruzione, vestita per l'altro fondo. */
.marchio-grande { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; }
.marchio-grande .glifo { width: 44px; height: 44px; border-radius: 13px; font-size: 15px; }
.marchio-grande .mk-r { font-size: 26px; }
.marchio-grande .mk-r,
.marchio-grande .mk small { background: linear-gradient(100deg, #A78BFA, #F0A6E8);
  -webkit-background-clip: text; background-clip: text; }
.marchio-grande .mk-r .nsa { color: var(--testo); -webkit-text-fill-color: var(--testo); }
.marchio-grande .mk small { font-size: 10px; letter-spacing: .24em; margin-top: 7px; }

/* =========================  secondo fattore  ============================== */

.qr-riquadro { display: flex; gap: 34px; align-items: flex-start; flex-wrap: wrap; }
.qr-immagine {
  background: #fff; padding: 14px; border-radius: var(--r-medio);
  line-height: 0; flex-shrink: 0; box-shadow: var(--ombra-card);
}
.qr-immagine svg { display: block; width: 196px; height: 196px; }
.qr-testo { flex: 1; min-width: 280px; }
.segreto {
  font-family: var(--mono); font-size: 15px; letter-spacing: .14em;
  background: rgba(var(--nero), calc(.38 * var(--nero-k-fondo))); color: var(--t-codice);
  padding: 14px 16px; border-radius: var(--r-medio);
  border: 1px solid var(--vetro-bordo); word-break: break-all; margin: 12px 0 4px;
}
.codice-cifre {
  font-family: var(--mono) !important; font-size: 27px !important;
  letter-spacing: .5em !important; text-align: center; font-weight: 700 !important;
  padding: 16px !important; text-indent: .5em;
}
.codici-recupero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin: 18px 0;
}
.codici-recupero span {
  font-family: var(--mono); font-size: 14px; letter-spacing: .07em;
  background: rgba(var(--nero), calc(.35 * var(--nero-k-fondo))); border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-piccolo); padding: 11px 14px; text-align: center; color: var(--t-codice);
}

/* =======================  riepilogo a due colonne  ======================== */

.riepilogo {
  display: grid; grid-template-columns: 190px 1fr; gap: 0;
  border: 1px solid var(--vetro-bordo); border-radius: var(--r-card);
  overflow: hidden; margin-bottom: 22px; background: var(--vetro);
}
.riepilogo dt {
  padding: 14px 20px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--testo3);
  border-bottom: 1px solid var(--vetro-bordo2);
}
.riepilogo dd {
  padding: 14px 20px; margin: 0; border-bottom: 1px solid var(--vetro-bordo2); font-size: 14.5px;
}
.riepilogo dt:last-of-type, .riepilogo dd:last-of-type { border-bottom: none; }
@media (max-width: 620px) {
  .riepilogo { grid-template-columns: 1fr; }
  .riepilogo dt { border-bottom: none; padding-bottom: 0; }
}

details summary { cursor: pointer; }
details summary::marker { color: var(--testo3); }

@media (max-width: 720px) {
  .contenuto { padding: 28px 18px 70px; }
  .barra { padding: 16px 18px 0; }
  h1 { font-size: 26px; }
  .pillola-menu { width: 100%; }
  .pillola-utente { margin-left: 0; }
  .qr-riquadro { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* I riquadrini senza icona restano incolonnati come prima. */
.riquadrino:not(:has(.icona)) { flex-direction: column; align-items: flex-start; gap: 3px; padding: 16px 20px; }
.riquadrino:not(:has(.icona)) .etichetta {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--testo3);
}

/* =========================  novità (1.12.0)  ============================== */

.novita {
  background: var(--vetro); border: 1px solid var(--vetro-bordo);
  border-left: 3px solid var(--vetro-bordo);
  border-radius: var(--r-medio); box-shadow: var(--ombra-card);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
  padding: 18px 20px; margin-bottom: 12px;
}
.novita.n-fare       { border-left-color: var(--rosso); }
.novita.n-calendario { border-left-color: var(--ambra); }
.novita.n-leggere    { border-left-color: var(--indaco); }
.novita.n-quiete     { border-left-color: var(--verde); }
.novita-testa { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.novita h3 {
  font-family: var(--f-tit); font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.32; margin: 0 0 8px;
}
.novita p { margin: 0 0 10px; color: var(--testo2); font-size: 14.5px; max-width: 74ch; }
.novita-piede {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed var(--vetro-bordo2); color: var(--testo3);
}
.novita .azioni-riga { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.novita .azioni-riga .bottone { padding: 7px 16px; font-size: 13px; }
.novita-archivia summary { cursor: pointer; color: var(--testo2); }
.novita-archivia textarea {
  width: 100%; max-width: 560px; margin: 10px 0; padding: 10px 12px;
  border-radius: var(--r-piccolo); border: 1px solid var(--vetro-bordo);
  background: rgba(var(--nero), calc(.28 * var(--nero-k-fondo))); color: var(--testo); font: inherit; font-size: 14px;
}


/* ===================  quello che c'è da fare (1.14.0)  ==================== */

/* I riquadrini della fascia sono collegamenti: portano dove la cosa si
   risolve. Se non ci fosse dove andare, sarebbero un cartello invece di una
   maniglia. */
a.riquadrino { text-decoration: none; color: inherit; transition: border-color .16s, transform .16s; }
a.riquadrino:hover { border-color: rgba(var(--ink), .28); transform: translateY(-1px); }
.riquadri.da-fare { margin-bottom: 30px; }
.riquadri.da-fare .icona { font-family: var(--f-tit); font-weight: 800; font-size: 17px; }
.riquadri.da-fare .valore { font-size: 15px; font-weight: 600; line-height: 1.25; }

/* Le novità del prodotto, in cima alla sua scheda. */
.novita-prodotto ul { margin: 10px 0 0; padding-left: 20px; }
.novita-prodotto li { margin-bottom: 6px; }
.novita-prodotto .piccolo { opacity: .8; }
.novita-prodotto p { margin-top: 12px; }

/* La parte pieghevole delle maschere: quello che quasi sempre va lasciato
   com'è sta chiuso, così davanti restano solo i campi che contano. */
.pieghevole { margin: 22px 0 4px; border-top: 1px solid var(--bordo); padding-top: 14px; }
.pieghevole > summary { cursor: pointer; color: var(--testo2); font-size: 14px; padding: 4px 0; }
.pieghevole > summary:hover { color: var(--testo); }
.pieghevole[open] > summary { margin-bottom: 14px; }
.pieghevole input[readonly] { opacity: .65; cursor: default; }

/* ===========================================================================
   Il telefono — 1.17.0

   Il pannello era disegnato per uno schermo largo: sette voci di menu su una
   riga sola e tabelle a sei colonne. Su un telefono restava leggibile solo
   scorrendo di lato, che è il modo migliore per non leggere una tabella.

   Qui non c'è una versione ridotta del pannello: c'è lo stesso pannello che
   si ripiega. Una pagina che sul telefono mostra meno cose è una pagina di
   cui non ti fidi quando la apri di corsa.
   =========================================================================== */

/* --- l'app installata ----------------------------------------------------- */

/* Il contenuto non passa più sotto l'orologio: la barra di stato è `black`,
   non trasparente, e quella striscia se la tiene iOS. Restano i margini che
   servono ancora davvero — i lati quando il telefono è coricato e il fondo
   sopra la lineetta della home. Il margine in alto resta scritto perché in
   verticale vale zero e in orizzontale, su un telefono col notch, no. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .barra  { padding-top: calc(16px + env(safe-area-inset-top)); }
  body    { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .piede  { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  /* A tutto schermo non c'è la freccia del browser: senza questo pulsante
     l'unica strada per tornare indietro è il menu. */
  body.c-e-indietro .indietro { display: inline-flex; }
}

/* 1.17.2 — sta dentro la pillola chiara, quindi non ha un vestito suo: niente
   fondo, niente bordo, niente ombra. Una cornice dentro una cornice fa una
   scatola dentro una scatola, ed è la stessa regola dell'area clienti. */
.indietro {
  display: none;                       /* nel browser la freccia ce l'ha già lui */
  align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; margin-right: 2px;
  border: 0; border-radius: 50%; background: transparent;
  color: rgba(13, 10, 20, .66);
  font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit;
  transition: background .16s, color .16s;
}
.indietro:hover  { background: rgba(13, 10, 20, .07); color: var(--su-chiaro); }
.indietro:active { background: rgba(13, 10, 20, .12); }

/* Il rettangolo grigio che appare sotto il dito quando si tocca un link non
   c'entra niente con questo pannello. */
@media (pointer: coarse) {
  a, button, summary, label { -webkit-tap-highlight-color: rgba(149, 68, 235, .18); }
}

/* --- la barra delle stanze, in fondo -------------------------------------
   Fatta come my.nsai.eu, e per la stessa ragione scritta lì: cinque voci in
   una riga da 390 pixel diventano cinque parole spezzate, e in cima allo
   schermo il pollice non arriva.

   Anche il punto di ribaltamento è il loro, **820px e non 720**: la barra
   deve girare alla stessa larghezza nelle due stanze, altrimenti lo stesso
   iPad mostra due impaginati diversi a seconda del sottodominio. Le tabelle
   che diventano schede restano a 720: quella è una decisione sul contenuto,
   non sull'arredamento. */

.stanze { display: none; }

.chi-sei { display: none; }          /* nel browser largo il menu basta */

/* Il tondo con le iniziali, e quello che si apre toccandolo.
   È un <details>: non ha bisogno di una riga di JavaScript per aprirsi, e se
   lo script che lo chiude toccando fuori non parte resta comunque una cosa
   che si apre e si richiude. */
.chi-sei > summary {
  list-style: none; cursor: pointer; display: block;
}
.chi-sei > summary::-webkit-details-marker { display: none; }
.chi-sei > summary::marker { content: ''; }
.tondino {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(100deg, #7C3AED, #C026D3); color: #fff;
  font-family: var(--f-tit); font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  box-shadow: 0 8px 22px -8px rgba(149, 68, 235, .9);
}
.chi-sei[open] .tondino { box-shadow: 0 0 0 3px rgba(149, 68, 235, .28); }

.chi-sei .tendina {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 232px; padding: 6px;
  /* Quasi pieno, non vetro: stessa lezione della barra in fondo. Un menu
     attraverso il quale si legge la pagina di sotto si legge male, e questo
     contiene la porta d'uscita. */
  background: var(--vetro-alto); border: 1px solid rgba(var(--ink), .16);
  border-radius: var(--r-medio); box-shadow: rgba(var(--nero), calc(.9 * var(--nero-k))) 0 24px 60px -20px;
}
.chi-sei .tendina-tit {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--vetro-bordo2); margin-bottom: 6px;
}
.chi-sei .tendina-tit strong { display: block; font-size: 14.5px; }
.chi-sei .tendina-tit span {
  display: block; font-size: 12.5px; color: var(--testo2); overflow-wrap: anywhere;
}
.chi-sei .tendina a {
  display: block; padding: 11px 12px; border-radius: var(--r-piccolo);
  color: var(--testo); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.chi-sei .tendina a.attivo { background: var(--viola-tenue); color: var(--t-viola); font-weight: 600; }
.chi-sei .tendina a.uscita {
  color: var(--testo2); border-top: 1px solid var(--vetro-bordo2);
  margin-top: 6px; padding-top: 12px; border-radius: 0;
}

@media (max-width: 820px) {

  /* Il menu grande sparisce. Restano il marchio e, a destra, le due cose che
     non sono stanze: le impostazioni e la (i). */
  .pillola-menu nav { display: none; }
  .pillola-menu { flex: 1; min-width: 0; padding: 7px 14px 7px 10px; }
  /* A destra resta il tondo e basta: il nome lo sai già, e quello che serve
     davvero — Impostazioni, la (i), Esci — sta dentro, scritto per esteso.
     Due icone astratte schiacciate accanto al nome non le leggeva nessuno. */
  .pillola-utente { margin-left: 0; padding: 5px; gap: 0; flex: none; }
  .solo-largo { display: none; }
  .chi-sei { display: block; }
  .barra-interno { gap: 10px; flex-wrap: nowrap; }

  /* La sfocatura costa da disegnare, e su una lista lunga si vede mentre si
     scorre. Sopra le pillole diventano opache: stesso disegno, senza vetro. */
  .pillola-menu, .pillola-utente {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .pillola-menu { background: rgba(var(--ink), .95); }

  /* La barra galleggia: una pillola staccata dai bordi, con la pagina che le
     scorre dietro sfocata. Il vetro qui si può permettere — sotto non c'è
     testo piccolo da leggere attraverso, ci sono cinque icone. */
  .stanze {
    display: flex; gap: 2px;
    position: fixed; z-index: 45;
    left: 14px; right: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right);
    padding: 6px;
    border-radius: var(--pillola);
    /* Il fondo è scuro davvero, non solo sfocato: se la sfocatura non parte
       — un telefono vecchio, il risparmio energetico, un browser che non la
       fa — la barra deve restare leggibile lo stesso. Provata senza: con .68
       ci si leggeva attraverso il nome di un cliente. */
    background: rgba(22, 16, 36, .88);
    border: 1px solid rgba(var(--ink), .13);
    box-shadow: rgba(var(--nero), calc(.92 * var(--nero-k))) 0 20px 48px -14px;
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
  }
  .stanza {
    flex: 1; min-width: 0; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--pillola);
    color: rgba(var(--ink), .62); text-decoration: none;
    transition: color .16s;
  }
  .stanza .riquadro-icona {
    position: relative;
    width: 100%; height: 100%; border-radius: var(--pillola);
    display: grid; place-items: center;
    transition: background .16s, box-shadow .16s;
  }
  /* La stanza in cui sei è una pastiglia piena col gradiente: è già così nel
     menu grande e nella barra dell'area clienti, e senza le parole sotto è
     l'unica cosa che dice dove ti trovi. */
  .stanza.attivo { color: #fff; }
  .stanza.attivo .riquadro-icona {
    background: linear-gradient(100deg, #7C3AED, #C026D3);
    box-shadow: 0 8px 20px -8px rgba(149, 68, 235, 1);
  }
  .stanza:active .riquadro-icona { background: rgba(var(--ink), .10); }
  .stanza.attivo:active .riquadro-icona {
    background: linear-gradient(100deg, #7C3AED, #C026D3);
  }
  /* Il pallino: dice che c'è qualcosa, non quanto. Il quanto sta nella
     pagina, che è dove poi si fa qualcosa. */
  .stanza .pallino {
    position: absolute; top: 8px; right: calc(50% - 15px);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rosso); box-shadow: 0 0 0 2px rgba(22, 16, 36, .95);
  }
  .stanza.attivo .pallino { box-shadow: 0 0 0 2px rgba(124, 58, 237, .95); }

  /* Lo spazio per non finire sotto la barra. Senza questo l'ultima riga di
     ogni pagina resta coperta, e non si capisce nemmeno che c'è. */
  .piede { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

/* --- fino a 720px --------------------------------------------------------- */

@media (max-width: 720px) {

  .contenuto { padding: 24px 16px 60px; }
  .barra     { padding: 14px 16px 0; }
  .piede     { padding: 22px 16px calc(104px + env(safe-area-inset-bottom)); }

  h1 { font-size: 25px; }
  .sottotitolo { font-size: 14.5px; margin-bottom: 22px; }
  .titolo-riga { gap: 14px; margin-bottom: 22px; }
  .titolo-riga > .bottone, .titolo-riga > a.bottone { width: 100%; justify-content: center; }

  .scheda { padding: 20px 16px; }
  .riquadri { grid-template-columns: 1fr 1fr; gap: 10px; }
  .riquadrino { padding: 14px 14px; }

  /* Sotto i 16px iOS ingrandisce la pagina appena tocchi un campo, e poi non
     la rimpicciolisce più. Non è una preferenza estetica: è la differenza fra
     compilare un modulo e combattere con lo zoom. */
  input[type=text], input[type=email], input[type=password], input[type=url],
  input[type=number], input[type=date], input[type=search], input[type=file],
  select, textarea { font-size: 16px; padding: 13px 15px; }
  label { margin-bottom: 16px; }

  /* Un bersaglio da toccare col pollice non sta sotto i 44px. */
  .bottone { padding: 13px 22px; min-height: 44px; }
  .azioni .bottone, .azioni-versione .bottone { flex: 1 1 auto; justify-content: center; }
  .azioni-riga { justify-content: flex-start; flex-wrap: wrap; }

  /* Impronte, chiavi e domini sono stringhe lunghe senza spazi: senza questo
     allargano la pagina e mandano tutto il resto fuori squadra. */
  code, .elenco td, .tabella td, .riepilogo dd { overflow-wrap: anywhere; }
  pre.codice { font-size: 11.5px; padding: 14px 14px; }
  code.grande { font-size: 15px; }

  .qr-riquadro { gap: 22px; }
  .qr-riquadro img, .qr-riquadro svg { max-width: 100%; height: auto; }
  .modulo { max-width: none; }

  /* --- le tabelle diventano schede ---------------------------------------
     Solo quelle a cui lo script di coda ha saputo dare un'etichetta per ogni
     cella. Le altre restano com'erano, e si scorrono di lato: meglio una
     tabella scomoda di una tabella con le celle senza nome. */
  .tabellone:has(> .a-schede) { overflow-x: visible; background: none;
                                border: none; box-shadow: none; backdrop-filter: none; }
  .a-schede, .a-schede tbody, .a-schede tr, .a-schede td { display: block; width: 100%; }
  .a-schede thead { display: none; }
  .a-schede tr {
    background: var(--vetro); border: 1px solid var(--vetro-bordo);
    border-radius: var(--r-medio); box-shadow: var(--ombra-card);
    backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
    padding: 4px 2px; margin-bottom: 10px;
  }
  .a-schede tbody tr:hover { background: var(--vetro); }
  .a-schede td {
    border-bottom: 1px solid var(--vetro-bordo2);
    padding: 9px 15px; text-align: left;
    display: grid; grid-template-columns: 40% 1fr; gap: 10px; align-items: baseline;
  }
  .a-schede tr td:last-child { border-bottom: none; }
  .a-schede td::before {
    content: attr(data-l);
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--testo3); line-height: 1.5;
  }
  /* Una cella vuota con l'etichetta è rumore: si nasconde tutta la riga. */
  .a-schede td:empty { display: none; }
  .a-schede .numero { text-align: left; }
  /* La prima cella è il nome della cosa: fa da titolo della scheda, e
     l'etichetta («Prodotto», «Sito») non aggiunge niente che non si veda. */
  .a-schede tr td:first-child {
    grid-template-columns: 1fr; gap: 2px;
    padding-top: 13px; font-size: 16px; font-weight: 600;
  }
  .a-schede tr td:first-child::before { display: none; }
  .a-schede .azioni-versione { justify-content: flex-start; }
}

/* --- fino a 420px: i telefoni stretti ------------------------------------- */

@media (max-width: 420px) {
  /* I riquadri restano due per riga: sono etichetta e numero, e uno per riga
     farebbe scorrere mezzo schermo per leggere quattro cifre. Va a colonna
     sola solo la fascia di quello che c'è da fare, dove accanto al numero
     c'è una frase. */
  .riquadri.da-fare { grid-template-columns: 1fr; }
  h1 { font-size: 22px; }
  .a-schede td { grid-template-columns: 46% 1fr; }
  .piede { flex-direction: column; gap: 6px; }
  body.pagina-stretta { padding: 3vh 14px; }
}

/* ===========================================================================
   1.26.0 — attività e segnalazioni
   Classi nuove, nessuna di quelle che c'erano riscritta.
   =========================================================================== */
/* -----------------------------  la lavagna  ------------------------------- */

.lavagna { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }

.voce {
  display: grid; gap: 4px 14px; align-items: center;
  grid-template-columns: 4px 1fr auto;
  padding: 14px 18px 14px 0;
  background: var(--vetro); border: 1px solid var(--vetro-bordo2);
  border-radius: var(--r-medio); overflow: hidden;
}
.voce .striscia { grid-row: 1 / -1; align-self: stretch; background: var(--testo3); }
.voce.alta   .striscia { background: var(--rosso); }
.voce.media  .striscia { background: var(--ambra); }
.voce.bassa  .striscia { background: rgba(var(--ink), .22); }
.voce.presa  { border-color: rgba(149,68,235,.38); background: rgba(149,68,235,.07); }
.voce.fatta  { opacity: .55; }
.voce.fatta .titolo { text-decoration: line-through; text-decoration-color: var(--testo3); }

.voce .corpo { min-width: 0; padding-left: 16px; }
.voce .titolo { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.voce .sotto {
  margin-top: 4px; font-size: 12.5px; color: var(--testo3);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.voce .sotto code { font-family: var(--mono); font-size: 11.5px; color: var(--testo2); }
.voce .lato { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-left: 12px; }

.targa {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--pillola);
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.targa.ferma   { background: rgba(var(--ink), .07); color: var(--testo2); }
.targa.corso   { background: rgba(149,68,235,.18); color: var(--t-viola); }
.targa.fatta   { background: rgba(18,184,134,.16); color: var(--t-verde); }
.targa.urgente { background: rgba(242,85,90,.16); color: var(--t-rosso); }
.targa.scaduta { background: rgba(242,85,90,.16); color: var(--t-rosso); }
.targa.origine { background: rgba(var(--ink), .05); color: var(--testo3); border-color: var(--vetro-bordo2); font-weight: 600; }
.targa .pallino { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.gruppo-titolo {
  display: flex; align-items: baseline; gap: 10px;
  margin: 30px 0 12px; font-family: var(--f-tit);
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--viola-2);
}
.gruppo-titolo span { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--testo3); }

/* --------------------------  le segnalazioni  ----------------------------- */

.filtro-riga { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.filtro-riga .f {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 5px 13px; border-radius: var(--pillola);
  background: transparent; color: var(--testo2);
  border: 1px solid var(--vetro-bordo);
}
.filtro-riga .f[aria-pressed="true"] { background: var(--inverso-fondo); color: var(--inverso-testo); border-color: transparent; }

.segn { display: flex; flex-direction: column; gap: 8px; }
.segn > a {
  display: grid; gap: 4px 16px; align-items: center; text-decoration: none; color: inherit;
  grid-template-columns: 52px 1fr auto;
  padding: 14px 18px;
  background: var(--vetro); border: 1px solid var(--vetro-bordo2); border-radius: var(--r-medio);
  transition: border-color .16s;
}
.segn > a:hover { border-color: rgba(149,68,235,.45); }
/* 1.59.0 — Seleziona: la riga è una casella, e in fondo la barra */
.segn.scegli > label {
  display: grid; gap: 4px 16px; align-items: center; color: inherit; cursor: pointer;
  grid-template-columns: 74px 1fr auto; margin: 0; font-weight: 400; font-size: inherit;
  padding: 14px 18px;
  background: var(--vetro); border: 1px solid var(--vetro-bordo2); border-radius: var(--r-medio);
  transition: border-color .16s;
}
.segn.scegli > label:hover, .segn.scegli > label:has(input:checked) { border-color: rgba(149,68,235,.45); }
.segn.scegli .num { display: flex; align-items: center; gap: 8px; }
.segn.scegli .num input { width: 18px; height: 18px; margin: 0; accent-color: var(--viola-2); }
.barra-insieme {
  position: sticky; bottom: 12px; z-index: 5; margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 14px; background: var(--vetro); border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-medio); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.barra-insieme .tutte { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.barra-insieme .tutte input { width: 18px; height: 18px; margin: 0; accent-color: var(--viola-2); }
.barra-insieme .quante { color: var(--testo3); font-size: 13px; margin-right: auto; }
.barra-insieme select, .barra-insieme input[type=text] { margin: 0; width: auto; min-width: 0; }
.segn .num {
  grid-row: 1 / -1; font-family: var(--mono); font-size: 12.5px; color: var(--testo3);
  font-variant-numeric: tabular-nums;
}
.segn .titolo { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.segn .sotto { margin-top: 4px; font-size: 12.5px; color: var(--testo3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.segn .lato { grid-row: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* 1.59.0 — ogni pezzo nella sua colonna. Senza, il riquadro con gravità e
   stato (che occupa tutte le righe) veniva messo per primo nella seconda
   colonna, e il titolo finiva spinto a destra. */
.segn .num { grid-column: 1; }
.segn > a > span:nth-child(2), .segn.scegli > label > span:nth-child(2) { grid-column: 2; }
.segn .lato { grid-column: 3; }

.gravita { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.gravita i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.gravita.blocca i { background: var(--rosso); }
.gravita.blocca   { color: var(--t-rosso); }
.gravita.disturba i { background: var(--ambra); }
.gravita.disturba { color: var(--t-ambra); }
.gravita.sopporta i { background: rgba(var(--ink), .3); }
.gravita.sopporta { color: var(--testo3); }

/* la scheda di una segnalazione */
.due-parti { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .due-parti { grid-template-columns: 1fr; } }

.dati { display: flex; flex-direction: column; gap: 0; }
.dati div {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--vetro-bordo2); font-size: 13.5px;
}
.dati div:last-child { border-bottom: 0; }
.dati dt, .dati .k { color: var(--testo3); font-size: 12.5px; }
.dati .v { color: var(--testo); font-weight: 600; text-align: right; }

.citazione {
  border-left: 2px solid var(--viola); padding: 4px 0 4px 16px; margin: 0 0 18px;
  color: var(--testo2); font-size: 14.5px; line-height: 1.65;
}
.citazione b { color: var(--testo); }

.registrino {
  font-family: var(--mono); font-size: 12px; line-height: 1.75;
  background: rgba(var(--nero), calc(.34 * var(--nero-k-fondo))); border: 1px solid var(--vetro-bordo2);
  border-radius: var(--r-piccolo); padding: 14px 16px; overflow-x: auto;
  color: var(--testo2); white-space: pre;
}

.linea-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.linea-tempo li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding-bottom: 18px; position: relative; }
.linea-tempo li::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; margin-left: 2px;
  background: var(--viola); box-shadow: 0 0 0 4px rgba(149,68,235,.18);
}
.linea-tempo li:not(:last-child)::after {
  content: ""; position: absolute; left: 6px; top: 19px; bottom: 2px; width: 1px; background: var(--vetro-bordo);
}
.linea-tempo b { display: block; font-size: 13.5px; font-weight: 600; }
.linea-tempo span { font-size: 12.5px; color: var(--testo3); }

.azioni-scheda { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }


@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------  scaricare un pacchetto  ------------------------ */

.scarica {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 14px; border-radius: var(--pillola);
  background: rgba(var(--ink), .06); border: 1px solid var(--vetro-bordo);
  color: var(--testo); text-decoration: none;
  font-size: 12.5px; font-weight: 600;
}
.scarica:hover { background: rgba(var(--ink), .13); border-color: var(--chiaro-bordo); color: var(--testo); }
.scarica:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 2px; }

@media (max-width: 620px) {
  .voce { grid-template-columns: 4px 1fr; }
  .voce .lato { grid-column: 2; justify-content: flex-start; padding-left: 16px; }
  .segn > a { grid-template-columns: 44px 1fr; }
  .segn.scegli > label { grid-template-columns: 64px 1fr; }
  .barra-insieme .quante { margin-right: 0; flex: 1 0 100%; }
  .barra-insieme input[type=text] { flex: 1 1 140px; }
  .segn .num { grid-row: 1 / span 2; }
  .segn .lato { grid-column: 2; grid-row: auto; justify-content: flex-start; }
}

/* ===========================================================================
   1.27.0 — le linguette e la fascia «adesso»
   =========================================================================== */

/* Le parti di una scheda: prodotto e L'Hub. Sono collegamenti veri, non
   pulsanti che nascondono roba: ogni parte ha il suo indirizzo, si mette fra i
   preferiti e si apre in una scheda nuova. */
.linguette { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 26px; }
.linguette a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--pillola);
  background: var(--vetro); color: var(--testo2); text-decoration: none;
  border: 1px solid var(--vetro-bordo2);
  font-size: 13px; font-weight: 600;
  transition: border-color .16s, color .16s;
}
.linguette a span {
  font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: var(--pillola);
  background: rgba(var(--ink), .08); color: var(--testo3);
  font-variant-numeric: tabular-nums;
}
.linguette a:hover { border-color: var(--vetro-bordo); color: var(--testo); }
.linguette a.attiva { background: var(--inverso-fondo); color: var(--inverso-testo); border-color: transparent; }
.linguette a.attiva span { background: rgba(13, 10, 20, .10); color: rgba(13, 10, 20, .7); }
.linguette a.allarme span { background: rgba(242, 85, 90, .18); color: var(--t-rosso); }
.linguette a:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 2px; }

/* La fascia di quello che c'è da fare adesso. Sostituisce i riquadrini
   quadrati: un numero grande e due righe di parole, che si legge da lontano. */
.adesso {
  display: grid; gap: 14px; margin-bottom: 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.adesso a {
  display: flex; align-items: flex-start; gap: 13px; text-decoration: none;
  padding: 16px 18px; border-radius: var(--r-medio);
  background: var(--vetro-alto); border: 1px solid var(--vetro-bordo2);
  transition: border-color .16s, transform .16s;
}
.adesso a:hover { border-color: var(--vetro-bordo); transform: translateY(-1px); }
.adesso .n {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--f-tit); font-weight: 800; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.adesso .n.rosso { background: rgba(242, 85, 90, .22);  color: var(--t-rosso); }
.adesso .n.ambra { background: rgba(245, 158, 11, .20); color: var(--t-ambra); }
.adesso .n.viola { background: rgba(149, 68, 235, .24); color: var(--t-viola); }
.adesso .n.verde { background: rgba(18, 184, 134, .20); color: var(--t-verde); }
.adesso .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adesso .t b { font-size: 14px; font-weight: 600; color: var(--testo); letter-spacing: -.01em; }
.adesso .t span { font-size: 12.5px; color: var(--testo3); }

/* I filtri a pillola: quelli che si usano sempre, senza aprire una tendina. */
.pillole-filtro { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.pillole-filtro a {
  padding: 5px 13px; border-radius: var(--pillola); text-decoration: none;
  font-size: 12.5px; font-weight: 600;
  color: var(--testo2); border: 1px solid var(--vetro-bordo);
}
.pillole-filtro a:hover { color: var(--testo); }
.pillole-filtro a.attiva { background: var(--inverso-fondo); color: var(--inverso-testo); border-color: transparent; }

/* ===========================================================================
   1.28.0 — la (i)
   Le spiegazioni non stanno più in pagina: stanno dietro un pallino, e si
   aprono solo se le cerchi.
   =========================================================================== */

.info-i { display: inline-block; position: relative; vertical-align: middle; margin-left: 7px; }
.info-i > summary {
  list-style: none; cursor: pointer;
  width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vetro-bordo);
  background: rgba(var(--ink), .05);
  font-family: var(--f-tit); font-weight: 700; font-size: 11.5px; line-height: 1;
  color: var(--testo3);
  transition: color .16s, border-color .16s;
}
.info-i > summary::-webkit-details-marker { display: none; }
.info-i > summary:hover { color: var(--testo); border-color: var(--chiaro-bordo); }
.info-i[open] > summary { background: var(--viola); border-color: transparent; color: #fff; }
.info-i > summary:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 2px; }

.info-i .info-testo {
  position: absolute; z-index: 60; top: calc(100% + 9px); left: 0;
  width: max-content; max-width: min(440px, 78vw);
  padding: 14px 16px; border-radius: var(--r-medio);
  background: var(--vetro-alto); border: 1px solid var(--vetro-bordo);
  box-shadow: var(--ombra-card);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
  /* Dentro un titolo erediterebbe corpo e peso del titolo: qui si riparte. */
  font-family: var(--f); font-size: 13.5px; font-weight: 400; line-height: 1.65;
  letter-spacing: 0; text-transform: none; white-space: normal; color: var(--testo2);
}
.info-i .info-testo strong { color: var(--testo); }
.info-i .info-testo p { margin: 0 0 10px; }
.info-i .info-testo p:last-child { margin-bottom: 0; }
.info-i .info-testo code { font-family: var(--mono); font-size: 12px; }
.info-i .info-testo pre {
  white-space: pre-wrap; margin: 10px 0 0; font-size: 12px; line-height: 1.6;
  font-family: var(--mono); color: var(--testo2);
}
.info-i .info-testo ol, .info-i .info-testo ul { margin: 8px 0 0; padding-left: 20px; }

/* 1.42.0 — la finestrella della (i) finiva SOTTO le schede che vengono dopo.
   Il motivo non era il suo z-index, che c'è: è che `.scheda` ha un
   backdrop-filter, e un backdrop-filter apre un contesto di impilamento. Da
   dentro quel contesto nessun z-index arriva più in alto della scheda stessa,
   e la scheda dopo — che viene dopo nel documento — le passa sopra. Si alza
   quindi la scheda che contiene la finestrella aperta, non la finestrella. */
.scheda:has(.info-i[open]) { position: relative; z-index: 70; }

/* 1.46.0 — sul telefono la finestrella si àncora allo schermo, non alla (i).
   La regola di prima le incollava il bordo destro a quello della (i): quando
   la (i) sta a sinistra — nel titolo di una scheda, accanto a un numero di
   versione — la finestrella larga 82vw usciva dal lato sbagliato, e metà testo
   finiva fuori. Agganciata allo schermo entra sempre, ovunque stia la (i). */
@media (max-width: 620px) {
  .info-i .info-testo {
    position: fixed; left: 12px; right: 12px; top: auto;
    width: auto; max-width: none; z-index: 80;
    margin-top: 6px;
  }
}

/* Una riga di tabella che si apre: il cursore lo dice. */
tr.apribile { cursor: pointer; }
tr.apribile:hover { background: rgba(var(--ink), .04); }

/* ===========================================================================
   1.34.0 — la barra stretta, e le voci con l'icona
   ---------------------------------------------------------------------------
   Due ritocchi, e solo quelli. La 1.33.0 aveva rifatto lo scheletro — colonna
   a sinistra, lastra, striscia — per ottenere questi due: era un cambio di
   struttura dove bastava un cambio di misure, e ha rotto quello che
   funzionava. Ritirata.

   Qui non si tocca né il guscio né il modo in cui sono fatte le pagine: si
   stringe la testata e si rivestono le voci. Se non piace, sono trenta righe
   da togliere.
   =========================================================================== */

/* 1. LA BARRA SI STRINGE.
   Ventidue pixel sopra il menu erano un respiro che nessuno aveva chiesto, e
   su un portatile sono la prima riga di tabella che non entra. */
.barra { padding: 10px 20px 0; }
.pillola-menu { padding: 5px 10px 5px 7px; gap: 4px; }
.glifo { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.marchio { gap: 9px; margin-right: 4px; }
.mk-r { font-size: 16px; }
.mk small { margin-top: 3px; font-size: 8px; letter-spacing: .2em; }
.pillola-utente { padding: 5px 14px; }
.tondino { width: 30px; height: 30px; font-size: 11.5px; }

/* 2. LE VOCI PRENDONO L'ICONA, come nel menu di Store OS.
   Il nome resta scritto per esteso — è il motivo per cui quel menu si legge
   da fermo — e l'icona serve a ritrovare la voce senza rileggerle tutte.
   L'attiva non è più un blocco di viola pieno: fondo tenue e testo del
   marchio, che è più leggero da guardare dieci volte al giorno. */
.pillola-menu nav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; font-size: 13.5px;
}
.pillola-menu nav a svg {
  width: 16px; height: 16px; flex: none; opacity: .55;
}
.pillola-menu nav a:hover svg { opacity: .8; }
.pillola-menu nav a.attivo {
  background: rgba(149, 68, 235, .14);
  color: #4C1D95;
  font-weight: 600;
}
.pillola-menu nav a.attivo svg { opacity: 1; color: var(--viola); }
.pillola-menu nav a.tenue svg { opacity: .4; }
.pillola-menu nav a.info svg { display: none; }

/* Il numero, nella stessa forma di prima ma dentro una voce che adesso ha
   anche un'icona: non deve schiacciarsi contro il nome. */
.pillola-menu nav a .conta { margin-left: 1px; }
.pillola-menu nav a.attivo .conta { background: rgba(76, 29, 149, .16); color: #4C1D95; }

@media (max-width: 900px) {
  /* Stretti, prima sparisce l'icona e poi la voce: il nome vale più del segno. */
  .pillola-menu nav a svg { display: none; }
  .pillola-menu nav a { gap: 0; padding: 6px 11px; }
}

/* ===========================================================================
   1.35.0 — sul telefono, le tre cose che Store OS fa e l'Hub no
   ---------------------------------------------------------------------------
   Guardato il pannello di Store OS su iPhone, non il suo foglio di stile per
   il desktop. Le differenze vere erano tre, e sono tutte piccole:

   1. in cima Store OS scrive DOVE SEI («Dashboard»), non il marchio. Il
      marchio lo sai già; la pagina in cui sei, dopo tre tocchi, no.
   2. in fondo le voci hanno LA PAROLA SOTTO L'ICONA. Quattro segni muti si
      imparano, ma nel frattempo si sbaglia: la parola toglie l'indovinello.
   3. la voce in cui sei non è una pastiglia piena di colore: sono l'icona e
      la parola che diventano del marchio. Pesa meno, e si guarda tutto il
      giorno.
   =========================================================================== */

.dove-sei { display: none; }

@media (max-width: 720px) {
  /* 1. DOVE SEI, al posto del marchio scritto.
     Il glifo resta — è il tasto per tornare a casa — e la scritta «NSAi HUB»
     lascia il posto al nome della pagina. */
  .pillola-menu .marchio .mk { display: none; }
  .pillola-menu .marchio { margin-right: 2px; }
  .dove-sei {
    display: block; flex: 1; min-width: 0;
    font-family: var(--f-tit); font-size: 17px; font-weight: 700;
    letter-spacing: -.02em; color: var(--su-chiaro);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 2. LA PAROLA SOTTO L'ICONA.
     La barra cresce da 46 a 56: è il prezzo della parola, e si paga volentieri
     una volta sola. */
  .stanza {
    height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0 2px;
  }
  .stanza .riquadro-icona { width: 26px; height: 26px; }
  .stanza .eti {
    font-size: 10px; font-weight: 600; letter-spacing: .005em; line-height: 1.1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .stanza .pallino { top: -2px; right: calc(50% - 13px); }

  /* 3. LA VOCE IN CUI SEI: icona e parola del marchio, niente pastiglia.
     Toglie il blocco di colore pieno e lascia la barra tutta uguale, che è
     quello che la rende leggibile in mezzo secondo. */
  .stanza.attivo { color: var(--t-viola); }
  .stanza.attivo .riquadro-icona,
  .stanza.attivo:active .riquadro-icona { background: none; box-shadow: none; }
  .stanza.attivo .pallino { box-shadow: 0 0 0 2px rgba(22, 16, 36, .95); }
  .stanza:active { color: #fff; }
  .stanza:active .riquadro-icona { background: none; }

  /* La barra è più alta: quello che sta sotto deve scostarsi di altrettanto. */
  .piede { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
  .contenuto { padding-bottom: 74px; }
}

/* ===========================================================================
   1.39.0 — I prodotti in box, divisi per piattaforma
   La fascia dice la piattaforma e la regola che ne discende; dentro, i box
   scorrono. I colori dei segnali non sono nuovi: sono gli stessi tre della
   gravità qui sopra, perché «quanto stringe» è una scala sola in tutto l'Hub.
   =========================================================================== */

.fascia-tipo + .fascia-tipo { margin-top: 26px; }
.fascia-testa {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--vetro-bordo2);
}
.fascia-nome {
  font-family: var(--f-tit); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--testo2);
}
.fascia-nome.wordpress { color: var(--t-blu); }
.fascia-nome.whmcs     { color: var(--ambra); }
.fascia-nome.applicativo { color: var(--t-verde); }
.fascia-regola { color: var(--testo3); font-size: 12.5px; }

.pista-riga { display: flex; align-items: center; }
.pista {
  /* `flex: 1` non è un dettaglio: dentro la riga delle frecce la pista è un
     elemento flessibile, e senza questo si stringe sul contenuto — due box
     larghi 262px e mezza riga vuota accanto. */
  flex: 1 1 auto; min-width: 0;
  /* Una misura fissa, non una frazione della riga: in uno slider i box devono
     restare uguali a sé stessi comunque siano tanti. Con `1fr` un prodotto solo
     diventava una card larga tutto lo schermo con dentro due righe di testo. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(262px, 400px);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding-bottom: 6px;
}
.pista > .scatola { scroll-snap-align: start; }
/* 1.47.0 — le frecce non sono più due dischi bianchi.
   Erano grandi quanto i pulsanti veri, chiare come loro, e spente: due comandi
   morti a fianco di ogni fascia. Adesso sono vetro scuro, stanno *sopra* i
   bordi della pista invece di rubarle larghezza, e quando non c'è niente da
   scorrere non ci sono. */
.pista-riga { position: relative; }
.freccia {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  background: var(--vetro); color: var(--testo2);
  border: 1px solid var(--vetro-bordo); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: rgba(var(--nero), calc(.5 * var(--nero-k))) 0 6px 18px -6px;
}
.freccia svg { width: 17px; height: 17px; display: block; }
.freccia[data-scorri="-1"] { left: -6px; }
.freccia[data-scorri="1"]  { right: -6px; }
.freccia:hover { color: var(--testo); border-color: var(--chiaro-bordo); background: var(--vetro-alto); }
.freccia:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 2px; }
.freccia[hidden] { display: none; }

.scatola {
  position: relative;
  background: var(--vetro-alto);
  border: 1px solid var(--vetro-bordo2);
  border-radius: var(--r-medio);
  padding: 15px 16px 13px;
  display: flex; flex-direction: column; gap: 11px;
}
.scatola:hover { border-color: var(--vetro-bordo); }
.scatola-testa { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.scatola-testa h3 {
  font-family: var(--f-tit); font-size: 16px; font-weight: 700;
  letter-spacing: -.01em; margin: 0;
}
/* Il titolo è il collegamento, e si allarga su tutto il box: così il clic
   prende dove capita, e i segnali restano cliccabili per conto loro. */
.scatola-titolo { color: var(--testo); text-decoration: none; }
.scatola-titolo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.scatola-titolo:hover { color: var(--t-viola); }
.scatola-titolo:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 3px; }

/* Una riga sola, e dentro solo quello che è vero: le etichette stanno
   accanto ai valori, non dall'altra parte della card. */
.scatola-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; }
.scatola-meta .dato { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.scatola-meta .et { color: var(--testo3); }
.scatola-meta .va { font-variant-numeric: tabular-nums; font-weight: 600; }
.scatola-meta .va.assente { color: var(--testo3); font-weight: 400; }

/* ---------------------------------------------------------------------------
   Il punto di ritorno: una riga che si apre (1.40.0)
   Lo stato sta sempre in vista, i comandi si aprono quando servono. Una scheda
   che guida con una tendina e un pulsante Salva mette il comando davanti al
   fatto, e spinge sotto lo schermo quello per cui sei entrato.
   --------------------------------------------------------------------------- */
.ritorno {
  background: var(--vetro); border: 1px solid var(--vetro-bordo2);
  border-radius: var(--r-medio); margin-bottom: 16px;
}
.ritorno > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.ritorno > summary::-webkit-details-marker { display: none; }
.ritorno > summary:focus-visible { outline: 2px solid var(--viola-2); outline-offset: -2px; border-radius: var(--r-medio); }
.rit-et {
  font-family: var(--f-tit); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--testo3);
}
.rit-v { font-family: var(--mono); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rit-v.assente { font-family: var(--f); font-weight: 500; color: var(--testo3); }
.rit-meta { color: var(--testo3); font-size: 12.5px; flex: 1 1 auto; min-width: 0; }
.rit-apri {
  color: var(--testo2); font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--vetro-bordo); border-radius: 50px; padding: 2px 12px;
}
.ritorno[open] > summary { border-bottom: 1px solid var(--vetro-bordo2); }
.ritorno[open] .rit-apri { color: var(--testo); }
.rit-corpo { padding: 14px 16px 16px; }
.rit-corpo .spiegazione { margin-top: 0; }
.rit-comandi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rit-comandi select { max-width: 320px; }
.rit-comandi input[name="nota"] { min-width: 220px; }

.segnali {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--vetro-bordo2);
}
.segnale {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 50px; padding: 3px 10px 3px 8px; text-decoration: none;
  background: rgba(var(--ink), .05); border: 1px solid transparent;
  color: var(--testo2);
}
.segnale svg { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.segnale.blocca   { color: var(--t-rosso); background: rgba(242,85,90,.13);  border-color: rgba(242,85,90,.34); }
.segnale.disturba { color: var(--t-ambra); background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); }
a.segnale:hover { border-color: var(--vetro-bordo); }
a.segnale:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 2px; }

.quiete { color: var(--testo3); font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; }
.quiete i { width: 8px; height: 8px; border-radius: 2px; background: rgba(18,184,134,.5); display: block; }

@media (max-width: 560px) {
  .pista { grid-auto-columns: minmax(240px, 84%); }
  .freccia { display: none; }
}

/* ===========================================================================
   1.41.0 — meno cose sullo schermo
   Il menu senza icone, la ricerca che si apre da un'icona, il «+» al posto di
   una pillola larga come il titolo, e una versione che è due righe invece di
   cinque. La regola è sempre quella: lo stato si vede, i comandi si aprono.
   =========================================================================== */

/* Il «+»: un tondo fisso nell'angolo in basso a destra (1.42.0).
   Sul telefono sale sopra la barra delle stanze, che sta nello stesso angolo:
   due cose sovrapposte nel punto dove si tocca sono due cose che si sbagliano. */
/* 1.47.0 — il + è viola, non un disco bianco.
   Su un fondo scuro una pastiglia chiara larga 54 pixel fissa nell'angolo è la
   cosa più luminosa dello schermo, e non è la più importante. Viola è
   l'accento della casa: si vede, e appartiene. Il segno dentro è disegnato,
   così sta al centro qualunque font arrivi. */
/* 1.51.1 — questo tondo si stampa DOPO </main>, ed è un figlio del corpo.
   Dentro `main` il suo z-index non contava: `body > * { z-index: 1 }` chiude
   `main` in un piano suo, e il piè di pagina — che viene dopo, stesso piano —
   ci finiva sopra. Sul telefono il piè di pagina ha 116 pixel di spazio sotto,
   cioè esattamente la fascia dove sta questo tondo: il dito toccava quello.
   Qui fuori il 46 vale contro la barra delle stanze (45) e contro tutto il
   resto. `position: fixed` vince su `body > * { position: relative }` perché
   due classi contano più di un elemento e un figlio. */
.bottone.piu {
  position: fixed; z-index: 46;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; min-width: 0; padding: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, #A55CF0, var(--viola) 65%, #7C3FD4);
  color: #fff; border: 1px solid rgba(var(--ink), .16);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: rgba(149, 68, 235, .40) 0 10px 26px -6px,
              rgba(var(--nero), calc(.55 * var(--nero-k-fondo))) 0 6px 16px -8px;
  transition: transform .14s, box-shadow .14s;
}
.bottone.piu svg { width: 24px; height: 24px; display: block; }
.bottone.piu:hover {
  transform: translateY(-2px);
  box-shadow: rgba(149, 68, 235, .52) 0 14px 30px -6px,
              rgba(var(--nero), calc(.55 * var(--nero-k-fondo))) 0 8px 18px -8px;
}
.bottone.piu:active { transform: translateY(0); }
.bottone.piu:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bottone.piu { transition: none; } }
@media (max-width: 820px) {
  .bottone.piu { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
}

/* La (i) accanto al nome: stesso tondo che aveva in fondo al menu. */
.pillola-utente a.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  /* Nel menu questo tondo stava su una pillola chiara e prendeva i colori
     scuri. Qui la pillola è scura: gli stessi valori lo rendevano invisibile. */
  border: 1px solid var(--vetro-bordo); color: var(--testo2);
  font-family: var(--f-tit); font-size: 13px; font-weight: 700;
  font-style: italic; text-decoration: none;
}
.pillola-utente a.info:hover { background: rgba(var(--ink), .09); color: var(--testo); }
.pillola-utente a.info:focus-visible { outline: 2px solid var(--viola); outline-offset: 2px; }

/* La ricerca rapida, dentro la pillola del menu. */
.cerca-rapida { position: relative; }
.cerca-rapida > summary {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  list-style: none; color: rgba(13, 10, 20, .6);
}
.cerca-rapida > summary::-webkit-details-marker { display: none; }
.cerca-rapida > summary::marker { content: ''; }
.cerca-rapida > summary svg { width: 17px; height: 17px; display: block; }
.cerca-rapida > summary:hover { background: rgba(13, 10, 20, .07); color: var(--su-chiaro); }
.cerca-rapida > summary:focus-visible { outline: 2px solid var(--viola); outline-offset: 1px; }
.cerca-rapida[open] > summary { background: var(--viola); color: #fff; }
.tendina-cerca {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  display: flex; gap: 8px; align-items: center;
  background: var(--vetro-alto); border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-medio); padding: 10px; box-shadow: var(--ombra-card);
  backdrop-filter: var(--sfoca-card);
}
.tendina-cerca input[type="search"] { margin: 0; min-width: 260px; }
@media (max-width: 520px) {
  .tendina-cerca { position: fixed; left: 12px; right: 12px; top: 70px; }
  .tendina-cerca input[type="search"] { min-width: 0; flex: 1; }
}

/* Una versione: il numero, e sotto il coperchio che apre il resto. */
.v-piu { margin-left: auto; }
.v-piu > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; list-style: none; font-size: 15px; color: var(--testo3);
}
.v-piu > summary:hover { background: rgba(var(--ink), .06); color: var(--testo); }
.v-piu > summary::-webkit-details-marker { display: none; }
.v-piu > summary::marker { content: ''; }
.v-piu > summary:hover { color: var(--testo); }
.v-piu > summary:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 3px; }
/* La freccia sta in fondo alla riga, e gira quando si apre: è l'unico segno
   che dice che quella riga si può aprire. */
.v-piu > summary { transition: transform .15s; }
.v-piu[open] > summary { transform: rotate(90deg); color: var(--testo); }

@media (prefers-reduced-motion: reduce) { .v-piu > summary { transition: none; } }


/* ===========================================================================
   1.43.0 — La scheda di un prodotto
   Una cosa in evidenza (l'ultimo rilascio), una riga di stato al posto di
   cinque riquadri, l'ingranaggio per quello che si tocca una volta all'anno,
   e niente linguette: registro, attività, segnalazioni e licenze hanno già il
   loro posto altrove.
   =========================================================================== */

/* L'ingranaggio in cima */
.ingranaggio { position: relative; flex: 0 0 auto; }
.ingranaggio > summary {
  list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--vetro-bordo); color: var(--testo2);
  display: flex; align-items: center; justify-content: center;
}
.ingranaggio > summary::-webkit-details-marker { display: none; }
.ingranaggio > summary::marker { content: ''; }
.ingranaggio > summary:hover { color: var(--testo); background: rgba(var(--ink), .05); }
.ingranaggio > summary:focus-visible { outline: 2px solid var(--viola-2); outline-offset: 2px; }
.ingranaggio[open] > summary { background: var(--viola); border-color: var(--viola); color: #fff; }
.ingranaggio > summary svg { width: 19px; height: 19px; display: block; }
.menu-ing {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 250px;
  max-width: calc(100vw - 24px);
  background: var(--vetro-alto); border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-medio); padding: 6px; box-shadow: var(--ombra-card);
  backdrop-filter: var(--sfoca-card); -webkit-backdrop-filter: var(--sfoca-card);
}
.menu-ing a {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 9px 12px; border-radius: 9px; color: var(--testo2);
  text-decoration: none; font-size: 14px; white-space: nowrap;
}
.menu-ing a:hover { background: rgba(var(--ink), .06); color: var(--testo); }
.menu-ing a span { color: var(--testo3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* La riga di stato */
.stato-prodotto {
  display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline;
  margin: 22px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--vetro-bordo2);
}
.stato-prodotto .sp-voce { display: inline-flex; align-items: baseline; gap: 7px; }
.stato-prodotto .e { color: var(--testo3); font-size: 12.5px; }
.stato-prodotto .v { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stato-prodotto .v.mono { font-family: var(--mono); font-size: 13.5px; }
.stato-prodotto .v.assente { color: var(--testo3); font-weight: 400; font-size: 13.5px; }

.fuori-prodotto { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin: 14px 0 0; }
.fuori-prodotto a { color: var(--testo2); text-decoration: none; }
.fuori-prodotto a::after { content: " →"; color: var(--testo3); font-size: 12px; }
.fuori-prodotto a:hover { color: var(--testo); }
.fuori-prodotto a.sveglia { color: var(--t-ambra); font-weight: 600; }
.torna { margin: 16px 0 0; }
.torna a { color: var(--testo2); text-decoration: none; font-size: 13.5px; }
.torna a:hover { color: var(--testo); }

/* L'ultimo rilascio */
.rilascio {
  margin: 22px 0 0; padding: 20px 22px 18px; border-radius: var(--r-medio);
  background: radial-gradient(520px 200px at 0% 0%, rgba(18,184,134,.10), transparent 70%),
              rgba(var(--ink), .035);
  border: 1px solid rgba(18,184,134,.22);
}
.rilascio.in-prova {
  background: radial-gradient(520px 200px at 0% 0%, rgba(149,68,235,.12), transparent 70%),
              rgba(var(--ink), .035);
  border-color: rgba(149,68,235,.30);
}
.rilascio.ferma {
  background: radial-gradient(520px 200px at 0% 0%, rgba(242,85,90,.10), transparent 70%),
              rgba(var(--ink), .035);
  border-color: rgba(242,85,90,.30);
}
.rilascio .et {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-verde); margin: 0 0 8px;
}
.rilascio.in-prova .et { color: var(--t-viola); }
.rilascio.ferma .et { color: var(--t-rosso); }
.rilascio-riga { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.rilascio .numerone {
  font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.05; color: var(--testo); text-decoration: none; font-variant-numeric: tabular-nums;
}
.rilascio .numerone:hover { color: var(--t-viola); }
.rilascio .stato-r { color: var(--t-verde); font-size: 13.5px; font-weight: 600; }
.rilascio.in-prova .stato-r { color: var(--t-viola); }
.rilascio.ferma .stato-r { color: var(--t-rosso); }
.rilascio .stato-r .male { color: var(--t-rosso); }
.rilascio .stato-r .attesa { color: var(--t-ambra); }
.rilascio .dettaglio {
  color: var(--testo3); font-size: 13px; margin: 8px 0 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
}
.rilascio .dettaglio .mod { color: var(--testo); font-weight: 600; }
.azioni-r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 15px; }

/* Le righe di prima */
/* 1.44.0 — la riga è un <details>: il coperchio è tutta la riga, e quello
   che si apre esce sotto invece di allargarla di lato. */
.riga-v { border-bottom: 1px solid rgba(var(--ink), .055); }
.riga-v > summary {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 11px 6px 12px 0; cursor: pointer; list-style: none;
}
.riga-v > summary::-webkit-details-marker { display: none; }
.riga-v > summary::marker { content: ''; }
.riga-v > summary:hover { background: rgba(var(--ink), .02); }
.riga-v > summary:focus-visible { outline: 2px solid var(--viola-2); outline-offset: -2px; }
.riga-v .freccia {
  position: static; transform: none; background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  flex: 0 0 auto; width: 16px; height: 16px; color: var(--testo3);
  transition: transform .15s; display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
}
.riga-v .freccia svg { width: 15px; height: 15px; }
.riga-v[open] > summary .freccia { transform: rotate(90deg); color: var(--testo); }
.riga-v > summary:hover .freccia { color: var(--testo2); }
.riga-v[open] > summary { background: rgba(var(--ink), .025); }
@media (prefers-reduced-motion: reduce) { .riga-v .freccia { transition: none; } }

.riga-corpo { padding: 2px 0 16px 30px; }
.riga-corpo .novita-riga {
  margin: 0 0 12px; font-size: 13px; color: var(--testo2);
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
}
.riga-corpo .novita-riga strong {
  color: var(--testo3); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding-top: 2px;
}
.riga-corpo .apri-scheda { margin: 0 0 12px; font-size: 13px; }
.riga-corpo .apri-scheda a { color: var(--t-viola); text-decoration: none; }
.riga-corpo .apri-scheda a:hover { color: var(--testo); }
.riga-corpo .azioni-r { margin-top: 0; }
.riga-v.ferma { opacity: .6; }
.riga-v .num {
  /* non è più un collegamento: cliccarlo avrebbe fatto due cose diverse
     a due millimetri di distanza dal coperchio. */
  font-family: var(--mono); font-size: 14.5px; font-weight: 700; color: var(--t-viola);
  text-decoration: none; font-variant-numeric: tabular-nums; min-width: 76px;
}

.riga-v .st {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo3);
}
.riga-v .st.ritirata { color: var(--t-rosso); }
.riga-v .st.prova { color: var(--t-viola); }
.riga-v .mod { color: var(--testo2); font-size: 13px; }
.riga-v .quando {
  color: var(--testo3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums;
}


/* La catena spezzata: l'unica cosa in elenco che merita un colore forte */
.rotta { color: var(--t-ambra); font-weight: 600; font-size: 13px; display: inline-flex; gap: 5px; align-items: baseline; }
.rotta::before { content: "\2AE2"; }

@media (max-width: 620px) {
  .rilascio .numerone { font-size: 28px; }
  .riga-v .quando { width: 100%; }
}

/* L'elenco delle versioni non è più una scheda dentro una scheda (1.43.0). */
.elenco-versioni { margin-top: 26px; }
.titolo-elenco {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline;
  justify-content: space-between; margin-bottom: 4px;
}
.titolo-elenco h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--testo3); margin: 0;
}
.comandi-elenco { display: flex; gap: 14px; flex-wrap: wrap; }
.comandi-elenco a {
  color: var(--testo2); font-size: 12.5px; text-decoration: none;
  border-bottom: 1px solid var(--vetro-bordo); padding-bottom: 1px;
}
.comandi-elenco a:hover { color: var(--testo); border-color: var(--chiaro-bordo); }
/* Un comando raro che deve stare in fila con i collegamenti, non urlare. */
.comandi-elenco .come-link {
  background: none; border: 0; border-bottom: 1px solid var(--vetro-bordo);
  color: var(--testo2); font-family: var(--f); font-size: 12.5px;
  padding: 0 0 1px; cursor: pointer;
}
.comandi-elenco .come-link:hover { color: var(--testo); border-color: var(--chiaro-bordo); }
.comandi-elenco form { display: inline; }

/* 1.46.0 — i filtri fini della pagina segnalazioni, dentro una piega. */
.filtri-fini { margin: 14px 0 18px; }
.filtri-fini > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  color: var(--testo2); font-size: 13px;
  border-bottom: 1px solid var(--vetro-bordo); padding-bottom: 2px;
}
.filtri-fini > summary::-webkit-details-marker { display: none; }
.filtri-fini > summary::marker { content: ''; }
.filtri-fini > summary::before { content: "›"; display: inline-block; transition: transform .15s; }
.filtri-fini[open] > summary::before { transform: rotate(90deg); }
.filtri-fini > summary:hover { color: var(--testo); }
.filtri-fini .filtri { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .filtri-fini > summary::before { transition: none; } }

/* Sul telefono anche il menu dell'ingranaggio si àncora allo schermo: aperto da
   un tondo largo 38 pixel in cima a destra, 250 di menu uscivano a sinistra. */
@media (max-width: 620px) {
  .menu-ing { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
  /* Il campo della nota nel punto di ritorno: 220 pixel fissi non ci stanno. */
  .rit-comandi { flex-direction: column; align-items: stretch; }
  .rit-comandi form { display: flex; flex-wrap: wrap; gap: 8px; }
  .rit-comandi select, .rit-comandi input[name="nota"] { min-width: 0; width: 100%; max-width: none; }
}

/* 1.46.0 — un campo che vuole essere largo, ma non più dello schermo.
   Erano `min-width:280px` e `min-width:300px` scritti in riga: su 390 pixel,
   dentro un modulo che ha già i suoi margini, escono dal lato destro. */
.campo-largo { margin: 0; min-width: min(280px, 100%); max-width: 100%; }
@media (max-width: 620px) { .campo-largo { width: 100%; min-width: 0; } }

/* 1.46.0 — sul telefono l'ingranaggio resta a destra.
   La riga del titolo va a capo, e lui finiva da solo sotto il nome, allineato
   a sinistra come se fosse un'altra cosa. */
@media (max-width: 620px) {
  .titolo-riga .ingranaggio { margin-left: auto; margin-top: -6px; }
}

/* ===========================================================================
   1.47.1 — le novità erano un muro, e la nuvoletta non aveva fondo
   ---------------------------------------------------------------------------
   Il changelog veniva stampato dentro un <pre>: carattere da terminale,
   trattini a inizio riga, asterischi e apici a vista, e — soprattutto —
   nessun limite d'altezza. Un changelog di trenta righe apriva una finestrella
   più alta della pagina, che copriva tutto quello che c'era sotto e non si
   poteva nemmeno scorrere: l'unico modo di tornare indietro era richiuderla.
   Ora le righe sono un elenco puntato nel carattere del testo, e la
   finestrella ha un tetto: oltre quello scorre dentro di sé.
   =========================================================================== */
.novita-elenco {
  margin: 8px 0 0; padding-left: 18px;
  font-family: var(--f); font-size: 13px; line-height: 1.6; color: var(--testo2);
}
.novita-elenco li { margin: 0 0 5px; }
.novita-elenco li:last-child { margin-bottom: 0; }
.novita-elenco li::marker { color: var(--testo3); }
.novita-elenco code {
  font-family: var(--mono); font-size: 11.5px; color: var(--testo);
  background: rgba(var(--ink), .06); border-radius: 4px; padding: 1px 4px;
}
.novita-elenco strong { color: var(--testo); font-weight: 600; }

/* Il tetto della finestrella. `overscroll-behavior` perché lo scorrimento
   dentro la nuvoletta non trascini anche la pagina sotto. */
.info-i .info-testo {
  max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain;
}
.info-i .info-testo .novita-elenco { padding-right: 2px; }

/* Il rimando alla scheda: la finestrella dà le righe, la scheda dà tutto. */
.verso-versione { margin: 10px 0 0; font-size: 12.5px; }
.verso-versione a { color: var(--t-viola); text-decoration: none; }
.verso-versione a:hover { color: var(--testo); }

@media (max-width: 620px) {
  /* Sul telefono la finestrella era `position: fixed` ma con `top: auto`:
     prendeva la posizione della ⓘ e poi restava incollata lì rispetto allo
     schermo. Se la ⓘ stava a due terzi di pagina, la finestrella nasceva
     fuori dal bordo di sotto — e siccome è fissa, scorrere la pagina non la
     riportava dentro: non c'era modo di leggerla. Agganciata al fondo dello
     schermo entra sempre, dovunque stia la ⓘ che l'ha aperta. */
  .info-i .info-testo {
    top: auto; margin-top: 0;
    bottom: calc(90px + env(safe-area-inset-bottom)); /* sopra la barra .stanze */
    max-height: 58vh;
  }
}

/* La stessa lista, in pagina: qui non sta in una finestrella, e il testo può
   respirare un po' di più. */
.scheda > .novita-elenco { font-size: 14px; margin-top: 0; }

/* ===========================================================================
   1.48.0 — la coda di prova
   ---------------------------------------------------------------------------
   Il riquadro sopra parla della versione che sta girando sul sito di prova, ed
   è una sola perché il sito è uno. Queste sono quelle che aspettano dietro,
   una per chat. Righe sottili, senza scatole: sono un elenco d'attesa, non
   quattro cose da decidere adesso.
   =========================================================================== */
.coda-prova { margin-top: 16px; border-top: 1px solid rgba(var(--ink), .07); padding-top: 12px; }
.coda-tit {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--testo3);
}
.coda-riga {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(var(--ink), .045);
  font-size: 13px;
}
.coda-riga:last-of-type { border-bottom: 0; }
.coda-riga a.mono { color: var(--t-viola); text-decoration: none; font-weight: 600; }
.coda-riga a.mono:hover { color: var(--testo); }
.coda-chi { color: var(--testo2); }
.coda-quando { color: var(--testo3); }
.coda-az { margin: 0 0 0 auto; }

/* Il verdetto: campo e due bottoni. Su 390 pixel il campo non ci sta accanto
   ai bottoni — restava largo quanto «Cosa hai vis…» — e allora va sopra, per
   intero, coi bottoni sotto. */
.prova-verdetto { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prova-verdetto input[type="text"] { flex: 1 1 260px; min-width: 0; }
@media (max-width: 620px) {
  /* `1 1 100%` non basta: con min-width 0 il campo si lascia stringere sotto
     la base e resta in riga coi bottoni, largo quanto «Cosa». Con shrink a 0
     la riga è sua e i bottoni vanno sotto. */
  .prova-verdetto input[type="text"] { flex: 1 0 100%; }
  .prova-verdetto .mini { flex: 1 1 auto; }
}
@media (max-width: 620px) {
  .coda-az { margin-left: 0; width: 100%; }
  .coda-az .mini { width: 100%; }
}

/* ===========================================================================
   1.52.0 / 1.53.0 — la cornice di NSAi OS
   ---------------------------------------------------------------------------
   Lo scheletro di nsai.eu/app, misurato sulla pagina vera: il guscio lilla con
   7 pixel di margine, il menu scuro a sinistra che di partenza è stretto a
   icone (68 px) e si allarga a 236 passandoci sopra, la lastra chiara con la
   barra bianca in alto, la pagina che scorre DENTRO la lastra, il piede fermo
   in fondo con dove sei e i dati di NSAi, e il + come una linguetta
   nell'angolo in basso a destra.

   Nella 1.52.0 la pagina scorreva con la finestra e il menu era sempre largo:
   non era quello che si vede su nsai.eu/app.

   La testata a pillola e la barra delle stanze della 1.51 non si stampano più.
   Le loro regole qui sopra sono rimaste (R1): .barra, .pillola-menu,
   .pillola-utente, .stanze, .stanza, .chi-sei, .dove-sei, .cerca-rapida.
   =========================================================================== */

body.os { background: var(--guscio); }
body.os::before, body.os::after { display: none; }
.os-velo { display: none; }

/* --- il menu ------------------------------------------------------------ */
.os-menu {
  width: 236px; flex: none; display: flex; flex-direction: column;
  background: var(--menu); color: var(--menu-testo);
  border-radius: var(--r-lastra) 0 0 var(--r-lastra); overflow: hidden;
}
.os-marchio { display: flex; align-items: center; gap: 11px; height: 62px; padding: 0 16px; margin: 0;
              text-decoration: none; flex: none; overflow: hidden; }
.os-marchio .glifo { width: 36px; height: 36px; border-radius: 11px; font-size: 12.5px; flex: none; }
.os-marchio .mk { white-space: nowrap; }
.os-marchio .mk-r { font-size: 18px;
  background: linear-gradient(100deg, #B36BFF, #E879F9); -webkit-background-clip: text; background-clip: text; }
.os-marchio .mk-r .nsa { color: #fff; -webkit-text-fill-color: #fff; }
.os-marchio .mk small { font-size: 8.6px; letter-spacing: .22em; margin-top: 4px;
  background: none; -webkit-text-fill-color: var(--menu-tenue); color: var(--menu-tenue); }

.os-voci { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 14px;
           display: flex; flex-direction: column; gap: 1px; scrollbar-width: none; }
.os-voci::-webkit-scrollbar { display: none; }
.os-gruppo { margin: 14px 11px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
             text-transform: uppercase; color: var(--menu-testo); opacity: .55; white-space: nowrap; }
.os-gruppo:first-child { margin-top: 4px; }
.os-voce {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 11px; white-space: nowrap;
  color: var(--menu-testo); text-decoration: none; font-size: 13.5px; font-weight: 500;
}
.os-voce svg { width: 18px; height: 18px; flex: none; color: var(--menu-tenue); }
.os-voce:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.os-voce.attiva { background: var(--accento-fondo); color: var(--accento-testo); font-weight: 600; }
.os-voce.attiva svg { color: var(--accento-testo); }
.os-voce.attiva::before { content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 3px;
                          border-radius: 3px; background: var(--accento); }
.os-voce:focus-visible, .os-sotto a:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.os-conta { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
            background: var(--accento); color: #16121F; font-variant-numeric: tabular-nums; }
.os-conta.allarme { background: #F2555A; color: #fff; }
.os-sotto { display: flex; flex-direction: column; margin: 2px 0 6px 41px; border-left: 1px solid var(--menu-bordo); }
.os-sotto a { padding: 6px 12px; font-size: 13px; color: var(--menu-tenue); text-decoration: none;
              border-radius: 0 8px 8px 0; white-space: nowrap; }
.os-sotto a:hover { color: #fff; }
.os-sotto a.on { color: var(--accento-testo); font-weight: 600; }
.os-sotto a span { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }

.os-utente { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 16px;
             border-top: 1px solid var(--menu-bordo); flex: none; overflow: hidden; }
.os-utente-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.os-utente-testo strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-utente-testo span { font-size: 11px; color: var(--menu-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-esci { margin-left: auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
           color: var(--menu-tenue); flex: none; }
.os-esci:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.os-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--viola); color: #fff;
             display: grid; place-items: center; font-family: var(--f); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.os-avatar.piccolo { width: 24px; height: 24px; font-size: 10px; }

/* --- la lastra ---------------------------------------------------------- */
.os-corpo { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
            background: var(--fondo); border-radius: 0 var(--r-lastra) var(--r-lastra) 0; overflow: hidden; }
.os-barra {
  display: flex; align-items: center; gap: 12px; flex: none;
  height: 62px; padding: 0 18px; background: var(--fondo); border-bottom: 1px solid var(--vetro-bordo2);
  position: relative; z-index: 40;
}
.os-apri { width: 38px; height: 38px; border-radius: 11px; border: 0; background: transparent;
           color: var(--testo2); cursor: pointer; display: grid; place-items: center; flex: none; }
.os-apri:hover { background: var(--riempi); color: var(--testo); }
.os-apri:focus-visible { outline: 2px solid var(--viola); outline-offset: 1px; }
body.os-compatto .os-apri { color: var(--viola); }
.os-apri .x { display: none; }
.os-titolo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.os-sezione { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--testo3); }
.os-pagina { font-family: var(--f-tit); font-size: 17.5px; font-weight: 600; letter-spacing: -.015em;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-spazio { flex: 1 1 auto; }
.os-cerca { margin: 0; flex: 0 1 380px; min-width: 0; }
.os-cerca-campo { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0;
  padding: 0 12px; border-radius: 12px; background: var(--riempi); color: var(--testo3);
  border: 1px solid transparent; cursor: text; font-weight: 400; }
.os-cerca-campo:focus-within { background: var(--vetro); border-color: var(--viola); box-shadow: 0 0 0 3px var(--viola-tenue); }
.os-cerca-campo svg { flex: none; }
.os-cerca-campo kbd { font-family: var(--f); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px;
  background: var(--vetro); border: 1px solid var(--vetro-bordo); color: var(--testo3); }
.os-cerca-campo:focus-within kbd { display: none; }
.os-cerca-campo input[type=search] { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent;
  box-shadow: none; font-size: 13.5px; color: var(--testo); }
.os-cerca-campo input[type=search]:focus { box-shadow: none; background: transparent; }

.os-io { position: relative; flex: none; }
.os-io > summary { list-style: none; cursor: pointer; display: block; border-radius: 50%; }
.os-io > summary::-webkit-details-marker { display: none; }
.os-io > summary::marker { content: ''; }
.os-io > summary:focus-visible { outline: 2px solid var(--viola); outline-offset: 2px; }
.os-io[open] .os-avatar { box-shadow: 0 0 0 3px var(--viola-tenue); }
.os-tendina {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 236px; padding: 6px;
  background: var(--vetro); border: 1px solid var(--vetro-bordo); border-radius: var(--r-medio);
  box-shadow: 0 20px 50px -12px rgba(var(--nero), calc(.9 * var(--nero-k)));
}
.os-tendina-tit { padding: 10px 12px 12px; border-bottom: 1px solid var(--vetro-bordo2); margin-bottom: 6px; }
.os-tendina-tit strong { display: block; font-size: 14px; }
.os-tendina-tit span { display: block; font-size: 12.5px; color: var(--testo2); overflow-wrap: anywhere; }
.os-tendina a { display: block; padding: 10px 12px; border-radius: var(--r-piccolo); color: var(--testo);
                text-decoration: none; font-size: 14px; font-weight: 500; }
.os-tendina a:hover { background: var(--riempi); }
.os-tendina a.uscita { color: var(--testo2); border-top: 1px solid var(--vetro-bordo2); margin-top: 6px; border-radius: 0; }

.os-vista { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.os-vista:focus { outline: none; }
body.os .contenuto { width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px 18px 90px; }

/* --- il piede fermo in fondo: dove sei, e i dati di NSAi --------------- */
.os-fondo {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 4px 14px;
  padding: 4px 76px 4px 16px; background: var(--vetro); border-top: 1px solid var(--vetro-bordo2);
  font-size: 12px; color: var(--testo3); min-height: 27px;
}
.os-briciole { font-size: 12px; color: var(--testo2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
               min-width: 0; flex: 1 1 auto; }
body.os .os-fondo .piede { all: unset; display: flex; gap: 4px 14px; flex: 0 1 auto; justify-content: flex-end;
  white-space: nowrap; font-size: 11px; color: var(--testo3); }
body.os .os-fondo .piede span { overflow: hidden; text-overflow: ellipsis; }
body.os .os-fondo .piede a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1280px) { body.os .os-fondo .piede span:first-child { display: none; } }
@media (max-width: 980px)  { body.os .os-fondo .piede span:not(:last-child) { display: none; } }

/* --- il +: come nel render approvato, un quadrato viola sopra il piede --- */
.os-piu { position: fixed; z-index: 80; right: 23px; bottom: 48px; }
.os-piu > summary { list-style: none; }
.os-piu > summary::-webkit-details-marker { display: none; }
.os-piu > summary::marker { content: ''; }
body.os .bottone.piu {
  position: static; display: grid; place-items: center; padding: 0; min-width: 0;
  width: 48px; height: 48px; border: 0; border-radius: 15px;
  background: var(--viola); color: #fff; box-shadow: 0 8px 22px -6px rgba(122, 43, 214, .55); transform: none;
}
body.os .bottone.piu svg { width: 22px; height: 22px; transition: transform .19s; }
body.os .bottone.piu:hover { transform: none; filter: brightness(1.06); }
.os-piu[open] > .bottone.piu svg { transform: rotate(45deg); }
.os-piu-menu {
  position: absolute; right: 0; bottom: 58px; width: 290px; max-width: calc(100vw - 32px);
  background: var(--vetro); border: 1px solid var(--vetro-bordo); border-radius: 16px; padding: 6px;
  box-shadow: 0 20px 50px -12px rgba(var(--nero), calc(.9 * var(--nero-k)));
}
.os-piu-testa { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
                text-transform: uppercase; color: var(--testo3); }
.os-piu-sep { height: 1px; background: var(--vetro-bordo2); margin: 4px 6px; }
.os-piu-voce { display: flex; gap: 11px; align-items: center; padding: 9px 10px; border-radius: 10px;
               color: var(--testo); text-decoration: none; }
.os-piu-voce:hover, .os-piu-voce:focus-visible { background: var(--riempi); outline: none; }
.os-piu-voce svg { color: var(--viola); flex: none; }
.os-piu-voce b { display: block; font-size: 13.5px; font-weight: 600; }
.os-piu-voce small { display: block; font-size: 12px; color: var(--testo3); }

/* --- il computer: tutto dentro la finestra, scorre solo la lastra ------- */
@media (min-width: 760px) {
  html, body.os { height: 100%; }
  body.os { overflow: hidden; }
  .os-app { display: flex; height: 100vh; height: 100dvh; padding: 7px; }
  .os-menu { position: relative; z-index: 95;
    transition: width .2s cubic-bezier(.4, 0, .2, 1), margin-right .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s; }
  /* Stretto: si allarga SOPRA la pagina (il margine negativo gli lascia
     occupare solo i suoi 68 pixel), uscendo si richiude. */
  body.os-compatto .os-menu { width: 68px; }
  body.os-compatto .os-menu.espanso { width: 236px; margin-right: -168px;
    box-shadow: 18px 0 40px -18px rgba(29, 23, 48, .55); }
  body.os-compatto .os-menu:not(.espanso) .os-marchio { justify-content: center; padding: 0 6px; }
  body.os-compatto .os-menu:not(.espanso) .os-marchio .mk,
  body.os-compatto .os-menu:not(.espanso) .os-voce > span:not(.os-conta),
  body.os-compatto .os-menu:not(.espanso) .os-utente-testo,
  body.os-compatto .os-menu:not(.espanso) .os-esci,
  body.os-compatto .os-menu:not(.espanso) .os-sotto { display: none; }
  body.os-compatto .os-menu:not(.espanso) .os-gruppo { margin: 8px 14px; height: 1px; background: var(--menu-bordo); opacity: 1; }
  body.os-compatto .os-menu:not(.espanso) .os-gruppo span { display: none; }
  body.os-compatto .os-menu:not(.espanso) .os-voci { padding: 10px 6px; }
  body.os-compatto .os-menu:not(.espanso) .os-voce { justify-content: center; padding: 11px 0; }
  body.os-compatto .os-menu:not(.espanso) .os-voce.attiva::before { left: 0; width: 2.5px; }
  body.os-compatto .os-menu:not(.espanso) .os-conta { position: absolute; top: 5px; right: 9px; min-width: 8px; width: 8px;
    height: 8px; padding: 0; font-size: 0; border: 2px solid var(--menu); }
  body.os-compatto .os-menu:not(.espanso) .os-utente { justify-content: center; padding: 12px 6px; }
}

/* --- il telefono: il menu scende dalla barra, la pagina scorre normale --- */
@media (max-width: 759px) {
  .os-app { display: block; padding: 0; }
  .os-corpo { border-radius: 0; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .os-barra { position: sticky; top: 0; height: auto; padding: env(safe-area-inset-top, 0px) 12px 0;
              min-height: calc(58px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .os-apri { background: var(--riempi); color: var(--testo); }
  .os-sezione { display: none; }
  .os-cerca { flex: 0 1 44px; }
  .os-cerca-campo { padding: 0 11px; }
  .os-cerca:focus-within { position: absolute; left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 5; }
  .os-cerca:not(:focus-within) .os-cerca-campo input { width: 0; opacity: 0; }
  .os-cerca:not(:focus-within) .os-cerca-campo kbd { display: none; }
  .os-menu {
    position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: auto;
    width: auto; max-height: calc(100dvh - 58px - env(safe-area-inset-top, 0px) - 14px);
    border-radius: 0 0 26px 26px; z-index: 60;
    transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .26s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .26s;
    box-shadow: 0 26px 50px rgba(29, 23, 48, .38);
  }
  .os-app.menu-aperto .os-menu { transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .18s ease, transform .26s cubic-bezier(.32, .72, 0, 1); }
  .os-app.menu-aperto .os-velo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(22, 18, 31, .42); }
  .os-app.menu-aperto .os-apri .tre { display: none; }
  .os-app.menu-aperto .os-apri .x { display: block; }
  .os-marchio { display: none; }
  .os-voci { padding: 6px 16px 10px; }
  .os-voce { min-height: 50px; padding: 0 6px; border-radius: 0; border-bottom: 1px solid var(--menu-bordo); font-size: 16px; }
  .os-voce:hover, .os-voce.attiva { background: transparent; }
  .os-voce.attiva::before { left: -16px; top: 12px; bottom: 12px; }
  .os-gruppo { margin: 16px 6px 2px; font-size: 11px; }
  .os-sotto { margin-left: 36px; }
  .os-sotto a { padding: 9px 12px; font-size: 15px; }
  .os-vista { overflow: visible; }
  body.os .contenuto { padding: 18px 16px 40px; }
  .os-fondo { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px calc(84px + env(safe-area-inset-bottom)); }
  body.os .os-fondo .piede { flex-direction: column; gap: 2px; white-space: normal; }
  body.os .os-fondo .piede span:not(:last-child) { display: block; }
  .os-piu { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  body.os .bottone.piu { width: 50px; height: 50px; }
  .os-piu-menu { right: 0; bottom: 62px; }
  .info-i .info-testo { bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .os-menu, .os-piu-menu, body.os .bottone.piu, body.os .bottone.piu svg { transition: none; }
}
.os-barra .indietro { color: var(--testo2); }

/* ===========================================================================
   1.52.0 — la scheda di un prodotto come un repository
   =========================================================================== */
.repo-linguette {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin: 18px 0 22px; border-bottom: 1px solid var(--vetro-bordo);
}
.repo-linguette::-webkit-scrollbar { display: none; }
.repo-linguette a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 10px 12px 12px; color: var(--testo2); text-decoration: none; font-size: 13.5px; font-weight: 600;
  border-radius: 8px 8px 0 0;
}
.repo-linguette a:hover { color: var(--testo); background: var(--riempi); }
.repo-linguette a.attiva { color: var(--testo); }
.repo-linguette a.attiva::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
                                  border-radius: 2px; background: var(--viola); }
.repo-linguette a span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--riempi);
  color: var(--testo2); font-size: 11.5px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; }
.repo-linguette a.allarme span { background: rgba(229, 72, 77, .14); color: var(--t-rosso); }
.repo-linguette a:focus-visible { outline: 2px solid var(--viola); outline-offset: -2px; }
/* La riga di stato sta sopra le linguette: non le serve più la sua riga sotto. */
.stato-prodotto { border-bottom: 0; padding-bottom: 0; }

.repo-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.repo-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1020px) { .repo-griglia { grid-template-columns: 1fr; } }

.repo-comandi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.repo-versione { margin: 0; }
.os-scelta { display: inline-flex; align-items: center; gap: 7px; margin: 0; height: 34px; padding: 0 4px 0 11px;
  border-radius: 10px; background: var(--riempi); color: var(--testo2); font-size: 13px; font-weight: 600; }
.os-scelta select { margin: 0; width: auto; height: 32px; padding: 0 30px 0 2px; border: 0; background-color: transparent;
  font-size: 13px; font-weight: 600; color: var(--testo); box-shadow: none;
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; }
.repo-briciole { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13.5px; margin: 0; }
.repo-briciole a { color: var(--viola); text-decoration: none; font-weight: 600; }
.repo-briciole a:hover { text-decoration: underline; }
.repo-briciole span { color: var(--testo3); }
p.repo-briciole { margin: 0 0 6px; font-size: 13px; }

.repo-file { background: var(--vetro); border: 1px solid var(--vetro-bordo); border-radius: var(--r-card);
             overflow: hidden; box-shadow: var(--ombra-card); }
.repo-ultima { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px;
  background: var(--fondo-2); border-bottom: 1px solid var(--vetro-bordo2); font-size: 13px; }
.repo-ultima .repo-msg { color: var(--testo2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.tenue { color: var(--testo3); }
.mono { font-family: var(--mono); font-size: .92em; }
.repo-tabella { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.repo-tabella td { padding: 9px 16px; border-bottom: 1px solid var(--vetro-bordo2); vertical-align: middle; }
.repo-tabella tr:last-child td { border-bottom: 0; }
.repo-tabella tr:hover td { background: var(--fondo-2); }
.repo-tabella a { color: var(--testo); text-decoration: none; }
.repo-tabella a:hover { color: var(--viola); text-decoration: underline; }
.repo-nome { white-space: nowrap; }
.repo-nome svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 9px; }
.repo-nome svg.cartella { fill: var(--viola-tenue); stroke: var(--viola); stroke-width: 1.6; }
.repo-nome svg.foglio { fill: none; stroke: var(--testo3); stroke-width: 1.6; }
.repo-tabella .repo-msg { color: var(--testo2); width: 100%; }
.repo-tabella .repo-msg .mono { color: var(--t-viola); margin-right: 6px; }
.repo-quando { color: var(--testo3); white-space: nowrap; text-align: right; font-size: 12.5px; }
.repo-quando .scarica { margin-left: 10px; }
@media (max-width: 620px) {
  .repo-tabella .repo-msg { display: none; }
  .repo-ultima .repo-msg { max-width: 100%; }
}

.repo-readme { background: var(--vetro); border: 1px solid var(--vetro-bordo); border-radius: var(--r-card); overflow: hidden; }
.repo-readme-testa { padding: 11px 16px; border-bottom: 1px solid var(--vetro-bordo2); font-size: 12px; font-weight: 700;
                     letter-spacing: .08em; color: var(--testo3); }
.repo-readme-corpo { padding: 6px 24px 22px; max-width: 76ch; overflow-wrap: anywhere; }
.repo-readme-corpo h2 { font-size: 22px; margin: 16px 0 8px; text-wrap: balance; }
.repo-readme-corpo h3, .repo-readme-corpo h4 { font-family: var(--f-tit); font-size: 15px; margin: 20px 0 6px; }
.repo-readme-corpo p { margin: 8px 0; color: var(--testo2); }
.repo-readme-corpo ul, .repo-readme-corpo ol { margin: 6px 0; padding-left: 22px; color: var(--testo2); }
.repo-readme-corpo li { margin-bottom: 4px; }

.repo-riquadro { background: var(--vetro); border: 1px solid var(--vetro-bordo); border-radius: var(--r-card); padding: 16px 18px; }
.repo-riquadro h3 { font-family: var(--f-tit); font-size: 14px; margin: 0 0 8px; }
.repo-riquadro .spiegazione { font-size: 13.5px; margin: 0; }
details.repo-riquadro > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
details.repo-riquadro > summary::-webkit-details-marker { display: none; }
details.repo-riquadro > summary::after { content: "›"; color: var(--testo3); font-size: 18px; transition: transform .15s; }
details.repo-riquadro[open] > summary::after { transform: rotate(90deg); }
details.repo-riquadro > summary h3 { margin: 0; }
details.repo-riquadro.pericolo > summary h3 { color: var(--t-rosso); }
.repo-dati { margin: 0; display: flex; flex-direction: column; }
.repo-dati div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--vetro-bordo2); font-size: 13px; }
.repo-dati div:last-child { border-bottom: 0; }
.repo-dati dt { color: var(--testo3); }
.repo-dati dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   1.52.0 — la Libreria
   =========================================================================== */
.lib-testa { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.os-schede { display: inline-flex; max-width: 100%; overflow-x: auto; gap: 2px; padding: 3px; border-radius: 999px; background: var(--riempi); }
.os-schede a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--testo2); text-decoration: none; white-space: nowrap; }
.os-schede a:hover { color: var(--testo); }
.os-schede a.on { background: var(--vetro); color: var(--testo); box-shadow: 0 1px 3px rgba(var(--nero), calc(.5 * var(--nero-k))); }
.os-schede b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vetro-bordo2);
  font-size: 10.5px; line-height: 18px; text-align: center; color: var(--testo2); }
.os-schede a:focus-visible { outline: 2px solid var(--viola); outline-offset: 1px; }
.lib-cerca { margin: 0; flex: 0 1 300px; min-width: 0; }
.lib-cerca input[type=search] { margin: 0; padding: 9px 14px; font-size: 13.5px; }

.lib-nuova > summary { font-weight: 600; }
.lib-nuova:not([open]) { padding: 14px 20px; }
.lib-usi { border: 1px solid var(--vetro-bordo); border-radius: var(--r-medio); padding: 12px 16px; margin: 0 0 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.lib-usi legend { padding: 0 6px; font-weight: 600; font-size: 13.5px; }
.lib-usi .riga-casella { margin: 0; font-size: 13.5px; }

.lib-moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.lib-modulo { display: flex; flex-direction: column; gap: 10px; padding: 16px; text-decoration: none; color: inherit;
  background: var(--vetro); border: 1px solid var(--vetro-bordo); border-radius: var(--r-card); box-shadow: var(--ombra-card);
  transition: border-color .16s; }
.lib-modulo:hover { border-color: rgba(122, 43, 214, .35); }
.lib-modulo:focus-visible, .lib-grafica:focus-visible { outline: 2px solid var(--viola); outline-offset: 2px; }
.lib-modulo-t { display: flex; align-items: flex-start; gap: 12px; }
.lib-icona { width: 38px; height: 38px; border-radius: 11px; background: var(--viola-tenue); color: var(--viola);
             display: grid; place-items: center; flex: none; }
.lib-modulo-nome { display: flex; flex-direction: column; min-width: 0; }
.lib-modulo-nome b { font-family: var(--f-tit); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.lib-modulo-nome small { color: var(--testo3); font-size: 12.5px; }
.lib-desc { color: var(--testo2); font-size: 13px; }
.lib-piede { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: auto; padding-top: 10px;
             border-top: 1px solid var(--vetro-bordo2); font-size: 12px; color: var(--testo3); }
.lib-uso { padding: 2px 7px; border-radius: 6px; background: var(--riempi); color: var(--testo2); font-size: 11.5px; }

.lib-grafiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lib-grafica { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--vetro); border: 1px solid var(--vetro-bordo); border-radius: var(--r-card); box-shadow: var(--ombra-card); }
.lib-grafica:hover { border-color: rgba(122, 43, 214, .35); }
.lib-anteprima { aspect-ratio: 16 / 10; max-width: 100%; display: grid; place-items: center; overflow: hidden;
  background-color: var(--riempi);
  background-image: linear-gradient(45deg, rgba(var(--ink), .04) 25%, transparent 25%, transparent 75%, rgba(var(--ink), .04) 75%),
                    linear-gradient(45deg, rgba(var(--ink), .04) 25%, transparent 25%, transparent 75%, rgba(var(--ink), .04) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; border-bottom: 1px solid var(--vetro-bordo2); }
.lib-anteprima img { max-width: 78%; max-height: 74%; object-fit: contain; display: block; }
.lib-est { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--testo3);
           padding: 10px 14px; border: 1px dashed var(--vetro-bordo); border-radius: 10px; }
.lib-info { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.lib-riga { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.lib-riga b { font-weight: 600; font-size: 14px; }
.lib-info small { color: var(--testo3); font-size: 12px; }

.lib-chip-elenco { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px;
  background: var(--riempi); border: 1px solid var(--vetro-bordo2); color: var(--testo); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.lib-chip svg { color: var(--viola); }
.lib-chip:hover { border-color: rgba(122, 43, 214, .35); color: var(--viola); }
.lib-chip .mono { color: var(--testo3); }
.lib-grande { display: grid; place-items: center; padding: 28px; border-radius: var(--r-card); border: 1px solid var(--vetro-bordo);
  background-color: var(--riempi);
  background-image: linear-gradient(45deg, rgba(var(--ink), .04) 25%, transparent 25%, transparent 75%, rgba(var(--ink), .04) 75%),
                    linear-gradient(45deg, rgba(var(--ink), .04) 25%, transparent 25%, transparent 75%, rgba(var(--ink), .04) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.lib-grande img { max-width: 100%; max-height: 360px; object-fit: contain; display: block; }
.lib-versioni .repo-nome .targa { margin-left: 8px; }
.repo-nota { color: var(--testo2); font-size: 13.5px; margin: 0; }
.repo-riquadro .repo-nota + .repo-nota { margin-top: 10px; }
.repo-nota a { color: var(--viola); font-weight: 600; text-decoration: none; }
.repo-glifo { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none;
              background: var(--viola-tenue); color: var(--viola); }

/* ===========================================================================
   1.53.0 — le pagine come nel render approvato
   ---------------------------------------------------------------------------
   Repository, scheda di un prodotto e Libreria sono riscritte con i pezzi del
   render (https://claude.ai/artifact/37dyGEhh9fCur2WMr55bC4), non vestite
   sopra il markup di prima. Le classi hanno il prefisso r- perché molti nomi
   del render (.scheda, .fascia, .rilascio, .modulo, .filtri) l'Hub li usa già
   per altre cose. I colori vengono dai gettoni dell'Hub: valgono chiaro e scuro.
   =========================================================================== */
.r-pagina { display: flex; flex-direction: column; gap: 14px; }
.r-pagina h2.r-tit { font-family: var(--f-tit); letter-spacing: -.015em; font-size: 18px; margin: 0; text-wrap: balance; }
.r-sub { color: var(--testo3); font-size: 13px; }
.r-mono { font-family: var(--mono); font-size: 12.5px; }
.r-spazio { flex: 1 1 auto; }

.r-card { background: var(--vetro); border: 1px solid var(--vetro-bordo2); border-radius: 14px; box-shadow: var(--ombra-card); min-width: 0; }
.r-card-testa { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--vetro-bordo2);
  font-weight: 600; font-size: 13.5px; }
.r-card-corpo { padding: 14px 16px; }
.r-card h3 { font-family: var(--f-tit); letter-spacing: -.01em; font-size: 14px; margin: 0; }

.r-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; text-decoration: none; }
.r-pill.wordpress { background: rgba(47, 111, 179, .12); color: var(--t-blu); }
.r-pill.whmcs { background: rgba(245, 158, 11, .14); color: var(--t-ambra); }
.r-pill.applicativo { background: var(--viola-tenue); color: var(--t-viola); }
.r-pill.altro { background: var(--riempi); color: var(--testo2); border-color: var(--vetro-bordo); }
.r-pill.ok { background: rgba(18, 184, 134, .12); color: var(--t-verde); }
.r-pill.prova { background: rgba(245, 158, 11, .14); color: var(--t-ambra); }
.r-pill.err { background: rgba(229, 72, 77, .12); color: var(--t-rosso); }
.r-pill.ok::before, .r-pill.prova::before, .r-pill.err::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.r-schede { display: inline-flex; max-width: 100%; overflow-x: auto; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--riempi); scrollbar-width: none; }
.r-schede::-webkit-scrollbar { display: none; }
.r-schede a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--testo3); white-space: nowrap; text-decoration: none; }
.r-schede a:hover { color: var(--testo); }
.r-schede a.on { background: var(--vetro); color: var(--testo); box-shadow: 0 1px 3px rgba(29, 23, 48, .14); }
.r-schede b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vetro-bordo);
  color: var(--testo2); font-size: 10.5px; line-height: 18px; text-align: center; }
.r-schede b.allarme { background: rgba(229, 72, 77, .16); color: var(--t-rosso); }
.r-schede a:focus-visible { outline: 2px solid var(--viola); outline-offset: -2px; }

.r-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--vetro-bordo); background: var(--vetro); color: var(--testo); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.r-btn:hover { border-color: rgba(122, 43, 214, .35); color: var(--viola); }
.r-btn.primario { background: var(--viola); border-color: var(--viola); color: #fff; }
.r-btn.primario:hover { filter: brightness(1.08); color: #fff; }
.r-btn svg { width: 15px; height: 15px; }
.r-btn:focus-visible { outline: 2px solid var(--viola); outline-offset: 2px; }

.r-tab-wrap { overflow-x: auto; }
.r-tabella { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.r-tabella th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo3); padding: 10px 16px; border-bottom: 1px solid var(--vetro-bordo2); background: var(--fondo); }
.r-tabella td { padding: 11px 16px; border-bottom: 1px solid var(--vetro-bordo2); vertical-align: middle; }
.r-tabella tr:last-child td { border-bottom: 0; }
.r-tabella tr.r-click { cursor: pointer; }
.r-tabella tr.r-click:hover td { background: var(--riempi); }
.r-tabella .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.r-tabella th.num { text-align: right; }
.r-nome { display: flex; flex-direction: column; gap: 2px; }
.r-nome a { font-weight: 600; color: var(--viola); text-decoration: none; }
.r-nome a:hover { text-decoration: underline; }
.r-nome span { color: var(--testo3); font-size: 12.5px; }
.r-tabella .segnali { border: 0; padding: 0; margin: 0; }
@media (max-width: 760px) { .r-nascondi { display: none; } }

/* la scheda di un prodotto */
.r-repo-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.r-repo-testa h2 { font-family: var(--f-tit); font-size: 21px; letter-spacing: -.015em; margin: 0; }
.r-repo-testa h2 span { color: var(--testo3); font-weight: 500; }
.r-repo-testa > svg { flex: none; color: var(--testo3); }
.r-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.r-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 980px) { .r-griglia { grid-template-columns: 1fr; } }
.r-fascia { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: 14px;
  background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .28); }
.r-fascia p { margin: 0; flex: 1 1 280px; font-size: 13.5px; color: var(--testo2); }
.r-fascia strong { color: var(--t-ambra); }
.r-fascia form { margin: 0; display: inline-flex; }
.r-fascia.err { background: rgba(229, 72, 77, .10); border-color: rgba(229, 72, 77, .28); }
.r-fascia.err strong { color: var(--t-rosso); }
.r-selettore { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; border-radius: 9px;
  background: var(--riempi); font-size: 13px; font-weight: 600; color: var(--testo2); margin: 0; }
.r-selettore select { margin: 0; width: auto; height: 30px; padding: 0 28px 0 0; border: 0; background-color: transparent;
  font-size: 13px; font-weight: 600; color: var(--testo); box-shadow: none; background-position: calc(100% - 12px) 52%, calc(100% - 7px) 52%; }
.r-file td:first-child { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.r-file td:first-child a { color: var(--testo); text-decoration: none; }
.r-file td:first-child a:hover { color: var(--viola); text-decoration: underline; }
.r-file svg { width: 16px; height: 16px; flex: none; }
.r-file svg.cartella { fill: var(--viola-tenue); stroke: var(--viola); stroke-width: 1.6; }
.r-file svg.foglio { fill: none; stroke: var(--testo3); stroke-width: 1.6; }
.r-file .msg { color: var(--testo3); width: 100%; }
.r-file .msg .r-mono { color: var(--t-viola); margin-right: 6px; }
.r-ultima { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; background: var(--fondo);
  border-bottom: 1px solid var(--vetro-bordo2); font-size: 13px; border-radius: 14px 14px 0 0; }
.r-ultima .r-av { width: 24px; height: 24px; border-radius: 50%; background: var(--viola); color: #fff; display: grid;
  place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.r-ultima .msg { color: var(--testo2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; }
.r-readme { padding: 6px 22px 20px; max-width: 72ch; overflow-wrap: anywhere; }
.r-readme h2 { font-family: var(--f-tit); font-size: 22px; letter-spacing: -.02em; margin: 14px 0 6px; }
.r-readme h3, .r-readme h4 { font-family: var(--f-tit); font-size: 15px; margin: 18px 0 6px; }
.r-readme ul, .r-readme ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; color: var(--testo2); }
.r-readme p { margin: 6px 0; color: var(--testo2); }
.r-info { display: flex; flex-direction: column; }
.r-info div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vetro-bordo2); font-size: 13px; }
.r-info div:last-child { border-bottom: 0; }
.r-info span { color: var(--testo3); }
.r-info b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.r-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; background: var(--riempi);
  font-size: 12.5px; font-weight: 500; border: 1px solid var(--vetro-bordo); color: var(--testo); text-decoration: none; }
.r-chip:hover { border-color: rgba(122, 43, 214, .35); color: var(--viola); }
.r-chip svg { color: var(--viola); }
.r-chip .r-mono { color: var(--testo3); font-size: 11.5px; }
.r-rilascio { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--vetro-bordo2); }
.r-rilascio:last-child { border-bottom: 0; }
.r-rilascio-t { display: flex; align-items: center; gap: 8px; }
.r-rilascio-t b { font-family: var(--mono); font-size: 13px; }
.r-rilascio-t a { color: var(--testo); text-decoration: none; }
.r-rilascio small { color: var(--testo3); font-size: 12px; }
.r-barretta { height: 6px; border-radius: 999px; background: var(--riempi); overflow: hidden; margin-top: 6px; }
.r-barretta i { display: block; height: 100%; background: var(--viola); border-radius: 999px; }
.r-link { color: var(--viola); font-weight: 600; text-decoration: none; font-size: 13px; }
.r-link:hover { text-decoration: underline; }

/* la libreria */
.r-lib-testa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; justify-content: space-between; }
.r-filtri { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.r-filtri a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--vetro-bordo); background: var(--vetro); font-size: 12.5px; font-weight: 600; color: var(--testo3); text-decoration: none; }
.r-filtri a:hover { color: var(--testo); }
.r-filtri a.on { background: var(--testo); border-color: var(--testo); color: var(--fondo); }
.r-filtri form { margin: 0 0 0 auto; }
.r-filtri input[type=search] { margin: 0; height: 32px; padding: 0 12px; font-size: 13px; width: 220px; max-width: 100%; border-radius: 999px; }
.r-moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.r-modulo { display: flex; flex-direction: column; gap: 10px; padding: 16px; text-decoration: none; color: var(--testo); }
a.r-modulo:hover, a.r-grafica:hover { border-color: rgba(122, 43, 214, .35); }
.r-modulo-t { display: flex; align-items: flex-start; gap: 12px; }
.r-icona-mod { width: 38px; height: 38px; border-radius: 11px; background: var(--viola-tenue); color: var(--viola); display: grid; place-items: center; flex: none; }
.r-modulo p { margin: 0; color: var(--testo2); font-size: 13px; }
.r-modulo-piede { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--vetro-bordo2); font-size: 12px; color: var(--testo3); }
.r-usato { display: flex; gap: 4px; flex-wrap: wrap; }
.r-usato span { padding: 2px 7px; border-radius: 6px; background: var(--riempi); font-size: 11.5px; color: var(--testo2); }
.r-grafiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.r-grafica { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--testo); }
.r-anteprima { aspect-ratio: 16 / 10; max-width: 100%; display: grid; place-items: center; overflow: hidden;
  background-color: var(--riempi); border-bottom: 1px solid var(--vetro-bordo2);
  background-image: linear-gradient(45deg, rgba(var(--ink), .04) 25%, transparent 25%, transparent 75%, rgba(var(--ink), .04) 75%),
                    linear-gradient(45deg, rgba(var(--ink), .04) 25%, transparent 25%, transparent 75%, rgba(var(--ink), .04) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.r-anteprima img { max-width: 78%; max-height: 74%; object-fit: contain; display: block; }
.r-est { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--testo3); padding: 10px 14px; border: 1px dashed var(--vetro-bordo); border-radius: 10px; }
.r-grafica-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.r-grafica-info .riga { display: flex; align-items: center; gap: 8px; }
.r-grafica-info .riga b { font-weight: 600; }
.r-grafica-info small { color: var(--testo3); font-size: 12px; }
.r-nuova { display: grid; place-items: center; border: 1.5px dashed var(--vetro-bordo); border-radius: 14px; color: var(--testo3);
  font-size: 13px; font-weight: 600; min-height: 180px; background: transparent; text-decoration: none; }
.r-nuova:hover { border-color: rgba(122, 43, 214, .35); color: var(--viola); }
.r-vuoto { border: 1.5px dashed var(--vetro-bordo); border-radius: 14px; padding: 28px; text-align: center; color: var(--testo3); }
.r-vuoto b { display: block; color: var(--testo); font-size: 15px; margin-bottom: 6px; }
.r-vuoto p { margin: 0 auto 12px; max-width: 60ch; }
.r-pagina + .r-pagina { margin-top: 14px; }
.r-pagina + .ritorno, .r-pagina + .scheda, .r-pagina + section, .r-pagina + div:not(.r-pagina) { margin-top: 14px; }
.r-titolo-mod { font-family: var(--f-tit); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.r-modulo-t > span { display: flex; flex-direction: column; }
.r-tabella td:first-child { min-width: 160px; }

/* 1.54.0 — il quadro dei builder */
.r-scorre { overflow-x: auto; max-width: 100%; }
.r-quadro-voce summary, .r-card details summary { cursor: pointer; }
.r-scorre > .r-tabella { min-width: 560px; }
.r-scorre .r-mono { word-break: break-word; }
.r-quadro-area { margin: 18px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-viola); }
.r-quadro-area:first-child { margin-top: 0; }
.r-tabella tr.r-riga-area td { background: var(--riempi); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-viola); padding: 8px 16px; }
.r-filtri a .r-sub { margin-left: 5px; font-size: 11.5px; }
.r-filtri a.on .r-sub { color: inherit; opacity: .7; }