/* DefenceLevel — sistema grafico condiviso da sito, accesso e pannello.
   Tema scuro di base (identità del marchio) e tema chiaro "grafite" con fondo "aurora" in fondo al file: stesse forme, pagina chiara,
   strumenti (cruscotto, estratto del briefing) che restano scuri. Le email restano chiare, per scelta tecnica.
   L'accento (ciano) è volutamente fuori dalla scala DEFCON verde-giallo-arancio-rosso. */

:root {
  /* Blu notte (19 ottobre 2026, spunto da BitHive; su tutto il sito dal 20 ottobre, scelta di Alessandro): fondo e superfici con
     passi ben distinti, bordi azzurrati. Prima il fondo era quasi nero (#06080B) e le schede (#0E1218) si staccavano solo per il bordo. */
  --bg: #0A1019;
  --bg-2: #0D1521;
  --surface: #111A28;
  --surface-2: #172234;
  --border: rgba(150, 180, 225, 0.10);
  --border-2: rgba(150, 180, 225, 0.18);
  --fg: #EDF1F7;
  --fg-2: #B9C3D2;
  --muted: #8693A8;
  --accent: #3DD6F5;
  --accent-2: #7BE6FA;
  --accent-ink: #031218;
  --accent-soft: rgba(61, 214, 245, 0.10);
  --glow: rgba(61, 214, 245, 0.16);
  --grid: rgba(255, 255, 255, 0.035);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  /* Fondo "aurora" e radar della home (vedi "Sfondo e sezioni"): sul nero luce tenue; il tema chiaro ha gli stessi strati,
     più accesi. */
  --aurora-1: rgba(61, 214, 245, .17); --aurora-2: rgba(120, 110, 255, .13); --aurora-3: rgba(10, 150, 180, .14); --aurora-4: rgba(61, 214, 245, .11);
  --aurora-base: #0A1019;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --glass: rgba(16, 21, 28, .55); --glass-sat: 140%;
  /* Radar sul nero: linee appena accennate (il ciano sul nero si accende molto: a .2 disturbavano la lettura, 12 ottobre 2026). */
  --radar-ring: rgba(61, 214, 245, .08); --radar-cross: rgba(61, 214, 245, .05); --radar-glow: rgba(61, 214, 245, .1); --radar-sweep: rgba(61, 214, 245, .16);

  --d5: #22C55E; --d5-ink: #04140A;
  --d4: #EAB308; --d4-ink: #171100;
  --d3: #F97316; --d3-ink: #1A0B00;
  --d2: #EF4444; --d2-ink: #FFFFFF;
  --d1: #C026D3; --d1-ink: #FFFFFF; /* magenta: "oltre il rosso", distinto dal livello 2 anche per chi non distingue bene i rossi */

  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scala di spaziature: usare solo questi valori */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px;
  --gap-kicker: var(--s-5);   /* etichetta → titolo */
  --page-top: 40px;
  --section-pad: clamp(56px, 8.5vw, 80px); /* spazio tra la linea di separazione e il contenuto: 80 px su schermo grande, 56 sui telefoni */           /* barra in alto → inizio dei contenuti nelle pagine interne (la home ha la sua hero) */
  --gap-lead: var(--s-5);     /* titolo → testo introduttivo */
  --gap-head: var(--s-8);     /* intestazione di sezione → contenuto */

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --max: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .2s ease, color .2s ease;
}
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Campo trappola del modulo d'iscrizione (23 ottobre 2026): fuori dallo schermo per le persone, i programmi che riempiono i moduli lo compilano. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
/* "Vai al contenuto": invisibile finché non lo si raggiunge con il tasto Tab. */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

:root { --wrap-pad: 16px; } /* margine laterale del contenuto */
@media (min-width: 760px) { :root { --wrap-pad: 32px; } }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--wrap-pad); }

/* ─── Logo ─────────────────────────────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); }
.logo svg { width: 26px; height: 26px; flex: none; }
.logo .frame { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.logo .dot { fill: var(--accent); }
.logo-word { font: 700 20px/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.logo-word span { color: var(--accent); margin-left: .03em; } /* "e" tonda e "l" dritta si avvicinano più delle altre coppie */

/* ─── Testata ──────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; padding: 12px 0; }
/* Durante lo scorrimento il contenuto non si legge sopra e ai lati della barra: dietro la barra una fascia sfocata del colore del
   fondo, che sfuma sotto (20 ottobre 2026, revisione visiva). Il fondo decorativo resta visibile, attenuato. */
.top::before { content: ''; position: absolute; z-index: -1; inset: 0 0 -24px; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.top.scrolled::before { opacity: 1; }
.top-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; border: 1px solid var(--border-2); border-radius: 999px; box-shadow: var(--shadow);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* Correzione ottica: le estremità a pillola fanno sembrare la barra più stretta del contenuto.
   Da 760 px (dove i margini laterali sono di 32 px) la barra sporge di 14 px per lato, così il tratto dritto
   si allinea con i riquadri della pagina. Sotto i 760 px resta allineata ai margini di 16 px. */
@media (min-width: 760px) { .top-inner { margin: 0 -14px; } }
/* Durante lo scorrimento la barra si stacca dal contenuto: fondo più pieno, bordo e ombra più marcati. */
.top.scrolled .top-inner {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-color: color-mix(in srgb, var(--fg) 22%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 40px -14px rgba(0, 0, 0, 0.75);
}
.nav { display: flex; align-items: center; gap: 4px; }
.menu { display: none; }
.menu a.link { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--fg-2); text-decoration: none; }
.menu a.link:hover { color: var(--fg); background: var(--accent-soft); }
/* Voce del DefenceLevel Index: in evidenza, con il suo emblema (porta visitatori all'indice pubblico). */
.menu a.nav-index { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); }
.menu a.link[aria-current="page"], .menu a.link.is-current { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } /* la pagina in cui si è (DefenceLevel Index) o, in home, la sezione */
.nav-emblem { display: inline-flex; width: 15px; height: 15px; }
.nav-emblem svg { width: 100%; height: 100%; }
/* Le voci del menu compaiono solo quando c'è spazio per tutte, in ogni lingua (misurato da 320 a 1400 px). */
/* Da 1100 px: logo e lingua a sinistra, Accedi e Prova gratis (o Dashboard) a destra, le voci in mezzo: a metà dello spazio libero,
   alla stessa distanza dai due gruppi (20 ottobre 2026, osservazione di Alessandro: al centro esatto della barra sembravano attaccate
   a lingua e tema, perché il gruppo di sinistra è più largo di quello di destra). */
@media (min-width: 1100px) {
  .top-inner { display: grid; grid-template-columns: auto minmax(max-content, 1fr) auto; }
  .menu { display: flex; gap: 4px; justify-self: center; }
  /* Correzione ottica: a destra la prima voce è un link senza bordo (Accedi, Index, Admin), il cui margine interno di 12 px non si
     vede; lo si toglie dal conto. Non quando la prima voce è il pulsante «Dashboard» delle pagine pubbliche, che ha il suo bordo. */
  .top-inner > .nav { margin-left: -12px; }
  .authed .top-inner > .nav:has(> .cta-app):not(:has(> .nav-admin)) { margin-left: 0; }
  .nav { justify-self: end; }
  .top-inner > .nav { grid-column: 3; } /* anche senza menu centrale (pannello): sempre a destra */
}
/* Fino a 1280 px le voci sono un po' più strette: con "Index" il tedesco arriverebbe a ridosso di "Anmelden". */
@media (min-width: 1100px) and (max-width: 1279px) { .menu a.link { padding: 8px 9px; } }
/* Voci di menu (sezioni della pagina) separate dalle azioni (Accedi, Prova gratis). */
.nav .login { padding: 8px 12px; font-size: 14px; color: var(--fg-2); text-decoration: none; }
.nav .login:hover { color: var(--fg); }
.nav .who { font-size: 13px; color: var(--muted); padding: 0 8px; display: none; }
@media (min-width: 700px) { .nav .who { display: inline; } }
/* Dashboard: DefenceLevel Index a destra, prima dell'account (email ed Esci), separato da un filo verticale. */
.nav .app-index { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--fg); text-decoration: none; }
.nav .app-index:hover { background: var(--accent-soft); }
.nav .nav-sep { display: none; width: 1px; height: 20px; background: var(--border-2); margin: 0 6px; }
@media (min-width: 700px) { .nav .nav-sep { display: block; } } /* con l'email accanto; sul telefono l'email non c'è */
@media (max-width: 360px) { .nav .app-index, .nav #logout { padding: 6px; } }
@media (max-width: 340px) { .nav .app-index { display: none; } } /* a 320 px non c'è posto: resta Esci */
/* Il link per tornare indietro dell'area admin («Dashboard») e della pagina del post («Area admin») resta anche lì: quelle barre hanno solo
   lui ed Esci, e senza non si torna indietro dal telefono (2 novembre 2026, osservazione di Alessandro). */
@media (max-width: 340px) { .nav .app-index.app-back { display: inline-flex; } }

/* ─── Tipografia ───────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; margin: 0; }
h1 { font-size: clamp(38px, 6.4vw, 72px); line-height: 1.05; }
h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.1; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }
.nw { white-space: nowrap; } /* parola col trattino che non va a capo nei titoli: wholeWords in lib/site.js, itemTitle in app.js */
.grad { background: linear-gradient(100deg, var(--fg) 30%, var(--accent) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--fg-2); max-width: 34em; }
.kicker { display: flex; width: fit-content; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--gap-kicker); }
.kicker::before { content: ''; width: 22px; height: 1px; background: var(--accent); }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--accent-soft);
  font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--glow); animation: ping 2.8s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(61,214,245,.45); opacity: 1; } 50% { opacity: .75; } 75% { box-shadow: 0 0 0 9px rgba(61,214,245,0); } 100% { box-shadow: 0 0 0 0 rgba(61,214,245,0); opacity: 1; } }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* ─── Bottoni e campi ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink);
  font: 600 15px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 30px -8px var(--glow); transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn.sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--border-2); box-shadow: none; }
.btn.ghost:hover { background: var(--accent-soft); }
.btn[disabled] { opacity: .55; cursor: wait; transform: none; }
.field {
  min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--fg); font: 15px var(--sans); width: 100%;
}
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.signup { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.signup .field { flex: 1 1 230px; }
/* Campo email delle iscrizioni: bordo sfumato ciano, bagliore leggero e busta; si accende al passaggio e quando si scrive. */
.signup .field {
  padding-left: 46px; border: 1px solid transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237BE6FA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") 18px 50% / 18px no-repeat,
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(110deg, rgba(61, 214, 245, .75), rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, .10) 62%, rgba(123, 230, 250, .6)) border-box;
  box-shadow: 0 10px 30px -14px rgba(61, 214, 245, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: box-shadow .2s ease, background .2s ease;
}
.signup .field:hover { box-shadow: 0 10px 34px -12px rgba(61, 214, 245, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.signup .field:focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237BE6FA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") 18px 50% / 18px no-repeat,
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(110deg, var(--accent), var(--accent-2)) border-box;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 12px 36px -12px rgba(61, 214, 245, .65);
}
.signup .btn { flex: 0 0 auto; min-height: 48px; }
.form-note { font-size: 13px; color: var(--muted); margin: var(--s-3) 0 0; line-height: 1.55; }
.form-msg { font-size: 14px; margin: var(--s-2) 0 0; min-height: 1.4em; color: var(--fg-2); }
.form-msg:empty { min-height: 0; margin: 0; }
/* Dopo l'invio di un modulo con l'indirizzo (2 novembre 2026, public/sent.js): il modulo sparisce (display: flex vincerebbe su hidden), al suo
   posto la conferma con l'indirizzo in grassetto e, sotto, «Rimanda…» con il conto alla rovescia e «Usa un altro indirizzo». */
.signup[hidden] { display: none; }
.form-msg strong { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.sent-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 12px 0 0; }
.sent-acts [data-resend] { font-variant-numeric: tabular-nums; }
.sent-acts [data-resend]:disabled { opacity: .55; cursor: default; }
.form-msg.err { color: var(--d2); }
/* Esito dei moduli (iscrizione, accesso): riquadro ben visibile con l'icona, staccato dal modulo. Solo quando c'è un testo:
   vuoto resta una riga invisibile, così i lettori di schermo annunciano il messaggio quando compare. */
.form-msg.ok:not(:empty), .form-msg.err:not(:empty) {
  display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s-4); padding: 12px 14px; border-radius: 10px;
  font-weight: 500; line-height: 1.45; color: var(--fg);
}
.form-msg.ok:not(:empty) { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.form-msg.err:not(:empty) { background: color-mix(in srgb, var(--d2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--d2) 55%, transparent); }
.form-msg.ok:not(:empty)::before, .form-msg.err:not(:empty)::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px;
  -webkit-mask: var(--msg-icon) center / contain no-repeat; mask: var(--msg-icon) center / contain no-repeat;
}
.form-msg.ok:not(:empty)::before { --msg-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E"); background: var(--accent); }
.form-msg.err:not(:empty)::before { --msg-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.5%27/%3E%3Cpath d=%27M12 7.5v5.5M12 16.6v.4%27/%3E%3C/svg%3E"); background: var(--d2); }
/* Iscrizione inviata (24 ottobre 2026, site.js sentMsg): al posto della spunta un punto corre sul filo fino alla busta, poi il testo. */
.form-msg.ok.is-sent::before { display: none; }
.send-fx { position: relative; flex: none; width: 58px; height: 20px; color: var(--accent); }
.send-line { position: absolute; left: 0; right: 24px; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); transform-origin: left; animation: send-line .45s ease-out both; }
.send-dot { position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: send-dot .7s .3s cubic-bezier(.45, 0, .2, 1) both; }
.send-env { position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; animation: send-env .55s .95s cubic-bezier(.3, 1.6, .5, 1) both; }
.send-tx { animation: send-tx .45s 1s ease-out both; }
@keyframes send-line { from { transform: scaleX(0); } }
@keyframes send-dot { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(30px); opacity: 0; } }
@keyframes send-env { 0% { transform: scale(.6); opacity: .45; } 60% { transform: scale(1.18); opacity: 1; filter: drop-shadow(0 0 6px var(--accent)); } 100% { transform: scale(1); } }
@keyframes send-tx { from { opacity: 0; transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .send-line, .send-env, .send-tx { animation: none; } .send-dot { display: none; } }
/* Sotto i moduli d'iscrizione: rimando a Termini e Privacy. */
.form-legal { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: var(--s-3) 0 0; max-width: 520px; }
.form-legal { text-wrap: balance; }
.form-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.form-legal a:hover { color: var(--fg); }
.hero .form-legal { margin-top: var(--s-4); }
/* Card finale: la nota sta dentro il modulo, sotto il solo campo email e allineata al suo bordo destro. */
.cta-band .signup .form-legal { flex-basis: 100%; margin: var(--s-1) 0 0; max-width: none; text-align: center; }
/* Da 900 px campo e pulsante affiancati: la nota rientra come il testo del campo e verso sinistra si allarga
   nello spazio vuoto della card, così sta su due righe in ogni lingua. Sotto, pulsante a capo e nota centrata. */
@media (min-width: 900px) {
  .cta-band .signup { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .cta-band .signup .form-legal { grid-column: 1; text-align: right; padding-right: 18px; margin-left: -140px; }
}
@media (max-width: 899px) { .cta-band .signup .btn { flex-basis: 100%; } }

/* ─── Sfondo e sezioni ─────────────────────────────────────────────────── */
.backdrop { position: absolute; inset: 0 0 auto 0; height: 980px; pointer-events: none; z-index: -1; overflow: hidden; }
.backdrop::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);
}
.backdrop::after {
  content: ''; position: absolute; width: 900px; height: 600px; left: 50%; top: -260px; transform: translateX(-10%);
  background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(10px);
}
/* Fondo "aurora" (12 ottobre 2026, scelta di Alessandro fra tre direzioni): uno strato fisso dietro tutte le pagine, con
   luce morbida ciano e petrolio, un filo di indaco e una grana leggera. La luce c'è in ogni punto della pagina e su ogni
   schermo, e le schede in vetro del sito pubblico cambiano tinta mentre scorrono; nel pannello e nell'area admin le schede
   restano piene, per la leggibilità. Colori nei token --aurora-*, --grain e --glass (più accesi nel tema chiaro). */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--grain),
    radial-gradient(max(64vw, 520px) max(46vh, 380px) at 4% 4%, var(--aurora-1), transparent 62%),
    radial-gradient(max(48vw, 420px) max(40vh, 340px) at 100% 18%, var(--aurora-2), transparent 64%),
    radial-gradient(max(58vw, 480px) max(46vh, 380px) at 100% 72%, var(--aurora-3), transparent 64%),
    radial-gradient(max(60vw, 500px) max(48vh, 400px) at 0% 88%, var(--aurora-4), transparent 64%),
    var(--aurora-base);
}
main:not(.panel, .adm) :is(.card, .price-card, .index-band, .scale-row, .cta-band) {
  background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat)); backdrop-filter: blur(12px) saturate(var(--glass-sat));
}
/* Radar dietro la scena di My Defence (solo la home, al posto della griglia in cima; fino al 23 ottobre 2026 dietro il cruscotto,
   ora sceso nella sezione del livello): anelli e mirino, un bagliore al centro
   e il fascio che fa un giro ogni 20 secondi (fermo per chi ha disattivato le animazioni). Ciano sul nero, luce sul chiaro
   (token --radar-*); sui telefoni più piccolo. */
body:has(.scene-wrap) .backdrop::before { display: none; }
.hero { overflow-x: clip; }
.scene-wrap { position: relative; --radar: 1300px; }
@media (max-width: 759px) { .scene-wrap { --radar: 900px; } }
.scene-wrap::before, .scene-wrap::after {
  content: ''; position: absolute; left: 50%; top: 46%; width: var(--radar); height: var(--radar); z-index: -1;
  margin: calc(var(--radar) / -2) 0 0 calc(var(--radar) / -2); border-radius: 50%; pointer-events: none;
  /* Il radar si dissolve prima del testo dell'apertura: mai linee dietro titolo, paragrafo e modulo. */
  -webkit-mask-image: radial-gradient(circle, #000 0, #000 30%, transparent 56%); mask-image: radial-gradient(circle, #000 0, #000 30%, transparent 56%);
}
.scene-wrap::before {
  background:
    repeating-radial-gradient(circle, var(--radar-ring) 0 1px, transparent 1.6px 80px),
    linear-gradient(var(--radar-cross), var(--radar-cross)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, var(--radar-cross), var(--radar-cross)) 0 50% / 100% 1px no-repeat,
    radial-gradient(circle, var(--radar-glow), transparent 45%);
}
.scene-wrap::after {
  background: conic-gradient(from 62deg, transparent 0deg 250deg, rgba(61, 214, 245, 0) 250deg, var(--radar-sweep) 359.4deg, transparent 360deg);
  animation: radar-sweep 20s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scene-wrap::after { animation: none; } }
@media print { body::before, .scene-wrap::before, .scene-wrap::after { display: none; } } /* in stampa, o "Salva come PDF", solo i contenuti */
section { padding: var(--section-pad) 0; position: relative; }
/* Clic su una voce del menu: la sezione si ferma con l'etichetta a 40 px sotto la barra fissa (alta 84 px), come nelle pagine interne. */
main > section[id] { scroll-margin-top: calc(84px + var(--page-top) - var(--section-pad)); }
/* Separatore tra le sezioni della home: linea sfumata con il punto del logo al centro.
   Non attorno alla fascia delle fonti (ha già le sue linee) né prima della card finale (è già una cornice). */
main > .claim + section::before, main > section + section:not(:last-child)::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(min(var(--max), 100%) - 2 * var(--wrap-pad)); height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2) 30%, transparent 47%, transparent 53%, var(--border-2) 70%, transparent);
}
main > .claim + section::after, main > section + section:not(:last-child)::after {
  content: ''; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
/* Lo stesso separatore come elemento, nelle pagine fatte di una sola sezione (DefenceLevel Index). */
.section-sep { position: relative; height: 1px; margin: var(--section-pad) 0; background: linear-gradient(90deg, transparent, var(--border-2) 30%, transparent 47%, transparent 53%, var(--border-2) 70%, transparent); }
.section-sep::after { content: ''; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.section-head { margin-bottom: var(--gap-head); }
/* Due misure diverse: il titolo può allargarsi, il paragrafo resta alla lunghezza di riga ideale per leggere */
.section-head h2 { max-width: 22em; }
.section-head p:not(.kicker), .lead { max-width: 40em; }
/* Ritmo verticale unico: etichetta → titolo → testo introduttivo, ovunque */
.kicker + h1, .kicker + h2, .kicker + h3 { margin-top: 0; }
:is(h1, h2) + p, :is(h1, h2) + .lead { margin-top: var(--gap-lead); margin-bottom: 0; }
.section-head p:not(.kicker) { color: var(--fg-2); font-size: 17px; }
/* Paragrafo già diviso in frasi con <br>: su schermi larghi ogni frase resta su una riga. */
@media (min-width: 1000px) { .section-head p.lines { max-width: none; } }
#defcon .section-head em { white-space: nowrap; } /* la sigla sciolta (DEFense readiness CONdition) non si spezza */
.section-head > :last-child { margin-bottom: 0; }

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 var(--section-pad); }
@media (max-width: 759px) { .hero { padding-top: var(--page-top); } } /* sui telefoni come le pagine interne: il titolo arriva prima */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; } /* una colonna larga quanto lo schermo: senza minmax si allargherebbe al contenuto più lungo */
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; } }
.hero h1 { margin: var(--s-6) 0 0; }
.hero h1 + .lead { margin-top: var(--s-6); }
/* Riga dal vivo sotto il titolo (1° novembre 2026, scelta di Alessandro): i numeri delle ultime 24 ore, come nel cruscotto. */
.hero-live { display: flex; align-items: baseline; gap: 10px; margin: var(--s-5) 0 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.hero-live .dot { flex: none; align-self: flex-start; margin-top: calc(.75em - 3.5px); } /* all'altezza della prima riga, anche su due righe */
.hero-live b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.hero .hero-live + .lead { margin-top: var(--s-5); }
.hero .signup { margin-top: var(--s-7); }
.trust { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: 13px; color: var(--muted); }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 14px; height: 14px; color: var(--accent); }

/* Console DEFCON */
.console {
  position: relative; border: 1px solid var(--border-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); overflow: hidden;
}
.console-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
/* "Dal vivo": etichetta azzurra con il punto che pulsa; a destra quanto tempo fa sono arrivati i dati. */
.console-head .live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border-radius: 999px; font-weight: 600; letter-spacing: .12em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); white-space: nowrap; }
.console-head .live .dot { width: 8px; height: 8px; } /* pulsa con l'animazione ping comune */
.console-updated { text-transform: none; letter-spacing: .02em; font-size: 12.5px; color: var(--fg-2); text-align: right; }
.console-updated b { color: var(--fg); font-weight: 600; }
.console-updated b, .console-updated .clock { white-space: nowrap; }
@media (max-width: 420px) { .console-updated .clock, .console-updated .verb { display: none; } } /* sui telefoni stretti basta "12 min fa" */
/* Didascalie allineate al riquadro sopra, con lo stesso spazio a sinistra e a destra (12 ottobre 2026, richiesta di
   Alessandro): sotto il cruscotto come il badge «Dal vivo» e le fonti in fondo (18 px di margine interno più il bordo);
   sotto l'estratto del briefing come il suo contenuto, che le sta subito sopra (22 px più il bordo). */
.console-caption { font-size: 13px; line-height: 1.55; color: var(--muted); margin: var(--s-3) 19px 0; }
.mail + .console-caption { margin-inline: 23px; text-wrap: pretty; }
.console-caption a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.console-note { display: block; text-wrap: pretty; } /* su una riga; sui telefoni, se il carattere scenderebbe sotto 11 px, va a capo (site.js) */
.console-links { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 2px; }
.console-caption a::after { content: ' →'; }
.console-body { padding: 22px 18px 20px; display: grid; gap: 22px; }
@media (min-width: 520px) { .console-body { padding: 26px 24px 24px; } }

.level { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; } /* numero sempre in alto */
.level-num {
  width: 92px; height: 92px; border-radius: 18px; display: grid; place-items: center;
  font: 700 56px/1 var(--display); letter-spacing: -0.04em;
  background: var(--lvl, var(--surface-2)); color: var(--lvl-ink, var(--fg));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 12px 40px -12px var(--lvl, transparent);
}
.level-label { font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; }
.level-msg { color: var(--fg-2); font-size: 14.5px; margin-top: 4px; }
/* Riga sul livello del briefing (metodo 1.18): com'era il giorno prima e che cosa lo determina oggi. */
.level-note { color: var(--fg-2); font-size: 13.5px; line-height: 1.5; margin-top: var(--s-2); }
/* Perché il livello è quello: solo conteggi (sfruttate, avvisi di oggi), i dettagli restano agli abbonati. */
.level-why { font: 500 12px/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); margin-top: var(--s-2); }
.level-date { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
[data-level="1"] .level-num { animation: alarm 1.4s ease-in-out infinite; }
@keyframes alarm { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 0 0 10px rgba(192,38,211,.22), 0 12px 50px -8px var(--d1); } }
/* Livelli 2–5: il riquadro «respira» piano nel colore del livello, perché è un dato dal vivo (9 ottobre 2026). Più grave,
   respiro più rapido; il DEFCON 1 resta l'allarme qui sopra. */
.console:is([data-level="2"], [data-level="3"], [data-level="4"], [data-level="5"]) .level-num { animation: breathe 3.2s ease-in-out infinite; }
.console[data-level="2"] .level-num { animation-duration: 2.2s; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 0 0 transparent, 0 12px 40px -12px var(--lvl, transparent); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 7px color-mix(in srgb, var(--lvl, transparent) 20%, transparent), 0 14px 54px -8px var(--lvl, transparent); }
}
@media (prefers-reduced-motion: reduce) { .level-num, .dot { animation: none !important; } }

.meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.meter i { display: block; height: 8px; border-radius: 4px; background: var(--border-2); position: relative; }
.meter i.on { background: var(--c); box-shadow: 0 0 16px -2px var(--c); }
/* Animazioni del cruscotto in home, discrete e una volta sola (tranne il riflesso sul bordo e il punto "dal vivo"):
   segmenti che si accendono uno dopo l'altro, numero del livello che compare, numeri che salgono (site.js). */
.console .meter i { transition: background-color .35s ease, box-shadow .35s ease; transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.console .level-num { transition: transform .6s cubic-bezier(.2, .9, .3, 1.15), opacity .45s ease; }
/* Solo con JavaScript attivo (classe "js" messa subito nella testata): senza, livello e numeri scritti dal server restano visibili. */
.js .console:not(.ready) .level-num { transform: scale(.82); opacity: 0; }
.js .console:not(.ready) .funnel b { visibility: hidden; }
/* Riflesso di luce che ogni 9 secondi percorre il bordo del riquadro. */
.console::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(61, 214, 245, .7) 50%, transparent 58%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sweep 9s ease-in-out 1.5s infinite; background-position: 100% 0;
}
@keyframes sweep { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0 0; } }
/* Card secondarie (Come funziona, Per chi, scala DEFCON, fascia dell'Index): stessa luce in versione tenue, sfondo con
   leggera profondità; al passaggio del mouse la luce si accende e la card si solleva appena. Nella scala DEFCON la luce
   prende il colore del livello. Gli elementi principali (.edge-light, sotto) hanno la luce piena. */
.card, .index-band { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 75%, var(--surface)), var(--surface) 70%); }
.index-band, .scale-row { position: relative; }
.card::after, .index-band::after, .scale-row::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(125deg, color-mix(in srgb, var(--edge, #3DD6F5) 70%, transparent) 0%, color-mix(in srgb, var(--edge, #3DD6F5) 22%, transparent) 22%, transparent 48%, transparent 80%, color-mix(in srgb, var(--edge, #3DD6F5) 12%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .55; transition: opacity .25s ease;
}
.scale-row { --edge: var(--c); transition: transform .2s ease; }
.card:hover::after, .index-band:hover::after, .scale-row:hover::after { opacity: 1; }
.card:hover, .scale-row:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card:hover, .scale-row:hover { transform: none; } }
.icon { box-shadow: 0 0 18px -6px color-mix(in srgb, var(--accent) 60%, transparent); }

/* La stessa luce, ferma, sugli elementi principali (estratto del briefing, prezzo, grafico dell'Index): lo spigolo in alto
   a sinistra si accende e la luce sfuma lungo il bordo. Solo il cruscotto della home, che è dal vivo, ha la luce in movimento. */
.edge-light { position: relative; box-shadow: var(--shadow), -10px -10px 40px -18px rgba(61, 214, 245, .35); }
.edge-light::after {
  opacity: 1; content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(125deg, rgba(127, 232, 255, 1) 0%, rgba(61, 214, 245, .7) 14%, rgba(61, 214, 245, .22) 34%, rgba(61, 214, 245, 0) 55%, rgba(61, 214, 245, 0) 78%, rgba(61, 214, 245, .3) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Leggera inclinazione che segue il mouse (solo con mouse; i valori li scrive site.js). */
.console-tilt { perspective: 1400px; }
.console-tilt .console { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .console .meter i, .console .level-num, .console-tilt .console { transition: none; }
  .js .console:not(.ready) .level-num { transform: none; opacity: 1; }
  .console::after { animation: none; opacity: 0; }
}
.meter-legend { display: flex; justify-content: space-between; font: 500 10.5px var(--mono); color: var(--muted); letter-spacing: .08em; margin-top: 7px; text-transform: uppercase; }

.funnel { display: grid; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; font-size: 13.5px; color: var(--fg-2); }
.funnel-row b { font: 600 15px var(--mono); color: var(--fg); }
.funnel-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.funnel-bar span { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.funnel-row.discarded .funnel-bar span { background: var(--muted); }

.console-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px; border-top: 1px solid var(--border); }
.chip { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }

/* ─── Scena di My Defence (home) ──────────────────────────────────────────────
   23 ottobre 2026, scelta di Alessandro: «scena unica». Un'infrastruttura d'esempio con gli stessi segni della mappa della dashboard
   (.md-*): Internet con il livello DEFCON vero di oggi, le zone, i prodotti, le linee con il traffico. Ogni pochi secondi un avviso
   scende lungo le linee e accende solo la zona del prodotto colpito (public/site.js, playScene). Due disegni, scelti dalla larghezza
   della scena e uguali in tutte le lingue: a ventaglio (perimetro sopra, poi DMZ e data center affiancati) e, sotto i 460 px, ad albero
   rientrato come la mappa sui telefoni. Senza le postazioni dal 3 novembre 2026 (proposta di Alessandro: la scena gli sembrava
   «opprimente», con la notifica spinta contro il bordo in basso): lo spazio va a caratteri più grandi e a più aria, a ventaglio. */
.scene-wrap { width: 100%; max-width: 600px; margin-inline: auto; }
@media (min-width: 1000px) { .scene-wrap { max-width: none; } }
.scene {
  position: relative; container: scene / inline-size; border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow);
  --hit: var(--d2); --hit-ink: var(--d2-ink); /* il colore dell'avviso d'esempio in corso, quello del suo livello (site.js, tint) */
}
.scene-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border);
  font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.scene-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border-radius: 999px; font-weight: 600; letter-spacing: .12em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); white-space: nowrap; }
.scene-kicker { margin-right: auto; }
.scene-kicker svg { width: 13px; height: 13px; }
/* Sempre su una riga: se in una lingua non ci sta, site.js (fitSceneHead) toglie prima l'ora esatta, poi «Aggiornato». */
.scene-head .console-updated { white-space: nowrap; }
.scene-head .console-updated:is(.fit-1, .fit-2) .clock, .scene-head .console-updated.fit-2 .verb { display: none; }

.scene-map { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 16px 2px; }
.scene-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; width: 100%; }
.scene-row + .scene-row { margin-top: 26px; }
.scene-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.scene-wires path { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: opacity .45s ease; }
.scene-map.is-entering .scene-wires path { transition: stroke-dashoffset 1.15s cubic-bezier(.45, 0, .2, 1) .2s; }
.scene-flow { transition: opacity .45s ease; }
.scene-flow circle { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
/* L'avviso: una scia nel colore del suo livello che si disegna da Internet alla zona, con il punto luminoso in testa. */
.scene-shot path { fill: none; stroke: var(--hit); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--hit) 75%, transparent)); transition: opacity .6s ease; }
.scene-shot circle { fill: #fff; stroke: var(--hit); stroke-width: 2; filter: drop-shadow(0 0 7px var(--hit)); }
.scene-shot circle { transition: opacity .3s ease; }
.scene-shot.is-arrived circle, .scene-shot.is-fading path { opacity: 0; }
.scene.is-alert .scene-wires path { opacity: .22; }
.scene.is-alert .scene-flow { opacity: .25; }

/* Internet: la radice, con l'onda di radar della mappa (md-ping) e il livello di oggi nel suo colore. */
.scene-internet { position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; max-width: 100%;
  padding: 7px 8px 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-2)); background: var(--surface);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 7%, transparent), var(--shadow); font: 600 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.scene-internet > svg { width: 17px; height: 17px; margin-right: -3px; color: var(--accent); }
.scene-internet::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--accent); opacity: 0; animation: scene-ping 4.2s ease-out 1.6s infinite; pointer-events: none; }
@keyframes scene-ping { 0% { opacity: .55; inset: -1px; } 70%, 100% { opacity: 0; inset: -15px -26px; } } /* qualche pixel in più, non in proporzione: la pillola è larga */
.scene-level { display: inline-flex; align-items: center; padding-left: 12px; border-left: 1px solid var(--border-2); white-space: nowrap; }
.scene-level b { padding: 4px 9px; border-radius: 999px; background: var(--c, var(--surface-2)); color: var(--ci, var(--fg)); font: 700 11.5px/1.2 var(--mono); letter-spacing: .08em; box-shadow: 0 0 18px -4px var(--c, transparent); }
.scene-level b::before { content: 'DEFCON '; }

/* La zona: icona e nome su una riga (mai a capo), sotto i prodotti; nelle zone in basso un prodotto per riga, in ogni lingua. */
.scene-zone { position: relative; flex: 0 0 calc(50% - 9px); min-width: 0; padding: 10px 12px 11px; border-radius: 14px; border: 1px solid var(--border-2);
  background: var(--surface); box-shadow: var(--shadow); transition: border-color .35s ease, box-shadow .35s ease, opacity .35s ease; }
.scene-zname { display: flex; align-items: center; gap: 9px; font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.scene-zname svg { flex: none; box-sizing: content-box; width: 15px; height: 15px; padding: 5px; border-radius: 8px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.scene-zname b { font-weight: 600; }
.scene-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.scene-row:last-child .scene-chips { flex-direction: column; align-items: flex-start; }
.scene-chips i { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-2);
  font: 500 12.5px/1.3 var(--sans); font-style: normal; color: var(--fg-2); white-space: nowrap; transition: color .35s ease, border-color .35s ease, background-color .35s ease; }
.scene-chips i::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: background-color .35s ease, box-shadow .35s ease; }
/* Colpita: la zona come un blocco caldo della mappa (.md-zone.hot), che respira; le altre si fanno da parte. */
.scene.is-alert .scene-zone:not(.is-hit) { opacity: .45; }
.scene-zone.is-hit { border-color: color-mix(in srgb, var(--hit) 72%, var(--border)); animation: scene-hot 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hit) 22%, transparent), 0 16px 36px -16px color-mix(in srgb, var(--hit) 85%, transparent); }
@keyframes scene-hot { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hit) 34%, transparent), 0 18px 44px -14px var(--hit); } }
.scene-chips i.is-hit { color: var(--fg); border-color: color-mix(in srgb, var(--hit) 60%, var(--border-2)); background: color-mix(in srgb, var(--hit) 14%, var(--surface-2)); }
.scene-chips i.is-hit::before { background: var(--hit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hit) 30%, transparent); }
/* All'arrivo dell'avviso, due onde dal punto del prodotto. */
.scene-chips i { position: relative; }
.scene-chips i.is-hit::after { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -4.5px; border-radius: 50%; border: 1px solid var(--hit);
  opacity: 0; animation: scene-ripple 1.1s ease-out 2; pointer-events: none; }
@keyframes scene-ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }

