:root{
  --inchiostro:#1a1c1e;
  --tenue:#5f6570;
  --linea:#dfe2e6;
  --sfondo:#f6f7f8;
  --carta:#ffffff;
  --accento:#1f4e46;
  --accento-chiaro:#eaf2f0;
  --errore:#9a2c2c;
  --raggio:10px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--sfondo);
  color:var(--inchiostro);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:720px;margin:0 auto;padding:24px 20px 64px}

/* ---------- testata ---------- */
.testata{display:flex;align-items:center;gap:24px;margin-bottom:24px}
.marchio{font-weight:800;letter-spacing:.14em;font-size:14px}
.avanzamento{flex:1}
.barra{height:5px;background:var(--linea);border-radius:99px;overflow:hidden}
.barra span{display:block;height:100%;background:var(--accento);border-radius:99px;transition:width .3s ease}
.passo{font-size:12.5px;color:var(--tenue);margin-top:6px}

/* ---------- scheda ---------- */
.scheda{
  background:var(--carta);
  border:1px solid var(--linea);
  border-radius:var(--raggio);
  padding:32px 28px;
}
h1{font-size:26px;line-height:1.25;margin:0 0 12px}
h2{font-size:17px;margin:28px 0 8px}
.occhiello{color:var(--tenue);font-size:14px;margin:0 0 18px}
.piccolo{font-size:13px;color:var(--tenue);margin-top:24px}
.facolt{color:var(--tenue);font-weight:400;font-size:13px}

/* ---------- domande ---------- */
.domanda{border:0;padding:0;margin:0 0 30px}
.domanda legend{font-weight:600;padding:0;margin-bottom:12px;display:flex;gap:10px;align-items:baseline}
.numero{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;border-radius:50%;
  background:var(--accento-chiaro);color:var(--accento);
  font-size:12.5px;font-weight:700;flex:none;
}
.opzione{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 14px;margin-bottom:7px;
  border:1px solid var(--linea);border-radius:8px;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.opzione:hover{border-color:#b9c0c8}
.opzione.scelta{border-color:var(--accento);background:var(--accento-chiaro)}
.opzione input{margin:5px 0 0;flex:none;accent-color:var(--accento)}

/* ---------- campi ---------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-weight:600;font-size:14px;margin-bottom:5px}
.campo input,.campo select{
  width:100%;padding:10px 12px;font-size:15px;
  border:1px solid var(--linea);border-radius:8px;background:#fff;
}
.campo input:focus,.campo select:focus{outline:2px solid var(--accento);outline-offset:1px;border-color:var(--accento)}

.consensi{margin:22px 0 6px;padding-top:18px;border-top:1px solid var(--linea)}
.consenso{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--tenue);margin-bottom:12px;cursor:pointer}
.consenso input{margin:3px 0 0;flex:none;accent-color:var(--accento)}
.consenso a{color:var(--accento)}

.trappola{position:absolute;left:-9999px;height:0;overflow:hidden}

/* ---------- pulsanti ---------- */
.azioni{display:flex;gap:10px;margin-top:26px}
.btn{
  font:inherit;font-weight:600;font-size:15px;
  padding:12px 24px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;display:inline-block;
}
.primario{background:var(--accento);color:#fff;margin-left:auto}
.primario:hover{background:#17403a}
.secondario{background:#fff;border-color:var(--linea);color:var(--inchiostro)}
.secondario:hover{border-color:#b9c0c8}

/* ---------- messaggi ---------- */
.errore{
  display:block;color:var(--errore);font-size:13.5px;margin-top:5px;
}
p.errore{
  background:#fdf3f3;border:1px solid #f0d6d6;border-radius:8px;
  padding:11px 14px;margin:0 0 22px;
}

/* ---------- risultato ---------- */
.risultato .livello{display:flex;align-items:center;gap:12px;margin:18px 0 22px}
.badge{
  background:var(--accento);color:#fff;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;padding:5px 11px;border-radius:99px;
}
.risultato ul{padding-left:20px;margin:8px 0}
.risultato li{margin-bottom:7px}
.nota{
  background:var(--accento-chiaro);border-left:3px solid var(--accento);
  padding:13px 16px;border-radius:0 8px 8px 0;margin:16px 0;font-size:15px;
}
.chiusura{margin-top:30px;padding-top:24px;border-top:1px solid var(--linea)}
.chiusura .btn{margin-left:0;margin-top:10px}

/* ---------- piede ---------- */
.pie{margin-top:22px;font-size:12.5px;color:var(--tenue);text-align:center}
.pie a{color:var(--tenue)}

@media (max-width:560px){
  .wrap{padding:18px 14px 48px}
  .scheda{padding:24px 18px}
  h1{font-size:22px}
  .azioni{flex-direction:column-reverse}
  .btn{width:100%;text-align:center;margin-left:0}
}