:root {
  --nero: #0A0A0B; --inchiostro: #111113; --tenue: #6B6B70; --riga: #E6E6E3; --carta: #FFFFFF; --fondo: #FAFAF8;
  --blu: #3B4BE0; --arancio: #F2551D; --verde: #15803D; --verde-f: #E7F5EC; --arancio-f: #FFF0E8; --giallo-f: #FFF8DB;
  --testo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --titoli: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --morbido: #F1F1EF; --testo2: #3F3F45; --griglia: #EDEDEA; --barra: #C9C9C5; --su-scuro: #FFFFFF; --vetro: rgba(255, 255, 255, .86);
  color-scheme: light;
}
/* tema scuro: stessi componenti, colori invertiti (scelto con il bottone in alto, ricordato nel browser) */
:root[data-tema="scuro"] {
  --nero: #F2F2F0; --inchiostro: #EDEDEB; --tenue: #9C9CA3; --riga: #2A2A2F; --carta: #151517; --fondo: #0E0E10;
  --blu: #7D8BFF; --arancio: #FF6B35; --verde: #34C46E; --verde-f: #12281B; --arancio-f: #2B1A12; --giallo-f: #29230F;
  --morbido: #222226; --testo2: #C8C8CE; --griglia: #232327; --barra: #3B3B42; --su-scuro: #111113; --vetro: rgba(21, 21, 23, .86);
  color-scheme: dark;
}
html.cambio-tema, html.cambio-tema * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--inchiostro); font: 15px/1.5 var(--testo); background: var(--carta); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--titoli); margin: 0; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0 0 .7em; }
a { color: inherit; }
canvas { display: block; width: 100%; image-rendering: pixelated; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.tenue { color: var(--tenue); }
.nascosta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1FA37F; flex: none; }
.punto.leva-urgency { background: var(--arancio); } .punto.leva-black_friday { background: var(--inchiostro); }