/* La notifica dell'avviso, sotto lo schema: livello, «Avviso immediato», zona › prodotto. */
.scene-foot { display: flex; justify-content: center; align-items: center; min-height: 62px; padding: 6px 16px 12px; }
/* La notifica ha la sua altezza anche vuota, prima del primo avviso: due righe di testo (--toast-fs × --toast-lh), lo spazio fra le
   righe (1 px), il margine interno (12) e il bordo (2). Prima la scena si allungava di 4,75 px al primo avviso (1° novembre 2026,
   segnalazione di Alessandro). */
.scene-toast { --toast-fs: 12.5px; --toast-lh: 1.35; min-height: calc(var(--toast-fs) * var(--toast-lh) * 2 + 15px);
  display: inline-flex; align-items: center; gap: 11px; max-width: 100%; padding: 6px 14px 6px 7px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hit) 45%, var(--border-2));
  background: color-mix(in srgb, var(--hit) 9%, var(--surface)); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--hit) 80%, transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.scene-toast:empty { visibility: hidden; }
.scene-toast.on { opacity: 1; transform: none; }
.scene-toast .n { flex: none; padding: 5px 8px; border-radius: 8px; background: var(--hit); color: var(--hit-ink); font: 700 11px/1.2 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.scene-toast .tx { display: grid; gap: 1px; min-width: 0; font-size: var(--toast-fs); line-height: var(--toast-lh); color: var(--fg-2); white-space: nowrap; }
.scene-toast .tx b { color: var(--fg); font-weight: 600; }
/* Didascalia in due colonne (23 ottobre 2026, richiesta di Alessandro): a sinistra che cosa è d'esempio, a destra che cosa è vero,
   ognuna con il suo collegamento sotto; sui telefoni una sotto l'altra. */
.scene-caption { display: flex; flex-wrap: wrap; gap: 8px 40px; }
.scene-caption > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* A ventaglio, senza le postazioni (3 novembre 2026): nella stessa altezza di prima zone, prodotti e notifica più grandi e più distanti, e
   la notifica più lontana dal bordo in basso. */
@container scene (min-width: 460px) {
  .scene-map { padding: 30px 22px 4px; }
  .scene-row + .scene-row { margin-top: 39px; }
  .scene-row { gap: 16px 22px; }
  .scene-internet { gap: 8px 14px; padding: 9px 10px 9px 17px; font-size: 13px; }
  .scene-internet > svg { width: 19px; height: 19px; }
  .scene-level b { padding: 5px 10px; font-size: 12.5px; }
  .scene-zone { flex-basis: calc(50% - 11px); padding: 15px 14px 16px; border-radius: 16px; }
  /* Caratteri che crescono con la scena, fino alla misura piena dai 505 px del computer: «Serveur de messagerie» non esce dalla zona. */
  .scene-zname { gap: 11px; font-size: clamp(11px, 2.45cqi, 12.5px); }
  .scene-zname svg { width: 17px; height: 17px; padding: 6px; border-radius: 9px; }
  .scene-chips { gap: 7px; margin-top: 13px; }
  .scene-chips i { gap: 8px; padding: 5px 12px 5px 10px; font-size: clamp(12.5px, 2.68cqi, 13.75px); }
  .scene-chips i::before { width: 8px; height: 8px; }
  .scene-chips i.is-hit::after { left: 10px; width: 8px; height: 8px; margin-top: -5px; }
  .scene-foot { min-height: 74px; padding: 16px 18px 26px; }
  /* L'altezza della notifica vuota come piena, con il margine interno di qui (14) e il bordo (2): nessun salto al primo avviso. */
  .scene-toast { --toast-fs: 13.5px; min-height: calc(var(--toast-fs) * var(--toast-lh) * 2 + 17px); gap: 12px; padding: 7px 16px 7px 8px; border-radius: 13px; }
  .scene-toast .n { padding: 6px 9px; font-size: 12px; }
}
/* Fra 460 e 504 px (schermi di circa 1100 px, telefoni in orizzontale) i margini laterali di prima: i nomi lunghi stanno nella zona. */
@container scene (min-width: 460px) and (max-width: 504px) {
  .scene-map { padding-inline: 16px; }
  .scene-row { column-gap: 18px; }
  .scene-zone { flex-basis: calc(50% - 9px); padding-inline: 12px; }
}
/* Scena stretta (telefoni, colonna di destra sotto i 1100 px): elenco ad albero, ogni zona rientrata quanto il suo livello. Le linee
   scendono dal fianco sinistro del nodo a monte ed entrano nella zona di lato (site.js le legge da --tree). */
@container scene (max-width: 459px) {
  .scene-map { --tree: 1; align-items: stretch; gap: 12px; padding: 16px 14px 4px; }
  .scene-row { display: contents; }
  .scene-internet { align-self: flex-start; }
  .scene-zone { flex: none; margin-left: 32px; }
  .scene-zone[data-up="perimeter"] { margin-left: 64px; }
  /* La notifica più lunga (spagnolo, «Centro de datos › Base de datos») sta su una riga anche a 360 px; sotto, più respiro, nella stessa
     altezza di prima: le zone un po' più vicine fra loro (3 novembre 2026). */
  .scene-foot { padding: 6px 10px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-internet::after, .scene-zone.is-hit, .scene-chips i.is-hit::after { animation: none; }
  .scene-zone, .scene-chips i, .scene-chips i::before, .scene-toast { transition: none; }
}

/* Fonti in scorrimento */
.sources {
  position: relative; padding: 40px 0 44px; overflow: hidden;
  background: linear-gradient(180deg, transparent, var(--accent-soft) 50%, transparent), rgba(6, 8, 11, .35); /* velo scuro sull'aurora */
}
/* Filo d'accento sui bordi: la fascia delle fonti si stacca dalle sezioni vicine. */
.sources::before, .sources::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--border), var(--accent) 50%, var(--border)); opacity: .7; }
.sources::before { top: 0; }
.sources::after { bottom: 0; }
.sources-title { display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); margin: 0 0 var(--s-6); }
/* Due nastri in versi opposti. Ogni nastro ha due copie identiche (.set): scorrendo di metà larghezza il giro è continuo.
   Durata proporzionale alla lunghezza del nastro: stessa velocità per entrambi. */
@media (max-width: 380px) { .sources-title { font-size: 11px; letter-spacing: .1em; gap: 8px; } } /* una riga anche a 320 px in tedesco e inglese */
.track { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track + .track { margin-top: var(--s-3); }
.marquee { display: flex; width: max-content; animation: scroll 70s linear infinite; }
.track.rev .marquee { animation-direction: reverse; animation-duration: 66s; }
.track:hover .marquee { animation-play-state: paused; }
.marquee .set { display: flex; gap: var(--s-3); padding-right: var(--s-3); }
.src {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px;
  border: 1px solid var(--border-2); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--fg);
  font: 500 15px/1.2 var(--display); white-space: nowrap; transition: border-color .2s ease, background-color .2s ease;
}
.src:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--surface-2); }
.src-ico { width: 18px; height: 18px; flex: none; color: var(--accent); filter: drop-shadow(0 0 6px var(--glow)); }
@media (min-width: 760px) { .src { font-size: 16px; padding: 11px 20px 11px 16px; } }
@keyframes scroll { to { transform: translateX(-50%); } }
/* Senza animazioni: un solo elenco fermo, centrato. */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; width: auto; justify-content: center; }
  .marquee .set { flex-wrap: wrap; justify-content: center; padding: 0 var(--wrap-pad); }
  .marquee .set + .set { display: none; }
  .track { mask-image: none; -webkit-mask-image: none; }
}

/* Numeri della home (24 ottobre 2026): tre cifre in grande fra il nastro delle fonti e «Meno rumore. Più intelligence.», separate
   da un filo; sui telefoni una sotto l'altra. La frase sotto diventa la conclusione dei numeri. */
.numbers { padding: var(--section-pad) 0 0; }
.numbers[hidden] { display: none; }
.nums { display: grid; gap: 30px; }
@media (min-width: 760px) { .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .num + .num { border-left: 1px solid var(--border); } }
.num { container-type: inline-size; display: grid; align-content: start; justify-items: center; gap: 10px; padding: 0 20px; text-align: center; }
/* La cifra sempre su una riga dentro la sua colonna: la più lunga, «1 de cada 74», misura circa 5,5 volte il carattere. */
.num b { font: 700 min(clamp(40px, 5vw, 58px), 17cqi)/1 var(--display); letter-spacing: -0.04em; white-space: nowrap; }
.num span { max-width: 21em; font-size: 14.5px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.numbers + .claim { padding-top: calc(var(--section-pad) * .75); }
.claim { padding: var(--section-pad) 0; text-align: center; } /* sopra come la hero sotto: la fascia delle fonti ha lo stesso spazio ai due lati */
.claim p { font: 600 clamp(28px, 4.6vw, 52px)/1.1 var(--display); letter-spacing: -0.035em; margin: 0; }
.claim p span { white-space: nowrap; } /* le due frasi non si spezzano mai */
/* «Più intelligence.» (24 ottobre 2026, richiesta di Alessandro: è la promessa sopra il DefenceLevel Index, non il titolo di una
   sezione): una sfumatura sua, dal ciano al viola della luce di fondo. Ferma: in movimento ridipingeva il testo a ogni fotogramma,
   proprio sotto la barra sfocata, durante lo scorrimento (controllo dei lampi del 24 ottobre 2026). */
.aurora-text { background: linear-gradient(100deg, #3DD6F5 0%, #8F86FF 70%, #B3A8FF 105%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .aurora-text { background-image: linear-gradient(100deg, #0A7A95 0%, #5B4FE0 75%, #7A6CF0 105%); }
@media (max-width: 600px) { .claim p span { display: block; } } /* sui telefoni una frase per riga */
/* Fascia del DefenceLevel Index sotto "Meno allarmismo. Più intelligence." */
.index-band { display: grid; gap: var(--s-5); align-items: center; margin: var(--s-8) auto 0; padding: 22px 26px; max-width: 980px;
  border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); text-align: left; }
/* Testo e pulsante in alto, grafico dei 90 giorni sotto a tutta larghezza (sui telefoni: testo, grafico, pulsante). */
.index-band { grid-template-areas: "text" "chart" "btn"; justify-items: start; }
.index-band .ib-text { grid-area: text; }
.index-band > a.btn { grid-area: btn; }
.ib-chart { grid-area: chart; width: 100%; }
.ib-axis { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--muted); }
@media (min-width: 900px) { .index-band { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text btn" "chart chart"; column-gap: var(--s-6); } }
/* Tutta la fascia porta all'Index: l'area cliccabile del pulsante (vero link, accessibile) si estende all'intera card. */
.index-band a.btn, .index-band a.btn:active { position: static; transform: none; } /* niente effetto "premuto": sposterebbe l'area cliccabile sul solo pulsante */
.index-band a.btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2; }
.index-band { cursor: pointer; transition: transform .2s ease; }
.index-band:hover { transform: translateY(-2px); }
.index-band:hover a.btn { border-color: var(--accent); color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .index-band:hover { transform: none; } }
.ib-text { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.ib-text strong { display: flex; align-items: flex-start; gap: 10px; font: 600 19px/1.35 var(--display); color: var(--fg); margin-bottom: 6px; } /* simbolo in alto, sulla prima riga del titolo anche quando va a capo (26 px, quanto l'interlinea) */
.ib-title { text-wrap: balance; } /* mai una parola sola sulla seconda riga */
.ib-emblem { flex: none; width: 26px; height: 26px; display: inline-flex; color: var(--fg); } /* simbolo del DefenceLevel Index, come nel titolo della sua pagina */
.ib-side { display: grid; gap: var(--s-4); justify-items: start; } /* riquadro della metodologia nella pagina dell'Index */
.ib-strip { display: flex; align-items: flex-end; gap: 1px; height: 46px; width: 100%; }
.ib-strip span { position: relative; flex: 1 1 0; min-width: 0; height: var(--h); }
/* Stesso stile del grafico dell'Index: punto colorato su uno stelo sottile. */
.ib-strip span::before { content: ''; position: absolute; left: 50%; top: 3px; bottom: 0; width: 1.5px; margin-left: -.75px; background: linear-gradient(to top, transparent, color-mix(in srgb, var(--c, var(--border-2)) 70%, transparent)); }
.ib-strip span::after { content: ''; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--c, var(--border-2)); }
.ib-strip span.l1::after { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--d1); }
/* Sui telefoni 90 giorni stanno in pochi pixel ciascuno: solo barre colorate, senza punti che si sovrappongono. */
@media (max-width: 600px) {
  .ib-strip span::after { display: none; }
  .ib-strip span::before { top: 0; width: 2px; margin-left: -1px; background: var(--c, var(--border-2)); opacity: .85; }
}

/* ─── Schede ───────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .grid.c2 { grid-template-columns: repeat(2, 1fr); } .grid.c4 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: repeat(3, 1fr); } }
/* Quattro colonne da 1200 px: da lì in su le card hanno sempre la stessa larghezza, quindi le descrizioni
   tengono il numero di righe stabilito ("Come funziona" 5, "Per chi" 4). Sotto: due per riga. */
@media (min-width: 1200px) { .grid.c4 { grid-template-columns: repeat(4, 1fr); } }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 26px; transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--border-2); }
.card h3 { margin: 0 0 var(--s-3); }
/* Specificità minima (:where): è solo il default dei paragrafi nelle card. Così le regole dedicate
   (etichetta → titolo, titolo → testo, note e messaggi dei moduli) non vengono azzerate dentro le card. */
:where(.card) p { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.65; }
.card .idx { position: absolute; top: 22px; right: 22px; font: 500 12px var(--mono); color: var(--accent); }
/* «Come funziona» come percorso (24 ottobre 2026, site.js playFlow): il filo e i punti dietro le card, le card che si accendono
   al passaggio dell'impulso. Con le card in fila il filo corre sotto di loro, nello spazio in più. */
.flow-wrap { position: relative; }
.flow-wrap.has-rail { padding-bottom: 56px; }
.flow-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-wrap .grid { position: relative; }
.flow-wires path { fill: none; stroke: color-mix(in srgb, var(--accent) 34%, transparent); stroke-width: 1.4; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1); }
.flow-wires .flow-rail { stroke: color-mix(in srgb, var(--accent) 45%, transparent); }
.flow-wires circle { fill: var(--bg); stroke: color-mix(in srgb, var(--accent) 65%, transparent); stroke-width: 1.4; }
.flow-dots circle { fill: var(--accent); }
.flow-pulse circle { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.flow-pulse path { fill: none; stroke: none; }
#how .card { transition: border-color .45s ease, box-shadow .7s ease, transform .2s ease; }
#how .card .icon { transition: box-shadow .6s ease; }
#how .card.is-lit { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 18px 44px -20px var(--accent); }
#how .card.is-lit .icon { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px -4px var(--accent); }
.icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: var(--s-5); border: 1px solid var(--border); }
.icon svg { width: 20px; height: 20px; }
.card ul, ul.checks { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.card li, ul.checks li { position: relative; padding: 6px 0 6px 20px; font-size: 15px; color: var(--fg-2); }
.card li::before, ul.checks li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

/* Scala DEFCON */
.scale { display: grid; gap: 10px; }
.scale-row {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
@media (min-width: 860px) { .scale-row { grid-template-columns: 56px 180px 1fr; row-gap: 4px; } } /* titoletti fino a 162 px */
.scale-row .n { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font: 700 24px var(--display); background: var(--c); color: var(--ci); }
.scale-row strong { font: 600 17px var(--display); letter-spacing: -0.01em; }
.scale-row .desc { color: var(--fg-2); font-size: 15px; grid-column: 2; }
/* Cosa fare (23 ottobre 2026, richiesta di Alessandro): nel carattere del testo, non nel monospaziato, e su una riga in ogni lingua
   sullo schermo del computer (frasi brevi, una per livello, le stesse di lib/i18n defcon.*.message); sui telefoni va a capo. */
.scale-row .say { font: 500 14px/1.45 var(--sans); color: var(--muted); grid-column: 2; text-wrap: pretty; }
.scale-row .desc { text-wrap: balance; } /* niente parola sola in fondo */
/* Telefono e tablet: numero e nome sulla prima riga, sotto significato e cosa fare a tutta larghezza (niente colonna
   vuota sotto il numero). */
@media (max-width: 859px) {
  .scale-row { grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 8px; padding: 16px 18px; }
  .scale-row .n { width: 44px; height: 44px; border-radius: 11px; font-size: 22px; }
  .scale-row .desc, .scale-row .say { grid-column: 1 / -1; }
  .scale-row .desc { margin-top: 4px; }
}
/* Su schermi larghi: numero e nome a sinistra, a destra il significato e sotto, in piccolo, cosa fare. */
@media (min-width: 860px) {
  .scale-row .n, .scale-row strong { grid-row: span 2; }
  .scale-row strong { grid-column: 2; }
  .scale-row .desc { grid-column: 3; align-self: end; }
  .scale-row .say { grid-column: 3; align-self: start; }
}
.scale-row.alert { border-color: color-mix(in srgb, var(--c) 40%, var(--border)); }

/* Sezione del livello: la scala e, accanto, il cruscotto dal vivo, sceso dalla testata il 23 ottobre 2026 (in testata ora c'è la scena
   di My Defence): qui è la prova che il livello non è un'illustrazione. Una colonna sola sotto i 1100 px, il cruscotto dopo la scala. */
.defcon-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.console-box { width: 100%; max-width: 600px; margin-inline: auto; }
/* Affiancati: nella scala il numero a sinistra e, una sotto l'altra, nome, significato e cosa fare; il cruscotto resta in vista
   mentre si scorre la scala. */
@media (min-width: 1100px) {
  .defcon-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
  .console-box { max-width: none; position: sticky; top: calc(84px + var(--page-top)); }
  .defcon-grid .scale-row { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 3px; align-items: start; }
  .defcon-grid .scale-row .n { grid-row: span 3; }
  .defcon-grid .scale-row :is(strong, .desc, .say) { grid-column: 2; grid-row: auto; align-self: auto; }
  .defcon-grid .scale-row .say { margin-top: 3px; }
}
@media (min-width: 1100px) and (max-height: 719px) { .console-box { position: static; } } /* schermi bassi: il cruscotto non ci starebbe intero */
/* La riga del livello di oggi (site.js, loadConsole): bordo e alone nel suo colore, con l'etichetta «Livello attuale». */
.scale-row.is-today { border-color: var(--c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 0 16px 40px -20px var(--c); }
.scale-today { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; vertical-align: 2px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }

/* Anteprima briefing */
.preview { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .preview { grid-template-columns: 1fr 1.1fr; align-items: start; } }
/* Titolo della sezione "Il briefing": sempre su due righe, una frase per riga, in tutte le lingue.
   La dimensione segue la larghezza della colonna: 8.4cqi fa stare la riga più lunga misurata con un piccolo margine. Dal 24
   ottobre 2026 («Sei sezioni. Tre minuti di lettura.», scelta di Alessandro) è "Trois minutes de lecture." (prima "Cinco minutos
   de lectura.", più lunga); controllato in 5 lingue da 320 a 1.600 px. */
#briefing .preview > div:first-child { container-type: inline-size; }
#briefing h2 { white-space: nowrap; hyphens: none; -webkit-hyphens: none; font-size: min(clamp(30px, 4.4vw, 48px), 8.4cqi); }
/* Titolo della sezione «My Defence» (24 ottobre 2026): due righe, una frase per riga, come quello del briefing. La riga più
   lunga misurata è «La tua infrastruttura.» (9,9 volte la dimensione del carattere): 9.6cqi la fa stare con un piccolo margine. */
#mydefence .preview > div:first-child { container-type: inline-size; }
#mydefence h2 { white-space: nowrap; hyphens: none; -webkit-hyphens: none; font-size: min(clamp(30px, 4.4vw, 48px), 9.6cqi); }
.mail { border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.mail-top { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font: 500 12px var(--mono); color: var(--muted); }
.mail-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); }
.mail-body { padding: 22px; display: grid; gap: 14px; }
/* My Defence in home (24 ottobre 2026): tre passi numerati e la prova del filtro, una lista di voci d'esempio che con «Solo i miei
   prodotti» lascia in vista solo quelle sui prodotti delle zone (site.js playMine). Titolo → testo come nelle altre sezioni
   (2 novembre 2026, con la regola dei titoli di nuovo valida: qui erano 16 px, altrove 20). */
.md-home-p { margin: var(--gap-lead) 0 0; color: var(--fg-2); line-height: 1.65; max-width: 52ch; }
.md-steps { counter-reset: md-step; }
.md-steps > div { position: relative; padding-left: 44px; }
.md-steps > div::before { counter-increment: md-step; content: counter(md-step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 600 13px/1 var(--mono); color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
/* L'avviso che il filtro fa arrivare (24 ottobre 2026): come la notifica della scena in testata, nel colore del livello, sotto il
   riquadro. Compare solo con «Solo i miei prodotti» (site.js, playMine): il DEFCON 3 arriva come avviso solo sui propri prodotti.
   Lo spazio resta riservato, così la pagina non si muove. */
.mdf-alert { display: flex; align-items: center; gap: 11px; width: fit-content; max-width: 100%; margin: 18px auto 0; padding: 7px 16px 7px 8px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--border-2)); background: color-mix(in srgb, var(--c) 9%, var(--surface));
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c) 80%, transparent); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.mdf-wrap.is-mine .mdf-alert { opacity: 1; transform: none; transition-delay: .6s; }
.mdf-alert .n { flex: none; padding: 5px 8px; border-radius: 8px; background: var(--c); color: var(--ci); font: 700 11px/1.2 var(--mono); letter-spacing: .08em; white-space: nowrap; }
.mdf-alert .tx { display: grid; gap: 1px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--fg-2); white-space: nowrap; }
.mdf-alert .tx b { color: var(--fg); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mdf-alert { transition: none; } }
/* Affiancata ai passi (da 980 px): la colonna arriva in fondo come quella dei passi; la didascalia resta subito sotto il riquadro
   (sua scelta del 24 ottobre 2026) e l'avviso sta a metà dello spazio libero sotto di lei. */
@media (min-width: 980px) {
  .md-home .mdf-wrap { align-self: stretch; display: flex; flex-direction: column; }
  .md-home .mdf-alert { margin: auto; }
}
.mdf { border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); padding: 16px 16px 18px; }
.mdf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mdf-title { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mdf-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.mdf-opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; line-height: 1.2; color: var(--fg-2); white-space: nowrap; transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
.mdf-opt .md-ico { width: 13px; height: 13px; }
.mdf-opt.is-on { color: var(--fg); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.mdf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mdf-list li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px 11px 15px; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 35%, var(--surface)); overflow: hidden; transition: opacity .55s ease, transform .55s ease, border-color .55s ease, box-shadow .7s ease; }
.mdf-list li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.mdf-lv { flex: none; font: 600 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--c); }
.mdf-t { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdf-list .badge.mine { flex: none; padding: 3px 8px; font-size: 10.5px; }
.mdf.is-mine .mdf-list li:not(.mine) { opacity: .18; transform: scale(.985); }
.mdf.is-mine .mdf-list li.mine { border-color: color-mix(in srgb, var(--c) 45%, var(--border)); animation: md-breathe 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mdf.is-mine .mdf-list li.mine { animation: none; } }
@media (max-width: 520px) { .mdf-list .badge.mine { display: none; } .mdf-t { font-size: 13px; } }
.mail-level { --c: var(--d3); --ci: var(--d3-ink); display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.mail-level.l1 { --c: var(--d1); --ci: var(--d1-ink); } .mail-level.l2 { --c: var(--d2); --ci: var(--d2-ink); } .mail-level.l4 { --c: var(--d4); --ci: var(--d4-ink); } .mail-level.l5 { --c: var(--d5); --ci: var(--d5-ink); }
.mail-level .n { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: var(--ci); font: 700 24px var(--display); }
.mail-item { border-left: 3px solid var(--c); padding: 2px 0 2px 14px; }
.mail-item .t { font: 600 15px var(--display); }
.mail-item .t { margin: 2px 0 6px; }
.mail-item .m { font-size: 13px; line-height: 1.5; color: var(--fg-2); margin-bottom: 4px; } /* come nelle email: 4 px fra le righe */
.mail-item .m b { color: var(--fg); font-weight: 600; }
.mail-item .mm { border-left: 2px solid var(--border-2); padding-left: 10px; margin: 8px 0 0; } /* una CVE di una voce raggruppata */
.mail-item .m.now { color: var(--fg); border-left: 2px solid var(--border-2); padding: 2px 0 2px 12px; margin: 0 0 8px; } /* «Perché ora»: la novità, prima di impatto ed exploit, con il filo del riquadro del briefing */
.mail-item .m.now ul { margin: 4px 0 2px; padding-left: 16px; font-size: 12.5px; color: var(--fg-2); }
.mail-item .m.now .c { font-size: 12.5px; color: var(--muted); }
.mail-item .m.here { font-size: 12.5px; color: var(--muted); margin-top: 8px; } /* perché è stata selezionata */
.mail-item .m.here b { color: var(--fg-2); }
.mail-item .m.ids { font: 12px var(--mono); margin-top: 4px; }
.mail-item a { color: var(--accent); text-decoration: none; }
.mail-h { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.mail-list { margin: -6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.mail-list li + li { margin-top: 4px; }
.mail-list b { color: var(--fg); font-weight: 600; }
/* Righe dell'estratto della home: a capo normale. "pretty" in Safari bilancia tutte le righe e lasciava mezza riga vuota; la
   parola sola in fondo la evita già lo spazio indivisibile prima dell'ultima parola. */
.mail-list li { text-wrap: wrap; }
/* Giornata senza voci (DEFCON 5): la frase del briefing, sotto il livello. */
.mail-calm { font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.mail-noise { font-size: 13px; color: var(--muted); border-top: 1px dashed var(--border-2); padding-top: 12px; }
.tag { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* Prezzo */
.price-card {
  position: relative; border-radius: var(--r-lg); padding: 34px; border: 1px solid var(--border-2);
  background: radial-gradient(120% 80% at 100% 0%, var(--accent-soft), transparent 60%), var(--surface); box-shadow: var(--shadow);
}
.amount { font: 700 64px/1 var(--display); letter-spacing: -0.04em; margin: 0 0 var(--s-2); }
.amount small { font: 500 17px var(--sans); color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.price-card .vat { font-size: 13px; color: var(--muted); margin: 0 0 var(--s-2); } /* IVA inclusa: riga a sé, uguale in tutte le lingue */
.price-grid { display: grid; gap: 40px; align-items: start; }
/* Affiancati da 1200 px: sotto, il riquadro prende tutta la larghezza e le 4 voci stanno su una riga. */
@media (max-width: 1199px) { .price-col { max-width: 640px; } }
/* Sotto il riquadro, centrata e discreta: il rimando alle domande frequenti. */
.price-faq { margin: var(--s-6) 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.price-faq a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.price-faq a:hover { color: var(--fg); }
@media (min-width: 1200px) { .price-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; } }
/* A sinistra, sotto il titolo, la prova in tre tappe (24 ottobre 2026, al posto di quattro righe in piccolo che lasciavano la
   colonna spoglia): un filo verticale con i punti, la stessa lingua del flusso di «Come funziona». Il titolo parte all'altezza
   di "49 €". */
@media (min-width: 1200px) { #pricing h2 { margin-bottom: var(--s-4); } #pricing .lead { margin-top: 0; } }
.trial-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; }
.trial-steps li { position: relative; padding-left: 36px; display: grid; gap: 3px; }
.trial-steps li::before { content: ''; position: absolute; left: 5px; top: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); }
.trial-steps li:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: 22px; bottom: -18px; width: 1.5px; border-radius: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 22%, transparent)); }
/* L'ultima tappa è la scelta: il punto vuoto. */
.trial-steps li:last-child::before { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft); }
.trial-steps b { font: 600 17px/1.3 var(--display); letter-spacing: -0.01em; color: var(--fg); }
.trial-steps span { font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 30em; }
.trial-trust { margin: var(--s-5) 0 0 36px; font-size: 13px; color: var(--muted); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary { cursor: pointer; font: 600 18px var(--display); letter-spacing: -0.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; text-wrap: balance; } /* domande a capo bilanciate: mai una parola sola */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 22px/1 var(--sans); color: var(--accent); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 12px 0 0; color: var(--fg-2); }

/* Invito finale (24 ottobre 2026): sopra il titolo il segno della casa, un punto che corre sul filo fino alla busta (i dati che
   arrivano a te, come nell'iscrizione inviata); sotto, quanto manca al prossimo briefing, con il punto vivo (site.js,
   nextBriefing). Con «riduci movimento» il segno è fermo. */
.cta-signal { position: relative; width: 172px; height: 36px; margin: 0 auto var(--s-5); color: var(--accent); }
.cs-line { position: absolute; left: 0; right: 42px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 65%, transparent)); }
.cs-dot { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent); opacity: 0; animation: cs-run 3.6s cubic-bezier(.45, 0, .2, 1) infinite; }
.cs-env { position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; animation: cs-env 3.6s ease-out infinite; }
@keyframes cs-run { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 52% { transform: translateX(126px); opacity: 1; } 60%, 100% { transform: translateX(126px); opacity: 0; } }
/* Solo trasformazioni (la busta cresce un attimo): niente filtri animati, che ridipingono a ogni fotogramma. */
@keyframes cs-env { 0%, 50% { transform: none; } 60% { transform: scale(1.16); } 78%, 100% { transform: none; } }
.cta-next { display: inline-flex; align-items: center; gap: 10px; margin: var(--s-5) 0 0; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--border-2); background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.cta-next .dot { flex: none; }
.cta-next-t { text-wrap: balance; } /* sui telefoni va su due righe: righe di lunghezza simile */
@media (prefers-reduced-motion: reduce) { .cs-dot { display: none; } .cs-env { animation: none; } }
.cta-band { text-align: center; padding: 72px 24px; border: 1px solid var(--border-2); border-radius: var(--r-lg); background: radial-gradient(60% 120% at 50% 0%, var(--accent-soft), transparent 70%), var(--surface); }
.cta-band .signup { margin: var(--s-7) auto 0; justify-content: center; }
.cta-band h2 + .lead { margin-left: auto; margin-right: auto; }
/* Invito finale: luce piena dal centro del bordo superiore, come il bagliore dello sfondo. */
.edge-light.edge-top::after { padding: 1.5px; background: radial-gradient(50% 60% at 50% 0%, rgba(160, 240, 255, 1) 0%, rgba(61, 214, 245, .75) 35%, rgba(61, 214, 245, .15) 75%, rgba(61, 214, 245, .06) 100%); }
.edge-light.edge-top { box-shadow: var(--shadow), 0 -10px 40px -26px rgba(61, 214, 245, .4); }

footer { padding: 40px 0 56px; border-top: 1px solid var(--border); margin-top: 40px; }
.foot { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
/* Piè di pagina a colonne: marchio e lingue, servizio, indice, azienda; sotto, la riga legale. */
/* minmax(0, …): sui telefoni stretti le colonne si restringono invece di allargare la pagina ("Télécharger les données (CSV)"). */
.foot-grid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); font-size: 14px; color: var(--muted); }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; align-content: start; }
/* Da 900 px le colonne dei link sono larghe quanto il loro testo, con lo stesso spazio fra l'una e l'altra, uguale nel piè di pagina
   del sito e in quello della dashboard; il marchio prende il resto (20 ottobre 2026, osservazione di Alessandro: con colonne di
   larghezza fissa gli spazi visibili andavano da 46 a 132 px, e diversi fra i due piè di pagina). */
:root { --foot-gap: var(--s-9); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1fr) repeat(3, auto); column-gap: var(--foot-gap); } .foot-brand { grid-column: auto; } }
.foot-tag { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); margin: 4px 0 0; }
.foot-about { margin: 0; max-width: 34ch; line-height: 1.6; }
.foot-brand .foot-langs { display: flex; gap: 6px; margin-top: 6px; color: var(--border-2); font: 500 12px var(--mono); }
.foot-brand .foot-langs a { color: var(--muted); text-decoration: none; letter-spacing: .06em; } .foot-brand .foot-langs a:hover { color: var(--fg); }
.foot-brand .foot-langs a[aria-current="true"] { color: var(--accent); }
/* Pagina LinkedIn: nel piè di pagina e in testa all'Index, accanto alla metodologia. Marchio nel colore del testo. */
.li-ico { flex: none; width: 15px; height: 15px; }
.foot-brand .foot-social { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--fg-2); text-decoration: none; }
.foot-brand .foot-social:hover { color: var(--accent); }
.method-top { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.method-top .li-top { display: inline-flex; align-items: center; gap: 7px; }
.foot-col { display: grid; gap: 10px; align-content: start; }
/* Titoli delle colonne: h2 per la struttura dei titoli (lettori di schermo), con l'aspetto di un'etichetta. */
.foot-grid .foot-col h2 { font: 500 11.5px var(--mono); hyphens: manual; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 4px; }
/* Telefoni: titoli delle colonne un po' più stretti, perché in due colonne da 154 px (360 px) «Informations légales» usciva di 2 px.
   Sotto i 360 px una colonna sola, nel sito come nella dashboard (26 ottobre 2026 la dashboard, 2 novembre il sito): in due colonne
   da 134 px «DefenceLevel Index» entrava di 7 px nel margine in tutte le lingue, «Informations légales» (titolo che non va a capo:
   mai una parola sola) usciva dallo schermo nella dashboard, e «Sicherheitsmeldungen» dalla sua colonna. */
@media (max-width: 399px) { .foot-grid .foot-col h2 { letter-spacing: .06em; } }
@media (max-width: 359px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot-col a { color: var(--muted); text-decoration: none; overflow-wrap: break-word; } .foot-col a:hover { color: var(--fg); }
.foot-col a.foot-index { display: inline-flex; align-items: center; gap: 7px; justify-self: start; } /* con l'emblema, come nella barra in alto */
.foot-company p { margin: 0; line-height: 1.6; }
.foot-legal-links { display: grid; gap: 10px; margin-top: 6px; } .foot-legal-links:empty { display: none; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.foot a { color: var(--muted); text-decoration: none; } .foot a:hover { color: var(--fg); }

/* Comparsa allo scorrimento */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ─── Pannello ─────────────────────────────────────────────────────────── */
/* Solo sopra e sotto: ai lati vale il margine di .wrap, così il pannello è largo quanto i contenuti della home. */
.panel { padding-top: 24px; padding-bottom: 72px; }
.banner { border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--r); padding: 14px 18px; margin: 0 0 18px; font-size: 15px; color: var(--fg-2); }
.banner.ok { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--fg); }
.banner.warn { border-color: color-mix(in srgb, var(--d3) 50%, transparent); }
.banner.bad { border-color: color-mix(in srgb, var(--d2) 50%, transparent); }
.panel-grid { display: grid; gap: 24px; }
@media (min-width: 1000px) { .panel-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
/* Colonna degli strumenti ferma mentre si scorre il briefing, solo se lo schermo la contiene per intero. */
@media (min-width: 1000px) and (min-height: 720px) { .side { position: sticky; top: 104px; } }
.hero-level { border: 1px solid var(--border-2); border-radius: var(--r-lg); background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--lvl) 18%, transparent), transparent 60%), var(--surface); padding: 24px; margin-bottom: calc(var(--s-7) + var(--s-2)); }
.hero-level .level-num { width: 104px; height: 104px; font-size: 64px; }
.hero-level .level-label { font-size: 24px; }
.hero-level .level-msg { font-size: 15.5px; }
/* Telefoni: numero come nella home; sui più stretti anche nome e margini più piccoli ("significativo" deve stare accanto). */
@media (max-width: 480px) { .hero-level .level-num { width: 76px; height: 76px; font-size: 46px; } }
@media (max-width: 380px) { .hero-level { padding: 18px; } .hero-level .level-num { width: 64px; height: 64px; font-size: 40px; } .hero-level .level-label { font-size: 21px; } }
.block { margin: 0 0 calc(var(--s-7) + var(--s-2)); }
/* .panel davanti: più forte di ":lang(de) h2", che altrimenti in tedesco li ingrandisce come i titoli delle pagine. */
.panel .block-title { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
.block-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.summary { font-size: 17px; line-height: 1.65; color: var(--fg); margin: 0; }
.item {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 20px 20px 18px 22px;
  margin-bottom: 12px; position: relative; overflow: hidden;
}
.item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.item-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--border-2); color: var(--fg-2); }
.badge.lvl { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--fg); }
.badge.lvl::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
/* Già nei briefing dei giorni precedenti: tratteggio e icona di ripetizione, non un allarme in più. */
.badge.ongoing { border-style: dashed; color: var(--fg-2); }
.badge.cvss-na { border-style: dashed; color: var(--muted); } /* nessun punteggio CVSS pubblicato (20 ottobre 2026) */
.badge.ongoing::before { content: '↻'; font-size: 12px; line-height: 1; }
.member > .badge.ongoing { margin: 0 0 8px; }
/* Titolo della vulnerabilità: le righe si riempiono come nei testi sotto, senza la parola sola in fondo (19 ottobre 2026: con le
   righe bilanciate dei titoli la prima si fermava a metà, «Cisco Secure Email Gateway: unauthenticated / path traversal…»). */
