:root {
  --sfondo: #f2f4f1;
  --pannello: #fbfcfa;
  --inchiostro: #1b292d;
  --tenue: #66767a;
  --bordo: #cfd8d4;
  --linea: #8fa3a0;
  --accento: #0f6b66;
  --accento-chiaro: #dcefec;
  --custom: #b8741a;
  --custom-chiaro: #fbefd9;
  --ok: #2b7a4b;
  --ok-chiaro: #e0f2e6;
  --no: #a3332b;
  --no-chiaro: #f8e1de;
  --ombra: 0 1px 2px rgba(27,41,45,.12), 0 4px 14px rgba(27,41,45,.08);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #141c1e; --pannello: #1b2629; --inchiostro: #e4ecea; --tenue: #94a6a4; --bordo: #31413f; --linea: #5d7673;
    --accento: #4cc0b6; --accento-chiaro: #1d3a38; --custom: #e0a64d; --custom-chiaro: #3a2d14;
    --ok: #5ec283; --ok-chiaro: #1b3326; --no: #ef8379; --no-chiaro: #3b1f1c;
  }
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; background: var(--sfondo); color: var(--inchiostro); font: 16px/1.45 var(--serif); display: flex; flex-direction: column; min-height: 100vh; }
h1, h2, h3 { font-weight: 600; margin: 0; }
h1 { font-size: 1.25rem; letter-spacing: .01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: .92rem; margin-bottom: .4rem; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: .88em; background: var(--accento-chiaro); padding: 0 .3em; border-radius: 3px; }

