:root {
  --fondo: #0f1720; --pannello: #17222e; --pannello2: #1d2b3a; --bordo: #2a3b4d;
  --testo: #e6edf3; --tenue: #93a4b5; --accento: #f5c542; --verde: #3fb950; --rosso: #f0605d; --blu: #58a6ff;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accento); }
h1, h2, h3 { line-height: 1.25; }
button, input, textarea { font: inherit; color: inherit; }
button { background: var(--pannello2); border: 1px solid var(--bordo); border-radius: 7px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--tenue); }
button:disabled { opacity: .45; cursor: default; }
button.primo { background: var(--accento); border-color: var(--accento); color: #1a1405; font-weight: 600; }
button.pericolo:hover { border-color: var(--rosso); color: var(--rosso); }
input[type=text], input[type=password], textarea { background: var(--fondo); border: 1px solid var(--bordo); border-radius: 7px; padding: 8px 10px; }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.tenue { color: var(--tenue); }
.errore { color: var(--rosso); min-height: 1.4em; margin: 6px 0 0; }

/* pagine semplici: ingresso, elenco, docente */
.pagina { max-width: 860px; margin: 0 auto; padding: 40px 20px 60px; }
.pagina h1 { font-size: 30px; margin: 0 0 6px; }
.pagina .sotto { color: var(--tenue); margin: 0 0 28px; max-width: 62ch; }
.scheda { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 12px; padding: 20px; margin: 0 0 18px; }
.scheda h2 { font-size: 18px; margin: 0 0 12px; }
.riga { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.riga input[type=text], .riga input[type=password] { flex: 1; min-width: 200px; }
ul.elenco { list-style: none; margin: 0; padding: 0; }
ul.elenco li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--bordo); }
ul.elenco li:first-child { border-top: 0; }
ul.elenco li a { flex: 1; text-decoration: none; font-weight: 600; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--bordo); }
th { color: var(--tenue); font-weight: 500; border-top: 0; }

