* { box-sizing: border-box; }

:root {
  --verde: #86e405;
  --viola: #ad17e9;
  --bg-vuoto: #08080a;
  --superficie: rgba(20, 17, 24, 0.92);
  --bordo: rgba(134, 228, 5, 0.18);
  --testo: #f1f0f4;
  --testo-muto: #a29dae;
}

html, body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  color: var(--testo);
  background:
    radial-gradient(ellipse 700px 500px at 50% -10%, rgba(173,23,233,0.18), transparent 60%),
    var(--bg-vuoto);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.scheda {
  width: 100%;
  max-width: 400px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.testata { text-align: center; margin-bottom: 18px; }

.logo {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 26px;
  text-shadow: 0 0 16px rgba(173,23,233,0.4);
}
.logo span { color: var(--verde); }

.sottotitolo { color: var(--testo-muto); font-size: 13px; margin: 4px 0 0; }

.avviso-sicurezza {
  background: rgba(173,23,233,0.08);
  border: 1px solid rgba(173,23,233,0.25);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--testo-muto);
  line-height: 1.5;
  margin-bottom: 22px;
}

.passo { display: none; }
.passo.attivo { display: block; }

label {
  display: block;
  font-size: 12.5px;
  color: var(--testo-muto);
  margin-bottom: 6px;
}

input {
  width: 100%;
  padding: 12px 14px;
  background: #0d0d0f;
  border: 1px solid #333;
  border-radius: 10px;
  color: var(--testo);
  font-size: 15px;
  margin-bottom: 14px;
}
input:focus { outline: none; border-color: var(--verde); }

.btn-primario {
  width: 100%;
  padding: 13px;
  background: var(--verde);
  color: #0a0a0a;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(134,228,5,0.3);
}
.btn-primario:active { transform: scale(0.98); }

.icona-successo { font-size: 44px; text-align: center; margin: 10px 0; }
.testo-successo { text-align: center; font-weight: 600; font-size: 15px; margin: 0 0 6px; }

.messaggio-errore {
  background: rgba(224,32,32,0.1);
  border: 1px solid rgba(224,32,32,0.35);
  color: #ff8080;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin-top: 8px;
}

.caricamento {
  text-align: center;
  color: var(--testo-muto);
  font-size: 13px;
  margin-top: 10px;
}

.nascosto { display: none !important; }