/* testata */
.testata { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: var(--pannello); border-bottom: 1px solid var(--bordo); }
.marchio { display: flex; gap: .7rem; align-items: center; }
.logo { font-size: 1.8rem; color: var(--accento); line-height: 1; }
.sottotitolo { margin: 0; color: var(--tenue); font-size: .85rem; }
.comandi { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

button { cursor: pointer; border: 1px solid var(--accento); background: var(--accento); color: #fff; padding: .35rem .85rem; border-radius: 6px; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .45; cursor: default; filter: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
button.secondario { background: transparent; color: var(--accento); }
button.secondario:hover { background: var(--accento-chiaro); filter: none; }
button.utente { background: var(--accento-chiaro); color: var(--inchiostro); border-color: var(--bordo); }
button.pericolo { background: transparent; color: var(--no); border-color: var(--no); }
button.piccolo { padding: .1rem .5rem; font-size: .85rem; }
button.x { background: transparent; border: 0; color: var(--tenue); padding: 0 .25rem; font-size: 1rem; line-height: 1; }
button.x:hover { color: var(--no); filter: none; }
input[type=text], input[type=search], select, textarea { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 6px; padding: .35rem .55rem; width: 100%; }
textarea { font-family: var(--mono); font-size: .88rem; resize: vertical; }

/* pagina a tre pannelli orizzontali */
main.pagina { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; flex: 1; min-width: 0; }
.pannello { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 10px; width: 100%; }
.pannello > summary { display: flex; align-items: baseline; gap: 1rem; padding: .6rem 1rem; cursor: pointer; list-style: none; border-bottom: 1px solid transparent; }
.pannello > summary::-webkit-details-marker { display: none; }
.pannello > summary::before { content: "▾"; color: var(--accento); }
.pannello:not([open]) > summary::before { content: "▸"; }
.pannello[open] > summary { border-bottom-color: var(--bordo); }
.nota-pannello { margin-left: auto; font-size: .8rem; color: var(--tenue); }
.corpo-pannello { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
.aiuto { font-size: .8rem; color: var(--tenue); margin: 0; }
.errore { color: var(--no); font-size: .85rem; margin: .4rem 0 0; }
.errori { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--no); font-size: .85rem; }
.errori:empty { display: none; }
.piede { padding: .6rem 1rem; font-size: .72rem; color: var(--tenue); border-top: 1px solid var(--bordo); }

/* categorie e tratti */
.cat { font-family: var(--mono); font-size: .72rem; padding: .05rem .4rem; border-radius: 4px; background: var(--accento-chiaro); color: var(--accento); border: 1px solid transparent; white-space: nowrap; }
.cat.custom { background: var(--custom-chiaro); color: var(--custom); border: 1px dashed var(--custom); }
.cat.custom::before { content: "✦ "; font-weight: 700; }
.elenco-categorie { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }

/* lessico */
.riga-diz { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.elenco-diz { display: flex; flex-wrap: wrap; gap: .4rem; }
.voce { text-align: left; background: transparent; color: var(--inchiostro); border: 1px solid var(--bordo); border-radius: 6px; padding: .35rem .65rem; cursor: pointer; }
.voce:hover { border-color: var(--accento); }
.voce.sel { background: var(--accento-chiaro); border-color: var(--accento); }
.voce small { display: block; color: var(--tenue); font-size: .75rem; }
.riga-voce { display: flex; gap: .5rem; align-items: center; }
.riga-form { display: flex; gap: .4rem; }
.griglia-form { flex-wrap: wrap; }
.griglia-form input, .griglia-form select { width: auto; flex: 1 1 8rem; }
.riga-diz .azioni, .riga-diz .riga-form { margin: 0; }
.riga-diz .riga-form input { width: 15rem; }
.azioni { display: flex; gap: .5rem; flex-wrap: wrap; }
.barra-parole { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.barra-parole input[type=search] { width: 16rem; }

.elenco-palette { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: baseline; }
.gruppo-palette { flex-basis: 100%; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); margin: .3rem 0 0; }
.chip-parola { display: inline-flex; align-items: baseline; gap: .1rem; padding: .05rem .3rem; border-radius: 6px; cursor: grab; user-select: none; }
.chip-parola:hover { background: var(--accento-chiaro); }
.chip-parola .lem { font-size: 1.7rem; font-style: italic; line-height: 1.2; cursor: pointer; }
.chip-parola sup.cat { font-size: .6rem; margin-left: .15rem; }
.chip-parola .modifica { background: transparent; border: 0; color: var(--tenue); padding: 0 .15rem; font-size: .85rem; opacity: 0; }
.chip-parola:hover .modifica, .chip-parola .modifica:focus-visible { opacity: 1; }
.chip-parola .modifica:hover { color: var(--accento); filter: none; }
.in-popover { max-width: 30rem; gap: .2rem .4rem; }
button.chip { background: transparent; color: var(--inchiostro); border: 1px solid var(--bordo); font-size: 1.3rem; font-style: italic; padding: .05rem .6rem; }
button.chip:hover { background: var(--accento-chiaro); filter: none; }

.editor-lemma:not(:empty) { border-top: 1px solid var(--bordo); padding-top: .8rem; }
.griglia-editor { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .5rem 1rem; }
.campo { display: block; }
.campo.largo { grid-column: 1 / -1; }
.campo > span { display: block; font-size: .78rem; color: var(--tenue); margin-bottom: .15rem; }
.sola-lettura { padding: .4rem .7rem; background: var(--custom-chiaro); border-radius: 6px; font-size: .85rem; }
.editor-lemma .azioni { margin-top: .6rem; }

/* regole */
.due-colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.blocco { border: 1px solid var(--bordo); border-radius: 8px; padding: .8rem .9rem; background: var(--sfondo); }
.blocco .aiuto + textarea { margin-top: .5rem; }
.testa-scatola { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.testa-scatola h3 { margin-right: auto; }
.testa-scatola select { width: auto; padding: .1rem .4rem; }
.radice { font-size: .8rem; color: var(--tenue); }
.pezzo { margin-top: .6rem; background: var(--pannello); border: 1px dashed var(--bordo); border-radius: 8px; padding: .4rem; cursor: grab; overflow-x: auto; }
@media (max-width: 1000px) { .due-colonne { grid-template-columns: 1fr; } .griglia-editor { grid-template-columns: 1fr; } }

/* ===== Alberi ===== */
.alb { --h: 1.15rem; padding: .3rem .5rem .6rem; overflow-x: auto; }
.alb ul { display: flex; justify-content: center; margin: 0; padding: var(--h) 0 0; position: relative; list-style: none; }
.alb > ul { padding-top: 0; width: max-content; margin: 0 auto; }
.alb li { position: relative; padding: var(--h) .5rem 0; text-align: center; list-style: none; display: flex; flex-direction: column; align-items: center; }
.alb > ul > li { padding-top: 0; }
.alb li::before, .alb li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: var(--h); border-top: 1.5px solid var(--linea); }
.alb li::after { right: auto; left: 50%; border-left: 1.5px solid var(--linea); }
.alb li:only-child::before, .alb li:only-child::after { display: none; }
.alb li:only-child { padding-top: 0; }
.alb li:first-child::before, .alb li:last-child::after { border-top: 0; }
.alb li:last-child::before { border-right: 1.5px solid var(--linea); border-radius: 0 6px 0 0; }
.alb li:first-child::after { border-radius: 6px 0 0 0; }
.alb ul ul::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 1.5px solid var(--linea); height: var(--h); }

.nodo { position: relative; display: inline-block; }
.et { font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--accento); letter-spacing: .02em; }
.et sub { font-size: .66rem; margin-left: .05rem; font-weight: 700; }
.nodo.custom .et { color: var(--custom); }
.nodo.err .et { color: var(--no); text-decoration: underline wavy var(--no); }
.piu { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: .2rem; padding: 0 .35rem; line-height: 1.1; background: var(--accento-chiaro); color: var(--accento); border: 1px solid var(--accento); opacity: 0; transition: opacity .12s; }
.nodo:hover .piu, .piu:focus-visible { opacity: 1; }
@media (hover: none) { .piu { opacity: .55; } }

.parola { display: inline-block; font-size: 1.75rem; font-style: italic; line-height: 1.25; padding: 0 .3rem .1rem; border-radius: 5px; cursor: pointer; color: var(--inchiostro); }
.parola:hover, .parola.eco { background: var(--accento-chiaro); }
.parola.conflitto { color: var(--no); }
.parola.orfana { color: var(--no); }
.vuoto { display: inline-block; min-width: 3rem; padding: .1rem .8rem; border: 1.5px dashed var(--linea); border-radius: 6px; color: var(--tenue); cursor: pointer; font-size: 1.3rem; line-height: 1.3; }
.vuoto:hover, .vuoto.sopra { border-color: var(--accento); background: var(--accento-chiaro); color: var(--accento); }
.vuoto.statico { cursor: inherit; opacity: .55; font-size: 1rem; min-width: 1.8rem; padding: 0 .5rem; }
.vuoto.statico:hover { border-color: var(--linea); background: none; color: var(--tenue); }

.alb.mini { --h: .7rem; padding: .1rem; }
.alb.mini .et { font-size: .75rem; }
.alb.mini li { padding-left: .3rem; padding-right: .3rem; }
.alb.mini .parolina .et { font-style: italic; font-weight: 400; }

/* schede degli alberi sulla lavagna */
.lavagna { display: flex; flex-direction: column; gap: 1rem; min-height: 8rem; }
.vuoto-lavagna { padding: 1.5rem .5rem; font-size: .95rem; }
.card-albero { position: relative; border: 1px solid var(--bordo); border-radius: 10px; background: var(--sfondo); padding: .6rem .8rem; }
.card-albero .chiudi { position: absolute; top: .3rem; right: .5rem; font-size: 1.2rem; }
.albero-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; }
.albero-col { min-width: 0; }
.albero-col .alb { overflow-x: auto; }
.pie-albero { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; padding: .2rem .5rem 0; border-top: 1px dotted var(--bordo); }
.frase { font-size: 1.2rem; font-style: italic; }
.verdetto { font-size: .8rem; font-weight: 600; padding: .05rem .55rem; border-radius: 999px; }
.verdetto.ok { background: var(--ok-chiaro); color: var(--ok); }
.verdetto.no { background: var(--no-chiaro); color: var(--no); }
.verdetto.in-corso { background: var(--bordo); color: var(--tenue); }
.problemi { flex-basis: 100%; margin: 0; padding-left: 1.1rem; font-size: .82rem; color: var(--no); }