.item h3 { font-size: 18px; margin: 0 0 12px; text-wrap: pretty; }
.facts { display: grid; gap: 8px; margin: 0; }
.facts div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 14.5px; }
.facts dt { font: 500 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--fg-2); }
.why { font-size: 13px; color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
/* Richiamo delle altre vulnerabilità sfruttate dello stesso prodotto (metodo 1.12), sotto «Cosa fare». */
.item .related { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.item .related strong { color: var(--fg); font-weight: 600; }
/* «Perché ora»: la novità delle ultime 24 ore, sopra impatto e cosa fare; filo neutro (i colori DEFCON sono dei livelli). */
.item .now { border-left: 2px solid var(--border-2); padding: 2px 0 2px 12px; margin: 0 0 14px; }
.now-title { font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.now-lead { margin: 2px 0 6px; font-size: 14.5px; font-weight: 500; color: var(--fg); line-height: 1.5; }
.now-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.item .now ul { margin: 2px 0 4px; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.item .now a { color: var(--accent); text-decoration: none; }
.ids { font: 12px var(--mono); color: var(--muted); margin-top: 8px; overflow-wrap: anywhere; }
.ids a { color: var(--accent); text-decoration: none; }
/* Scheda raggruppata: ogni CVE in un blocco proprio, separato da un filo; il codice CVE apre il blocco. */
.members { margin-top: 14px; }
.member { padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--border); }
.member:first-child { margin-top: 0; }
/* Gruppi grandi (14 ottobre 2026): le vulnerabilità che l'email conta in una riga, con gli stessi spazi di un membro. */
.member-more { padding-top: 14px; margin: 14px 0 0; border-top: 1px dashed var(--border); font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.member-more strong { color: var(--fg); font-weight: 600; }
/* Ancora in corso, senza novità: scheda breve (livello, prodotto, da quando, codici), sotto le vulnerabilità nuove. */
.quiet-intro { font-size: 14.5px; color: var(--fg-2); margin: 0 0 var(--s-4); }
/* Legenda in fondo al briefing (25 ottobre 2026): una riga discreta verso la guida, dopo l'ultima sezione. */
.report-legend { margin: var(--s-6) 0 0; font-size: 13.5px; color: var(--muted); }
.report-legend a { color: var(--accent); }
.item.quiet { padding: 16px 18px 14px 20px; }
.item.quiet .item-head { margin-bottom: 10px; }
.item.quiet h3 { font-size: 16px; margin: 0; }
.member-head { margin: 0 0 6px; }
.list li > .ids { margin-top: 6px; } /* da tenere d'occhio: codice CVE e fonte a capo, come nelle schede */
.member-title { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--fg); }
.member .why { border-top: 0; margin-top: 8px; padding-top: 0; }
.actions { margin: 0; padding: 0; list-style: none; counter-reset: a; }
.actions li { counter-increment: a; position: relative; padding: 12px 14px 12px 50px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); margin-bottom: 8px; color: var(--fg-2); font-size: 15px; line-height: 1.55; }
/* Numero centrato sulla prima riga del testo: stessa altezza di riga (15 px × 1,55). */
.actions li::before { content: counter(a, decimal-leading-zero); position: absolute; left: 14px; top: 12px; font: 600 13px/23.25px var(--mono); color: var(--accent); }
.list { margin: 0; padding: 0; list-style: none; }
.list li { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--fg-2); }
.list li strong { color: var(--fg); font-weight: 600; }
.list.noise li strong { color: var(--fg-2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; background: var(--surface); }
.stat b { display: block; font: 600 20px var(--mono); color: var(--fg); }
.stat span { font-size: 12px; color: var(--muted); }
.side .card, .panel > #subscription { padding: 20px; margin-bottom: 16px; }
/* Accesso gratuito (12 ottobre 2026): la card dell'abbonamento non può passare inosservata. Stessa card, nel colore del
   marchio: filo e alone, bollino «Gratuito» con il regalo, testo pieno. Sui telefoni sale in cima (app.js, placeSubscription). */
#subscription.is-comp, #subscription.is-comp:hover { border: 1.5px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), transparent 75%), var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 40px -24px color-mix(in srgb, var(--accent) 70%, transparent); }
.panel > #subscription { margin-bottom: 18px; } /* in cima (telefoni): come gli avvisi in testa, .banner */
#subscription.is-comp h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.comp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: 700 11.5px/1 var(--mono); letter-spacing: .12em; white-space: nowrap; }
.comp-badge svg { width: 13px; height: 13px; flex: none; }
#subscription.is-comp .sub-text { color: var(--fg); font-size: 16px; }
#subscription.is-comp .sub-text:has(+ .btn[hidden]) { margin-bottom: 0; }
/* Eliminazione dell'account: un link discreto sotto l'abbonamento e una finestra di conferma sopra la pagina. */
.side-delete { margin: 0; text-align: center; }
.link-btn { background: none; border: 0; padding: 4px 2px; font: 13px var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--d2); }
dialog.confirm { width: min(460px, calc(100vw - 32px)); padding: var(--s-6); border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
dialog.confirm::backdrop { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.confirm h2 { font: 600 22px/1.25 var(--display); margin: 0 0 var(--s-4); }
dialog.confirm p { color: var(--fg-2); font-size: 15px; line-height: 1.6; margin: 0 0 var(--s-3); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-5); }
@media (max-width: 480px) { .confirm-actions { flex-direction: column; } .confirm-actions .btn { width: 100%; } } /* telefono: uno sopra l'altro */
.btn.danger { background: var(--d2); color: var(--d2-ink); box-shadow: none; }
.btn.danger[disabled] { cursor: not-allowed; opacity: .4; }
.delete-email { font: 600 15px/1.4 var(--mono); color: var(--fg) !important; word-break: break-all; margin: var(--s-1) 0 var(--s-4) !important; }
dialog.confirm .field { margin: 0; }
.btn.danger:hover { background: color-mix(in srgb, var(--d2) 85%, #000); }
/* Riquadro raggiunto da un link (app.js, spotlight): bordo nel colore del marchio che si spegne in due secondi e mezzo. */
.spotlight { animation: spotlight 2.5s ease-out; }
@keyframes spotlight {
  0%, 45% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px var(--accent-soft); }
  100% { box-shadow: 0 0 0 2px transparent, 0 0 0 7px transparent; }
}
.side h3, .panel > #subscription h3 { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-4); }
/* Archivio: calendario del mese. Un quadratino per giorno col colore del livello; spenti i giorni senza briefing. */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.cal-month { display: inline-flex; align-items: center; gap: 2px; min-width: 0; font: 600 15px var(--display); color: var(--fg); }
/* Mese e anno: menu nativi con l'aspetto del titolo, una freccina sotto il testo come unico segno che si possono aprire. */
.cal-pick { appearance: none; -webkit-appearance: none; field-sizing: content; max-width: 100%; border: 0; border-radius: 6px; padding: 3px 15px 3px 5px; font: inherit; color: inherit; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237C8693' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 3px center / 9px 6px; }
.cal-pick:hover:not(:disabled), .cal-pick:focus-visible { background-color: var(--accent-soft); outline: none; }
.cal-pick:disabled { cursor: default; background-image: none; padding-right: 5px; opacity: 1; }
.cal-pick option { color: initial; }
.cal-nav { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--fg-2); cursor: pointer; }
.cal-nav:hover:not(:disabled) { color: var(--fg); border-color: var(--border-2); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-wd { font: 500 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font: 600 12px var(--mono); text-decoration: none; }
a.cal-day { background: color-mix(in srgb, var(--c) 88%, transparent); color: var(--ci); transition: filter .15s ease; }
a.cal-day:hover { filter: brightness(1.15); }
a.cal-day[aria-current="page"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fg); }
.cal-day.off { color: var(--muted); opacity: .5; font-weight: 500; }
/* Testa del briefing, allineata a sinistra come i riquadri: occhiello, data come titolo; frecce raccolte a destra. */
/* Riga della data: titolo ed export nella colonna del briefing (export al bordo destro della card del livello), frecce
   dell'archivio sopra la colonna degli strumenti. */
.day-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 16px; margin: 14px 0 18px; } /* più aria sopra il titolo */
@media (min-width: 1000px) { .day-head { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 24px; } .day-head .day-nav { justify-self: end; } }
.day-head-main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; min-width: 0; }
.day-head-text { min-width: 0; }
.export { display: inline-flex; align-items: center; flex: none; gap: 2px; height: 36px; padding: 0 3px 0 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); }
.export > svg { width: 15px; height: 15px; margin-right: 3px; flex: none; }
.export button { position: relative; height: 28px; padding: 0 9px; border: 0; border-radius: 999px; background: none; color: var(--fg-2); font: 500 12px var(--mono); letter-spacing: .04em; cursor: pointer; }
.export button:hover, .export button:focus-visible { background: var(--accent-soft); color: var(--fg); outline: none; }
.export button.busy { color: transparent; cursor: progress; }
.export button.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin .7s linear infinite; }
@media (max-width: 350px) { .export { padding: 0 3px; } .export > svg { display: none; } .export button { padding: 0 7px; } } /* telefoni stretti: accanto alle frecce dell'archivio */
.day-head .kicker { margin: 0 0 10px; }
/* .day-head davanti: più forte di ":lang(de|fr|es) h1", che altrimenti in quelle lingue la ingrandisce. */
.day-head .day-title { margin: 0; font: 600 clamp(24px, 2.6vw, 32px)/1.15 var(--display); letter-spacing: -0.025em; color: var(--fg); hyphens: manual; -webkit-hyphens: manual; }
.day-nav { display: inline-flex; flex: none; gap: 8px; }
.day-nav a, .day-nav-off { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg-2); text-decoration: none; font: 500 13px var(--mono); }
.day-nav a:hover { color: var(--fg); border-color: var(--border-2); }
.day-nav-off { opacity: .35; }
.day-nav a span { display: none; }
@media (min-width: 760px) { .day-nav a { padding: 0 12px; } .day-nav a span { display: inline; } }
.mini { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font: 700 12px var(--display); background: var(--c); color: var(--ci); }
.locked { text-align: center; padding: 36px 24px; }
.center-box { max-width: 460px; margin: 64px auto; }
.center-box .card { padding: 32px; }

/* Colori DEFCON come variabili locali */
.l5 { --c: var(--d5); --ci: var(--d5-ink); } .l4 { --c: var(--d4); --ci: var(--d4-ink); }
.l3 { --c: var(--d3); --ci: var(--d3-ink); } .l2 { --c: var(--d2); --ci: var(--d2-ink); }
.l1 { --c: var(--d1); --ci: var(--d1-ink); }

/* Telefoni */
/* Sotto i 640 px il pulsante "Prova gratis" della barra sparisce: c'è già nella prima schermata. */
@media (max-width: 640px) { .nav .btn.sm { display: none; } }
@media (max-width: 480px) {
  .signup .btn { flex: 1 1 100%; }
  .top-inner { padding-left: 14px; }
  .console-body { gap: 18px; }
  .level-num { width: 76px; height: 76px; font-size: 46px; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .stats { grid-template-columns: 1fr; }
}

/* Selettore di lingua */
.lang { position: relative; }
.brand { display: inline-flex; align-items: center; gap: 14px; }
/* Più aria fra logo e selettori su tablet e computer. */
@media (min-width: 760px) { .brand { gap: var(--s-6); } }
.brand-tools { display: inline-flex; align-items: center; gap: 4px; }
/* Il menu delle lingue si apre verso destra dal pulsante; sui telefoni verso sinistra, per non uscire dallo schermo. */
@media (min-width: 600px) { .brand .lang-menu { right: auto; left: 0; } }
.lang summary {
  list-style: none; cursor: pointer; height: 38px; min-width: 46px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); color: var(--fg-2); font: 600 12px var(--mono); letter-spacing: .08em;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--fg); border-color: var(--border-2); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px; z-index: 60;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
.lang-menu a, .lang-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; border: 0; background: none;
  color: var(--fg-2); font: 14px var(--sans); text-decoration: none; cursor: pointer;
}
.lang-menu a:hover, .lang-menu button:hover { background: var(--accent-soft); color: var(--fg); }
.lang-menu [aria-current="true"] { color: var(--accent); }
.foot-langs a { font: 500 12px var(--mono); letter-spacing: .06em; }
.foot-langs a[aria-current="true"] { color: var(--accent); }

/* Lingue con parole lunghe: titoli più compatti e sillabazione */
/* Sillabazione solo in tedesco: altrove spezza le parole senza bisogno */
:lang(de) h1, :lang(de) h2 { hyphens: auto; -webkit-hyphens: auto; }
:lang(de) h1, :lang(fr) h1, :lang(es) h1 { font-size: clamp(34px, 5vw, 60px); }
:lang(de) h2 { font-size: clamp(28px, 3.8vw, 42px); }

/* Elenco di voci con titolo e descrizione (sezione Briefing) */
.features { display: grid; gap: var(--s-7); margin-top: var(--gap-head); }
.features h3 { margin: 0; }
.features h3 + p { margin: var(--s-2) 0 0; color: var(--muted); line-height: 1.65; }
/* Le cinque sezioni del briefing con la loro icona a sinistra (24 ottobre 2026), come i passi numerati di My Defence: segni
   piccoli nel colore d'accento, il testo allineato dopo. */
.brief-secs > div { position: relative; padding-left: 44px; }
.sec-ico { position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.sec-ico svg { width: 15px; height: 15px; }
.price-card .signup { margin-top: var(--s-6); }
.mail-top span { margin-left: var(--s-2); }
.sub-text { margin: 0 0 var(--s-4); font-size: 15px; color: var(--fg-2); line-height: 1.6; text-wrap: pretty; }
/* Titolo dell'accesso mai spezzato col trattino. In tedesco sono due parole ("Willkommen zurück."): restano su una riga e,
   sugli schermi stretti, il carattere si riduce; le altre lingue vanno a capo fra le parole. */
.login-card h1 { font-size: clamp(26px, 8.4vw, 34px); line-height: 1.1; hyphens: manual; -webkit-hyphens: manual; }
:lang(de) .login-card h1 { font-size: min(34px, 7vw); }
.login-card h1 + p { color: var(--muted); margin-bottom: var(--s-6); }
.level-card-head .kicker { margin: 0 0 var(--s-2); }
.hero-level .meter-wrap { margin-top: var(--s-5); }
.locked .btn { margin-top: var(--s-4); }
.level-kicker { margin: 0 0 var(--s-2); }

/* Titoli: righe bilanciate; il titolo principale non si sillaba mai, in nessuna lingua.
   La dimensione del titolo della hero segue la larghezza della sua colonna (container query),
   così anche la parola più lunga ("vulnerabilities", "Schwachstellen,") ci sta sempre intera. */
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; } /* evita la parola sola in fondo ai paragrafi, dove supportato */
.hero-grid > div:first-child { container-type: inline-size; min-width: 0; }
.hero h1, :lang(de) .hero h1, :lang(fr) .hero h1, :lang(es) .hero h1 {
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal;
  font-size: clamp(26px, 9.8cqi, 72px);
}
.hero-punch { white-space: nowrap; } /* la seconda frase del titolo resta sempre intera */

/* ─── Testata sui telefoni stretti (in fondo al file: prevale sulle regole generali) ───
   Logo, lingua, tema, lente e "Accedi" devono stare nella barra in tutte le lingue, da 320 px in su. Con la lente (24 ottobre 2026)
   non ci stavano più: a 320 px "Accedi" spariva, schiacciato, e verso 430 px "Anmelden" e "Connexion" uscivano dalla barra (la pagina
   scorreva di lato fino a 12 px). Fino a 480 px "Accedi" è un'icona (il nome resta per gli screen reader, aria-label); sotto i 360 px,
   senza sessione, il tema cede il posto ad "Accedi": senza una scelta il sito segue il sistema, mentre la ricerca delle CVE non ha
   altri ingressi (26 ottobre 2026). Con una sessione aperta cede invece la lente (più giù, pagine pubbliche con una sessione aperta). */
.nav .login { display: inline-flex; align-items: center; }
.login-ico { display: none; width: 20px; height: 20px; }
#logout { gap: 7px; } #logout .login-ico { display: block; width: 18px; height: 18px; } /* "Esci" sempre con l'icona; sul telefono solo l'icona */
@media (max-width: 519px) { #logout .login-txt { display: none; } #logout { padding: 8px; } } /* "Se déconnecter", "Abmelden": sotto i 520 px solo l'icona */
@media (max-width: 480px) {
  .login-txt { display: none; }
  .login-ico { display: block; }
  .nav .login { padding: 8px; }
}
@media (max-width: 420px) {
  .brand { gap: 8px; }
  .logo-word { font-size: 16px; }
  .logo svg { width: 22px; height: 22px; }
  .top-inner { gap: 6px; padding-right: 8px; }
}
@media (max-width: 400px) { .nav .app-index { padding: 8px; } .app-index-txt { display: none; } } /* Index: solo l'emblema */
@media (max-width: 359px) { :root:not(.authed) .brand-tools:has(.cve-lens) .theme { display: none; } }

/* ─── Pagina /trend: andamento pubblico del rischio ───────────────────── */
.trend-page { padding-top: var(--page-top); }
.trend-page .section-head h1 { margin: 0; } /* stessa dimensione dei titoli di tutte le pagine interne (regola h1) */
.trend-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.trend-periods { display: inline-flex; flex: none; gap: 4px; padding: 4px; border: 1px solid var(--border-2); border-radius: 999px; }
.trend-periods button { border: 0; background: none; color: var(--fg-2); font: 500 13px var(--sans); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.trend-periods button[aria-pressed="true"] { background: var(--accent-soft); color: var(--fg); }
/* Telefoni: i quattro periodi su tutta la larghezza del riquadro, pulsanti uguali e più compatti. */
@media (max-width: 420px) { .trend-periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } .trend-periods button { padding: 8px 2px; font-size: 12.5px; white-space: nowrap; } }
@media (max-width: 340px) { .trend-periods { gap: 2px; padding: 3px; } .trend-periods button { font-size: 11.5px; padding: 8px 0; } } /* "30 giorni" a 320 px */
.trend-since { font: 500 12px var(--mono); color: var(--muted); margin: var(--s-2) 0 0; }
.trend-since:empty { display: none; }
.trend-period { font: 500 12px var(--mono); color: var(--muted); margin: var(--s-2) 0 var(--s-6); } /* 24 px sotto, uguale nelle due card */
.trend-card { margin-bottom: var(--s-5); }
.trend-card h3 { margin: 0; font-size: clamp(15px, calc(5vw - .6px), 19px); } /* "Vulnerabilidades seleccionadas" e "Ausgewählte Schwachstellen" su una riga anche a 320 px */
@media (max-width: 389px) { .trend-top .trend-card-head h3 { font-size: calc(6vw - 5px); white-space: nowrap; } } /* "Livello DEFCON giorno per giorno" su una riga fino a 320 px */
.trend-note { font-size: 14px; color: var(--muted); margin: var(--s-2) 0 0; }
/* Livello giorno per giorno: un punto nel colore del livello su uno stelo sottile (più grave = più in alto).
   Ogni colonna è alta quanto il grafico: il tooltip compare passando ovunque sopra il giorno, anche sugli steli bassi. */
.trend-levels { display: flex; align-items: stretch; height: 146px; margin-top: var(--s-5); min-width: 0; }
.trend-levels span { position: relative; flex: 1 1 0; min-width: 0; cursor: default; }
.trend-levels span.none { --c: var(--border-2); }
.trend-levels span::before { content: ''; position: absolute; left: 50%; bottom: 0; height: calc(var(--h) * 140 / 146 - 4px); width: 1.5px; margin-left: -.75px; background: linear-gradient(to top, transparent, color-mix(in srgb, var(--c) 70%, transparent)); }
.trend-levels span::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--h) * 140 / 146); width: var(--dot, 9px); height: var(--dot, 9px); margin: 0 0 calc(var(--dot, 9px) / -2) calc(var(--dot, 9px) / -2); border-radius: 50%; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); transition: transform .12s; }
.trend-levels[data-dense="mid"] { --dot: 7px; }
.trend-levels span.on { background: linear-gradient(to top, color-mix(in srgb, var(--c) 10%, transparent), transparent); border-radius: 4px; }
.trend-levels span.on::after { transform: scale(1.45); }
/* Livello 1: oltre al colore, un anello intorno al pallino (e nel calendario un bordo chiaro), per non affidare la differenza al solo colore. */
.trend-levels span.l1::after { box-shadow: 0 0 0 2px var(--bg, #06080B), 0 0 0 3.5px var(--d1), 0 0 12px color-mix(in srgb, var(--d1) 70%, transparent); }
/* Calendario (1 anno, o 90 giorni sul telefono): settimane in colonna, giorni da lunedì a domenica in riga. */
.trend-levels.heat { display: flex; flex-direction: column; justify-content: center; } /* stessa altezza degli steli (146 px), calendario al centro */
.heat-months, .heat-grid { display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); column-gap: 3px; }
.heat-months { font: 500 11px var(--mono); color: var(--muted); margin-bottom: 6px; }
.heat-months span { white-space: nowrap; }
.heat-grid { grid-template-rows: repeat(7, auto); grid-auto-flow: column; row-gap: 3px; }
.heat-grid i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--c) 82%, transparent); }
.heat-grid i.none { background: var(--border); }
.heat-grid.fill { grid-template-rows: repeat(7, minmax(0, 1fr)); } /* schermi larghi: righe nell'altezza del grafico (trend.js) */
.heat-grid.fill i { aspect-ratio: auto; }
.heat-grid i.pad { background: none; }
.heat-grid i.l1 { background: var(--d1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); }
.heat-grid i.on { outline: 2px solid var(--fg); outline-offset: 1px; }
@media (max-width: 600px) { .heat-months, .heat-grid { column-gap: 2px; } .heat-grid { row-gap: 2px; } .heat-grid i { border-radius: 2px; } }
.trend-axis { display: flex; justify-content: space-between; font: 500 11px var(--mono); color: var(--muted); margin-top: 8px; }
/* 5 anni: una barra per mese, i giorni del mese divisi per livello (il più grave in alto, in proporzione ai giorni). */
.trend-levels.months { display: flex; align-items: stretch; gap: 2px; }
.trend-levels.months .mbar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; border-radius: 3px; overflow: hidden; cursor: default; }
.trend-levels.months .mbar i { display: block; flex-basis: 0; min-height: 0; background: color-mix(in srgb, var(--c) 82%, transparent); }
.trend-levels.months .mbar i.none { flex-grow: 1; background: var(--border); }
.trend-levels.months .mbar.on i { background: var(--c); }
.trend-levels.months .mbar.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg-2); }
/* Catalogo CISA KEV mese per mese: colonne in rosso tenue, piene al passaggio. */
.trend-kev-card { margin-top: var(--s-5); }
.trend-kev-card .trend-period { margin: 0; text-align: right; }
.trend-kev { display: flex; align-items: stretch; gap: 2px; height: 120px; margin-top: var(--s-5); }
.trend-kev div { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; cursor: default; }
.trend-kev i { display: block; width: 100%; height: var(--h); min-height: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--d2) 62%, transparent); }
.trend-kev div.on i { background: var(--d2); }
.trend-kev div.partial i { background: color-mix(in srgb, var(--d2) 28%, transparent); }
.trend-axis[hidden] { display: none; } /* nel calendario le date sono i mesi in alto */
.trend-axis.is-blank { visibility: hidden; } /* calendario: la riga delle date resta vuota, per non cambiare l'altezza della card */
.trend-row { display: grid; gap: var(--s-5); }
/* minmax(0, …): le colonne non si allargano oltre lo spazio anche con 365 barre. */
.trend-card { min-width: 0; }
@media (min-width: 900px) { .trend-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.trend-row .trend-card { margin-bottom: 0; } /* lo spazio fra le card lo dà la griglia; sotto, il separatore */
#trend-days { display: grid; grid-template-columns: 26px max-content minmax(40px, 1fr) auto; gap: 10px; align-items: center; margin-top: var(--s-5); }
.td-row { display: contents; font-size: 14px; } /* le righe condividono le colonne della griglia: barre allineate */
.td-row > * { font-size: 14px; }
.td-n { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--c); color: var(--ci); font: 700 14px var(--display); }
.td-label { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.td-bar i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 3px; }
.td-count { font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; }
/* Telefoni: le barre si restringono; sotto i 360 px spariscono (sarebbero di pochi pixel) e il nome del livello resta su una riga. */
@media (max-width: 420px) { #trend-days { grid-template-columns: 26px minmax(0, max-content) minmax(24px, 1fr) auto; } }
@media (max-width: 359px) { #trend-days { grid-template-columns: 26px minmax(0, 1fr) auto; } .td-bar { display: none; } .td-label { white-space: normal; } }
.vol-period { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); } /* affiancati se c'è spazio, altrimenti uno sotto l'altro */
.vol-period span { white-space: nowrap; }
/* Vulnerabilità selezionate: linea con area sfumata; colonne invisibili sopra per data e numero al passaggio del mouse. */
.tv-area { position: relative; height: 170px; } /* alto quanto le cinque righe della card "Giorni per livello" */
.tv-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tv-hit { position: absolute; inset: 0; display: flex; }
.tv-hit span { flex: 1 1 0; min-width: 0; }
.tv-hit span { cursor: default; }
.tv-hit span.on { background: linear-gradient(to top, color-mix(in srgb, var(--accent) 14%, transparent), transparent); }
.tv-mark { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 12px var(--accent); pointer-events: none; }
/* Tooltip dei grafici dell'Index: compare subito, sopra il punto. */
.chart-tip { position: fixed; z-index: 50; transform: translateX(-50%); pointer-events: none; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); font-size: 13px; line-height: 1.4; color: var(--fg); white-space: nowrap; }
.chart-tip b { display: block; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.chart-tip span { display: flex; align-items: center; gap: 7px; }
.chart-tip span i { width: 9px; height: 9px; border-radius: 50%; }
.trend-page .cta-band { margin-top: calc(var(--section-pad) * 2); } /* stessa distanza della card finale in home, senza separatore */


/* DefenceLevel Index: numeri di sintesi, frase del mese, metodo, citazione e download. */
.kpis { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); margin: var(--s-7) 0 var(--s-5); border-block: 1px solid var(--border); }
/* Sui telefoni i quattro numeri, uno sotto l'altro, occupano quasi 600 px: prima il grafico del livello, poi i numeri. */
@media (max-width: 539px) {
  .trend-top { display: flex; flex-direction: column; margin-top: var(--s-7); }
  .trend-top .kpis { order: 1; margin: 0 0 var(--s-5); }
}
/* Una striscia con divisori sottili, senza riquadri: una colonna sui telefoni, due fino a 1100 px, quattro sopra. */
.kpi + .kpi { border-top: 1px solid var(--border); }
@media (min-width: 540px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi + .kpi { border-top: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--border); padding-left: 24px; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (min-width: 1100px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi + .kpi { border-left: 1px solid var(--border); padding-left: 24px; }
  .kpi:nth-child(n+3) { border-top: 0; }
}
/* Ogni card: etichetta, valore, descrizione, periodo, ognuno su una riga. Con subgrid le quattro righe
   restano allineate fra le card anche se un testo dovesse andare a capo. */
.kpi { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; padding: 20px 24px 20px 0; min-width: 0; }
.kpi-label { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi-value { font: 700 28px/1.1 var(--display); letter-spacing: -0.02em; color: var(--fg); margin: 4px 0 2px; }
.kpi-sub { font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.kpi-foot { font: 500 10.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); margin-top: 4px; }
.kpi-now[class*=" l"] .kpi-value { color: var(--c); }
/* Livello attuale (prima card dell'Index): la scritta «respira» nel colore del livello, come il riquadro della home, perché
   è un dato dal vivo (9 ottobre 2026). Più grave, respiro più rapido. */
.kpi-now[class*=" l"] .kpi-value { animation: kpi-breathe 3.2s ease-in-out infinite; }
.kpi-now.l2 .kpi-value { animation-duration: 2.2s; }
.kpi-now.l1 .kpi-value { animation-duration: 1.4s; }
@keyframes kpi-breathe {
  0%, 100% { text-shadow: 0 0 0 transparent; opacity: 1; }
  50% { text-shadow: 0 0 16px color-mix(in srgb, var(--c) 65%, transparent), 0 0 3px color-mix(in srgb, var(--c) 45%, transparent); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) { .kpi-now .kpi-value { animation: none; } }
.trend-summary { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0 0 var(--s-7); }
.trend-method { margin: 0; }
.trend-method h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 var(--s-5); }
.trend-method .trend-since { margin-top: var(--s-5); }
.trend-attrib { font-size: 13px; color: var(--muted); margin: var(--s-5) 0 0; } /* fonti dei dati di sfruttamento (attribuzione VulnCheck KEV) */
.trend-embed { margin: var(--s-5) 0 0; font-size: 15px; }
.trend-embed a { color: var(--accent); text-decoration: none; }
.trend-embed a:hover { text-decoration: underline; }
.cite-box { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-4); padding: 12px 14px; border: 1px dashed var(--border-2); border-radius: 10px; font: 500 13px/1.5 var(--mono); color: var(--fg-2); }
.cite-box span { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; } /* una riga per indice e data, livello, indirizzo */
.cite-box .btn { flex: none; justify-content: center; }
/* Sui telefoni il pulsante va sotto il testo, così le tre righe restano leggibili. */
@media (max-width: 600px) { .cite-box { flex-direction: column; align-items: flex-start; font-size: 11.5px; padding: 12px; } }
/* Metodo: ogni descrizione al massimo in 3 righe, in tutte le lingue (misurato da 320 a 1920 px).
   Tre colonne da 1200 px; sotto, una colonna; sui telefoni molto stretti margini e testo un po' ridotti. */
@media (min-width: 760px) and (max-width: 1199px) { .trend-method .grid.c3 { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .trend-method .card { padding: 16px; } .trend-method .card p { font-size: 13px; } }

/* Titoli a righe esatte (righe separate con <br> nei testi; data-fit="always" anche sui telefoni):
   niente a capo automatici; la dimensione la adatta site.js (fitLines) allo spazio disponibile, in ogni lingua.
   Sui telefoni dimensione normale e a capo dove serve: due sole righe sarebbero illeggibili.
   ".section-head .fit-lines": più forte di ".section-head h2 { max-width: 22em }", che fermava il titolo a 22em; una larghezza in em
   scende col carattere, quindi fitLines non lo faceva mai stare (2 novembre 2026: in francese «Pour ceux qui sont responsables…»
   e in tedesco «In einer Sekunde wissen Sie…» uscivano dal riquadro fra 768 e 1440 px). */
.fit-lines, .section-head .fit-lines { white-space: nowrap; max-width: none; }
@media (max-width: 600px) { .fit-lines:not([data-fit="always"]) { white-space: normal; } }
@media (min-width: 960px) { .section-head p.one-line { max-width: none; } }

/* Titolo dell'Index con l'emblema a sinistra. */
.index-title { display: flex; align-items: center; gap: 0.32em; white-space: nowrap; hyphens: none; -webkit-hyphens: none; } /* il nome non si spezza mai */
@media (max-width: 600px) { .method-page .method h1, .trend-page .section-head h1.index-title { font-size: min(34px, 8.4vw); } } /* sui telefoni una sola misura: il nome dell'Index, che non va mai a capo, deve stare nello schermo */ /* sui telefoni il nome, che non va mai a capo, deve stare nello schermo */
.index-emblem { flex: none; width: .92em; height: .92em; display: inline-flex; color: var(--fg); }
.index-emblem svg { width: 100%; height: 100%; }

/* Pagina del metodo (/index/methodology): testo lungo, leggibile, con tabelle e formule. */
.method-page { padding: var(--page-top) 0 var(--s-8); }
.not-found .method { min-height: 42vh; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.not-found-actions .btn { color: var(--accent-ink); text-decoration: none; }
.not-found-actions .btn.ghost { color: var(--fg); }
/* Il video di My Defence (31 ottobre 2026, dall'email ai nuovi iscritti): 4:5, al massimo 420 px di larghezza, così sullo schermo del
   computer sta con il titolo; il pulsante sotto. */
.md-video { display: block; width: min(100%, 420px); height: auto; aspect-ratio: 4 / 5; margin: var(--s-6) 0 0; border-radius: 14px; background: #06080B; border: 1px solid var(--border); }
.method .md-video-actions { margin: var(--s-6) 0 0; } /* «.method p» azzera il margine sopra: come le azioni della pagina 404 */
.md-video-actions .btn { color: var(--accent-ink); text-decoration: none; }
.method { max-width: 860px; }

/* ─── Pagina pubblica di una CVE (/cve/<codice>, lib/cvepage.js, 24 ottobre 2026) ───────────────────────────────── */
.cve-page { padding: var(--page-top) 0 var(--s-8); }
/* Sulla griglia del sito, come le altre pagine (25 ottobre 2026, segnalazione di Alessandro: era una colonna stretta al centro, con
   righe spezzate prima del necessario). Sugli schermi larghi due colonne: a sinistra il livello e i giorni, a destra l'invito, le
   schede ufficiali e la ricerca (lib/cvepage.js, grid). */
@media (min-width: 1000px) {
  .cve-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); column-gap: var(--s-4); align-items: start; }
}
.cve-page h1 { font-size: clamp(32px, 5vw, 52px); margin: 0 0 var(--s-4); overflow-wrap: anywhere; }
/* Più forti di ":lang(de) h2" e della sillabazione dei titoli tedeschi: qui i titoli sono etichette, sempre piccole e intere. */
.cve-page :is(h1, h2) { hyphens: manual; -webkit-hyphens: manual; }
.cve-page h1.cve-id { font-family: var(--mono); letter-spacing: -0.02em; }
.cve-page .cve-lead { margin: 0 0 var(--s-6); max-width: none; }
.cve-page .l0 { --c: var(--border-2); --ci: var(--fg-2); }
.cve-level { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin: 0 0 var(--s-4);
  border-color: color-mix(in srgb, var(--c) 45%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 9%, var(--surface)), var(--surface) 70%); }
.cve-lv { flex: none; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; font: 700 24px/1 var(--display); color: var(--ci); background: var(--c); }
.cve-lv-t { display: grid; gap: 3px; }
.cve-lv-t span { font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cve-lv-t b { font-size: 18px; font-weight: 600; color: var(--fg); }
.cve-days { padding: 22px; margin: 0 0 var(--s-4); }
.cve-page .cve-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 var(--s-3);
  font: 600 12.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.cve-page .cve-h span { font-weight: 500; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.card .cve-list { list-style: none; margin: 0; padding: 0; }
.card .cve-list li { display: grid; grid-template-columns: auto minmax(0, 11em) minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border); font-size: 15px; color: var(--fg-2); }
.card .cve-list li::before { content: none; }
.cve-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.cve-day { color: var(--fg); font-weight: 500; }
.cve-lv-day { font: 600 12px var(--mono); letter-spacing: .06em; color: var(--c); }
.cve-page .l0 .cve-lv-day { color: var(--muted); }
.cve-note { margin: var(--s-3) 0 0; font-size: 13px; color: var(--muted); }
/* Dati ufficiali e cronologia (25 ottobre 2026): card come quella dei giorni nei briefing, con le stesse distanze. */
.cve-facts, .cve-time { padding: 22px; margin: 0 0 var(--s-4); }
.cve-facts .facts { gap: 10px; }
.cve-facts .facts div { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); }
.cve-facts .facts dd b { color: var(--fg); font-weight: 600; }
.cve-facts .facts dd a { color: var(--accent); }
.cve-vector { display: block; margin-top: 3px; padding: 0; background: none; font: 500 12px/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.card .cve-tl { list-style: none; margin: 0; padding: 0; }
.card .cve-tl li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--border); font-size: 15px; color: var(--fg-2); }
.card .cve-tl li::before { content: none; }
.cve-text { color: var(--fg-2); margin: 0 0 var(--s-4); } /* tutta la colonna: niente righe spezzate prima del necessario */
.cve-cta { padding: 24px; margin: 0 0 var(--s-5); border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 65%); }
.cve-cta h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 0 0 8px; text-wrap: wrap; }
/* Card con titolo e testo (pagine delle CVE, dei produttori, elenco delle guide; 25 ottobre 2026, osservazione di Alessandro): il
   titolo va a capo solo quando serve, a righe piene, invece che a metà riga come vorrebbe il bilanciamento dei titoli; l'ultima
   parola resta comunque legata alla penultima (lib/site.js). Le righe sotto la card, nella colonna a fianco, cominciano e
   finiscono dove comincia e finisce il testo della card. */
