:root{
  --fondo:#0e0f13; --superficie:#16181d; --superficie2:#1c1f26; --bordo:#262a33;
  --testo:#e9eaee; --tenue:#8b919e; --accento:#5865f2; --accento2:#7c86ff;
  --verde:#3ba55d; --giallo:#f0b232; --rosso:#ed4245;
  --raggio:12px; --ombra:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--fondo);color:var(--testo);
  font:15px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
a{color:var(--accento2)}
.nascosto{display:none !important}

/* ---------- accesso ---------- */
.accesso{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center}
.accesso .logo{width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,var(--accento),#9b5cff);
  display:grid;place-items:center;font-size:30px;margin:0 auto 22px}
.accesso h1{font-size:26px;margin:0 0 10px;letter-spacing:-.4px}
.accesso p{color:var(--tenue);max-width:400px;margin:0 auto 28px}

/* ---------- struttura ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.lato{background:var(--superficie);border-right:1px solid var(--bordo);padding:20px 14px;
  display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto}
.marchio{display:flex;align-items:center;gap:11px;padding:4px 8px 18px}
.marchio img,.marchio .quadro{width:38px;height:38px;border-radius:11px;flex:none;object-fit:cover}
.marchio .quadro{background:linear-gradient(135deg,var(--accento),#9b5cff);display:grid;place-items:center;font-size:18px}
.marchio b{display:block;font-size:14px;line-height:1.2}
.marchio span{font-size:12px;color:var(--tenue)}

.voce{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;border:0;
  background:transparent;color:var(--tenue);cursor:pointer;text-align:left;width:100%;font-weight:500}
.voce:hover{background:var(--superficie2);color:var(--testo)}
.voce.attiva{background:var(--accento);color:#fff}
.voce .ic{width:20px;text-align:center;font-size:15px}
.separa{height:1px;background:var(--bordo);margin:10px 4px}
.lato .fondo{margin-top:auto;padding-top:14px}

.contenuto{padding:34px 38px 72px;max-width:900px}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .lato{position:static;height:auto;flex-direction:row;flex-wrap:wrap;overflow:visible}
  .marchio{width:100%}
  .voce{width:auto}
  .contenuto{padding:22px 16px 56px}
}

/* ---------- testi ---------- */
h1.titolo{font-size:24px;margin:0 0 6px;letter-spacing:-.4px}
.occhiello{color:var(--tenue);font-size:14px;margin:0 0 26px}
h2.sezione{font-size:15px;margin:0 0 3px;font-weight:650}
.aiuto{color:var(--tenue);font-size:12.5px;margin:7px 0 0;line-height:1.5}

/* ---------- riquadri ---------- */
.riquadro{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:20px;margin-bottom:16px;box-shadow:var(--ombra)}
.campo{margin-bottom:22px}
.campo:last-child{margin-bottom:0}
label.etichetta{display:block;font-weight:600;font-size:13px;margin-bottom:7px}

/* ---------- controlli ---------- */
select,input[type=text],input[type=number]{
  width:100%;background:var(--fondo);border:1px solid var(--bordo);border-radius:9px;padding:10px 12px}
select:focus,input:focus{outline:0;border-color:var(--accento)}
input[type=number]{max-width:130px}
.bottone{background:var(--accento);border:0;border-radius:9px;padding:10px 18px;font-weight:600;
  cursor:pointer;color:#fff;display:inline-flex;align-items:center;gap:7px}
.bottone:hover{background:var(--accento2)}
.bottone:disabled{opacity:.45;cursor:default}
.bottone.fantasma{background:transparent;border:1px solid var(--bordo);color:var(--tenue);font-weight:500}
.bottone.fantasma:hover{background:var(--superficie2);color:var(--testo)}
.bottone.pericolo{background:transparent;border:1px solid var(--rosso);color:#f29ea0;padding:6px 13px;font-size:13px}
.bottone.pericolo:hover{background:rgba(237,66,69,.14)}

.interruttore{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.interruttore input{appearance:none;width:42px;height:24px;border-radius:999px;background:var(--bordo);
  position:relative;cursor:pointer;transition:background .15s;flex:none}
.interruttore input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .15s}
.interruttore input:checked{background:var(--verde)}
.interruttore input:checked::after{transform:translateX(18px)}

.elenco{max-height:230px;overflow:auto;border:1px solid var(--bordo);border-radius:9px;padding:5px}
.riga{display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:7px}
.riga:hover{background:var(--superficie2)}
.riga input[type=checkbox]{width:16px;height:16px;accent-color:var(--accento);flex:none}

/* ---------- statistiche ---------- */
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.tassello{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--raggio);padding:17px}
.tassello .n{font-size:27px;font-weight:700;letter-spacing:-1px;line-height:1.1}
.tassello .e{color:var(--tenue);font-size:12.5px;margin-top:3px}

/* ---------- tabelle ---------- */
.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th{text-align:left;color:var(--tenue);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;padding:0 10px 10px}
.tab td{padding:11px 10px;border-top:1px solid var(--bordo);vertical-align:middle}
.tab tr:hover td{background:var(--superficie2)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--tenue)}
.vuoto{color:var(--tenue);text-align:center;padding:34px 10px;font-size:14px}

/* ---------- varie ---------- */
.avviso{padding:11px 14px;border-radius:9px;font-size:14px;margin-bottom:16px}
.avviso.ok{background:rgba(59,165,93,.1);border:1px solid rgba(59,165,93,.45);color:#86dba4}
.avviso.ko{background:rgba(237,66,69,.1);border:1px solid rgba(237,66,69,.45);color:#f3a7a9}
.avviso.nota{background:rgba(240,178,50,.08);border:1px solid rgba(240,178,50,.4);color:#f0cd8a}
.barra{display:flex;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.affiancati{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.copia{display:flex;gap:9px}
.copia input{flex:1;font-family:ui-monospace,monospace;font-size:12.5px}
.anteprima{width:76px;height:76px;border-radius:21px;object-fit:cover;border:1px solid var(--bordo);background:var(--superficie2)}