:root {
    --blu:      #1f5f8b;
    --blu-scuro:#163f5c;
    --verde:    #2e9e6b;
    --giallo:   #e0a93b;
    --rosso:    #cf5b54;
    --grigio:   #f4f6f8;
    --bordo:    #d9e0e6;
    --testo:    #233140;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--testo);
    background: var(--grigio);
    line-height: 1.5;
}

.wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px;
}

header.app {
    background: var(--blu);
    color: #fff;
    padding: 24px 16px;
    text-align: center;
}
header.app h1 { margin: 0 0 4px; font-size: 1.5rem; }
header.app p  { margin: 0; opacity: .9; font-size: .95rem; }

.card {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    padding: 20px;
    margin: 16px 0;
}

.intro { font-size: .98rem; }
.intro .nota {
    background: #eef6ff;
    border-left: 4px solid var(--blu);
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: .9rem;
}

label.field { display: block; margin-bottom: 14px; }
label.field > span.lbl { display: block; font-weight: 600; margin-bottom: 6px; }

select, input[type=text], textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}
textarea { min-height: 90px; resize: vertical; }

.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 520px) { .demo-grid { grid-template-columns: 1fr; } }

.domanda {
    border-bottom: 1px solid var(--bordo);
    padding: 14px 0;
}
.domanda:last-child { border-bottom: 0; }
.domanda .testo { font-weight: 600; margin-bottom: 10px; }
.domanda .testo .num { color: var(--blu); margin-right: 6px; }

.opzioni { display: flex; gap: 8px; flex-wrap: wrap; }
.opzioni label {
    flex: 1 1 0;
    min-width: 90px;
    text-align: center;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 10px 6px;
    cursor: pointer;
    user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.opzioni input { position: absolute; opacity: 0; pointer-events: none; }
.opzioni label:hover { border-color: var(--blu); }
.opzioni input:checked + span { font-weight: 700; }
.opzioni label.sel-si         { background: #e8f6ee; border-color: var(--verde);  color: #1c6e48; }
.opzioni label.sel-abbastanza { background: #fdf4e3; border-color: var(--giallo); color: #8a6312; }
.opzioni label.sel-no         { background: #fbeae9; border-color: var(--rosso);  color: #8f2f2a; }

.btn {
    display: inline-block;
    background: var(--blu);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 14px 22px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--blu-scuro); }
.btn.secondario { background: #fff; color: var(--blu); border: 1px solid var(--blu); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.actions { margin-top: 8px; text-align: center; }

.errore {
    background: #fbeae9;
    border: 1px solid var(--rosso);
    color: #8f2f2a;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}
.required { color: var(--rosso); }

.esito { text-align: center; padding: 30px 16px; }
.esito .icona { font-size: 3rem; }
.esito h2 { margin: 10px 0; }

footer.app { text-align: center; font-size: .8rem; color: #8795a1; padding: 20px; }

.demo-banner {
    background: #fff4d6;
    border: 1px solid var(--giallo);
    color: #8a6312;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 16px 0 0;
    text-align: center;
    font-weight: 600;
    font-size: .92rem;
}