.cve-side > :not(.card) { padding-inline: 24px; }
.cve-cta p { margin: 0 0 var(--s-4); color: var(--fg-2); text-wrap: wrap; } /* righe piene: in un testo così breve «pretty» le accorciava tutte; l'ultima parola resta legata alla penultima (lib/site.js) */
.cve-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cve-acts .btn { color: var(--accent-ink); text-decoration: none; }
.cve-archive { font-size: 14px; color: var(--accent); }
.cve-official { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 var(--s-6); font-size: 14px; color: var(--muted); }
.cve-official a { color: var(--accent); }
.cve-again { max-width: 520px; }
.cve-page .cve-again h2 { font: 600 12.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--s-3); }
.cve-again .cve-form .field { min-height: 46px; }
/* Nella colonna stretta, a fianco dei dati: il campo su tutta la larghezza e il pulsante sotto, come «Prova gratis» nella card. */
.cve-side .cve-form { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.cve-side .cve-form .field { flex: none; width: 100%; }
.cve-side .cve-form .btn.sm { min-height: 46px; padding: 0 20px; font-size: 15px; } /* alto come il campo e come «Prova gratis» */
/* Produttori nel catalogo KEV della CISA (25 ottobre 2026, lib/kevpage.js): la stessa pagina delle CVE, con i numeri in fila come
   nell'Index, la tabella dei produttori e l'elenco delle voci (data, CVE, prodotto e nome, ransomware). */
.kev-page .kicker a { color: inherit; text-decoration: none; }
.kev-page .kev-kpis { margin: 0 0 var(--s-5); }
.kev-card { padding: 22px; margin: 0 0 var(--s-4); }
.kev-scroll { overflow-x: auto; }
.kev-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.kev-table th { padding: 0 0 10px; font: 600 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
.kev-table td { padding: 10px 0; border-top: 1px solid var(--border); color: var(--fg-2); text-align: right; }
.kev-table :is(th, td):first-child { text-align: left; }
.kev-table :is(th, td) + :is(th, td) { padding-left: 16px; }
.kev-table td a { color: var(--fg); font-weight: 500; }
.card .kev-list { list-style: none; margin: 0; padding: 0; }
.card .kev-list li { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 9.5em) minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px;
  padding: 10px 0; border-top: 1px solid var(--border); font-size: 15px; color: var(--fg-2); }
.card .kev-list li::before { content: none; }
.kev-cve { font: 500 13.5px var(--mono); color: var(--accent); white-space: nowrap; }
.kev-what { display: grid; gap: 2px; min-width: 0; }
.kev-what b { color: var(--fg); font-weight: 500; }
.kev-what span { font-size: 13.5px; color: var(--muted); }
.kev-badge { display: inline-flex; padding: 2px 7px; border-radius: 6px; font: 600 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--d2);
  background: color-mix(in srgb, var(--d2) 12%, transparent); }
/* Sul telefono: data e codice sulla prima riga (la data va a capo se è lunga, il codice mai), sotto prodotto, nome e ransomware. */
@media (max-width: 759px) {
  .card .kev-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .kev-what { grid-column: 1 / -1; }
  .kev-rw { grid-column: 1 / -1; }
  .kev-rw:empty { display: none; }
}

/* Telefoni: data e livello sulla prima riga, la sezione sotto. */
@media (max-width: 599px) {
  .cve-facts .facts div { grid-template-columns: 1fr; gap: 2px; } /* etichetta sopra il valore, come nel briefing */
  .card .cve-tl li { grid-template-columns: 1fr; gap: 2px; }
  .card .cve-list li { grid-template-columns: auto 1fr auto; row-gap: 2px; }
  .cve-sec { grid-column: 2 / 4; grid-row: 2; font-size: 13.5px; }
  .cve-lv-day { grid-column: 3; grid-row: 1; }
}
/* Titolo delle pagine interne (metodo, Index, legali, kit stampa, 404): una sola misura in tutte le lingue. */
.method h1, .trend-page .section-head h1 { font-size: clamp(34px, 5vw, 56px); hyphens: manual; -webkit-hyphens: manual; } /* mai parole spezzate: se non ci stanno, il carattere si riduce (theme.js) */
/* Anche i titoli delle sezioni delle pagine di testo (metodo, documenti): in tedesco niente sillabazione automatica
   ("Überprü-fung"); le parole ci stanno anche a 320 px. */
.method h2, .method h3 { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 359px) { .method h2 { font-size: 20px !important; } } /* "contenimento dell'allarmismo" in una riga a 320 px */
.method h1 { margin: 0 0 var(--s-5); width: max-content; max-width: calc(min(var(--max), 100vw) - 2 * var(--wrap-pad)); } /* il titolo usa tutta la larghezza della pagina: il limite di 860 px vale per i paragrafi */
/* Meno i due margini veri della pagina: con 32 px fissi, giusti solo sotto i 760 px, da 768 px in su il titolo entrava nel margine
   destro fino a 30 px («So schützen wir die Daten von My Defence» a 2 px dal bordo a 1024 px; 2 novembre 2026). */
/* L'etichetta in cima resta quella standard: la regola dei paragrafi del testo (sotto) non deve ingrandirla. */
.method .kicker { margin: 0 0 var(--gap-kicker); }
/* Etichetta in cima alle pagine interne (metodo, Index, legali, kit stampa, 404): più grande di quelle delle sezioni. */
.method > .kicker:first-child, .trend-page .section-head > .kicker:first-child { display: flex; width: fit-content; font-size: 16px; line-height: 1.3; letter-spacing: .14em; color: var(--fg-2); }
.method .lead { margin-bottom: var(--s-6); max-width: none; } /* il testo occupa tutta la colonna: niente righe spezzate prima del necessario */
.method h2 { position: relative; font-size: clamp(22px, 2.6vw, 28px); margin: var(--doc-sep) 0 var(--s-4); padding-top: calc(var(--doc-sep) + 2px); scroll-margin-top: 96px; } /* +2 px: compensa l'interlinea, testo alla stessa distanza della linea sopra */
/* Sezioni dei documenti (metodo, kit stampa, pagine legali): lo stesso separatore della home, linea sfumata con il punto,
   ma più vicino al testo (56 px per lato, 40 sui telefoni): qui le sezioni sono molte e si leggono di seguito. */
.method { --doc-sep: clamp(40px, 5vw, 56px); }
.method h2::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-2) 30%, transparent 47%, transparent 53%, var(--border-2) 70%, transparent); }
.method h2::after { content: ''; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
/* Elenco delle guide (/guides, 25 ottobre 2026): una card per guida con titolo e sommario; tutta la card è il collegamento. */
.method .guide-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin: 0; }
.method a.guide-card { display: block; padding: 22px 24px; color: inherit; text-decoration: none; }
.method .guide-card h2 { margin: 0 0 var(--s-2); padding: 0; font-size: clamp(19px, 2.2vw, 22px); color: var(--fg); transition: color .15s ease; text-wrap: wrap; }
.method .guide-card h2::before, .method .guide-card h2::after { content: none; }
/* «Schwachstellenmanagement» non sta in una riga sui telefoni: in tedesco i titoli secondari si sillabano (regola dei titoli). */
.method .guide-card h2:lang(de) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.method .guide-card p { margin: 0; font-size: 15px; color: var(--fg-2); }
.method a.guide-card:hover h2, .method a.guide-card:focus-visible h2 { color: var(--accent); }
.method h3 { font-size: 18px; margin: var(--s-6) 0 var(--s-3); }
.method p, .method li { color: var(--fg-2); font-size: 16px; line-height: 1.7; }
.method p { margin: 0 0 var(--s-4); }
.method ul, .method ol { margin: 0 0 var(--s-4); padding-left: 22px; }
.method li { margin: 4px 0; }
.method strong { color: var(--fg); }
.method code { font: 500 13.5px var(--mono); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--fg); }
/* Integra l'Index: anteprima del badge nei due temi e blocchi di codice da copiare. */
.badge-demo { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0; }
.badge-demo img { max-width: 100%; height: auto; }
.code-block { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); margin: var(--s-4) 0; }
.code-block pre { align-self: stretch; margin: 0; padding: 14px 16px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface-2); overflow-x: auto; }
.code-block pre code { display: block; padding: 0; border: 0; background: none; font: 500 13px/1.6 var(--mono); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; } /* va a capo dentro il riquadro: niente righe da scorrere di lato */
/* Codice da incollare (badge, citazione): righe lunghe a capo, il pulsante "Copia" sotto, mai sopra il testo. */
.code-block:has(.code-copy) pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.code-block .code-copy { min-height: 32px; padding: 0 14px; font-size: 13px; }
.method table.api td:first-child { white-space: nowrap; }
/* Sul telefono la tabella degli indirizzi diventa un elenco: indirizzo sopra, contenuto sotto. */
@media (max-width: 600px) {
  .method table.api, .method table.api tbody { display: block; }
  .method table.api tr:first-child { display: none; }
  .method table.api tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .method table.api tr:last-child { border-bottom: 0; }
  .method table.api td { display: block; padding: 0; border: 0; }
  .method table.api td:first-child { white-space: normal; overflow-wrap: anywhere; margin-bottom: 4px; }
}
.method .formula { font: 500 14px/1.7 var(--mono); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); padding: 14px 18px; margin: 0 0 var(--s-4); color: var(--fg); --u: 1ch; }
/* Ogni riga della formula va a capo dentro il riquadro, con il seguito rientrato (lib/site.js, formulaLines); sui telefoni
   rientri dimezzati, per lasciare spazio al testo. */
.method .formula .fl { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: calc(var(--h) * var(--u)); text-indent: calc((var(--i) - var(--h)) * var(--u)); }
.method .formula .ind { display: none; }
@media (max-width: 600px) { .method .formula { --u: .5ch; font-size: 13px; padding: 12px 14px; } }
/* In stampa (o "Salva come PDF") lo scorrimento orizzontale non esiste: formule e tabelle vanno a capo invece di essere tagliate. */
@media print {
  .method .formula { font-size: 9.6px; line-height: 1.7; }
  .method .table-wrap { overflow: visible; }
  .method td, .method th { overflow-wrap: break-word; word-break: normal; }
  .method th { white-space: nowrap; }
}
.method .table-wrap { overflow-x: auto; margin: 0 0 var(--s-5); border: 1px solid var(--border-2); border-radius: var(--r); }
.method table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.method th, .method td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--fg-2); }
.method th { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.method tr:last-child td { border-bottom: 0; }
/* Tabella delle versioni del metodo: versione e data su una riga, il testo prende il resto. */
.method table.versions { font-size: 13px; } /* dettaglio tecnico: più piccolo del testo della pagina */
.method table.versions td { padding: 8px 12px; line-height: 1.55; }
.method table.versions th { padding: 8px 12px; font-size: 10.5px; }
.versions-older { margin-top: var(--s-3); }
.versions-older summary { cursor: pointer; font: 500 12px var(--mono); letter-spacing: .04em; color: var(--muted); padding: 6px 0; }
.versions-older summary:hover { color: var(--fg); }
.versions-older .table-wrap { margin-top: var(--s-2); }
.method table.versions th:nth-child(-n+2), .method table.versions td:nth-child(-n+2) { white-space: nowrap; }
.method table.scale th:nth-child(-n+2), .method table.scale td:nth-child(-n+2) { white-space: nowrap; } /* nomi dei livelli mai spezzati */
/* Sui telefoni le altre tabelle del metodo diventano schede (12 ottobre 2026): niente tabelle più larghe dello schermo.
   La prima cella fa da titolo, ogni altra ha sopra il titolo della sua colonna (data-label, lib/site.js tableLabels); le
   versioni hanno numero e data su una riga e le modifiche sotto, come la scala. */
@media (max-width: 600px) {
  .method table:not(.scale, .api), .method table:not(.scale, .api) tbody { display: block; }
  .method table:not(.scale, .api) tr:first-child { display: none; }
  .method table:not(.scale, .api) tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .method table:not(.scale, .api) tr:last-child { border-bottom: 0; }
  .method table:not(.scale, .api) td { display: block; padding: 0; border: 0; }
  .method table:not(.scale, .api) td:first-child { color: var(--fg); font-weight: 600; }
  .method table:not(.scale, .api, .versions) td + td { margin-top: 8px; }
  .method table:not(.scale, .api, .versions) td[data-label] + td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .method table.versions td:nth-child(-n+2) { display: inline; }
  .method table.versions td:first-child::after { content: ' · '; font-weight: 400; color: var(--muted); }
  .method table.versions td:nth-child(3) { margin-top: 4px; }
}
/* Sui telefoni la scala si impila: livello e nome su una riga, il significato sotto, a tutta larghezza. */
@media (max-width: 600px) {
  .method table.scale, .method table.scale tbody { display: block; }
  .method table.scale tr:first-child { display: none; }
  .method table.scale tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .method table.scale tr:last-child { border-bottom: 0; }
  .method table.scale td { display: inline; padding: 0; border: 0; }
  .method table.scale td:first-child { font: 500 13px var(--mono); color: var(--muted); }
  .method table.scale td:first-child::after { content: ' · '; }
  .method table.scale td:nth-child(2) { color: var(--fg); font-weight: 600; }
  .method table.scale td:nth-child(3) { display: block; margin-top: 4px; }
}
.method .toc { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); padding: 18px 22px 10px; margin: 0 0 var(--s-6); }
.method .toc ol { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, auto); grid-auto-flow: column; column-gap: 40px; margin: var(--s-2) 0 0; } /* 8 voci a sinistra, 7 a destra */
.method .toc li { margin: 0; padding: 4px 0; }
@media (max-width: 700px) { .method .toc ol { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }
.method .toc a, .method a { color: var(--accent); text-decoration: none; }
/* Link dentro il testo (metodo, pagine legali, fonti): sottolineati, non solo colorati (WCAG 1.4.1). L'indice resta senza. */
.method :is(p, li, td, dd) a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.method .toc a { text-decoration: none; }
.method .note { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 0 0 var(--s-5); }
.method .meta { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .04em; }
.method-top { margin: var(--s-4) 0 0; font-size: 15px; } /* Index: link alla metodologia sotto la descrizione */
.method-top a { color: var(--accent); text-decoration: none; font-weight: 500; }
.method-top a:hover { text-decoration: underline; text-underline-offset: 3px; }
.trend-method .method-band { margin: var(--s-6) 0 0; max-width: none; }
@media (min-width: 900px) { .trend-method .method-band { grid-template-columns: minmax(0, 1fr) auto; } .method-band .ib-side { justify-items: end; } } /* testo a sinistra, pulsante a destra */

/* Kit stampa (/brand) */
.kit-press { margin: 0 0 var(--s-5); }
.method.kit a.btn { margin: var(--s-2) 0 var(--s-4); color: var(--accent-ink); } /* le regole dei link del testo non valgono per il pulsante */
.kit-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: var(--s-5); }
.kit-item { border: 1px solid var(--border-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.kit-preview { height: 150px; display: block; padding: 24px; overflow: hidden; box-sizing: border-box; }
.kit-preview.dark { background: #06080B; } .kit-preview.light { background: #F4F6F8; } .kit-preview.none { background: #06080B; padding: 0; }
.kit-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kit-preview.none img { width: 100%; height: 100%; object-fit: cover; }
.kit-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--fg-2); }
.kit-links { display: inline-flex; gap: 10px; flex: none; }
.kit-links a { font: 500 12px var(--mono); color: var(--accent); text-decoration: none; }
.kit-colors { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: var(--s-4); }
.kit-colors div { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; align-items: center; }
.kit-colors i { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; }
.kit-colors b { font: 500 13px var(--mono); color: var(--fg); } .kit-colors span { font-size: 13px; color: var(--muted); }
.doc-title { white-space: nowrap; } /* pagine legali: titolo su una riga, fitLines() riduce il carattere se non ci sta */
/* Oggi nei grafici dell'Index (pagina e home): il pallino si illumina e si ingrandisce appena, poi torna normale.
   Niente anelli: l'anello resta il segno del livello 1. */
@keyframes today-pulse { 0%, 100% { filter: drop-shadow(0 0 0 transparent); scale: 1; } 50% { filter: drop-shadow(0 0 6px var(--c)) brightness(1.25); scale: 1.3; } }
.trend-levels span.today::after, .ib-strip span.today::after, .heat-grid i.today { animation: today-pulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .trend-levels span.today::after, .ib-strip span.today::after, .heat-grid i.today { animation: none; } }
/* Disegno a comparsa (24 ottobre 2026, trend.js drawIn e site.js loadIndexStrip): gli steli crescono da sinistra a destra, poi
   compaiono i pallini, quello di oggi per ultimo e poi pulsa come sempre; calendario, mesi e colonne del catalogo crescono dal basso. */
@keyframes stem-in { from { transform: scaleY(0); } }
@keyframes dot-in { from { opacity: 0; transform: translateY(6px) scale(.3); } }
@keyframes cell-in { from { opacity: 0; transform: scale(.55); } }
:is(.trend-levels, .ib-strip).draw-wait span::before { transform: scaleY(0); }
:is(.trend-levels, .ib-strip).draw-wait span::after, .trend-levels.draw-wait .heat-grid i { opacity: 0; }
:is(.trend-levels.draw-wait .mbar, .trend-kev.draw-wait i) { transform: scaleY(0); }
:is(.trend-levels, .ib-strip).draw-in span::before { transform-origin: bottom; animation: stem-in .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * .8s); }
:is(.trend-levels, .ib-strip).draw-in span::after { animation: dot-in .35s ease-out both; animation-delay: calc(var(--k, 0) * .8s + .28s); }
:is(.trend-levels, .ib-strip).draw-in span.today::after { animation: dot-in .35s ease-out both, today-pulse 2.4s ease-out infinite; animation-delay: calc(var(--k, 0) * .8s + .28s), 1.5s; }
.trend-levels.draw-in .heat-grid i { animation: cell-in .4s ease-out both; animation-delay: calc(var(--k, 0) * .7s); }
.trend-levels.draw-in .mbar, .trend-kev.draw-in i { transform-origin: bottom; animation: stem-in .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * .6s); }
@media (prefers-reduced-motion: reduce) {
  :is(.trend-levels, .ib-strip).draw-in span::before, :is(.trend-levels, .ib-strip).draw-in span::after, .trend-levels.draw-in .heat-grid i, .trend-levels.draw-in .mbar, .trend-kev.draw-in i { animation: none; }
}

/* ─── Selettore del tema: chiaro, scuro o come il sistema (accanto alla lingua) ─────────────────── */
.theme { position: relative; }
.theme summary { list-style: none; }
.theme summary::-webkit-details-marker { display: none; }
.theme-toggle {
  height: 38px; width: 38px; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--fg-2);
}
.theme-toggle:hover, .theme[open] .theme-toggle { color: var(--fg); border-color: var(--border-2); }
.theme-toggle svg { width: 17px; height: 17px; }
/* L'icona dice la scelta: sole, luna, o lo schermo per «come il sistema» (anche prima dello script). */
.theme-toggle :is(.i-sun, .i-moon), :root:is([data-theme-pref="light"], [data-theme-pref="dark"]) .theme-toggle .i-auto { display: none; }
:root[data-theme-pref="light"] .theme-toggle .i-sun, :root[data-theme-pref="dark"] .theme-toggle .i-moon { display: block; }
.theme-menu { min-width: 190px; }
.theme-menu button { display: flex; align-items: center; gap: 10px; }
.theme-menu svg { width: 16px; height: 16px; flex: none; }