.logo { display: inline-flex; align-items: center; gap: 8px; font: 700 20px var(--titoli); letter-spacing: -.02em; text-decoration: none; color: inherit; }
.logo svg { fill: currentColor; }
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--testo); text-decoration: none; cursor: pointer;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; transition: transform .08s, background .15s, border-color .15s;
}
.pulsante:active { transform: translateY(1px); }
.pulsante.bianco { background: #fff; color: #000; }
.pulsante.nero { background: var(--inchiostro); color: var(--su-scuro); } .pulsante.nero:hover { background: #2A2A2E; }
.pulsante.bordo { border-color: var(--riga); background: var(--carta); color: var(--inchiostro); } .pulsante.bordo:hover { border-color: #BDBDB8; }
.pulsante.grande { font-size: 17px; padding: 15px 30px; border-radius: 10px; }
.pulsante.metallo { color: #0B0B0C; background: linear-gradient(135deg, #B9BAC4 0%, #F2F2F6 45%, #9C9DA8 100%); border-color: #D9D9E0; }
.pulsante.metallo:hover { background: linear-gradient(135deg, #C9CAD3 0%, #FFFFFF 45%, #ACADB8 100%); }
.pulsante.scuro { color: #fff; background: #151517; border-color: #2B2B30; } .pulsante.scuro:hover { border-color: #55555C; }

/* ------------------------------------------------------------------ home */
.scura { background: #000; color: #fff; height: 100vh; min-height: 620px; overflow: hidden; position: relative; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 22px 24px; }
.nav-centro { display: flex; gap: 30px; }
.nav-centro a { color: #A1A1AA; text-decoration: none; font-size: 15px; } .nav-centro a:hover { color: #fff; }
.eroe { text-align: center; padding: 6vh 20px 0; position: relative; z-index: 2; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(120, 120, 140, .16), transparent 70%); }
.eroe h1 { font-size: clamp(76px, 14.5vw, 176px); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.motto { font: 500 clamp(19px, 2.4vw, 30px)/1.32 var(--titoli); letter-spacing: -.015em; color: #E4E4E7; max-width: 25em; margin: 24px auto 32px; text-wrap: balance; }
.sotto-riga { position: relative; white-space: nowrap; }
.sotto-riga svg { position: absolute; left: -4%; right: -4%; bottom: -.22em; width: 108%; height: .34em; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.azioni { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
#folla { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; -webkit-mask-image: linear-gradient(#0000, #000 34%); mask-image: linear-gradient(#0000, #000 34%); }

/* --------------------------------------------------------------- console */
.nav.chiara { max-width: none; padding: 16px 44px; }
.mono-link { font: 500 14px var(--mono); text-decoration: none; } .mono-link:hover { text-decoration: underline; }
.console { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 7vw; max-width: 1340px; margin: 0 auto; padding: 24px 44px 60px; align-items: center; }
.etichetta-m { font-size: 12.5px; color: #9A9A9F; margin: 0 0 22px; } .etichetta-m.spazio { margin-top: 44px; }
.console h2 { font-size: 34px; font-weight: 700; margin-bottom: 14px; }
.passi-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.passi-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
.passi-lista span { font: 600 15px var(--mono); color: #C4C4C8; padding-top: 1px; }
.passi-lista b { font: 700 16.5px var(--titoli); } .passi-lista p { margin: 2px 0 0; font-size: 14px; color: var(--testo2); }
.scatola { border: 1px solid #D4D4D0; padding: 26px 28px 0; }
.scatola.sopra { background: var(--fondo); }
.scatola-riga { display: flex; justify-content: space-between; font-size: 12.5px; color: #5E5E63; margin-bottom: 12px; }
.file-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--fondo); border: 1px solid var(--riga); padding: 13px 16px; font-size: 14px; }
.quadro { border: 1px solid var(--barra); width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; font: 14px var(--mono); flex: none; }
.quadro:hover { background: var(--inchiostro); color: var(--su-scuro); }
.divisore { display: flex; align-items: center; gap: 12px; color: #B5B5B8; font-size: 12px; margin: 26px -18px; }
.divisore::before, .divisore::after { content: ""; flex: 1; height: 1px; background: var(--riga); }
textarea, select { width: 100%; font: 14px/1.5 var(--testo); color: var(--inchiostro); background: var(--fondo); border: 1px solid var(--riga); padding: 12px 14px; border-radius: 0; }
textarea.mono { font: 13.5px/1.6 var(--mono); } textarea { resize: vertical; } textarea:focus, select:focus { outline: none; border-color: var(--inchiostro); }
.motore { text-align: right; font-size: 11.5px; color: #A9A9AD; margin: 6px 0 0; }
.avvia { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 26px 4px; font: 600 19px var(--mono); cursor: pointer; color: var(--inchiostro); }
.avvia span:last-child { transition: transform .15s; } .avvia:hover span:last-child { transform: translateX(6px); }
.avviso-barra { margin: 0 -28px; padding: 11px 28px; background: var(--giallo-f); border-top: 1px solid #F0E3A3; color: #8A6D00; font-size: 12.5px; }
.controlli { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 5px; font-size: 12.5px; }
.controlli li { padding-left: 18px; position: relative; }
.controlli li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.controlli li.attento::before { background: var(--arancio); }
.errore { color: #B3261E; font-size: 12.5px; margin: 10px 0 0; }

/* --------------------------------------------------------- area di lavoro */
body[data-vista="sim"] { background: var(--carta); overflow-x: hidden; }
.barra { height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--riga); position: sticky; top: 0; background: var(--carta); z-index: 6; }
.indietro { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--riga); border-radius: 8px; text-decoration: none; color: var(--tenue); } .indietro:hover { color: var(--inchiostro); border-color: #BDBDB8; }
#v-sim:not([hidden]) { display: flex; flex-direction: column; height: 100vh; }
.lavoro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1; min-height: 0; }
.barra .passi-nav { flex: 1; justify-content: center; align-items: center; border: 0; padding: 0; min-width: 0; }
.passi-nav > i { font-style: normal; color: var(--barra); padding: 0 2px; flex: none; }
.passi-nav a.fatto span { color: var(--verde); }
.come-link { font-size: 13px; white-space: nowrap; color: var(--tenue); } .come-link:hover { color: var(--inchiostro); }

/* dati in uso */
.in-uso { display: flex; justify-content: space-between; align-items: center; gap: 6px 24px; flex-wrap: wrap; padding: 9px 20px; border-bottom: 1px solid var(--riga); background: var(--fondo); font-size: 13px; flex: none; }
.in-uso-dati { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--tenue); min-width: 0; }
.in-uso-dati b.mono { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--blu); }
.in-uso .fonte { font-weight: 600; color: var(--inchiostro); }
.in-uso .ipotesi { color: #8A6D00; background: var(--giallo-f); border: 1px solid #F0E3A3; padding: 1px 9px; border-radius: 999px; text-decoration: none; font-size: 12.5px; }
.in-uso .ipotesi:hover { border-color: #E0C65A; } .in-uso .ok { color: var(--verde); }
.glossario { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--tenue); } .glossario b { color: var(--inchiostro); font-weight: 600; }

/* palco */
.palco { overflow: auto; padding: 18px 22px 22px; border-right: 1px solid var(--riga); background-color: var(--fondo); background-image: radial-gradient(#D9D9D4 1px, transparent 1px); background-size: 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.palco-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.palco-titolo { font: 700 15px var(--titoli); }
.campagne { display: flex; gap: 6px; flex-wrap: wrap; }
.campagne button, .gruppo button { font: 500 13px var(--testo); color: var(--tenue); background: var(--carta); border: 1px solid var(--riga); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.campagne button:hover, .gruppo button:hover { border-color: #BDBDB8; color: var(--inchiostro); }
.campagne button[aria-selected="true"], .gruppo button[aria-selected="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--su-scuro); }
.tempo { display: flex; align-items: center; gap: 12px; background: var(--carta); border: 1px solid var(--riga); border-radius: 999px; padding: 6px 16px 6px 6px; }
.tondo { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--inchiostro); display: grid; place-items: center; cursor: pointer; flex: none; } .tondo svg { fill: #fff; }
#pz-data { font-size: 13px; font-weight: 600; min-width: 5.4em; }
.evento { font: 600 11px var(--mono); background: var(--inchiostro); color: var(--su-scuro); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
input[type=range] { flex: 1; min-width: 80px; accent-color: var(--inchiostro); height: 22px; }
.zone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.zona { background: var(--carta); border: 1px solid var(--riga); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column; }
.zona:hover { border-color: #BDBDB8; } .zona.scelta { border-color: var(--arancio); box-shadow: 0 0 0 1px var(--arancio); }
.zona > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px 4px; }
.zona > header b { font: 700 15px var(--titoli); margin-right: 7px; white-space: nowrap; }
.zona > header > div { min-width: 0; display: flex; align-items: baseline; }
.sigla { font-size: 11px; color: #9A9A9F; margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gente { font-size: 11px; color: var(--tenue); background: var(--morbido); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.vivo { display: flex; gap: 9px; align-items: flex-start; margin: 6px 14px 0; padding: 8px 10px; background: var(--fondo); border: 1px solid var(--riga); border-radius: 8px; min-height: 58px; }
.vivo .punto { margin-top: 5px; } .vivo.prova { background: var(--arancio-f); border-color: #F6C9B4; }
.cart-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); display: block; }
.cart-tag em { font-style: normal; background: var(--inchiostro); color: var(--su-scuro); padding: 0 5px; border-radius: 3px; margin-left: 3px; }
.cart-titolo { font-size: 13.5px; font-weight: 600; line-height: 1.25; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--riga); }
.kpi div { padding: 8px 6px 9px 14px; } .kpi div + div { border-left: 1px solid var(--riga); padding-left: 10px; }
.kpi dt { font: 10.5px var(--mono); color: #9A9A9F; text-transform: uppercase; letter-spacing: .04em; }
.kpi dd { margin: 1px 0 0; font: 600 15px var(--testo); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.palco[data-passo="1"] .vivo, .palco[data-passo="1"] .kpi, .palco[data-passo="2"] .vivo, .palco[data-passo="2"] .kpi,
.palco[data-passo="1"] .tempo, .palco[data-passo="2"] .tempo, .palco[data-passo="5"] .tempo, .palco[data-passo="1"] .legenda p { display: none; }
.legenda { background: var(--carta); border: 1px solid var(--riga); border-radius: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; margin-top: auto; }
.legenda b.mono { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--arancio); flex-basis: 100%; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; } .legenda p { flex-basis: 100%; margin: 2px 0 0; color: var(--tenue); font-size: 12.5px; }

/* analisi */
.tecnica { display: flex; flex-direction: column; min-height: 0; }
.passi-nav { display: flex; gap: 4px; padding: 10px 20px; border-bottom: 1px solid var(--riga); overflow-x: auto; scrollbar-width: none; flex: none; }
.passi-nav a { text-decoration: none; font-size: 13px; color: var(--tenue); padding: 5px 10px; border-radius: 7px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: baseline; }
.passi-nav a span { font-size: 11px; color: #B5B5B8; } .passi-nav a:hover { background: var(--morbido); color: var(--inchiostro); }
.passi-nav a.attivo { background: var(--inchiostro); color: var(--su-scuro); } .passi-nav a.attivo span { color: #9A9A9F; } .passi-nav a.fine { margin-left: auto; border: 1px solid var(--riga); }
.schede { flex: 1; overflow: auto; padding: 20px; display: grid; gap: 16px; align-content: start; min-height: 0; }
.scheda { border: 1px solid var(--riga); border-radius: 10px; padding: 20px 22px; background: var(--carta); min-width: 0; }
.scheda:has(.vai) { border-color: var(--arancio); }
.scheda > header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.scheda .num { font-size: 18px; font-weight: 600; } .scheda h3 { font: 600 16px var(--mono); letter-spacing: -.02em; flex: 1; }
.scheda h4 { font: 700 15px var(--titoli); margin: 16px 0 6px; }
.stato-b { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 4px; background: var(--verde-f); color: var(--verde); white-space: nowrap; }
.stato-b.corso { background: var(--arancio); color: #fff; } .stato-b.neutro { background: var(--morbido); color: var(--tenue); }
.riga-m { font-size: 11.5px; color: #9A9A9F; margin-bottom: 10px; overflow-wrap: anywhere; }
.scheda p { font-size: 14px; } .nota { color: var(--tenue); font-size: 13px !important; }
.tessere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 14px 0; background: var(--fondo); border-radius: 8px; padding: 14px 6px; }
.tessere.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tessere.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tessere div { text-align: center; padding: 2px 6px; min-width: 0; }
.tessere dd { margin: 0; font: 600 21px var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tessere dt { font: 10.5px var(--mono); color: #9A9A9F; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.tessere small { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 2px; } small.su, i.su { color: var(--verde) !important; } small.giu, i.giu { color: #C2410C !important; }
.sopra-chip { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9A9A9F; margin: 16px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: 12px; }
.chips span { background: var(--morbido); border: 1px solid var(--riga); padding: 3px 9px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; } .chips .avviso { background: var(--arancio-f); border-color: #F6C9B4; color: #C2410C; }
.chips .aff-alta { background: var(--verde-f); border-color: #BFE3CB; color: var(--verde); } .chips .aff-media { background: var(--giallo-f); border-color: #F0E3A3; color: #8A6D00; } .chips .aff-bassa { background: var(--arancio-f); border-color: #F6C9B4; color: #C2410C; }
.avvia:disabled { opacity: .6; cursor: progress; }
.capito { margin-top: 12px; } .capito .etichetta-m { margin: 0 0 8px; font-size: 11.5px; }
.capito #capito-fonte { color: var(--blu); text-transform: none; letter-spacing: 0; } .capito-motivo { margin: 0 0 10px; font-size: 12.5px; color: var(--tenue); }
.capito .chips span { cursor: pointer; user-select: none; } .capito .chips span.si { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--su-scuro); }
.campi.due { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
input[type=number] { width: 100%; font: 14px var(--testo); color: var(--inchiostro); background: var(--fondo); border: 1px solid var(--riga); padding: 8px 10px; border-radius: 0; text-transform: none; letter-spacing: 0; }
input[type=number]:focus { outline: none; border-color: var(--inchiostro); }
.testo-link { background: none; border: 0; padding: 0; font-size: 12px; color: var(--tenue); text-decoration: underline; cursor: pointer; } .testo-link:hover { color: var(--inchiostro); }
.vai { display: flex; justify-content: center; gap: 10px; background: #2B2B2E; color: var(--su-scuro); text-decoration: none; font: 600 14px var(--mono); padding: 14px; border-radius: 4px; margin-top: 12px; } .vai:hover { background: var(--inchiostro); }
.profili { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.profilo { border: 1px solid var(--riga); border-radius: 8px; padding: 14px; } .profilo header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.profilo header b { font: 700 16px var(--titoli); } .profilo header span { font-size: 11.5px; color: #9A9A9F; } .profilo p { font-size: 13.5px; }
.avvisi { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 7px; }
.avvisi li { padding: 9px 12px; border-left: 3px solid #1FA37F; background: var(--fondo); font-size: 13.5px; border-radius: 0 6px 6px 0; }
.avvisi li.rosso { border-color: var(--arancio); } .avvisi li.giallo { border-color: #E0A800; }
.punti { padding-left: 18px; margin: 8px 0; font-size: 13.5px; } .punti li { margin-bottom: 5px; }
.scoperte { padding-left: 20px; margin: 10px 0; font-size: 13.5px; } .scoperte li { margin-bottom: 7px; }
.formula { font: 12px/1.7 var(--mono); background: var(--fondo); border: 1px solid var(--riga); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 6px 0 12px; }
details { margin: 12px 0; border: 1px solid var(--riga); border-radius: 8px; } summary { font: 500 13px var(--mono); padding: 10px 14px; cursor: pointer; } details > .punti { margin: 0 14px 12px 14px; }
.scorri { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 12px; text-align: right; border-top: 1px solid var(--riga); white-space: nowrap; } th:first-child, td:first-child { text-align: left; }
th { font: 500 11px var(--mono); color: #9A9A9F; text-transform: uppercase; letter-spacing: .04em; }
.avanzamento { height: 4px; background: var(--griglia); border-radius: 4px; overflow: hidden; } .avanzamento i { display: block; height: 100%; width: 0; background: var(--arancio); transition: width .12s linear; }

/* previsioni */
.gruppo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gruppo.annunci button { border-radius: 6px; text-align: left; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.annuncio { margin: 12px 0 0; } .annuncio h4 { font: 700 18px var(--titoli); margin: 6px 0 4px; }
figure { margin: 14px 0 0; border: 1px solid var(--riga); border-radius: 8px; padding: 12px 12px 4px; }
figcaption { font: 700 14px var(--titoli); margin-bottom: 2px; } figcaption span { font-size: 11px; font-weight: 400; color: #9A9A9F; margin-left: 6px; }
.grafico { position: relative; } .grafico svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.g-griglia { stroke: #ECECE9; stroke-width: 1; } .g-asse { font: 10.5px var(--mono); fill: #9A9A9F; }
.g-futuro { fill: #F6F7FF; } .g-nota { font: 500 10.5px var(--mono); fill: #9A9A9F; text-transform: uppercase; letter-spacing: .04em; }
.g-evento { stroke: var(--inchiostro); stroke-width: 1; stroke-dasharray: 3 3; } .g-evento-t { font: 500 10px var(--mono); fill: var(--inchiostro); }
.g-cursore { stroke: var(--inchiostro); stroke-width: 1; }
.g-fumetto { position: absolute; background: var(--inchiostro); color: var(--su-scuro); font: 11.5px/1.5 var(--mono); padding: 7px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap; z-index: 2; }
.g-fumetto i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; } .g-fumetto .g-f { color: #A1A1AA; }

/* decisioni e laboratorio */
.dec-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 0; border-top: 1px solid var(--riga); align-items: baseline; }
.dec-riga label b { font: 700 14.5px var(--titoli); } .dec-b { font: 600 15px var(--mono); letter-spacing: -.03em; } .dec-b i { font-style: normal; font-size: 12px; color: #9A9A9F; margin-left: 4px; }
.dec-riga input { grid-column: 1 / -1; width: 100%; min-width: 0; } .dec-d { grid-column: 1 / -1; margin: 0; font-size: 11.5px !important; color: var(--tenue); }
.scheda .azioni { justify-content: flex-start; margin: 12px 0 0; gap: 8px; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 10px 0; }
.campi label { font: 11px var(--mono); color: #9A9A9F; text-transform: uppercase; letter-spacing: .04em; display: grid; gap: 4px; } .campi select { padding: 8px 10px; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.spunte { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 14px; font-size: 13.5px; } .spunte input { accent-color: var(--inchiostro); width: 15px; height: 15px; vertical-align: -2px; }
.verdetto { font-size: 15px !important; }
.lab-riga { padding: 10px 0; border-top: 1px solid var(--riga); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.lab-nome b { font: 700 14.5px var(--titoli); } .lab-num { font-size: 12.5px; color: var(--tenue); } .lab-num b { font: 600 18px var(--mono); letter-spacing: -.04em; color: var(--inchiostro); }
.barra-o { grid-column: 1 / -1; height: 6px; background: var(--griglia); border-radius: 6px; overflow: hidden; } .barra-o i { display: block; height: 100%; background: var(--barra); border-radius: 6px; } .lab-riga.top .barra-o i { background: var(--arancio); }
.lab-det { grid-column: 1 / -1; font-size: 11.5px; color: var(--tenue); }

/* frasi accanto ai numeri, tabelle in parole */
.frase { background: var(--fondo); border-radius: 8px; padding: 12px 14px; font-size: 14px !important; line-height: 1.55; margin-top: 4px; }
.numeri-p { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 3px; font-size: 13.5px; } .numeri-p b { font-weight: 600; }
table.semplice th, table.semplice td, table.fonti th, table.fonti td { text-align: left; white-space: normal; vertical-align: top; }
.fonti td { font-size: 13px; } .fonti td.mono { font-size: 12px; overflow-wrap: anywhere; color: var(--tenue); }
.fonti tr.manca td { color: var(--tenue); } .fonti small { color: var(--tenue); font-size: 12px; }
.fonti .spunta { display: inline-block; width: 18px; color: var(--verde); font-weight: 700; } .fonti tr.manca .spunta { color: #B5B5B8; }
.obbl { font: 600 10.5px var(--mono); color: var(--arancio); text-transform: uppercase; letter-spacing: .03em; }

/* come funziona */
.nav-link { display: flex; gap: 22px; align-items: center; }
.pagina { max-width: 820px; margin: 0 auto; padding: 24px 24px 90px; }
.pagina h2 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; letter-spacing: -.035em; margin-bottom: 16px; }
.pagina h3 { font: 700 23px var(--titoli); margin: 52px 0 14px; }
.pagina .intro { font-size: 18.5px; line-height: 1.55; color: var(--testo2); }
.pagina p, .pagina .punti li { font-size: 15.5px; } .pagina .punti li { margin-bottom: 8px; }
.glossario-grande { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; }
.glossario-grande div { border: 1px solid var(--riga); border-radius: 10px; padding: 14px 16px; background: var(--fondo); }
.glossario-grande dt { font: 700 16px var(--mono); } .glossario-grande dd { margin: 4px 0 0; font-size: 14px; color: var(--testo2); }
.otto { list-style: none; padding: 0; margin: 0; }
.otto li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 16px 0; border-top: 1px solid var(--riga); }
.otto li > span { font: 600 15px var(--mono); color: #B5B5B8; padding-top: 2px; }
.otto b { font: 700 17px var(--titoli); } .otto p { margin: 4px 0 0; color: var(--testo2); }
.esempio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; align-items: start; }
.esempio table { border: 1px solid var(--riga); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.esempio caption { text-align: left; font: 700 14px var(--mono); padding: 0 0 6px; }
.esempio td { font-size: 14px; white-space: normal; } .esempio tr:first-child td { border-top: 0; } .esempio tr.tot td { font-weight: 700; background: var(--fondo); }
.risultato { font-size: 16.5px !important; background: var(--giallo-f); border: 1px solid #F0E3A3; border-radius: 10px; padding: 14px 16px; }

@media (max-width: 1100px) { .come-link { display: none; } .barra .passi-nav { justify-content: flex-start; } }
@media (max-width: 900px) {
  .nav-centro { display: none; } .console { grid-template-columns: minmax(0, 1fr); padding: 12px 20px 40px; gap: 36px; } .nav.chiara { padding: 14px 20px; }
  #v-sim:not([hidden]) { height: auto; } .lavoro { grid-template-columns: minmax(0, 1fr); } .palco { border-right: 0; border-bottom: 1px solid var(--riga); }
  .schede { overflow: visible; } .palco { overflow: visible; } .barra { gap: 10px; padding: 0 12px; } .barra .logo span { display: none; }
  .in-uso { padding: 9px 14px; } .glossario { display: none; }
  .tecnica { order: -1; border-bottom: 1px solid var(--riga); }   /* su telefono prima l'analisi, poi il pubblico simulato */
  .esempio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .zone { grid-template-columns: minmax(0, 1fr); } .tessere.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .campi { grid-template-columns: minmax(0, 1fr); } .scatola { padding: 20px 18px 0; } .avviso-barra { margin: 0 -18px; padding: 11px 18px; } .stato b { display: none; }
  .palco { padding: 14px; } .schede { padding: 14px; } .scheda { padding: 16px; }
  .barra { overflow: hidden; } .glossario-grande { grid-template-columns: minmax(0, 1fr); } .pagina { padding: 16px 18px 70px; }
  .in-uso-dati { gap: 2px 10px; font-size: 12.5px; } .nav-link { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* campagna nuova */
.nuova { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5vw; max-width: 1340px; margin: 0 auto; padding: 16px 44px 70px; align-items: start; }
.nuova-form h2 { font-size: 30px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.025em; }
.nuova-form fieldset { border: 1px solid #D4D4D0; padding: 18px 20px 6px; margin: 18px 0 0; }
.nuova-form legend { font-size: 12.5px; color: #5E5E63; padding: 0 6px; }
.nuova-form .campo { display: grid; gap: 5px; font: 11px var(--mono); color: #9A9A9F; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.nuova-form .campo textarea, .nuova-form .campo select { text-transform: none; letter-spacing: 0; font: 14px/1.5 var(--testo); color: var(--inchiostro); }
.nuova-form input[type=date] { width: 100%; font: 14px var(--testo); color: var(--inchiostro); background: var(--fondo); border: 1px solid var(--riga); padding: 7px 10px; text-transform: none; }
.campi.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nuova-form .avvia { margin-top: 10px; } .nuova-form .avviso-barra { margin: 0; }
.filtri-titolo { margin: 4px 0 8px !important; font-size: 11px !important; }
.filtri { display: grid; gap: 8px; margin-bottom: 12px; }
.filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.filtro > span { width: 54px; font-size: 11px; color: #9A9A9F; text-transform: uppercase; letter-spacing: .04em; }
.filtro button { font: 500 12.5px var(--testo); color: var(--tenue); background: var(--carta); border: 1px solid var(--riga); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.filtro button.si { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--su-scuro); } .filtro small { color: #B5B5B8; font-size: 11.5px; }
.nuova-esito { display: grid; gap: 16px; min-width: 0; }
.nuova-esito .vuoto { border: 1px solid var(--riga); padding: 22px 24px; background: var(--fondo); }
#nc-folla, #nc-folla2 { margin-bottom: 8px; }
.esito-folla { border: 1px solid var(--riga); border-radius: 10px; background-color: var(--fondo); background-image: radial-gradient(#D9D9D4 1px, transparent 1px); background-size: 22px 22px; padding: 6px 10px 0; }
.nuova-esito .tessere dd { font-size: 19px; }
.consigli, .migliori { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 0; counter-reset: c; }
.consigli li, .migliori li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--riga); }
.migliori li { grid-template-columns: minmax(0, 1fr) auto; }
.consigli b, .migliori b { font-size: 13.5px; font-weight: 600; display: block; } .consigli small, .migliori small { font-size: 12px; color: var(--tenue); display: block; margin-top: 2px; }
.consigli .pulsante { padding: 5px 12px; font-size: 13px; }
.per { font: 600 15px var(--mono); color: var(--tenue); letter-spacing: -.03em; } .per.su { color: var(--verde); }
.segmenti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin-top: 8px; }
.seg b.mono { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #9A9A9F; display: block; margin-bottom: 4px; }
.seg-riga { display: grid; grid-template-columns: 98px minmax(0, 1fr) 42px; gap: 8px; align-items: center; font-size: 12px; padding: 2px 0; }
.seg-riga span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--testo2); }
.seg-b { position: relative; height: 12px; background: var(--morbido); border-radius: 3px; overflow: hidden; }
.seg-b i { position: absolute; left: 0; height: 6px; border-radius: 3px; } .seg-b i.vis { top: 0; background: var(--barra); } .seg-b i.ris { bottom: 0; background: var(--arancio); }
.seg-riga em { font: 600 11.5px var(--mono); font-style: normal; text-align: right; color: var(--tenue); } .seg-riga em.su { color: var(--verde); } .seg-riga em.giu { color: #C2410C; }
.persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
.persona { border: 1px solid var(--riga); border-radius: 10px; padding: 12px 14px; background: var(--carta); font-size: 13px; }
.persona header { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.persona header b { font: 700 14.5px var(--titoli); display: block; } .persona header small { color: var(--tenue); font-size: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--titoli); background: var(--morbido); color: var(--tenue); flex: none; }
.persona.compra .avatar { background: var(--verde-f); color: var(--verde); } .persona.clicca .avatar { background: var(--arancio-f); color: #C2410C; }
.persona .chi { color: var(--tenue); font-size: 12.5px !important; margin: 0 0 6px; }
.persona .cosa { font-size: 12px !important; color: var(--tenue); margin: 0 0 6px; }
.bollino { display: inline-block; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 4px; background: var(--morbido); color: var(--tenue); margin-right: 4px; }
.persona.compra .bollino { background: var(--verde-f); color: var(--verde); } .persona.clicca .bollino { background: var(--arancio-f); color: #C2410C; }
.persona ul { margin: 0; padding-left: 16px; font-size: 12.5px; } .persona li { margin-bottom: 2px; }
.dentro { font-size: 13px !important; background: var(--fondo); border-radius: 6px; padding: 9px 11px; line-height: 1.5; }
@media (max-width: 900px) {
  .nuova { grid-template-columns: minmax(0, 1fr); padding: 12px 20px 50px; gap: 28px; }
  .segmenti { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .campi.tre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nuova-form fieldset { padding: 14px 14px 4px; }
  .consigli li { grid-template-columns: minmax(0, 1fr) auto; } .consigli .pulsante { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) { #v-nuova .nav-link a:first-child { display: none; } #v-nuova .nav.chiara { padding: 14px 18px; } }

/* pagina di partenza: una frase, il prompt, l'allegato. Tutto dentro lo schermo */
#v-console:not([hidden]) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.avvio { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px 8vh; position: relative; }
.avvio-frase { text-align: center; font: 600 clamp(22px, 2.6vw, 30px)/1.25 var(--titoli); letter-spacing: -.02em; margin: 0 auto 26px; max-width: 30em; text-wrap: balance; }
.composer { border: 1px solid #D4D4D0; border-radius: 22px; background: var(--carta); padding: 14px 12px 10px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06); transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: #A3A3A0; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 34px rgba(0, 0, 0, .09); }
.composer textarea { display: block; width: 100%; border: 0; background: none; padding: 4px 6px 4px 0; resize: none; font: 16px/1.5 var(--testo); min-height: 50px; max-height: 180px; overflow-y: auto; }
.composer textarea:focus { outline: none; border: 0; }
.composer .capito { margin: 6px 0 0; } .composer .capito > p.mono { font-size: 11px; color: #9A9A9F; margin: 0 0 6px; }
.composer .capito .chips { margin: 0 0 4px; font-size: 11.5px; gap: 5px; } .composer .capito .chips span { padding: 2px 8px; }
.composer .capito-motivo { font-size: 12px; margin: 0 0 4px; }
.composer-barra { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
.fonte-dati { min-width: 0; }
.fonte-dati select { width: auto; max-width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--riga); border-radius: 999px; padding: 6px 30px 6px 13px; font: 500 13px var(--testo); color: var(--inchiostro); cursor: pointer;
  background: var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6B70' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; }
.fonte-dati select:hover { border-color: #BDBDB8; }
.file-chip { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font: 12px var(--mono); background: var(--morbido); border-radius: 999px; padding: 4px 4px 4px 11px; }
.file-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.file-chip button { border: 0; background: none; cursor: pointer; color: var(--tenue); width: 22px; height: 22px; border-radius: 50%; } .file-chip button:hover { background: #E2E2DF; color: var(--inchiostro); }
.invia { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--inchiostro); color: var(--su-scuro); display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .08s; }
.invia:hover { background: #2A2A2E; } .invia:active { transform: translateY(1px); } .invia:disabled { opacity: .45; cursor: progress; }
.allega { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.allega-zona { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 1px dashed var(--barra); border-radius: 16px; padding: 12px 16px; cursor: pointer; color: var(--tenue); font-size: 14px; background: var(--fondo); transition: border-color .15s, color .15s, background .15s; }
.allega-zona > span { flex: 1; min-width: 0; } .allega-zona b { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #9A9A9F; }
.allega-zona:hover, .avvio.sopra .allega-zona { border-color: var(--inchiostro); color: var(--inchiostro); background: var(--carta); }
.info { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--riga); background: var(--carta); font: 600 italic 15px Georgia, serif; color: var(--tenue); cursor: pointer; }
.info:hover, .info[aria-expanded="true"] { border-color: var(--inchiostro); color: var(--inchiostro); }
.info-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, calc(100vw - 32px)); max-height: min(80vh, 620px); overflow: auto; z-index: 20; background: var(--carta); border: 1px solid var(--riga); border-radius: 16px; padding: 16px 18px 4px; box-shadow: 0 16px 44px rgba(0, 0, 0, .14); font-size: 13.5px; }
.info-box > b { font: 700 15px var(--titoli); display: block; margin-bottom: 6px; } .info-box p { color: var(--testo2); }
.info-box table { font-size: 12px; margin: 4px 0 10px; } .info-box a { color: var(--blu); }
#esito-file .controlli { margin: 10px 4px 0; font-size: 12px; } #esito-file .errore { margin: 10px 4px 0; }
.avvio .avviso { text-align: center; font-size: 12px; color: #9A9A9F; margin: 16px 0 0; min-height: 1.5em; }
@media (max-width: 560px) {
  .avvio { padding: 0 14px 4vh; justify-content: flex-start; padding-top: 6vh; } .avvio-frase { font-size: 21px; margin-bottom: 18px; }
  .composer { padding: 12px 10px 8px 14px; border-radius: 18px; } .allega-zona { font-size: 13px; padding: 11px 13px; }
  .fonte-dati select { font-size: 12.5px; padding: 6px 26px 6px 11px; } .file-chip > span { max-width: 110px; }
}
@media (max-height: 640px) { .avvio { padding-bottom: 2vh; } .avvio-frase { margin-bottom: 16px; } }
#v-console > .nav { width: 100%; flex: none; }
.info-box .chiudi { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--morbido); color: var(--tenue); cursor: pointer; }
.info-box .chiudi:hover { background: #E2E2DF; color: var(--inchiostro); }
.composer .capito:not(.tutti) .chips span:not(.si) { display: none; }
.composer .capito .chips em.nessuna { font-style: normal; color: #9A9A9F; }
.composer .capito .testo-link { font: inherit; font-size: 11px; color: var(--blu); text-decoration: none; }

/* omini della pagina di partenza: in fondo, sfumati, mai sopra al prompt */
#v-console { position: relative; }
#v-console > .nav, .avvio { position: relative; z-index: 1; }
#folla-avvio { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; }
@media (max-height: 600px) { #folla-avvio { display: none; } }

/* prato in pixel art (disegnato da scena.js) e omini sopra, senza sfumature */
#prato { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; }
@media (max-height: 600px) { #prato { display: none; } }

/* ======================================================= analisi: vista Persone e vista Analisi */
#v-analisi:not([hidden]) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--carta); }
.barra-a { height: 58px; flex: none; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--riga); position: relative; z-index: 5; background: var(--carta); }
/* interruttore con la pillola nera che scivola */
.barra-a .interruttore { justify-self: center; position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--morbido); border-radius: 999px; padding: 4px; }
.interruttore::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--inchiostro);
  transition: transform .45s cubic-bezier(.65, 0, .35, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.interruttore[data-modo="analisi"]::before { transform: translateX(100%); }
.interruttore button { position: relative; z-index: 1; border: 0; background: none; font: 600 14px var(--testo); color: var(--tenue); padding: 8px 24px; min-width: 112px; border-radius: 999px; cursor: pointer; transition: color .3s; }
.interruttore button[aria-selected="true"] { color: var(--su-scuro); }
.riga-a { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 20px; border-bottom: 1px solid var(--riga); position: relative; z-index: 4; background: var(--carta); }
.a-nome { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.a-nome b { font: 700 17px var(--titoli); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.a-nome span { color: var(--tenue); font-size: 14px; white-space: nowrap; }

/* entrata delle due viste */
.modo-persone.entra, .modo-analisi.entra { animation: a-vista .55s cubic-bezier(.2, .7, .2, 1) both; }
.modo-persone.da-sinistra { --dx: -28px; } .modo-analisi.da-destra { --dx: 28px; } .da-sotto { --dy: 14px; }
@keyframes a-vista { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } }

/* persone: omini su una griglia di pallini */
.modo-persone { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--fondo); touch-action: manipulation; }
#a-prato, #tr-prato { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#a-folla, #tr-folla { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
.a-aiuto { position: absolute; top: 14px; left: 0; right: 0; text-align: center; margin: 0; color: var(--tenue); font-size: 14px; pointer-events: none; z-index: 2; }
.a-legenda { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.a-segni { margin: 0; pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; color: var(--tenue);
  background: var(--vetro); backdrop-filter: blur(8px); border: 1px solid var(--riga); border-radius: 999px; padding: 5px 14px; }
.a-segni i { display: inline-block; width: 10px; height: 12px; border: 2px solid; border-radius: 2px; margin-right: 6px; vertical-align: -2px; }
.a-filtro-pub { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; pointer-events: auto; background: var(--vetro); backdrop-filter: blur(8px);
  border: 1px solid var(--riga); border-radius: 999px; padding: 5px; box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.a-filtro-pub button { font: 500 13px var(--testo); color: var(--testo2); background: none; border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .2s, color .2s; }
.a-filtro-pub button:hover { background: var(--morbido); }
.a-filtro-pub button.si { background: var(--inchiostro); color: var(--su-scuro); }
.a-filtro-pub i, .a-scheda .gruppo i, .a-pub-nome i, .a-best i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.a-filtro-pub .stella { color: #E0A100; }
.a-filtro-pub button.si .stella { color: #FFD24A; }
.a-scheda { position: absolute; z-index: 6; width: min(320px, calc(100% - 20px)); transform: translateX(-50%);
  background: var(--carta); border: 1px solid var(--riga); border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .18); font-size: 13.5px; }
.a-scheda.entra { animation: a-scheda .28s cubic-bezier(.2, .8, .2, 1.2) both; }
@keyframes a-scheda { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.96); } }
.a-scheda::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--carta); border: 1px solid var(--riga); border-width: 0 1px 1px 0; }
.a-scheda[data-verso="sopra"]::after { left: var(--freccia, 50%); bottom: -7px; transform: translateX(-50%) rotate(45deg); }
.a-scheda[data-verso="sotto"]::after { left: var(--freccia, 50%); top: -7px; transform: translateX(-50%) rotate(225deg); }
.a-scheda[data-verso="destra"]::after { left: -7px; top: var(--frecciay, 50%); transform: translateY(-50%) rotate(135deg); }
.a-scheda[data-verso="sinistra"]::after { right: -7px; top: var(--frecciay, 50%); transform: translateY(-50%) rotate(-45deg); }
.a-scheda[data-verso="libera"]::after { display: none; }
.a-scheda .chiudi { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--morbido); color: var(--tenue); cursor: pointer; }
.a-scheda header b { font: 700 16px var(--titoli); display: block; padding-right: 30px; } .a-scheda header span { color: var(--tenue); font-size: 12.5px; }
.a-scheda p { margin: 6px 0 0; } .a-scheda .chi { color: var(--testo2); font-size: 13px; }
.a-scheda .esito { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--tenue); }
.a-scheda .bollino { font: 600 11.5px var(--testo); padding: 3px 9px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.bollino.compra { background: var(--verde-f); color: var(--verde); } .bollino.clicca { background: var(--arancio-f); color: #C2410C; } .bollino.passa { background: var(--morbido); color: var(--tenue); }
.tre-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 2px; background: var(--fondo); border-radius: 10px; padding: 8px 4px; text-align: center; }
.tre-n dd { margin: 0; font: 600 16px var(--mono); letter-spacing: -.03em; } .tre-n dt { font-size: 11px; color: var(--tenue); line-height: 1.25; }
.a-scheda .perche { font-size: 12.5px; color: var(--testo2); }
.a-scheda .gruppo { font-size: 12px; color: var(--tenue); border-top: 1px solid var(--riga); padding-top: 8px; margin-top: 8px; }
.a-scheda .gruppo i { margin-right: 6px; vertical-align: 1px; }
.a-scheda-corpo { max-height: calc(100dvh - 190px); overflow-y: auto; }

/* analisi */
.modo-analisi { flex: 1; min-height: 0; overflow-y: auto; background: var(--fondo); }
.a-contenuto { max-width: 1100px; margin: 0 auto; padding: 22px 20px 64px; display: grid; gap: 16px; }
.a-entra { animation: a-sale .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes a-sale { from { opacity: 0; transform: translateY(16px); } }
.a-testa { padding: 0 0 4px; }
.a-etichetta { margin: 0 0 4px; font: 600 12px var(--testo); color: var(--blu); text-transform: uppercase; letter-spacing: .08em; }
.a-titolo2 { margin: 0 0 10px; font: 700 clamp(20px, 2.4vw, 28px)/1.25 var(--titoli); letter-spacing: -.02em; max-width: 40em; overflow-wrap: anywhere; }
.a-capito { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.a-capito span { font-size: 12.5px; background: var(--carta); border: 1px solid var(--riga); border-radius: 999px; padding: 4px 10px; color: var(--testo2); }
.a-capito .a-capito-t { background: none; border: 0; padding-left: 0; color: var(--tenue); font-weight: 600; }
.a-capito a { font-size: 12.5px; color: var(--blu); margin-left: 4px; }
.a-frase { font: 500 clamp(16px, 1.8vw, 19px)/1.5 var(--titoli); letter-spacing: -.01em; max-width: 50em; margin: 14px 0 16px; color: var(--testo2); }
.a-kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; }
.a-kpi div { background: var(--carta); border: 1px solid var(--riga); border-radius: 14px; padding: 14px 14px 12px; min-width: 0; transition: transform .2s, box-shadow .2s; }
.a-kpi div:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .06); }
.a-kpi dt { font-size: 12.5px; color: var(--tenue); } .a-kpi dd { margin: 4px 0 0; font: 700 22px var(--titoli); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a-kpi small { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 2px; }
.a-nota { font-size: 12.5px !important; color: var(--tenue); margin: 10px 0 0; }
.a-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.a-card { position: relative; background: var(--carta); border: 1px solid var(--riga); border-radius: 18px; padding: 18px 20px; min-width: 0; overflow: hidden; isolation: isolate; }
.a-card h3 { font: 700 17px var(--titoli); margin: 0 0 10px; letter-spacing: -.01em; }
.a-card p { font-size: 14.5px; margin: 0 0 6px; } .a-sotto { color: var(--tenue); font-size: 13px !important; margin-bottom: 10px !important; }
/* luce che segue il puntatore */
.a-luce::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(59, 75, 224, .07), transparent 45%); }
.a-luce:hover::before { opacity: 1; }
.a-card.evidenza { border-color: #BFE3CB; background: linear-gradient(180deg, var(--verde-f), var(--carta) 70%); }
.a-card.evidenza-blu { border-color: #CDD3FA; background: linear-gradient(180deg, #EEF0FF, var(--carta) 70%); }
.a-best b { font: 700 20px var(--titoli); display: flex; align-items: center; gap: 8px; } .a-best i { width: 10px; height: 10px; } .a-best span { color: var(--tenue); font-size: 14px; }
.a-mini { display: grid; gap: 5px; margin: 12px 0 4px; }
.a-mini div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; color: var(--tenue); }
.a-mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-mini i { height: 6px; border-radius: 6px; display: block; transform-origin: left; animation: a-cresce .9s cubic-bezier(.2, .7, .2, 1) both .25s; }
@keyframes a-cresce { from { transform: scaleX(0); } }
.a-azioni { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; } .a-azioni li::marker { color: var(--arancio); font-weight: 700; }

/* studia i numeri */
.a-es-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.a-es-testa h3 { margin: 0; }
.a-tab { display: flex; gap: 2px; flex-wrap: wrap; background: var(--morbido); border-radius: 12px; padding: 3px; }
.a-tab button { border: 0; background: none; font: 500 13px var(--testo); color: var(--tenue); padding: 6px 11px; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s; }
.a-tab button[aria-selected="true"] { background: var(--carta); color: var(--inchiostro); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.a-es-opz { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.a-seg { display: inline-flex; border: 1px solid var(--riga); border-radius: 999px; padding: 2px; }
.a-seg button { border: 0; background: none; font: 500 12.5px var(--testo); color: var(--tenue); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.a-seg button[aria-pressed="true"] { background: var(--inchiostro); color: var(--su-scuro); }
.a-es-grafico { min-height: 240px; }
.a-es-nota { font-size: 13.5px !important; color: var(--testo2); margin: 8px 0 0 !important; }
.es-box { position: relative; }
.es-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.es-griglia { stroke: var(--griglia); stroke-width: 1; }
.es-y { font: 500 11px var(--mono); fill: var(--tenue); text-anchor: end; }
.es-x { font: 500 11px var(--mono); fill: var(--tenue); text-anchor: middle; }
.es-evento { stroke: #9A9A94; stroke-dasharray: 3 4; }
.es-ev { font: 600 11px var(--testo); fill: #6B6B70; }
.es-fascia { opacity: .1; animation: a-appare .8s ease both .3s; }
.es-linea { stroke-dasharray: 1; stroke-dashoffset: 1; animation: a-traccia 1.1s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(var(--j, 0) * 90ms); }
@keyframes a-traccia { to { stroke-dashoffset: 0; } }
@keyframes a-appare { from { opacity: 0; } }
.es-cursore { stroke: var(--inchiostro); stroke-width: 1; opacity: .35; }
.es-punto { stroke: var(--carta); stroke-width: 2; }
.es-tip { position: absolute; top: 8px; z-index: 2; min-width: 170px; background: rgba(17, 17, 19, .94); color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.es-tip b { display: block; font-weight: 600; margin-bottom: 4px; }
.es-tip div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 1px 0; }
.es-tip i { width: 8px; height: 8px; border-radius: 50%; } .es-tip span { color: #C9C9CE; } .es-tip em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.es-tip small { display: block; font-weight: 400; color: #A9A9B0; font-size: 11px; }

/* budget e imbuto */
.a-bud { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.a-bud input { flex: 1; accent-color: var(--blu); height: 28px; }
.a-bud output { font: 700 16px var(--titoli); min-width: 150px; text-align: right; white-space: nowrap; }
.a-bud-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.a-bud-num div { background: var(--fondo); border-radius: 12px; padding: 10px 10px 8px; min-width: 0; }
.a-bud-num dt { font-size: 11.5px; color: var(--tenue); } .a-bud-num dd { margin: 2px 0 0; font: 700 17px var(--titoli); white-space: nowrap; font-variant-numeric: tabular-nums; }
.a-bud-num small { font: 600 11.5px var(--testo); } .a-bud-num small.su { color: var(--verde); } .a-bud-num small.giu { color: #C2410C; }
.a-bud-curva { margin-top: 8px; }
.a-bud-curva circle { transition: cx .15s, cy .15s; }
.a-imbuto { display: grid; gap: 10px; margin-top: 4px; }
.a-imb-riga { display: grid; gap: 4px; animation: a-sale .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.2s + var(--k) * 110ms); }
.a-imb-barra { height: 12px; background: var(--morbido); border-radius: 12px; overflow: hidden; }
.a-imb-barra i { display: block; height: 100%; border-radius: 12px; background: linear-gradient(90deg, var(--blu), #7C8BF2); transform-origin: left; animation: a-cresce .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.3s + var(--k) * 110ms); }
.a-imb-riga:last-child .a-imb-barra i { background: linear-gradient(90deg, var(--verde), #4ADE80); }
.a-imb-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.a-imb-t b { font: 700 16px var(--titoli); font-variant-numeric: tabular-nums; } .a-imb-t span { color: var(--testo2); } .a-imb-t em { font-style: normal; color: var(--tenue); font-size: 12px; margin-left: auto; }

/* tutti i pubblici e gruppi */
.a-pub { margin: 0; border: 0; border-top: 1px solid var(--riga); border-radius: 0; }
.a-pub summary { font: inherit; list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) minmax(0, .9fr) 108px; gap: 14px; align-items: center; padding: 12px 4px; border-radius: 10px; transition: background .2s; }
.a-pub summary:hover { background: var(--fondo); }
.a-pub summary::-webkit-details-marker { display: none; }
.a-pub-nome b { font: 600 14.5px var(--testo); display: flex; align-items: center; gap: 7px; } .a-pub-nome span { font-size: 12.5px; color: var(--tenue); }
.a-pub-barra { height: 8px; background: var(--morbido); border-radius: 8px; overflow: hidden; }
.a-pub-barra i { display: block; height: 100%; background: var(--barra); border-radius: 8px; transform-origin: left; animation: a-cresce .9s cubic-bezier(.2, .7, .2, 1) both .2s; }
.a-pub.top .a-pub-barra i { background: var(--verde); }
.a-pub-num { text-align: right; } .a-pub-num b { font: 600 14px var(--testo); display: block; white-space: nowrap; } .a-pub-num span { font-size: 12px; color: var(--tenue); white-space: nowrap; }
.a-badge { justify-self: end; font: 600 11.5px var(--testo); padding: 4px 10px; border-radius: 999px; background: var(--morbido); color: var(--tenue); white-space: nowrap; }
.a-badge.verde { background: var(--verde-f); color: var(--verde); } .a-badge.arancio { background: var(--arancio-f); color: #C2410C; }
.a-pub-det { padding: 0 4px 14px; } .a-pub-det p { font-size: 13.5px; color: var(--testo2); margin: 0 0 4px; }
.a-gruppi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.a-gr b { font: 600 12px var(--testo); color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 6px; }
.a-gr-riga { display: grid; grid-template-columns: 110px minmax(0, 1fr) 42px; gap: 8px; align-items: center; font-size: 13px; padding: 2px 0; }
.a-gr-riga span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--testo2); }
.a-gr-riga div { height: 8px; background: var(--morbido); border-radius: 8px; overflow: hidden; }
.a-gr-riga i { display: block; height: 100%; background: var(--barra); border-radius: 8px; transform-origin: left; animation: a-cresce .9s cubic-bezier(.2, .7, .2, 1) both .3s; }
.a-gr-riga i.su { background: var(--verde); } .a-gr-riga i.giu { background: #F6B39A; } .a-gr-riga em { font: 600 12px var(--mono); font-style: normal; text-align: right; color: var(--tenue); }
.a-piede { text-align: center; font-size: 13px; color: var(--tenue); margin: 6px 0 0; } .a-piede a { color: var(--tenue); }

/* transizione: un cerchio si apre dal punto di invio, poi la scena si dissolve */
.transizione { position: fixed; inset: 0; z-index: 50; background: var(--fondo); overflow: hidden;
  clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%)); transition: clip-path .8s cubic-bezier(.65, 0, .35, 1), opacity .6s ease; }
.transizione.dentro { clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 50%)); }
.transizione.esce { opacity: 0; }
html:has(#transizione:not([hidden])) { overflow: hidden; }

/* il riquadro del prompt si scuote se si invia senza testo */
.composer.scuoti { animation: a-scuoti .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes a-scuoti { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

@media (prefers-reduced-motion: reduce) {
  .a-entra, .modo-persone.entra, .modo-analisi.entra, .a-scheda.entra, .es-linea, .a-imb-riga, .a-imb-barra i, .a-pub-barra i, .a-gr-riga i, .a-mini i { animation: none; stroke-dashoffset: 0; }
  .transizione { transition: opacity .3s; }
}
@media (max-width: 900px) {
  .a-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } .a-griglia { grid-template-columns: minmax(0, 1fr); }
  .barra-a .come-link { display: none; } .barra-a { grid-template-columns: auto auto 1fr; }
}
@media (max-width: 600px) {
  .barra-a { padding: 0 12px; gap: 10px; } .barra-a .logo span { display: none; } .interruttore button { padding: 7px 14px; min-width: 92px; }
  .riga-a { padding: 10px 14px; } .a-nome { flex-direction: column; gap: 0; } .a-nome b { font-size: 15px; max-width: 100%; }
  .a-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-kpi dd { font-size: 19px; }
  .a-pub summary { grid-template-columns: minmax(0, 1fr) auto; } .a-pub-barra { grid-column: 1 / -1; order: 3; } .a-pub-num { text-align: left; }
  .a-gruppi { grid-template-columns: minmax(0, 1fr); } .a-legenda { left: 8px; right: 8px; bottom: 10px; }
  .a-filtro-pub { border-radius: 18px; } .a-filtro-pub button { padding: 6px 10px; font-size: 12.5px; }
  .a-contenuto { padding: 16px 14px 50px; } .a-bud-num { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-bud output { min-width: 0; }
  .a-tab { width: 100%; } .a-tab button { flex: 1; padding: 6px 6px; font-size: 12px; }
  .a-mini div { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
}

/* bottone del tema (sole / luna) */
.tema { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--riga); background: var(--carta); color: var(--inchiostro); display: inline-grid; place-items: center;
  cursor: pointer; flex: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1.3), border-color .2s; }
.tema:hover { border-color: var(--barra); transform: rotate(-18deg); }
.tema svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema .sole { display: none; } :root[data-tema="scuro"] .tema .sole { display: inline; } :root[data-tema="scuro"] .tema .luna { display: none; }
.nav-link .tema { margin-left: 4px; }
.barra-dx { display: flex; align-items: center; gap: 14px; justify-self: end; }
/* ritocchi del tema scuro */
:root[data-tema="scuro"] .pulsante.nero:hover { background: #D4D4D1; }
:root[data-tema="scuro"] .a-card.evidenza { border-color: #1F4A2F; }
:root[data-tema="scuro"] .a-card.evidenza-blu { border-color: #2D3570; background: linear-gradient(180deg, #181B36, var(--carta) 70%); }
:root[data-tema="scuro"] .es-tip { background: rgba(38, 38, 44, .97); border: 1px solid #3A3A42; }
:root[data-tema="scuro"] .a-kpi div:hover, :root[data-tema="scuro"] .a-filtro-pub { box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
:root[data-tema="scuro"] .a-scheda { box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
:root[data-tema="scuro"] .a-luce::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(125, 139, 255, .10), transparent 45%); }
:root[data-tema="scuro"] .interruttore::before { box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
:root[data-tema="scuro"] #prato { filter: brightness(.6) saturate(1.15); }