:root {
  --nero: #06050c;
  --notte: #0c0a16;
  --fumo: #140f24;
  --linea: #251e3a;
  --testo: #efecf8;
  --tenue: #9b93b5;
  --viola: #a97bf5;
  --lavanda: #d3befb;
  --viola-cupo: #6c3fd0;
  --verde: #5bd16a;
  --arancio: #ffb347;
  --rosso: #ff4d6d;
  --oro: #ffd36e;
  --azzurro: #7cc4ff;
  --raggio: 14px;
  --bordo-largo: 22px;
  --largo: min(1720px, 95vw);
  --morbido: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--nero); }
body {
  color: var(--testo);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(108, 63, 208, 0.30), transparent 62%),
    radial-gradient(900px 520px at -12% 112%, rgba(169, 123, 245, 0.14), transparent 60%),
    var(--nero);
  background-attachment: fixed;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 68%, rgba(211,190,251,.6), transparent 60%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 38%, rgba(255,255,255,.5), transparent 60%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--viola); outline-offset: 3px; border-radius: 6px; }

.display {
  font-weight: 900;
  font-stretch: 85%;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.display em {
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-transform: none;
  color: var(--lavanda);
  letter-spacing: -0.03em;
}
.occhiello {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.numero { font-variant-numeric: tabular-nums; font-stretch: 100%; }

.vetro {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 15, 36, 0.78), rgba(12, 10, 22, 0.72));
  border: 1px solid var(--linea);
  border-radius: var(--bordo-largo);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- accesso ---------- */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.accesso .vetro { width: min(440px, 100%); padding: 44px 34px; text-align: center; }
.accesso img { width: 88px; filter: drop-shadow(0 0 26px rgba(169,123,245,.6)); }
.accesso h1 { margin-top: 20px; font-size: clamp(2.6rem, 9vw, 3.6rem); }
.accesso p { color: var(--tenue); margin: 14px 0 28px; line-height: 1.5; }
.accesso .errore { color: var(--rosso); margin: -12px 0 18px; font-size: 14px; font-weight: 600; }

.bottone {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--viola-cupo), var(--viola));
  color: #fff;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.86rem;
  box-shadow: 0 10px 30px rgba(108, 63, 208, .45);
  transition: transform .25s var(--morbido), box-shadow .25s var(--morbido);
}
.bottone:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(108, 63, 208, .6); }

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: rgba(6, 5, 12, 0.7);
  border-bottom: 1px solid var(--linea);
  backdrop-filter: blur(14px);
}
.marchio { display: flex; align-items: center; gap: 12px; }
.marchio img { width: 36px; filter: drop-shadow(0 0 12px rgba(169,123,245,.45)); }
.marchio b { font-size: 1.35rem; white-space: nowrap; }
.live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--linea);
  font-size: 0.7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue);
}
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 10px var(--verde); animation: battito 1s infinite; }
.live.ko i { background: var(--rosso); box-shadow: 0 0 10px var(--rosso); animation: none; }
@keyframes battito { 50% { opacity: .35; transform: scale(.8); } }
.utente { display: flex; align-items: center; gap: 12px; }
.utente img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--viola-cupo); }
.utente span { font-weight: 700; font-size: .9rem; }
.utente a { padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); transition: color .2s, border-color .2s; }
.utente a:hover { color: var(--testo); border-color: var(--viola); }

main { width: var(--largo); margin: 0 auto; padding: clamp(24px, 4vw, 48px) 0 80px; }

.apertura { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 40px); }
.apertura h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); }
.apertura .riepilogo { display: flex; gap: clamp(16px, 3vw, 36px); }
.apertura .riepilogo div { text-align: right; }
.apertura .riepilogo b { display: block; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900; font-stretch: 85%; line-height: 1; margin-top: 6px; }

.sezione { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: clamp(36px, 5vw, 56px) 4px 16px; }
.sezione h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }

/* ---------- VPS ---------- */
.griglia-vps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: 20px; }
.vps { padding: clamp(20px, 2.4vw, 30px); overflow: hidden; }
.vps-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vps-testa h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.vps-testa .occhiello { margin-top: 8px; }
.stato { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); white-space: nowrap; }
.pallino { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pallino.ok { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.pallino.ko { background: var(--rosso); box-shadow: 0 0 10px var(--rosso); }
.pallino.boh { background: var(--arancio); box-shadow: 0 0 10px var(--arancio); }

.grande { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: end; margin-top: 22px; }
.grande-num .occhiello { margin-bottom: 4px; }
.grande-num b { display: block; font-size: clamp(3.4rem, 6.4vw, 5rem); font-weight: 900; font-stretch: 85%; line-height: .9; letter-spacing: -0.03em; }
.grande-num b small { font-size: .45em; color: var(--lavanda); margin-left: 2px; }
.dal-vivo { position: relative; height: 130px; }
.dal-vivo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.misure { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.misura { padding: 14px; border: 1px solid var(--linea); border-radius: var(--raggio); background: rgba(6, 5, 12, .35); }
.misura b { display: block; white-space: nowrap; font-size: 1.5rem; font-weight: 900; font-stretch: 85%; margin: 6px 0 8px; }
.misura > small { display: block; color: var(--tenue); font-size: .75rem; margin-top: 6px; }
.barra { height: 5px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 4px; transition: width .6s var(--morbido), background .6s; }

.giorno { margin-top: 18px; }
.giorno .occhiello { display: flex; justify-content: space-between; margin-bottom: 8px; }
.giorno canvas { width: 100%; height: 64px; display: block; }
.legenda { display: inline-flex; gap: 14px; }
.legenda i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.top { margin-top: 22px; }
.top .occhiello { margin-bottom: 6px; }
.riga-top { display: grid; grid-template-columns: 1fr 76px 58px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(37, 30, 58, .7); }
.riga-top .nome { font-weight: 700; font-size: .92rem; }
.riga-top .barra { margin-top: 6px; height: 4px; }
.riga-top .barra i { background: linear-gradient(90deg, var(--viola-cupo), var(--viola)); }
.riga-top .num { text-align: right; font-weight: 800; font-stretch: 90%; color: var(--lavanda); }

/* ---------- schede ---------- */
.griglia-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.scheda { padding: 18px 20px; border-radius: var(--bordo-largo); transition: transform .3s var(--morbido), border-color .3s; }
.scheda:hover { transform: translateY(-3px); border-color: rgba(169, 123, 245, .5); }
.scheda-testa { display: flex; align-items: center; gap: 14px; }
.scheda-icona { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(108, 63, 208, .18); border: 1px solid rgba(169, 123, 245, .25); flex: none; }
.scheda-nome { font-size: 1.25rem; font-weight: 900; font-stretch: 85%; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.scheda .stato { margin-top: 6px; }
.scheda-numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.scheda-numeri b { display: block; font-size: 1.15rem; font-weight: 900; font-stretch: 85%; margin-top: 3px; }

.piede { text-align: center; margin-top: 56px; }

@media (max-width: 720px) {
  .misure { grid-template-columns: repeat(2, 1fr); }
  .grande { grid-template-columns: 1fr; }
  .apertura .riepilogo div { text-align: left; }
}
@media (max-width: 520px) {
  .utente span, .live span { display: none; }
  .riga-top { grid-template-columns: 1fr 64px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- azioni ---------- */
.azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(37, 30, 58, .7); }
.azione {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--linea); background: rgba(6, 5, 12, .4);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--testo);
  transition: border-color .2s, background .2s, transform .2s var(--morbido);
}
.azione:hover { border-color: var(--viola); background: rgba(108, 63, 208, .25); transform: translateY(-1px); }
.azione.verde { border-color: rgba(91, 209, 106, .45); color: #b9f5c1; }
.azione.verde:hover { background: rgba(91, 209, 106, .18); border-color: var(--verde); }
.azione.rossa { border-color: rgba(255, 77, 109, .4); color: #ffb3c0; }
.azione.rossa:hover { background: rgba(255, 77, 109, .16); border-color: var(--rosso); }
.azione.piccola { margin-left: auto; opacity: .7; }
.attesa { color: var(--lavanda); animation: battito 1s infinite; }

.velo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(6, 5, 12, .6); backdrop-filter: blur(6px); animation: entra .2s var(--morbido); }
.finestra { width: min(440px, 100%); padding: 28px; background: linear-gradient(180deg, #1a1430, #0f0b1d); border-color: rgba(169, 123, 245, .35); animation: sale .3s var(--morbido); }
.finestra h3 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 8px 0 10px; }
.finestra .tenue { color: var(--tenue); line-height: 1.5; }
.finestra-pulsanti { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.finestra-pulsanti .azione { padding: 11px 20px; font-size: .78rem; }
@keyframes entra { from { opacity: 0; } }
@keyframes sale { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.avviso {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(20, 15, 36, .95); border: 1px solid var(--viola-cupo);
  font-weight: 700; box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  animation: sale .3s var(--morbido); transition: opacity .5s, transform .5s;
}
.avviso.ko { border-color: var(--rosso); color: #ffb3c0; }
.avviso.via { opacity: 0; transform: translateY(10px); }

.registro { padding: 8px 22px; }
.riga-registro { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(37, 30, 58, .7); font-weight: 600; }
.riga-registro:first-child { border-top: 0; }
.registro .tenue { color: var(--tenue); padding: 14px 0; }

/* ---------- accessi ---------- */
.accessi { padding: 22px; }
.nuovo-accesso { display: flex; gap: 10px; flex-wrap: wrap; }
.nuovo-accesso input {
  flex: 1 1 260px; min-width: 0;
  padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--linea); background: rgba(6, 5, 12, .5);
  color: var(--testo); font: inherit; font-weight: 600;
}
.nuovo-accesso input:focus { outline: none; border-color: var(--viola); }
.nuovo-accesso .azione { padding: 12px 20px; }
.aiuto { margin: 10px 4px 14px; letter-spacing: .06em; text-transform: none; font-weight: 600; }
.riga-accesso { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(37, 30, 58, .7); }
.riga-accesso img, .senza-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--fumo); }
.riga-accesso div { flex: 1; min-width: 0; }
.riga-accesso b { display: block; font-weight: 800; }
.riga-accesso .occhiello { letter-spacing: .06em; }