:root {
  --fondo: #04050d;
  --fondo-2: #080b1c;
  --vetro: rgba(18, 22, 52, 0.62);
  --vetro-forte: rgba(14, 17, 42, 0.92);
  --bordo: rgba(140, 160, 255, 0.16);
  --bordo-forte: rgba(150, 170, 255, 0.32);
  --testo: #e6e9ff;
  --tenue: #9aa3cf;
  --molto-tenue: #6870a0;
  --accento: #8f9dff;
  --accento-2: #b48cff;
  --ok: #7ef0ad;
  --attesa: #ffcf6e;
  --errore: #ff7a8a;
  --raggio: 14px;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 700px at 50% 18%, #0d1236 0%, var(--fondo) 62%) fixed, var(--fondo);
  color: var(--testo); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
#cielo { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
#vista-console, #vista-accesso { position: relative; z-index: 1; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: 0.01em; }
h2 { font-size: 17px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: #aab6ff; }
.tenue { color: var(--tenue); font-weight: 400; }

/* marchio */
.marchio { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.18em; font-size: 14px; }
.marchio-sotto { letter-spacing: 0.02em; font-weight: 500; color: var(--tenue); }
.marchio-punto { width: 10px; height: 10px; border-radius: 50%; background: #c9d0ff;
  box-shadow: 0 0 10px 3px rgba(143, 157, 255, 0.85), 0 0 26px 8px rgba(180, 140, 255, 0.4); animation: pulsa 3.2s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 6px 2px rgba(143, 157, 255, 0.6), 0 0 14px 4px rgba(180, 140, 255, 0.25); } }

/* accesso */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.accesso-scheda { width: min(380px, 100%); padding: 32px 28px 28px; border-radius: 20px; background: var(--vetro);
  border: 1px solid var(--bordo-forte); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; display: grid; gap: 14px; }
.accesso-scheda h1 { font-size: 24px; margin-top: 6px; }
.sotto { margin: -6px 0 6px; color: var(--tenue); }
label { display: grid; gap: 6px; font-size: 13px; color: var(--tenue); }
input, select, textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bordo-forte);
  background: rgba(6, 8, 24, 0.7); color: var(--testo); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accento); box-shadow: 0 0 0 3px rgba(143, 157, 255, 0.22); }