/* ─── Ricerca di una CVE (24 ottobre 2026): la lente accanto a lingua e tema, il campo sotto la barra ──────────── */
.cve-lens { position: relative; }
.cve-lens summary { list-style: none; }
.cve-lens summary::-webkit-details-marker { display: none; }
.cve-lens-toggle {
  height: 38px; width: 38px; display: inline-grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--fg-2);
}
.cve-lens-toggle:hover, .cve-lens[open] .cve-lens-toggle { color: var(--fg); border-color: var(--border-2); }
.cve-lens-toggle svg { width: 17px; height: 17px; }
.cve-lens-pop {
  position: absolute; left: 0; top: calc(100% + 8px); width: 400px; padding: 12px; z-index: 60;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
.cve-form { display: flex; gap: 8px; margin: 0; }
.cve-form .field { flex: 1; min-width: 0; min-height: 40px; padding: 0 14px; font-size: 14px; }
.search-msg { margin: 8px 4px 0; font-size: 13px; color: var(--muted); }
.search-msg:empty { display: none; }
/* Sui telefoni il campo prende tutta la larghezza della barra, sotto di lei. */
@media (max-width: 599px) {
  .top-inner { position: relative; }
  .cve-lens { position: static; }
  .cve-lens-pop { left: 0; right: 0; width: auto; }
}
/* Tema chiaro: la voce del menu evidenziata (pagina o sezione corrente) un filo più scura, per il contrasto minimo di 4,5:1. */
:root[data-theme="light"] .menu a.link:is([aria-current="page"], [aria-current="location"], .is-current) { color: color-mix(in srgb, var(--accent) 85%, #000); }

/* ─── Tema chiaro "grafite" ──────────────────────────────────────────────────
   Non bianco: grigi freddi da carta tecnica, testo grafite, griglia di fondo più leggera. L'accento resta ciano ma più
   profondo (si legge sul chiaro); i colori dei livelli sono gli stessi, scuriti quanto basta. Bagliori → ombre morbide. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #E8ECF0;
  --bg-2: #E1E6EB;
  --surface: #F3F5F7;
  --surface-2: #F9FAFB;
  --border: rgba(16, 24, 32, 0.09);
  --border-2: rgba(16, 24, 32, 0.16);
  --fg: #111820;
  --fg-2: #39444F;
  --muted: #5E6975;
  --accent: #0A6F86;
  --accent-2: #0B88A5;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(10, 111, 134, 0.10);
  --glow: rgba(8, 160, 200, 0.20); /* bagliore azzurro come nel tema scuro, non verde petrolio */
  --grid: rgba(16, 24, 32, 0.055);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px -22px rgba(16, 24, 32, 0.30);
  --d5: #15803D; --d5-ink: #FFFFFF;
  --d4: #A07E00; --d4-ink: #1F1600; /* giallo senape, non ambra: distinto dall'arancione del DEFCON 3 (20 ottobre 2026); numero scuro, contrasto 4,9 */
  --d3: #DD5A0B; --d3-ink: #FFFFFF;
  --d2: #D42828; --d2-ink: #FFFFFF;
  --d1: #A21CAF; --d1-ink: #FFFFFF;
  /* Aurora e radar più accesi sul chiaro; anelli e mirino del radar sono luce. */
  --aurora-1: rgba(61, 214, 245, .42); --aurora-2: rgba(120, 110, 255, .2); --aurora-3: rgba(10, 150, 180, .22); --aurora-4: rgba(61, 214, 245, .26);
  --aurora-base: linear-gradient(180deg, #EFF4F7, #E8EEF3 50%, #E4EAF0);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .1 0 0 0 0 .13 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  --glass: rgba(255, 255, 255, .5); --glass-sat: 150%;
  --radar-ring: rgba(255, 255, 255, .8); --radar-cross: rgba(255, 255, 255, .8); --radar-glow: rgba(61, 214, 245, .18); --radar-sweep: rgba(61, 214, 245, .32);
}
/* Gli strumenti restano scuri: cruscotto dal vivo, scena di My Defence ed estratto del briefing, come pannelli di una sala di controllo.
   Sul chiaro sono grafite (antracite), non quasi neri: stacco più morbido con la pagina, stessa leggibilità. */
:root[data-theme="light"] :is(.console, .mail) {
  color-scheme: dark;
  --bg: #161C24; --bg-2: #1A2129; --surface: #1A2129; --surface-2: #232B35;
  --border: rgba(255, 255, 255, 0.09); --border-2: rgba(255, 255, 255, 0.16);
  --fg: #EDF1F5; --fg-2: #B3BCC7; --muted: #8994A1;
  --accent: #3DD6F5; --accent-2: #7BE6FA; --accent-ink: #031218; --accent-soft: rgba(61, 214, 245, 0.10);
  --d5: #22C55E; --d4: #EAB308; --d3: #F97316; --d2: #EF4444; --d1: #C026D3; --d5-ink: #04140A; --d4-ink: #171100; --d3-ink: #1A0B00;
  color: var(--fg);
  box-shadow: 0 24px 50px -28px rgba(16, 24, 32, 0.45), 0 0 0 1px rgba(16, 24, 32, 0.18);
}
/* La scena di My Defence in testata, nel tema chiaro (24 ottobre 2026, osservazione di Alessandro: «In tema chiaro, l'immagine
   animata principale sulla home page non mi convince»): non più un riquadro scuro sul fondo chiaro, ma chiara come il resto della
   pagina, con i colori del tema; le zone bianche sul riquadro grigio chiaro, le linee e i punti nell'azzurro del tema. */
:root[data-theme="light"] .scene { background: linear-gradient(180deg, #FFFFFF, var(--surface)); box-shadow: 0 24px 50px -30px rgba(16, 24, 32, 0.35), 0 0 0 1px rgba(16, 24, 32, 0.06); }
:root[data-theme="light"] .scene-zone, :root[data-theme="light"] .scene-internet { background: #FFFFFF; }
:root[data-theme="light"] .scene-chips i { background: var(--surface); }
:root[data-theme="light"] .scene-wires path { opacity: .55; }
:root[data-theme="light"] .scene-shot circle { fill: #FFFFFF; }
/* Marchio e punti d'accento sul chiaro: lo stesso azzurro del tema scuro, scurito quanto basta per leggersi sul fondo
   chiaro (testo bianco dei pulsanti almeno 4,5:1), con un bagliore leggero al posto della luce del tema scuro. */
:root[data-theme="light"] .logo-word span { background: linear-gradient(100deg, #0A7A95, #0699C2); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .logo .dot { fill: #06A6CF; filter: drop-shadow(0 0 4px rgba(6, 166, 207, .55)); }
:root[data-theme="light"] .grad { background-image: linear-gradient(100deg, var(--fg) 25%, #0A7A95 72%, #0699C2 110%); }
:root[data-theme="light"] .btn:not(.ghost, .danger) { background: linear-gradient(180deg, #0A80A0, #086A82); box-shadow: 0 10px 26px -10px rgba(6, 140, 180, .65), inset 0 1px 0 rgba(255, 255, 255, .16); }
:root[data-theme="light"] .btn:not(.ghost, .danger):hover { background: linear-gradient(180deg, #0B89AA, #0A7591); }
:root[data-theme="light"] .top-inner { background: color-mix(in srgb, #FFFFFF 74%, transparent); }
:root[data-theme="light"] .top.scrolled .top-inner { background: color-mix(in srgb, #FFFFFF 92%, transparent); box-shadow: 0 14px 34px -18px rgba(16, 24, 32, .35); }
:root[data-theme="light"] .src { background: rgba(255, 255, 255, .72); box-shadow: 0 1px 2px rgba(16, 24, 32, .05); }
:root[data-theme="light"] .src-ico { color: #0891B2; }
/* Fondo "aurora" sul chiaro (regole comuni in "Sfondo e sezioni"): schede in vetro con un bordo di luce e un'ombra azzurrata,
   fascia delle fonti velata di bianco. */
:root[data-theme="light"] main:not(.panel, .adm) :is(.card, .price-card, .index-band, .scale-row, .cta-band) {
  border-color: rgba(255, 255, 255, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 24px 48px -26px rgba(10, 90, 120, .4);
}
:root[data-theme="light"] .sources { background: rgba(255, 255, 255, .28); }
/* Bordi luminosi e bagliori del tema scuro: sul chiaro diventano un filo d'accento e un'ombra. */
:root[data-theme="light"] .edge-light:not(.mail) { box-shadow: var(--shadow); }
:root[data-theme="light"] .edge-light:not(.mail)::after { background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 60%, transparent) 0%, transparent 45%); }
:root[data-theme="light"] :is(.card, .index-band, .scale-row)::after { opacity: .35; }
:root[data-theme="light"] .icon { box-shadow: none; }
:root[data-theme="light"] .signup .field {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A6F86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") 18px 50% / 18px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(110deg, rgba(10, 111, 134, .65), rgba(16, 24, 32, .14) 38%, rgba(16, 24, 32, .12) 62%, rgba(11, 136, 165, .55)) border-box;
  box-shadow: 0 10px 26px -16px rgba(10, 111, 134, .45);
}
:root[data-theme="light"] .signup .field:focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A6F86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") 18px 50% / 18px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(110deg, var(--accent), var(--accent-2)) border-box;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 12px 30px -14px rgba(10, 111, 134, .5);
}
:root[data-theme="light"] .trend-levels span.l1::after { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--d1); }
:root[data-theme="light"] .ib-strip span.l1::after { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--d1); }
:root[data-theme="light"] .heat-grid i { background: color-mix(in srgb, var(--c) 88%, transparent); }
:root[data-theme="light"] .heat-grid i.none { background: rgba(16, 24, 32, 0.08); }
:root[data-theme="light"] .chart-tip { box-shadow: 0 12px 30px -12px rgba(16, 24, 32, .35); }
/* Pannello sul chiaro: le schede (livello, numeri, vulnerabilità, azioni, abbonamento, archivio) si staccano dal fondo
   grigio con una superficie più chiara, un bordo pieno e un'ombra corta. Linee interne un filo più marcate. */
:root[data-theme="light"] :is(.panel, .adm) { --surface: #FAFBFC; --border: rgba(16, 24, 32, 0.12); --border-2: rgba(16, 24, 32, 0.18); }
:root[data-theme="light"] .panel :is(.hero-level, .item, .stat, .actions li, .side .card, .banner),
:root[data-theme="light"] .adm :is(.card, .post-row, .banner) { /* area admin: le stesse schede */
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.05), 0 10px 24px -16px rgba(16, 24, 32, 0.28);
}
.doc .form-model, .form-model { border-left: 2px solid var(--border-2); padding-left: 14px; color: var(--fg-2); } /* modulo tipo di recesso nei Termini */

/* Pittogramma SAL dell'ANPC nelle Note legali (immagine ufficiale, 201×50). */
.sal img { display: block; width: 201px; height: 50px; border-radius: 4px; }

/* Pagine pubbliche con una sessione aperta: "Pannello" al posto di "Accedi" e "Prova gratis" (classe messa prima del disegno). */
.nav .cta-app { display: none; }
.authed .nav .cta-app { display: inline-flex; }
.authed .nav .login:not(#logout), .authed .nav .cta-try { display: none; } /* "Esci" del pannello resta */
.cta-app-ico { display: none; flex: none; width: 18px; height: 18px; }
@media (max-width: 520px) { .authed .nav .cta-app { width: 38px; padding: 0; } .cta-app-txt { display: none; } .cta-app-ico { display: block; } } /* sul telefono solo l'icona, tonda da 38 px come tema e lente: "Tableau de bord" non ci sta */
/* Pulsante "Admin" (solo per l'amministratore, lo aggiunge theme.js): come "Esci", icona e testo; sul telefono solo l'icona. */
.nav .nav-admin { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--fg-2); text-decoration: none; }
.nav .nav-admin:hover { color: var(--fg); background: var(--accent-soft); }
.nav .nav-admin svg { flex: none; width: 18px; height: 18px; }
@media (max-width: 519px) {
  .nav .nav-admin { padding: 8px; } .nav .nav-admin span { display: none; }
  .nav:has(.nav-admin) .app-index { padding: 8px; } .nav:has(.nav-admin) .app-index-txt { display: none; } /* pannello: Index solo con l'emblema */
}
@media (max-width: 360px) { .nav .nav-admin { display: none; } } /* sui telefoni più stretti non c'è posto: resta l'indirizzo /admin */
/* Pagine pubbliche con una sessione aperta, sui telefoni (25 ottobre 2026): a 320 px logo, lingua, tema, lente e Dashboard non
   stavano nella barra e la pagina scorreva di lato di 23 px; fino a 365 px la Dashboard usciva dal margine. Quando il posto manca
   cede la lente: chi è iscritto cerca le CVE nell'Archivio della dashboard (e nel campo delle pagine CVE). Fino a 365 px la barra
   è quindi quella della dashboard: logo, lingua, tema e un'icona (a 320 px a 4 px dal bordo, come lì). «Admin» segue la regola di
   «Prova gratis»: fino a 640 px non c'è e resta nella barra della dashboard. La regola della lente vale anche nella dashboard, che
   ha la lente dal 25 ottobre. Senza sessione, sotto i 360 px, cede invece il tema (testata sui telefoni stretti, più su). */
@media (max-width: 640px) { .authed .nav:has(.cta-app) .nav-admin { display: none; } }
@media (max-width: 365px) { .authed .top .cve-lens { display: none; } }
/* Dashboard (20 ottobre 2026, scelte di Alessandro): con «Admin» la barra non ci stava («Sign out» andava a capo); per
   l'amministratore niente Index, che resta nel piè di pagina e nel menu a tendina. E le voci della barra mai su due righe. */
.nav:has(.nav-admin) :is(.app-index, .app-index + .nav-sep) { display: none; }
.top .nav :is(a, .login), .app-menu a, .pages-menu a { white-space: nowrap; }
/* Pulsante in attesa (verso Stripe): rotellina accanto al testo. */
.btn.is-loading { cursor: progress; opacity: .85; }
.btn.is-loading::before { content: ''; width: 14px; height: 14px; margin-right: 9px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; vertical-align: -2px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Dashboard in caricamento: la sagoma del contenuto (testa, livello, numeri, schede, calendario, abbonamento) con un
   riflesso che scorre, al posto di una pagina vuota. Sparisce quando arrivano i dati (app.js toglie .is-loading). */
.sk { display: block; border-radius: 8px; background: linear-gradient(100deg, color-mix(in srgb, var(--fg) 9%, transparent) 30%, color-mix(in srgb, var(--fg) 4%, transparent) 50%, color-mix(in srgb, var(--fg) 9%, transparent) 70%); background-size: 300% 100%; animation: sk-shine 1.5s ease-in-out infinite; }
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.sk-head { margin: 14px 0 18px; } /* stessi margini di .day-head */
.sk-kicker { width: 180px; height: 12px; margin-bottom: 10px; }
.sk-title { width: min(440px, 75%); height: 36px; }
.sk-report { display: grid; gap: var(--s-6); }
.sk-card { display: grid; gap: 12px; padding: var(--s-6); border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); }
.sk-level { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-5); }
.sk-num { width: 104px; height: 104px; border-radius: 18px; }
.sk-lines { display: grid; gap: 12px; }
.sk-line { height: 13px; }
.sk-line.tall { height: 20px; }
.sk-bar { height: 8px; margin-top: 10px; }
.sk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.sk-stat { height: 76px; border-radius: 12px; }
.sk-cal { height: 250px; border-radius: 12px; margin-top: 6px; }
.sk-btn { height: 46px; border-radius: 999px; margin-top: 6px; }
.w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.side .sk-only { display: grid; gap: 12px; }
.panel:not(.is-loading) .sk-only, .panel.is-loading #subscription { display: none; }
@media (max-width: 640px) { .sk-num { width: 72px; height: 72px; } .sk-stat { height: 64px; } }
/* My Defence in caricamento (3 novembre 2026, osservazione di Alessandro: tre puntini prima della finestra di caricamento e il piè di
   pagina a metà schermo): dal primo istante la sagoma della pagina, senza la colonna destra, con i riquadri veri del pannello delle
   email e della mappa. Testa e testo d'apertura alti come quelli veri a ogni larghezza (il testo è quello vero, trasparente sotto le
   barre), così quando arrivano non si sposta niente; le altre righe come quelle in italiano. data-view lo scrive la testa di app.html. */
.sk-md { display: none; }
[data-view="mydefence"] .sk-md { display: block; }
[data-view="mydefence"] :is(.sk-report, .side) { display: none; }
[data-view="mydefence"] .panel-grid { grid-template-columns: minmax(0, 1fr); }
[data-view="mydefence"] .sk-title { height: calc(clamp(24px, 2.6vw, 32px) * 1.15); } /* la riga di .day-title */
.panel:not(.is-loading) .sk-md-intro { display: none; }
.sk-md-intro .sk-text { display: inline; color: transparent; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sk-md :is(.md-card, .sk-md-sim, .sk-md-legend) { display: grid; align-content: start; justify-items: start; }
.sk-md-sim .sk { width: min(100%, 560px); height: 13px; margin: 5.5px 0; } /* righe di 24 px */
.sk-md-sim .sk:nth-child(even) { width: min(85%, 460px); }
.sk-md-sim .sk:nth-child(n+3), .sk-md-legend .sk:nth-child(n+3), .sk-md-note.more { display: none; }
.sk-md-h3 { width: 150px; height: 13px; margin: 3px 0 15.5px; }
.sk-md-seg { width: min(100%, 375px); height: 43px; margin: 0 0 12px; border-radius: 12px; }
.sk-md-seg.two { width: min(100%, 250px); }
.sk-md-note { width: min(100%, 400px); height: 13px; margin: 3.5px 0; } /* righe di 20 px */
.sk-md-sim { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border-2); }
.sk-md-legend { flex: 1 1 auto; gap: 9px; max-width: 760px; }
.sk-md-legend .sk { width: 95%; height: 13px; margin: 3px 0; }
.sk-md-legend .sk:nth-child(even) { width: 70%; }
.sk-md-tools { flex: none; width: 295px; height: 38px; border-radius: 999px; }
.sk-md-map { display: grid; justify-items: center; gap: 50px; padding: 0 14px; }
.sk-md-net { width: 131px; height: 37px; border-radius: 999px; }
.sk-md-row { display: flex; justify-content: center; gap: 22px; width: 100%; }
.sk-md-row .sk { flex: 1 1 188px; max-width: 540px; height: 140px; border-radius: 16px; }
@media (max-width: 1279px) { .sk-md-legend .sk:nth-child(3) { display: block; } }
@media (max-width: 999px) { .sk-md-legend .sk:nth-child(4) { display: block; } }
@media (max-width: 759px) {
  .sk-md-seg { width: 100%; height: 117px; } /* i pulsanti uno sotto l'altro, come .md-seg */
  .sk-md-seg.two { width: 100%; height: 80px; }
  .sk-md-sim .sk:nth-child(3) { display: block; }
  .sk-md-tools { width: 190px; align-self: flex-start; }
  .sk-md-map { justify-items: start; gap: 12px; padding: 0; }
  .sk-md-row { flex-direction: column; gap: 12px; }
  .sk-md-row .sk { flex: none; width: 100%; max-width: none; height: 120px; }
}
@media (max-width: 520px) {
  .sk-md-note { width: 100%; }
  .sk-md-note.more { width: 60%; }
  .md-card + .md-card .sk-md-note.more, .sk-md-sim .sk:nth-child(4) { display: block; }
}
@media (max-width: 440px) { .sk-md-note.more { display: block; } }
@media (max-width: 420px) { .sk-md-sim .sk:nth-child(5) { display: block; } }
@media (max-width: 340px) { .sk-md-sim .sk:nth-child(6) { display: block; } }
/* Attesa dei grafici dell'Index (trend.js): velo sulla card che si aggiorna; il selettore del periodo resta sopra. */
.trend-veil { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-4);
  border-radius: inherit; background: color-mix(in srgb, var(--surface) 74%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  font-size: 14px; color: var(--fg-2); text-align: center; animation: trend-veil-in .2s ease; }
.trend-periods { position: relative; z-index: 3; }
@keyframes trend-veil-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trend-veil { animation: none; } }
/* Velo verso Stripe: tutta la pagina in attesa, un solo messaggio al centro. */
.veil { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--wrap-pad); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: progress; }
.veil[hidden] { display: none; }
#portal[hidden] { display: none; } /* account dell'amministratore: niente abbonamento da gestire (app.js) */
.veil-card { max-width: 420px; padding: var(--s-7) var(--s-6); border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.veil-spin { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.veil-title { margin: var(--s-4) 0 var(--s-2); font: 600 19px/1.3 var(--display); color: var(--fg); text-wrap: balance; }
.veil-text, .veil-slow { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.veil-slow { margin-top: var(--s-3); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .veil-spin { animation-duration: 2.4s; } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation-duration: 2.4s; } }

/* ─── Area amministrativa ─────────────────────────────────────────────────────────────────────────────────────────────
   /admin (public/admin.js) e /admin/post (public/post.js, public/post-card.js): solo per l'amministratore, in italiano.
   Regole uniche per tutte le schede, nei due temi (11 ottobre 2026). Un elemento nuovo usa queste, non valori suoi:
   · Spazi: --a-gap fra i blocchi della scheda e nelle griglie (20 px; 16 sui telefoni); --a-pad dentro le card (24; 16);
     --a-in dentro una card, fra titolo, contenuto e nota (16). Gli altri valori solo dalla scala --s-*.
   · Testo, sei stili: titolo della pagina (32), numero dei riquadri (26), titolo di una card (17, Space Grotesk), testo
     (14), dettaglio grigio (13), etichetta mono maiuscola (11: riquadri, intestazioni delle tabelle, campi). Codice: mono.
   · Comandi alti 36 px: pulsanti, campi, menu, selettori a segmenti. 28 px solo per le azioni piccole nelle righe e sotto
     i testi (Gestisci, Copia, Scarica). Pulsante pieno per l'azione principale, contorno per le altre, link per le minori.
   · Ogni tabella e ogni grafico sta in una card con il suo titolo (a destra il periodo o i totali); le note dentro la card,
     in fondo. Tabelle a tutta larghezza della card, numeri a destra con cifre di uguale larghezza, date su una riga.
   · Colori di stato (ok, attenzione, errore) solo nei bollini e negli avvisi; i colori DEFCON solo per i livelli. */
.adm {
  --a-gap: 20px; --a-pad: 24px; --a-in: 16px; --a-ctl: 36px; --a-ctl-sm: 28px;
  --ok: #4ADE80; --warn: #FB923C; --bad: #F87171;
  /* bordo di campi e pulsanti a contorno: contrasto con lo sfondo almeno 3:1 (misurato nei due temi) */
  --control-border: color-mix(in srgb, var(--fg) 38%, transparent);
}
:root[data-theme="light"] .adm { --ok: #15803D; --warn: #B45309; --bad: #B91C1C; --control-border: color-mix(in srgb, var(--fg) 52%, transparent); }
@media (max-width: 640px) { .adm { --a-gap: 16px; --a-pad: 16px; } }
main.adm { padding-top: 24px; padding-bottom: 72px; } /* come il pannello degli abbonati (.panel) */

/* Testa come quella della dashboard (.day-head); schede con la sottolineatura larga quanto il nome, la prima allineata al
   bordo dei riquadri; a destra l'ora dei dati con «Aggiorna». */
.adm-head { margin: 14px 0 var(--s-6); }
.adm-head .kicker { margin: 0 0 10px; }
.adm-head h1 { margin: 0; font: 600 clamp(26px, 2.6vw, 32px)/1.15 var(--display); letter-spacing: -0.025em; color: var(--fg); text-wrap: balance; }
.adm-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); margin-bottom: var(--s-6); border-bottom: 1px solid var(--border); }
.adm-tabs { display: flex; gap: var(--s-6); }
.adm-tabs a { padding: 11px 0; margin-bottom: -1px; font: 500 15px/1.4 var(--sans); color: var(--fg-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.adm-tabs a:hover { color: var(--fg); }
.adm-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.adm-stamp { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 0 auto; padding: 8px 0; font: 500 12px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.adm .adm-stamp .link-btn { font: 500 12px/1.4 var(--mono); }

/* Schede: blocchi uno sotto l'altro con lo stesso spazio; griglie con lo stesso spazio in orizzontale e in verticale. */
.adm section { padding: 0; } /* non le sezioni del sito: niente spazio verticale ereditato (le card hanno il loro) */
main.adm > .adm-pane::before, main.adm > .adm-pane::after { content: none; } /* né il separatore decorativo fra le sezioni */
.adm-pane[aria-busy="true"]:empty::before { content: 'Caricamento…'; font-size: 14px; color: var(--muted); }
.adm-pane > * + *, #mk-body > * + * { margin-top: var(--a-gap); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--a-gap); }
/* Tentativi di iscrizione (scheda Iscritti, 23 ottobre 2026): fra i numeri e il grafico lo spazio fra le card; i tre elenchi
   (motivi, paesi, domini) su una riga dove c'è posto. Dal 1° novembre 2026 sotto la tabella, con grafico, elenchi e note da
   aprire: gli elenchi sono parti della card, con un titolo piccolo, non più card a sé. */
.a-att-more[open] > summary { margin-bottom: var(--a-in); }
.a-att-more .adm-legend { margin-bottom: var(--a-gap); }
.a-att-h { margin: 0 0 var(--s-3); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--fg); }
.a-att-more .adm-bars { margin: 0; padding-left: 0; gap: var(--s-3); font-size: inherit; } /* non gli elenchi di .a-more-info */
.a-att-h .a-sub { display: inline; margin-left: 8px; font-weight: 400; }
/* Iscritti per stato (Riepilogo, 1° novembre 2026): due gruppi, con e senza accesso, sulla stessa scala; quelli senza accesso in
   grigio. Ogni stato apre la scheda Iscritti con quel filtro. */
.a-group { margin: 0 0 var(--s-3); }
.adm-bars + .a-group { margin-top: var(--a-in); }
.adm-bars.off .adm-bar i { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.adm-bar-label a { color: inherit; text-decoration: none; }
.adm-bar-label a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.a-att .adm-kpis { margin-bottom: var(--a-gap); }
.a-att-lists { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
#u-attempts { display: grid; gap: var(--a-gap); margin-bottom: var(--a-gap); }
.adm-kpis { --k: 3; display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: var(--a-gap); }
.adm-kpis.k4 { --k: 4; }
.adm-kpis.k5 { --k: 5; }
@media (max-width: 1000px) { .adm-kpis.k4 { --k: 2; } .adm-kpis.k5 { --k: 3; } }
@media (max-width: 760px) {
  .adm-kpis, .adm-kpis.k4, .adm-kpis.k5 { --k: 2; }
  .adm-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* l'ultimo riquadro, se resta solo, occupa la riga */
}
/* Telefoni più stretti (sotto 360 px): un riquadro per riga, così le etichette dei numeri non finiscono con i puntini. */
@media (max-width: 359px) { .adm-kpis, .adm-kpis.k4, .adm-kpis.k5 { --k: 1; } .adm-kpis > :last-child:nth-child(odd) { grid-column: auto; } }
/* Barra dei comandi di una scheda: filtri a sinistra, azione principale a destra. */
.a-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.a-bar > .a-end { margin-left: auto; }
.a-bar > .field { width: auto; }
.a-bar > .a-search { flex: 1 1 240px; max-width: 360px; }

/* Card: superficie e luce del bordo del sito, senza sollevarsi (sono pannelli di lavoro). Titolo a sinistra, a destra il
   periodo o i totali; nota in fondo. */
.adm .card { padding: var(--a-pad); }
.adm .card:hover { transform: none; }
.a-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-4); margin: 0 0 var(--a-in); }
.a-head h2, .adm .post-kind { margin: 0; font: 600 17px/1.3 var(--display); letter-spacing: -0.01em; color: var(--fg); }
.a-meta { font-size: 13px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
/* Note in fondo alle card: tutta la larghezza della card, come tabelle e grafici sopra (14 ottobre 2026: con 92ch restava
   uno spazio vuoto a destra nelle card larghe). */
.adm-note { margin: var(--a-in) 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* Note in più capoversi (22 ottobre 2026): un respiro fra l'uno e l'altro, meno dello stacco dalla tabella. */
.adm-note + .adm-note { margin-top: var(--s-3); }
.adm-note b { color: var(--fg-2); font-weight: 600; }
.adm-empty { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.adm-warn { color: var(--bad); font-weight: 500; }
.adm-muted { font-size: 13px; color: var(--muted); }
.a-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.a-sub code { white-space: nowrap; } /* «is-deliver» intero, mai spezzato al trattino */
/* Iscritti (20 ottobre 2026): l'indirizzo in evidenza, i fatti sotto in grigio. */
.a-who { font-weight: 600; color: var(--fg); white-space: nowrap; }
.a-nowrap { white-space: nowrap; } /* indirizzi email interi su una riga (sui telefoni vanno a capo) */
.a-seen { display: inline-grid; grid-template-columns: 18px auto; column-gap: 6px; align-items: center; } /* Iscritti: bandierina e giorno, dispositivo e ora */
.a-seen-mark { display: inline-flex; align-items: center; justify-content: center; }
.a-seen-ico { width: 15px; height: 15px; color: var(--muted); }
.a-seen-flag { font-size: 14px; line-height: 1; }
/* Iscritti: icona delle email sospese nella colonna «Stato», subito dopo il badge, sulla stessa riga e centrata sulla sua altezza. */
.a-stage-line { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.a-paused-ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
.adm code { font: 500 12.5px/1.4 var(--mono); color: inherit; }
.adm-me p:not(.adm-note) { margin: 0 0 var(--s-3); font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.adm-me b { color: var(--fg); }
.adm :is(b, strong) { font-weight: 600; } /* un solo grassetto in tutta l'area */
/* Etichetta: riquadri, intestazioni delle tabelle, campi dei moduli, dettagli delle finestre, gruppi di un elenco. */
.adm-kpi-label, .adm-table th, .a-form label, .post-label, .post-plan label, .a-dl dt, .ad-field dt, .post-lang, .a-group {
  font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* Riquadri dei numeri: etichetta, numero, dettaglio. */
.adm .card.adm-kpi { display: flex; flex-direction: column; }
/* Card che portano alla loro sezione (Risorse, 24 ottobre 2026): pulsanti con l'aspetto delle card, il bordo si accende al passaggio. */
.adm .card.adm-kpi-jump { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.adm .card.adm-kpi-jump:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2)); }
.adm .card.adm-kpi-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#pane-resources section[id] { scroll-margin-top: 96px; }
#pane-resources section[id] h2:focus { outline: none; }
.adm-kpi-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-kpi-value { display: flex; align-items: center; gap: 10px; margin-top: var(--s-3); font: 600 26px/1.15 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); overflow-wrap: anywhere; } /* un valore lungo («Domani alle 05:15 UTC») va a capo, mai i puntini */
.adm-kpi-sub { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* Tabelle a tutta larghezza della card: fascia delle intestazioni, righe separate da un filo, testo allineato al titolo. */
.adm-table { margin: 0 calc(-1 * var(--a-pad)); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.adm .card:has(> .adm-table:last-child) { padding-bottom: 12px; } /* sotto l'ultima riga lo stesso spazio che sopra */
.adm-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.adm-table th { padding: 9px 10px; text-align: left; white-space: nowrap; background: color-mix(in srgb, var(--fg) 3.5%, transparent); border-block: 1px solid var(--border); }
/* Consumi di Claude: otto colonne, intestazioni su due righe se serve (14 ottobre 2026). */
.adm-usage .adm-table th { white-space: normal; vertical-align: bottom; }
.adm-usage .adm-table th .a-sort { white-space: normal; text-align: inherit; }
.adm-table td { padding: 11px 10px; text-align: left; vertical-align: top; color: var(--fg-2); border-bottom: 1px solid var(--border); }
.adm-table :is(th, td):first-child { padding-left: var(--a-pad); }
.adm-table :is(th, td):last-child { padding-right: var(--a-pad); }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.adm-table td:first-child { color: var(--fg); overflow-wrap: break-word; } /* indirizzi interi su una riga: la tabella scorre, se serve */
.adm-table .n { text-align: right; white-space: nowrap; }
/* Intestazioni che ordinano la tabella (13 ottobre 2026): aspetto dell'intestazione, freccia sulla colonna scelta; nelle
   colonne di numeri la freccia sta a sinistra, così l'etichetta resta allineata ai valori. */
.adm-table th .a-sort { display: inline-flex; align-items: baseline; gap: 4px; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.adm-table th.n .a-sort { flex-direction: row-reverse; }
.adm-table th .a-sort:hover, .adm-table th[aria-sort] .a-sort { color: var(--fg); }
.adm-table th .a-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.adm-table th .a-sort i { display: inline-block; width: .9em; font-style: normal; text-align: center; }
.adm-table th[aria-sort="ascending"] .a-sort i::before { content: '↑'; }
.adm-table th[aria-sort="descending"] .a-sort i::before { content: '↓'; }
.adm-table tr[hidden] { display: none; } /* righe oltre il limite, finché non si preme «Mostra tutte» */
.a-more { margin: 4px 0 0; }
.adm .card:has(> .a-more:last-child) { padding-bottom: 16px; }

/* Barre orizzontali: nome, barra proporzionale al valore più alto, numero. */
.adm-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, 38%) minmax(28px, auto); gap: var(--s-3); }
/* Righe sulle stesse colonne della lista (subgrid): le barre partono tutte allo stesso punto anche con numeri di lunghezza diversa. */
.adm .card .adm-bars li { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 0; font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.adm .card .adm-bars li::before { content: none; } /* niente pallino delle liste nelle card */
.adm-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 9%, transparent); overflow: hidden; }
.adm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.adm-bar-n { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); text-align: right; white-space: nowrap; }
.adm-bar-n .adm-muted { font-weight: 400; }

/* Scheda «Risorse» (23 ottobre 2026): uso rispetto al limite del piano. Nome e numeri sulla stessa riga, sotto la barra e una riga
   di spiegazione; verde, arancione dal 70%, rosso dal 90%. */
.adm-meters { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-4); }
.adm .card .adm-meters li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px var(--s-3); padding: 0; }
.adm .card .adm-meters li::before { content: none; }
.adm-meter-label { min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--fg); }
.adm-meter-n { font-size: 13.5px; line-height: 1.4; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.adm-meter-n b { font-weight: 600; color: var(--fg); }
.adm-meter-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 9%, transparent); overflow: hidden; }
.adm-meter-bar i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--ok); }
.adm-meters .m-warn .adm-meter-bar i { background: var(--warn); }
.adm-meters .m-bad .adm-meter-bar i { background: var(--bad); }
.adm-meters .m-warn .adm-meter-n b { color: var(--warn); }
.adm-meters .m-bad .adm-meter-n b { color: var(--bad); }
.adm .card .adm-meters .a-sub { grid-column: 1 / -1; margin-top: 0; }
.adm-res h3 { margin: var(--s-5) 0 var(--s-3); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--fg); }
.adm-res .adm-meters + h3 { margin-top: var(--s-4); }
.adm-res h3 .a-sub { display: inline; margin-left: 8px; font-weight: 400; }
/* «2,63 $ al giorno»: su una riga dove ci sta, sui telefoni stretti a capo solo fra l'importo e «al giorno». */
.adm-kpi-wrap { min-width: 0; overflow-wrap: normal; }
.adm-st.s-warn { color: var(--warn); }
.adm-st.s-bad { color: var(--bad); }
@media (max-width: 520px) { .adm .card .adm-meters li { grid-template-columns: minmax(0, 1fr); } .adm-meter-n { text-align: left; white-space: normal; } }
/* Sul telefono gli indicatori della scheda uno per riga: utilizzo e rinnovo restano su due righe, «2,63 $ al giorno» su una. */
@media (max-width: 520px) { #pane-resources .adm-kpis { --k: 1; } }

/* Colonne per giorno o per ora, con il tooltip dei grafici dell'Index (.chart-tip); sotto, il primo e l'ultimo giorno. */
.adm-cols { margin: 0; }
.adm-cols-grid { display: flex; align-items: end; gap: 3px; height: 150px; border-bottom: 1px solid var(--border-2); }
.adm-cols-grid span { flex: 1; height: 100%; min-width: 2px; display: flex; align-items: end; border-radius: 3px 3px 0 0; cursor: default; }
.adm-cols-grid i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .85; }
.adm-cols-grid span.on { background: color-mix(in srgb, var(--accent) 10%, transparent); } /* colonna sotto il tooltip, come sull'Index */
.adm-cols-grid span.on i { opacity: 1; }
.adm-cols figcaption { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); font: 500 11px/1.3 var(--mono); color: var(--muted); }

/* Consumi di Claude (22 ottobre 2026): colonne divise per lavoro, ogni controllo nel colore del suo lavoro ma più chiaro (niente
   colori dei livelli DEFCON); scala in dollari a destra, sotto le colonne; giorno in corso più chiaro; linea tratteggiata sul
   giorno di un cambio. In testa la media degli ultimi 7 giorni e il confronto con i 7 prima. */
:root { --u-alerts: #A78BFA; --u-linkedin: #94A3B8; }
:root[data-theme="light"] { --u-alerts: #7C3AED; --u-linkedin: #64748B; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --u-alerts: #7C3AED; --u-linkedin: #64748B; } }
.u-briefing { --c: var(--accent); }
.u-check { --c: color-mix(in srgb, var(--accent) 42%, transparent); }
.u-alerts { --c: var(--u-alerts); }
.u-alertCheck { --c: color-mix(in srgb, var(--u-alerts) 42%, transparent); }
.u-linkedin { --c: var(--u-linkedin); }
.u-manual { --c: color-mix(in srgb, var(--muted) 38%, transparent); }
/* Tentativi di iscrizione (23 ottobre 2026): confermate nel colore dell'area, in attesa più chiare, scarti nel viola degli avvisi. */
.u-att-confirmed { --c: var(--accent); }
.u-att-sent { --c: color-mix(in srgb, var(--accent) 42%, transparent); }
.u-att-existing { --c: color-mix(in srgb, var(--muted) 38%, transparent); }
.u-att-unconfirmed { --c: var(--u-linkedin); }
.u-att-blocked { --c: var(--u-alerts); }
/* Iscritti con l'accesso (Riepilogo, 1° novembre 2026): abbonamento nel colore dell'area, prova più chiara, accesso gratuito nel viola. */
.u-acc-paid { --c: var(--accent); }
.u-acc-trial { --c: color-mix(in srgb, var(--accent) 42%, transparent); }
.u-acc-comp { --c: var(--u-alerts); }
.adm-stack .adm-cols-grid i, .chart-tip span i[class^="u-"], .adm-legend i { background: var(--c); }
.adm-usage-sum { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--s-4); font-size: 13px; line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.adm-usage-sum > span:first-child > b { margin-right: 6px; font: 600 22px/1.15 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); }
.adm-usage-n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); }
.adm-usage-change { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-usage-change.down { color: var(--accent); }
.adm-stack .adm-cols-grid { position: relative; height: 170px; padding-right: 50px; }
.adm-stack .adm-cols-grid span { position: relative; z-index: 1; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.adm-stack .adm-cols-grid i { flex: none; border-radius: 0; opacity: 1; }
.adm-stack .adm-cols-grid span i:first-child { border-radius: 3px 3px 0 0; }
/* Giorno in corso: stessi colori, a righe (con la trasparenza i colori si confondevano fra loro). */
.adm-stack .adm-cols-grid span.now i { background-image: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--surface) 60%, transparent) 3px 6px); }
.adm-stack .adm-cols-grid span.ev::before { content: ''; position: absolute; top: 0; bottom: 0; left: -2.5px; border-left: 1.5px dashed color-mix(in srgb, var(--fg) 45%, transparent); pointer-events: none; }
.adm-gl { position: absolute; left: 0; right: 50px; height: 0; border-top: 1px dashed var(--border); font-weight: 400; pointer-events: none; }
.adm-gl em { position: absolute; right: -50px; width: 46px; transform: translateY(-50%); font: 500 10.5px/1 var(--mono); font-style: normal; text-align: right; color: var(--muted); }
.adm-stack figcaption { padding-right: 50px; }
.adm-legend { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); margin: var(--s-3) 0 var(--s-5); font-size: 12.5px; line-height: 1.4; color: var(--fg-2); }
.adm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.adm-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.adm-legend .adm-legend-ev i { width: 0; height: 12px; border-radius: 0; background: none; border-left: 1.5px dashed color-mix(in srgb, var(--fg) 45%, transparent); }

/* Comandi. Pulsanti: pieno (azione principale), a contorno (le altre), piccolo (azioni nelle righe e sotto i testi). */
.adm .btn { min-height: var(--a-ctl); padding: 0 16px; gap: var(--s-2); font: 600 13.5px/1 var(--sans); box-shadow: none; }
.adm .btn:hover { transform: none; }
.adm .btn.sm { min-height: var(--a-ctl-sm); padding: 0 12px; font-size: 12.5px; }
.adm .btn.ghost { color: var(--fg); background: transparent; border-color: var(--control-border); }
.adm .btn.ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.adm .btn.ghost.is-danger:hover { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.adm .btn[disabled] { opacity: .5; cursor: not-allowed; }
.adm .btn.is-loading { cursor: progress; }
.adm .btn.is-loading::before { width: 12px; height: 12px; margin-right: 0; }
:root[data-theme="light"] .adm .btn:not(.ghost, .danger) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.adm .link-btn { padding: 2px 0; font: 13px/1.4 var(--sans); color: var(--fg-2); }
.adm .link-btn:hover { color: var(--accent); }
.adm .link-btn.is-danger:hover { color: var(--bad); }
/* Campi e menu: stessa altezza dei pulsanti; i testi lunghi in un riquadro con gli angoli meno tondi. */
.adm .field { min-height: var(--a-ctl); padding: 0 14px; font: 14px var(--sans); border-color: var(--control-border); }
.adm .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.adm textarea.field { min-height: 0; padding: 10px 14px; border-radius: 12px; font: 14px/1.55 var(--sans); resize: vertical; }
.adm :is(input[type="date"], input[type="time"]).field { color-scheme: dark; }
:root[data-theme="light"] .adm :is(input[type="date"], input[type="time"]).field { color-scheme: light; }
/* Menu a discesa: freccia nostra, staccata dal bordo arrotondato (quella del browser finiva sul bordo). */
select.field { -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px; }
.adm select.field { width: auto; padding-right: 38px; }
/* Selettore a segmenti (periodo, raccolta, tipo di contenuto): una scelta sola, quella attiva piena. Alto 36 px in tutto.
   Sui telefoni scorre di lato se non ci sta. */
.a-seg { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid var(--control-border); border-radius: 999px; background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.a-seg::-webkit-scrollbar { display: none; }
/* Telefoni stretti: le scelte si dividono la larghezza e un'etichetta lunga va a capo, invece di scorrere fuori dal riquadro. */
@media (max-width: 400px) {
  .a-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; border-radius: 18px; }
  .a-seg button { white-space: normal; height: auto; min-height: 28px; padding: 5px 8px; line-height: 1.2; justify-content: center; text-align: center; }
}
.a-seg button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-2); font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.a-seg button:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.a-seg button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.a-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.a-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.a-seg button[aria-pressed="true"] .a-count { color: inherit; opacity: .75; }
.pf-ico { flex: none; width: 13px; height: 13px; } /* marchio della piattaforma, nel colore del testo */

/* Bollini di stato: parola su fondo tenue del suo colore. Ok verde, in corso accento, attenzione arancio, errore rosso,
   il resto grigio. */
.adm-stage, .adm-src { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font: 500 12px/1.2 var(--sans); white-space: nowrap; color: var(--fg-2); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.adm-stage:is(.s-paying, .s-comp, .s-approved, .s-published, .s-uploaded), .adm-src.s-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.adm-stage:is(.s-trial, .s-trial_card, .s-draft) { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.adm-stage:is(.s-past_due, .s-cancelling), .adm-src:is(.s-in-ritardo, .s-muta, .s-mai-eseguita) { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.adm-src.s-errore, .adm-stage.s-error { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }
/* Un ruolo, non uno stato: bollino con il filo, senza colore di stato (account dell'amministratore nella scheda Iscritti). */
.adm-stage.s-admin { color: var(--fg); background: transparent; box-shadow: inset 0 0 0 1px var(--border-2); }
/* Catalogo dei produttori (sezione Prodotti → Catalogo): stato «escluso» e grafie di una famiglia, una per riga. */
.adm-stage.s-hidden { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--border-2); }
.cat-spell { list-style: none; margin: 0 0 var(--s-2); padding: 0; }
.cat-spell li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--fg-2); overflow-wrap: anywhere; }
.cat-spell li:last-child { border-bottom: 0; }
.adm-table .a-cmd { display: inline-block; min-height: 27px; } /* al posto di «Gestisci»: riga alta come le altre (51 px), trattino in linea con il testo */
/* Livello DEFCON: un quadratino del colore del livello (l'unico posto dell'area con i colori DEFCON). */
.a-lv { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.a-lv::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.adm-kpi-value .a-lv { gap: 10px; }
.adm-kpi-value .a-lv::before { width: 12px; height: 12px; border-radius: 3px; }

/* Moduli: etichetta sopra il campo, campi in due colonne (tre con .c3, una sui telefoni); .a-wide occupa la riga. */
.a-form { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--a-in); align-items: start; }
.a-form.c3 { --cols: 3; }
@media (max-width: 640px) { .a-form, .a-form.c3 { --cols: 1; } }
.a-form label { display: grid; gap: 6px; }
.adm .a-form .field { width: 100%; text-transform: none; letter-spacing: 0; }
.a-form .a-wide { grid-column: 1 / -1; }
.a-form label .a-hint { font: 13px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.a-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.a-submit .a-hint { flex: 1 1 14rem; font: 13px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.a-dl + .a-form { margin-top: var(--a-in); }
.card > .a-check { margin: 0 0 var(--s-4); } /* riepilogo della prova sugli avvisi, sopra la tabella */
.card > .a-filter { margin: 0 0 var(--s-4); } /* filtro sopra la tabella dei produttori */
/* Moduli di una riga (catalogo): campo e pulsante affiancati, in basso; la nota sotto, su tutta la riga. */
.a-form.a-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-2) var(--s-3); }
.a-form.a-inline .a-submit { display: contents; }
.a-form.a-inline .a-hint { grid-column: 1 / -1; }
.a-form label.a-check { display: flex; align-items: flex-start; gap: var(--s-2); font: 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg-2); cursor: pointer; }
.a-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
/* Sezione che si apre (regole delle piattaforme, nomi simili dei prodotti): freccia nostra al posto del triangolo del browser.
   Riga a sé larga quanto il testo (14 ottobre 2026: in linea prendeva 2-3 px in più sopra e sotto, e gli spazi della card
   non erano più uguali); se il testo va a capo, la freccia resta all'altezza della prima riga. */
.a-more-info summary { display: flex; width: fit-content; align-items: flex-start; gap: 6px; list-style: none; cursor: pointer; font-size: 13px; color: var(--fg-2); text-wrap: pretty; }
.a-more-info summary::-webkit-details-marker { display: none; }
.a-more-info summary::before { content: ''; flex: none; width: 12px; height: 12px; margin-top: calc(.5lh - 6px); background: currentColor; transition: transform .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.a-more-info summary:hover { color: var(--accent); }
.a-more-info[open] summary::before { transform: rotate(90deg); }
.a-more-info ul { margin: var(--s-3) 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.adm .card .a-more-info li { position: static; padding: 0; font-size: 13px; color: var(--fg-2); }
.adm .card .a-more-info li::before { content: none; }
.card > .a-more-info { margin-top: var(--a-in); padding-top: var(--a-in); border-top: 1px solid var(--border); }
/* Una tabella nella parte che si apre (Prodotti, nomi simili; 14 ottobre 2026): sotto il titolo lo spazio di una card, e in
   fondo alla card lo stesso spazio delle tabelle che la chiudono. */
.a-more-info > .adm-table { margin-top: var(--a-in); }
.adm .card:has(> .a-more-info[open]:last-child > .adm-table:last-child) { padding-bottom: 12px; }
.adm .card:has(> .a-more-info[open]:last-child > .a-more:last-child) { padding-bottom: 16px; }

/* Finestre (dettagli e azioni di un iscritto, accesso gratuito a un indirizzo nuovo): titolo con la crocetta, dettagli in
   due colonne, sezioni separate da un filo, pulsanti a destra. */
.adm-dialog.confirm { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.adm-dialog.confirm.wide { width: min(880px, calc(100vw - 32px)); }
.adm-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--a-in); }
.adm-dialog.confirm h2 { margin: 0; font: 600 20px/1.3 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.adm-dialog.confirm p { margin: 0 0 var(--a-in); font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.adm-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px 0 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.adm-x:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.adm-x svg { width: 18px; height: 18px; }
.a-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px var(--s-5); margin: 0; }
.a-dl dt { padding-top: 3px; }
.a-dl dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); overflow-wrap: anywhere; }
.adm-dialog .a-dsec { margin-top: var(--a-in); padding-top: var(--a-in); border-top: 1px solid var(--border); }
.adm-dialog.confirm .a-dsec h3 { margin: 0 0 6px; font: 600 15px/1.3 var(--display); color: var(--fg); }
.adm-dialog.confirm .a-dsec p { margin: 0 0 var(--s-3); font-size: 14px; line-height: 1.5; }
.adm-dialog.confirm .a-dsec p.a-more { margin-top: 4px; }
.a-dsec .a-form, .a-dsec > .a-submit { margin-top: var(--s-3); }
.adm-dialog .confirm-actions { margin-top: var(--a-in); }
.adm-dialog.confirm .a-msg { margin: var(--s-3) 0 0; font-size: 13px; }
.a-msg:empty { display: none; }
/* Conferma in più passaggi (15 ottobre 2026): concedere o togliere un accesso gratuito chiede di leggere che cosa succede e
   di riscrivere a mano l'indirizzo. Rossa per togliere. */
.a-confirm { margin-top: var(--s-3); padding: var(--a-in); border: 1px solid var(--control-border); border-radius: var(--r-sm); background: var(--accent-soft); }
.a-confirm.is-danger { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.adm-dialog.confirm .a-confirm p { margin: 0 0 var(--s-3); }
.adm-dialog .a-confirm .confirm-actions { margin-top: var(--s-3); }
.adm-dialog [hidden] { display: none; } /* il passo già fatto sparisce mentre la conferma è aperta (display: flex o grid vincerebbe su hidden) */
.a-confirm .a-hint.adm-warn { color: var(--bad); }
.adm .btn.is-danger:not(.ghost) { background: var(--bad); border-color: var(--bad); color: var(--bg); }
.adm .btn.is-danger:not(.ghost):hover { background: color-mix(in srgb, var(--bad) 85%, var(--fg)); }
/* Pagine degli iscritti (15 ottobre 2026). */
.a-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--a-in); }
.a-pager-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
#u-list { scroll-margin-top: 96px; } /* cambiando pagina la tabella torna in vista sotto la barra in alto, come i titoli del metodo */

/* Avviso in cima a una scheda (collegamento a LinkedIn): come gli avvisi della dashboard, con le misure dell'area. */
.adm .banner { margin: 0; padding: 14px var(--a-pad); font-size: 14px; line-height: 1.5; }
.mk-connect { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.mk-connect .pf-ico { width: 18px; height: 18px; margin: 0; color: var(--fg-2); }
.mk-connect p { flex: 1 1 220px; margin: 0; }
.mk-connect p strong { color: var(--fg); font-weight: 600; }
.mk-connect-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* Marketing: comandi per un post nuovo (tipo, lingua, «Genera ora») in una riga. */
.mk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.mk-controls .kind-picker { flex: 1 1 320px; max-width: 460px; }
/* Menu del tipo di post (admin.js, kindPicker): come i menu a discesa, con un'icona per quanto reggono i dati. */
.kind-picker { position: relative; min-width: 0; }
.kp-button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 38px 0 14px; text-align: left; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px; }
.kp-current { min-width: 0; overflow-wrap: anywhere; } /* va a capo invece di finire con i puntini */
.kp-ico { flex: none; width: 17px; height: 17px; color: var(--fg-2); }
.kp-auto { color: var(--accent); } /* colori DEFCON solo per i livelli: qui conta la forma */
.kp-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; max-height: min(460px, 75vh); overflow: auto;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); outline: none; }
.adm .card .kp-menu li { position: static; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.adm .card .kp-menu li::before { content: none; }
.kp-menu li .kp-ico { margin-top: 2px; }
.adm .card .kp-menu li.kp-first { margin-top: 6px; position: relative; }
.adm .card .kp-menu li.kp-first::before { content: ''; position: absolute; left: 12px; right: 12px; top: -4px; width: auto; height: 0; border-radius: 0; background: none; border-top: 1px solid var(--border); }
.kp-menu li.is-active { background: var(--accent-soft); }
.kp-menu li[aria-selected="true"] .kp-label { color: var(--accent); }
.kp-text { display: grid; gap: 2px; min-width: 0; }
.kp-label { font-size: 14px; color: var(--fg); }
.kp-note { font-size: 13px; color: var(--muted); }

/* Post di LinkedIn: raccolta compatta (una riga per post con miniatura, data, tipo, lingua, prima riga del testo e stato;
   un clic apre sotto il riquadro completo) e riquadro del post (anche nella pagina /admin/post). */
.post-list { display: grid; gap: var(--s-3); }
.post-list > .post-card + .post-card, .adm-pane > .post-card { margin-top: 0; }
.post-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 18px; align-items: center; gap: var(--s-4); width: 100%; padding: 12px 16px 12px 12px;
  text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); transition: border-color .2s ease; }
.post-row:hover { border-color: var(--border-2); }
.post-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.post-item.is-open .post-row { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.post-row-thumb img { display: block; width: 44px; height: 55px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.post-row-main { display: grid; gap: 4px; min-width: 0; }
.post-row-meta { font-size: 13px; line-height: 1.4; color: var(--muted); }
.post-row-meta strong { color: var(--fg); font-weight: 600; }
.post-row-meta strong.adm-warn { color: var(--bad); }
.post-row-hook { font-size: 14px; line-height: 1.45; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.post-row[aria-expanded="true"] .post-chev { transform: rotate(180deg); }
.post-body { margin-top: var(--s-3); }
@media (max-width: 560px) {
  .post-row { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: var(--s-2) var(--s-3); }
  .post-row-thumb { grid-row: 1 / 3; }
  .post-row .post-status { grid-column: 2; grid-row: 2; justify-self: start; }
  .post-chev { grid-column: 3; grid-row: 1 / 3; }
}
.post-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.post-lang { margin-left: 8px; vertical-align: 2px; }
.post-when { margin: 6px 0 var(--a-in); font-size: 13px; line-height: 1.5; color: var(--muted); }
.post-when strong { color: var(--fg-2); font-weight: 600; }
.post-stale { margin: calc(-1 * var(--s-2)) 0 var(--a-in); font-size: 13px; line-height: 1.5; }
.post-plan { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-bottom: var(--a-in); }
.post-plan label { display: grid; gap: 6px; }
.post-plan .field { width: auto; text-transform: none; letter-spacing: 0; }
.post-plan .link-btn { display: inline-flex; align-items: center; min-height: var(--a-ctl); } /* «Togli la data» alla stessa altezza dei campi */
.post-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--a-gap); align-items: start; }
@media (max-width: 760px) { .post-grid { grid-template-columns: minmax(0, 1fr); } .post-figure { max-width: 360px; } }
.post-figure { margin: 0; display: grid; gap: var(--s-3); justify-items: start; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); }
/* Post con un documento: il titolo da dare al PDF su LinkedIn, come il testo del post (etichetta, testo, pulsante). */
.post-doc { display: grid; gap: var(--s-2); justify-items: start; }
.post-doc-title { color: var(--fg); text-wrap: balance; }
.post-texts { display: grid; gap: var(--s-2); min-width: 0; }
.post-texts .field { width: 100%; }
.post-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); font-size: 13px; color: var(--muted); }
.post-review { margin: 0 0 var(--s-3); padding: 10px 14px; border: 1px solid var(--border-2); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.post-review ul { margin: 6px 0 0; padding-left: 18px; }
.adm .card .post-review li { position: static; padding: 0; font-size: 13px; color: var(--fg-2); }
.adm .card .post-review li::before { content: none; }
.post-review li + li { margin-top: 4px; }
.post-review.warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.post-comment-text { margin: 8px 0 10px; white-space: pre-line; overflow-wrap: anywhere; color: var(--fg); }
/* Riscrittura con indicazioni: un campo e il suo pulsante. Nel riquadro del post sta sotto il testo, a cui si riferisce. */
.post-regen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--a-in); }
.post-texts > .post-regen { margin-top: 0; }
.post-regen .field { flex: 1 1 260px; min-width: 0; width: auto; }
/* Piede del riquadro (post, campagna, proposte di commento): sopra un filo; a sinistra le azioni che tolgono o annullano,
   a destra quelle che portano avanti, con la principale per ultima. Sui telefoni prima la principale, poi le altre. */