/* laboratorio */
.lab { display: grid; height: 100vh; grid-template-columns: 1fr var(--chat, 400px); grid-template-rows: auto 1fr auto; }
.lab.senza-chat { --chat: 0px; }
.lab.senza-chat .chat { display: none; }
.barra { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: var(--pannello); border-bottom: 1px solid var(--bordo); }
.barra .nome { font-weight: 700; font-size: 16px; margin-right: 6px; cursor: text; border-radius: 5px; padding: 2px 6px; }
.barra .nome:hover { background: var(--pannello2); }
.barra .spazio { flex: 1; }
.barra a { text-decoration: none; }
.tela { position: relative; overflow: hidden; min-height: 0; background:
  radial-gradient(circle, #223141 1px, transparent 1.2px) 0 0 / 24px 24px, var(--fondo); }
.tela svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.vuota { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--tenue); pointer-events: none; padding: 20px; }
.vuota b { color: var(--testo); font-size: 18px; }
.avviso { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: #3a1f1f; border: 1px solid var(--rosso); color: #ffd7d5; border-radius: 8px; padding: 8px 14px; max-width: 90%; }
.avviso[hidden] { display: none; }

.nodo rect.corpo { fill: var(--pannello); stroke: var(--bordo); stroke-width: 1.5; }
.nodo.scelto rect.corpo { stroke: var(--accento); stroke-width: 2; }
.nodo { cursor: grab; }
.nodo text { fill: var(--testo); font: 600 14px system-ui, sans-serif; pointer-events: none; }
.nodo text.stato { fill: var(--tenue); font: 12px system-ui, sans-serif; }
.nodo circle.led { fill: #4a5a6b; }
.nodo.on circle.led { fill: var(--verde); }
.nodo.booting circle.led { fill: var(--accento); animation: lampo 1s infinite; }
@keyframes lampo { 50% { opacity: .25; } }
.porta rect { fill: #0c131b; stroke: #44576b; stroke-width: 1.2; cursor: crosshair; }
.porta:hover rect, .porta.meta rect { stroke: var(--accento); fill: #2b2610; }
.porta.occupata rect { fill: #1c3a26; stroke: var(--verde); cursor: pointer; }
.porta.servizio rect { fill: #1a2330; stroke: #2c3b4b; cursor: help; }
.porta text { font: 12px var(--mono); fill: var(--tenue); pointer-events: none; }
.porta.servizio text { fill: #51637a; }
.cavo { stroke: #5b6b7c; stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 2 7; }
.cavo.su { stroke: var(--verde); stroke-dasharray: none; }
.cavo.traffico { stroke-dasharray: 9 6; animation: scorre .5s linear infinite; }
@keyframes scorre { to { stroke-dashoffset: -15; } }
.cavo.scelto { stroke: var(--accento); }
.presa { stroke: transparent; stroke-width: 16; fill: none; cursor: pointer; }
.cavo.prova { stroke: var(--accento); stroke-dasharray: 5 5; pointer-events: none; }

.scelta { position: absolute; bottom: 12px; left: 12px; background: var(--pannello); border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px; max-width: calc(100% - 24px); box-shadow: 0 6px 24px #0008; }
.scelta[hidden] { display: none; }
.scelta .titolo { font-weight: 700; margin-right: 6px; }
.scelta .riga { gap: 6px; }
.scelta button { padding: 4px 10px; font-size: 14px; }
.scelta .winbox { margin-top: 8px; font-size: 13px; color: var(--tenue); }
.scelta code { font-family: var(--mono); color: var(--testo); background: var(--fondo); padding: 2px 6px; border-radius: 5px; user-select: all; }

.terminali { grid-column: 1; background: #000; border-top: 1px solid var(--bordo); min-width: 0; display: flex; flex-direction: column; height: 44vh; }
.terminali[hidden] { display: none; }
.linguette { display: flex; background: var(--pannello); align-items: stretch; overflow-x: auto; }
.linguetta { padding: 6px 8px 6px 14px; border-right: 1px solid var(--bordo); cursor: pointer; display: flex; gap: 8px; align-items: center; color: var(--tenue); white-space: nowrap; }
.linguetta.attiva { background: #000; color: var(--testo); }
.linguetta .x { border: 0; background: none; padding: 0 5px; color: var(--tenue); border-radius: 4px; }
.linguetta .x:hover { background: var(--pannello2); color: var(--testo); }
.linguette .nota { margin-left: auto; padding: 6px 12px; font-size: 13px; color: var(--tenue); white-space: nowrap; }
.schermi { flex: 1; min-height: 0; position: relative; }
.schermo { position: absolute; inset: 0; padding: 6px 0 0 8px; }
.schermo[hidden] { display: none; }

.chat { grid-column: 2; grid-row: 2 / 4; border-left: 1px solid var(--bordo); background: var(--pannello); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat header { padding: 10px 14px; border-bottom: 1px solid var(--bordo); display: flex; align-items: center; gap: 8px; }
.chat header b { flex: 1; }
.chat header button { padding: 2px 9px; font-size: 13px; }
.messaggi { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 100%; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--pannello2); border: 1px solid var(--bordo); border-radius: 12px 12px 2px 12px; padding: 8px 12px; max-width: 88%; white-space: pre-wrap; }
.msg.assistant p { margin: 0 0 9px; }
.msg.assistant ul, .msg.assistant ol { margin: 0 0 9px; padding-left: 22px; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { font-size: 15px; margin: 12px 0 6px; }
.msg.assistant code { font-family: var(--mono); font-size: 13px; background: var(--fondo); padding: 1px 5px; border-radius: 4px; }
.msg.assistant table { font-size: 13px; margin: 0 0 9px; }
.blocco { margin: 0 0 10px; border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; }
.blocco pre { margin: 0; padding: 10px 12px; background: var(--fondo); overflow-x: auto; }
.blocco pre code { background: none; padding: 0; }
.blocco .azioni { display: flex; gap: 6px; padding: 6px; background: var(--pannello2); flex-wrap: wrap; }
.blocco .azioni button { font-size: 13px; padding: 3px 9px; }
.lettura { font-size: 13px; color: var(--tenue); margin: 0 0 6px; }
.lettura code { font-size: 12px; }
.pensa { color: var(--tenue); font-style: italic; }
.spunti { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.spunti button { text-align: left; }
.chat form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--bordo); }
.chat textarea { flex: 1; resize: none; height: 62px; }

/* guida */
.guida { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.guida nav { background: var(--pannello); border-right: 1px solid var(--bordo); padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.guida nav .casa { display: block; font-weight: 700; margin-bottom: 16px; text-decoration: none; color: var(--testo); }
.guida nav h2 { font-size: 13px; font-weight: 600; color: var(--tenue); margin: 18px 0 6px; }
.guida nav a.voce { display: block; padding: 5px 10px; border-radius: 6px; text-decoration: none; color: var(--testo); }
.guida nav a.voce:hover { background: var(--pannello2); }
.guida nav a.voce.qui { background: var(--accento); color: #1a1405; font-weight: 600; }
.guida article { max-width: 820px; padding: 34px 40px 80px; }
.guida article h1 { font-size: 30px; margin: 0 0 14px; }
.guida article h2 { font-size: 21px; margin: 34px 0 10px; }
.guida article h3 { font-size: 17px; margin: 24px 0 8px; }
.guida article p, .guida article li { max-width: 70ch; }
.guida article pre { background: #0a1017; border: 1px solid var(--bordo); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
.guida article code { font-family: var(--mono); font-size: 13.5px; }
.guida article :not(pre) > code { background: var(--pannello); padding: 1px 5px; border-radius: 4px; }
.guida article blockquote { margin: 14px 0; padding: 10px 16px; border-left: 3px solid var(--accento); background: var(--pannello); border-radius: 0 8px 8px 0; }
.guida article blockquote p { margin: 0; }
.guida article table { margin: 12px 0; }
@media (max-width: 800px) {
  .guida { grid-template-columns: 1fr; } .guida nav { position: static; height: auto; }
  .guida article { padding: 22px 18px 60px; }
  .lab { grid-template-columns: 1fr; } .chat { display: none; }
}
.nodo.rete path.corpo { fill: #14283c; stroke: var(--blu); stroke-width: 1.5; }
.nodo.rete.scelto path.corpo { stroke: var(--accento); stroke-width: 2; }
.nodo.rete .porta circle { fill: var(--blu); pointer-events: none; }