:root{
  --ink:#15181d; --soft:#4a515b; --rule:#dfe4ea; --bg:#f4f6f8;
  --accent:#0b4f6c; --accent-soft:#eaf2f6;
  --ok:#2b7a4b; --ok-bg:#eef7f1;
  --ko:#b02a30; --ko-bg:#fdeeee;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding:0 16px;
}
.wrap{max-width:760px;margin:0 auto;padding:28px 0 56px}

.testata{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.logo{height:34px;width:auto}
.sede{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

.scheda{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px 24px;margin-bottom:18px}
.scheda.ok{border-left:5px solid var(--ok);background:var(--ok-bg)}
.scheda.ko{border-left:5px solid var(--ko);background:var(--ko-bg)}
.occhiello{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}
h1{font-size:24px;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
h2{font-size:17px;margin:0 0 10px}
.sottotitolo{color:var(--soft);margin:0 0 14px}
.nota{font-size:14px;color:var(--soft)}
p{margin:0 0 10px}

dl.dati{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:14px 0 4px}
dl.dati div{border-top:1px solid var(--rule);padding-top:7px}
dl.dati dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
dl.dati dd{margin:2px 0 0;font-weight:600}

.avviso{padding:12px 14px;border-radius:8px;margin-bottom:16px;font-size:15px}
.avviso.errore{background:var(--ko-bg);border:1px solid #e3b6b8;color:#7d1c21}

.domanda{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:16px 18px 12px;margin:0 0 14px;overflow:hidden}
/* legend flottante: senza questo il testo lungo esce dal bordo del fieldset */
.domanda legend{float:left;width:100%;font-weight:700;padding:0 0 8px;line-height:1.35}
.domanda .num{display:inline-block;background:var(--accent);color:#fff;border-radius:50%;
  width:22px;height:22px;text-align:center;line-height:22px;font-size:12px;margin-right:6px}
.hint{font-size:13px;color:var(--soft);margin:2px 0 8px}
.opzione{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:8px;cursor:pointer}
.opzione:hover{background:var(--accent-soft)}
.opzione input{margin-top:4px;flex:0 0 auto;width:17px;height:17px}
.dichiarazione{background:var(--accent-soft);border-color:#c6dae4}

.informativa{margin:6px 0 18px;font-size:14px;color:var(--soft)}
.informativa summary{cursor:pointer;font-weight:600}
.informativa p{margin-top:8px}

.azioni{margin:22px 0 8px}
.bottone{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px;
  padding:13px 22px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none}
.bottone:hover{background:#093d54}
.bottone.piccolo{padding:9px 15px;font-size:14px}
.bottone.minimo{padding:6px 10px;font-size:13px;background:var(--soft)}

.esito h1{font-size:44px;letter-spacing:-.02em}
.verdetto{font-weight:700;font-size:18px;margin:0 0 8px}
.scheda.ok .verdetto{color:var(--ok)}
.scheda.ko .verdetto{color:var(--ko)}

ol.riepilogo{margin:0;padding-left:20px}
ol.riepilogo li{margin-bottom:14px}
ol.riepilogo .q{margin:0 0 3px}
ol.riepilogo .esitoq{font-size:13px;font-weight:700;margin:0}
ol.riepilogo li.giusta .esitoq{color:var(--ok)}
ol.riepilogo li.sbagliata .esitoq{color:var(--ko)}
ol.riepilogo .spieg{font-size:14px;color:var(--soft);margin:4px 0 0;
  border-left:3px solid var(--rule);padding-left:10px}

table.tab{width:100%;border-collapse:collapse;font-size:14px}
table.tab th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--soft);border-bottom:2px solid var(--rule);padding:7px 8px}
table.tab td{border-bottom:1px solid var(--rule);padding:9px 8px;vertical-align:middle}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}

form.login{display:flex;flex-direction:column;gap:12px;max-width:320px}
form.login label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--soft)}
form.login input{padding:10px;border:1px solid var(--rule);border-radius:8px;font-size:16px}

.piede{margin-top:28px;font-size:13px;color:var(--soft);text-align:center}
a{color:var(--accent)}

@media (max-width:560px){
  dl.dati{grid-template-columns:1fr}
  .esito h1{font-size:36px}
  table.tab{font-size:13px}
}