.post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--a-in); padding-top: var(--a-in); border-top: 1px solid var(--border); }
.post-foot-start, .post-foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.post-foot-end { margin-left: auto; justify-content: flex-end; }
@media (max-width: 640px) {
  .post-foot { flex-direction: column-reverse; align-items: stretch; }
  .post-foot-end, .post-foot-start { margin-left: 0; justify-content: flex-start; }
  .post-foot-end .btn { flex: 1 1 auto; }
}
.adm :is(.post-block:not(:disabled), .post-delete):hover { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.post-focus { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 3px; }
.post-msg { margin: var(--s-3) 0 0; font-size: 13px; line-height: 1.4; color: var(--fg-2); }
.post-msg:empty { display: none; }
.post-undo:hover { color: var(--accent); }

/* Campagne a pagamento (scheda Marketing): varianti con immagini, testi da copiare e pubblico suggerito. */
.ad-card.is-archived { opacity: .7; }
.ad-variants { display: grid; gap: var(--a-gap); margin-top: var(--a-in); }
.adm .ad-variant { border-top: 1px solid var(--border); padding-top: var(--a-in); }
.ad-variant h3, .ad-target h3 { margin: 0 0 var(--s-3); font: 600 15px/1.3 var(--display); color: var(--fg); }
.ad-images { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--a-in); }
.ad-images figure { margin: 0; display: grid; gap: var(--s-2); justify-items: start; }
.ad-images img { display: block; height: 200px; width: auto; max-width: 100%; border-radius: 8px; border: 1px solid var(--border); object-fit: contain; }
.ad-images figcaption { font-size: 13px; color: var(--muted); }
.ad-fields { display: grid; gap: var(--s-3); margin: 0; }
.ad-field dt { display: flex; align-items: center; gap: var(--s-3); }
.ad-field dt .link-btn { text-transform: none; letter-spacing: 0; }
.ad-field dd { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg); overflow-wrap: anywhere; }
.ad-target { margin-top: var(--a-in); border-top: 1px solid var(--border); padding-top: var(--a-in); }
.ad-target p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-2); }

/* Commenti (admin.js, commentsView): riquadro per lo screenshot del post e proposte da copiare. */
.cm-drop { border: 1px dashed var(--control-border); border-radius: 12px; padding: var(--s-4); transition: border-color .15s ease, background-color .15s ease; }
.cm-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.cm-drop-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.cm-drop-text strong { font: 600 13px var(--mono); color: var(--fg); white-space: nowrap; }
.adm .cm-drop .link-btn { font-size: 14px; color: var(--accent); }
.cm-preview { display: flex; align-items: flex-end; gap: var(--s-4); margin-top: var(--s-4); }
.cm-preview[hidden] { display: none; } /* senza screenshot il riquadro non si vede (display: flex vincerebbe su hidden) */
.cm-preview img { display: block; max-width: min(100%, 320px); max-height: 260px; border-radius: 8px; border: 1px solid var(--border); object-fit: contain; background: var(--surface-2); }
.cm-option { border-top: 1px solid var(--border); padding-top: var(--a-in); margin-top: var(--a-in); }
.cm-text { margin: var(--s-2) 0 var(--s-3); font-size: 14px; line-height: 1.6; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-fresh, .cm-advice { margin: 0 0 var(--s-3); font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.cm-fresh.is-now { color: var(--accent); font-weight: 500; }
.cm-advice { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-2); }
.cm-pick { color: var(--accent); font-weight: 600; }
.cm-check { margin: 0 0 var(--s-3); font-size: 13px; line-height: 1.5; color: var(--muted); }
.cm-check.is-ok { color: var(--accent); font-weight: 500; }
.cm-check.is-fixed { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--fg-2); }
.cm-check.is-fixed p, .cm-check.is-fixed ul { margin: 0 0 6px; }
.cm-check.is-fixed ul { padding-left: 18px; }
.adm .card .cm-check li { position: static; padding: 0; font-size: 13px; color: var(--fg-2); }
.adm .card .cm-check li::before { content: none; }
.cm-check summary { cursor: pointer; color: var(--accent); }
.cm-check details .cm-text { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

/* Tabelle dell'area admin come schede fino a 1080 px (12 ottobre 2026): sotto quella larghezza la più larga (Sistema) non
   ci stava e si scorreva di lato. La prima colonna in alto, le altre con la loro etichetta. */
@media (max-width: 1080px) {
  .adm-table { margin: 0; overflow-x: visible; }
  .adm .card:has(> .adm-table:last-child) { padding-bottom: var(--a-pad); }
  .adm-table table, .adm-table tbody, .adm-table tr, .adm-table td { display: block; width: 100%; }
  .adm-table thead { display: none; } /* le intestazioni diventano le etichette delle celle */
  .adm-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  .adm-table tr:first-child { padding-top: 0; }
  .adm-table tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
  .adm-table tr[hidden] { display: none; }
  .adm-table tbody tr:hover td { background: none; }
  .adm-table td, .adm-table td:first-child, .adm-table td:last-child, .adm-table td.n { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: var(--s-3); align-items: baseline; justify-items: start; padding: 3px 0; border: 0; text-align: left; text-wrap: pretty; }
  .adm-table td:empty { display: none; } /* niente etichetta senza valore */
  .adm-table td::before { content: attr(data-label); font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: normal; }
  .adm-table td:first-child { display: block; padding-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
  .adm-table td:first-child::before { content: none; }
  .adm-table td.a-act { display: block; padding-top: var(--s-2); }
  .adm-table td.a-act::before { content: none; }
  .adm-table .adm-stage { white-space: normal; } /* gli stati lunghi vanno a capo nella loro colonna */
  .adm-table .a-stage-line { white-space: normal; }
  .adm-table td > .a-sub { grid-column: 2; } /* la nota sotto il valore («fino al 28 ott»), non sotto l'etichetta */
  .adm-table .a-nowrap { white-space: normal; }
}
/* Telefono: menu delle sezioni su una riga che scorre di lato; riquadri dei numeri due per riga; barra dei comandi in
   colonna. */
@media (max-width: 640px) {
  .adm-head { margin-bottom: var(--s-4); }
  .adm-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; min-width: 0; } /* senza "a capo": la colonna resta larga quanto lo schermo */
  .adm-nav .adm-tabs { min-width: 0; flex-wrap: nowrap; gap: var(--s-5); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--wrap-pad)); padding: 0 var(--wrap-pad); }
  .adm-nav .adm-tabs::-webkit-scrollbar { display: none; }
  .adm-tabs a { flex: none; }
  /* Sfumatura ai bordi quando ci sono altre sezioni da scorrere (classi messe da admin.js). */
  .adm-tabs.fade-r { mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .adm-tabs.fade-l { mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .adm-tabs.fade-l.fade-r { mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  .adm-nav .adm-stamp { align-self: flex-end; margin: 8px 0; }
  .a-bar > .a-search, .a-bar > .a-end, .a-bar > select.field { flex: 1 1 100%; max-width: none; margin-left: 0; }
  .a-long { display: none; } /* parti delle etichette che sul telefono non servono («Post gratuiti» → «Post») */
  /* Selettori a segmenti larghi quanto lo schermo, scelte che si dividono lo spazio (come su iOS); uno da solo resta stretto. */
  .a-bar > .a-seg { flex: 1 1 100%; }
  .a-bar > .a-seg:has(> button:only-child) { flex: 0 0 auto; }
  .a-seg button { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  .adm-kpis.k-text { --k: 1; } /* riquadri con date e frasi al posto dei numeri: uno per riga */
  .adm-kpi-value { font-size: 22px; }
  .adm-bars { grid-template-columns: minmax(0, 1fr) auto; }
  .adm .card .adm-bars li { row-gap: 6px; }
  .adm-bar { grid-column: 1 / -1; grid-row: 2; }
  .a-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .a-dl dd + dt { margin-top: var(--s-2); }
}


/* ─── Dashboard, 19 ottobre 2026 (proposte accettate da Alessandro dopo lo studio di BitHive e il parere di Patrick Meehan) ───
   Voci chiuse che si aprono; azioni brevi in cima, in card; indice. Titoli ed etichette restano in maiuscoletto (sua
   preferenza dopo l'anteprima). */
.block-head { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); }
.block-head .block-title { flex: 1; margin: 0; }
.panel .toggle-all { color: var(--accent); text-decoration: none; white-space: nowrap; }
.panel .toggle-all:hover { color: var(--accent-2); text-decoration: underline; }
.block, .item, .rec, .rec-member, #archive-card { scroll-margin-top: 104px; }



/* Voci chiuse: il riassunto (livello, sfruttamento, titolo) si apre con un clic; il resto sotto un filo. */
details.item, details.item.quiet { padding: 0; } /* .item.quiet aveva un suo margine interno: ora sta nel riassunto */
details.item > summary { list-style: none; cursor: pointer; display: block; position: relative; padding: 18px 60px 16px 22px; border-radius: inherit; }
details.item > summary::-webkit-details-marker { display: none; }
details.item > summary:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
details.item > summary .item-head { margin-bottom: 10px; }
details.item > summary h3 { margin: 0; }
:is(details.item, details.rec) .item-chev { position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); border-radius: 50%; border: 1px solid var(--border-2); }
:is(details.item, details.rec) .item-chev::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2); transform: translate(-50%, -70%) rotate(45deg); transition: transform .15s ease; }
:is(details.item, details.rec)[open] .item-chev::before { transform: translate(-50%, -25%) rotate(-135deg); }
details.item[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.item .item-body { padding: 16px 22px 18px; border-top: 1px solid var(--border); }
details.item.quiet > summary { padding: 14px 60px 12px 20px; }
details.item.quiet .item-body { padding: 12px 20px 14px; }
@media (prefers-reduced-motion: reduce) { :is(details.item, details.rec) .item-chev::before { transition: none; } }

/* «In questo briefing», nella colonna destra (solo dove la colonna sta accanto al briefing). */
.toc-group { margin: 0 0 2px; font-size: 12.5px; color: var(--muted); }
.toc-list { list-style: none; margin: 0 0 10px; padding: 0; }
.card .toc-list li { padding: 0; font-size: 13.5px; } /* niente pallino delle liste nelle card: c'è quello del livello */
.card .toc-list li::before { content: none; }
.toc-list a { display: flex; align-items: center; gap: 10px; padding: 4px 8px; margin: 0 -8px; border-radius: 8px; color: var(--fg-2); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.toc-list a:hover { background: var(--accent-soft); color: var(--fg); }
/* La voce, o la sezione, in cima alla pagina mentre si scorre (app.js, spyToc; 20 ottobre 2026, revisione visiva). */
.toc-list a.is-here, .toc-more a.is-here { color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.toc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.toc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-more { margin: 2px 0 0; display: grid; gap: 4px; font-size: 13px; line-height: 1.4; }
.toc-more a { color: var(--muted); text-decoration: none; }
.toc-more a:hover { color: var(--fg); }
@media (max-width: 999px) { .toc-card { display: none !important; } }
/* La colonna resta ferma: se è più alta dello schermo, scorre da sola. */
/* Un po' d'aria sopra e ai lati: le card salgono di 2 px al passaggio del mouse e il bordo in alto non deve restare tagliato. */
@media (min-width: 1000px) and (min-height: 720px) { .side { max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px 6px 8px; margin: -6px -6px 0; } }

:root[data-theme="light"] .panel :is(.todo li > a, .todo li > .todo-row) { box-shadow: 0 1px 2px rgba(16, 24, 32, 0.05), 0 10px 24px -16px rgba(16, 24, 32, 0.28); }
/* «Apri tutte»: sul computer il testo; sul telefono un pulsante tondo con le due frecce, in colonna con quelle delle voci, così il titolo
   della sezione ha tutta la riga (20 ottobre 2026, revisione visiva: «Novità delle ultime 24 ore» andava a capo). */
.toggle-ico { display: none; }
@media (max-width: 480px) {
  .panel .toggle-all { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--border-2); color: var(--fg-2); }
  .panel .toggle-all:hover { text-decoration: none; color: var(--fg); }
  .panel .toggle-all .toggle-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .toggle-ico { display: block; width: 16px; height: 16px; }
  /* In colonna con le frecce delle voci: nelle card 18 px dentro il bordo (misurato a 360, 390 e 480 px), nelle righe 6 px. */
  :is(#sec-new, #sec-quiet) .toggle-all { margin-right: 19px; }
  :is(#sec-watch, #sec-noise) .toggle-all { width: 26px; height: 26px; margin-right: 6px; }
  .panel .block-title > span { text-wrap: balance; }
  .block-head .block-title::after { display: none; } /* accanto al pulsante tondo la riga non serve e ruba spazio al titolo */
  /* Bollini compatti: il numero del livello (il nome lo dice il colore e la voce aperta), meno spazio fra le lettere, e «segnalata
     dal …» come una riga di testo sotto i bollini, non come un bollino su due righe. */
  .item-head { gap: 6px; }
  .item-head .badge { padding: 4px 8px; font-size: 10.5px; letter-spacing: .04em; }
  .item-head .badge.ongoing { order: 9; flex-basis: 100%; display: block; padding: 0; border: 0; border-radius: 0; font: 400 12.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
  .item-head .badge.ongoing::before { margin-right: 6px; }
  /* Riquadro del livello: il numero accanto a «DEFCON» e al nome del livello, i testi sotto, su tutta la larghezza. */
  .hero-level .level { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: center; }
  .hero-level .level > div:not(.level-num) { display: contents; }
  .hero-level .level-num { grid-row: span 2; width: 72px; height: 72px; border-radius: 16px; font-size: 44px; }
  .hero-level .level-kicker { align-self: end; margin: 0 0 4px; }
  .hero-level .level-label { align-self: start; }
  .hero-level :is(.level-msg, .level-note) { grid-column: 1 / -1; }
  .hero-level .level-msg { margin-top: 16px; }
}
/* Telefono: la freccia della voce in alto a destra, così il titolo usa tutta la larghezza. */
@media (max-width: 480px) {
  details.item > summary { padding: 16px 16px 14px 18px; }
  details.item > summary .item-head { padding-right: 40px; }
  details.item .item-chev { top: 14px; transform: none; }
  details.item .item-body { padding: 14px 16px 16px 18px; }
}

/* Sintesi più leggera (19 ottobre 2026, «picchia troppo»): corpo più piccolo e meno bianco; i prodotti restano in evidenza. */
.panel .summary { font-size: 16px; color: var(--fg-2); }
.panel .summary strong { color: var(--fg); font-weight: 600; }

/* Numeri delle 24 ore: le tre card di prima; sul telefono affiancate e più piccole invece che una sotto l'altra. */
@media (max-width: 480px) {
  .panel .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .panel .stat { padding: 10px; }
  .panel .stat b { font-size: 17px; }
  .panel .stat span { display: block; font-size: 11.5px; line-height: 1.3; }
}

/* L'azione in una riga sotto il titolo della voce chiusa; titoli delle voci più piccoli (19 ottobre 2026, «davvero grandi»). */
details.item > summary h3 { font-size: 16px; line-height: 1.4; }
details.item.quiet > summary h3 { font-size: 15px; }
.item-todo { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.item-todo-k { margin-right: 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Da tenere d'occhio e rumore: righe chiuse; aperte mostrano motivo, codice e fonte. */
.recs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.recs > li { border-bottom: 1px solid var(--border); }
details.rec > summary { list-style: none; cursor: pointer; position: relative; display: block; padding: 13px 48px 13px 4px; border-radius: 8px; }
details.rec > summary::-webkit-details-marker { display: none; }
details.rec > summary:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
details.rec .item-chev { right: 6px; width: 26px; height: 26px; }
.rec-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.recs.noise .rec-title { color: var(--fg-2); }
.rec-body { padding: 0 4px 14px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.rec-body p { margin: 0; }
.rec-body .ids { margin-top: 6px; }
.toc-n { margin-left: auto; padding-left: 8px; font: 500 12px var(--mono); color: var(--muted); }
/* Titolo che è il solo codice CVE: sotto, l'inizio del motivo in una riga. */
.rec-sub { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bollini sotto i titoli di «Da tenere d'occhio» e «Molto discusse»; due righe del motivo per i soli codici; rumore un
   gradino sotto; voci dello stesso prodotto raggruppate (19 ottobre 2026). */
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rec-chips .badge { color: var(--fg-2); }
.rec-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.recs.noise .rec-title { font-size: 14px; font-weight: 600; color: var(--fg-2); }
.rec-member { padding: 10px 0; border-top: 1px dashed var(--border); }
.rec-member:first-child { padding-top: 0; border-top: 0; }
.rec-member p { margin: 0; }
.rec-member .rec-chips { margin: 0 0 6px; }
details.rec[open] .rec-sub { display: none; } /* aperta, il motivo intero sta sotto: niente doppione */
/* Segno del fuoco (tastiera) dentro la riga o la voce: fuori copriva il testo sotto. */
:is(details.item, details.rec) > summary:focus-visible { outline-offset: -2px; border-radius: 10px; }
.ids .no-cve { color: var(--muted); } /* «Senza codice CVE»: testo, non link */
/* Giorni dell'archivio (versione essenziale, voci sempre aperte): titoli come nelle voci chiuse, in tutte le sezioni. */
article.item > h3 { font-size: 16px; line-height: 1.4; }
article.item.quiet > h3 { font-size: 15px; }
.rec-member-title { margin: 0 0 4px; font-weight: 600; color: var(--fg); } /* tipo di falla di ogni vulnerabilità del gruppo */
summary[data-mouse]:focus-visible { outline: none; } /* il segno del fuoco resta per la tastiera, non per il clic */

/* Titoli delle sezioni più evidenti (19 ottobre 2026, richiesta di Alessandro): sempre in maiuscoletto, ma più grandi e chiari;
   il conteggio in un bollino colorato con il livello più grave della sezione dove c'è, proporzionato al titolo (20 ottobre 2026,
   osservazione di Alessandro: alto 28 px con il numero a 16 px, accanto a un titolo di 13 px, era troppo grande). */
.panel .block-title { font: 600 13px/1.2 var(--mono); letter-spacing: .12em; color: var(--fg); gap: var(--s-3); }
/* Telefono: titoli un po' più piccoli e più stretti, perché «Novità delle ultime 24 ore» stia su una riga in ogni lingua (20 ottobre
   2026, revisione visiva; misurato a 360, 375, 390 e 430 px). Qui, dopo la regola sopra, che altrimenti vincerebbe. */
@media (max-width: 480px) { .panel .block-title { font-size: 12px; letter-spacing: .08em; } }
@media (max-width: 400px) { .panel .block-title { font-size: 11.5px; letter-spacing: .05em; } }
@media (max-width: 380px) { .panel .block-title { font-size: 11px; letter-spacing: .03em; } }
.panel .block-title::after { background: var(--border-2); }
.block-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  font: 600 12px/1 var(--mono); letter-spacing: 0; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border-2); }
.block-count[class*=" l"] { background: color-mix(in srgb, var(--c) 20%, transparent); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.side h3, .panel > #subscription h3 { font: 600 12.5px/1.2 var(--mono); letter-spacing: .12em; color: var(--fg); } /* come i titoli delle sezioni */
/* Bollini dei conteggi anche nell'indice di destra (19 ottobre 2026). */
.toc-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.toc-more a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 8px; margin: 0 -8px; border-radius: 8px; } /* come le voci sopra: la luce della sezione corrente non tocca il testo */
/* Proporzionati alle voci dell'indice (20 ottobre 2026: 18 px e numero a 11 px, prima 20 px e 12 px in grassetto). */
.toc-pill { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: auto;
  border-radius: 999px; font: 600 11px/1 var(--mono); color: var(--fg); background: var(--surface-2); border: 1px solid var(--border-2); }
.toc-pill[class*=" l"] { background: color-mix(in srgb, var(--c) 20%, transparent); border-color: color-mix(in srgb, var(--c) 60%, transparent); }

/* ─── Sotto-pagine della dashboard (19 ottobre 2026): briefing, archivio, account ───
   Le voci stanno nella barra in alto (20 ottobre 2026, richiesta di Alessandro): da 1100 px al centro, come il menu delle
   pagine pubbliche (.menu, con la pagina in cui si è evidenziata), con Index ed Esci a destra (l’email no: 20 ottobre 2026); sotto, tutto nel menu a
   tendina a destra, che mostra la pagina in cui si è (sui telefoni solo l'icona): a 320 px accanto a logo, lingua e tema
   c'è posto per una sola icona. Solo dove c'è quel menu (2 novembre 2026, osservazione di Alessandro: nell'area admin, che non lo ha,
   sul telefono sparivano «Dashboard» ed «Esci» e non si tornava alla dashboard). */
@media (max-width: 1099px) { .nav:has(.pages) .app-index, .nav:has(.pages) .nav-sep, .nav:has(.pages) #logout { display: none; } }
.nav .pages { position: relative; }
.pages summary {
  list-style: none; cursor: pointer; height: 38px; padding: 0 14px 0 11px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--fg); font: 600 14px var(--sans); white-space: nowrap;
}
.pages summary::-webkit-details-marker { display: none; }
.pages summary svg { flex: none; width: 18px; height: 18px; }
.pages summary:hover, .pages[open] summary { border-color: var(--border-2); }
.pages-menu a[aria-current="page"] { color: var(--accent); }
.pages-sep { display: block; height: 1px; margin: 6px 8px; background: var(--border); }
@media (min-width: 1000px) { .pages-menu .pages-cal { display: none; } } /* da 1000 px il calendario è nella colonna destra */
@media (min-width: 1100px) { .nav .pages { display: none; } }
@media (max-width: 519px) { .pages-cur { display: none; } .pages summary { width: 38px; padding: 0; justify-content: center; } }
/* Dashboard con «Admin» (26 ottobre 2026): con la lente nella barra (25 ottobre) logo, lingua, tema, lente, menu e «Admin» non
   stavano fra 366 e 446 px; con i testi accanto alle icone non stavano fino a 600 px («My Defence» è il nome più lungo) e la pagina
   scorreva di lato fino a 56 px. Con «Admin» il menu e «Admin» restano solo icone fino a 640 px, come sul telefono; fino a 446 px
   cede anche la lente, come da connessi nelle pagine pubbliche. Senza «Admin» la barra non cambia. */
@media (max-width: 640px) {
  .nav:has(.nav-admin) .pages-cur, .nav:has(.pages) .nav-admin span { display: none; }
  .nav:has(.nav-admin) .pages summary { width: 38px; padding: 0; justify-content: center; }
  .nav:has(.pages) .nav-admin { padding: 8px; }
}
@media (max-width: 446px) { .top-inner:has(.pages):has(.nav-admin) .cve-lens { display: none; } }
.panel-grid.no-side { grid-template-columns: minmax(0, 1fr); }
.panel-grid.no-side .side { display: none; }
.view-intro { margin: 0 0 var(--s-6); font-size: 15px; color: var(--fg-2); } /* tutta la larghezza della pagina (20 ottobre 2026) */

/* Archivio: ricerca e risultati. */
.search { display: flex; gap: 10px; margin: 0 0 var(--s-4); }
/* Archivio senza ricerca (24 ottobre 2026, app.js archHome): gli ultimi briefing con il loro livello e il calendario, affiancati
   sugli schermi larghi. */
.arch-home { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.arch-home[hidden] { display: none; }
@media (min-width: 900px) { .arch-home { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.arch-days { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 10px; }
.card .arch-days li { padding: 0; } /* niente pallino delle liste nelle card: c'è il quadrato del livello */
.card .arch-days li::before { content: none; }
.arch-day { display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 10px; border-radius: 12px; border: 1px solid var(--border); color: var(--fg); text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease; }
.arch-day:hover, .arch-day:focus-visible { border-color: color-mix(in srgb, var(--c) 55%, var(--border)); background: color-mix(in srgb, var(--c) 7%, transparent); outline: none; }
.arch-lv { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font: 700 16px/1 var(--display); color: var(--ci, #fff); background: var(--c); }
.arch-d { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.arch-d b { font-weight: 600; font-size: 15px; }
.arch-d b::first-letter { text-transform: uppercase; }
.arch-d span { font-size: 13px; color: var(--muted); }
.arch-day > svg { flex: none; color: var(--muted); }
.arch-cal { position: relative; }
.arch-cal .block-title { padding-right: 80px; } /* la riga del titolo si ferma prima delle frecce dei mesi */
.arch-cal .cal-arrows { top: 19px; right: 26px; } /* a metà della riga del titolo e a filo del calendario */
.arch-cal .cal { margin-top: var(--s-4); }
.search .field { flex: 1; min-width: 0; }
/* Risultati in tabella (20 ottobre 2026, sul modello della tabella degli Iscritti, richiesta di Alessandro): fascia delle
   intestazioni in maiuscoletto, una riga per vulnerabilità con il testo principale e una riga più piccola sotto, quadratini dei
   giorni colorati come nel calendario. Niente overflow sulla tabella e sulla card: i suggerimenti dei quadratini ne escono. */
.res-summary { display: grid; gap: 2px; margin: var(--s-2) 0 var(--s-4); font-size: 14.5px; color: var(--fg-2); }
.res-summary .res-note { font-size: 13px; color: var(--muted); text-wrap: pretty; }
.card.res-card { padding: 0; margin-bottom: var(--s-7); }
.res-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.res-table th { padding: 11px 12px; text-align: left; white-space: nowrap; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: color-mix(in srgb, var(--fg) 3.5%, transparent); border-bottom: 1px solid var(--border); }
.res-table thead th:first-child { border-top-left-radius: calc(var(--r) - 1px); }
.res-table thead th:last-child { border-top-right-radius: calc(var(--r) - 1px); }
.res-table td { padding: 14px 12px; text-align: left; vertical-align: top; color: var(--fg-2); border-bottom: 1px solid var(--border); }
.res-table :is(th, td):first-child { padding-left: 26px; }
.res-table :is(th, td):last-child { padding-right: 26px; }
.res-table :is(th, td):not(:first-child) { width: 1%; white-space: nowrap; } /* la prima colonna prende il resto */
.res-table tbody tr:last-child td { border-bottom: 0; }
.res-table tbody tr[data-href] { cursor: pointer; }
.res-table tbody tr[data-href]:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.res-table tbody tr:last-child:hover td:first-child { border-bottom-left-radius: calc(var(--r) - 1px); }
.res-table tbody tr:last-child:hover td:last-child { border-bottom-right-radius: calc(var(--r) - 1px); }
.res-sort { display: inline-flex; align-items: baseline; gap: 4px; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.res-table th[aria-sort] .res-sort, .res-sort:hover { color: var(--fg); }
.res-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.res-sort i { display: inline-block; width: .9em; font-style: normal; text-align: center; }
.res-table th[aria-sort="ascending"] .res-sort i::before { content: '↑'; }
.res-table th[aria-sort="descending"] .res-sort i::before { content: '↓'; }
.res-name { font-weight: 600; color: var(--fg); text-decoration: none; text-wrap: pretty; }
.res-name:hover, .res-last:hover { text-decoration: underline; text-underline-offset: 3px; }
.res-sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); } /* come i codici CVE (20 ottobre 2026) */
.res-ids { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; }
.res-code { font: 12.5px var(--mono); color: var(--muted); }
.res-ids .badge.mine { font-size: 12px; }
.res-level { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font: 600 12px/1.2 var(--sans); white-space: nowrap;
  color: color-mix(in srgb, var(--c) 82%, var(--fg)); background: color-mix(in srgb, var(--c) 15%, transparent); }
.res-level.none { font-weight: 500; color: var(--fg-2); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.res-days { display: flex; align-items: center; gap: 4px; min-height: 22px; }
.res-sq { flex: none; width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--c) 88%, transparent); transition: filter .15s ease; }
.res-sq.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-2); }
.res-sq:hover { filter: brightness(1.2); }
.res-sq:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.res-older { margin-right: 4px; font: 500 11.5px var(--mono); color: var(--muted); }
.res-last { color: var(--fg); text-decoration: none; white-space: nowrap; }
.res-mentions { border-top: 1px solid var(--border); }
.res-table .res-group th { padding: 18px 26px 10px; background: none; border-bottom: 1px solid var(--border); white-space: normal; }
/* Sul telefono, come gli Iscritti: ogni vulnerabilità è un blocco, il titolo in alto e sotto le altre colonne con la loro etichetta. */
@media (max-width: 759px) {
  .res-table table, .res-table tbody, .res-table tr, .res-table td { display: block; width: auto; }
  .res-table thead { display: none; }
  .res-table tbody tr { padding: 16px 18px; border-bottom: 1px solid var(--border); }
  .res-table tbody tr:last-child { border-bottom: 0; }
  .res-table td, .res-table td:first-child, .res-table td:last-child, .res-table :is(th, td):not(:first-child) { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 12px; align-items: baseline; width: auto; padding: 4px 0; border: 0; white-space: normal; }
  .res-table td::before { content: attr(data-label); font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .res-table td:first-child { display: block; padding: 0 0 8px; }
  .res-table td:first-child::before { content: none; }
  .res-table tbody tr[data-href]:hover td { background: none; }
  .res-table .res-group { padding: 0; }
  .res-table .res-group th { display: block; padding: 16px 18px 10px; }
  .res-days { flex-wrap: wrap; }
}

/* Account. */
.account-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .account-grid { grid-template-columns: 1fr 1fr; } }
.account-grid .card { padding: 20px; margin: 0; }
.account-grid h3 { margin: 0 0 var(--s-4); font: 600 12.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.acc-card p { margin: 0 0 12px; color: var(--fg-2); }
.acc-lang { font-size: 18px; font-weight: 600; color: var(--fg) !important; }
.account-grid .side-delete { text-align: left; }
/* Calendario (19 ottobre 2026, scelta di Alessandro): le frecce dei mesi in alto a destra della scheda, accanto al titolo
   «Archivio»; i menu di mese e anno sotto, a sinistra. La testa del briefing non ha più le frecce fra un giorno e l'altro. */
#archive-card { position: relative; }
.cal-arrows { position: absolute; top: 13px; right: 16px; display: flex; gap: 6px; }
.cal-arrows .cal-nav { width: 30px; height: 30px; }
#archive-card .cal-head { justify-content: flex-start; margin-top: -2px; }

/* ─── My Defence (20 ottobre 2026, proposta accettata da Alessandro) ───
   Nella barra una voce a parte: pillola con il bordo nel colore del marchio, l'icona del radar e un pallino vivo (quante voci
   del briefing riguardano i propri prodotti, nel colore del livello più grave; «Nuovo» finché non è configurata). La pagina è
   uno schema di rete: Internet in alto, la dorsale al centro, le zone come card, i prodotti come pillole con il colore del
   livello più grave delle loro vulnerabilità recenti. */
.menu-sep { width: 1px; height: 20px; align-self: center; margin: 0 6px; background: var(--border-2); }
.menu a.md-link { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 10px; border-radius: 999px; font: 600 14px/1 var(--sans);
  color: var(--fg); text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.menu a.md-link:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.menu a.md-link.is-current { background: color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.md-ico { flex: none; width: 17px; height: 17px; color: var(--accent); }
.md-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  font: 700 11.5px/1 var(--mono); color: var(--ci, #0b1220); background: var(--c, var(--accent)); }
.pages-menu .md-item { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; }
.pages-menu .md-item .md-ico { width: 16px; height: 16px; }
.pages-menu .md-item.is-current { color: var(--accent); }
.pages-menu .md-item .md-dot { margin-left: auto; }
.pages.md-alert summary { position: relative; }
.pages.md-alert summary::after { content: ''; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }

.md-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.md-card h3 { margin: 0 0 12px; font: 600 12.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.md-card .form-note { margin: 0; }
.md-card .md-note { text-wrap: pretty; } /* la nota della scelta attiva: due righe al massimo, mai una parola sola sotto (23 ottobre 2026); righe piene, non bilanciate (25 ottobre 2026, osservazione di Alessandro: la prima riga lasciava vuota mezza card) */
.md-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--surface-2); }
.md-seg button { padding: 8px 14px; border: 0; border-radius: 9px; background: none; color: var(--fg-2); font: 600 14px var(--sans); cursor: pointer; }
.md-seg button:hover:not(:disabled) { color: var(--fg); }
.md-seg button[aria-checked="true"] { color: var(--fg); background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.md-seg button:disabled { opacity: .45; cursor: not-allowed; }
.md-sim { display: flex; align-items: center; gap: 10px; margin: 20px 0 28px; font-size: 15px; color: var(--fg-2); }
.md-sim .md-ico { width: 20px; height: 20px; }
/* Una frase per riga, bilanciata: niente riga finale con una parola sola (29 ottobre 2026, la frase degli avvisi immediati). */
.md-sim-seg { display: block; text-wrap: balance; }

/* Angoli di 18 px invece che tutti tondi (2 novembre 2026): la pillola su una riga è alta 36 px e resta uguale; quando il nome va a capo
   diventa una scheda con gli angoli morbidi. */
.md-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 5px 5px 11px; border-radius: 18px; border: 1px solid var(--border-2); background: var(--surface-2); font-size: 13.5px; }
.md-chip.kw { border-style: dashed; }
.md-chip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.md-chip[class*=" l"] .md-chip-dot { background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
/* Il nome intero, sempre dentro la pillola (2 novembre 2026, osservazione di Alessandro: «Uncanny Toolkit for LearnDash» usciva dal
   bordo): se non c'è posto il produttore scende sotto il nome, e un nome lungo va a capo fra le parole (a metà parola solo se una parola
   da sola non ci sta). */
.md-chip-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
/* Puntino e «x» all'altezza della prima riga quando il nome va a capo (2 novembre 2026, osservazione di Alessandro): tutto su un asse a
   12 px dall'alto, il centro della «x»; con il nome su una riga la pillola resta com'era (prima tutto era centrato in altezza). */
.md-chip { align-items: flex-start; }
.md-chip-name { margin-top: calc((24px - 1lh) / 2); }
.md-chip-dot { margin-top: 8px; }
.md-chip.is-moving .md-chip-dot { margin-top: 6px; }
.md-chip-name b { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--fg); }
.md-chip-v { min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; color: var(--muted); }
.md-chip-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.md-chip-x:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.md-chip-x svg { width: 12px; height: 12px; }
.md-search { position: relative; }
.md-search .field { width: 100%; }
.md-sugg { position: absolute; z-index: 20; left: 0; right: auto; width: max(100%, min(340px, calc(100vw - 48px))); top: calc(100% + 6px); display: grid; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--surface); box-shadow: var(--shadow); }
.md-sugg:empty { display: none; }
.md-opt { display: grid; gap: 2px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; text-align: left; color: var(--fg-2); font: 14px var(--sans); cursor: pointer; }
.md-opt:hover, .md-opt:focus-visible { color: var(--fg); background: var(--accent-soft); }
.md-opt b { color: var(--fg); }
.md-opt-m { font-size: 12.5px; color: var(--muted); }
/* L'azione in fondo al menu («Aggiungi «…»», 22 ottobre 2026): una linea sopra, se non apre il menu; spenta per un termine troppo generico. */
.md-opt.md-act { margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; }
.md-opt.md-act + .md-opt.md-act, .md-sugg > .md-opt.md-act:first-child { margin-top: 0; padding-top: 9px; border-top: 0; border-radius: 8px; }
.md-opt.md-act.is-off { cursor: default; }
.md-opt.md-act.is-off:hover { color: var(--fg-2); background: none; }
@media (max-width: 759px) {
  .md-settings { grid-template-columns: 1fr; }
}

/* Nel briefing: il segno «Tuo prodotto» sulle voci e la riga in cima che porta a My Defence. */
.badge.mine { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.badge.mine .md-ico { width: 13px; height: 13px; }
/* Briefing nella dashboard (24 ottobre 2026, proposta del 23 accolta da Alessandro): le voci chiuse sui tuoi prodotti respirano come
   le zone calde di My Defence, nel colore del loro livello; aperte si leggono, ferme. */
.item.is-mine:not([open]) { animation: md-breathe 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .item.is-mine:not([open]) { animation: none; } }
.md-strip { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-6); padding: 12px 16px; border-radius: 14px; font-size: 14.5px; color: var(--fg); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.md-strip:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.md-strip-go { margin-left: auto; white-space: nowrap; font: 600 13px var(--sans); color: var(--accent); }
/* Con le voci dei propri prodotti: il testo, il pulsante «Mostra solo queste» e il link a My Defence (20 ottobre 2026). Non è un
   link intero: niente cambio di fondo al passaggio del mouse. Sul telefono pulsante e link vanno sotto il testo. */
.md-mine-strip { flex-wrap: wrap; row-gap: 10px; }
.md-mine-strip:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.md-strip-txt { flex: 1 1 220px; min-width: 0; }
.md-filter { flex: none; padding: 6px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: transparent;
  color: var(--accent); font: 600 13px var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.md-filter:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.md-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.md-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.md-mine-strip .md-strip-go { margin-left: 4px; text-decoration: none; }
.md-mine-strip .md-strip-go:hover { text-decoration: underline; text-underline-offset: 3px; }
/* «Solo i miei prodotti»: restano le voci dei propri prodotti e le sezioni che ne hanno; i conteggi, che sono del briefing intero,
   si nascondono. Nell'indice di destra lo stesso. */
#report.only-mine :is(.item, .recs > li):not(.is-mine) { display: none; }
#report.only-mine .block:is(#sec-new, #sec-quiet, #sec-more, #sec-watch, #sec-noise):not(:has(.is-mine)) { display: none; }
#report.only-mine .block-count, #toc.only-mine .toc-pill { display: none; }
#toc.only-mine .toc-list li:not(.is-mine), #toc.only-mine .toc-more { display: none; }
#toc.only-mine .toc-group:has(+ .toc-list:not(:has(.is-mine))), #toc.only-mine .toc-list:not(:has(.is-mine)) { display: none; }

/* Suggerimento di tutto il sito (#dl-tip, theme.js; 20 ottobre 2026, richiesta di Alessandro: «immediato, e bello in entrambi i
   temi, su tutti i tooltip di tutte le pagine»): un riquadro solo, nello stile di quelli dei grafici dell'Index (.chart-tip) e delle
   pillole di My Defence (.md-tip), che compare subito sotto l'elemento (sopra, se sotto non c'è posto) e resta dentro lo schermo. */
#dl-tip { position: fixed; z-index: 2147483000; left: 0; top: 0; max-width: calc(100vw - 16px); padding: 7px 11px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border-2); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
  font: 500 12.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; text-align: left; color: var(--fg); white-space: nowrap;
  pointer-events: none; animation: dl-tip-in .09s ease-out; }
/* Mai a capo (20 ottobre 2026, richiesta di Alessandro: «29 gennaio 2026 · Ancora in corso · DEFCON» e sotto «4»); solo se il testo
   è più largo della finestra va su più righe, bilanciate, mai una parola sola sotto. */
#dl-tip.dl-tip-wrap { white-space: normal; text-wrap: balance; }
#dl-tip.dl-tip-note { max-width: min(320px, calc(100vw - 16px)); white-space: pre-line; text-wrap: pretty; } /* le note di My Defence (25 ottobre 2026) */
#dl-tip[hidden] { display: none; }
@keyframes dl-tip-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #dl-tip { animation: none; } }
:root[data-theme="light"] #dl-tip { box-shadow: 0 12px 30px -12px rgba(16, 24, 32, .35); }
/* Pillole: suggerimento a tre livelli (20 ottobre 2026, revisione visiva): il periodo in maiuscoletto, quante vulnerabilità con la
   più grave nel suo colore, l'ultima più piccola. Centrato sulla pillola, ma sempre dentro lo schermo (app.js, tipInView). */
.md-chip { position: relative; }
.md-tip { position: absolute; z-index: 70; bottom: calc(100% + 8px); left: 50%; transform: translateX(calc(-50% + var(--tip-shift, 0px)));
  display: none; gap: 5px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface-2); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7); pointer-events: none; text-align: left; white-space: normal; }
:root[data-theme="light"] .md-tip { box-shadow: 0 12px 30px -12px rgba(16, 24, 32, .35); }
.md-chip:hover .md-tip, .md-chip:focus-within .md-tip { display: grid; }
.md-tip-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.md-tip-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 13.5px/1.35 var(--sans); color: var(--fg); }
.md-tip-worst { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--fg-2); }
.md-tip-lvl { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 6px; font: 600 11.5px/1.2 var(--sans);
  color: color-mix(in srgb, var(--c) 82%, var(--fg)); background: color-mix(in srgb, var(--c) 15%, transparent); }
.md-tip-last { font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.md-tip > span { white-space: nowrap; } /* ogni riga intera, come gli altri suggerimenti; più larga della finestra, bilanciata */
@media (max-width: 760px) { .md-tip > span { white-space: normal; text-wrap: balance; } }
/* La zona sotto il puntatore o con il fuoco sta sopra le altre: i suggerimenti delle pillole e della ricerca non finiscono sotto la
   card dopo (25 ottobre 2026, segnalazione di Alessandro: il riquadro di «Chrome» finiva sotto la zona «Sviluppo»). */
.md-zone:hover, .md-zone:focus-within { z-index: 5; }
@media (max-width: 759px) {
  .md-seg { display: grid; width: 100%; }
  .md-seg button { text-align: left; }
}

/* ─── Barra in alto: le pagine in una guida (20 ottobre 2026, variante B scelta da Alessandro) ───
   Da 1100 px le pagine, con la loro icona, stanno in una guida incassata; un evidenziatore scorre sotto la pagina in cui si
   è e segue il mouse (app.js, glide). Fra 1100 e 1279 px niente icone, perché ci stiano tutte le voci in ogni lingua. */
.menu-glider { display: none; }
.app-menu .menu-ico { display: none; width: 16px; height: 16px; opacity: .85; }
.app-menu a.link { display: inline-flex; align-items: center; gap: 7px; }
@media (min-width: 1100px) {
  .menu-track { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 3px; border-radius: 999px;
    border: 1px solid var(--border); background: color-mix(in srgb, var(--fg) 4%, transparent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
  .menu-glider { display: block; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; opacity: 0;
    background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
  .menu-track a.link { position: relative; z-index: 1; height: 30px; padding: 0 13px 0 11px; line-height: 1; }
  .menu-track a.link:hover { background: none; }
  .menu-track a.link[aria-current="page"] { color: var(--fg); background: none; box-shadow: none; }
  .app-menu .menu-ico { display: block; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .menu-track a.link { padding: 0 10px; } .app-menu .menu-ico { display: none; } }
@media (prefers-reduced-motion: reduce) { .menu-glider { transition: none; } }
:root[data-theme="light"] .menu-track { box-shadow: inset 0 1px 2px rgba(16, 24, 32, .12); }

/* Legenda dei colori di My Defence. Campioni a forma di blocco, con il bordo e l'alone dei blocchi della mappa (.md-zone.hot), perché
   si capisca subito che i colori sono quelli dei blocchi (20 ottobre 2026, osservazione di Alessandro sui pallini). */
.md-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -12px 0 26px; font-size: 13px; color: var(--muted); }
.md-legend p { margin: 0; }
.md-legs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.md-leg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.md-leg i { flex: none; width: 24px; height: 16px; border-radius: 5px; border: 1px solid var(--border-2); background: var(--surface); }
.md-leg[class*=" l"] i { border-color: color-mix(in srgb, var(--c) 70%, var(--border)); background: color-mix(in srgb, var(--c) 10%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--c) 80%, transparent); }

/* Ricerca di My Defence: suggeriti in cima, poi l'elenco in ordine alfabetico che scorre dentro il riquadro. */
.md-sugg { max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.md-sugg-h { margin: 6px 10px 4px; font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.md-sugg-h:not(:first-child) { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
/* Ricerca in corso (22 ottobre 2026): il menu si apre subito con «Cerco…»; le voci di prima restano, attenuate, finché arriva la
   risposta. */
.md-wait { animation: md-wait 1.1s ease-in-out infinite; }
@keyframes md-wait { 50% { opacity: .45; } }
.md-sugg.is-loading .md-opt, .md-sugg.is-loading .md-sugg-h { opacity: .45; transition: opacity .15s; }
/* La riga della ricerca in corso (26 ottobre 2026): rotella, testo cercato e una barra che scorre sotto; resta in cima mentre si scorre. */
.md-sugg-status { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 9px; margin: -6px -6px 4px; padding: 11px 14px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border); font: 500 13px/1.3 var(--sans); color: var(--fg-2); overflow: hidden; }
.md-sugg-status::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 40%; background: var(--accent); border-radius: 2px;
  animation: md-scan 1.1s ease-in-out infinite; }
@keyframes md-scan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.md-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin .7s linear infinite; }
.md-sugg-status + .md-sugg-h { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .md-wait { animation: none; } .md-spin, .md-sugg-status::after { animation-duration: 2.4s; } }
.md-az { display: grid; gap: 2px; }

/* Scelte di My Defence: «Solo i miei produttori» in indaco (tinta che la pagina non usa per i livelli), «Mai» spento a righe. */
:root { --md-mine: #818CF8; }
:root[data-theme="light"] { --md-mine: #4F46E5; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --md-mine: #4F46E5; } }
.md-seg button { display: inline-flex; align-items: center; gap: 7px; }
.md-seg-ico { width: 15px; height: 15px; flex: none; opacity: .8; }
.md-seg button.sel-mine[aria-checked="true"] { color: var(--fg); background: color-mix(in srgb, var(--md-mine) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-mine) 75%, transparent); }
.md-seg button.sel-mine[aria-checked="true"] .md-seg-ico { color: var(--md-mine); opacity: 1; }
.md-seg button.sel-off[aria-checked="true"] { color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 60%, transparent);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg) 13%, transparent) 0 5px, transparent 5px 10px); }
.md-seg button.sel-off[aria-checked="true"] .md-seg-ico { opacity: 1; }
/* Invito a configurare My Defence, in cima al briefing, con la × per chiuderlo. */
.md-invite { padding: 0; }
.md-invite > a { display: flex; flex: 1; align-items: center; gap: 10px; padding: 12px 6px 12px 16px; color: var(--fg); text-decoration: none; }
.md-strip-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-right: 6px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.md-strip-x:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.md-strip-x svg { width: 14px; height: 14px; }

/* Invito a configurare My Defence su due righe: titolo e perché, icona alla prima riga. */
.md-invite > a { align-items: flex-start; }
.md-invite > a > .md-ico { margin-top: 2px; }
.md-invite-txt { display: grid; gap: 3px; min-width: 0; }
.md-invite-txt b { font-weight: 600; color: var(--fg); }
.md-invite-txt span { font-size: 14px; color: var(--fg-2); }
.md-invite .md-strip-go, .md-invite .md-strip-x { align-self: center; }
.md-invite-txt b { text-wrap: balance; }
.md-invite-txt span { text-wrap: pretty; }
/* Sul telefono «Inizia» va sotto la descrizione e la × resta in alto: il testo ha tutta la larghezza, senza parole sole. */
@media (max-width: 599px) {
  .md-invite > a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 10px; padding-right: 0; }
  .md-invite > a > .md-strip-go { grid-column: 2; justify-self: start; margin-left: 0; }
  .md-invite .md-strip-x { align-self: flex-start; margin-top: 6px; }
}

/* La prova e la legenda partono e finiscono dove il contenuto delle card sopra (20 ottobre 2026, richiesta di Alessandro). */
.md-sim, .md-legend { padding: 0 27px; }
/* Le due card delle email affiancate solo da 1280 px: più strette, le note andavano su un numero di righe diverso a seconda
   della lingua (20 ottobre 2026, osservazione di Alessandro); sotto, una sopra l'altra. */
@media (max-width: 1279px) { .md-settings { grid-template-columns: minmax(0, 1fr); } }


/* Le email in un pannello a parte (20 ottobre 2026, richiesta di Alessandro: le due card sembravano zone dell'infrastruttura):
   piatto, senz'ombra, di un colore diverso dalle zone (più chiaro nel tema scuro, grigio carta nel chiaro), con la busta accanto
   ai titoletti in tondo, mentre le zone sono card con l'ombra e i titoli in maiuscoletto. Dentro, briefing e avvisi divisi da una
   riga, e sotto la prova sugli avvisi degli ultimi 30 giorni. */
.md-mail { --md-mail-bg: var(--surface-2); margin: 0 0 22px; padding: 22px 26px 18px; border-radius: 18px; border: 1px solid var(--border-2); background: var(--md-mail-bg); }
:root[data-theme="light"] .md-mail { --md-mail-bg: color-mix(in srgb, var(--surface) 45%, var(--bg)); }
.md-mail .md-settings { gap: 0; }
.md-mail .md-card { min-width: 0; padding: 0 28px; }
.md-mail .md-card:first-child { padding-left: 0; }
.md-mail .md-card + .md-card { padding-right: 0; border-left: 1px solid var(--border-2); }
.md-mail .md-card h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font: 600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg); }
.md-mail-ico { flex: none; width: 18px; height: 18px; color: var(--accent); }
.md-mail .md-seg { background: var(--surface); }
.md-mail .md-sim { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border-2); }
/* Email sospese (20 ottobre 2026): l'avviso in testa al pannello; le scelte restano modificabili ma attenuate, valgono dalla
   riattivazione. Il colore è quello degli avvisi .banner.warn. */
.md-paused { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 14px 18px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--d3) 50%, transparent); background: color-mix(in srgb, var(--d3) 9%, var(--md-mail-bg)); }
.md-paused p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg); }
.md-paused p span { display: block; } /* una frase per riga (20 ottobre 2026) */
.md-paused .btn { flex: none; }
.md-mail.is-paused .md-settings, .md-mail.is-paused .md-sim { opacity: .55; transition: opacity .15s; }
.md-mail.is-paused .md-settings:hover, .md-mail.is-paused .md-settings:focus-within { opacity: .85; }
@media (max-width: 720px) { .md-paused { flex-direction: column; align-items: flex-start; } }
/* Pulsanti affiancati nei banner e nella card Email (riattiva · scegli in My Defence). */
.banner-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* Card Email dell'Account: le scelte di My Defence, con i colori dei pulsanti del pannello. */
/* Senza la riga «Le email arrivano a…» (20 ottobre 2026, scelta di Alessandro: l'indirizzo sta già in testa alla pagina). */
.acc-mail { margin: 0 0 18px; }
.acc-mail div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--border-2); }
/* Se il valore non sta accanto all'etichetta va sotto intero, invece di spezzarsi in due righe allineate a destra (telefono). */
.acc-mail :is(dt, dd) { flex-shrink: 0; max-width: 100%; }
.acc-mail div:first-child { padding-top: 0; }
.acc-mail dt { color: var(--fg-2); font-size: 14px; }
.acc-mail dd { margin: 0; text-align: right; font-weight: 600; font-size: 14px; color: var(--fg); }
.acc-mail dd.mine { color: var(--md-mine); }
.acc-mail dd.off { color: var(--muted); }
.acc-mail dd.warn { color: var(--d3); }
.acc-mail dd.bad { color: var(--d2); }
/* Abbonamento attivo (20 ottobre 2026, richiesta di Alessandro: «qualche effetto gold, ma non pacchiano»): filo dorato sottile,
   luce morbida dall'angolo, «Attivo» in oro con il sigillo. Nel tema chiaro un oro più scuro, leggibile. */
