/* Jarvis v2 · lo stile del cervello in 3D
 * Vetro scuro, bordi di luce, angoli da interfaccia (HUD), numeri in carattere tecnico, nomi dei reparti in Orbitron.
 * Viene dopo lo stile della v1: lo aggiorna, non lo sostituisce. */
:root {
  --hud: #7fe9ff;
  --hud-2: rgba(127, 233, 255, .55);
  --hud-3: rgba(127, 233, 255, .18);
  --vetro: linear-gradient(160deg, rgba(8, 15, 32, .9), rgba(4, 7, 16, .88));
  --mono: "JetBrains Mono", "Consolas", monospace;
  --orb: "Orbitron", "Michroma", "Hanken Grotesk", sans-serif;
}
.app { background: #02030a; }
.rail { background: rgba(3, 6, 14, .82); border-right: 1px solid var(--hud-3); }
.hdr { background: rgba(3, 6, 14, .62); border-bottom: 1px solid var(--hud-3); }
.live b { font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }
.live > div { border-left-color: var(--hud-3); }

/* ---------- LE CINQUE STAZIONI DEL CIRCUITO DEL LAVORO ----------
   CONTATTI → SCRITTURA → INVIO → RISPOSTE → VENDITE: il mestiere nell'ordine in cui accade.
   Misure da Codex: nome 14 px, numero 24 px, sempre orizzontali, mai inclinate nello spazio.
   Il numero è la cosa più grande perché è quello che guardi: «832». Sotto, in piccolo, la
   parola che dice di che numero si tratta, e la pastiglia di stato che ripete a parole quello
   che dice il colore — il colore da solo non basta mai. */
.lb3.lb-staz { display: grid; justify-items: center; gap: 1px; pointer-events: auto; cursor: pointer;
  padding: 7px 10px 8px; width: 118px; box-sizing: border-box; border-radius: 4px; text-align: center;
  background: rgba(4, 10, 20, .9); border: 1px solid rgba(70, 112, 133, .85);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: border-color .25s, transform .25s; }
.lb3.lb-staz:hover { transform: translateY(-2px); border-color: #62dcff; }
/* I fallback dopo var(--orb) servono davvero: se Orbitron non è ancora arrivato, senza
   fallback il numero esce come un quadratino vuoto — e il numero è la cosa che si guarda. */
.lb3.lb-staz b { font-family: var(--orb), var(--font), system-ui, sans-serif; font-size: 13px;
  font-weight: 800; letter-spacing: .1em; color: #cfe3f2; text-shadow: none; white-space: nowrap; }
.lb3.lb-staz em { font-family: var(--orb), var(--font), system-ui, sans-serif; font-size: 24px;
  line-height: 26px; font-weight: 800; font-style: normal; color: #eaf6ff; text-shadow: none; }
.lb3.lb-staz span { font-size: 10.5px; line-height: 13px; color: rgba(185, 210, 245, .72); }
/* la pastiglia di stato va a capo dentro alla targhetta: il motivo di un blocco è la frase
   più utile della scena e tagliarla a metà parola sarebbe il modo peggiore di mostrarla */
.lb3.lb-staz .sg { display: block; margin-top: 4px; padding: 2px 6px; border-radius: 9px;
  font-style: normal; font-size: 11px; line-height: 14px; max-height: 30px; overflow: hidden;
  max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: break-word;
  color: #bcd6e6; background: rgba(70, 112, 133, .2); border: 1px solid rgba(70, 112, 133, .6); }
/* gli stati: il bordo e la pastiglia cambiano insieme, e la parola resta sempre scritta */
.lb3.lb-staz.st-lavoro { border-color: rgba(98, 220, 255, .9); }
.lb3.lb-staz.st-lavoro .sg { color: #d3f6ff; background: rgba(98, 220, 255, .16); border-color: rgba(98, 220, 255, .7); }
.lb3.lb-staz.st-bloccato { border: 2px solid rgba(255, 181, 71, .9); }
.lb3.lb-staz.st-bloccato em { color: #ffd9a0; }
.lb3.lb-staz.st-bloccato .sg { color: #ffe3b6; background: rgba(255, 181, 71, .16); border-color: rgba(255, 181, 71, .75); }
.lb3.lb-staz.st-errore { border: 2px solid rgba(255, 82, 107, .9); }
.lb3.lb-staz.st-errore .sg { color: #ffd2da; background: rgba(255, 82, 107, .16); border-color: rgba(255, 82, 107, .75); }

/* ---------- la riga di stato di ogni PIANO del funnel ----------
   Stessa idea che sul cervello ha alzato di piu' il voto: la targhetta non dice solo il nome
   e tre numeri, dice se quel piano sta lavorando e, quando e' fermo, PERCHE'. */
.lb3 .stp { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px;
  padding: 2px 9px 2px 7px; border-radius: 10px; font-size: 11.5px; font-family: var(--font);
  color: #cfe0ff; background: rgba(3, 8, 18, .88); border: 1px solid var(--hud-3);
  text-shadow: 0 1px 2px #000; max-width: 240px; line-height: 1.35; }
.lb3 .stp i { width: 8px; height: 8px; border-radius: 50%; background: #4aa8ff; flex: 0 0 auto; }
.lb3 .stp.st-lavoro { border-color: rgba(61, 255, 154, .5); color: #c8ffe4; }
.lb3 .stp.st-lavoro i { background: #3dff9a; box-shadow: 0 0 8px #3dff9a; }
/* il piano fermo per un motivo: ambra, e il motivo scritto. E' la cosa che devi vedere. */
.lb3 .stp.st-fermo { border: 2px solid rgba(255, 182, 72, .75); color: #ffe0b0; background: rgba(30, 16, 2, .94); white-space: normal; }
.lb3 .stp.st-fermo i { background: #ffb648; box-shadow: 0 0 8px #ffb648; }
.lb3 .stp.st-scoperto { border-style: dashed; color: #9aa6bd; }
.lb3 .stp.st-scoperto i { background: transparent; border: 1.5px dashed #6f7a96; }

/* ---------- la riga di stato sopra ogni reparto ----------
   Nome 14 px, attivita' 12 px, pallino 8 px: le misure le ha date Codex, e servono a
   leggere «chi lavora» senza entrare nel reparto. Il colore ripete quello che dice la
   parola, non la sostituisce. */
/* LA TARGHETTA DEL REPARTO E' UNO STRUMENTO, NON UNA DIDASCALIA (misure di Codex).
   184 px di larghezza fissa, testo 14 px con interlinea 18, e fino a DUE RIGHE PIENE.
   Niente `nowrap` e niente puntini di sospensione: prima la causa di un blocco veniva
   tagliata a meta' parola («Le email non partono perche' il Post…») e la riga piu' utile
   di tutta la schermata restava proprio quella che non si poteva leggere.
   Due righe da 18 fanno 36 px: `max-height` le tiene, `overflow:hidden` evita che una frase
   lunghissima sfondi la targhetta, e il testo viene gia' tagliato a fine parola dal codice. */
.lb3.lb-rep { pointer-events: none; }
.lb3.lb-rep .rs { display: flex; align-items: flex-start; gap: 7px; margin-top: 4px;
  width: 184px; box-sizing: border-box; padding: 4px 9px 5px 8px; border-radius: 10px;
  font-size: 14px; line-height: 18px; font-family: var(--font);
  color: #cfe0ff; background: rgba(3, 8, 18, .86); border: 1px solid var(--hud-3);
  text-shadow: 0 1px 2px #000; white-space: normal; overflow-wrap: break-word;
  /* due righe da 18 = 36 px di TESTO; il riquadro conta anche imbottitura e bordo
     (box-sizing: border-box): 36 + 4 + 5 + 4 di bordo = 49. Quattro e non due perché la
     targhetta di un reparto BLOCCATO ha il bordo ambra da 2 px per lato, ed è proprio
     quella che porta la frase lunga: con 47 restava tagliata di due pixel. */
  max-height: 49px; overflow: hidden; text-overflow: clip; }
.lb3.lb-rep .rs .pt { width: 8px; height: 8px; margin-top: 5px; }
.lb3.lb-rep.st-lavoro .rs { border-color: rgba(61, 255, 154, .5); color: #c8ffe4; }
.lb3.lb-rep.st-errore .rs { border-color: rgba(255, 77, 106, .6); color: #ffd2da; }
.lb3.lb-rep.st-assumere .rs { border-style: dashed; color: #9aa6bd; }
/* un reparto BLOCCATO porta scritta la causa, con il bordo ambra da 2 px: il motivo del fermo
   si legge dove il fermo succede, non solo nella colonna di lato */
.lb3.lb-rep.st-bloccato .rs { border: 2px solid rgba(255, 182, 72, .75); color: #ffe0b0;
  background: rgba(30, 16, 2, .92); }

/* ---------- «ASPETTA TE»: la scheda che comanda la schermata ----------
   E' la prima cosa della colonna di destra e la sola con il bordo acceso: quando c'e'
   qualcosa che blocca l'azienda, si deve vedere prima di ogni effetto scenico.
   L'ordine e' quello del danno: prima cio' che ferma il lavoro, poi cio' che lo rallenta. */
.sc.aspetta { border-color: rgba(255, 182, 72, .45); box-shadow: 0 0 0 1px rgba(255, 182, 72, .12), 0 10px 34px rgba(0, 0, 0, .45); }
.sc.aspetta.vuota { border-color: var(--hud-3); box-shadow: none; }
.sc.aspetta .sc-h h4 { color: #ffd08a; }
ul.asp { display: grid; gap: 5px; }
ul.asp li { display: grid; grid-template-columns: 8px minmax(0, 1fr) 12px; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 4px; background: rgba(255, 255, 255, .035); cursor: pointer;
  border-left: 2px solid transparent; transition: background .2s, border-color .2s; }
ul.asp li:hover, ul.asp li:focus { background: rgba(255, 255, 255, .08); outline: none; }
ul.asp li i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
/* una riga per il titolo e una per la spiegazione: se una riga non basta si taglia con i
   puntini, non si va a capo. Cinque righe alte il doppio riempirebbero mezza colonna. */
ul.asp li span { min-width: 0; }
ul.asp li b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.asp li small { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.asp li em { font-style: normal; color: var(--ink-3); font-size: 12px; }
/* il colore dice quanto e' grave, e la parola sotto lo ripete: il colore da solo non basta */
ul.asp li.p0 { border-left-color: #ff4d6a; } ul.asp li.p0 i { background: #ff4d6a; box-shadow: 0 0 8px #ff4d6a; }
ul.asp li.p1 { border-left-color: #ff4d6a; } ul.asp li.p1 i { background: #ff4d6a; }
ul.asp li.p2 { border-left-color: #ffb648; } ul.asp li.p2 i { background: #ffb648; }
ul.asp li.p3 { border-left-color: #7fe9ff; } ul.asp li.p3 i { background: #7fe9ff; }
ul.asp li.p4 { border-left-color: #8b8cf0; } ul.asp li.p4 i { background: #8b8cf0; }

/* il 3D occupa tutto il palco.
   Il fondo scuro su #net e sulla tela non e' decorazione: e' la rete di sicurezza.
   La tela WebGL e' trasparente, e finche' non ha disegnato il primo fotogramma — o se
   il disegno fallisce sulla scheda video di chi guarda — al suo posto si vede quello che
   c'e' sotto. Senza un fondo dichiarato, quel «sotto» puo' finire per essere il bianco
   del browser. Con questo, nel caso peggiore si vede nero, mai bianco. */
#net { position: absolute; inset: 0; overflow: hidden; background: #04060e; }
#net canvas { background: #04060e; }
#net canvas.rete3d { cursor: grab; }
#net canvas.rete3d:active { cursor: grabbing; }
/* LE RIGHE DI SCANSIONE SONO STATE TOLTE.
   Erano un effetto e basta: un velo di righe su TUTTO il palco, per giunta in
   `mix-blend-mode: screen`, che schiarisce quello che ha sotto e sul vuoto tira al bianco.
   In una schermata di controllo ogni pixel che non dice qualcosa toglie contrasto a quelli
   che lo dicono. Il fondo ora e' pulito e i segnali si vedono. */
.stage::after { content: none; }

/* ---------- le etichette olografiche nel 3D ---------- */
/* Gerarchia a colpo d'occhio: logo di Jarvis > targhe dei reparti > MANAGER (Orbitron, grande) > agenti > automazioni.
 * Lo stato è una pastiglia colorata come l'aura: verde al lavoro, blu pronto/fermo, rossa errore, grigia da assumere. */
.lb3 { pointer-events: none; text-align: center; white-space: nowrap; transition: opacity .35s; font-family: var(--font); }
.lb3 b { display: block; color: #eef6ff; font-weight: 600; font-size: 12px; letter-spacing: .01em; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .9); }
.lb3 small { display: block; color: rgba(190, 215, 255, .72); font-size: 10px; font-family: var(--mono); letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
.lb3 .st { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px 1px 6px; border-radius: 9px; background: rgba(2, 6, 14, .82); border: 1px solid rgba(63, 140, 255, .45); color: #9cc6ff; }
.lb3 .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.lb3 .st-lavoro { color: #3dff9a; border-color: rgba(61, 255, 154, .5); }
.lb3 .st-lavoro::before { animation: respira 1.2s ease-in-out infinite; }
.lb3 .st-errore { color: #ff5b76; border-color: rgba(255, 59, 92, .55); }
.lb3 .st-assumere { color: #97a0b8; border-color: rgba(151, 160, 184, .4); border-style: dashed; }
.lb3.lb-man { display: grid; justify-items: center; gap: 1px; padding: 5px 10px 6px; background: rgba(3, 7, 16, .78); border: 1px solid rgba(127, 233, 255, .22); border-radius: 3px; }
.lb3.lb-man .k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; color: #ffd98a; }
.lb3.lb-man b { font-family: var(--orb); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.lb3.lb-man small { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.lb3.lb-ag { display: grid; justify-items: center; gap: 0; }
.lb3.lb-ag b { font-size: 11.5px; }
.lb3.lb-ag small { display: none; }
.lb3.lb-ag .st { font-size: 8.5px; }
.lb3.lb-op { display: grid; justify-items: center; }
.lb3.lb-op b { font-size: 10px; font-weight: 500; color: rgba(210, 228, 255, .88); }
.lb3.lb-op .st { font-size: 8px; padding: 0 6px; margin-top: 2px; }
.lb3.lb-sat b { font-size: 10px; font-weight: 500; color: rgba(225, 236, 255, .9); max-width: 152px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 7px; background: rgba(3, 8, 18, .72); border-radius: 3px; }
/* il nome di un pallino: si vede solo quando si sceglie la persona a cui appartiene */
.lb3.lb-dato { transition: opacity .3s; }
.lb3.lb-dato b { font-size: 9.5px; font-weight: 600; color: #eaf2ff; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 7px; background: rgba(3, 8, 18, .8); border: 1px solid rgba(127, 233, 255, .18); border-radius: 3px; }
.lb3.lb-dato small { font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: rgba(160, 190, 235, .6); margin-top: 1px; }
/* le due colonne ai lati dell'agente: le scritte vanno in fuori, non addosso alla faccia */
.lb3.lb-sat-dx { translate: 50% 0; text-align: left; }
.lb3.lb-sat-sx { translate: -50% 0; text-align: right; }
/* il nome di un reparto/piano da fuori: solo il nome e un punto che dice se lì dentro si lavora */
.lb3.lb-nome { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; background: rgba(3, 7, 16, .74); border: 1px solid rgba(127, 233, 255, .2); border-radius: 3px; cursor: default;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.lb3.lb-nome b { font-family: var(--orb); font-size: 12.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--c, #eef6ff); text-shadow: 0 0 14px var(--c, rgba(127, 233, 255, .55)), 0 1px 2px #000; }
.lb3.lb-nome .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--s); box-shadow: 0 0 9px var(--s); flex: none; }
.lb3.lb-nome .pt.viva { animation: respira 1.3s ease-in-out infinite; }
.lb3.lb-nome .lb-vai { margin: 0 0 0 4px; width: auto; padding: 3px 9px; font-size: 9px; }
/* il nome del reparto è scritto per terra in 3D: qui resta solo il semaforo, senza cornice */
.lb3.lb-nome.lb-solopt { padding: 4px; background: none; border: none; clip-path: none; }
.lb3.lb-zona b { font-size: 11px; color: #ffd8a8; } .lb3.lb-zona small { font-size: 9px; }
/* i DEPOSITI del funnel: dove le cose si fermano. Numero grande, nome, e il pulsante che apre l'elenco vero. */
.lb3.lb-dep { pointer-events: none; }
.lb3.lb-dep .dep-b { pointer-events: auto; display: grid; justify-items: center; gap: 1px; padding: 6px 13px 7px; cursor: pointer;
  background: rgba(3, 8, 18, .84); border: 1px solid var(--hud-3); border-radius: 4px; color: inherit; font: inherit; text-align: center;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background .18s, border-color .18s; }
.lb3.lb-dep .dep-b:hover { background: rgba(10, 24, 48, .94); border-color: var(--hud-2); }
.lb3.lb-dep em { font-style: normal; font-family: var(--mono); font-size: 20px; font-weight: 700; color: #fff; line-height: 1.05; text-shadow: 0 0 14px rgba(127, 233, 255, .5); }
.lb3.lb-dep b { font-family: var(--orb); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #dbe9ff; }
.lb3.lb-dep small { font-size: 9px; color: rgba(185, 210, 245, .7); max-width: 160px; white-space: normal; line-height: 1.25; }
.lb3.lb-dep i { font-style: normal; margin-top: 3px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--hud-2); }
.lb3.lb-rep, .lb3.lb-piano { padding: 7px 12px 8px; border-radius: 4px; background: rgba(4, 9, 20, .86); border: 1px solid var(--hud-3); text-align: left; min-width: 184px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); box-shadow: inset 0 0 22px rgba(127, 233, 255, .06); }
.lb3.lb-rep .k, .lb3.lb-piano .k { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: var(--hud-2); }
.lb3.lb-rep b, .lb3.lb-piano b { font-family: var(--orb); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c, #eef6ff); margin: 2px 0 3px; text-shadow: 0 0 12px var(--c, rgba(127, 233, 255, .5)); }
.lb3.lb-rep b { font-size: 14px; line-height: 18px; }   /* nome del reparto: 14/18, come la riga di stato */
.lb3.lb-rep small em { font-style: normal; } .lb3 em.lav-si { color: #3dff9a; } .lb3 em.lav-no { color: #9cc6ff; } .lb3 em.err { color: #ff5b76; }
.lb3.lb-rep .barra { display: flex; gap: 3px; margin-top: 6px; }
.lb3.lb-rep .barra em { width: 10px; height: 4px; border-radius: 1px; background: var(--s); box-shadow: 0 0 6px var(--s); }
.lb3.lb-piano { min-width: 0; translate: 50% 0; padding: 5px 10px 6px; }
.lb3.lb-piano .k { font-size: 8.5px; letter-spacing: .16em; }
.lb3.lb-piano .nums { column-gap: 12px; }
.lb3.lb-piano .nums em { font-size: 14px; }
.lb3.lb-destra { translate: 50% 0; text-align: left; }
.lb3.lb-piano b { font-size: 11px; letter-spacing: .06em; text-transform: none; font-family: var(--font); font-weight: 700; color: #eaf3ff; text-shadow: none; }
.lb3.lb-piano .nums { display: flex; gap: 14px; margin-top: 4px; }
.lb3.lb-piano .nums em { font-style: normal; font-family: var(--mono); font-size: 16px; font-weight: 700; color: #fff; display: block; }
.lb3.lb-piano .nums i { font-style: normal; font-size: 9.5px; color: rgba(190, 215, 255, .75); display: block; margin-top: -2px; }
.lb3.lb-piano .nums > em + i { margin-right: 0; }
.lb3.lb-piano .nums { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; column-gap: 16px; }
.lb3 em.blu { font-style: normal; color: #6fb6ff; }
.lb3.lb-corona b { --c: #ffd98a; }
.lb3.lb-archivio b { --c: #9cc4ff; }
.lb3.lb-esec b { --c: #9cc4ff; }
.lb3 .lb-vai { pointer-events: auto; margin-top: 7px; display: block; width: 100%; padding: 5px 10px; font-family: var(--orb); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #eafcff; background: rgba(127, 233, 255, .1); border: 1px solid var(--hud-2); border-radius: 3px; cursor: pointer; }
.lb3 .lb-vai:hover { background: rgba(127, 233, 255, .22); }
.lb3.lb-socio { display: grid; justify-items: center; gap: 2px; }
.lb3.lb-socio i { font-style: normal; font-family: var(--orb); font-weight: 800; font-size: 13px; color: #1a1206; background: radial-gradient(circle, #fff3d6, #ffc46b); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 16px #ffc46b; }
.lb3.lb-canale b { color: #9fd2ff; }
.lb3.lb-gruppo b { font-family: var(--orb); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); text-shadow: 0 0 10px var(--c), 0 1px 2px #000; }
.lb3.lb-tab b { font-size: 10px; font-weight: 600; color: #e6f0ff; }
.lb3.lb-tab small { font-size: 8.5px; opacity: .6; }
.lb3.lb-fonte b { font-size: 11px; font-weight: 700; color: #cfe8ff; }
.lb3.lb-fonte small { font-size: 9.5px; color: #9fc2e8; }
.lb3.lb-barriera { padding: 4px 9px; border: 1px solid rgba(74, 168, 255, .6); background: rgba(3, 12, 30, .85); border-radius: 3px; }
.lb3.lb-barriera b { color: #6fb6ff; font-size: 11px; } .lb3.lb-barriera small { color: #9cc6ff; }
.lb3.lb-pacco { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; font-size: 10.5px; color: #eef6ff; background: rgba(3, 8, 18, .85); border: 1px solid rgba(127, 233, 255, .25); border-radius: 10px; transition: none; }
.lb3.lb-pacco i { font-style: normal; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; color: #02040a; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* il logo nel nucleo: sempre nitido, grande quanto il nucleo */
.lb3.lb-logo { --s: 1; transition: none; display: grid; justify-items: center; gap: calc(var(--s) * 3px); }
.lb3.lb-logo b { font-family: var(--orb); font-weight: 900; font-size: clamp(12px, calc(var(--s) * 30px), 66px); letter-spacing: .16em; margin-right: -.16em; color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 calc(var(--s) * 14px) var(--hud), 0 0 calc(var(--s) * 30px) rgba(127, 233, 255, .6), 0 2px 3px rgba(0, 0, 0, .9); }
.lb3.lb-logo small { font-family: var(--orb); font-weight: 600; font-size: clamp(7px, calc(var(--s) * 10px), 22px); letter-spacing: .42em; margin-right: -.42em; color: #dffaff; text-shadow: 0 0 8px var(--hud), 0 1px 2px #000; }
.lb3.lb-ingr-w { pointer-events: none; }
.lb-ingr { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border: 1px solid var(--hud-2); border-radius: 12px; background: rgba(3, 10, 22, .8); color: #dffaff; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 16px rgba(127, 233, 255, .15); }
.lb-ingr svg { width: 14px; height: 14px; fill: var(--hud); animation: gira 8s linear infinite; }
.lb-ingr:hover { background: rgba(127, 233, 255, .16); }
@keyframes gira { to { transform: rotate(360deg); } }

/* il suggerimento quando passi sopra */
#net .ntip { background: rgba(4, 9, 20, .94); border: 1px solid var(--hud-3); border-radius: 4px; max-width: 320px; white-space: normal;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
#net .ntip span { font-family: var(--mono); letter-spacing: .12em; color: var(--hud-2); }
#net .ntip span em { font-style: normal; } #net .ntip .st-lavoro { color: #3dff9a; } #net .ntip .st-errore { color: #ff5b76; } #net .ntip .st-pronto, #net .ntip .st-fermo { color: #6fb6ff; }
#net .ntip b { font-family: var(--orb); letter-spacing: .06em; }
#net .ntip p.dati { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hud-3); font-size: 11px; color: #cfe3ff; }

/* la legenda del cervello: chi è chi e cosa dicono i colori */
.leg3d { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 7px 14px; font-size: 11px; color: #cfe0ff; background: rgba(3, 8, 18, .72); border: 1px solid var(--hud-3); border-radius: 4px; pointer-events: none; max-width: calc(100% - 40px); }
.leg3d span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.leg3d i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); box-shadow: 0 0 6px var(--c); }
.leg3d i.tr { border-style: dashed; box-shadow: none; }
.leg3d b { font-family: var(--orb); font-size: 10px; letter-spacing: .1em; color: #fff; }
.app.in-conversazione .leg3d { opacity: 0; }
@media (max-width: 900px) { .leg3d { display: none; } }

/* ---------- i pannelli laterali: vetro e angoli HUD ---------- */
.sc { border-radius: 4px; border: 1px solid var(--hud-3); background: var(--vetro); box-shadow: inset 0 0 28px rgba(127, 233, 255, .045);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.sc::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 2px; background: var(--hud); box-shadow: 0 0 10px var(--hud); }
.sc-h h4 { font-family: var(--orb); font-size: 10px; letter-spacing: .2em; color: var(--hud); text-shadow: 0 0 10px rgba(127, 233, 255, .45); }
.sc-h span { font-family: var(--mono); font-size: 10px; }
.sc .num, .sc b.num { font-family: var(--mono); }
.vista-seg { border-radius: 4px; border-color: var(--hud-3); background: rgba(4, 8, 18, .72); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.vista-seg button { font-family: var(--orb); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; }
.vista-seg button.on { background: rgba(127, 233, 255, .12); color: #eafcff; box-shadow: inset 0 -2px 0 var(--hud); }
.legend { border-radius: 4px; border-color: var(--hud-3); background: rgba(4, 8, 18, .6); font-family: var(--mono); font-size: 10.5px; }
.legend.leg-v2 { gap: 5px 14px; align-items: center; }
.legend.leg-v2 span { display: inline-flex; align-items: center; gap: 6px; }
.legend.leg-v2 .sep { width: 1px; height: 14px; background: var(--hud-3); }
.legend.leg-v2 b.lg-m { font-family: var(--orb); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #fff; }
.legend.leg-v2 b.lg-a { font-size: 10.5px; font-weight: 600; color: #dfe9ff; }
.legend.leg-v2 i.esa { width: 11px; height: 12px; background: none; border: 1.5px solid #7fb2ff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.legend.leg-v2 i.au { width: 11px; height: 11px; border-radius: 50%; background: none; border: 2px solid var(--c); box-shadow: 0 0 7px var(--c); }
.legend.leg-v2 i.au.tr { border-style: dashed; box-shadow: none; }
.vista-seg button.btn-nucleo { display: inline-flex; align-items: center; gap: 6px; color: #eafcff; }
.vista-seg button.btn-nucleo svg { width: 14px; height: 14px; fill: var(--hud); }
.vista-seg button.btn-nucleo:hover svg, .vista-seg button.btn-nucleo.on svg { animation: gira 6s linear infinite; }
.mostra-pop, .pan-nucleo { border-radius: 4px !important; border: 1px solid var(--hud-3) !important; background: rgba(4, 9, 20, .9) !important; }

/* in conversazione con Jarvis il palco è tutto suo */
.app.in-conversazione .side, .app.in-conversazione .legend, .app.in-conversazione .mostra-pop, .app.in-conversazione .pan-nucleo { opacity: 0; pointer-events: none; }
/* LA BARRA IN ALTO NON SI SPEGNE MAI.
   Prima stava in quell'elenco: durante una conversazione andava a opacita' zero e
   pointer-events none, e la tela 3D sotto si prendeva i clic. Se la conversazione restava
   aperta per un inceppo, i tasti Cervello/Esecutivo/Elenco morivano finche' non ricaricavi
   la pagina — ed e' esattamente il guasto che Raniero vedeva dopo dieci minuti d'uso.
   Adesso si attenua e basta: si vede meno, ma si clicca sempre. */
.app.in-conversazione .vista-seg { opacity: .42; }
.app.in-conversazione .vista-seg:hover { opacity: 1; }
.app.in-conversazione .side.l { transform: translateX(-30px); } .app.in-conversazione .side.r { transform: translateX(30px); }
.conv-voce { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border: 1px solid var(--hud-2); background: rgba(3, 10, 22, .85); border-radius: 4px; font-size: 12.5px; color: #dff8ff; box-shadow: 0 0 30px rgba(127, 233, 255, .18); }
.conv-voce i { width: 9px; height: 9px; border-radius: 50%; background: #3dff9a; box-shadow: 0 0 10px #3dff9a; animation: respira 1.6s ease-in-out infinite; }
.conv-voce button { font-size: 11.5px; padding: 4px 10px; border: 1px solid var(--hud-3); border-radius: 3px; color: #cfefff; }
.conv-voce button:hover { background: rgba(127, 233, 255, .12); }
@keyframes respira { 50% { opacity: .35; transform: scale(.8); } }

/* ---------- il pannello del nucleo ---------- */
.pan-nucleo { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 9; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 170px); overflow-y: auto; padding: 14px 16px 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
.pn-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.pn-h b { font-family: var(--orb); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--hud); }
.pn-h span { font-size: 11px; color: var(--ink-3); }
.pn-h button { font-size: 18px; color: var(--ink-3); padding: 0 4px; } .pn-h button:hover { color: var(--ink); }
.pn-sez { margin: 12px 0 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--hud-2); }
.pn-preset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pn-preset button { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 3px; font-size: 12px; color: var(--ink-2); }
.pn-preset button i { width: 26px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 10px rgba(255, 255, 255, .15); }
.pn-preset button.on { border-color: var(--hud-2); color: var(--ink); background: rgba(127, 233, 255, .08); }
.pn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.pn-col { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.pn-col input { width: 30px; height: 22px; border: 1px solid var(--line-2); border-radius: 3px; background: none; padding: 0; cursor: pointer; }
.pn-sl { display: grid; grid-template-columns: 190px minmax(0, 1fr) 42px; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); margin: 4px 0; }
.pn-sl input { width: 100%; accent-color: var(--hud); }
.pn-sl em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--hud); text-align: right; }
.pn-seg { display: inline-flex; gap: 4px; } .pn-seg button { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 3px; font-size: 12px; text-transform: capitalize; color: var(--ink-2); }
.pn-seg button.on { border-color: var(--hud-2); color: var(--ink); background: rgba(127, 233, 255, .08); }
.pn-tog { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 4px; font-size: 12px; color: var(--ink-2); } .pn-tog input { accent-color: var(--hud); }
@media (max-width: 640px) { .pn-sl { grid-template-columns: minmax(0, 1fr) 42px; } .pn-sl input { grid-column: 1 / -1; } .pn-preset { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- i lavori in corso ---------- */
.lavori-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--hud-3); border-radius: 3px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.lavori-chip i { width: 8px; height: 8px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 8px #ffd98a; }
.lavori-chip.lavora i { background: #3dff9a; box-shadow: 0 0 8px #3dff9a; animation: respira 1.4s ease-in-out infinite; }
.lavori-chip span { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.lavori-chip em { font-style: normal; }
.lavori-chip:hover { border-color: var(--hud-2); color: var(--ink); }
@media (max-width: 900px) { .lavori-chip em { display: none; } }
.lavori-pop { position: fixed; top: 58px; right: 18px; z-index: 70; width: min(440px, calc(100% - 24px)); max-height: 70vh; overflow-y: auto; padding: 10px; border: 1px solid var(--hud-3); border-radius: 4px; background: rgba(4, 9, 20, .95); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.lp-h { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
.lp-h b { font-family: var(--orb); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--hud); }
.lp-h span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .lp-h button { margin-left: auto; font-size: 18px; color: var(--ink-3); }
.lp-r { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: 100%; padding: 9px 8px; border-radius: 3px; text-align: left; border-left: 2px solid transparent; }
.lp-r:hover { background: rgba(127, 233, 255, .06); }
.lp-r.ora { border-left-color: #3dff9a; }
.lp-r canvas { width: 34px; height: 34px; }
.lp-r span { display: grid; gap: 2px; font-size: 12.5px; color: var(--ink); }
.lp-r em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.lp-r small { font-size: 11px; color: var(--ink-3); }

/* ---------- la spiegazione dopo un'azione importante ---------- */
.spiega { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(1, 3, 8, .55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.spiega.on { opacity: 1; }
.spiega-card { width: min(560px, calc(100% - 32px)); padding: 20px 22px; border: 1px solid var(--hud-2); background: rgba(4, 10, 22, .96); border-radius: 4px; box-shadow: 0 0 60px rgba(127, 233, 255, .15);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.spiega-card .kick { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--hud-2); }
.spiega-card h2 { font-family: var(--orb); font-size: 17px; letter-spacing: .06em; margin: 6px 0 12px; color: #eafcff; }
.spiega-passi { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 9px; }
.spiega-passi li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: 13px; color: var(--ink-2); }
.spiega-passi b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--hud); text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }

/* ---------- il percorso di una richiesta ---------- */
.percorso { margin: 8px 0 10px; }
.percorso ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 8px; padding: 0; list-style: none; }
.percorso li { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); padding-right: 10px; position: relative; }
.percorso li + li::before { content: ""; width: 12px; height: 1px; background: var(--line-3); margin-right: 4px; }
.percorso li i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-3); flex: none; }
.percorso li.fatto { color: var(--ink-2); } .percorso li.fatto i { background: #3dff9a; border-color: #3dff9a; box-shadow: 0 0 6px #3dff9a; }
.percorso li.ora { color: #eafcff; font-weight: 600; } .percorso li.ora i { background: #ffd98a; border-color: #ffd98a; box-shadow: 0 0 8px #ffd98a; animation: respira 1.4s ease-in-out infinite; }
.percorso li.no i { background: #ff3b5c; border-color: #ff3b5c; }
.percorso p { font-size: 12.5px; color: var(--ink-2); padding: 8px 10px; border-left: 2px solid #ffd98a; background: rgba(255, 217, 138, .05); }
.percorso p b { color: #ffd98a; }

/* ---------- il caveau: PIN + passkey, la porta blindata che si apre ---------- */
.caveau { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; align-content: center; gap: 26px; background: radial-gradient(90% 80% at 50% 45%, #061228 0%, #02040b 60%, #010207 100%); overflow: hidden; transition: opacity .6s ease; }
.caveau[hidden] { display: none; }
.cv-griglia { position: absolute; inset: -20%; background:
  repeating-linear-gradient(0deg, rgba(127, 233, 255, .045) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(127, 233, 255, .045) 0 1px, transparent 1px 48px);
  transform: perspective(700px) rotateX(58deg) translateY(18%); transform-origin: 50% 100%; mask-image: linear-gradient(to top, #000 10%, transparent 75%); animation: cvScorre 6s linear infinite; }
@keyframes cvScorre { to { background-position: 0 48px, 0 0; } }
.cv-porta { --d: min(62vmin, 420px); position: relative; width: var(--d); height: var(--d); }
.cv-meta { position: absolute; top: 0; bottom: 0; width: 50%; background: radial-gradient(circle at 100% 50%, #0d1c38 0%, #081226 55%, #050b18 100%); border: 1px solid rgba(127, 233, 255, .22); transition: transform 1.1s cubic-bezier(.7, 0, .2, 1) .35s, opacity .6s ease 1.1s; }
.cv-meta.sx { left: 0; border-radius: 999px 0 0 999px; border-right: 0; box-shadow: inset 20px 0 60px rgba(0, 0, 0, .6); }
.cv-meta.dx { right: 0; border-radius: 0 999px 999px 0; border-left: 0; box-shadow: inset -20px 0 60px rgba(0, 0, 0, .6); background: radial-gradient(circle at 0% 50%, #0d1c38 0%, #081226 55%, #050b18 100%); }
.cv-anelli { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform 1.1s cubic-bezier(.7, 0, .2, 1) .35s, opacity .7s ease .9s; }
.cv-anelli circle { fill: none; }
.cv-a1 { stroke: rgba(127, 233, 255, .5); stroke-width: 2; }
.cv-tacche { stroke: rgba(127, 233, 255, .55); stroke-width: 10; stroke-dasharray: 1 5; }
.cv-a2 { stroke: url(#cvG); stroke-width: 4; stroke-dasharray: 26 4 8 4 34 4 12 8; filter: drop-shadow(0 0 6px rgba(127, 233, 255, .7)); }
.cv-a3 { stroke: rgba(180, 107, 255, .8); stroke-width: 3; stroke-dasharray: 60 8 20 12; }
.cv-tacche2 { stroke: rgba(127, 233, 255, .35); stroke-width: 6; stroke-dasharray: 1 3; }
.cv-a4 { stroke: rgba(127, 233, 255, .9); stroke-width: 2; stroke-dasharray: 8 6; }
.cv-bulloni rect { fill: #9fb4d8; stroke: rgba(255, 255, 255, .5); stroke-width: 1; transition: fill .3s, transform .5s cubic-bezier(.5, 0, .2, 1); }
.cv-giro1, .cv-giro2, .cv-giro3, .cv-bulloni { transform-origin: 200px 200px; }
.cv-giro1 { animation: cvGiro 40s linear infinite; } .cv-giro2 { animation: cvGiro 26s linear infinite reverse; } .cv-giro3 { animation: cvGiro 14s linear infinite; }
@keyframes cvGiro { to { transform: rotate(360deg); } }
.cv-cuore { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #0b2140 0%, #050c1c 70%); border: 1px solid rgba(127, 233, 255, .35); box-shadow: 0 0 40px rgba(127, 233, 255, .18), inset 0 0 30px rgba(127, 233, 255, .12); overflow: hidden; transition: box-shadow .4s, border-color .4s, opacity .5s ease .9s; }
.cv-volto { width: 52%; height: 52%; fill: none; stroke: #9ff2ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(127, 233, 255, .8)); transition: stroke .3s; }
.cv-scan { position: absolute; left: 8%; right: 8%; height: 2px; top: 20%; background: linear-gradient(90deg, transparent, #7fe9ff, transparent); box-shadow: 0 0 14px #7fe9ff; opacity: 0; }
.caveau.scansione .cv-scan { opacity: 1; animation: cvScan 1.6s ease-in-out infinite alternate; }
@keyframes cvScan { from { top: 18%; } to { top: 80%; } }
.caveau.verifica .cv-giro1 { animation-duration: 3s; } .caveau.verifica .cv-giro2 { animation-duration: 2s; } .caveau.verifica .cv-giro3 { animation-duration: 1.2s; }
.caveau.no .cv-porta { animation: cvNo .5s; } .caveau.no .cv-cuore { border-color: #ff3b5c; box-shadow: 0 0 50px rgba(255, 59, 92, .45); } .caveau.no .cv-volto { stroke: #ff6b82; }
@keyframes cvNo { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
/* sbloccato: il cuore diventa verde, i bulloni si accendono, gli anelli accelerano */
.caveau.sbloccato .cv-cuore { border-color: #3dff9a; box-shadow: 0 0 70px rgba(61, 255, 154, .6), inset 0 0 40px rgba(61, 255, 154, .25); }
.caveau.sbloccato .cv-volto { stroke: #3dff9a; filter: drop-shadow(0 0 10px #3dff9a); }
.caveau.sbloccato .cv-bulloni rect { fill: #3dff9a; }
.caveau.sbloccato .cv-a2, .caveau.sbloccato .cv-a4 { stroke: #3dff9a; }
.caveau.sbloccato .cv-giro1 { animation-duration: 1.4s; } .caveau.sbloccato .cv-giro2 { animation-duration: 1s; } .caveau.sbloccato .cv-giro3 { animation-duration: .7s; }
.caveau.sbloccato .cv-testo h2 { color: #3dff9a; text-shadow: 0 0 22px rgba(61, 255, 154, .6); }
.cv-porta::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(230, 255, 240, .95), rgba(61, 255, 154, .45) 40%, transparent 70%); opacity: 0; transform: scale(.2); }
.caveau.aperto .cv-porta::after { animation: cvLampo 1.1s ease-out .25s forwards; }
@keyframes cvLampo { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(5); } }
.caveau.aperto .cv-cuore { border-color: #3dff9a; box-shadow: 0 0 60px rgba(61, 255, 154, .55); opacity: 0; } .caveau.aperto .cv-volto { stroke: #3dff9a; }
.caveau.aperto .cv-bulloni rect { fill: #3dff9a; }
.caveau.aperto .cv-bulloni { animation: cvBulloni .45s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes cvBulloni { to { transform: scale(1.14); opacity: .2; } }
.caveau.aperto .cv-giro1, .caveau.aperto .cv-giro2, .caveau.aperto .cv-giro3 { animation-duration: .5s; }
.caveau.aperto .cv-anelli { transform: scale(1.6) rotate(40deg); opacity: 0; }
.caveau.aperto .cv-meta.sx { transform: translateX(-120%); opacity: 0; } .caveau.aperto .cv-meta.dx { transform: translateX(120%); opacity: 0; }
.caveau.aperto .cv-testo { opacity: 0; transform: translateY(12px); }
.caveau.via { opacity: 0; pointer-events: none; }
.cv-testo { position: relative; text-align: center; display: grid; gap: 8px; justify-items: center; transition: opacity .4s, transform .4s; }
.cv-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .32em; color: var(--hud-2); }
.cv-testo h2 { font-family: var(--orb); font-size: clamp(18px, 3.2vw, 26px); letter-spacing: .12em; text-transform: uppercase; color: #eafcff; text-shadow: 0 0 18px rgba(127, 233, 255, .5); margin: 0; }
.cv-testo p { color: #a9c4e8; font-size: 13.5px; margin: 0; max-width: 460px; }
.caveau.aperto .cv-testo h2 { color: #3dff9a; }
.cv-az { display: grid; gap: 10px; justify-items: center; margin-top: 8px; }
.cv-btn { padding: 11px 26px; font-family: var(--orb); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #02101c; background: linear-gradient(135deg, #7fe9ff, #3fa8ff); border: 0; border-radius: 3px; cursor: pointer; box-shadow: 0 0 30px rgba(127, 233, 255, .35); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.cv-btn:hover { filter: brightness(1.12); }
.cv-link { font-size: 12px; color: #8fb4e0; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.cv-codice { display: flex; gap: 8px; margin-top: 6px; }
.cv-codice input { width: 150px; padding: 10px 12px; font-family: var(--mono); font-size: 20px; letter-spacing: .3em; text-align: center; color: #eafcff; background: rgba(4, 12, 26, .9); border: 1px solid var(--hud-2); border-radius: 3px; }
/* la proposta di attivare la passkey dopo l'ingresso */
.pk-proposta { position: fixed; right: 20px; bottom: 110px; z-index: 80; width: min(380px, calc(100% - 32px)); padding: 16px 18px; background: rgba(4, 10, 22, .96); border: 1px solid var(--hud-2); border-radius: 4px; box-shadow: 0 0 40px rgba(127, 233, 255, .15), 0 20px 50px rgba(0, 0, 0, .6); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.pk-proposta b { display: block; font-family: var(--orb); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--hud); margin-bottom: 6px; }
.pk-proposta p { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.pk-proposta .btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- l'organigramma di un reparto: chi comanda chi, chi è attivo, cosa sta facendo ---------- */
.org { list-style: none; margin: 6px 0 12px; padding: 0; --ramo: rgba(127, 233, 255, .34); }
.org ul { list-style: none; margin: 0 0 0 14px; padding: 0 0 0 18px; position: relative; }
/* il tronco che scende dal capo */
.org ul::before { content: ""; position: absolute; left: 0; top: -4px; bottom: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--ramo), rgba(127, 233, 255, .1)); }
.org li { position: relative; }
/* il ramo che va da TOM al suo agente: una curva vera, non un trattino */
.org ul > li::before { content: ""; position: absolute; left: -18px; top: 12px; width: 15px; height: 10px;
  border-left: 2px solid var(--ramo); border-bottom: 2px solid var(--ramo); border-bottom-left-radius: 8px; }
/* l'ultimo figlio chiude il ramo: il tronco non prosegue oltre */
.org ul > li:last-child::after { content: ""; position: absolute; left: -19px; top: 22px; bottom: -2px; width: 4px; background: var(--card); }
.orow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 3px; text-align: left; border-left: 2px solid transparent; }
.orow:hover { background: rgba(127, 233, 255, .07); border-left-color: var(--c); }
.orow canvas.av { width: 28px; height: 28px; }
.orow .nm { min-width: 0; }
.orow .nm b { display: block; font-size: 12.5px; color: var(--ink); }
.orow .nm small { display: block; font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .st { display: grid; justify-items: end; gap: 2px; }
.orow .st em { font-style: normal; font-size: 10.5px; color: var(--ink-3); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .st em.ora { color: #3dff9a; }
.org .gr > .ramo-t { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding: 9px 0 2px 6px; }
/* il capo del ramo: fascia con il colore del reparto e la corona */
.org li.capo > .orow { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); border-left-color: var(--c); }
.org li.capo > .orow .nm b { font-family: var(--orb); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.org li.capo > .orow .nm b::after { content: "♦"; margin-left: 6px; font-size: 9px; color: var(--c); vertical-align: 1px; }
/* il pallino del ramo: verde se sta lavorando adesso */
.org .orow { position: relative; }
.org ul > li > .orow::before { content: ""; position: absolute; left: -22px; top: 17px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ramo); box-shadow: 0 0 0 3px var(--card); }
.org ul > li > .orow.viva::before { background: #3dff9a; box-shadow: 0 0 0 3px var(--card), 0 0 9px #3dff9a; }

/* le due viste dello stesso piano: in prospettiva o in pianta tecnica */
.vista .tc-h { flex-wrap: wrap; }
.vista-sw { display: flex; gap: 6px; margin-left: auto; }
.vista-sw .btn.on { background: rgba(140,180,255,.16); border-color: rgba(150,190,255,.5); color: var(--ink); }
.vista-f { display: none; }
.vista-f.on { display: block; }

/* ---------- LA SCENA di un piano: 2.5D isometrico ----------
   Il colore e' RISERVATO ALLO STATO. Edificio e mobili sono grigio-blu spenti:
   se qualcosa e' colorato, vuol dire qualcosa. */
.scena { width: 100%; height: auto; max-height: calc(100vh - 262px); display: block; margin: 0 auto; }
.scena text { font-family: var(--font, "Segoe UI", system-ui, sans-serif); fill: var(--ink, #e8eff7); }

/* il pavimento e gli anelli di progetto */
.scena .pav-b { fill: #131f31; stroke: rgba(150,175,225,.22); stroke-width: 1.2; }
.scena .pav-a { fill: none; stroke: rgba(150,175,225,.14); stroke-width: 1; stroke-dasharray: 8 7; }

/* i muri: pieni, spenti, con il filo in cima acceso appena */
.scena .mur-f { fill: #1b2a40; stroke: rgba(150,175,225,.2); stroke-width: .8; }
.scena .mur-c { fill: none; stroke: rgba(190,212,255,.55); stroke-width: 2; }
.scena .mur-l { fill: none; stroke: var(--c); stroke-width: 1; opacity: .35; }

/* le porte: un vano scuro nel muro */
.scena .por-v { fill: #0a1120; stroke: var(--c); stroke-width: 1.2; stroke-opacity: .5; }
.scena .por-s { stroke: var(--c); stroke-width: 2.4; opacity: .8; }
.scena .por-t { font-family: var(--mono, Consolas, monospace); font-size: 10.5px; fill: var(--ink-3, #8b9ab5); text-anchor: middle; letter-spacing: .1em; }

/* il percorso del lavoro */
.scena .via { fill: none; stroke: var(--c); stroke-width: 2.4; opacity: .5; stroke-linecap: round; }
.scena .via-f { fill: var(--c); opacity: .85; }

/* il deposito al centro: la coda */
.scena .dep { cursor: pointer; }
.scena .dep-o { fill: rgba(140,170,255,.07); stroke: var(--c); stroke-width: 1.4; stroke-opacity: .5; }
.scena .dep-corpo { fill: #21354f; stroke: var(--c); stroke-width: 1; stroke-opacity: .5; }
.scena .dep-cima { fill: #2e4a6e; stroke: rgba(200,220,255,.5); stroke-width: 1.2; }
.scena .dep:hover .dep-cima { fill: #3a5c86; }
.scena .dep.vuoto .dep-o { stroke-dasharray: 7 6; stroke-opacity: .32; }
.scena .dep-n { font-family: var(--mono, Consolas, monospace); font-size: 34px; font-weight: 700; fill: #fff; text-anchor: middle; }
.scena .dep.vuoto .dep-n { font-size: 17px; fill: var(--ink-3, #8b9ab5); font-weight: 500; }
.scena .dep-t { font-family: var(--orb, "Segoe UI", sans-serif); font-size: 9.5px; letter-spacing: .13em; fill: var(--ink-2, #b6c4dd); text-anchor: middle; }

/* le postazioni */
.scena .staz { cursor: pointer; }
.scena .mob.f-alto { fill: #253854; } .scena .mob.f-sx { fill: #1a2942; } .scena .mob.f-dx { fill: #1f3149; }
.scena .mob { stroke: rgba(150,175,225,.22); stroke-width: .8; }
.scena .staz:hover .mob.f-alto { fill: #2f4668; }
/* l'aura a terra: dice lo stato, ed e' l'unica cosa colorata sotto i piedi */
.scena .sta-aura { fill: #7d8ca6; opacity: .16; }
.scena .st-lavoro   .sta-aura { fill: #2ee6c6; opacity: .3; }
.scena .st-fermo    .sta-aura { fill: #7d8ca6; opacity: .2; }
.scena .st-ritardo  .sta-aura { fill: #ffb648; opacity: .26; }
.scena .st-errore   .sta-aura { fill: #ff4d6a; opacity: .34; }
.scena .st-assumere .sta-aura { fill: none; stroke: #55617a; stroke-width: 1.6; stroke-dasharray: 6 5; }
/* la coda: al massimo cinque tacche piu' il numero */
.scena .tacca.f-alto { fill: #d9e4f5; } .scena .tacca.f-sx { fill: #97a8c2; } .scena .tacca.f-dx { fill: #b3c2da; }
.scena .tacca { stroke: rgba(20,30,48,.45); stroke-width: .6; }
.scena .coda-n { font-family: var(--mono, Consolas, monospace); font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; }

/* il blocco: l'unica cosa rossa dentro la sala */
.scena .blo-f { fill: rgba(255,60,90,.82); stroke: #ff4d6a; stroke-width: 1.2; }
.scena .blo-c { stroke: #ffd2da; stroke-width: 2.6; }

/* gli scarti, fuori dal muro */
.scena .scarto { cursor: pointer; }
.scena .sca-v { stroke: rgba(150,160,185,.34); stroke-width: 1.4; stroke-dasharray: 4 5; }
.scena .sca-b.f-alto { fill: #2a3346; } .scena .sca-b.f-sx { fill: #1b2231; } .scena .sca-b.f-dx { fill: #222b3c; }
.scena .sca-b { stroke: rgba(150,160,185,.4); stroke-width: .9; }
.scena .sca-n { font-family: var(--mono, Consolas, monospace); font-size: 15px; font-weight: 700; fill: #cfd8ea; text-anchor: middle; }
.scena .sca-t { font-size: 10.5px; fill: var(--ink-3, #8b9ab5); text-anchor: middle; }

/* I PANNELLI: nome, stato a parole, da quanto, cosa sta facendo, quanto ha in coda */
.scena .sch-l { stroke: rgba(160,180,220,.3); stroke-width: 1; fill: none; }
.scena .sch-b { fill: rgba(11,18,32,.93); stroke: rgba(150,175,225,.24); stroke-width: 1; }
.scena .sch-s { fill: #7d8ca6; }
.scena .sch-lavoro   .sch-s, .scena .sch-lavoro   .sch-pal { fill: #2ee6c6; }
.scena .sch-fermo    .sch-s, .scena .sch-fermo    .sch-pal { fill: #7d8ca6; }
.scena .sch-ritardo  .sch-s, .scena .sch-ritardo  .sch-pal { fill: #ffb648; }
.scena .sch-errore   .sch-s, .scena .sch-errore   .sch-pal { fill: #ff4d6a; }
.scena .sch-assumere .sch-s, .scena .sch-assumere .sch-pal { fill: #55617a; }
.scena .sch-n { font-size: 17px; font-weight: 600; }
/* il numero del passo: senza, la disposizione e' un cerchio di scrivanie e non si capisce l'ordine */
.scena .sch-p circle { fill: rgba(255,255,255,.08); stroke-width: 1.4; }
.scena .sch-p text { font-family: var(--mono, Consolas, monospace); font-size: 13px; font-weight: 700;
  fill: var(--ink, #e8eff7); text-anchor: middle; }
.scena .sch-lavoro   .sch-p circle { stroke: #2ee6c6; }
.scena .sch-errore   .sch-p circle { stroke: #ff4d6a; }
.scena .sch-fermo    .sch-p circle { stroke: #7d8ca6; }
.scena .sch-ritardo  .sch-p circle { stroke: #ffb648; }
.scena .sch-assumere .sch-p circle { stroke: #55617a; }
.scena .sch-chip { fill: rgba(255,255,255,.07); }
.scena .sch-st { font-family: var(--mono, Consolas, monospace); font-size: 9.5px; letter-spacing: .09em; fill: var(--ink-2, #b6c4dd); }
.scena .sch-d { font-family: var(--mono, Consolas, monospace); font-size: 12px; fill: var(--ink-3, #8b9ab5); text-anchor: end; }
.scena .sch-r { font-size: 12.5px; fill: var(--ink-2, #b6c4dd); }
.scena .sch-c { font-size: 11.5px; fill: var(--ink-3, #8b9ab5); }
.scena .sch-c .b { font-family: var(--mono, Consolas, monospace); font-size: 13px; font-weight: 700; fill: var(--ink, #e8eff7); }

/* la scheda del blocco: grande, rossa, dice cosa devi fare tu */
.scena .avv rect { fill: rgba(44,8,18,.96); stroke: #ff4d6a; stroke-width: 1.4; }
.scena .avv .avv-s { fill: #ff4d6a; stroke: none; }
.scena .avv-t { font-family: var(--orb, "Segoe UI", sans-serif); font-size: 12px; letter-spacing: .12em; fill: #ff8fa3; }
.scena .avv-r { font-size: 15px; font-weight: 600; fill: #ffe2e7; }
.scena .avv-d { font-family: var(--mono, Consolas, monospace); font-size: 12px; fill: #ffbac5; }
/* il pulsante dentro l'allarme: il punto dove il lavoro si ferma e' anche quello da cui lo sblocchi */
.scena .avv-btn { cursor: pointer; }
.scena .avv-btn rect { fill: #ff4d6a; stroke: none; }
.scena .avv-btn text { font-size: 12.5px; font-weight: 600; fill: #2a0610; text-anchor: middle; }
.scena .avv-btn:hover rect { fill: #ff6b83; }
/* i muri: bassi e spenti. La scenografia non deve rubare spazio ai dati. */
.scena .mur-f { opacity: .72; }

/* la legenda, una volta sola */
.scena .leg text { font-size: 11px; fill: var(--ink-3, #8b9ab5); }

/* ---------- LA PIANTA di un piano: il disegno tecnico della sala ----------
   Le convenzioni sono quelle vere del disegno edile: il muro tagliato e' pieno e scuro,
   gli arredi sono linee sottili, le quote e la scala sono grigie e discrete, e le scritte
   stanno FUORI dal muro con la loro linea di richiamo. Tutto quello che e' dato (numeri,
   stati, code) e' acceso; tutto quello che e' edificio e' spento. Cosi' l'occhio va al lavoro. */
.pianta { width: 100%; height: auto; max-height: calc(100vh - 262px); display: block; margin: 0 auto;
  background: radial-gradient(ellipse at 42% 46%, rgba(120,150,225,.05), transparent 64%); border-radius: 6px; }
.pianta text { font-family: var(--font); fill: var(--ink); }

/* --- i MURI tagliati: pieni, e' la convenzione del disegno in sezione --- */
.pianta .muro { fill: rgba(146, 170, 215, .30); stroke: rgba(186, 208, 250, .55); stroke-width: 1; }
/* --- le PORTE: soglia, battente, arco di apertura --- */
.pianta .soglia { fill: none; stroke: var(--c); stroke-width: 2.4; opacity: .85; }
.pianta .batt { stroke: rgba(196, 214, 250, .7); stroke-width: 2; }
.pianta .apert { fill: none; stroke: rgba(196, 214, 250, .34); stroke-width: 1; stroke-dasharray: 4 4; }

/* --- gli ANELLI di progetto: dove si cammina resta vuoto, e si vede --- */
.pianta .an-circ { fill: none; stroke: rgba(150, 175, 225, .2); stroke-width: 1; stroke-dasharray: 7 6; }
.pianta .an-riempi { fill: rgba(140, 170, 255, .045); }
.pianta .an-t { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-3); opacity: .6;
  text-anchor: middle; letter-spacing: .1em; }

/* --- il reparto dentro il reparto --- */
.pianta .rep-b { fill: rgba(255, 180, 90, .05); stroke: var(--c); stroke-width: 1.2; stroke-dasharray: 9 6; opacity: .8; }
.pianta .rep-t { font-family: var(--orb); font-size: 10.5px; letter-spacing: .18em; fill: var(--c); opacity: .9; text-anchor: middle; }

/* --- il PERCORSO DEL LAVORO: passa dove si cammina, mai sopra i mobili --- */
.pianta .via { fill: none; stroke: var(--c); stroke-width: 2.8; opacity: .6; stroke-linecap: round; }
.pianta .via-f { fill: var(--c); opacity: .9; }
.pianta .spina { fill: none; stroke: var(--c); stroke-width: 1.6; opacity: .45; stroke-dasharray: 5 4; }
.pianta .spina-f { opacity: .65; }
/* il giro di chi sorveglia: non ha una postazione, ha un percorso */
.pianta .ronda { fill: none; stroke: #7ce0c4; stroke-width: 1.6; opacity: .5; stroke-dasharray: 2 7; stroke-linecap: round; }
.pianta .ronda-f { fill: #7ce0c4; opacity: .7; }

/* --- il DEPOSITO al centro: e' la cosa piu' importante del piano, ed e' al centro --- */
.pianta .dep { cursor: pointer; }
.pianta .dep-b { fill: rgba(8, 15, 30, .9); stroke: var(--c); stroke-width: 2.6; }
.pianta .dep-p { fill: var(--c); opacity: .17; }
.pianta .dep:hover .dep-p { opacity: .3; }
.pianta .dep.vuoto .dep-b { stroke-opacity: .38; stroke-dasharray: 7 6; stroke-width: 1.6; }
.pianta .dep.vuoto .dep-n { font-size: 17px; fill: var(--ink-3); font-weight: 500; }
.pianta .dep-n { font-family: var(--mono); font-size: 34px; font-weight: 700; fill: #fff; text-anchor: middle; }
.pianta .dep-t { font-family: var(--orb); font-size: 9.5px; letter-spacing: .13em; fill: var(--ink-2); text-anchor: middle; }
.pianta .dep-q { font-family: var(--mono); font-size: 9px; fill: var(--ink-3); opacity: .55; text-anchor: middle; }

/* --- i MOBILI: ingombro vero, linea sottile. Un tavolo non e' una casella --- */
.pianta .posto { cursor: pointer; }
.pianta .mob { fill: rgba(150, 175, 225, .1); stroke: rgba(186, 208, 250, .55); stroke-width: 1.2; }
.pianta .mob-f { stroke: var(--c); stroke-width: 2.2; opacity: .8; }   /* il lato dove si lavora */
.pianta .posto:hover .mob { fill: rgba(160, 190, 255, .2); }
.pianta .posto:focus { outline: none; } .pianta .posto:focus .mob { stroke-width: 2.4; }
.pianta .sedia { fill: rgba(150, 175, 225, .12); stroke: rgba(186, 208, 250, .5); stroke-width: 1.1; }
.pianta .sedia.osp { stroke-dasharray: 4 3; }
/* la persona vista dall'alto: un cerchio pieno, con sotto l'aura del suo stato */
.pianta .pers { fill: #dce8ff; stroke: rgba(10, 16, 30, .8); stroke-width: 1.2; }
.pianta .pers.vuota { fill: none; stroke: rgba(150, 160, 185, .5); stroke-width: 1.3; stroke-dasharray: 4 4; }
.pianta .aura { opacity: .22; }
.pianta .posto.capo .pers { fill: #ffe6a8; r: 13; }
.pianta .posto.fermo .aura { opacity: .34; }
.pianta .numero circle { fill: rgba(6, 12, 24, .92); stroke: var(--c); stroke-width: 1.4; }
.pianta .numero text { font-family: var(--mono); font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; }

/* --- gli SCARTI: quello che esce dal flusso, verso il bordo --- */
.pianta .scarto { cursor: pointer; }
.pianta .sc-via { stroke: rgba(150, 160, 185, .34); stroke-width: 1.4; stroke-dasharray: 3 5; }
/* il foro nel muro da cui lo scarto esce: il muro li' e' bucato, e si vede */
.pianta .sc-foro { fill: rgba(8, 12, 22, .95); stroke: rgba(150, 160, 185, .4); stroke-width: 1; }
.pianta .sc-f { fill: rgba(170, 182, 205, .75); }
.pianta .sc-b { fill: rgba(12, 12, 18, .9); stroke: rgba(150, 160, 185, .5); stroke-width: 1.2; stroke-dasharray: 5 4; }
.pianta .sc-n { font-family: var(--mono); font-size: 14px; font-weight: 700; fill: #cfd8ea; text-anchor: middle; }

/* --- le SCRITTE, fuori dal muro, con la linea di richiamo --- */
.pianta .et-l { fill: none; stroke: rgba(160, 180, 220, .32); stroke-width: 1; }
.pianta .et-p { fill: rgba(190, 210, 250, .7); }
.pianta .et-st { filter: drop-shadow(0 0 5px currentColor); }
.pianta .et-n { font-size: 13.5px; font-weight: 600; }
.pianta .et.capo .et-n { font-family: var(--orb); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.pianta .et.serv .et-n { font-size: 12px; font-weight: 500; fill: var(--ink-2); }
.pianta .et.porta-et .et-n { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.pianta .et-s { font-size: 10.5px; fill: var(--ink-3); }
.pianta .et.fermo .et-s { fill: #ff8fa3; }

/* --- IL CANCELLO: una barriera di traverso al percorso, non un avviso sotto un nome --- */
.pianta .canc-b { stroke: #ff3b5c; stroke-width: 7; stroke-linecap: round; opacity: .9;
  filter: drop-shadow(0 0 10px rgba(255,59,92,.6)); }
.pianta .canc rect { fill: rgba(44, 6, 14, .96); stroke: #ff3b5c; stroke-width: 1.6; }
.pianta .canc text { font-family: var(--orb); font-size: 10px; letter-spacing: .1em; fill: #ff8fa3; text-anchor: middle; }

/* --- QUOTE, SCALA, NORD, CARTIGLIO: la parte da disegno tecnico --- */
.pianta .q-l, .pianta .q-t { stroke: rgba(160, 180, 220, .42); stroke-width: 1; }
.pianta .q-n { font-family: var(--mono); font-size: 11px; fill: var(--ink-3); text-anchor: middle; }
.pianta .sc-g .n { fill: rgba(210, 225, 255, .8); }
.pianta .sc-g .b { fill: rgba(210, 225, 255, .18); stroke: rgba(210,225,255,.5); stroke-width: .8; }
.pianta .sc-t { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); text-anchor: middle; }
.pianta .sc-t2 { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); opacity: .7; }
.pianta .nord circle { fill: none; stroke: rgba(160, 180, 220, .35); stroke-width: 1; }
.pianta .nord path { fill: rgba(200, 218, 252, .7); }
.pianta .nord text { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); text-anchor: middle; }
.pianta .cart rect { fill: rgba(8, 14, 26, .85); stroke: rgba(150, 175, 225, .28); stroke-width: 1; }
.pianta .cart line { stroke: rgba(150, 175, 225, .24); stroke-width: 1; }
.pianta .cart .c-t { font-family: var(--orb); font-size: 15px; letter-spacing: .12em; fill: var(--c); }
.pianta .cart .c-s { font-size: 11.5px; fill: var(--ink-3); }
.pianta .cart .c-k { font-size: 11px; fill: var(--ink-3); }
.pianta .cart .c-v { font-family: var(--mono); font-size: 11.5px; fill: var(--ink); text-anchor: end; }

/* ---------- il WORKFLOW di un piano, passo per passo ---------- */
.wf { display: grid; gap: 10px; margin: 6px 0 4px; }
.wstep { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 14px 12px 10px;
  border: 1px solid var(--line-2); border-left: 2px solid var(--c); border-radius: 4px; background: rgba(255, 255, 255, .018); position: relative; }
.wstep + .wstep::before { content: ""; position: absolute; left: 26px; top: -11px; width: 2px; height: 11px; background: color-mix(in srgb, var(--c) 45%, transparent); }
.wnum { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: rgba(3, 8, 18, .6); }
.wcorpo { min-width: 0; display: grid; gap: 7px; }
.wtop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wtop canvas.av { width: 26px; height: 26px; flex: none; }
.wchi b { font-size: 13.5px; color: var(--ink); display: block; }
.wnat { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.wnat.wf { color: #8fd0ff; } .wnat.sv { color: #78e0d0; } .wnat.ag { color: #c2a8ff; }
.wche { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.wfatti { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-q { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px; border-radius: 3px; background: var(--raise); font-size: 11.5px; color: var(--ink-2); }
.wf-q i { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.wf-q code { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.wf-q.ora { color: #3dff9a; }
.wdati { display: grid; gap: 5px; }
.wdati > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wdati i { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); width: 44px; flex: none; }
.wtab { font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); }
.wtab.l { border-color: rgba(127, 184, 255, .35); color: #9fc8ff; }
.wtab.s { border-color: rgba(255, 180, 90, .4); color: #ffc684; }
.wtab:hover { background: rgba(255, 255, 255, .06); }
.wpiede { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 11.5px; color: var(--ink-3); }
.wpassa b { color: var(--ink-2); }
.werr { font-size: 11px; padding: 3px 9px; border-radius: 3px; cursor: pointer; border: 1px solid rgba(255, 77, 106, .4); background: transparent; color: #ff8fa3; }
.wfile { opacity: .8; }

/* ---------- un piano del funnel, a schermo intero ---------- */
.piano-h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.piano-h .pill { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--c); border-radius: 999px; color: var(--c); }
.piano-h h1 { margin: 0; font-family: var(--orb); font-size: clamp(20px, 3vw, 30px); letter-spacing: .04em; }
.piano-h p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.piano-h .btnrow { margin-left: auto; }
.catena { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 4px 0 6px; }
.catena .pz { display: grid; gap: 3px; min-width: 126px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(255, 255, 255, .02); text-align: left;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.catena .pz:hover { border-color: var(--c); background: rgba(127, 233, 255, .06); }
.catena .pz b.num { font-family: var(--mono); font-size: 19px; color: #fff; }
.catena .pz span { font-size: 12px; color: var(--ink); }
.catena .pz small { font-size: 10.5px; color: var(--ink-3); }
.catena .pz .sd { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--ink-3); }
.catena .pz .sd i { width: 7px; height: 7px; border-radius: 50%; background: var(--s, #6fb6ff); box-shadow: 0 0 6px var(--s, #6fb6ff); }
.catena .fr { display: grid; place-items: center; width: 34px; color: var(--c); font-size: 17px; opacity: .8; }
.catena .fr.giu { width: 100%; height: 22px; }
.catena .scarto { border-style: dashed; opacity: .82; }
/* la barretta: quanto pesa questo passaggio rispetto al più grande del piano (si vede dove si perde gente) */
.catena .pz .pzb { display: block; height: 4px; margin-top: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.catena .pz .pzb b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, #fff)); box-shadow: 0 0 10px var(--c); }
.catena .scarto .pzb b { background: linear-gradient(90deg, #6d5f8f, #b0708e); box-shadow: none; }
/* i passaggi che aprono un pezzo di database */
.catena .pz.apribile { border-color: color-mix(in srgb, var(--c) 45%, transparent); cursor: pointer; }
.catena .pz.apribile::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--c) 14%, transparent); }
.catena .pz { position: relative; }
.catena .pz .pza { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); opacity: .75; margin-top: 3px; }
.catena .pz.apribile:hover .pza { opacity: 1; }
.piano-col { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .piano-col { grid-template-columns: minmax(0, 1fr); } }

/* ---------- i dati che usa (scheda): arancio scrive, azzurro legge ---------- */
.datilist { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.datilist li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 3px; background: rgba(255, 255, 255, .015); }
.datilist li i { width: 8px; height: 8px; border-radius: 50%; background: #5fd4ff; box-shadow: 0 0 6px #5fd4ff; }
.datilist li.scrive i { background: #ffb45a; box-shadow: 0 0 6px #ffb45a; border-radius: 1px; }
.datilist li span { display: grid; gap: 1px; min-width: 0; } .datilist li b { font-size: 12.5px; color: var(--ink); } .datilist li small { font-size: 11px; color: var(--ink-3); }
.datilist li code { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }

.poteri-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.poteri-r .card.poteri { margin: 0; padding: 16px 18px; }
.poteri-r .datilist li { grid-template-columns: 10px minmax(0, 1fr) auto; }
@media (max-width: 1180px) { .poteri-r { grid-template-columns: minmax(0, 1fr); } }

/* ---------- il ritratto olografico nella scheda ---------- */
.ritratto { height: 250px; background: radial-gradient(120% 90% at 50% 45%, #07132a, #02040a 72%); border: 1px solid var(--hud-3); border-radius: 4px; }
.ritratto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(127, 233, 255, .04) 0 1px, transparent 1px 3px); }
canvas.av { border-radius: 50%; }

/* la barra di Jarvis in basso */
.dock { border-radius: 6px; border-color: var(--hud-3); background: rgba(3, 8, 18, .9); box-shadow: 0 0 40px rgba(127, 233, 255, .08), 0 18px 50px rgba(0, 0, 0, .55); }
.subs-card { border-radius: 4px !important; border-color: var(--hud-3) !important; background: rgba(3, 9, 20, .9) !important; }
/* I sottotitoli di Jarvis restano nella pagina anche quando non parla (invisibili, ma presenti):
   se non si spengono anche al tocco, rubano i clic a quello che c'è sotto.
   Era questo — e solo questo — a far sembrare rotto il pulsante «Scendi» dell'Esecutivo. */
.subs:not(.on), .subs:not(.on) .subs-card, .subs:not(.on) .subs-acts { pointer-events: none !important; }