:root {
  --carta: #fbf7ef;
  --carta-2: #f3ead8;
  --inchiostro: #2b2118;
  --muto: #6f6253;
  --bordo: #e0d3bb;
  --accento: #8c3b1f;
  --accento-2: #b8860b;
  --ok: #2e7d32;
  --errore: #b3261e;
  --scheda: #ffffff;
  --ombra: 0 2px 10px rgba(60, 40, 20, .08);
  --raggio: 12px;
  --preistoria: #7a5c3e;
  --antica: #a0522d;
  --medioevo: #4b5d8a;
  --moderna: #2f7d6d;
  --contemporanea: #8a3b6e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --carta: #1c1915; --carta-2: #26221c; --inchiostro: #efe6d6; --muto: #b0a491; --bordo: #3b342a;
    --accento: #e08a5f; --accento-2: #e0b44a; --scheda: #24201b; --ombra: 0 2px 10px rgba(0,0,0,.35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font: 17px/1.6 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}
a { color: var(--accento); }
h1, h2, h3, h4 { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.25; }
img { max-width: 100%; height: auto; }
.muto { color: var(--muto); }
.piccolo { font-size: .85em; }
.inline { display: inline; }

/* ---------- testata */
.testata {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--inchiostro); color: var(--carta);
  font-family: "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { .testata { background: #0f0d0b; } }
.logo { color: var(--carta); font-weight: 700; text-decoration: none; font-size: 1.15rem; }
.menu { display: flex; gap: .2rem; flex-wrap: wrap; flex: 1; }
.menu a { color: #e9dcc4; text-decoration: none; padding: .35rem .7rem; border-radius: 8px; }
.menu a:hover, .menu a.attivo { background: rgba(255,255,255,.12); color: #fff; }
.profilo-mini { display: flex; gap: .5rem; align-items: center; color: var(--carta); text-decoration: none; }
.profilo-testo { display: flex; flex-direction: column; min-width: 120px; font-size: .85rem; }
.grado-icona { font-size: 1.8rem; }
.barra-xp { display: block; height: 6px; background: rgba(128,128,128,.3); border-radius: 4px; overflow: hidden; margin: 3px 0; }
.barra-xp span { display: block; height: 100%; background: linear-gradient(90deg, var(--accento-2), var(--accento)); }
.barra-xp.grande { height: 12px; }

.contenuto { max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.pagina-mappa .contenuto { max-width: 1500px; }
.piede { text-align: center; font-size: .8rem; color: var(--muto); padding: 1.5rem 1rem; border-top: 1px solid var(--bordo); }

/* ---------- componenti */
.scheda { background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.2rem; box-shadow: var(--ombra); }
.modulo-stretto { max-width: 460px; margin: 1rem auto; }
form label { display: block; margin: .7rem 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: .95rem; }
form label.check { display: flex; gap: .5rem; align-items: center; }
input, select, textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--bordo); border-radius: 8px;
  background: var(--carta); color: var(--inchiostro); font: inherit; font-size: .95rem;
}
input[type=checkbox], input[type=radio] { width: auto; }
textarea { min-height: 90px; }
.bottone {
  display: inline-block; background: var(--accento); color: #fff; border: 0; border-radius: 10px;
  padding: .6rem 1.1rem; font: 600 .95rem "Segoe UI", system-ui, sans-serif; cursor: pointer; text-decoration: none;
}
.bottone:hover { filter: brightness(1.1); }
.bottone.secondario { background: transparent; color: var(--accento); border: 2px solid var(--accento); }
.bottone.piccolo { padding: .3rem .7rem; font-size: .85rem; }
.bottone.pericolo { background: var(--errore); }
button.link { background: none; border: 0; color: var(--accento); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.avviso { padding: .7rem 1rem; border-radius: 10px; margin: .6rem 0; border: 1px solid var(--bordo); background: var(--scheda); font-family: "Segoe UI", system-ui, sans-serif; }
.avviso-errore { border-color: var(--errore); color: var(--errore); }
.avviso-ok { border-color: var(--ok); }
.avviso-xp, .avviso-badge { border-color: var(--accento-2); background: linear-gradient(90deg, rgba(184,134,11,.15), transparent); }
.etichetta { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; background: var(--carta-2); border: 1px solid var(--bordo); border-radius: 6px; padding: 0 .4rem; margin-left: .4rem; color: var(--muto); }
.briciole { font-size: .9rem; color: var(--muto); font-family: "Segoe UI", system-ui, sans-serif; }
.tabella { width: 100%; border-collapse: collapse; background: var(--scheda); font-family: "Segoe UI", system-ui, sans-serif; font-size: .92rem; }
.tabella th, .tabella td { padding: .5rem .6rem; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.tabella th { background: var(--carta-2); }
.scorri { overflow-x: auto; }
.banner-anteprima { background: var(--accento-2); color: #000; text-align: center; padding: .4rem; font-family: "Segoe UI", system-ui, sans-serif; font-size: .9rem; }
.barra-anteprima { display: flex; justify-content: flex-end; }
.barra-anteprima label { display: flex; gap: .5rem; align-items: center; margin: 0; }
.barra-anteprima select { width: auto; }

/* ---------- home */
.hero { text-align: center; padding: 3rem 1rem; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.griglia-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.grado-scheda { text-align: center; }
.grado-grande { font-size: 3.5rem; }
.medaglie { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.medaglie li { display: flex; flex-direction: column; align-items: center; width: 92px; text-align: center; font-size: .78rem; font-family: "Segoe UI", system-ui, sans-serif; }
.medaglie li span { font-size: 2rem; }
.medaglie li.non-ottenuta { opacity: .35; filter: grayscale(1); }

/* ---------- linea del tempo */
.timeline { list-style: none; padding: 0 0 0 1.5rem; border-left: 4px solid var(--bordo); margin-left: .5rem; }
.tappa { position: relative; margin: 0 0 .8rem; }
.tappa::before { content: ""; position: absolute; left: -2.05rem; top: .9rem; width: 16px; height: 16px; border-radius: 50%; background: var(--bordo); border: 3px solid var(--carta); }
.tappa-superato::before { background: var(--ok); }
.tappa-aperto::before { background: var(--accento-2); }
.tappa a { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; text-decoration: none; color: inherit; background: var(--scheda); border: 1px solid var(--bordo); border-radius: 10px; padding: .6rem .9rem; }
.tappa a:hover { border-color: var(--accento); }
.tappa-bloccato a { opacity: .55; cursor: not-allowed; }
.tappa-icona { grid-row: span 3; font-size: 1.4rem; align-self: center; }
.tappa-anni { font-size: .78rem; color: var(--muto); font-family: "Segoe UI", system-ui, sans-serif; }
.tappa-progresso { font-size: .8rem; color: var(--muto); }

/* ---------- capitoli */
.titolo-era { border-bottom: 3px solid currentColor; padding-bottom: .3rem; margin-top: 2rem; }
.era-preistoria.titolo-era { color: var(--preistoria); }
.era-antica.titolo-era { color: var(--antica); }
.era-medioevo.titolo-era { color: var(--medioevo); }
.era-moderna.titolo-era { color: var(--moderna); }
.era-contemporanea.titolo-era { color: var(--contemporanea); }
.griglia-capitoli { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.carta-capitolo { display: flex; flex-direction: column; background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--ombra); transition: transform .15s; }
.carta-capitolo:hover { transform: translateY(-3px); }
.carta-capitolo.bloccato { filter: grayscale(.9); opacity: .6; cursor: not-allowed; }
.carta-capitolo.superato { border-color: var(--ok); }
.copertina { position: relative; height: 140px; background: var(--carta-2) center/cover no-repeat; }
.crediti-copertina { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 1px 6px; background: rgba(0,0,0,.55); color: #fff; font: 10px/1.4 "Segoe UI", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crediti-copertina:empty { display: none; }
.copertina-capitolo { margin: 0; }
.copertina-capitolo figcaption, .pannello-fig figcaption { font-size: .75rem; color: var(--muto); margin-top: .2rem; }
.pannello-fig { margin: .5rem 0; }
.licenza-testo { font-size: .8rem; color: var(--muto); }
.carta-corpo { padding: .8rem 1rem 1rem; }
.carta-corpo h3 { margin: .2rem 0; font-size: 1.05rem; }
.carta-corpo p { margin: .3rem 0 .6rem; font-size: .9rem; color: var(--muto); }
.testata-capitolo { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 1.5rem; align-items: start; }
.testata-capitolo img { border-radius: var(--raggio); box-shadow: var(--ombra); }
.testata-capitolo h1 { margin: .2rem 0; }
.sottotitolo { font-style: italic; color: var(--muto); }
@media (max-width: 700px) { .testata-capitolo { grid-template-columns: 1fr; } }
.elenco-lezioni { padding-left: 1.4rem; }
.elenco-lezioni li { margin: .4rem 0; }
.elenco-lezioni a { text-decoration: none; }
.elenco-lezioni li.letta a { color: var(--muto); }

/* ---------- lezione */
.lezione { max-width: 780px; margin: 0 auto; }
.lezione h1 { font-size: 2rem; margin-bottom: 0; }
.lezione figure { margin: 1rem 0; }
.lezione figure img { border-radius: 8px; display: block; }
.lezione figure.principale img { width: 100%; max-height: 420px; object-fit: cover; }
.lezione figure.laterale { float: right; width: 42%; margin: .3rem 0 1rem 1.2rem; }
@media (max-width: 640px) { .lezione figure.laterale { float: none; width: 100%; margin: 1rem 0; } }
figcaption { font-size: .82rem; color: var(--muto); margin-top: .3rem; }
.fonte-img { font-size: .75rem; }
.lezione .intro { font-size: 1.07rem; }
.livello-medie .intro { font-size: 1.15rem; line-height: 1.75; }
.sezione { border-top: 1px solid var(--bordo); padding: .3rem 0; clear: both; }
.sezione summary { cursor: pointer; list-style: none; }
.sezione summary::-webkit-details-marker { display: none; }
.sezione summary h2 { display: inline; font-size: 1.35rem; }
.sezione summary::before { content: "▸ "; color: var(--accento); }
.sezione[open] summary::before { content: "▾ "; }
.sezione h4 { margin: 1.2rem 0 .3rem; }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.galleria img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.attribuzione { clear: both; font-size: .82rem; color: var(--muto); border-top: 1px dashed var(--bordo); padding-top: .8rem; margin-top: 2rem; }
.nota-docente { background: var(--carta-2); border-left: 4px solid var(--accento-2); padding: .8rem 1rem; border-radius: 6px; margin: 1rem 0; }
.nav-lezione { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 780px; margin: 2rem auto 0; }

/* ---------- quiz */
.quiz { max-width: 780px; }
.domanda { border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--scheda); margin: 0 0 1rem; padding: 1rem 1.2rem; }
.domanda legend { font-weight: 600; padding: 0 .3rem; font-family: "Segoe UI", system-ui, sans-serif; }
.domanda .num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accento); color: #fff; font-size: .85rem; margin-right: .3rem; }
.difficolta { color: var(--accento-2); font-size: .8rem; margin-left: .3rem; }
.opzione { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; margin: .2rem 0; }
.opzione:hover { background: var(--carta-2); }
.opzione input { margin-top: .35rem; }
.risultato { text-align: center; max-width: 520px; }
.risultato.ok { border-color: var(--ok); }
.punteggio-grande { font: 700 3.5rem "Segoe UI", system-ui, sans-serif; color: var(--accento); }
.risultato.ok .punteggio-grande { color: var(--ok); }
.esito { font-weight: 600; }
.correzione li { margin-bottom: 1rem; padding: .6rem .8rem; border-radius: 8px; background: var(--scheda); border-left: 4px solid var(--ok); }
.correzione li.sbagliata { border-left-color: var(--errore); }
.correzione .testo { font-weight: 600; margin: 0 0 .3rem; }
.correzione p { margin: .2rem 0; }
.spiegazione { color: var(--muto); font-size: .92rem; }

/* ---------- mappa */
.mappa-layout { display: grid; grid-template-columns: 1fr 380px; gap: 1rem; }
@media (max-width: 960px) { .mappa-layout { grid-template-columns: 1fr; } }
.mappa-colonna { min-width: 0; }
#mappa.mare { background: #b9d3e0; }
#mappa { height: 68vh; min-height: 420px; border-radius: var(--raggio); border: 1px solid var(--bordo); box-shadow: var(--ombra); background: #aad3df; }
.mappa-controlli { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.mappa-controlli input[type=range] { flex: 1; min-width: 160px; padding: 0; accent-color: var(--accento); }
.mappa-controlli select { width: auto; max-width: 260px; }
.etichetta-anno { font: 700 1.3rem "Segoe UI", system-ui, sans-serif; min-width: 130px; text-align: center; color: var(--accento); }
.etichetta-anno.caricamento { opacity: .5; }
.pannello { background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem 1.2rem; max-height: calc(68vh + 3rem); overflow-y: auto; box-shadow: var(--ombra); }
.pannello h2 { margin: .2rem 0; }
.pannello-img { display: block; width: 100%; max-height: 240px; object-fit: contain; background: var(--carta-2); border-radius: 8px; }
.sopratitolo { font: 600 .78rem "Segoe UI", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--accento-2); margin: 0; }
.temi { display: flex; flex-wrap: wrap; gap: .4rem; }
.tema { border: 1px solid var(--bordo); background: var(--carta); color: var(--inchiostro); border-radius: 20px; padding: .35rem .75rem; cursor: pointer; font: .85rem "Segoe UI", system-ui, sans-serif; }
.tema:hover, .tema.attivo { background: var(--accento); color: #fff; border-color: var(--accento); }
.voci { padding-left: 1.1rem; }
.voci li { margin-bottom: .5rem; }
.riquadro { background: var(--carta-2); border-radius: 8px; padding: .7rem; margin: .8rem 0; }
.nome-citta { background: rgba(255,255,255,.85); border: 0; box-shadow: none; font: 600 11px "Segoe UI", system-ui, sans-serif; padding: 0 4px; }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--inchiostro); color: var(--carta); padding: .8rem 1.2rem; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 2000; font-family: "Segoe UI", system-ui, sans-serif; }
.leaflet-container { font-family: "Segoe UI", system-ui, sans-serif; }
/* mappa MapLibre */
#mappa.maplibregl-map { background: #b9d3e0; font-family: "Segoe UI", system-ui, sans-serif; }
.mappa-controlli .bottone.piccolo { min-width: 2.4rem; }
.form-anno { display: flex; gap: .4rem; align-items: center; margin: 0; }
.form-anno label { font: .9rem "Segoe UI", system-ui, sans-serif; }
.form-anno input { width: 6.5rem; }
.spunta { display: inline-flex; gap: .35rem; align-items: center; font: .9rem "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.spunta input { width: auto; }
.citta { display: flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.citta .punto { width: 10px; height: 10px; border-radius: 50%; background: #f5deb3; border: 1.5px solid #222; flex: none; }
.citta-1 .punto { width: 14px; height: 14px; background: #b8860b; }
.citta .nome-citta { display: none; border-radius: 3px; color: #222; white-space: nowrap; }
.citta.con-nome .nome-citta { display: inline; }
.citta:hover .nome-citta { display: inline; background: #fff; }
.popup-nome .maplibregl-popup-content { padding: .35rem .6rem; font: .85rem "Segoe UI", system-ui, sans-serif; pointer-events: none; }
.popup-nome { pointer-events: none; }

/* ---------- classifica / profilo / admin */
.podio td:first-child { font-size: 1.3rem; }
.riga-io { background: rgba(184,134,11,.15); }
.admin-menu { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.admin-menu a { padding: .35rem .8rem; border: 1px solid var(--bordo); border-radius: 8px; text-decoration: none; background: var(--scheda); font-family: "Segoe UI", system-ui, sans-serif; font-size: .9rem; }
.admin-menu a.attivo { background: var(--accento); color: #fff; border-color: var(--accento); }
.griglia-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1rem; }
.griglia-form .largo { grid-column: 1 / -1; }
.aiuto { display: block; font-size: .78rem; color: var(--muto); }
.filtri { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filtri label { margin: 0; }
.azioni { white-space: nowrap; }
.azioni form { display: inline; }
.livelli-tabella input, .livelli-tabella select { min-width: 70px; }

/* ---------- editor testi */
.editor-testo { min-height: 60vh; font: 13px/1.5 Consolas, "Courier New", monospace; }
.stato-ok { color: var(--ok); font-weight: 600; }
.stato-ko { color: var(--errore); font-weight: 600; }

/* ---------- mappe piccole (lezioni e verifiche) */
.mini-mappa { height: 300px; border-radius: 10px; border: 1px solid var(--bordo); background: #aad3df; }
.mini-mappa.mare { background: #b9d3e0; }
.mini-mappa.quiz { height: 380px; cursor: crosshair; }
.mini-mappa.risultato { height: 260px; margin: .5rem 0; }
.mini-mappa-box { margin: 1.2rem 0; clear: both; }
.mini-mappa-box figcaption { font-size: .88rem; }
.mini-mappa-errore { padding: 1rem; color: var(--muto); }
.consegna { margin: .2rem 0 .6rem; color: var(--muto); font-size: .92rem; }
.ordine-domanda, .abbinamento-domanda { display: flex; flex-direction: column; gap: .5rem; }
.riga-ordine { display: flex; gap: .7rem; align-items: center; margin: 0; }
.riga-ordine select { width: 5rem; flex: none; }
.riga-abbinamento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .7rem; align-items: center; margin: 0; }
@media (max-width: 560px) { .riga-abbinamento { grid-template-columns: 1fr; gap: .2rem; } }
.lezioni-collegate { padding-left: 1.1rem; }
.lezioni-collegate li { margin-bottom: .3rem; }

/* ---------- ospiti e account facoltativo */
.accesso-testata { display: flex; gap: .4rem; align-items: center; }
.bottone.chiaro { color: #f3ead8; border-color: rgba(243,234,216,.6); }
.bottone.grande { padding: .85rem 1.5rem; font-size: 1.05rem; border-radius: 12px; }
.barra-ospite { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: .8rem 1rem; margin-bottom: 1rem; font-family: "Segoe UI", system-ui, sans-serif; font-size: .92rem; }
.barra-ospite p { margin: 0; flex: 1 1 280px; color: var(--muto); }
.scelta-livello { display: flex; gap: .5rem; align-items: center; margin: 0; }
.scelta-livello label { margin: 0; font-weight: 600; white-space: nowrap; }
.scelta-livello select { width: auto; max-width: 340px; }
.invito-account { font-family: "Segoe UI", system-ui, sans-serif; font-size: .9rem; background: linear-gradient(90deg, rgba(184,134,11,.13), transparent);
  border-left: 3px solid var(--accento-2); padding: .6rem .9rem; border-radius: 0 8px 8px 0; }
.risultato .invito-account { text-align: left; margin-top: 1rem; }
.centrato { max-width: 780px; margin: 1rem auto; }
.segnala-riga { font-family: "Segoe UI", system-ui, sans-serif; font-size: .88rem; color: var(--muto); }
.lezione-piede { max-width: 780px; margin: 1.5rem auto 0; }
.segnala-domanda { margin-top: .4rem !important; font-size: .82rem; font-family: "Segoe UI", system-ui, sans-serif; }
.segnala-domanda .link, .segnala-riga .link { color: var(--muto); }
.segnala-domanda .link:hover, .segnala-riga .link:hover { color: var(--accento); }

/* home per gli ospiti */
.hero-ospite { padding: 3.5rem 1rem 2.5rem; }
.hero-ospite .sopratitolo { margin-bottom: .6rem; }
.hero-ospite h1 { margin: 0 0 1rem; font-size: clamp(2rem, 6vw, 3.4rem); }
.hero-sotto { max-width: 640px; margin: 0 auto 1.6rem; font-size: 1.1rem; color: var(--muto); }
.hero-azioni { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.tre-livelli { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0 0 2.5rem; }
.livello-carta { background: var(--scheda); border: 1px solid var(--bordo); border-radius: 16px; padding: 1.3rem 1.3rem 1rem; box-shadow: var(--ombra); }
.livello-carta.evidenza { border-color: var(--accento-2); box-shadow: 0 6px 24px rgba(184,134,11,.18); }
.livello-carta h2 { margin: .5rem 0 .4rem; font-size: 1.2rem; }
.livello-carta p { font-size: .95rem; margin: .4rem 0; }
.livello-icona { font-size: 2rem; }
.link-piccolo { font: 600 .88rem "Segoe UI", system-ui, sans-serif; margin-left: .5rem; }

/* ---------- segnalazioni */
.segnala-fluttuante {
  position: fixed; z-index: 3000; border: 0; border-radius: 999px; padding: .45rem .9rem; cursor: pointer;
  background: #2b2118; color: #fbf7ef; font: 600 .85rem "Segoe UI", system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.3);
  animation: segnala-entra .15s ease-out;
}
.segnala-fluttuante:hover { background: var(--accento); }
@keyframes segnala-entra { from { opacity: 0; transform: translateY(4px); } }
.dialogo-segnala {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--bordo); border-radius: 20px;
  background: var(--scheda); color: var(--inchiostro); box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.dialogo-segnala::backdrop { background: rgba(20, 14, 8, .5); backdrop-filter: blur(3px); }
.dialogo-segnala[open] { animation: segnala-apri .2s ease-out; }
@keyframes segnala-apri { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.segnala-modulo, .segnala-grazie { position: relative; padding: 1.4rem 1.5rem 1.2rem; font-family: "Segoe UI", system-ui, sans-serif; }
.segnala-modulo[hidden], .segnala-grazie[hidden] { display: none; }
.segnala-modulo h2, .segnala-grazie h2 { margin: .1rem 0 .3rem; font-size: 1.4rem; }
.segnala-sopra { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accento); }
.segnala-chiudi { position: absolute; top: .8rem; right: .8rem; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--carta-2);
  color: var(--inchiostro); cursor: pointer; }
.segnala-dove { margin: 0 2rem .6rem 0; font-size: .85rem; color: var(--muto); }
.segnala-dove:empty { display: none; }
.segnala-citazione { margin: .4rem 0 .8rem; padding: .6rem .8rem; border-left: 3px solid var(--accento-2); background: var(--carta-2);
  border-radius: 0 8px 8px 0; font: italic .95rem/1.5 Georgia, serif; max-height: 7.5em; overflow: auto; }
.segnala-categorie { border: 0; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.segnala-categorie legend { font-size: .85rem; font-weight: 600; margin-bottom: .4rem; padding: 0; }
.segnala-categorie label { margin: 0; cursor: pointer; }
.segnala-categorie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segnala-categorie span { display: inline-block; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--bordo); font-size: .85rem;
  background: var(--carta); transition: background-color .15s, border-color .15s; }
.segnala-categorie input:checked + span { background: var(--accento); border-color: var(--accento); color: #fff; }
.segnala-categorie input:focus-visible + span { outline: 2px solid var(--accento); outline-offset: 2px; }
.segnala-campo { font-size: .88rem !important; margin: .7rem 0 !important; }
.segnala-campo small { color: var(--muto); font-weight: 400; }
.segnala-campo textarea, .segnala-campo input { margin-top: .3rem; }
.segnala-errore { color: var(--errore); font-size: .88rem; margin: .3rem 0; }
.segnala-azioni { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .8rem; }
.segnala-nota { font-size: .78rem; color: var(--muto); margin: .8rem 0 0; }
.segnala-grazie { text-align: center; padding: 2rem 1.5rem 1.5rem; }
.segnala-grazie-icona { width: 56px; height: 56px; margin: 0 auto .6rem; border-radius: 50%; background: var(--ok); color: #fff;
  display: grid; place-items: center; font-size: 1.8rem; animation: segnala-ok .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes segnala-ok { from { transform: scale(.3); opacity: 0; } }

/* amministrazione delle segnalazioni */
.elenco-segnalazioni { display: grid; gap: .8rem; }
.segnalazione { padding: 1rem 1.2rem; border-left: 4px solid var(--accento-2); }
.segnalazione.stato-risolta { border-left-color: var(--ok); opacity: .8; }
.segnalazione.stato-respinta { border-left-color: var(--bordo); opacity: .7; }
.segnalazione header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-family: "Segoe UI", system-ui, sans-serif; }
.segnalazione-tipo { font-weight: 700; }
.segnalazione-dove { margin: .4rem 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: .92rem; }
.segnalazione blockquote { margin: .5rem 0; padding: .4rem .8rem; border-left: 3px solid var(--bordo); background: var(--carta-2); font-style: italic; }
.segnalazione-azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 0; }
.segnalazione-azioni input { flex: 1 1 240px; width: auto; }

/* ---------- il mio studio */
.storico-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.2rem; }
.storico-testa h1 { margin: .2rem 0; }
.storico-testa p { margin: .2rem 0; }
.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.cifra { background: var(--scheda); border: 1px solid var(--bordo); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--ombra);
  display: flex; flex-direction: column; font-family: "Segoe UI", system-ui, sans-serif; }
.cifra strong { font: 700 2rem/1.1 Georgia, serif; color: var(--accento); }
.cifra span { font-size: .85rem; color: var(--muto); }
.riquadro-ripasso { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; margin-bottom: 1.5rem; border-radius: 14px; text-decoration: none; color: inherit;
  background: linear-gradient(90deg, rgba(184,134,11,.16), rgba(184,134,11,.04)); border: 1px solid rgba(184,134,11,.4); font-family: "Segoe UI", system-ui, sans-serif; }
.riquadro-ripasso:hover { border-color: var(--accento-2); }
.riquadro-ripasso-icona { font-size: 1.8rem; }
.riquadro-ripasso small { display: block; color: var(--muto); }
.riquadro-ripasso-vai { margin-left: auto; font-weight: 700; color: var(--accento); white-space: nowrap; }
.avanzamento-ere { display: grid; gap: .7rem; margin-bottom: 2rem; }
.era-riga-testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; font-family: "Segoe UI", system-ui, sans-serif; font-size: .9rem; }
.era-riga-testa span { color: var(--muto); font-size: .85rem; }
.era-barra { height: 10px; border-radius: 999px; background: var(--carta-2); overflow: hidden; margin-top: .3rem; }
.era-barra span { display: block; height: 100%; border-radius: 999px; background: var(--colore-era, var(--accento)); min-width: 4px; transition: width .6s ease; }
.era-preistoria { --colore-era: var(--preistoria); }
.era-antica { --colore-era: var(--antica); }
.era-medioevo { --colore-era: var(--medioevo); }
.era-moderna { --colore-era: var(--moderna); }
.era-contemporanea { --colore-era: var(--contemporanea); }
.storico-griglia { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .storico-griglia { grid-template-columns: 1fr; } }
.diario-giorno { font: 700 .78rem "Segoe UI", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muto); margin: 1.2rem 0 .4rem; }
.diario { list-style: none; padding: 0 0 0 1rem; margin: 0; border-left: 2px solid var(--bordo); }
.diario li { position: relative; display: flex; gap: .7rem; padding: .35rem 0; font-size: .95rem; }
.diario li::before { content: ""; position: absolute; left: calc(-1rem - 6px); top: .8rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--colore-era, var(--bordo)); border: 2px solid var(--carta); }
.diario-ora { flex: none; width: 3rem; color: var(--muto); font: .82rem/1.9 "Segoe UI", system-ui, sans-serif; }
.elenco-verifiche { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.elenco-verifiche a { display: flex; gap: .8rem; align-items: center; padding: .6rem .8rem; border-radius: 12px; background: var(--scheda);
  border: 1px solid var(--bordo); text-decoration: none; color: inherit; font-family: "Segoe UI", system-ui, sans-serif; }
.elenco-verifiche a:hover { border-color: var(--accento); }
.elenco-verifiche small { display: block; color: var(--muto); font-size: .8rem; }
.esito-tondo { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  color: #fff; background: var(--muto); }
.esito-tondo.ok { background: var(--ok); }
.esito-tondo.ko { background: var(--errore); }
.esito-tondo.ripasso { background: var(--accento-2); }
.vuoto p { margin: 0; }

/* ---------- pagina "Il progetto" */
.progetto { max-width: 980px; margin: 0 auto; }
.progetto-hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.progetto-hero h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); margin: .4rem 0 1rem; }
.progetto-hero h1 span { color: var(--accento); }
.progetto-lead { max-width: 680px; margin: 0 auto; font-size: 1.12rem; color: var(--muto); }
.progetto-numeri { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2.5rem; margin: 2rem 0 0; font-family: "Segoe UI", system-ui, sans-serif; }
.progetto-numeri div { display: flex; flex-direction: column; align-items: center; }
.progetto-numeri strong { font: 700 2.2rem/1 Georgia, serif; color: var(--accento); }
.progetto-numeri span { font-size: .85rem; color: var(--muto); margin-top: .3rem; }
.progetto-sezione { padding: 2rem 0; border-top: 1px solid var(--bordo); }
.progetto-sezione > h2 { font-size: 1.7rem; margin: 0 0 .6rem; }
.progetto-intro { color: var(--muto); margin-top: 0; }
.progetto-tre { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.progetto-tre h3 { margin: .5rem 0 .3rem; }
.progetto-tre p { margin: 0; font-size: .97rem; }
.progetto-icona { font-size: 2rem; }
.stato-funzione { display: inline-block; white-space: nowrap; font: 700 .7rem "Segoe UI", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; vertical-align: middle; }
.stato-funzione.attivo { background: rgba(46,125,50,.14); color: var(--ok); }
.stato-funzione.arrivo { background: var(--carta-2); color: var(--muto); border: 1px dashed var(--bordo); }
.scala { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .8rem; }
.gradino { position: relative; background: var(--scheda); border: 1px solid var(--bordo); border-radius: 16px; padding: 1rem 1.3rem; box-shadow: var(--ombra); }
.gradino:nth-child(2) { margin-left: 3%; }
.gradino:nth-child(3) { margin-left: 6%; }
.gradino:nth-child(4) { margin-left: 9%; }
.gradino:nth-child(5) { margin-left: 12%; }
@media (max-width: 640px) { .gradino:nth-child(n) { margin-left: 0; } }
.gradino-testa { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.gradino-testa h3 { margin: 0; font-size: 1.2rem; }
.gradino-testa p { margin: 0; font: .85rem "Segoe UI", system-ui, sans-serif; color: var(--muto); }
.gradino-testa .stato-funzione { margin-left: auto; }
.gradino-icona { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: var(--carta-2); }
.gradino ul { margin: .7rem 0 0; padding-left: 1.2rem; font-size: .96rem; }
.gradino li { margin: .25rem 0; }
.gradino li .stato-funzione { margin-left: .3rem; }
.gradino-nota { margin: .6rem 0 0; font: .85rem "Segoe UI", system-ui, sans-serif; color: var(--muto); }
.flusso { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.flusso li { position: relative; background: var(--scheda); border: 1px solid var(--bordo); border-radius: 16px; padding: 1.1rem 1.1rem 1rem; }
.flusso h3 { margin: .5rem 0 .3rem; }
.flusso p { font-size: .93rem; margin: 0 0 .7rem; }
.flusso-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accento); color: #fff;
  font: 700 1rem "Segoe UI", system-ui, sans-serif; }
.progetto-contatore { text-align: center; margin: 1.2rem 0 0; font-family: "Segoe UI", system-ui, sans-serif; }
.ere-chip { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.era-chip { padding: .45rem 1rem; border-radius: 999px; color: #fff; background: var(--colore-era); font: 600 .9rem "Segoe UI", system-ui, sans-serif; }
.era-chip::before { content: "🔍 Revisore: "; font-weight: 400; opacity: .85; }
.regole { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem 1.5rem; }
.regole h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.regole p { margin: 0; font-size: .95rem; color: var(--muto); }
.tappe-progetto { list-style: none; padding: 0 0 0 1.6rem; margin: 1rem 0 0; border-left: 3px solid var(--bordo); }
.tappe-progetto li { position: relative; padding: .45rem 0; display: flex; flex-direction: column; }
.tappe-progetto li::before { content: ""; position: absolute; left: calc(-1.6rem - 10px); top: .75rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--carta); border: 3px solid var(--bordo); }
.tappe-progetto li.fatto::before { background: var(--ok); border-color: var(--ok); }
.tappe-progetto li span { font-size: .9rem; color: var(--muto); }
.tappe-progetto li:not(.fatto) strong::after { content: " · in arrivo"; font-weight: 400; color: var(--muto); font-size: .85rem; }
.faq details { border-bottom: 1px solid var(--bordo); padding: .7rem 0; }
.faq summary { cursor: pointer; font: 600 1.02rem "Segoe UI", system-ui, sans-serif; }
.faq p { margin: .5rem 0 0; color: var(--muto); }
.progetto-cta { text-align: center; padding: 2.5rem 1rem 1rem; border-top: 1px solid var(--bordo); }
.progetto-cta p { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
@media (max-width: 720px) {
  .accesso-testata { width: 100%; justify-content: flex-end; }
}

/* =====================================================================
   Atlante: capitoli, capitolo e lezione con lo stesso linguaggio della mappa
   (colore dell'epoca, copertine sfumate, tipografia da libro illustrato)
   ===================================================================== */
body { overflow-x: clip; }
.era-preistoria { --colore-era: #8a6a45; }
.era-antica { --colore-era: #b0563a; }
.era-medioevo { --colore-era: #4a68a6; }
.era-moderna { --colore-era: #2c8a73; }
.era-contemporanea { --colore-era: #9b3d7d; }
@media (prefers-color-scheme: dark) {
  .era-preistoria { --colore-era: #b8936a; }
  .era-antica { --colore-era: #d9785a; }
  .era-medioevo { --colore-era: #7d98d6; }
  .era-moderna { --colore-era: #4fb59b; }
  .era-contemporanea { --colore-era: #c96aa9; }
}
.titolo-serif, .capitoli-testa h1, .sezione-era-testa h2, .cap-hero h1, .lez-testa h1, .carta-cap h3 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; letter-spacing: -.015em;
}

/* testata fissa in alto, in vetro scuro */
.testata { position: sticky; top: 0; z-index: 60; background: rgba(36, 27, 19, .92);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.12); }
@media (prefers-color-scheme: dark) { .testata { background: rgba(12, 10, 8, .9); } }

.chip-era { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px;
  background: var(--colore-era, var(--accento)); color: #fff; font: 700 .72rem "Segoe UI", system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; }

/* pulsantiera del livello di lettura */
.scelta-livello-tasti { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem; margin: 0; border-radius: 999px;
  background: var(--scheda); border: 1px solid var(--bordo); box-shadow: var(--ombra); font-family: "Segoe UI", system-ui, sans-serif; flex-wrap: wrap; }
.scelta-livello-etichetta { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muto); padding: 0 .5rem 0 .6rem; }
.scelta-livello-tasti button { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .45rem .9rem;
  background: transparent; color: var(--inchiostro); font: 600 .9rem "Segoe UI", system-ui, sans-serif; cursor: pointer; transition: background-color .2s, color .2s; }
.scelta-livello-tasti button:hover { background: var(--carta-2); }
.scelta-livello-tasti button.attivo { background: var(--inchiostro); color: var(--carta); }
.tacche-livello { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.tacche-livello i { display: block; width: 3px; border-radius: 2px; background: currentColor; opacity: .25; }
.tacche-livello i:nth-child(1) { height: 5px; } .tacche-livello i:nth-child(2) { height: 8px; } .tacche-livello i:nth-child(3) { height: 12px; }
.tacche-livello i.piena { opacity: 1; }
.cap-livello .scelta-livello-tasti { box-shadow: none; width: 100%; justify-content: space-between; }
.cap-livello .scelta-livello-etichetta { display: none; }
.cap-livello .scelta-livello-tasti button { flex: 1; justify-content: center; padding: .45rem .5rem; font-size: .85rem; }

/* ---------- elenco dei capitoli */
.capitoli-testa { padding: 2.2rem 0 1.4rem; }
.capitoli-testa h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.05; margin: .3rem 0 .8rem; }
.capitoli-testa h1 span { color: var(--accento); }
.capitoli-sotto { font-size: 1.12rem; color: var(--muto); max-width: 680px; margin: 0 0 1.4rem; }
.capitoli-strumenti { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.nota-sblocco { margin: 0; font: .9rem "Segoe UI", system-ui, sans-serif; color: var(--muto); flex: 1 1 260px; }

.nav-ere { position: sticky; top: 56px; z-index: 40; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  margin: .5rem -1rem 1rem; padding: .6rem 1rem; background: color-mix(in srgb, var(--carta) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bordo); }
.nav-ere::-webkit-scrollbar { display: none; }
.nav-ere a { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px; text-decoration: none;
  color: var(--inchiostro); font: 600 .88rem "Segoe UI", system-ui, sans-serif; border: 1px solid var(--bordo); background: var(--scheda); transition: all .2s; }
.nav-ere a small { color: var(--muto); font-weight: 600; }
.nav-ere a:hover, .nav-ere a.attiva { background: var(--colore-era); border-color: var(--colore-era); color: #fff; }
.nav-ere a:hover small, .nav-ere a.attiva small { color: rgba(255,255,255,.8); }
.punto-era { width: 9px; height: 9px; border-radius: 50%; background: var(--colore-era); }
.nav-ere a:hover .punto-era, .nav-ere a.attiva .punto-era { background: #fff; }

.sezione-era { padding: 1.5rem 0 1rem; scroll-margin-top: 120px; }
.sezione-era-testa { position: relative; padding: .2rem 0 1.2rem 1.3rem; margin-bottom: .4rem; }
.sezione-era-testa::before { content: ""; position: absolute; left: 0; top: .3rem; bottom: 1.2rem; width: 5px; border-radius: 4px;
  background: linear-gradient(var(--colore-era), color-mix(in srgb, var(--colore-era) 30%, transparent)); }
.sezione-era-anni { font: 700 .78rem "Segoe UI", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--colore-era); }
.sezione-era-testa h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .1rem 0 .3rem; color: var(--inchiostro); }
.sezione-era-testa p { margin: 0; color: var(--muto); font-size: 1.02rem; }

.griglia-capitoli-nuova { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.carta-cap { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--scheda); color: inherit; text-decoration: none;
  border: 1px solid var(--bordo); box-shadow: 0 2px 6px rgba(40,25,10,.06), 0 10px 30px rgba(40,25,10,.07);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; animation: sale .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--ritardo, 0ms); }
@keyframes sale { from { opacity: 0; transform: translateY(14px); } }
.carta-cap:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(40,25,10,.08), 0 22px 44px rgba(40,25,10,.14); }
.carta-cap:focus-visible { outline: 3px solid var(--colore-era); outline-offset: 3px; }
.carta-cap-img { position: relative; height: auto; aspect-ratio: 16 / 10; background-color: color-mix(in srgb, var(--colore-era) 25%, var(--carta-2));
  background-size: cover; background-position: center; overflow: hidden; transition: background-size .4s; }
.carta-cap-img::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55)), linear-gradient(135deg, color-mix(in srgb, var(--colore-era) 45%, transparent), transparent 60%); }
.carta-cap-num { position: absolute; z-index: 1; left: .9rem; top: .4rem; font: 700 3.4rem/1 Georgia, serif; color: rgba(255,255,255,.92);
  text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.carta-cap-anni { position: absolute; z-index: 1; left: .9rem; bottom: .8rem; padding: .2rem .65rem; border-radius: 999px; background: rgba(0,0,0,.45);
  color: #fff; font: 600 .78rem "Segoe UI", system-ui, sans-serif; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.carta-cap-bollo { position: absolute; z-index: 1; right: .8rem; top: .8rem; padding: .25rem .65rem; border-radius: 999px; background: var(--ok); color: #fff;
  font: 700 .75rem "Segoe UI", system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.carta-cap-bollo.bloccato { background: rgba(0,0,0,.6); }
.carta-cap .crediti-copertina { z-index: 1; }
.carta-cap-corpo { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1rem; }
.carta-cap h3 { margin: 0 0 .3rem; font-size: 1.3rem; line-height: 1.2; }
.carta-cap p { margin: 0 0 1rem; color: var(--muto); font-size: .93rem; flex: 1; }
.carta-cap-piede { display: flex; align-items: center; gap: .7rem; font: .85rem/1.3 "Segoe UI", system-ui, sans-serif; color: var(--muto); }
.carta-cap-piede small { color: var(--colore-era); font-weight: 600; }
.carta-cap-vai { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem;
  background: color-mix(in srgb, var(--colore-era) 14%, transparent); color: var(--colore-era); transition: transform .2s, background-color .2s, color .2s; }
.carta-cap:hover .carta-cap-vai { background: var(--colore-era); color: #fff; transform: translateX(3px); }
.anello { width: 34px; height: 34px; transform: rotate(-90deg); flex: none; }
.anello circle { fill: none; stroke-width: 5; }
.anello-fondo { stroke: var(--carta-2); }
.anello-pieno { stroke: var(--colore-era); stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.carta-cap.stato-bloccato { filter: grayscale(.85); opacity: .65; cursor: not-allowed; }
.carta-cap.stato-bloccato:hover { transform: none; }
.carta-cap.stato-superato { border-color: color-mix(in srgb, var(--ok) 50%, var(--bordo)); }

/* ---------- capitolo: intestazione a tutta larghezza */
.cap-hero { position: relative; margin: -1.2rem calc(50% - 50vw) 0; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--colore-era) 80%, #000) 0%, #17100a 100%); }
.cap-hero-sfondo { position: absolute; inset: -40px; z-index: -2; background-size: cover; background-position: center;
  filter: blur(30px) saturate(1.2) brightness(.55); transform: scale(1.15); }
.cap-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, color-mix(in srgb, var(--colore-era) 70%, rgba(0,0,0,.85)) 0%, rgba(10,6,3,.55) 55%, rgba(10,6,3,.25) 100%); }
.cap-hero-dentro { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 2.2rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: 2.5rem; align-items: center; }
.briciole.chiare, .briciole.chiare a { color: rgba(255,255,255,.75); }
.cap-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 .6rem; font: 600 .9rem "Segoe UI", system-ui, sans-serif;
  color: rgba(255,255,255,.85); }
.cap-hero .chip-era { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); }
.cap-hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); line-height: 1.02; margin: 0 0 .5rem; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.cap-hero-num { display: block; font: 700 .85rem "Segoe UI", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: .4rem; text-shadow: none; }
.cap-hero-sotto { font-size: 1.25rem; font-style: italic; margin: 0 0 1rem; color: rgba(255,255,255,.9); }
.cap-hero-intro { font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 620px; margin: 0 0 1.4rem; }
.cap-hero-intro small, .cap-hero-intro a { color: rgba(255,255,255,.65); }
.cap-hero-azioni { display: flex; flex-wrap: wrap; gap: .7rem; }
.bottone.bianco { background: #fff; color: color-mix(in srgb, var(--colore-era) 80%, #000); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.bottone.vetro { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bottone.vetro:hover { background: rgba(255,255,255,.22); }
.cap-hero-fig { margin: 0; justify-self: end; max-width: 440px; transform: rotate(1.2deg); transition: transform .4s; }
.cap-hero-fig:hover { transform: rotate(0) scale(1.01); }
.cap-hero-fig img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.08); }
.cap-hero-fig figcaption, .cap-hero-fig figcaption a { color: rgba(255,255,255,.6); font-size: .72rem; margin-top: .5rem; text-align: right; }
.cap-hero-barra { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 1rem 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  font: .9rem "Segoe UI", system-ui, sans-serif; color: rgba(255,255,255,.75); }
.cap-hero-barra strong { color: #fff; font-size: 1.15rem; margin-right: .2rem; }
.cap-hero-progresso { flex-basis: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.cap-hero-progresso span { display: block; height: 100%; background: #fff; border-radius: 4px; }

.cap-corpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-top: 2rem; }
.cap-corpo h2 { font-size: 1.6rem; margin: 0 0 1rem; }
.percorso { list-style: none; margin: 0; padding: 0; position: relative; }
.percorso::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--colore-era), color-mix(in srgb, var(--colore-era) 25%, var(--bordo))); }
.tappa-lez { position: relative; margin: 0 0 .6rem; }
.tappa-lez a { display: flex; align-items: center; gap: 1rem; padding: .55rem .9rem .55rem 0; border-radius: 16px; text-decoration: none; color: inherit;
  transition: background-color .2s; }
.tappa-lez a:hover { background: var(--scheda); }
.tappa-lez-nodo { position: relative; z-index: 1; flex: none; width: 45px; height: 45px; border-radius: 50%; display: grid; place-items: center;
  background: var(--scheda); border: 3px solid var(--colore-era); color: var(--colore-era); font: 700 1rem "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 0 0 5px var(--carta); transition: transform .2s; }
.tappa-lez a:hover .tappa-lez-nodo { transform: scale(1.08); }
.tappa-lez.letta .tappa-lez-nodo { background: var(--colore-era); color: #fff; }
.tappa-lez-testo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.tappa-lez-testo strong { font-size: 1.08rem; font-weight: 600; }
.tappa-lez-testo small { color: var(--muto); font: .85rem "Segoe UI", system-ui, sans-serif; }
.tappa-lez-testo .etichetta { margin: .25rem 0 0; }
.tappa-lez.letta .tappa-lez-testo strong { color: var(--muto); }
.tappa-lez-vai { color: var(--colore-era); opacity: 0; transform: translateX(-6px); transition: all .2s; font-size: 1.2rem; }
.tappa-lez a:hover .tappa-lez-vai { opacity: 1; transform: none; }
.tappa-lez.prossima a { background: var(--scheda); border: 1px solid color-mix(in srgb, var(--colore-era) 40%, var(--bordo));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--colore-era) 18%, transparent); }
.tappa-lez.prossima .tappa-lez-nodo { background: var(--colore-era); color: #fff; animation: nodo-pulsa 2s ease-out infinite; }
.tappa-lez.prossima .tappa-lez-vai { opacity: 1; transform: none; }
@keyframes nodo-pulsa { 0% { box-shadow: 0 0 0 5px var(--carta), 0 0 0 5px color-mix(in srgb, var(--colore-era) 50%, transparent); }
  100% { box-shadow: 0 0 0 5px var(--carta), 0 0 0 16px transparent; } }
.tappa-lez-etichetta { font: 700 .72rem "Segoe UI", system-ui, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: var(--colore-era) !important; }
.tappa-lez.traguardo .tappa-lez-nodo { font-size: 1.2rem; border-style: dashed; }
.tappa-lez.traguardo.letta .tappa-lez-nodo { border-style: solid; }
.cap-lato { display: grid; gap: 1rem; position: sticky; top: 76px; }
.cap-lato h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.cap-tentativi ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.cap-tentativi li { display: flex; align-items: center; gap: .7rem; font: .88rem/1.3 "Segoe UI", system-ui, sans-serif; }
.cap-tentativi li small { color: var(--muto); }
.cap-tentativi li a { margin-left: auto; font-size: .82rem; }
.esito-tondo.piccolo { width: 42px; height: 42px; font-size: .78rem; }
.nav-capitoli { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 3rem 0 1rem; }
.nav-capitoli a { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.2rem; border-radius: 16px; text-decoration: none; color: inherit;
  background: var(--scheda); border: 1px solid var(--bordo); border-left: 5px solid var(--colore-era); transition: transform .2s, box-shadow .2s; }
.nav-capitoli a.succ { text-align: right; border-left-width: 1px; border-right: 5px solid var(--colore-era); }
.nav-capitoli a:hover { transform: translateY(-2px); box-shadow: var(--ombra); }
.nav-capitoli a.chiuso { opacity: .6; pointer-events: none; }
.nav-capitoli small { color: var(--colore-era); font: 700 .78rem "Segoe UI", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.nav-capitoli strong { font: 700 1.15rem Georgia, serif; }

/* ---------- lezione: lettura */
.barra-lettura { position: fixed; z-index: 70; left: 0; right: 0; top: 0; height: 4px; pointer-events: none; }
.barra-lettura span { display: block; height: 100%; background: linear-gradient(90deg, var(--colore-era), color-mix(in srgb, var(--colore-era) 60%, #fff));
  transform: scaleX(0); transform-origin: left; transition: transform .1s linear; }
.lez-testa { max-width: 1040px; margin: 0 auto; padding: 1.2rem 0 .6rem; }
.lez-testa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .6rem 0 .5rem;
  font: .88rem "Segoe UI", system-ui, sans-serif; color: var(--muto); }
.lez-letta { color: var(--ok); font-weight: 700; }
.lez-testa h1 { font-size: clamp(2.2rem, 5.5vw, 3.5rem); line-height: 1.05; margin: 0 0 .5rem; }
.lez-griglia { display: grid; grid-template-columns: minmax(0, 720px) 250px; gap: 3.5rem; justify-content: center; align-items: start; }
.lettura .lezione { max-width: none; margin: 0; }
.lettura .lezione .intro, .lettura .lezione .sezione { font-size: 1.1rem; line-height: 1.8; }
.lettura .livello-medie .intro { font-size: 1.18rem; line-height: 1.85; }
.lettura .lezione .intro > p:first-of-type::first-letter {
  float: left; font: 700 4.1em/.85 Georgia, serif; color: var(--colore-era); padding: .08em .1em 0 0; }
.lettura .lezione figure.principale { margin: 0 0 1.8rem; }
.lettura .lezione figure.principale img { border-radius: 18px; max-height: 460px; box-shadow: 0 14px 40px rgba(40,25,10,.2); }
.lettura .sezione { border-top: 1px solid var(--bordo); padding: .6rem 0; scroll-margin-top: 80px; }
.lettura .sezione summary { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; }
.lettura .sezione summary::before { content: none; }
.lettura .sezione summary::after { content: "+"; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  flex: none; font: 400 1.3rem/1 "Segoe UI", system-ui, sans-serif; color: var(--colore-era); background: color-mix(in srgb, var(--colore-era) 12%, transparent);
  transition: transform .25s; }
.lettura .sezione[open] summary::after { transform: rotate(45deg); }
.lettura .sezione summary h2 { font: 700 1.55rem/1.2 Georgia, serif; margin: 0; }
.sezione-num { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--colore-era); color: #fff;
  font: 700 .9rem "Segoe UI", system-ui, sans-serif; }
.lettura .sezione[open] > :not(summary) { animation: sezione-apre .35s ease both; }
@keyframes sezione-apre { from { opacity: 0; transform: translateY(-4px); } }
.lettura .mini-mappa-box { border-radius: 18px; overflow: hidden; background: var(--scheda); border: 1px solid var(--bordo); padding: .6rem; }
.lettura .mini-mappa-box .mini-mappa { border-radius: 12px; border: 0; }
.lettura .mini-mappa-box figcaption { padding: .4rem .3rem .1rem; }
.lettura blockquote { border-left: 4px solid var(--colore-era); margin: 1.2rem 0; padding: .3rem 0 .3rem 1.2rem; font-style: italic; color: var(--muto); }
.lettura .attribuzione { margin-top: 2.5rem; }
.lez-lato { position: sticky; top: 80px; display: grid; gap: 1.6rem; font-family: "Segoe UI", system-ui, sans-serif; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: thin; }
.lez-lato-titolo { margin: 0 0 .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muto); }
.lez-lato-titolo a { color: var(--colore-era); text-decoration: none; }
.lez-lato ol { list-style: none; margin: 0; padding: 0; }
.lez-indice li a { display: block; padding: .32rem 0 .32rem .9rem; border-left: 2px solid var(--bordo); color: var(--muto); text-decoration: none; font-size: .88rem;
  line-height: 1.35; transition: color .2s, border-color .2s; }
.lez-indice li a:hover { color: var(--inchiostro); }
.lez-indice li a.attiva { color: var(--colore-era); border-left-color: var(--colore-era); font-weight: 700; }
.lez-capitolo li { position: relative; padding-left: 1.3rem; margin: .1rem 0; }
.lez-capitolo li::before { content: ""; position: absolute; left: 2px; top: .6rem; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bordo); background: var(--carta); }
.lez-capitolo li.fatta::before { background: var(--colore-era); border-color: var(--colore-era); }
.lez-capitolo li.corrente::before { border-color: var(--colore-era); box-shadow: 0 0 0 3px color-mix(in srgb, var(--colore-era) 25%, transparent); }
.lez-capitolo li a { display: block; padding: .25rem 0; color: var(--muto); text-decoration: none; font-size: .86rem; line-height: 1.35; }
.lez-capitolo li.corrente a { color: var(--inchiostro); font-weight: 700; }
.lez-capitolo li a:hover { color: var(--colore-era); }
.lez-fine { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; max-width: 1020px; margin: 3rem auto 1rem; }
.lez-fine-prec, .lez-fine-succ button { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.3rem; border-radius: 18px; text-decoration: none;
  text-align: left; transition: transform .2s, box-shadow .2s; }
.lez-fine-prec { background: var(--scheda); border: 1px solid var(--bordo); color: inherit; }
.lez-fine-succ { margin: 0; }
.lez-fine-succ button { width: 100%; height: 100%; border: 0; cursor: pointer; color: #fff; text-align: right; align-items: flex-end;
  background: linear-gradient(120deg, var(--colore-era), color-mix(in srgb, var(--colore-era) 70%, #000));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--colore-era) 35%, transparent); }
.lez-fine-prec:hover, .lez-fine-succ button:hover { transform: translateY(-2px); }
.lez-fine small { font: 700 .78rem "Segoe UI", system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.lez-fine strong { font: 700 1.2rem/1.25 Georgia, serif; }
.lez-fine-prec small { color: var(--colore-era); opacity: 1; }

/* ---------- schermi stretti */
@media (max-width: 980px) {
  .lez-griglia { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .lez-lato { position: static; max-height: none; }
  .lez-indice { display: none; }
  .cap-corpo { grid-template-columns: 1fr; }
  .cap-lato { position: static; }
}
@media (max-width: 760px) {
  .cap-hero-dentro { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.4rem; }
  .cap-hero-fig { justify-self: stretch; max-width: none; transform: none; order: -1; }
  .cap-hero-fig img { max-height: 210px; }
  .cap-hero-barra { gap: .4rem 1.2rem; font-size: .82rem; }
  .nav-capitoli, .lez-fine { grid-template-columns: 1fr; }
  .nav-capitoli a.succ { text-align: left; border-right-width: 1px; border-left: 5px solid var(--colore-era); }
  .lez-fine-succ button { text-align: left; align-items: flex-start; }
  .nav-ere { top: 0; position: relative; }
  .testata { position: relative; }
  .scelta-livello-tasti button { padding: .4rem .65rem; font-size: .84rem; }
  .lettura .lezione .intro, .lettura .lezione .sezione { font-size: 1.04rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carta-cap, .tappa-lez.prossima .tappa-lez-nodo, .lettura .sezione[open] > :not(summary) { animation: none; }
  .carta-cap, .cap-hero-fig, .tappa-lez-nodo { transition: none; }
}

/* immagine principale della lezione: intera, su sfondo sfumato */
.lettura .lezione figure.principale > a { position: relative; display: block; overflow: hidden; border-radius: 18px; background: #1d1712;
  box-shadow: 0 14px 40px rgba(40,25,10,.2); isolation: isolate; }
.lettura .lezione figure.principale > a::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--img) center / cover;
  filter: blur(26px) brightness(.7) saturate(1.2); }
.lettura .lezione figure.principale img { width: 100%; max-height: 460px; object-fit: contain; border-radius: 0; box-shadow: none; }

/* testata: logo sempre chiaro (anche col tema scuro) e menu su una riga nei telefoni */
.logo { color: #f6eedf; }
@media (max-width: 720px) {
  .testata { gap: .5rem .8rem; padding: .55rem .9rem; }
  .testata .menu { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -.3rem; }
  .testata .menu::-webkit-scrollbar { display: none; }
  .testata .menu a { flex: none; padding: .3rem .65rem; }
  .accesso-testata { width: auto; margin-left: auto; }
  .profilo-mini { margin-left: auto; }
  .scelta-livello-etichetta { display: none; }
  .scelta-livello-tasti { gap: .1rem; }
  .scelta-livello-tasti button { padding: .4rem .6rem; }
}

/* ---------- curatori */
.admin-ruolo { margin-left: auto; align-self: center; font: 600 .85rem "Segoe UI", system-ui, sans-serif; color: var(--accento-2); }
.ruoli-spiegati { margin-bottom: 1rem; padding: .8rem 1rem; font: .88rem/1.6 "Segoe UI", system-ui, sans-serif; }
.ruoli-spiegati p { margin: 0; }
.ere-curate { min-width: 170px; }
.ere-curate label.check { margin: .1rem 0; font-size: .82rem; gap: .35rem; }
.ere-curate label.check::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--colore-era); order: -1; }
.ere-curate.spente { opacity: .35; pointer-events: none; }
.titolo-curatore { font: 600 .92rem "Segoe UI", system-ui, sans-serif; color: var(--accento-2); }
.segnalazione-tipo .chip-era { margin-left: .5rem; vertical-align: middle; }

/* ---------- crediti */
.crediti-modifica { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.persona { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--scheda); border: 1px solid var(--bordo); box-shadow: var(--ombra); }
.persona h3 { margin: .1rem 0 .15rem; font: 700 1.15rem Georgia, serif; }
.persona-avatar { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 1.1rem "Segoe UI", system-ui, sans-serif; letter-spacing: .02em; background: linear-gradient(135deg, hsl(var(--tinta) 55% 48%), hsl(calc(var(--tinta) + 40) 55% 38%)); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.persona-ruolo { margin: 0 0 .35rem; font: 600 .88rem "Segoe UI", system-ui, sans-serif; color: var(--accento); }
.persona-descr { margin: 0 0 .4rem; font-size: .93rem; color: var(--muto); }
.persona-link { font: 600 .85rem "Segoe UI", system-ui, sans-serif; }
.ere-chip.piccole { margin: .3rem 0 0; gap: .3rem; }
.ere-chip.piccole .chip-era { font-size: .66rem; padding: .15rem .55rem; }
.ringraziamenti { columns: 2 260px; column-gap: 2rem; padding-left: 1.1rem; }
.ringraziamenti li { break-inside: avoid; margin: 0 0 .7rem; }
.ringraziamenti .persona-link { margin-left: .4rem; }

/* ---------- proposte di correzione */
.segnala-fluttuante { display: flex; padding: 0; overflow: hidden; background: #2b2118; }
.segnala-fluttuante[hidden] { display: none; }
.segnala-fluttuante button { border: 0; background: none; color: #fbf7ef; font: 600 .85rem "Segoe UI", system-ui, sans-serif; padding: .45rem .9rem; cursor: pointer; }
.segnala-fluttuante button + button { border-left: 1px solid rgba(255,255,255,.2); }
.segnala-fluttuante button:hover { background: var(--accento); }
.segnala-fluttuante button[hidden] { display: none; }
.segnala-fluttuante:hover { background: #2b2118; }
del { background: rgba(179,38,30,.13); color: #9b2018; text-decoration: line-through; text-decoration-thickness: 1.5px; border-radius: 3px; padding: 0 .1em; }
ins { background: rgba(46,125,50,.16); color: #1f6524; text-decoration: none; border-radius: 3px; padding: 0 .1em; font-weight: 600; }
@media (prefers-color-scheme: dark) { del { color: #ff8a80; } ins { color: #8fdc93; } }
.proposta-etichetta { margin: .8rem 0 .2rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muto); }
.proposta-anteprima { padding: .6rem .8rem; border-radius: 10px; background: var(--carta-2); font: .95rem/1.6 Georgia, serif; min-height: 2.5em; }
.proposta-refuso { margin: .8rem 0 0 !important; font-size: .9rem; }
.proposta-risposte { border: 0; padding: 0; margin: .7rem 0; }
.proposta-risposte legend { font-size: .85rem; font-weight: 600; margin-bottom: .3rem; padding: 0; }
.proposta-risposte label { display: flex !important; gap: .5rem; align-items: center; margin: .3rem 0 !important; }
.proposta-risposte input[type=radio] { width: auto; flex: none; accent-color: var(--ok); }
.elenco-proposte { display: grid; gap: .9rem; }
.proposta { padding: 1rem 1.2rem; border-left: 4px solid var(--accento-2); font-family: "Segoe UI", system-ui, sans-serif; }
.proposta.stato-approvata { border-left-color: var(--ok); }
.proposta.stato-respinta { border-left-color: var(--bordo); opacity: .8; }
.proposta.stato-da_rivedere { border-left-color: var(--accento); }
.proposta header { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-bottom: .5rem; }
.proposta-stato { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .55rem; border-radius: 999px;
  background: var(--carta-2); color: var(--muto); }
.stato-approvata .proposta-stato { background: rgba(46,125,50,.15); color: var(--ok); }
.stato-da_rivedere .proposta-stato { background: rgba(140,59,31,.12); color: var(--accento); }
.stato-in_attesa .proposta-stato { background: rgba(184,134,11,.15); color: var(--accento-2); }
.proposta-diff { font: 1rem/1.7 Georgia, serif; margin: .4rem 0; }
.proposta-diff.grande { font-size: 1.08rem; padding: .7rem .9rem; background: var(--carta-2); border-radius: 10px; }
.proposta-campo { margin: .5rem 0; }
.proposta-autore, .proposta-fonte, .proposta-motivo, .proposta-nota { margin: .35rem 0; font-size: .92rem; }
.proposta-nota { background: var(--carta-2); border-radius: 8px; padding: .5rem .7rem; }
.proposta-azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .7rem; }
.proposta-azioni input { flex: 1 1 260px; width: auto; }
.proposta-reinvia { margin: .6rem 0; }
.elenco-revisioni { list-style: none; padding: 0; display: grid; gap: .8rem; }
.revisione { padding: .9rem 1.1rem; font-family: "Segoe UI", system-ui, sans-serif; }
.revisione header { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; margin-bottom: .4rem; }
.lez-in-revisione { color: var(--accento-2); font-weight: 600; }
.lez-curata { font: .88rem "Segoe UI", system-ui, sans-serif; color: var(--muto); border-top: 1px dashed var(--bordo); padding-top: .8rem; margin-top: 2rem; }
.cap-contribuisci p { margin: .3rem 0 .7rem; }
.candidati { margin-bottom: 1rem; border-left: 4px solid var(--accento-2); }
.candidati ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.candidati li { margin: .4rem 0; }
.candidati form { margin-left: .5rem; }

/* ---------- guida */
.guida-sei { margin-top: 1rem; font: .95rem "Segoe UI", system-ui, sans-serif; }
.guida-ruoli { position: sticky; top: 64px; z-index: 30; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; margin: 0 0 1rem; padding: .5rem 0; background: color-mix(in srgb, var(--carta) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.guida-ruoli a { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: center; padding: .5rem .7rem; border-radius: 12px; border: 1px solid var(--bordo); background: var(--scheda); color: inherit; text-decoration: none; font-family: "Segoe UI", system-ui, sans-serif; }
.guida-ruoli a span { grid-row: span 2; font-size: 1.4rem; }
.guida-ruoli a small { color: var(--muto); font-size: .75rem; }
.guida-ruoli a:hover, .guida-ruoli a.attivo { border-color: var(--accento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accento) 25%, transparent); }
.guida-ruolo { scroll-margin-top: 150px; }
.guida-ruolo.tuo { background: linear-gradient(90deg, rgba(184,134,11,.08), transparent 70%); border-radius: 16px; padding-left: 1rem; padding-right: 1rem; }
.guida-tuo { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .15rem .6rem; border-radius: 999px; background: var(--accento-2); color: #fff; font: 700 .7rem "Segoe UI", system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.guida h3 { margin: 1.4rem 0 .4rem; font-size: 1.15rem; }
.guida-passi { padding-left: 1.4rem; }
.guida-passi li, .guida-elenco li, .guida-stati li { margin: .45rem 0; }
.guida-passi ul { margin: .3rem 0; }
.guida-trucchi { margin: 1rem 0; padding: .8rem 1.1rem; border-radius: 14px; background: var(--scheda); border: 1px solid var(--bordo); font-size: .95rem; }
.guida-trucchi p { margin: 0 0 .3rem; }
.guida-trucchi ul { margin: 0; padding-left: 1.2rem; }
.guida-limite { padding: .7rem 1rem; border-radius: 12px; background: var(--carta-2); font-size: .95rem; }
.guida-stati { list-style: none; padding: 0; }
.guida-stati .proposta-stato { margin-right: .4rem; }
.stato-approvata-guida { background: rgba(46,125,50,.15) !important; color: var(--ok) !important; }
.stato-rivedere-guida { background: rgba(140,59,31,.12) !important; color: var(--accento) !important; }
kbd { display: inline-block; min-width: 1.6em; padding: .05em .4em; border: 1px solid var(--bordo); border-bottom-width: 2px; border-radius: 6px; background: var(--scheda); font: 600 .82em "Segoe UI", system-ui, sans-serif; text-align: center; }
.guida-voci dt { font: 700 .98rem "Segoe UI", system-ui, sans-serif; margin-top: .8rem; }
.guida-voci dd { margin: .2rem 0 0; color: var(--muto); }
.guida-ruoli a strong { font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.guida-ruoli a > * { min-width: 0; }

/* ---------- piè di pagina a colonne */
.piede { margin-top: 3rem; padding: 2.5rem 1.2rem 1.2rem; border-top: 0; background: #241b13; color: #d9ccb6; text-align: left; font-size: .92rem;
  font-family: "Segoe UI", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { .piede { background: #0f0c09; } }
.piede-colonne { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.piede-logo { color: #f6eedf; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.piede-marchio p { margin: .6rem 0 1rem; color: #b8a98f; line-height: 1.5; max-width: 300px; }
.piede-gruppo { display: flex; flex-direction: column; gap: .5rem; }
.piede-titolo { margin: 0 0 .3rem; color: #f6eedf; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.piede-gruppo a { color: #d9ccb6; text-decoration: none; }
.piede-gruppo a:hover { color: #fff; text-decoration: underline; }
.piede-licenze { max-width: 1100px; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .78rem; color: #9c8e78; line-height: 1.6; }
.piede-licenze a { color: #c4b59c; }
@media (max-width: 760px) {
  .piede-colonne { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .piede-marchio { grid-column: 1 / -1; }
}

/* ---------- menu «?» nella testata */
.aiuto-menu { position: relative; }
.aiuto-menu summary { list-style: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid rgba(243,234,216,.55); color: #f3ead8; font: 700 1rem "Segoe UI", system-ui, sans-serif; user-select: none; }
.aiuto-menu summary::-webkit-details-marker { display: none; }
.aiuto-menu summary:hover, .aiuto-menu[open] summary { background: rgba(255,255,255,.14); border-color: #f3ead8; }
.aiuto-menu nav { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 250px; display: flex; flex-direction: column; padding: .4rem;
  border-radius: 14px; background: var(--scheda); border: 1px solid var(--bordo); box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.aiuto-menu nav a { padding: .55rem .75rem; border-radius: 10px; color: var(--inchiostro); text-decoration: none; font: .92rem "Segoe UI", system-ui, sans-serif; white-space: nowrap; }
.aiuto-menu nav a:hover { background: var(--carta-2); }
.guida-link { margin: -.4rem 0 1rem; font: .9rem "Segoe UI", system-ui, sans-serif; }
@media (max-width: 720px) {
  .aiuto-menu { margin-left: auto; }
  .aiuto-menu + .accesso-testata, .aiuto-menu + .profilo-mini { margin-left: 0; }
  .aiuto-menu nav { position: fixed; left: .8rem; right: .8rem; top: 3.4rem; min-width: 0; }
}