:root { --gold: #E3BE5B; --gold-soft: rgba(227, 190, 91, 0.10); }
:root[data-theme="light"] { --gold: #8F6B0B; --gold-soft: rgba(143, 107, 11, 0.08); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --gold: #8F6B0B; --gold-soft: rgba(143, 107, 11, 0.08); } }
#subscription.acc-paid { border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: radial-gradient(130% 120% at 100% 0%, var(--gold-soft), transparent 60%), var(--surface);
  box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--gold) 70%, transparent); }
.acc-mail dd.paid { color: var(--gold); }
/* Il sigillo sulla linea del testo: non sposta la riga (allineata a quella della card Email). */
.acc-mail dd .seal { display: inline-block; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; }
/* In prova: i colori del marchio, come l'accesso gratuito (#subscription.is-comp). */
#subscription.acc-trial { border: 1.5px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), transparent 75%), var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 40px -24px color-mix(in srgb, var(--accent) 70%, transparent); }
/* Quanto manca alla fine della prova o dell'accesso gratuito: la data in evidenza e, al posto del filo sotto la riga, una linea
   nel colore del marchio lunga quanto il tempo che resta. */
.acc-mail dd.soon { color: var(--accent); }
.acc-mail div.countdown { border-bottom-color: transparent;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / var(--p) 2px no-repeat, linear-gradient(var(--border-2), var(--border-2)) left bottom / 100% 1px no-repeat; }

/* Abbonamento ed Email della stessa altezza (20 ottobre 2026, richiesta di Alessandro): stanno nella stessa riga della griglia; la
   card dell'abbonamento riempie la sua cella, con il testo in alto e pulsante e nota in fondo, e i pulsanti della card Email stanno
   in fondo anche loro. Così si allineano qualunque sia il contenuto, in ogni lingua. */
#acc-sub { display: flex; flex-direction: column; }
#acc-sub > #subscription { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 14px; align-content: start; }
#acc-sub > #subscription > * { grid-column: 1 / -1; }
#acc-sub > #subscription > h3 { grid-row: 1; position: relative; }
/* Il bollino «Gratuito» centrato sul titolo, fuori dal flusso: non alza la riga del titolo, così le righe restano alla stessa altezza
   di quelle della card Email (20 ottobre 2026). */
#acc-sub > #subscription > h3 .comp-badge { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#acc-sub > #subscription > #sub-rows { grid-row: 2; }
/* Pulsante in fondo e, alla sua destra, la nota quando serve (l'abbonamento durante l'accesso gratuito, 20 ottobre 2026: sotto il
   pulsante allungava la card). */
#acc-sub > #subscription > :is(#portal, #sub-cta) { grid-row: 4; grid-column: 1; align-self: end; }
#acc-sub > #subscription > #t-portal-note { grid-row: 4; grid-column: 2; align-self: center; margin: 0; }
/* Come la card Email (20 ottobre 2026, osservazione di Alessandro: i contenuti risultavano sfalsati): la nota sopra il pulsante,
   pulsante piccolo in fondo, alla stessa altezza dei pulsanti della card accanto. */
#acc-sub > #subscription > #portal { width: auto !important; align-self: flex-start; min-height: 38px; padding: 0 16px; font-size: 14px; }
#acc-mail { display: flex; flex-direction: column; }
#acc-mail > .banner-acts { margin-top: auto; }
/* Lingua: i pulsanti delle lingue, come le scelte di My Defence (anche sui telefoni in riga, a capo se serve). */
.md-seg.acc-langs { display: inline-flex; flex-wrap: wrap; width: auto; margin: 0 0 14px; align-self: flex-start; }
.md-seg.acc-langs button { text-align: center; }
#acc-lang { display: flex; flex-direction: column; }
#acc-lang .form-note { margin: auto 0 0; }
#acc-delete { display: flex; flex-direction: column; }
#acc-delete[hidden] { display: none; } /* account dell'amministratore: non si elimina dal pannello (display: flex vincerebbe su hidden) */
/* Pagina Account dal 1° novembre 2026: sul computer gli Accessi su tutta la larghezza (gli ingressi a sinistra, il pulsante a destra);
   sotto, Lingua e «I tuoi dati» affiancate (l'eliminazione resta in fondo a destra). Sul telefono nell'ordine della pagina.
   Dal 2 novembre 2026 «Fatture e documenti» sotto Abbonamento ed Email, su tutta la larghezza come gli Accessi. */
@media (min-width: 760px) {
  .account-grid { grid-template-areas: "sub mail" "bill bill" "access access" "lang data"; }
  #acc-bill { grid-area: bill; }
  #acc-sub { grid-area: sub; }
  #acc-mail { grid-area: mail; }
  #acc-access { grid-area: access; }
  #acc-lang { grid-area: lang; }
  #acc-delete { grid-area: data; }
  /* Le due colonne della card larga sono quelle delle card sopra e sotto (2 novembre 2026, osservazione di Alessandro: i blocchi
     non allineati ai contenuti delle altre card disturbavano): spazio fra le colonne = spazio fra le card (16 px) più i due bordi
     interni (20 + 20 px). */
  .acc-access-body, .acc-bill-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(16px + 2 * 20px); align-items: start; }
}
.acc-access-body, .acc-bill-body { display: grid; row-gap: 18px; }
.acc-access-body .acc-mail { margin: 0; }
.acc-access-side .form-note { margin: 0 0 14px; }
.acc-access-side .banner-acts { margin: 0; }
.acc-access-side .acc-cut { margin: 12px 0 0; }
#acc-signins .sk { display: block; margin: 4px 0 14px; }
/* Quando la riga va a capo (telefono), la data e l'indirizzo restano a destra, come nelle righe che stanno su una riga sola. */
.acc-signins dd, .acc-cc dd { margin-left: auto; }
.acc-signins dd { font-weight: 500; color: var(--fg-2); font-variant-numeric: tabular-nums; }
/* La bandiera sta nel rientro della riga: quando la riga va a capo (telefono), il seguito parte sotto il nome, non sotto la bandiera. */
.acc-signins dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-left: 26px; }
.acc-flag { flex: none; width: 18px; margin-left: -26px; font-size: 17px; line-height: 1; }
.acc-here { display: inline-block; padding: 0 8px; border: 1px solid var(--accent); border-radius: 999px; font: 600 11px/1.6 var(--sans); letter-spacing: .03em; color: var(--accent); vertical-align: 1px; white-space: nowrap; }
/* Ogni ingresso su una riga sola quando la colonna è larga almeno 400 px (2 novembre 2026, osservazione di Alessandro: in Chrome, in
   italiano, la data andava a capo): se non c'è posto si accorcia con i puntini solo il nome del browser (intero al passaggio del mouse),
   mai «Questo dispositivo» né la data. Più stretta (telefono, finestre piccole) la riga va a capo come prima. */
#acc-signins { container-type: inline-size; }
/* Più stretta (telefono, finestre piccole) ogni ingresso su due righe, uguali per tutti (2 novembre 2026, schermata di Alessandro dal
   cellulare: andava a capo solo la riga di «Questo dispositivo», con la data sola a destra): sopra bandiera, browser ed etichetta,
   sotto la data, allineata al nome. */
@container (max-width: 399.98px) {
  .acc-signins div { flex-direction: column; align-items: flex-start; gap: 3px; }
  .acc-signins dd { margin-left: 26px; }
}
@container (min-width: 400px) {
  .acc-signins div { flex-wrap: nowrap; }
  .acc-signins dt { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
  .acc-agent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acc-here { flex: none; }
}
/* Fatture e note di credito: una riga ciascuna (data, numero con il PDF, stato quando non è «pagata», importo); dalla colonna di 400 px
   in su mai a capo, come gli ingressi. Il numero è il link al PDF di Stripe. */
#acc-invoices { container-type: inline-size; }
#acc-invoices .sk { display: block; margin: 4px 0 14px; }
.acc-invoices dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.acc-day { font-variant-numeric: tabular-nums; }
.acc-doc { display: inline-flex; align-items: center; gap: 5px; font: 500 12.5px/1.2 var(--mono); color: var(--muted); text-decoration: none; white-space: nowrap; }
a.acc-doc:hover, a.acc-doc:focus-visible { color: var(--accent); }
.acc-doc svg { width: 14px; height: 14px; flex: none; }
.acc-invoices dd { display: flex; align-items: baseline; gap: 10px; margin-left: auto; }
.acc-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-chip { display: inline-block; padding: 0 8px; border: 1px solid var(--border-2); border-radius: 999px; font: 600 11px/1.6 var(--sans); letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.acc-chip.due { border-color: var(--d3); color: var(--d3); }
.acc-pay { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.acc-more { margin: 14px 0 0; }
@container (min-width: 400px) {
  .acc-invoices div, .acc-invoices dt { flex-wrap: nowrap; }
}
/* A destra i dati di fatturazione del cliente Stripe e i documenti; un titoletto per blocco, anche sopra le fatture, così le due colonne
   partono alla stessa altezza. */
.acc-label { margin: 0 0 8px; font: 600 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.acc-bill-who { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }
.acc-bill-side .form-note { margin: 0 0 14px; }
.acc-bill-side .banner-acts { margin: 0 0 24px; }
/* Senza i quadratini e i margini delle liste delle card (.card ul, .card li): link semplici, alla misura del resto della card. */
ul.acc-docs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acc-docs li { padding: 0; font-size: 14px; color: var(--muted); }
.acc-docs li::before { content: none; }
.acc-docs a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 3px; }
.acc-docs a:hover { text-decoration-color: currentColor; }
.acc-docs-note { color: var(--muted); font-size: 13px; }
/* «I tuoi dati»: due azioni, ognuna con la sua frase accanto (sotto, se non c'è posto), separate da un filo. */
.acc-data-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.acc-data-row + .acc-data-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-2); }
.acc-data-row .form-note { flex: 1 1 220px; margin: 0; }
.acc-data-row .side-delete { margin: 0; }
.acc-data-row[hidden] { display: none; }
/* Secondo indirizzo per gli avvisi: l'indirizzo, poi stato e comandi in piccolo. */
.acc-cc dd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.acc-cc-mail { overflow-wrap: anywhere; }
.acc-cc-state { font: 400 13px/1.45 var(--sans); color: var(--muted); }
.acc-cc-state.pending { color: var(--d3); }
.acc-cc-state.stopped, .acc-cc-state.bounced { color: var(--d2); }
.acc-cc .link-btn { padding: 0; font-size: 13px; }
.acc-cc dd > .link-btn { color: var(--accent); font-weight: 500; }
#cc-email { width: 100%; margin: var(--s-2) 0 0; }
#cc-error { margin: var(--s-2) 0 0; color: var(--d2); }
#acc-delete .side-delete { margin: 2px 0 14px; } /* centrato sui pulsanti delle lingue accanto */
#acc-delete > .form-note { margin: auto 0 0; }
/* Conferma della sospensione: due frasi, una per riga; la finestra un po' più larga di quella dell'eliminazione perché ci stiano. */
#pause-dialog { width: min(560px, calc(100vw - 32px)); }
#pause-dialog .pause-lines span { display: block; }
/* Pagina del link «Sospendi»: l'alternativa di My Defence prima del pulsante (21 ottobre 2026), in un riquadro discreto, con la
   stessa distanza dal testo sopra e dal pulsante sotto. */
.link-alt { margin: 0 0 var(--s-6); padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.link-alt a { color: var(--accent); font-weight: 600; }
.md-mail + .md-legend { margin-top: 0; }
@media (max-width: 1279px) {
  .md-mail .md-card, .md-mail .md-card:first-child { padding: 0; }
  .md-mail .md-card + .md-card { margin-top: 18px; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--border-2); }
}
@media (max-width: 759px) { .md-mail { padding: 18px 18px 14px; } .md-legend { padding: 0 19px; } }
/* Scelte non ancora disponibili (senza prodotti): leggibili, con il colore attenuato del sito invece della trasparenza. */
.md-seg button:disabled { opacity: 1; color: var(--muted); }
.md-seg button:disabled .md-seg-ico { opacity: .55; }
/* La prova su più righe (telefono): l'icona resta all'altezza della prima riga, come nell'invito a configurare My Defence. */
.md-sim { align-items: flex-start; }
.md-sim .md-ico { margin-top: 2px; }

/* Catalogo dell'area amministrativa: perché un produttore compare nella ricerca, e il prodotto accanto ai nomi solo numerici. */
.cat-why { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.cat-hint { color: var(--muted); }

/* Pillole di My Defence: il nome apre l'archivio in una nuova scheda; in modifica il menu della voce (26 ottobre 2026). */
button.md-chip-name { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
a.md-chip-name { color: inherit; text-decoration: none; }
.md-chip-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.md-chip-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* In modifica la voce si trascina in un'altra zona. */
.md-board.is-edit .md-chip[data-md-id], .md-board.is-edit .md-chip[data-md-id] .md-chip-name { cursor: grab; }
.md-chip.is-dragging { opacity: .3; }
.md-chip-ghost { width: auto; max-width: 320px; background: var(--surface-2); transform-origin: 30% 50%; }
/* Voce appena spostata, finché il server non risponde (26 ottobre 2026): nella zona d'arrivo, bordo tratteggiato e rotella al posto
   del punto; non si tocca. */
.md-chip.is-moving { pointer-events: none; border-style: dashed; border-color: var(--accent); }
.md-chip.is-moving .md-chip-dot { width: 12px; height: 12px; margin-inline: -2px; background: none; box-shadow: none; border: 2px solid var(--accent); border-right-color: transparent;
  animation: spin .7s linear infinite; }
.md-chip.is-moving .md-chip-x { visibility: hidden; }
.md-toast.is-busy { gap: 10px; }
@media (prefers-reduced-motion: reduce) { .md-chip.is-moving .md-chip-dot { animation-duration: 2.4s; } }
.md-menu-h { margin: 6px 10px 2px; font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Piè di pagina della dashboard (20 ottobre 2026): come quello della home, con cinque colonne (marchio, pagine della dashboard,
   Index, assistenza, note legali); fra 900 e 1100 px il marchio sta su una riga sopra le altre quattro. */
@media (min-width: 900px) { .foot-grid.app-foot-grid { grid-template-columns: repeat(4, auto); justify-content: space-between; } .app-foot-grid .foot-brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .foot-grid.app-foot-grid { grid-template-columns: minmax(0, 1fr) repeat(4, auto); justify-content: normal; } .app-foot-grid .foot-brand { grid-column: auto; } }
/* Sotto i 360 px una colonna sola: regola comune a tutti i piè di pagina, in .foot-grid (dal 26 ottobre 2026 qui, dal 2 novembre anche nel sito). */
.app-foot:empty { display: none; }
/* Footer in fondo alla finestra quando la pagina è corta (20 ottobre 2026, osservazione di Alessandro sull'Archivio: il footer
   risaliva sotto il campo di ricerca e sotto restava mezza pagina vuota). */
body:has(> #app-foot) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:has(> #app-foot) > main.panel { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
body:has(> #app-foot) > :is(header, footer) { flex: none; }

/* Voci che si aprono e si chiudono con un movimento breve (20 ottobre 2026, revisione visiva); niente movimento per chi lo ha chiesto
   al sistema. Dove il browser non sa animare l'altezza (::details-content, interpolate-size) si aprono di colpo, come prima. */
@media (prefers-reduced-motion: no-preference) {
  .panel { interpolate-size: allow-keywords; }
  .panel :is(details.item, details.rec)::details-content { block-size: 0; overflow-y: clip; transition: block-size .26s ease, content-visibility .26s allow-discrete; }
  .panel :is(details.item, details.rec)[open]::details-content { block-size: auto; }
}

/* ─── Lo schema dell'infrastruttura (21 ottobre 2026, richiesta di Alessandro: lo stile dell'immagine dell'email, blocchi semplici da
   rinominare, spostare e collegare, «un'esperienza piacevole e curata in ogni dettaglio») ───────────────────────────────────────
   Una lavagna con la luce morbida dell'immagine; i blocchi a file, uno per livello (public/app.js, mdTree); le linee nel loro SVG con
   il traffico che scende da Internet; in modifica una griglia di punti leggera, maniglie, punto per collegare, menu. */
:root { --board: #0B121C; --board-glow-a: rgba(61, 214, 245, .11); --board-glow-b: rgba(120, 110, 255, .09); --board-dots: rgba(255, 255, 255, .07); }
:root[data-theme="light"] { --board: #F1F5F8; --board-glow-a: rgba(10, 111, 134, .09); --board-glow-b: rgba(120, 110, 255, .07); --board-dots: rgba(16, 24, 32, .09); }
.md-board { position: relative; margin: 4px 0 0; padding: 22px 26px 34px; border-radius: 22px; border: 1px solid var(--border);
  background: radial-gradient(110% 80% at 90% -14%, var(--board-glow-a), transparent 58%), radial-gradient(90% 70% at -4% 112%, var(--board-glow-b), transparent 62%), var(--board);
  transition: border-color .25s ease, box-shadow .25s ease; }
.md-board.is-edit { border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
  background: radial-gradient(var(--board-dots) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(110% 80% at 90% -14%, var(--board-glow-a), transparent 58%), radial-gradient(90% 70% at -4% 112%, var(--board-glow-b), transparent 62%), var(--board); }
.md-board-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 24px; margin: 0 0 40px; } /* aria sopra Internet e la sua onda (21 ottobre 2026) */
.md-board-bar .md-legend { margin: 0; padding: 0; }
.md-board-bar .md-legend p { margin: 0; }
.md-edit-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.md-bar-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.btn.md-flow-btn { width: 38px; padding: 0; justify-content: center; } /* .btn.sm ha 16 px di margine interno: l'icona restava larga 4 px */
.md-flow-btn svg { flex: none; width: 16px; height: 16px; }
.md-flow-btn[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2)); }
@media (prefers-reduced-motion: reduce) { .md-flow-btn { display: none; } } /* lì il traffico non c'è mai */
.md-edit-ico, .md-help-ico { width: 16px; height: 16px; flex: none; }
.md-board-bar.is-edit { align-items: center; }
.md-board-bar.is-stacked { flex-wrap: wrap; } /* l'aiuto non sta su due righe accanto ai pulsanti: i pulsanti sotto, a destra (app.js, mdFitHelp) */
.md-board-bar.is-stacked .md-help { flex-basis: 100%; }
.md-help { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; } /* tutto lo spazio fino ai pulsanti: due righe in ogni lingua (21 ottobre 2026), righe piene (25 ottobre 2026) */
.md-help-ico { margin-top: 2px; color: var(--accent); } /* allineata alla prima riga (21 ottobre 2026, sua proposta) */
.md-tools { flex: none; display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.md-tools .btn[disabled] { opacity: .45; cursor: not-allowed; }

.md-map { position: relative; display: flex; flex-direction: column; padding: 0 14px; }
.md-level { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 22px; } /* senza z-index: nessuno strato per fila */
.md-level + .md-level { margin-top: calc(50px + 13px * var(--md-more, 0)); } /* più assi sopra la fila: più spazio (mdMoreAxes in app.js) */
.md-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 26px 16px; flex: var(--n) 1 0; min-width: 0; }
.md-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; transition: opacity .3s ease; }
.md-map.is-moving .md-links { opacity: 0; transition: none; }
.md-wires { opacity: .5; transition: opacity .3s ease; }
.md-wires path, .md-lit path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-map.is-entering .md-wires path { transition: stroke-dashoffset 1.15s cubic-bezier(.45, 0, .2, 1) .35s; }
.md-map.has-lit .md-wires { opacity: .2; }
.md-lit path { stroke-width: 2.5; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 75%, transparent)); }
.md-flow circle { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
.md-spark { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--accent)); }
.md-map.has-lit .md-flow { opacity: .45; }
.md-wire-live { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 6; animation: md-dash .5s linear infinite; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); }
@keyframes md-dash { to { stroke-dashoffset: -13; } }

/* Internet: la radice, con un'onda di radar che parte ogni tanto. */
.md-internet { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-2)); background: var(--surface); color: var(--fg); font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 7%, transparent), var(--shadow); transition: box-shadow .2s ease, transform .2s ease; }
.md-internet svg { width: 17px; height: 17px; color: var(--accent); }
.md-internet::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--accent); opacity: 0; animation: md-ping 4.2s ease-out 1.6s infinite; pointer-events: none; }
@keyframes md-ping { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.5, 1.9); } }