button[type=submit], .bottone { cursor: pointer; border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 600;
  background: linear-gradient(135deg, #6f7dff, #a77bff); color: #fff; box-shadow: 0 8px 26px rgba(120, 110, 255, 0.35); }
button[type=submit]:disabled { opacity: .6; cursor: wait; }
.bottone-ghost { cursor: pointer; border-radius: 9px; padding: 6px 12px; background: transparent; border: 1px solid var(--bordo-forte); color: var(--testo); }
.bottone-ghost:hover { border-color: var(--accento); }
.errore { min-height: 1.2em; margin: 0; color: var(--errore); font-size: 13px; }

/* testata */
.testata { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  background: linear-gradient(180deg, rgba(4, 5, 13, 0.92), rgba(4, 5, 13, 0.6)); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--bordo); }
.chip-riga { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px;
  background: rgba(20, 26, 64, 0.65); border: 1px solid var(--bordo); color: var(--tenue); white-space: nowrap; }
.chip b { color: var(--testo); font-weight: 600; }
.chip .pallino { margin: 0; }
.utente { display: flex; align-items: center; gap: 10px; color: var(--tenue); font-size: 13px; }

/* palco della rete */
.palco { position: relative; height: clamp(440px, 64vh, 760px); margin: 0 auto; }
#rete { width: 100%; height: 100%; display: block; cursor: default; }
.legenda { position: absolute; left: 20px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--tenue); max-width: calc(100% - 40px); }
.legenda-nota { color: var(--molto-tenue); }
.pallino { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pallino.attivo { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.pallino.coda { background: var(--attesa); box-shadow: 0 0 8px var(--attesa); }
.pallino.fermo { background: #5b6396; }
.pallino.off { background: var(--errore); box-shadow: 0 0 8px var(--errore); }
.suggerimento { position: absolute; pointer-events: none; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; max-width: 260px;
  background: var(--vetro-forte); border: 1px solid var(--bordo-forte); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transform: translate(-50%, calc(-100% - 18px)); }
.suggerimento b { display: block; margin-bottom: 2px; }

/* sezioni */
.sezione { position: relative; max-width: 1280px; margin: 0 auto; padding: 8px 20px 28px; }
.sezione-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.nota { margin: 0; color: var(--tenue); font-size: 13px; }
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
label > span:first-child { display: block; }
.pannello { padding: 18px; border-radius: var(--raggio); background: var(--vetro); border: 1px solid var(--bordo);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 0; }

/* schede degli assistenti */
.schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.scheda { position: relative; text-align: left; cursor: pointer; padding: 16px 16px 14px; border-radius: var(--raggio);
  background: var(--vetro); border: 1px solid var(--bordo); color: var(--testo); overflow: hidden;
  transition: transform .18s ease, border-color .18s, box-shadow .18s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.scheda::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, var(--colore, #8f9dff) 0%, transparent 65%); opacity: .16; pointer-events: none; }
.scheda:hover, .scheda:focus-visible { transform: translateY(-3px); border-color: var(--colore, var(--accento)); outline: none;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--colore, var(--accento)) inset; }
.scheda-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scheda-sigla { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--molto-tenue); font-weight: 600; }
.scheda-nome { display: flex; align-items: flex-start; gap: 9px; font-weight: 600; margin-top: 12px; min-height: 2.9em; line-height: 1.35; }
.scheda-nome i { width: 10px; height: 10px; border-radius: 50%; background: var(--colore); box-shadow: 0 0 10px var(--colore); flex: none; margin-top: 6px; }
.scheda-perc { font-size: 34px; font-weight: 700; line-height: 1; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.scheda-perc small { font-size: 14px; font-weight: 500; color: var(--tenue); margin-left: 4px; }
.barra { height: 6px; border-radius: 99px; background: rgba(120, 130, 200, 0.16); overflow: hidden; margin: 8px 0 12px; }
.barra > span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--colore), #ffffff);
  box-shadow: 0 0 12px var(--colore); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.metriche { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px; color: var(--tenue); }
.metriche b { color: var(--testo); font-weight: 600; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: rgba(91, 99, 150, 0.25); color: var(--tenue); border: 1px solid var(--bordo); white-space: nowrap; }
.badge.studia { color: var(--ok); border-color: rgba(126, 240, 173, 0.4); background: rgba(126, 240, 173, 0.08); }
.badge.studia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: lampeggia 1s infinite; }
.badge.coda { color: var(--attesa); border-color: rgba(255, 207, 110, 0.4); background: rgba(255, 207, 110, 0.08); }
.badge.pronto { color: #aab6ff; border-color: var(--bordo-forte); }
@keyframes lampeggia { 50% { opacity: .3; } }

/* registro attività */
.registro { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; font: 12px/1.6 var(--mono); color: var(--tenue); }
.registro li { padding: 3px 0 3px 12px; border-left: 2px solid rgba(143, 157, 255, 0.18); white-space: pre-wrap; word-break: break-word; }
.registro li.ok { border-left-color: var(--ok); color: #cfe9da; }
.registro li.ko { border-left-color: var(--errore); }
.registro li.studio { border-left-color: var(--accento-2); color: var(--testo); }
.registro li.vuoto { border-left: 0; padding-left: 0; font-family: var(--sans); }

/* modulo competenze */
.modulo { display: grid; gap: 12px; }
fieldset { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
legend { font-size: 13px; color: var(--tenue); padding: 0 6px; }
.spunta { display: flex; align-items: center; gap: 8px; color: var(--testo); font-size: 13px; }
.spunta input { width: auto; accent-color: var(--accento); }
.esito { margin: 0; min-height: 1.2em; font-size: 13px; }
.esito.ok { color: var(--ok); } .esito.ko { color: var(--errore); }
.sottotitolo { font-size: 14px; margin: 20px 0 8px; color: var(--tenue); font-weight: 600; }
.richieste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.richieste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 10px;
  background: rgba(8, 11, 30, 0.6); border: 1px solid var(--bordo); font-size: 13px; }
.richieste li .dett { grid-column: 1 / -1; color: var(--tenue); font-size: 12px; }
.richieste li.annullata { opacity: .55; }
.vuoto-msg { color: var(--molto-tenue); font-size: 13px; }

/* cassetto dell'assistente */
.cassetto { position: fixed; inset: 0; z-index: 20; }
.cassetto-velo { position: absolute; inset: 0; background: rgba(2, 3, 10, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: appare .2s ease; }
.cassetto-corpo { position: absolute; top: 0; right: 0; height: 100%; width: min(760px, 100%); overflow: auto; padding: 22px 22px 40px;
  background: linear-gradient(180deg, #0b0f2b, #060818); border-left: 1px solid var(--bordo-forte); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
  animation: entra .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes entra { from { transform: translateX(40px); opacity: 0; } }
@keyframes appare { from { opacity: 0; } }
.cassetto-testa { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.cassetto-testa h2 { font-size: 20px; }
.cassetto-testa p { margin: 4px 0 0; font-size: 13px; }
.chiudi { cursor: pointer; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bordo-forte); background: transparent; color: var(--testo); font-size: 22px; line-height: 1; }
.anello { --p: 0; --colore: var(--accento); width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--colore) calc(var(--p) * 1%), rgba(120, 130, 200, 0.16) 0); box-shadow: 0 0 24px rgba(143, 157, 255, 0.25); }
.anello span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: #090c22; font-weight: 700; font-size: 17px; }
.cifre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
@media (max-width: 520px) { .cifre { grid-template-columns: 1fr 1fr; } }
.cifra { padding: 10px 12px; border-radius: 10px; background: rgba(20, 26, 64, 0.5); border: 1px solid var(--bordo); }
.cifra small { display: block; color: var(--tenue); font-size: 11.5px; }
.cifra b { font-size: 18px; font-variant-numeric: tabular-nums; }
.schede-tab { display: flex; gap: 4px; border-bottom: 1px solid var(--bordo); margin-bottom: 14px; overflow-x: auto; }
.schede-tab button { cursor: pointer; background: transparent; border: 0; padding: 9px 12px; color: var(--tenue); border-bottom: 2px solid transparent; white-space: nowrap; }
.schede-tab button[aria-selected=true] { color: var(--testo); border-bottom-color: var(--accento); }
.marca { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(10, 13, 34, 0.6); border: 1px solid var(--bordo); }
.marca-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 600; }
.famiglia { display: grid; grid-template-columns: 20px 1fr; gap: 4px 8px; padding: 7px 0; border-top: 1px dashed rgba(140, 160, 255, 0.12); }
.famiglia:first-of-type { border-top: 0; }
.spia { width: 16px; height: 16px; border-radius: 50%; margin-top: 2px; display: grid; place-items: center; font-size: 10px; }
.spia.si { background: rgba(126, 240, 173, 0.18); color: var(--ok); box-shadow: 0 0 10px rgba(126, 240, 173, 0.35); }
.spia.no { background: rgba(120, 130, 200, 0.14); color: var(--molto-tenue); }
.modelli { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.modelli span { font: 11.5px/1.6 var(--mono); padding: 1px 7px; border-radius: 6px; background: rgba(143, 157, 255, 0.1); color: #c8cffc; border: 1px solid rgba(143, 157, 255, 0.14); }
.tabella { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabella th { text-align: left; color: var(--tenue); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tabella td { padding: 7px 8px; border-bottom: 1px solid rgba(140, 160, 255, 0.07); vertical-align: top; }
.tabella td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella code { font: 11.5px var(--mono); color: var(--tenue); }
.scorre { overflow-x: auto; }

.piede { position: relative; max-width: 1280px; margin: 0 auto; padding: 10px 20px 40px; color: var(--molto-tenue); font-size: 12.5px; }
.piede b { color: var(--tenue); font-weight: 600; }

/* risorse */
.profili { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.profili button[aria-pressed=true] { border-color: var(--accento); background: rgba(143, 157, 255, 0.14); }
.cursori { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.cursori label > span:first-child { display: flex; justify-content: space-between; color: var(--tenue); }
.cursori b { color: var(--testo); font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; padding: 0; border: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accento) 0 var(--riemp, 50%), rgba(120, 130, 200, 0.18) var(--riemp, 50%) 100%); box-shadow: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #eef0ff; cursor: grab;
  box-shadow: 0 0 0 4px rgba(143, 157, 255, 0.3), 0 0 14px rgba(143, 157, 255, 0.8); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #eef0ff; cursor: grab;
  box-shadow: 0 0 0 4px rgba(143, 157, 255, 0.3), 0 0 14px rgba(143, 157, 255, 0.8); }
input[type=range]:disabled { opacity: .35; }
.ris-azioni { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.ris-azioni .bottone { min-width: 140px; }
.badge.spento { color: var(--errore); border-color: rgba(255, 122, 138, 0.4); }
/* modulo: ambito */
fieldset.ambito { grid-template-columns: 1fr; }
/* caricamento PDF */
.carica { margin-top: 18px; padding: 14px; border-radius: 12px; border: 1px dashed var(--bordo-forte); background: rgba(10, 13, 34, 0.5); display: grid; gap: 10px; }
.carica.sopra { border-color: var(--accento); background: rgba(143, 157, 255, 0.08); }
.carica-campi { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.carica-elenco { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--tenue); display: grid; gap: 4px; }
.carica-elenco .ok { color: var(--ok); } .carica-elenco .ko { color: var(--errore); }

@media (max-width: 900px) {
  .cursori, .carica-campi { grid-template-columns: 1fr; }
  .due-colonne { grid-template-columns: 1fr; }
  .testata { flex-wrap: wrap; padding: 10px 16px; }
  .chip-riga { order: 3; justify-content: flex-start; width: 100%; }
  .sezione { padding: 8px 16px 24px; }
  .palco { height: 470px; }
}
@media (max-width: 520px) {
  fieldset { grid-template-columns: 1fr; }
  .marchio-sotto { display: none; }
  .legenda { left: 16px; gap: 10px; }
  .legenda-nota { display: none; }
  .cassetto-corpo { padding: 16px; }
  .anello { width: 60px; height: 60px; } .anello span { width: 48px; height: 48px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}