.regole-usate { border-left: 1px solid var(--bordo); padding-left: .9rem; font-size: .88rem; align-self: start; }
.regole-usate .ru { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; padding: .15rem 0; }
.regole-usate .ru code { background: none; padding: 0; color: var(--inchiostro); font-size: .86rem; }
.regole-usate .ru.lex code { color: var(--tenue); }
.regole-usate .ru small { flex-basis: 100%; color: var(--custom); font-size: .72rem; }
.regole-usate .conta { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--tenue); }
.sep-ru { margin: .4rem 0 .1rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); border-top: 1px dotted var(--bordo); padding-top: .3rem; }
@media (max-width: 900px) { .albero-corpo { grid-template-columns: 1fr; } .regole-usate { border-left: 0; padding-left: 0; border-top: 1px solid var(--bordo); padding-top: .4rem; } }

.barra-lavagna { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.messaggi { min-height: 1.5rem; font-size: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.msg { padding: .35rem .7rem; border-radius: 6px; border-left: 4px solid var(--bordo); background: var(--pannello); }
.msg.ok { border-left-color: var(--ok); background: var(--ok-chiaro); }
.msg.no { border-left-color: var(--no); background: var(--no-chiaro); }

/* popover */
.popover { position: fixed; z-index: 100; background: var(--pannello); border: 1px solid var(--accento); border-radius: 8px; box-shadow: var(--ombra); padding: .6rem; max-width: min(34rem, 94vw); }
.popover[hidden] { display: none; }
.popover p { margin: 0 0 .4rem; font-size: .85rem; color: var(--tenue); }
.lista-alt { display: flex; flex-wrap: wrap; gap: .5rem; }
button.alt { background: var(--sfondo); color: var(--inchiostro); border: 1.5px solid var(--bordo); border-radius: 8px; padding: .3rem .6rem .4rem; display: flex; flex-direction: column; align-items: center; }
button.alt:hover { border-color: var(--accento); filter: none; }
button.alt.corrente { border-color: var(--accento); background: var(--accento-chiaro); }
button.alt small { font-size: .68rem; color: var(--custom); }
.scelta-forme { display: flex; flex-direction: column; gap: .25rem; min-width: 11rem; }
button.forma { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; background: transparent; color: var(--inchiostro); border: 1px solid var(--bordo); text-align: left; }
button.forma:hover { border-color: var(--accento); filter: none; }
button.forma.corrente { background: var(--accento-chiaro); border-color: var(--accento); }
button.forma .f { font-size: 1.15rem; font-style: italic; }
button.forma small { font-family: var(--mono); font-size: .7rem; color: var(--tenue); }
button.togli { margin-top: .3rem; }

/* modale */
.velo { position: fixed; inset: 0; background: rgba(10,20,22,.55); display: flex; align-items: center; justify-content: center; z-index: 200; }
.velo[hidden] { display: none; }
.modale { background: var(--pannello); border-radius: 10px; padding: 1.4rem; width: min(24rem, 92vw); box-shadow: var(--ombra); }
.modale p { color: var(--tenue); font-size: .9rem; }
.modale .azioni { margin-top: .8rem; }

.modale.larga { width: min(52rem, 94vw); }
.scelte-mondo { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .6rem; }
button.mondo { display: flex; flex-direction: column; gap: .4rem; text-align: left; background: var(--sfondo); color: var(--inchiostro); border: 1.5px solid var(--bordo); border-radius: 10px; padding: .8rem .9rem; }
button.mondo:hover { border-color: var(--accento); background: var(--accento-chiaro); filter: none; }
button.mondo strong { font-size: 1.05rem; }
button.mondo span { font-size: .85rem; color: var(--tenue); line-height: 1.4; }
@media (max-width: 760px) { .scelte-mondo { grid-template-columns: 1fr; } }

.guida { background: var(--accento-chiaro); border: 1px solid var(--accento); border-radius: 10px; padding: .7rem 1rem .9rem; }
.guida[hidden] { display: none; }
.testa-guida { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.passi { margin: 0; padding-left: 1.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.6rem; }
.passi li { padding-left: .2rem; }
.passi li strong { display: block; }
.passi li span { font-size: .85rem; color: var(--tenue); }
.passi li.fatto strong::after { content: " ✓"; color: var(--ok); }
.passi li.fatto { opacity: .6; }
.passi li.corrente strong { color: var(--accento); }
.passi li.corrente::marker { font-weight: 700; color: var(--accento); }
@media (max-width: 900px) { .passi { grid-template-columns: 1fr; } }

/* ---------- Prove sul modello ---------- */
.barra-prove { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin: .6rem 0; }
.prova-digitata { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 28rem; }
.prova-digitata input { flex: 1 1 14rem; }
.prove-attesa h3, .prove-registro h3 { margin: .8rem 0 .3rem; }
.prova-att { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--bordo); }
.prova-att .frase, .registro .frase { font-style: italic; font-size: 1.15rem; flex: 1 1 16rem; }
.prova-att .g { background: rgba(15,107,102,.12); color: #0f6b66; border: 1px solid #0f6b66; }
.prova-att .a { background: rgba(170,51,51,.1); color: #a33; border: 1px solid #a33; }
.registro { list-style: none; margin: 0; padding: 0; }
.prova { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; padding: .4rem .6rem; border-left: 4px solid var(--bordo); margin: .25rem 0; background: var(--sfondo); }
.prova.ok { border-left-color: #0f6b66; }
.prova.sotto, .prova.sovra { border-left-color: #a33; background: rgba(170,51,51,.1); }
.prova .giu { font-size: .85rem; color: #5d6d70; }
.prova .esito { font-size: .85rem; font-weight: 600; }
.prova.ok .esito { color: #0f6b66; } .prova.sotto .esito, .prova.sovra .esito { color: #a33; }
.cambio { font-size: .75rem; padding: .05rem .5rem; border-radius: 99px; color: #fff; }
.cambio.risolto { background: #0f6b66; } .cambio.rotto { background: #a33; }
button.piccolo { padding: .1rem .6rem; font-size: .85rem; }