/* Il blocco. */
.md-zone { position: relative; z-index: 1; flex: 1 1 188px; max-width: 540px; min-width: 0; container-type: inline-size; padding: 14px 14px 13px; border-radius: 16px; border: 1px solid var(--border-2);
  background: var(--surface); box-shadow: var(--shadow); transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.md-zone.is-hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2)); }
.md-zone.hot { border-color: color-mix(in srgb, var(--c) 72%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 16px 36px -16px color-mix(in srgb, var(--c) 85%, transparent); }
.md-zone.hot.is-hover { border-color: var(--c); }
.md-zone.hot.l1, .md-zone.hot.l2 { animation: md-breathe 3.4s ease-in-out infinite; }
@keyframes md-breathe { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent), 0 18px 44px -14px var(--c); } }
.md-zone-head { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.md-zone-name { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 12px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); overflow-wrap: break-word; }
/* Nomi su una riga: fino a tre passi più stretti per livello (app.js, mdFitNames); se non basta, a capo bilanciato. */
.md-fit-probe .md-zone-name { white-space: nowrap; }
.md-zone-name.fit-1 { letter-spacing: .05em; }
.md-zone-name.fit-2 { font-size: 11px; letter-spacing: .03em; }
.md-zone-name.fit-3 { font-size: 10.5px; letter-spacing: .01em; }
.md-zone-name.fit-wrap { text-wrap: balance; }
.md-zone-head .toc-pill { margin-left: 0; }
.md-zone-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 10px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.md-zone-ico svg { width: 17px; height: 17px; }
.md-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0 0; }
.md-zone-hint { flex: 1 1 100%; margin: 0 0 3px; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.md-add-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px dashed var(--border-2); border-radius: 999px; background: none;
  color: var(--fg-2); font: 600 13px var(--sans); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.md-add-chip span { font-size: 15px; line-height: 1; }
.md-add-chip:hover, .md-add-chip:focus-visible { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.md-add-chip[hidden] { display: none; }
.md-add:empty { display: none; }
.md-add { margin-top: 10px; }
.md-search.is-right .md-sugg { left: auto; right: 0; }
/* Larghezza fissa (22 ottobre 2026, osservazione di Alessandro: «la finestra con i suggerimenti si apre in posizioni sempre diverse»):
   quella del campo, almeno 340 px, mai quella del testo delle voci; nella metà destra dello schema si allinea a destra (is-right). */
/* La ricerca aperta (21 ottobre 2026, segnalazione di Alessandro: «alcuni blocchi restano sopra i menu»): il suo blocco sopra tutti gli
   altri, di qualunque fila. Il campo è compatto come le pillole («veramente troppo grande»); il testo d'esempio lo sceglie app.js
   (mdFitPlaceholder) fra tre lunghezze, perché si legga per intero anche nei blocchi stretti. */
.md-zone:has(.md-search) { z-index: 6; }
.md-zone .md-search .field { min-height: 0; height: 34px; padding: 0 12px 0 13px; font-size: 14px; }
.md-zone .md-search .field:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.md-zone .md-search .field::placeholder { color: var(--muted); opacity: 1; }
.md-zone .md-search .field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 -3px 0 6px; border-radius: 50%; cursor: pointer;
  background: var(--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.md-zone .md-search .field::-webkit-search-cancel-button:hover { background-color: var(--fg); }
.md-zone .md-search .field:placeholder-shown::-webkit-search-cancel-button { display: none; }
@container (max-width: 250px) { .md-zone .md-search .field { font-size: 13px; padding: 0 10px 0 11px; } } /* blocchi stretti: «Produttore o prodotto» per intero */
@media (pointer: coarse) { .md-zone .md-search .field { height: 40px; font-size: 16px; } } /* 16 px: niente ingrandimento automatico su iPhone */

/* Ingresso: Internet, poi un livello alla volta; le linee si disegnano da Internet in giù. */
.md-map.is-entering .md-internet, .md-map.is-entering .md-zone { animation: md-rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--depth, 0) * 110ms); }
@keyframes md-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.md-zone.is-new { animation: md-born .9s ease-out; }
@keyframes md-born { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent), var(--shadow); } 100% { box-shadow: 0 0 0 14px transparent, var(--shadow); } }

/* Modifica. */
.md-board.is-edit .md-zone { cursor: grab; }
.md-board.is-edit .md-zone:not(.hot) { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 30%, var(--border-2)); }
.md-grip { flex: none; display: grid; place-items: center; width: 14px; margin-right: -4px; color: var(--muted); }
.md-grip svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.md-zone-name.is-edit { padding: 2px 0; border-bottom: 1px dashed transparent; outline: none; cursor: text; }
/* Descrizione del blocco (21 ottobre 2026, richiesta di Alessandro): in modifica sotto il nome, da scrivere come il nome; vuota,
   il suo testo d'esempio al posto del testo. */
.md-zone-desc { position: relative; min-height: 1.45em; margin: 8px 0 0; padding: 1px 0; font-size: 13px; line-height: 1.45; color: var(--muted);
  overflow-wrap: break-word; text-wrap: pretty; border-bottom: 1px dashed transparent; outline: none; cursor: text; }
.md-zone-desc:hover { border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.md-zone-desc:focus { border-bottom: 1px solid var(--accent); color: var(--fg-2); }
.md-zone-desc:focus::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.md-zone-desc.is-empty::before { content: attr(data-placeholder); position: absolute; left: 0; top: 1px; color: var(--muted); opacity: .7; font-style: italic; pointer-events: none; }
.md-zone-desc.is-empty:focus::before { opacity: .45; }
.md-zone-name.is-edit:hover { border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.md-zone-name.is-edit:focus { border-bottom: 1px solid var(--accent); cursor: text; }
.md-zone-name.is-edit:focus::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
button.md-zone-ico { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
button.md-zone-ico:hover, button.md-zone-ico:focus-visible { transform: scale(1.06); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
.md-zone-more { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fg-2); cursor: pointer; }
.md-zone-more:hover, .md-zone-more:focus-visible { color: var(--fg); background: color-mix(in srgb, var(--fg) 9%, transparent); outline: none; }
.md-zone-more svg { width: 18px; height: 18px; }
.md-port { position: absolute; z-index: 3; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; padding: 0; border-radius: 50%; border: 2px solid var(--accent);
  background: var(--surface); cursor: crosshair; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.md-port:hover, .md-port:focus-visible { transform: scale(1.3); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
.md-zone.is-dragging { opacity: .3; transform: none; box-shadow: none; animation: none; }
.md-zone.is-linking .md-port { transform: scale(1.3); background: var(--accent); }
.md-zone.is-forbidden { opacity: .38; filter: saturate(.5); }
.md-zone.is-drop-in, .md-internet.is-drop-in { transform: translateY(-3px) scale(1.015); border-color: var(--accent); border-style: solid;
  box-shadow: 0 0 0 2px var(--accent), 0 0 38px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.md-ghost { position: fixed; left: 0; top: 0; z-index: 9999; margin: 0; pointer-events: none; border-style: solid !important; border-color: var(--accent) !important;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .65), 0 0 0 1px var(--accent) !important; animation: none !important; transition: none; }
body.md-dragging, body.md-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
body.md-dragging .md-tip, body.md-dragging #dl-tip { display: none !important; } /* niente suggerimenti mentre si trascina */
.md-insert { position: absolute; z-index: 4; width: 3px; margin-left: -1px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); pointer-events: none; animation: md-pop .12s ease-out; }
.md-droplabel { position: absolute; z-index: 5; transform: translate(-50%, -100%); padding: 5px 11px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: 600 12.5px var(--sans); white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); animation: md-pop .12s ease-out; }
@keyframes md-pop { from { opacity: 0; transform: translate(-50%, -90%) scale(.96); } }
.md-insert { animation-name: md-fade; } @keyframes md-fade { from { opacity: 0; } }

/* Finestrelle: menu del blocco, icone, nuovo blocco. */
.md-pop { position: absolute; z-index: 8000; min-width: 230px; max-width: min(360px, calc(100vw - 16px)); padding: 8px; border-radius: 14px; border: 1px solid var(--border-2);
  background: var(--surface); box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .04); animation: md-drop .14s ease-out; }
@keyframes md-drop { from { opacity: 0; transform: translateY(-4px); } }
.md-pop.is-above { animation-name: md-rise-pop; } @keyframes md-rise-pop { from { opacity: 0; transform: translateY(4px); } }
:root[data-theme="light"] .md-pop { box-shadow: 0 22px 50px -22px rgba(16, 24, 32, .35), 0 0 0 1px rgba(16, 24, 32, .04); }
.md-pop-h { margin: 4px 6px 10px; font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.md-menu { display: grid; gap: 2px; }
.md-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--fg); font: 500 14px var(--sans); text-align: left; cursor: pointer; }
.md-menu button:hover:not(:disabled), .md-menu button:focus-visible { background: var(--accent-soft); outline: none; }
.md-menu button:disabled { opacity: .4; cursor: default; }
.md-menu button svg { flex: none; width: 17px; height: 17px; color: var(--muted); }
.md-menu button em { margin-left: auto; padding-left: 14px; font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.md-menu .is-danger, .md-menu .is-danger svg { color: var(--d2); }
.md-menu hr { margin: 5px 6px; border: 0; border-top: 1px solid var(--border); }
.md-menu-list { max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain; }
.md-menu [aria-checked="true"] { color: var(--accent); }
.md-menu .md-check { margin-left: auto; color: var(--accent) !important; }
/* Collegamenti (25 ottobre 2026): le voci che non si possono scegliere (l'ultimo collegamento, oltre il massimo) restano leggibili, con
   il perché nel suggerimento; sotto il titolo, quante zone si possono scegliere. */
.md-menu button[aria-disabled="true"] { opacity: .45; cursor: default; }
.md-menu button[aria-disabled="true"]:hover { background: none; }
.md-pop-note { margin: -6px 6px 10px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
/* Collegamenti in più: sullo schema le linee tratteggiate; sul telefono, dove le linee non ci sono, una riga sotto il nome. Per i
   lettori di schermo sempre. */
.md-also { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.md-icons { display: grid; grid-template-columns: repeat(5, 42px); gap: 6px; padding: 0 2px 2px; }
.md-icon-opt { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 11px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--fg-2); cursor: pointer;
  transition: transform .12s ease, color .12s ease, border-color .12s ease; }
.md-icon-opt svg { width: 19px; height: 19px; }
.md-icon-opt:hover, .md-icon-opt:focus-visible { transform: translateY(-1px); color: var(--fg); border-color: color-mix(in srgb, var(--accent) 55%, var(--border-2)); outline: none; }
.md-icon-opt.is-on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: 0 0 0 1px var(--accent); }
/* Nuovo blocco (21 ottobre 2026, segnalazione di Alessandro: «campi enormi», pulsanti e testi non allineati e attaccati ai bordi):
   16 px di margine interno; titolo, etichette, campi, icone e pulsanti sugli stessi bordi a sinistra e a destra; campi alti 38 px;
   icone che riempiono la riga; i due pulsanti larghi metà ciascuno. */
.md-pop.md-pop-new { padding: 16px; }
.md-blockform { display: grid; gap: 14px; width: min(296px, calc(100vw - 48px)); padding: 0; }
.md-blockform .md-pop-h { margin: 0 0 -2px; }
.md-pop.md-pop-icons { padding: 14px; }
.md-pop-icons .md-pop-h { margin: 0 0 10px; }
.md-pop-icons .md-icons { padding: 0; }
.md-blockform-l { display: grid; gap: 7px; margin: 0; font-size: 12.5px; color: var(--muted); }
.md-blockform-l .field { margin: 0; min-height: 0; height: 38px; padding: 0 14px; font-size: 14px; }
.md-blockform-l select.field { padding-right: 36px; background-position: right 13px center; }
/* Nota della zona (25 ottobre 2026): pulsante a icona accanto ad «Aggiungi», pieno e colorato quando la nota c'è; la finestrella come
   quella di «Nuova zona». */
.md-note-chip { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px dashed var(--border-2); border-radius: 999px;
  background: none; color: var(--muted); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.md-note-chip svg { width: 15px; height: 15px; }
.md-note-chip:hover, .md-note-chip:focus-visible { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.md-note-chip.has-note { border-style: solid; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.md-pop.md-pop-notepad { padding: 16px; }
.md-noteform { display: grid; gap: 10px; width: min(328px, calc(100vw - 48px)); }
.md-noteform .md-pop-h { margin: 0; }
.md-noteform textarea.field { margin: 0; min-height: 132px; padding: 10px 12px; border-radius: 12px; font: 14px/1.5 var(--sans); resize: vertical; }
.md-note-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.md-note-count { flex: none; font-variant-numeric: tabular-nums; }
.md-blockform .md-icons { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0; }
.md-blockform .md-icon-opt { width: auto; height: auto; aspect-ratio: 1; }
.md-blockform-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
/* «Lo usi? Aggiungilo a My Defence» (31 ottobre 2026): il «+» accanto al prodotto, la finestrella e il modulo in cima a My Defence. */
.md-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 8px; padding: 0; vertical-align: 2px; border-radius: 50%; border: 1px solid var(--border-2); background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.md-plus svg { width: 14px; height: 14px; }
.md-plus:hover, .md-plus:focus-visible, .md-plus[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.md-plus.is-busy { opacity: .5; cursor: progress; }
.md-plus-wait { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; font-size: 14px; color: var(--muted); }
.md-pop.md-pop-plus { padding: 16px; }
.md-plusform { display: grid; gap: 12px; width: min(340px, calc(100vw - 48px)); }
.md-plusform .md-pop-h, .md-plus-card .md-pop-h { margin: 0; }
.md-plus-row { display: grid; gap: 6px; }
.md-plus-name { display: flex; align-items: flex-start; gap: 8px; font: 500 14px/1.4 var(--sans); color: var(--fg); cursor: pointer; }
.md-plus-name input { margin: 2px 0 0; accent-color: var(--accent); }
.md-plus-z { padding-left: 24px; }
.md-plus-none { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.md-plus-card { margin: 0 0 var(--s-6); padding: 18px 20px; }
.md-plus-card .kicker { margin: 0 0 10px; }
.md-plus-card .md-plusform { width: auto; max-width: 440px; }
.md-blockform-actions .btn { width: 100%; justify-content: center; padding: 0 12px; }
/* La finestrella del «+» (2 novembre 2026, osservazione di Alessandro: menu e pulsanti enormi e attaccati al bordo destro): il modulo è
   largo quanto la finestrella meno i suoi margini (prima era più largo e finiva sul bordo), il menu delle zone e i pulsanti sono nella
   misura del testo, i pulsanti a sinistra, sulla colonna delle caselle (i menu hanno larghezze diverse: a destra non c'è un bordo comune). */
.md-pop.md-pop-plus { width: min(340px, calc(100vw - 16px)); padding: 16px 18px; }
.md-pop-plus .md-plusform { width: auto; gap: 14px; }
.md-pop-plus .md-plus-row { gap: 8px; }
.md-pop-plus .md-plus-z { padding-left: 26px; }
.md-pop-plus select.md-plus-zone { width: auto; max-width: 100%; min-height: 34px; padding: 0 34px 0 12px; border-radius: 10px; font-size: 13.5px; background-position: right 11px center; background-size: 12px 12px; }
.md-pop-plus .md-blockform-actions { display: flex; justify-content: flex-start; gap: 8px; }
.md-pop-plus .md-blockform-actions .btn { width: auto; min-height: 34px; padding: 0 14px; font-size: 13.5px; }
/* La finestra di conferma non mostra il bordo di fuoco quando si clicca sul suo sfondo. */
dialog.md-confirm:focus, dialog.md-confirm:focus-visible { outline: none; }

/* Messaggio in basso, con «Annulla». */
.md-toast { position: fixed; left: 50%; bottom: 26px; z-index: 9500; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 11px 12px 11px 18px; border-radius: 999px;
  background: #EDF1F5; color: #0A1017; font: 500 14px var(--sans); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.md-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.md-toast-undo { padding: 5px 10px; border: 0; border-radius: 999px; background: rgba(10, 111, 134, .12); color: #0A6F86; font: 700 13.5px var(--sans); cursor: pointer; }
.md-toast-undo:hover { background: rgba(10, 111, 134, .2); }
:root[data-theme="light"] .md-toast { background: #121A26; color: #EDF1F5; }
:root[data-theme="light"] .md-toast-undo { background: rgba(61, 214, 245, .14); color: #3DD6F5; }
.md-confirm p:last-of-type { margin-bottom: var(--s-5); }

/* Disposizione libera (25 ottobre 2026, richiesta di Alessandro: larghezza scelta per ogni zona e la massima libertà nel disporle).
   Da tablet in su ogni fila è una griglia con le stesse colonne (--t, in sesti di colonna: app.js, mdGrid) e ogni zona ha la sua colonna
   e la sua larghezza (--gs, --gn); 11 px di margine per lato lasciano 22 px fra le zone, come prima, e tengono i bordi allineati da una
   fila all'altra. Colonne troppo strette (is-tight): la disposizione di prima, con le zone che vanno a capo. */
@media (min-width: 760px) {
  .md-map:not(.is-tight) .md-level:not(.md-level-0) { display: grid; grid-template-columns: repeat(var(--t, 24), minmax(0, 1fr)); gap: 0; align-items: start; }
  .md-map:not(.is-tight) .md-level:not(.md-level-0) .md-group { display: contents; }
  .md-map:not(.is-tight) .md-level:not(.md-level-0) .md-zone { grid-row: 1; grid-column: var(--gs, auto) / span var(--gn, 6); margin: 0 11px; max-width: none; }
}
.md-map.is-tight .md-resize { display: none; }
/* La maniglia della larghezza: sul bordo destro, si vede passando sulla zona; accesa mentre si trascina. */
.md-resize { position: absolute; z-index: 3; top: 50%; right: -8px; display: grid; place-items: center; width: 16px; height: 48px; margin-top: -24px; cursor: ew-resize; touch-action: none; }
.md-resize::before { content: ''; width: 4px; height: 28px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 60%, var(--border-2)); opacity: 0; transition: opacity .15s ease, background-color .15s ease, box-shadow .15s ease; }
.md-zone:hover .md-resize::before, .md-resize.is-on::before { opacity: 1; }
.md-resize:hover::before, .md-resize.is-on::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
body.md-sizing, body.md-sizing * { cursor: ew-resize !important; user-select: none; -webkit-user-select: none; }
body.md-sizing #dl-tip { display: none !important; }
/* Il posto libero nella fila mentre si trascina una zona. */
.md-slot { position: absolute; z-index: 4; border: 2px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); pointer-events: none; animation: md-fade .12s ease-out; }
/* Zona ridotta: solo la testa (icona, nome, numero dei prodotti) e l'etichetta. */
.md-zone-min { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.md-zone-min svg { width: 16px; height: 16px; transition: transform .2s ease; }
.md-zone-min:hover, .md-zone-min:focus-visible { color: var(--fg); background: color-mix(in srgb, var(--fg) 9%, transparent); outline: none; }
.md-zone.is-min .md-zone-min svg { transform: rotate(-90deg); }
.md-zone.is-min .md-chips, .md-zone.is-min .md-zone-desc, .md-zone.is-min .md-add { display: none; }
.md-zone.is-min { padding-bottom: 14px; }
/* Etichetta della zona: piccola, sotto il titolo, senza colori (il colore del bordo è il DEFCON). */
.md-tag { margin: 9px 0 0; line-height: 1; }
.md-tag span, .md-tag button { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-2);
  background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg-2); font: 600 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-tag button { cursor: pointer; }
.md-tag button:hover, .md-tag button:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.md-tag-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.md-tag-pick { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-2); background: none; color: var(--fg-2); font: 600 12.5px var(--sans); cursor: pointer; }
.md-tag-pick:hover, .md-tag-pick:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.md-tagform .field { margin: 0; min-height: 0; height: 38px; padding: 0 14px; font-size: 14px; }
/* Aree: un riquadro leggero intorno alle zone, dietro le linee, con il nome in una pillola sul bordo in alto. */
.md-areas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.md-area { position: absolute; border: 1px dashed color-mix(in srgb, var(--fg) 24%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.md-area-label { position: absolute; top: 0; left: 18px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 36px); padding: 4px 10px 4px 8px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); background: var(--surface); color: var(--fg-2);
  font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; }
.md-area-label svg { flex: none; width: 13px; height: 13px; color: var(--accent); }
.md-area-label span { overflow: hidden; text-overflow: ellipsis; }
button.md-area-label { z-index: 2; cursor: pointer; }
button.md-area-label:hover, button.md-area-label:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.md-area-tag { display: none; }
.md-area-zones { display: grid; gap: 2px; max-height: 236px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--border); border-radius: 12px; }
.md-check { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--fg); font-size: 14px; cursor: pointer; }
.md-check:hover { background: var(--accent-soft); }
.md-check input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.md-check em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.md-area-err { margin: -4px 0 0; font-size: 12.5px; color: var(--d2); }
.md-danger-btn { color: var(--d2); }
/* «Disposizione» di una zona: larghezza (automatica o in colonne), posizione nella fila, fila. */
.md-pop.md-pop-layout { padding: 16px; }
.md-layout { display: grid; gap: 8px; width: min(320px, calc(100vw - 48px)); }
.md-layout .md-pop-h { margin: 0 0 4px; }
.md-layout-l { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.md-seg.md-seg-sm { flex-wrap: wrap; }
.md-seg.md-seg-sm button { min-width: 38px; justify-content: center; padding: 6px 10px; font-size: 13px; }
.md-seg.md-seg-sm button:disabled { opacity: .35; cursor: not-allowed; }
.md-layout-row { display: flex; flex-wrap: wrap; gap: 6px; }
.md-layout-row .btn { gap: 6px; }
.md-layout-row .btn svg { width: 15px; height: 15px; }
/* Barra della modifica: «Annulla» e «Ripeti» come pulsanti a icona; esportazione accanto alla pausa del traffico. */
.btn.sm.md-hist { width: 34px; padding: 0; justify-content: center; }
.md-hist svg, .md-export-btn svg { flex: none; width: 17px; height: 17px; }
.md-hist:disabled { opacity: .35; cursor: default; }
.md-area-btn { gap: 7px; }
.md-area-btn svg { width: 15px; height: 15px; }
/* Esportazione (app.js, mdCanvas): per un istante senza i pulsanti delle zone, così le zone escono compatte. */
.md-board.md-exporting .md-add-chip, .md-board.md-exporting .md-note-chip, .md-board.md-exporting .md-zone-min, .md-board.md-exporting .md-add, .md-board.md-exporting .md-chip-x { display: none; }
.md-board.md-exporting .md-chips:not(:has(.md-chip, .md-zone-hint)) { display: none; }

/* Telefono: lo schema è un elenco ad albero, in ordine di lettura, ogni blocco rientrato quanto il suo livello e agganciato a quello
   sopra con un gomito. Si modifica dal menu «⋯» (niente trascinamento sul telefono). */
@media (max-width: 759px) {
  .md-board { padding: 16px 12px 20px; border-radius: 18px; }
  .md-board-bar { flex-direction: column; align-items: stretch; margin-bottom: 18px; }
  .md-board-bar .md-bar-tools { align-self: flex-start; }
  .md-flow-btn { display: none; } /* sul telefono niente linee né traffico */
  .md-tools { margin-left: 0; }
  .md-tools .btn { flex: 1 1 auto; justify-content: center; } /* righe piene: «Fine» da solo su tutta la riga, se va a capo */
  .md-map { gap: 12px; padding: 0; }
  .md-level, .md-group { display: contents; }
  .md-internet { order: -1; align-self: flex-start; }
  .md-zone { order: var(--dfs); flex: none; max-width: none; margin-left: calc((var(--depth) - 1) * 16px + 18px); }
  .md-zone::before { content: ''; position: absolute; left: -15px; top: -13px; width: 13px; height: 30px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-bottom-left-radius: 9px; }
  .md-grip, .md-port, .md-resize, .md-export-btn { display: none; }
  .md-board.is-edit .md-zone { cursor: default; }
  .md-area-tag { display: block; margin: 7px 0 0; font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* l'area, al posto dei riquadri */
  .md-also { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .md-zone, .md-zone.hot.l1, .md-zone.hot.l2, .md-internet::after, .md-wire-live, .md-zone.is-new { animation: none !important; transition: none; }
}

/* Blocchi stretti (cinque in fila): in testa icona, numero e menu, sotto il nome su tutta la larghezza; nelle pillole il produttore va
   sotto il prodotto, invece di troncarlo. */
@container (max-width: 300px) {
  .md-zone .md-zone-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "grip ico . pill min more" "name name name name name name"; column-gap: 8px; row-gap: 10px; }
  .md-zone .md-zone-min { grid-area: min; }
  .md-zone .md-grip { grid-area: grip; margin-right: 0; }
  .md-zone .md-zone-ico { grid-area: ico; }
  .md-zone .toc-pill { grid-area: pill; }
  .md-zone .md-zone-more { grid-area: more; margin-right: -4px; }
  .md-zone .md-zone-name { grid-area: name; overflow-wrap: break-word; }
}
@container (max-width: 250px) {
  .md-zone .md-chip { border-radius: 13px; align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
  .md-zone .md-chip-name { flex-direction: column; align-items: flex-start; gap: 1px; }
  .md-zone .md-chip-v { font-size: 12px; }
  .md-zone .md-chip-name :is(b, .md-chip-v) { max-width: 100%; }
}

/* Invito delle pagine CVE (lib/cvepage.js): chi ha fatto l'accesso vede quello degli abbonati, senza «Prova gratis»; dove la CVE non è
   nei briefing, nessun invito (27 ottobre 2026). Senza JavaScript la classe «authed» non c'è: resta l'invito per tutti. */
:root:not(.authed) .cve-cta .cta-member { display: none; }
.authed .cve-cta .cta-guest, .authed .cve-cta.cta-guest { display: none; }

/* ─── Partenza guidata di My Defence (30 ottobre 2026): tre passi al posto della mappa vuota ─────────────────────────────────── */
.wiz { max-width: 880px; margin: 4px 0 28px; padding: 26px 28px 24px; border: 1px solid var(--border-2); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
/* Sui telefoni la testa va su due righe: il testo sopra, i pallini e «Disegno da solo» sotto (31 ottobre 2026). */
.wiz-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.wiz-kicker { margin: 0; color: var(--muted); font: 600 13px var(--sans); letter-spacing: .02em; }
/* I tre passi (31 ottobre 2026): pallini numerati uniti da un trattino; fatto con la spunta, in corso pieno, da fare vuoto. */
.wiz-dots { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.wiz-dots li { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--border-2); border-radius: 50%; color: var(--muted); font: 700 12px/1 var(--sans); }
.wiz-dots li + li { margin-left: 20px; }
.wiz-dots li + li::before { content: ''; position: absolute; top: 50%; right: calc(100% + 4px); width: 12px; height: 1.5px; margin-top: -.75px; background: var(--border-2); }
.wiz-dots .is-now { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.wiz-dots .is-done { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); color: var(--accent); }
.wiz-dots .is-done + li::before { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.wiz-dots svg { width: 13px; height: 13px; stroke-width: 3; }
.wiz-skip { margin-left: auto; }
.wiz-skip svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .wiz-kicker { flex-basis: 100%; }
  .wiz-dots li { width: 22px; height: 22px; font-size: 11.5px; }
  .wiz-dots li + li { margin-left: 16px; }
  .wiz-dots li + li::before { width: 8px; }
  .wiz .wiz-skip { padding: 0 12px; gap: 6px; font-size: 13.5px; } /* .wiz davanti: più forte di .btn.sm */
}
/* .wiz davanti: più forte di ":lang(de) h2", che in tedesco lo portava a 42 px come i titoli delle pagine (31 ottobre 2026); intero, senza sillabazione. */
.wiz .wiz-title { margin: 10px 0 8px; font-size: 24px; line-height: 1.25; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
.wiz .wiz-title:focus { outline: none; } /* riceve il fuoco a ogni cambio di passo, senza essere un comando */
.wiz-nw { white-space: nowrap; }
.wiz-note { margin: 0 0 18px; color: var(--fg-2); text-wrap: pretty; } /* tutta la larghezza del riquadro: con 70ch «KEV catalogue.» finiva da solo sulla seconda riga (31 ottobre 2026) */
.wiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 0 0 22px; }
.wiz-v { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface-2); color: var(--fg); font: 600 14.5px var(--sans); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.wiz-v::before { content: ''; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--border-2); border-radius: 5px; }
.wiz-v:hover { border-color: var(--accent); }
.wiz-v[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wiz-v[aria-pressed="true"]::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.wiz-find { display: grid; gap: 10px; margin: 0 0 22px; }
.wiz-label { font: 600 14px var(--sans); color: var(--fg); }
.wiz-res { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-res:empty { display: none; }
.wiz-hit { padding: 7px 12px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface-2); color: var(--fg); font: 500 14px var(--sans); cursor: pointer; }
.wiz-hit:hover { border-color: var(--accent); }
.wiz-paste summary { width: max-content; color: var(--accent); font: 600 14px var(--sans); cursor: pointer; }
.wiz-paste[open] summary { margin-bottom: 10px; }
.wiz-paste textarea { width: 100%; margin: 0 0 10px; resize: vertical; font: 14px/1.5 var(--sans); }
.wiz-miss { margin: 10px 0 0; color: var(--warn); }
.wiz-extra { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
/* Fra l'ultimo blocco e la linea dei pulsanti la stessa distanza in ogni passo (31 ottobre 2026): prima 22, 18 o 14 px. */
.wiz > :has(+ .wiz-foot) { margin-bottom: 0; }
.wiz-count { color: var(--muted); font-size: 14px; }
.wiz-vend { margin: 0 0 18px; padding: 0; }
.wiz-vend h3 { margin: 0 0 6px; font-size: 16px; }
.wiz-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.wiz-row:last-child { border-bottom: 0; }
.wiz-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.wiz-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.wiz-all .wiz-check { color: var(--fg-2); }
.wiz-pname { font-weight: 600; }
.wiz-zone { width: auto; min-width: 210px; max-width: 100%; min-height: 38px; padding: 6px 10px; font-size: 14px; }
.wiz-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 0 0 14px; }
.wiz-mode { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface-2); color: var(--fg); font: 14.5px var(--sans); text-align: left; cursor: pointer; }
.wiz-mode:hover { border-color: var(--accent); }
.wiz-mode[aria-checked="true"] { border-color: color-mix(in srgb, var(--accent) 75%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.wiz-mode-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wiz-mode-note { color: var(--fg-2); line-height: 1.5; text-wrap: pretty; }
.wiz-mode-note > span { display: block; }
.wiz-badge { padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 11.5px var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.wiz-done { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--fg); font-weight: 600; }
.wiz-done::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 560px) {
  .wiz { padding: 20px 16px 18px; border-radius: 14px; }
  .wiz .wiz-title { font-size: 21px; }
  .wiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiz-v { min-height: 58px; }
  .wiz-zone { min-width: 0; width: 100%; }
}

/* Prova senza metodo di pagamento (30 ottobre 2026, osservazione di Alessandro: la barra era troppo alta e il pulsante troppo grande): una
   riga sottile con un punto e un pulsante piccolo, colore calmo; l'ambra solo negli ultimi 2 giorni. Il testo breve quando quello completo
   non sta su una riga (fitTrial in public/app.js). */
.banner.trial { display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.banner.trial::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.banner.trial.soon { border-color: color-mix(in srgb, var(--d3) 55%, transparent); }
.banner.trial.soon::before { background: var(--d3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--d3) 22%, transparent); }
.trial-text { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-short { display: none; }
.banner.trial.is-short .trial-full { display: none; }
.banner.trial.is-short .trial-short { display: inline; }
.banner.trial.is-stacked { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px 10px 16px; }
.banner.trial.is-stacked .trial-text { flex-basis: calc(100% - 20px); }
.banner.trial.is-stacked .trial-cta { margin-left: 20px; }
.trial-cta { flex: none; padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; background: none; color: var(--accent); font: 600 13px var(--sans); white-space: nowrap; cursor: pointer; }
.trial-cta:hover { background: var(--accent-soft); }
.wiz-zone-l { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; color: var(--muted); font: 600 12.5px var(--sans); letter-spacing: .02em; }
.wiz-zone-l .wiz-zone { color: var(--fg); font-weight: 500; letter-spacing: 0; }
@media (max-width: 560px) { .wiz-zone-l { width: 100%; } }
.wiz-morebtn { padding: 4px 0; border: 0; background: none; color: var(--accent); font: 600 14px var(--sans); cursor: pointer; }
.wiz-morebtn:hover { color: var(--accent-2); }
.wiz-more { display: grid; gap: 8px; justify-content: stretch; padding: 8px 0; }
.wiz-more .field { max-width: 420px; }