:root {
  --bg: #f6f7f9; --card: #ffffff; --ink: #1c2330; --muted: #5d6675; --line: #dfe3e8;
  --accent: #1f6feb; --accent-ink: #ffffff; --ok: #1a7f37; --ok-bg: #e6f4ea; --bad: #c62828; --bad-bg: #fdecea;
  --warn-bg: #fff4d6; --warn-ink: #6b4b00; --cut: #b8bec7; --keep: #7cc4ff; --marker: #ff8a00; --chip: #eef2f7;
  --radius: 10px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 14px; }
button:hover { border-color: #b9c2cc; background: #fafbfc; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: #185dc9; }
button.danger { color: var(--bad); }
button.small { padding: 4px 10px; font-size: 14px; }
button.link { border: none; background: none; color: var(--accent); padding: 2px 6px; text-decoration: underline; }
input[type=text], input[type=password], input[type=number], input[type=url], select, textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; min-width: 0;
}   /* min-width:0 = un <select> con opzioni lunghe non allarga la colonna che lo contiene */
input.short { width: 7.5em; }
/* v88: casella che si adatta alla parola (l'attributo size fa il lavoro), senza sfondare la riga */
input.short.grow { width: auto; min-width: 7.5em; max-width: 16em; }
textarea { min-height: 90px; resize: vertical; }
label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: 14px; color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
code, kbd { background: var(--chip); padding: 1px 5px; border-radius: 4px; font-size: 14px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 700; font-size: 18px; letter-spacing: .2px; }
.topbar nav { display: flex; gap: 8px; flex-wrap: wrap; }
/* account/cloud: pallino di stato nel pulsante in alto */
#btn-account { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #b8bec6; vertical-align: 1px; }
.dot.ok { background: #2e9e5b; }
.dot.busy { background: #e8a33d; animation: dotpulse 1.2s ease-in-out infinite; }
.dot.bad { background: #d64545; }
@keyframes dotpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
body.standalone .topbar nav { display: none; }
@media (max-width: 640px) { .topbar { padding: 8px 12px; } .topbar nav button { padding: 6px 9px; font-size: 13px; } .brand { font-size: 16px; } main { padding: 12px; } h1 { font-size: 20px; } }
main { max-width: 1320px; margin: 0 auto; padding: 18px; }
.view { display: none; }
.view.active { display: block; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 0 0 auto; min-width: 0; max-width: 100%; }   /* nessun figlio può sfondare la riga (i chip dentro vanno a capo) */
.grow { flex: 1 1 auto !important; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.muted { color: var(--muted); }
.right { margin-left: auto; }
h1 { font-size: 24px; margin: 6px 0 12px; }
h2 { font-size: 19px; margin: 6px 0 10px; }
h3 { font-size: 16px; margin: 4px 0 8px; }
.notice { padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-size: 14px; }
.notice.warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
/* v93: ogni avviso si può chiudere */
.notice { position: relative; }
.notice.warn { padding-right: 34px; }
.notice-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; line-height: 1; border-radius: 6px; border: 1px solid transparent; background: transparent; color: inherit; opacity: .55; cursor: pointer; font-size: 14px; }
.notice-x:hover, .notice-x:focus-visible { opacity: 1; background: rgba(0,0,0,.06); }
.notice.bad { background: var(--bad-bg); color: var(--bad); }
.notice.info { background: #e8f0fe; color: #1b4b9b; }

/* player */
.player-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.player-box iframe, .player-box .mock { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock { background: #10141a; color: #dfe6ee; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 16px; text-align: center; }
.mock .caption { font-size: clamp(16px, 2.6vw, 24px); max-width: 90%; min-height: 3em; }
.mock .time { font-variant-numeric: tabular-nums; opacity: .8; }
.mock .bar { width: 80%; height: 6px; background: #2c3441; border-radius: 3px; overflow: hidden; }
.mock .bar > div { height: 100%; background: var(--keep); width: 0; }
.mock .tag { position: absolute; top: 8px; left: 10px; font-size: 12px; opacity: .6; }

/* timeline */
.timeline { position: relative; height: 54px; margin: 14px 0 6px; user-select: none; }
/* la barra si alza solo dove ci sono i numeri dei tagli (editor): lo studente non li vede e non perde spazio */
.timeline.has-cutn { height: 78px; }
.timeline .track { position: absolute; left: 0; right: 0; top: 22px; height: 12px; background: var(--keep); border-radius: 6px; overflow: hidden; cursor: pointer; }
/* v90: ogni taglio ha il suo colore (--cutc dal JS) e sotto la barra il suo numero, uguale a quello della lista */
.timeline .cut { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--cutc, var(--cut)) 0 4px, var(--cutc-lite, #e9ecf0) 4px 8px); }
.timeline .cut-n { position: absolute; top: 36px; font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 6px; white-space: nowrap; background: var(--cutc-lite); color: var(--cutc-ink); border: 1px solid var(--cutc); cursor: pointer; }
.timeline .cut-n:hover, .timeline .cut-n:focus-visible { background: var(--cutc); color: #fff; }
/* v91: il numero cliccato porta alla riga del taglio, che lampeggia due volte del suo colore */
@keyframes cut-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); background: transparent; } 45% { box-shadow: 0 0 0 4px var(--cutc, var(--marker)); background: var(--cutc-lite, #fff6e5); } }
.cut-row.flash { animation: cut-flash .6s ease 2; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .cut-row.flash { animation: none; box-shadow: 0 0 0 4px var(--cutc, var(--marker)); border-radius: 10px; } }
.timeline .cut-n.giu { top: 51px; }
/* v93: la banda e il suo numero si illuminano quando li chiami dalla lista */
@keyframes cutbar-flash { 0%, 100% { filter: none; } 45% { filter: brightness(1.22) saturate(1.5); } }
@keyframes cutn-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } 45% { box-shadow: 0 0 0 4px var(--cutc); } }
.timeline .cut.flash { animation: cutbar-flash .6s ease 2; }
.timeline .cut-n.flash { animation: cutn-flash .6s ease 2; }
@media (prefers-reduced-motion: reduce) { .timeline .cut.flash, .timeline .cut-n.flash { animation: none; box-shadow: 0 0 0 3px var(--cutc); } }
.cut-tag { grid-area: tag; justify-self: start; font: inherit; cursor: pointer; font-size: 12px; font-weight: 700; padding: 3px 7px; border-radius: 7px; background: var(--cutc-lite); color: var(--cutc-ink); border: 1px solid var(--cutc); }
.cut-tag:hover, .cut-tag:focus-visible { background: var(--cutc); color: #fff; }
.timeline .cursor { position: absolute; top: 16px; width: 2px; height: 24px; background: #d00; pointer-events: none; }
.timeline .marker { position: absolute; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; border: 2px solid var(--marker); color: #333; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; user-select: none; }
.timeline .marker.done { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
/* v92: nell'editor il pallino verde = esercizio segnato "✓ Controllato" (come la card) */
.timeline .marker.rev { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.timeline .marker.rev.active { background: var(--ok); color: #fff; }
.timeline .marker.done.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.timeline .marker.active:not(.done) { background: var(--marker); color: #fff; }
.timeline .marker.active.done { box-shadow: 0 0 0 3px #ffe08a; }   /* rifatto/riascoltato: resta verde o rosso, con l'anello che dice "sei qui" */
.ex-card.flash { box-shadow: 0 0 0 3px var(--marker); transition: box-shadow .3s; }
.timeline.has-cutn .labels { top: 66px; }
.timeline .labels { position: absolute; left: 0; right: 0; top: 38px; font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }

/* editor */
.editor-bar { margin-bottom: 10px; }
/* Annulla / Ripeti: coppia compatta accanto al titolo */
.undo-pair { display: inline-flex; }
.undo-pair button { border-radius: 0; }
.undo-pair button:first-child { border-radius: 8px 0 0 8px; }
.undo-pair button:last-child { border-radius: 0 8px 8px 0; border-left: 0; padding-left: 8px; padding-right: 8px; }
.undo-pair button:disabled { opacity: .45; cursor: default; }
.editor-layout { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(360px, 6fr); gap: 16px; align-items: start; }
.editor-left, .editor-right { min-width: 0; }   /* le colonne possono restringersi: niente sfondamento orizzontale */
/* v93: il padding tiene il contenuto lontano dalla barra di scorrimento della colonna (su macOS è "a comparsa"
   e galleggia SOPRA il contenuto: senza spazio, la fine della barra del tempo e gli avvisi ci finivano sotto) */
.editor-left { position: sticky; top: 64px; max-height: calc(100vh - 76px); overflow-y: auto; padding-right: 14px; }
.editor-left .card { padding: 12px 14px; }
.editor-left .kv { flex: 1 1 100%; gap: 12px; }
@media (max-width: 960px) { .editor-layout { grid-template-columns: 1fr; } .editor-left { position: static; max-height: none; overflow: visible; } }
.ex-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.ex-card.rules { border-left: 4px solid #c9d2dd; }
.ex-card.ai { border-left: 4px solid #8e7cf3; }
.ex-card .head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ex-card .num { font-weight: 700; background: var(--marker); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.ex-card .ex-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 18px; }
.ex-card .ex-title b { font-weight: 800; }
/* "trova la parola mancante": spazi cliccabili tra le parole; quello vicino al mouse si apre */
.sentence.gapfinder { cursor: text; }
.gapfinder .slot { display: inline-block; vertical-align: baseline; width: .4em; height: 1.15em; margin: 0 .04em; border-radius: 5px; position: relative; transition: width .18s ease, background .18s ease, box-shadow .18s ease; }
/* Gli spazi cliccabili non devono occupare posto finche' non servono: larghi 0,4em spingevano dentro la prima parola
   di ogni riga (segnalato da Edoardo: "la frase E attenzione non e' in linea con mare") e allargavano tutta la
   spaziatura della frase. A riposo sono larghi zero — la frase si legge come una frase normale — e si aprono solo
   sotto il puntatore (.near) o quando sono scelti (.sel). Restano trovabili: nearest() li cerca per posizione, non per larghezza. */
.gapfinder .slot:not(.near):not(.sel) { width: 0; margin: 0; }
.gapfinder .slot.near { width: 2.6em; background: #fff1c2; box-shadow: inset 0 -2px 0 0 #f5c400; cursor: pointer; }
.gapfinder .slot.near::after { content: '+'; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; color: #b58900; font-weight: 700; font-size: .85em; line-height: 1.35em; }
.gapfinder .slot.sel { width: auto; background: transparent; box-shadow: none; padding: 0 .1em; }
.gapfinder .slot.sel::after { content: none; }
.gapfinder .slot input.gap.gapfind { width: 5ch; min-width: 5ch; margin: 0; padding: 0 4px; text-align: center; }
.gapfinder .slot.hinted input.gap.gapfind { box-shadow: 0 0 0 2px #ffe08a; }
.gapfinder .slot.wrongpick { animation: slot-shake .5s; }
.gapfinder .slot.wrongpick input.gap.gapfind { background: var(--bad-bg); border-color: var(--bad); }
@keyframes slot-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { background: var(--chip); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer; user-select: none; }
.chip.sub { margin-left: 10px; }   /* opzione figlia: si vede che dipende dalla casella prima */
.chip.off { opacity: .5; cursor: not-allowed; }
.chip.sel { background: #ffe8cc; border-color: var(--marker); }
.chip.gap { background: #fff; border: 2px dashed var(--marker); }
.chip.static { cursor: default; }
.chip.good { background: var(--ok-bg) !important; border-color: var(--ok) !important; color: var(--ok); font-weight: 600; }
.chip.wrongpick { background: var(--bad-bg) !important; border-color: var(--bad) !important; color: var(--bad); }
.preview { background: #fafbfd; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 15px; }
.cut-row { display: grid; grid-template-columns: auto 6.5em 6.5em 1fr; grid-template-areas: "tag start end info" "btns btns btns btns"; gap: 6px 8px; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.cut-row > :nth-child(2) { grid-area: start; }
.cut-row > :nth-child(3) { grid-area: end; }
.cut-row > .hint { grid-area: info; margin: 0; }
.cut-row .cut-btns { grid-area: btns; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) { .cut-row { grid-template-columns: auto 1fr 1fr; grid-template-areas: "tag start end" "info info info" "btns btns btns"; } }
.kv { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.kv b { color: var(--ink); }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--muted); }
.badge.ai { background: #ece8ff; color: #4b3bb5; }

/* student: il video occupa quasi tutto lo schermo (larghezza limitata solo dall'altezza della finestra) */
body.view-student main { max-width: none; padding: 10px 16px; }
#view-student .row:first-child { margin-bottom: 6px; }
#view-student h1 { font-size: 20px; }
.student-layout { width: min(100%, calc((100vh - 245px) * 16 / 9)); margin: 0 auto; }
.s-controls { margin-top: 2px; }
.student-layout:fullscreen { background: var(--bg); padding: 10px 16px; width: 100%; max-width: none; display: flex; flex-direction: column; overflow: hidden; }
.student-layout:fullscreen .stage { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.student-layout:fullscreen .timeline { flex: 0 0 auto; }
.student-layout:fullscreen .s-controls { flex: 0 0 auto; }
.ex-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-height: 200px; }
.ex-head { margin-bottom: 4px; }
.ex-head h3.ex-title { margin: 0; font-size: 22px; }
.ex-head h3.ex-title .sub { font-size: 14px; font-weight: 400; color: var(--muted); }
.ex-head .badge { font-size: 13px; }
button.play { padding: 4px 12px; color: var(--accent); font-weight: 700; }

/* stage: area del video. Durante un esercizio il player (mai coperto: termini YouTube) resta grande, centrato in alto,
   e l'esercizio occupa lo spazio sotto: frase, poi pulsanti. Il titolo del tipo sta in una riga sottile sopra il video. */
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.stage .player-box { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transition: width .35s ease, height .35s ease, top .35s ease, right .35s ease, left .35s ease; }
.stage .pop { display: none; }
.stage.docked { background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.stage.docked .player-box { position: relative; inset: auto; flex: 0 0 auto; height: 54%; width: auto; max-width: 100%; aspect-ratio: 16 / 9; margin: 34px auto 0; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 2; transition: none; }
.stage.docked .player-box.fitting { transition: height .3s ease; }   /* si restringe (fitStage) quando l'esercizio ha bisogno di spazio */
.stage.docked .pop { display: block; position: static; flex: 1 1 auto; min-height: 0; overflow: auto; border: none; border-radius: 0; padding: 8px 24px 12px; }
.stage.docked .pop .ex-head { position: absolute; top: 4px; left: 14px; right: 14px; z-index: 3; margin: 0; }
/* schede delle parole prima del video e riepilogo: il video (in pausa) è nascosto, la scheda prende tutto lo spazio */
.stage.docked.cards .player-box { display: none; }
/* SPOT IN MUTO DURANTE LE SCHEDE (v64): mentre gira il warm il player NON si nasconde (policy YouTube: un player che
   suona resta visibile, minimo 200px) — riquadro piccolo in basso a destra, sopra niente, l'etichetta sta FUORI. */
/* v93: il riquadro del warm-up nasce trasparente e compare solo quando uno spot c'è davvero (classe 'adon'):
   senza spot il warm-up finisce prima e non si vede quel lampo in basso a destra. Mentre lo spot gira il player
   è pienamente visibile, come richiedono i termini di YouTube. */
.stage.docked.cards.warmad .player-box { display: block; position: fixed; right: 14px; bottom: 14px; width: 356px; height: 200px;
  z-index: 55; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 12px 36px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .2s ease; }
.stage.docked.cards.warmad.adon .player-box { opacity: 1; }
@media (max-width: 560px) { .stage.docked.cards.warmad .player-box { width: 220px; height: 200px; } }
#warmad-tag { position: fixed; right: 14px; bottom: 222px; z-index: 56; background: rgba(20,28,38,.92); color: #fff;
  font-size: 12.5px; padding: 5px 10px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.stage.docked.cards .pop { padding-top: 44px; }
.stage.docked .pop .ex-head h3.ex-title { font-size: 18px; }
.stage.docked .pop > h2 { margin-top: 0; }
.stage.docked .pop .instr { margin-bottom: 4px; }
.stage.docked .pop .fullwrap { margin-top: 8px; padding-top: 6px; }
.stage.docked .pop .actions { margin-top: 8px; }
.stage .pop .sentence { font-size: clamp(19px, 1.7vw, 26px); }
.stage .pop .chips .chip { font-size: clamp(17px, 1.4vw, 22px); }
.stage .pop input.gap { font-size: clamp(17px, 1.4vw, 22px); }
@media (max-width: 720px) {
  .stage.docked { aspect-ratio: auto; min-height: 420px; }
  .stage.docked .player-box { height: auto; width: 100%; max-width: 356px; min-width: 200px; margin: 34px auto 0; }
  .stage.docked .pop { padding: 8px 12px 12px; }
}
.ex-panel .instr { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.ex-panel .sentence { font-size: 20px; line-height: 1.7; }
.ex-panel input.gap { display: inline-block; width: auto; min-width: 5em; padding: 2px 6px; margin: 0 2px; border-bottom: 2px solid var(--accent); border-radius: 4px; text-align: center; }
.ex-panel input.gap.ok { background: var(--ok-bg); border-color: var(--ok); }
.ex-panel input.gap.bad { background: var(--bad-bg); border-color: var(--bad); }
.ex-panel .chips .chip { font-size: 18px; padding: 8px 14px; }
.ex-panel .answer-row { min-height: 48px; border: 1px dashed var(--line); border-radius: 8px; padding: 6px; margin: 8px 0; }
.ex-panel .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ex-panel .feedback { margin-top: 10px; font-weight: 600; }
.ex-panel .actions .feedback { margin: 0 0 0 auto; }   /* "Giusto!" a destra, sulla riga dei pulsanti */
.ex-panel .actions .feedback:empty { display: none; }
.progress { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.progress .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.progress .dot.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.progress .dot.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.progress .dot.cur { border-color: var(--marker); background: #fff3e6; }
.big { font-size: 18px; padding: 12px 20px; }

/* misc */
/* ---------- home Proflandia (v65): hero a 4 servizi + portfolio con filtri ---------- */
.branddot { color: var(--marker); }
.home-hero { margin-bottom: 18px; }
.home-hero h1 { margin: 2px 0 4px; }
.hero-sub { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.svc { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 15px 14px; cursor: pointer; position: relative;
  display: flex; flex-direction: column; gap: 7px; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.svc:hover, .svc:focus-visible { border-color: var(--accent); box-shadow: 0 6px 22px rgba(31,111,235,.13); transform: translateY(-2px); outline: none; }
.svc .ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.svc h3 { margin: 1px 0 0; font-size: 16px; }
.svc p { margin: 0; font-size: 12.6px; color: var(--muted); line-height: 1.45; flex: 1; }
.svc .go { font-size: 13px; font-weight: 700; color: var(--accent); }
.svc-video .ico { background: #e8f0fe; }
.svc-act .ico { background: #fef3e2; }
.svc-conv .ico { background: #e6f4ea; }
.svc-qr .ico { background: #f3e8ff; }
.svc .soon { position: absolute; top: 11px; right: 11px; background: #f3e8ff; color: #7c3aed; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 8px; }
.port-head { align-items: center; }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--muted); cursor: pointer; }
.fchip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
#home-search { margin-left: auto; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; min-width: 200px; }
@media (max-width: 900px) { .services { grid-template-columns: 1fr 1fr; } #home-search { margin-left: 0; min-width: 0; width: 100%; } }
@media (max-width: 480px) { .services { grid-template-columns: 1fr; } }

.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lesson-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.lesson-card .thumb { aspect-ratio: 16 / 9; background: #10141a center / cover no-repeat; cursor: pointer; position: relative; }
.lesson-card .thumb .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; text-shadow: 0 2px 8px rgba(0,0,0,.6); opacity: .9; }
.lesson-card .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lesson-card .title { font-weight: 600; line-height: 1.3; cursor: pointer; }
.lesson-card .meta { font-size: 12px; color: var(--muted); }
.lesson-card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
/* Un dialog piu' alto della finestra SCORRE (v66, 'non c'è un pulsante': su una finestra bassa i pulsanti in fondo
   a "Nuova conversazione" restavano fuori dallo schermo, e con loro la riga di stato — il click sembrava morto). */
dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-width: 560px; width: calc(100% - 32px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; }
dialog::backdrop { background: rgba(0,0,0,.35); }
/* ✕ di chiusura in alto a destra, su OGNI dialog (v66, richiesta di Edoardo: "la x sopra a destra") */
.dlg-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: none; background: transparent; color: var(--muted, #667); font-size: 16px; line-height: 30px; text-align: center; border-radius: 8px; cursor: pointer; }
.dlg-x:hover { background: #eef1f5; color: #111; }
/* v93: avviso al centro dello schermo, sparisce da solo (non è un dialog: non blocca e non prende il fuoco) */
.center-note { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 60; pointer-events: none; padding: 20px; }
.center-note .cn-box { background: rgba(28, 35, 48, .93); color: #fff; font-size: 17px; font-weight: 600; line-height: 1.4; text-align: center; padding: 16px 22px; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.28); max-width: 26em; animation: cn-in .18s ease-out; }
.center-note.out { opacity: 0; transition: opacity .28s ease; }
@keyframes cn-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .center-note .cn-box { animation: none; } }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #1c2330; color: #fff; padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50; max-width: 90%; }
#toast.show { opacity: 1; }
/* barra "si può tornare indietro": elemento suo, così un avviso qualsiasi non porta via il pulsante Annulla */
.undo-bar { position: fixed; overflow: hidden; bottom: 18px; left: 50%; transform: translate(-50%, 12px); z-index: 55; display: none;
  align-items: center; gap: 12px; max-width: min(92vw, 640px); padding: 9px 10px 9px 16px; border-radius: 10px;
  background: #1c2330; color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.28); opacity: 0; transition: opacity .18s, transform .18s; }
.undo-bar.show { display: flex; opacity: 1; transform: translate(-50%, 0); }
.undo-bar .undo { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; padding: 5px 12px; font-weight: 600; white-space: nowrap; }
.undo-bar .undo:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.undo-bar kbd { background: rgba(255,255,255,.12); color: #ccd4e2; border-radius: 5px; padding: 2px 7px; font-size: 12px; }
/* La riga del tempo e' ARANCIONE e diventa ROSSA sul finale (v66, richiesta di Edoardo): il colore avvisa che
   il tempo per Annullare sta per scadere. Il colore viaggia nella stessa animazione della larghezza. */
.undo-bar .life { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: 0 0 10px 10px; background: var(--marker, #ff8a00); transform-origin: left; animation: undo-life linear forwards; }
@keyframes undo-life {
  from { transform: scaleX(1); background: var(--marker, #ff8a00); }
  70% { background: var(--marker, #ff8a00); }
  88% { background: #e5484d; }
  to { transform: scaleX(0); background: #e5484d; }
}
@media (prefers-reduced-motion: reduce) { .undo-bar .life { display: none; } }
body.undo-open #toast { bottom: 76px; }   /* l'avviso normale sale sopra la barra */
/* "questa scheda è rimasta indietro": in alto, non sparisce da sola (è un problema, non una notifica) */
.app-bar { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px;
  max-width: min(94vw, 760px); padding: 9px 10px 9px 16px; border-radius: 10px; background: #7a4b00; color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); font-size: 15px; }
.app-bar .go { background: #fff; color: #7a4b00; border: none; border-radius: 8px; padding: 6px 14px; font-weight: 700; white-space: nowrap; }
.app-bar .later { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: 5px 10px; font-size: 13px; white-space: nowrap; }
#overlay { position: fixed; inset: 0; background: #fff; display: none; align-items: center; justify-content: center; z-index: 40; font-size: 18px; text-align: center; padding: 20px; }
#overlay.show { display: flex; }
/* v84: Pausa e Play — le mascotte del caricamento (SVG animato, niente asset esterni) */
.pp-stage { position: relative; width: 190px; height: 120px; margin: 0 auto 6px; }
.pp-char { position: absolute; bottom: 10px; transform-origin: 50% 100%; will-change: transform; }
.pp-play { left: 18px; animation: pp-play 3.2s cubic-bezier(.45,.05,.35,1) infinite; }
.pp-pausa { right: 18px; animation: pp-pausa 3.2s cubic-bezier(.45,.05,.35,1) infinite; }
.pp-ombra { position: absolute; bottom: 2px; width: 70px; height: 10px; border-radius: 50%; background: rgba(28,35,48,.10); }
.pp-ombra.a { left: 24px; animation: pp-ombra-a 3.2s cubic-bezier(.45,.05,.35,1) infinite; }
.pp-ombra.b { right: 24px; animation: pp-ombra-b 3.2s cubic-bezier(.45,.05,.35,1) infinite; }
.pp-eye { animation: pp-blink 3.2s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pp-play {
  0%, 8%   { transform: translateX(42px) scale(1.08); z-index: 3; }
  38%      { transform: translateX(42px) scale(1.08) rotate(0deg); z-index: 3; }
  46%      { transform: translateX(6px) scale(.94, 1.02) rotate(-12deg); z-index: 1; }
  52%, 86% { transform: translateX(0) translateY(-4px) scale(.9); z-index: 1; }
  90%      { transform: translateX(8px) scale(1.12, .88) rotate(8deg); z-index: 3; }
  100%     { transform: translateX(42px) scale(1.08); z-index: 3; }
}
@keyframes pp-pausa {
  0%, 8%   { transform: translateX(0) translateY(-4px) scale(.9); z-index: 1; }
  38%      { transform: translateX(-6px) scale(1.1, .9) rotate(-8deg); z-index: 1; }
  46%      { transform: translateX(-44px) scale(1.06, 1.02) rotate(6deg); z-index: 3; }
  52%, 86% { transform: translateX(-42px) scale(1.08); z-index: 3; }
  92%      { transform: translateX(-34px) scale(.96) rotate(10deg); z-index: 1; }
  100%     { transform: translateX(0) translateY(-4px) scale(.9); z-index: 1; }
}
@keyframes pp-ombra-a {
  0%, 8% { transform: translateX(42px) scale(1.05); } 38% { transform: translateX(42px); }
  52%, 86% { transform: translateX(0) scale(.85); } 100% { transform: translateX(42px) scale(1.05); }
}
@keyframes pp-ombra-b {
  0%, 8% { transform: translateX(0) scale(.85); } 38% { transform: translateX(-6px) scale(.9); }
  52%, 86% { transform: translateX(-42px) scale(1.05); } 100% { transform: translateX(0) scale(.85); }
}
@keyframes pp-blink { 0%, 91%, 100% { transform: scaleY(1); } 93%, 95% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .pp-char, .pp-ombra, .pp-eye { animation: none; } }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 12px; }
/* Spinner piccolo accanto a un messaggio di stato (v66, 'quando clicca su genera unità non appare nessun logo di
   caricamento'): il testo da solo non dice che il lavoro STA andando avanti. */
.spinner.inline { display: inline-block; width: 16px; height: 16px; border-width: 2px; margin: 0 8px 0 0; vertical-align: -3px; }
#overlay-text { font-size: 17px; color: var(--muted); letter-spacing: .02em; }
/* v87: la riga di stato, il cronometro e la via d'uscita */
#overlay-step { margin-top: 8px; font-size: 14px; color: var(--muted); max-width: 30em; line-height: 1.45; }
#overlay-time { margin-top: 4px; font-size: 13px; color: #9aa3b2; font-variant-numeric: tabular-nums; }
#overlay-cancel { margin-top: 14px; }
#overlay-cancel[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbox { background: var(--chip); padding: 8px 10px; border-radius: 8px; word-break: break-all; font-size: 13px; max-height: 90px; overflow: auto; }
.sr { position: absolute; left: -9999px; }

/* festa per la risposta giusta */
.ex-panel { position: relative; overflow: hidden; }
.fx-burst { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.fx-piece { position: absolute; width: 10px; height: 10px; border-radius: 2px; opacity: 0; animation: fx-fly 1.1s ease-out forwards; }
@keyframes fx-fly {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.6); opacity: 0; }
}
.feedback.win { font-size: 34px; font-weight: 800; letter-spacing: .3px; line-height: 1.1; animation: fx-pop .7s cubic-bezier(.2, 1.6, .4, 1); transform-origin: right center; }
@keyframes fx-pop { 0% { transform: scale(.3) translateY(12px); opacity: 0; } 60% { transform: scale(1.12) translateY(-4px); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.ex-panel.win-flash { animation: fx-flash .7s ease-out; }
@keyframes fx-flash { 0% { box-shadow: inset 0 0 0 0 rgba(26,127,55,0); } 30% { box-shadow: inset 0 0 0 6px rgba(26,127,55,.35); } 100% { box-shadow: inset 0 0 0 0 rgba(26,127,55,0); } }
.progress .dot.ok.just { animation: fx-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@media (prefers-reduced-motion: reduce) { .fx-piece, .feedback.win, .ex-panel.win-flash, .progress .dot.ok.just { animation: none; } }

/* fascia che copre i sottotitoli stampati nel video (opzionale, per lezione): sfocatura + velo scuro, trascinabile, ridimensionabile */
.player-box .cover { position: absolute; z-index: 3; background: rgba(238, 241, 245, .55); -webkit-backdrop-filter: blur(20px) saturate(.8); backdrop-filter: blur(20px) saturate(.8); border: 1px dashed rgba(60,70,80,.35); border-radius: 6px; cursor: move; touch-action: none; user-select: none; }
.player-box .cover .lbl { position: absolute; left: 8px; top: 2px; font-size: 11px; color: rgba(40,48,58,.7); pointer-events: none; white-space: nowrap; }
.player-box .cover .grip { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 55%, rgba(60,70,80,.6) 55%); border-radius: 0 0 6px 0; }
.player-box.dragging iframe, .player-box.dragging .mock { pointer-events: none; }

/* popover "+" sulla linea del tempo dell'editor */
.add-pop { position: absolute; top: 40px; z-index: 6; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: 420px; }
.add-pop .lbl { font-weight: 600; font-size: 14px; white-space: nowrap; }
.add-pop select { padding: 4px 6px; font-size: 14px; }

/* parole utili: editor */
.vocab-table { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.vocab-row { display: grid; grid-template-columns: 22px minmax(90px, 1.2fr) minmax(90px, 1.2fr) auto auto auto; gap: 6px; align-items: center; }
.vocab-row.off input[type=text] { opacity: .55; }
.vocab-row input[type=text] { padding: 4px 8px; }
.vocab-row .v-img { display: flex; gap: 4px; align-items: center; }
.vocab-row .v-img img { width: 44px; height: 32px; object-fit: cover; border-radius: 4px; cursor: zoom-in; border: 1px solid var(--line); }
.img-preview { position: fixed; z-index: 60; display: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 6px; max-width: 392px; }
.img-preview.show { display: block; }
.img-preview img { display: block; max-width: 380px; max-height: 290px; min-width: 120px; min-height: 60px; border-radius: 8px; object-fit: contain; background: #f2f4f7; }
.img-preview .cap { font-size: 12px; color: var(--muted); margin-top: 4px; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .vocab-row { grid-template-columns: 22px 1fr 1fr; } .vocab-row .badge { display: none; } }

/* stelle sulle parole */
.w { cursor: pointer; border-radius: 4px; padding: 0 1px; }
.w:hover { background: #fff3e0; }
.w.starred { background: #fff1c2; box-shadow: 0 -2px 0 0 #f5c400 inset; }
.w.starred::after { content: '★'; color: #e0a800; font-size: .7em; vertical-align: super; margin-left: 1px; }
button.star { border: none; background: none; color: #c9ced6; font-size: 20px; padding: 0 4px; line-height: 1; cursor: pointer; }
button.star.on { color: #e0a800; }
.fullwrap { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line); }
.fullwrap .sentence.full { font-size: 17px; line-height: 1.6; color: var(--ink); }

/* scheda abbinamento */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 8px 0; }
.match .col { display: flex; flex-direction: column; gap: 6px; }
/* coppie abbinate: salgono in alto, una riga per coppia, legate da una linea; non più cliccabili (tranne la stella) */
.match-done { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.match-done:empty { display: none; }
.mpair { display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; }
.mpair .link { height: 3px; background: var(--ok); }
.mpair .mchip { pointer-events: none; }
.mpair .mchip:first-child { border-radius: 10px 0 0 10px; border-right-color: transparent; }
.mpair .mchip:last-child { border-radius: 0 10px 10px 0; border-left-color: transparent; }
.mpair .mchip button.star { pointer-events: auto; }
.mchip[data-flip] { will-change: transform; }
.mchip { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--chip); border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; font-size: 18px; min-height: var(--rowh, 44px); user-select: none; }
.mchip:hover { border-color: #b9c2cc; }
.mchip.sel { border-color: var(--marker); background: #ffe8cc; }
.mchip.good { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); cursor: default; }
.mchip.wrongpick { border-color: var(--bad); background: var(--bad-bg); }
.mchip.target { justify-content: center; }
.back { display: flex; align-items: center; gap: 8px; justify-content: center; }
.mchip.target .back { width: 100%; }
.back img { max-height: calc(var(--rowh, 56px) - 22px); min-height: 0; max-width: 100%; border-radius: 6px; object-fit: cover; }
/* la foto non deve MAI uscire dal rettangolo arrotondato (v61): il vecchio min-height:44px la faceva sforare
   appena le righe scendevano sotto i 56 px, e -12px non teneva conto di bordo (2+2) e padding (6+6). */
.mchip { overflow: hidden; }
.mchip .back { min-height: 0; max-width: 100%; overflow: hidden; }
.back .tr { font-size: 18px; }
.back.big { flex-direction: column; }
.back.big img { max-height: calc(var(--cardh, 250px) - 80px); max-width: 100%; }
.back.big .tr { font-size: clamp(26px, calc(var(--cardh, 250px) * .14), 46px); font-weight: 600; }

/* flashcard che si gira */
.flashcard { position: relative; width: min(100%, calc(var(--cardh, 250px) * 1.9), 900px); height: var(--cardh, 250px); margin: 8px auto; perspective: 1000px; cursor: pointer; }
/* v95 (Edoardo: "se scorro sotto e mi trovo al taglio numero 7 non vedo il video... falla apparire a destra
   sopra la struttura della lezione"): quando il player esce dallo schermo, si stacca e va in alto a destra.
   Specificità alta apposta: deve vincere su .stage.docked .player-box. */
/* v96: il riquadro è il doppio (Edoardo: "deve essere più grande, circa il doppio") e i suoi pulsanti stanno
   SOPRA il video, non sovrapposti: il titolo e le icone di YouTube coprivano la ✕ e non si riusciva a chiuderlo. */
body { --miniw: min(640px, 46vw); --minih: calc(min(640px, 46vw) * 9 / 16); --minitop: 108px; }
body.mini-player .editor-layout #e-stage .player-box,
body.mini-player .editor-layout #e-stage.docked .player-box {
  display: block; position: fixed; top: calc(var(--minitop) + 36px); right: 18px; left: auto; bottom: auto; width: var(--miniw); height: var(--minih); margin: 0;
  z-index: 42; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 14px 40px rgba(0,0,0,.34);
  aspect-ratio: auto; transition: none;
}
#mini-bar { position: fixed; top: var(--minitop); right: 18px; width: var(--miniw); z-index: 43; display: flex; justify-content: flex-end; gap: 8px; }
#mini-bar button { background: rgba(20,28,38,.9); color: #fff; border: 0; border-radius: 8px; font-size: 13px; line-height: 1; padding: 7px 11px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#mini-bar button.mb-x { font-size: 15px; padding: 6px 11px; }
#mini-bar button:hover, #mini-bar button:focus-visible { background: #1c2330; }
@media (max-width: 960px) { body.mini-player .editor-layout #e-stage .player-box, body.mini-player .editor-layout #e-stage.docked .player-box { position: relative; top: auto; right: auto; width: auto; height: 54%; } #mini-bar { display: none; } }

/* v95: immagine o video di una sezione "Parliamone" */
.talk-media { margin: 0 auto 12px; max-width: 640px; text-align: center; }
.talk-media img { max-width: 100%; max-height: 42vh; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.talk-media.yt { width: 100%; }
.talk-media.yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
.talk-media.small { max-width: 320px; margin: 0 0 10px; }
.talk-media.small img { max-height: 180px; }

.fc-write { justify-content: center; gap: 10px; }   /* v93: "scrivi la parola" e Controlla al centro, sotto la carta */
.fc-nav { justify-content: center; gap: 12px; margin-top: 10px; }
.fc-nav button.primary.big { font-size: 18px; padding: 10px 26px; }
.flashcard .face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--line); border-radius: 14px; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .5s; box-shadow: 0 4px 14px rgba(0,0,0,.08); padding: 12px; }
.flashcard .face.back { transform: rotateY(180deg); background: #fffbea; border-color: #f5c400; }
.flashcard.flipped .face.front { transform: rotateY(180deg); }
.flashcard.flipped .face.back { transform: rotateY(360deg); }
.flashcard .word { font-size: clamp(34px, calc(var(--cardh, 250px) * .16), 54px); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.flashcard .tr { font-size: clamp(18px, calc(var(--cardh, 250px) * .09), 28px); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .flashcard .face { transition: none; } }

/* riepilogo: parole */
.wordlist { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.wl-rows { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.wl-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) auto; gap: 8px; align-items: center; }
.wl-row input[type=text] { padding: 4px 8px; }

/* editor: frase e "lo studente vede" su sfondo arancione chiaro; parole tolte/aggiunte/sostituite ben visibili */
.ex-card textarea.sentence-edit { background: #fff4e5; border-color: #ffd9a8; }
.ex-card .preview { background: #fff4e5; border: 1px dashed #ffb86b; font-size: 16px; }
.pv-removed { color: var(--bad); font-weight: 700; opacity: .45; text-decoration: line-through; }
.pv-added { color: #1b4b9b; font-weight: 700; background: #dbe9ff; border-radius: 4px; padding: 0 3px; }
.pv-orig { color: var(--muted); text-decoration: line-through; opacity: .6; }
.pv-swapped { color: #7a3e00; font-weight: 700; background: #ffe0b3; border-radius: 4px; padding: 0 3px; }

/* scelta multipla */
.mc-edit { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mc-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; }
.mc-row input[type=text] { padding: 4px 8px; }
.mc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
@media (max-width: 720px) { .mc-options { grid-template-columns: 1fr; } }
.mc-opt { text-align: left; font-size: clamp(16px, 1.3vw, 20px); padding: 10px 14px; border: 2px solid var(--line); border-radius: 10px; background: var(--chip); }
.mc-opt.sel { border-color: var(--marker); background: #ffe8cc; }
.mc-opt.good { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.mc-opt.wrongpick { border-color: var(--bad); background: var(--bad-bg); }
.sentence.question { font-weight: 600; }
.translation { margin-top: 8px; padding: 8px 10px; background: #eef4ff; border-radius: 8px; font-size: 16px; }

/* abbinamento: ogni coppia trovata ha il suo colore */
.ex-panel .actions .chip.withtext { font-size: 14px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 4px; }
/* solo la parola sbagliata è barrata: la riga passa dal chip, quindi la parola giusta (.fix) è un inline-block, dove la barratura del genitore non arriva */
.chip.struck { background: var(--bad-bg) !important; border-color: var(--bad) !important; color: var(--bad); font-weight: 600; }
.chip.struck .bad-w { text-decoration: line-through; text-decoration-thickness: 2px; }
.chip.struck .fix { display: inline-block; text-decoration: none; color: #0f5a27; font-weight: 800; margin-left: 2px; }
.chip.struck .fix .w { text-decoration: none; }

/* titolo del tipo di esercizio: sopra la consegna, entra con un'animazione che attira l'attenzione */
h3.ex-type-title { display: inline-block; font-size: clamp(20px, 1.9vw, 30px); font-weight: 800; margin: 2px 0 6px -10px; padding: 2px 10px; border-radius: 8px; animation: title-in .6s cubic-bezier(.2, 1.4, .4, 1) both, title-glow 1.4s ease-in-out .6s 2; }
h3.ex-type-title .sub { font-size: 14px; font-weight: 400; color: var(--muted); }
/* v98: il numero dell'esercizio davanti al tipo, lo stesso della lista Soluzioni dell'insegnante */
h3.ex-type-title .ex-n { color: var(--marker); font-variant-numeric: tabular-nums; }
@keyframes title-in { 0% { transform: translateX(-28px) scale(.92); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes title-glow { 0%, 100% { background: transparent; box-shadow: none; } 50% { background: #fff1c2; box-shadow: 0 0 0 5px #ffe08a; } }
.stage.docked .pop .ex-head h3.ex-title { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { h3.ex-type-title { animation: none; } }

/* parola mancante che entra nella frase spostando il resto */
/* aiuti: lettera svelata, parola messa al suo posto, opzione eliminata, parola sbiadita */
input.hinted { border-color: #d99a00; background: #fff8e1; }
.chip.hinted { border-color: #d99a00; background: #fff1c2; }
/* v98, aiuto del semplificato: giallo = puo' andare nella casella indicata, rosso = escludila.
   Le rosse restano cliccabili (l'aiuto indirizza, non blocca), ma si vedono barrate e spente. */
.chip.excluded { border-color: #e2a5a5; background: #fdecec; color: #a33; text-decoration: line-through; opacity: .75; }
.mc-opt.elim { opacity: .35; text-decoration: line-through; pointer-events: none; }
.chip.dim { opacity: .3; pointer-events: none; }
.sentence .filled .w { background: #fff1c2; box-shadow: 0 -2px 0 0 #f5c400 inset; font-weight: 700; color: #0f5a27; padding: 0 3px; }   /* parole scritte negli spazi, a risposta giusta */
.answer-row .chip.sel { cursor: grab; touch-action: none; }
.answer-row .chip.dragging { cursor: grabbing; opacity: .9; box-shadow: 0 6px 16px rgba(0,0,0,.25); transform: scale(1.05); }
.answer-row .chip.placeholder { background: #ffe8cc; border: 2px dashed var(--marker); opacity: .7; }
.chip.w { cursor: pointer; }
.chip.w.starred { box-shadow: 0 -3px 0 0 #f5c400 inset; }
.w.insert-in { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; background: #fff1c2; box-shadow: 0 -2px 0 0 #f5c400 inset; font-weight: 700; color: #0f5a27; animation: word-in .8s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes word-in { 0% { max-width: 0; opacity: 0; transform: scale(.5); } 55% { max-width: 14em; opacity: 1; transform: scale(1.15); } 100% { max-width: 14em; opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .w.insert-in { animation: none; max-width: none; } }

/* Parliamone: domande di conversazione dopo il video */
.talk-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px 8px; align-items: start; margin-top: 12px; }
.talk-row .num { color: var(--muted); font-size: 13px; text-align: right; padding-top: 8px; }
.talk-row .talk-btns { padding-top: 4px; }
.talk-fields { display: flex; flex-direction: column; gap: 4px; }
.talk-row textarea.talk-in { min-height: 34px; resize: none; overflow: hidden; padding: 6px 9px; line-height: 1.45; }
.talk-row textarea.talk-in.h { color: var(--muted); font-size: 14px; background: #fafbfd; }
.talk-q { font-size: clamp(28px, 4vw, 52px); font-weight: 700; line-height: 1.3; margin: 8vh 0 24px; }
.talk-help { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; }
.talk-help .chip { font-size: clamp(18px, 1.8vw, 24px); padding: 10px 16px; cursor: default; background: #fff1c2; border-color: #f5c400; }
.talk-help .chip .w { cursor: pointer; padding: 0 2px; }
.talk-help .chip .w:hover { background: #ffe38a; }
.talk-help .chip .w.starred { background: #ffd54a; box-shadow: 0 -2px 0 0 #d79600 inset; }
.talk-progress { color: var(--muted); font-size: 14px; }

/* ============ ATTIVITÀ (Memory, Quiz, Anagramma, Ruota) con temi ============ */
.act { position: relative; overflow: hidden; border-radius: 14px; min-height: 380px; display: flex;
  background: var(--act-bg); color: var(--act-ink); font-family: var(--act-font, var(--font)); }
/* margini laterali dell'8%: è la "cornice" dove vivono gli elementi iconici del tema, il contenuto resta al centro */
.act-stage { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 18px clamp(14px, 8%, 84px) 22px; max-width: 980px; margin: 0 auto; width: 100%; }
/* Elementi iconici FISSI del tema (zucca, teschio, trofeo…): dietro il contenuto, ai bordi della scena */
.act-props { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.act-props span { position: absolute; line-height: 1; opacity: .92; filter: drop-shadow(0 4px 6px rgba(0,0,0,.22)); }
@media (max-width: 720px) { .act-props span { opacity: .38; } }
/* Decorazioni animate "una ogni tanto": ogni elemento è visibile solo per un quarto di un ciclo lungo, il resto del tempo
   è trasparente → in media un solo elemento in movimento, mai un loop continuo che distrae. */
.act-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.act-deco span { position: absolute; opacity: 0; animation: act-float linear infinite; will-change: transform, opacity; }
.act-deco.m-fall span { animation-name: act-fall; }
.act-deco.m-rise span { animation-name: act-rise; }
.act-deco.m-twinkle span { animation-name: act-twinkle; animation-timing-function: ease-in-out; }
@keyframes act-float {
  0% { opacity: 0; transform: translate(-6vw, 6px) rotate(-4deg); }
  4% { opacity: .38; }
  22% { opacity: .38; transform: translate(5vw, -12px) rotate(5deg); }
  27% { opacity: 0; transform: translate(8vw, -18px) rotate(6deg); }
  100% { opacity: 0; transform: translate(8vw, -18px) rotate(6deg); } }
@keyframes act-fall {
  0% { opacity: 0; transform: translate(0, -12vh) rotate(0); }
  2% { opacity: .55; }
  23% { opacity: .55; }
  26% { opacity: 0; transform: translate(4vw, 104vh) rotate(170deg); }
  100% { opacity: 0; transform: translate(4vw, 104vh) rotate(170deg); } }
@keyframes act-rise {
  0% { opacity: 0; transform: translate(0, 104vh); }
  2% { opacity: .42; }
  23% { opacity: .42; }
  26% { opacity: 0; transform: translate(3vw, -12vh); }
  100% { opacity: 0; transform: translate(3vw, -12vh); } }
@keyframes act-twinkle {
  0% { opacity: 0; transform: scale(.6); }
  10% { opacity: .55; transform: scale(1.1); }
  22% { opacity: 0; transform: scale(.7); }
  100% { opacity: 0; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .act-deco { display: none; } }

/* ---- I 10 TEMI (dal più sobrio al più festoso). Ogni tema: sfondo disegnato, palette, dorso delle carte, font, movimento. ---- */
/* default: Classico — carta avorio, serif elegante, per adulti */
.act { --act-bg: #f6f1e6; --act-ink: #2b2a26; --act-muted: #8a8478; --act-card: #fffdf6; --act-card-ink: #2b2a26;
  --act-line: #e0d8c6; --act-accent: #3d5a80; --act-accent-ink: #fff; --act-good: #2e7d4f; --act-bad: #b3402e;
  --act-back: linear-gradient(135deg, #ece3d0, #dcd0b6); --act-back-ink: #a89b7f;
  --act-display: 'Fraunces', Georgia, 'Times New Roman', serif; }
.act[data-theme="classic"] { box-shadow: inset 0 0 0 1px #e6ddc9, inset 0 0 0 7px var(--act-bg), inset 0 0 0 8px #d8cdb2; }

/* Quaderno — carta a righe, margine rosso, scrittura a mano: caldo e familiare per la scuola */
.act[data-theme="notebook"] { --act-ink: #24344a; --act-muted: #7d8aa0; --act-card: #ffffff; --act-card-ink: #24344a;
  --act-line: #c8d8ea; --act-accent: #2456c9; --act-accent-ink: #fff; --act-good: #2e7d4f; --act-bad: #c9302e;
  --act-back: repeating-linear-gradient(180deg, #fdfdf6 0 9px, #cfe0f0 9px 10px); --act-back-ink: #b3452f;
  --act-display: 'Caveat', 'Segoe Script', cursive;
  background:
    linear-gradient(90deg, transparent 0 56px, rgba(214,72,56,.55) 56px 58px, transparent 58px),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(90,150,205,.28) 33px 34.5px),
    #fdfdf6; }
.act[data-theme="notebook"] .act-title, .act[data-theme="notebook"] .quiz-q { font-size: clamp(28px, 4vw, 44px); }
.act[data-theme="notebook"] .act-stage { padding-left: clamp(70px, 8vw, 90px); }

/* Lavagna — verde ardesia, aloni di gesso, cornice di legno, scrittura a mano (sobria) */
.act[data-theme="blackboard"] { --act-ink: #f2f5f0; --act-muted: #b7c4b8; --act-card: #3a4f43; --act-card-ink: #f2f5f0;
  --act-line: rgba(255,255,255,.35); --act-accent: #f5d76e; --act-accent-ink: #33301c; --act-good: #8fd694; --act-bad: #ff9d8a;
  --act-back: linear-gradient(135deg, #3a4f43, #2e4038); --act-back-ink: #cfdacd;
  --act-display: 'Caveat', 'Segoe Script', cursive;
  border: 10px solid #7d5433; border-radius: 8px;
  background:
    radial-gradient(ellipse 340px 70px at 18% 88%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(ellipse 280px 60px at 74% 24%, rgba(255,255,255,.045), transparent 60%),
    radial-gradient(ellipse 200px 50px at 45% 55%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(160deg, #33473d, #2b3d34);
  box-shadow: inset 0 0 46px rgba(0,0,0,.4); }
.act[data-theme="blackboard"] .act-title, .act[data-theme="blackboard"] .quiz-q { letter-spacing: .4px; font-size: clamp(26px, 3.8vw, 42px); }
.act[data-theme="blackboard"] .mem-back, .act[data-theme="blackboard"] .mem-front, .act[data-theme="blackboard"] .quiz-opt, .act[data-theme="blackboard"] .ana-tile { border: 2px dashed rgba(255,255,255,.45); box-shadow: none; }
.act[data-theme="blackboard"] .act-stat { background: transparent; color: var(--act-ink); border: 1.5px dashed rgba(255,255,255,.4); }
.pop.vocab-act[data-theme="blackboard"] .mchip, .pop.vocab-act[data-theme="blackboard"] .flashcard .face { border-style: dashed; box-shadow: none; }

/* Caffè — crema e legno, tazzine discrete: caldo, adulto, da conversazione */
.act[data-theme="coffee"] { --act-ink: #3a2a1c; --act-muted: #93816e; --act-card: #fffaf1; --act-card-ink: #3a2a1c;
  --act-line: #e4d5be; --act-accent: #8a5a33; --act-accent-ink: #fff; --act-good: #5e7d3a; --act-bad: #b3402e;
  --act-back: linear-gradient(135deg, #a9764a, #7a5030); --act-back-ink: #f0e2cc;
  --act-display: 'Fraunces', Georgia, serif;
  background:
    radial-gradient(circle 150px at 88% 16%, rgba(138,90,51,.10), transparent 70%),
    radial-gradient(circle 110px at 8% 74%, rgba(138,90,51,.09), transparent 70%),
    radial-gradient(ellipse 130% 20% at 50% 108%, rgba(90,56,30,.28), transparent 62%),
    linear-gradient(165deg, #f2e8d6, #e9dcc4); }

/* Nero puro — nero vero, minimale, accento neon */
.act[data-theme="night"] { --act-bg: #000; --act-ink: #f2f2f6; --act-muted: #8f8f9c; --act-card: #141419; --act-card-ink: #f2f2f6;
  --act-line: #2a2a33; --act-accent: #38e07d; --act-accent-ink: #06130b; --act-good: #38e07d; --act-bad: #ff5a6a;
  --act-back: linear-gradient(135deg, #17171d, #0c0c10); --act-back-ink: #3c3c48;
  --act-display: 'Space Grotesk', var(--font); }
.act[data-theme="night"] .act-btn.primary { box-shadow: 0 0 14px rgba(56,224,125,.35); }

/* Gioco a premi — teatro TV: sipario bordeaux a pieghe, faretti dorati, pavimento lucido, serif da titolo. Fatto per il Quiz */
.act[data-theme="tvshow"] { --act-bg: #3a0d1c; --act-ink: #fff4dc; --act-muted: #d2a9b6; --act-card: #4f1226; --act-card-ink: #fff4dc;
  --act-line: #8a2f4d; --act-accent: #f3c545; --act-accent-ink: #2a1e05; --act-good: #62d68f; --act-bad: #ff7d6e;
  --act-back: linear-gradient(135deg, #6a1730, #3a0d1c); --act-back-ink: #f3c545;
  --act-display: 'Fraunces', Georgia, serif;
  background:
    conic-gradient(from 200deg at 8% -6%, transparent 0deg, rgba(243,197,69,.20) 12deg, transparent 26deg),
    conic-gradient(from 130deg at 92% -6%, transparent 0deg, rgba(243,197,69,.16) 12deg, transparent 26deg),
    radial-gradient(ellipse 120% 22% at 50% 106%, rgba(243,197,69,.26), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 6px, transparent 6px 34px, rgba(255,255,255,.035) 34px 40px),
    linear-gradient(175deg, #2a0813, #4a1023 62%, #5a1229); }
.act[data-theme="tvshow"] .quiz-opt, .act[data-theme="tvshow"] .mem-front, .act[data-theme="tvshow"] .ana-tile { box-shadow: 0 0 0 1.5px rgba(243,197,69,.45), 0 3px 10px rgba(0,0,0,.45); }
.act[data-theme="tvshow"] .act-stat.score { border-color: #f3c545; color: #f3c545; }
.act[data-theme="tvshow"] .act-title, .act[data-theme="tvshow"] .quiz-q { color: #f3c545; text-shadow: 0 2px 8px rgba(0,0,0,.45); }

/* Spazio — notte stellata (stelle fisse a tre profondità), viola cosmico, stelle che brillano */
.act[data-theme="space"] { --act-ink: #eceafc; --act-muted: #9a93c9; --act-card: #191a3f; --act-card-ink: #eceafc;
  --act-line: #35357a; --act-accent: #8f7bff; --act-accent-ink: #fff; --act-good: #35e0a1; --act-bad: #ff6a8a;
  --act-back: linear-gradient(135deg, #241a55, #14103a); --act-back-ink: #6a5fc9;
  --act-display: 'Space Grotesk', var(--font);
  background:
    radial-gradient(1.6px 1.6px at 22% 34%, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(1.4px 1.4px at 68% 14%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(1.8px 1.8px at 84% 62%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1.2px 1.2px at 38% 76%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1.3px 1.3px at 10% 60%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1.5px 1.5px at 55% 48%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(circle 260px at 82% -8%, rgba(143,123,255,.28), transparent 70%),
    linear-gradient(165deg, #0b1030, #1c1148 55%, #2a1560); }
.act[data-theme="space"] .mem-front, .act[data-theme="space"] .quiz-opt { box-shadow: 0 0 0 1px rgba(143,123,255,.25), 0 2px 8px rgba(0,0,0,.4); }

/* Neon retrò — tramonto synth, griglia luminosa sul pavimento, neon rosa e ciano */
.act[data-theme="synth"] { --act-ink: #f5eaff; --act-muted: #a58cc9; --act-card: #1c1038; --act-card-ink: #f5eaff;
  --act-line: #452a72; --act-accent: #ff3ec8; --act-accent-ink: #fff; --act-good: #29e6ff; --act-bad: #ff5a6a;
  --act-back: linear-gradient(135deg, #2a1454, #180b33); --act-back-ink: #ff3ec8;
  --act-display: 'Space Grotesk', var(--font);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,62,200,.16) 79px 80px),
    repeating-linear-gradient(180deg, transparent 0 26px, rgba(255,62,200,.2) 26px 27px),
    radial-gradient(circle 130px at 50% 30%, rgba(255,120,80,.55), rgba(255,62,200,.25) 60%, transparent 72%),
    linear-gradient(180deg, #12082b 0%, #1f0d40 45%, #3a1058 100%);
  background-size: 100% 34%, 100% 34%, 100% 100%, 100% 100%;
  background-position: left bottom, left bottom, center top, center top;
  background-repeat: no-repeat; }
.act[data-theme="synth"] .quiz-opt:hover, .act[data-theme="synth"] .ana-tile:hover { border-color: #29e6ff; }
.act[data-theme="synth"] .act-btn.primary { box-shadow: 0 0 16px rgba(255,62,200,.5); }

/* Oceano — profondità blu, raggio di luce, sabbia sul fondo, bolle che salgono */
.act[data-theme="ocean"] { --act-ink: #eef8fd; --act-muted: #9cc6d8; --act-card: #ffffff; --act-card-ink: #14424f;
  --act-line: #cfe6ee; --act-accent: #ff8c42; --act-accent-ink: #fff; --act-good: #1f9d7a; --act-bad: #e05252;
  --act-back: linear-gradient(160deg, #1493c9, #0b5c8f); --act-back-ink: #bfe8f7;
  --act-display: 'Nunito', var(--font);
  background:
    linear-gradient(115deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%),
    radial-gradient(ellipse 130% 26% at 50% 106%, rgba(232,215,166,.5), transparent 62%),
    linear-gradient(180deg, #0c86c8, #0a5a92 55%, #083d62); }

/* Giungla — verde fitto, fogliame agli angoli, pappagalli: avventura per i più giovani */
.act[data-theme="jungle"] { --act-ink: #eef7e8; --act-muted: #9dbf9c; --act-card: #fdf7e4; --act-card-ink: #2c4224;
  --act-line: #d8e0c0; --act-accent: #e8712e; --act-accent-ink: #fff; --act-good: #4fae4e; --act-bad: #d64545;
  --act-back: linear-gradient(135deg, #2e7040, #1d5028); --act-back-ink: #bfe3a8;
  --act-display: 'Nunito', var(--font);
  background:
    radial-gradient(ellipse 30% 22% at 4% 2%, rgba(120,200,110,.55), transparent 70%),
    radial-gradient(ellipse 26% 18% at 96% 4%, rgba(100,190,95,.5), transparent 70%),
    radial-gradient(ellipse 34% 20% at 102% 100%, rgba(110,195,100,.55), transparent 70%),
    radial-gradient(ellipse 30% 18% at -2% 98%, rgba(120,200,110,.5), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 120%, rgba(20,70,35,.9), transparent 70%),
    linear-gradient(165deg, #1b5a32, #14472a 60%, #0f3a20); }
.act[data-theme="jungle"] .quiz-opt, .act[data-theme="jungle"] .mem-front { box-shadow: 0 3px 0 rgba(0,0,0,.25); }

/* Primavera — pastelli, colline sul fondo, petali che cadono */
.act[data-theme="spring"] { --act-ink: #37474a; --act-muted: #85978f; --act-card: #ffffff; --act-card-ink: #37474a;
  --act-line: #e2eede; --act-accent: #e0559a; --act-accent-ink: #fff; --act-good: #3aa858; --act-bad: #d64545;
  --act-back: linear-gradient(135deg, #ffdff0, #d9f2d4); --act-back-ink: #c98cae;
  --act-display: 'Nunito', var(--font);
  background:
    radial-gradient(ellipse 90% 26% at 18% 106%, rgba(140,200,120,.35), transparent 65%),
    radial-gradient(ellipse 90% 22% at 86% 105%, rgba(120,190,110,.28), transparent 65%),
    linear-gradient(170deg, #f0fbe9, #fdf3f7 60%, #ffe9f2); }

/* Estate — cielo, sole, mare con le onde e la sabbia */
.act[data-theme="summer"] { --act-ink: #23404e; --act-muted: #6e8a96; --act-card: #ffffff; --act-card-ink: #23404e;
  --act-line: #d9e8ee; --act-accent: #ff7043; --act-accent-ink: #fff; --act-good: #1f9d63; --act-bad: #d64545;
  --act-back: linear-gradient(135deg, #ffd66b, #ff9e5c); --act-back-ink: #b06818;
  --act-display: 'Nunito', var(--font);
  background:
    radial-gradient(circle 110px at 84% 10%, rgba(255,214,80,.95), rgba(255,214,80,0) 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'><path d='M0 16 Q15 5 30 16 T60 16 T90 16 T120 16 V26 H0 Z' fill='%23ffffff' fill-opacity='.45'/></svg>") repeat-x left bottom 14% / 120px 24px,
    linear-gradient(180deg, #bfe9fb 0%, #cfeefb 52%, #59b8dd 62%, #7fcbe6 74%, #f6efd3 76%, #f3e3b8 100%); }

/* Autunno — ambra e ruggine, foglie che cadono, luce bassa */
.act[data-theme="autumn"] { --act-ink: #4a3624; --act-muted: #9c8467; --act-card: #fffaf0; --act-card-ink: #4a3624;
  --act-line: #e8d8be; --act-accent: #c65d2e; --act-accent-ink: #fff; --act-good: #6b8a2e; --act-bad: #b3402e;
  --act-back: linear-gradient(135deg, #d98a3d, #b35c28); --act-back-ink: #ffe9c9;
  --act-display: 'Fraunces', Georgia, serif;
  background:
    radial-gradient(ellipse 70% 36% at 50% -14%, rgba(232,170,80,.4), transparent 70%),
    radial-gradient(ellipse 130% 22% at 50% 108%, rgba(150,90,40,.30), transparent 62%),
    linear-gradient(170deg, #f7ead2, #f0dcb4 60%, #ecd2a4); }

/* Inverno — ghiaccio chiaro e quieto (niente rosso: non è Natale), neve leggera */
.act[data-theme="winter"] { --act-ink: #1e3c50; --act-muted: #7d9cb0; --act-card: #ffffff; --act-card-ink: #1e3c50;
  --act-line: #d0e4f0; --act-accent: #2a7fb8; --act-accent-ink: #fff; --act-good: #2e7d5a; --act-bad: #c9506a;
  --act-back: linear-gradient(135deg, #dceefb, #b8d9ee); --act-back-ink: #6da3c9;
  --act-display: 'Nunito', var(--font);
  background:
    radial-gradient(ellipse 140% 20% at 50% 108%, rgba(255,255,255,.9), transparent 62%),
    radial-gradient(circle 100px at 14% 12%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(180deg, #ddf0fb, #eaf6fd 55%, #f6fbff); }

/* Arcobaleno — pastelli in festa, dorso delle carte a spettro */
.act[data-theme="rainbow"] { --act-ink: #33304a; --act-muted: #8d88a8; --act-card: #ffffff; --act-card-ink: #33304a;
  --act-line: #e8e2f5; --act-accent: #7c4dff; --act-accent-ink: #fff; --act-good: #21a05f; --act-bad: #e04f5f;
  --act-back: linear-gradient(135deg, #ff8a8a, #ffc86b 30%, #7fd98a 55%, #6db3ff 80%, #b98aff); --act-back-ink: #ffffff;
  --act-display: 'Nunito', var(--font);
  background:
    radial-gradient(ellipse 70% 40% at 50% -18%, rgba(255,255,255,.75), transparent 70%),
    linear-gradient(160deg, #ffe9ec, #fff6dc 30%, #e7fbe9 55%, #e3f1ff 80%, #f3e8ff); }
.act[data-theme="rainbow"] .act-bar .fill { background: linear-gradient(90deg, #ff8a8a, #ffc86b, #7fd98a, #6db3ff, #b98aff); }

/* Caramelle — zucchero filato, pois, dorso a bastoncino di zucchero */
.act[data-theme="candy"] { --act-ink: #6a2c4e; --act-muted: #b98aa4; --act-card: #ffffff; --act-card-ink: #6a2c4e;
  --act-line: #f5d5e6; --act-accent: #ff4f9a; --act-accent-ink: #fff; --act-good: #35b96a; --act-bad: #e0455c;
  --act-back: repeating-linear-gradient(45deg, #ff9dc6 0 14px, #fff2f8 14px 28px); --act-back-ink: #d6488a;
  --act-display: 'Nunito', var(--font);
  background:
    radial-gradient(circle 5px at 12% 22%, rgba(255,255,255,.8) 42%, transparent 50%),
    radial-gradient(circle 4px at 78% 14%, rgba(255,255,255,.8) 42%, transparent 50%),
    radial-gradient(circle 5px at 88% 68%, rgba(255,255,255,.8) 42%, transparent 50%),
    radial-gradient(circle 4px at 30% 82%, rgba(255,255,255,.8) 42%, transparent 50%),
    radial-gradient(circle 5px at 55% 40%, rgba(255,255,255,.7) 42%, transparent 50%),
    radial-gradient(circle 4px at 8% 60%, rgba(255,255,255,.7) 42%, transparent 50%),
    linear-gradient(160deg, #ffd9ec, #ffe9f4 55%, #fde0ff); }
.act[data-theme="candy"] .act-btn.primary { border-radius: 999px; }

/* Halloween — notte viola, luna, zucca: festoso ma leggibile */
.act[data-theme="halloween"] { --act-ink: #f5ead9; --act-muted: #a893c2; --act-card: #241533; --act-card-ink: #f5ead9;
  --act-line: #45305e; --act-accent: #ff8c1a; --act-accent-ink: #241205; --act-good: #7ed957; --act-bad: #ff5a6a;
  --act-back: linear-gradient(135deg, #3a2054, #241233); --act-back-ink: #ff8c1a;
  --act-display: 'Fraunces', Georgia, serif;
  background:
    radial-gradient(circle 74px at 87% 24%, rgba(255,236,190,.9), rgba(255,236,190,.12) 60%, transparent 72%),
    radial-gradient(ellipse 130% 24% at 50% 108%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(170deg, #140a1e, #251238 60%, #31173f); }

/* Natale — abete, rosso e oro, neve che cade e neve a terra */
.act[data-theme="christmas"] { --act-ink: #f4efe2; --act-muted: #9ab5a0; --act-card: #fffaf0; --act-card-ink: #35261f;
  --act-line: #2c5238; --act-accent: #d6453d; --act-accent-ink: #fff; --act-good: #47c078; --act-bad: #ff7b6d;
  --act-back: linear-gradient(135deg, #b23a33, #8e2b26); --act-back-ink: #f0d488;
  --act-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  background:
    radial-gradient(ellipse 140% 22% at 50% 107%, rgba(255,255,255,.8), transparent 62%),
    radial-gradient(ellipse 60% 30% at 50% -12%, rgba(230,190,80,.16), transparent 70%),
    linear-gradient(180deg, #0f2a1a, #16371f); }
.act[data-theme="christmas"] .mem-back { box-shadow: inset 0 0 0 2px rgba(240,212,136,.5), 0 2px 6px rgba(0,0,0,.25); }

.act-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.act-title { font-family: var(--act-display); font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; letter-spacing: .2px; }
.act-stats { display: flex; gap: 8px; align-items: center; }
.act-stat { background: var(--act-card); color: var(--act-card-ink); border: 1px solid var(--act-line); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.act-stat.score { border-color: var(--act-accent); color: var(--act-accent); }
.act-stat.fire { border-color: #f0a12e; }
.act-bar { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--act-line) 60%, transparent); overflow: hidden; margin-bottom: 14px; }
.act-bar .fill { height: 100%; background: var(--act-accent); border-radius: 99px; transition: width .4s ease; }
.act-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.act-row.center { justify-content: center; }
.act-btn { border: 1px solid var(--act-line); background: var(--act-card); color: var(--act-card-ink); border-radius: 12px; padding: 10px 18px; font-weight: 700; }
.act-btn.primary { background: var(--act-accent); color: var(--act-accent-ink); border-color: transparent; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.act-btn.primary:hover { filter: brightness(1.06); background: var(--act-accent); }
.act-btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.act-btn.big { font-size: 20px; padding: 14px 30px; border-radius: 16px; }
.act-btn.ghost:hover { border-color: var(--act-accent); }
.act-link { border: none; background: none; color: var(--act-muted); text-decoration: underline; padding: 4px 8px; }
.act-check { display: inline-flex; align-items: center; gap: 6px; color: var(--act-muted); font-size: 14px; font-weight: 400; margin: 0; }
.act-feedback { font-weight: 700; color: var(--act-good); font-size: 18px; }
.act-invalid { padding: 20px; color: var(--bad); }
.act-end { text-align: center; margin: auto; padding: 30px 10px; }
.act-end-emoji { font-size: 64px; }
.act-end h2 { font-family: var(--act-display); font-size: clamp(26px, 4vw, 40px); margin: 8px 0 4px; }
.act-end-line { color: var(--act-muted); margin: 4px 0; font-size: 17px; }
.act-end .act-row { justify-content: center; margin-top: 18px; }

/* Memory: carte che si girano */
.mem-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: clamp(8px, 1.4vw, 14px); align-content: center; flex: 1; }
.mem-card { position: relative; border: none; background: none; padding: 0; aspect-ratio: 4 / 3; perspective: 700px; cursor: pointer; min-height: 74px; }
.mem-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.7,.25,1.1); }
.mem-card.up .mem-inner, .mem-card.done .mem-inner { transform: rotateY(180deg); }
.mem-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; }
.mem-back { background: var(--act-back); border: 1px solid var(--act-line); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.mem-back-mark { font-size: clamp(22px, 3.2vw, 34px); color: var(--act-back-ink); opacity: .9; }
.mem-card:hover .mem-back { filter: brightness(1.05); }
.mem-front { background: var(--act-card); color: var(--act-card-ink); border: 1px solid var(--act-line); transform: rotateY(180deg); box-shadow: 0 2px 6px rgba(0,0,0,.12); overflow: hidden; }
.mem-word { font-family: var(--act-display); font-weight: 700; font-size: clamp(15px, 2vw, 22px); text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.mem-front img { max-width: 100%; max-height: 100%; min-height: 0; flex: 1; object-fit: contain; border-radius: 8px; }
.mem-cap { font-size: 12px; color: var(--act-muted); margin-top: 2px; }
.mem-card.done { cursor: default; }
.mem-card.done .mem-front { border-color: var(--act-good); box-shadow: 0 0 0 2px color-mix(in srgb, var(--act-good) 45%, transparent), 0 2px 6px rgba(0,0,0,.12); animation: mem-pop .45s ease; }
@keyframes mem-pop { 0% { transform: rotateY(180deg) scale(1); } 45% { transform: rotateY(180deg) scale(1.07); } 100% { transform: rotateY(180deg) scale(1); } }
.mem-card.no .mem-inner { animation: slot-shake .35s ease; }

/* Quiz: domanda grande e risposte-carta */
.quiz-q { font-family: var(--act-display); font-size: clamp(22px, 3.4vw, 36px); font-weight: 700; line-height: 1.25; margin: auto 0; padding: 3vh 0; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
@media (max-width: 640px) { .quiz-opts { grid-template-columns: 1fr; } }
.quiz-opt { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--act-card); color: var(--act-card-ink); border: 1px solid var(--act-line);
  border-radius: 14px; padding: 14px 16px; font-size: clamp(16px, 1.8vw, 20px); font-weight: 600; box-shadow: 0 2px 0 rgba(0,0,0,.10); transition: transform .12s ease; }
.quiz-opt:hover { transform: translateY(-2px); border-color: var(--act-accent); background: var(--act-card); }
.quiz-opt .mark { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.quiz-opt.o0 .mark { background: #e05252; } .quiz-opt.o1 .mark { background: #3d7fe8; } .quiz-opt.o2 .mark { background: #e8a33d; } .quiz-opt.o3 .mark { background: #3dae6b; }
.quiz-opts.shown .quiz-opt { pointer-events: none; }
.quiz-opts.shown .quiz-opt:not(.good):not(.picked) { opacity: .45; }
.quiz-opt.good { border-color: var(--act-good); box-shadow: 0 0 0 2px color-mix(in srgb, var(--act-good) 50%, transparent); }
.quiz-opt.good .mark { background: var(--act-good); }
.quiz-opt.bad { border-color: var(--act-bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--act-bad) 45%, transparent); animation: slot-shake .35s ease; }
.quiz-opt.bad .mark { background: var(--act-bad); }

/* Anagramma: tessere e caselle */
.ana-body { display: flex; flex-direction: column; margin: auto 0; }
.ana-hint { color: var(--act-muted); font-size: clamp(16px, 2vw, 20px); margin: 2px 0 12px; }
.ana-img { text-align: center; margin-bottom: 10px; }
.ana-img img { max-height: 140px; border-radius: 10px; }
.ana-slots { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 18px; cursor: pointer; }
.ana-slot { width: clamp(34px, 4.6vw, 50px); height: clamp(44px, 5.8vw, 62px); border-bottom: 3px solid var(--act-line); border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--act-card) 55%, transparent); display: flex; align-items: center; justify-content: center;
  font-family: var(--act-display); font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--act-card-ink); }
.ana-slot.full { border-bottom-color: var(--act-accent); background: var(--act-card); }
.ana-slot.space { border: none; background: none; width: clamp(14px, 2vw, 24px); }
.ana-slots.good .ana-slot { border-bottom-color: var(--act-good); box-shadow: 0 3px 0 -1px color-mix(in srgb, var(--act-good) 50%, transparent); }
.ana-slots.no { animation: slot-shake .35s ease; }
.ana-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.ana-tile { width: clamp(40px, 5vw, 56px); height: clamp(48px, 6vw, 64px); border-radius: 10px; border: 1px solid var(--act-line);
  background: var(--act-card); color: var(--act-card-ink); font-family: var(--act-display); font-size: clamp(22px, 3vw, 32px); font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.ana-tile:hover { border-color: var(--act-accent); transform: translateY(-2px); background: var(--act-card); }
.ana-tile.used { opacity: .25; pointer-events: none; transform: none; }

/* Ruota della fortuna */
.wheel-wrap { position: relative; width: min(64vmin, 380px); margin: 6px auto 0; }
.wheel { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--act-card); box-shadow: 0 4px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.08); position: relative; }
.wheel-label { position: absolute; inset: 0; display: flex; justify-content: center; pointer-events: none; }
.wheel-label span { margin-top: 12px; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); max-width: 40%; text-align: center; overflow-wrap: anywhere; }
.wheel-pin { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 26px; color: var(--act-ink); text-shadow: 0 2px 3px rgba(0,0,0,.25); }
.wheel-card { margin-top: 16px; background: var(--act-card); color: var(--act-card-ink); border: 1px solid var(--act-line); border-radius: 14px; padding: 18px; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.wheel-pick { font-family: var(--act-display); font-size: clamp(20px, 3vw, 30px); font-weight: 700; line-height: 1.3; }

/* Attività: portfolio, editor e player */
.act-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.act-type-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; }
.act-type-grid .em { font-size: 30px; }
.act-type-grid b { font-size: 16px; }
.act-type-grid .hint { margin: 0; }
/* anteprime dei template: un Quiz vero reso in scala (tp-wrap ritaglia, tp-scale è 900×620 ridotto) */
.tp-wrap { position: relative; overflow: hidden; border-radius: 10px; pointer-events: none; background: #eceff3; }
.tp-scale { position: absolute; left: 0; top: 0; width: 900px; height: 620px; transform-origin: 0 0; }
.tp-scale > .act { height: 620px; min-height: 620px; border-radius: 0; }
.theme-preview { position: fixed; z-index: 70; display: none; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 38px rgba(0,0,0,.24); pointer-events: none; }
.theme-preview.show { display: block; animation: tp-in .16s ease; }
@keyframes tp-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
#dlg-act-new { width: min(94vw, 880px); max-width: 880px; }
#an-types[hidden], #an-themes[hidden], #an-back[hidden] { display: none; }
.an-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-height: 62vh; overflow: auto; padding: 2px 6px 6px 2px; margin-top: 10px; }
@media (max-width: 720px) { .an-theme-grid { grid-template-columns: 1fr 1fr; } }
.an-theme { border: 2px solid transparent; border-radius: 12px; padding: 4px 4px 6px; cursor: pointer; background: #fff; text-align: left; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.an-theme:hover, .an-theme:focus-visible { border-color: var(--accent); background: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.an-theme .tp-wrap { margin: 0 auto; }
.an-theme .lbl { font-weight: 600; font-size: 14px; padding: 0 4px; text-align: center; }
.theme-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; background: #fff; font-weight: 600; font-size: 14px; }
.theme-chip .sw { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }
.theme-chip.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31, 111, 235, .25); }
/* 🎨 cambio template al volo, dentro la scena: pulsante discreto nell'angolo + pannellino con i chip */
.act-theme-btn { position: absolute; top: 10px; right: 10px; z-index: 5; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.88); color: #222; font-size: 17px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.18); opacity: .55; transition: opacity .15s, transform .15s; font-family: var(--font); }
.act-theme-btn:hover, .act-theme-btn.open, .act-theme-btn:focus-visible { opacity: 1; transform: scale(1.06); }
.act-theme-pop { position: absolute; top: 50px; right: 10px; z-index: 6; width: min(430px, calc(100% - 20px)); max-height: calc(100% - 60px); overflow: auto; background: #fff; color: #222; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-family: var(--font); text-align: left; }
.act-theme-pop[hidden] { display: none; }
.act-theme-pop .hint { margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.act-theme-pop .chips { gap: 6px; }
.act-theme-pop .theme-chip { font-size: 13px; padding: 4px 9px 4px 5px; color: #222; }
.act-theme-pop .theme-chip .sw { width: 15px; height: 15px; }
.pop.vocab-act > .act-theme-btn { top: auto; bottom: 12px; }
.pop.vocab-act > .act-theme-pop { top: auto; bottom: 54px; }
.ap-stage .act { min-height: min(76vh, 720px); }
.at-stage { width: min(92vw, 900px); }
.at-stage .act { min-height: min(72vh, 620px); }
#dlg-act-try { max-width: none; }
.af-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px 8px; margin-top: 8px; align-items: center; }
.af-row.one { grid-template-columns: 1fr auto; }
.af-row .num { color: var(--muted); font-size: 13px; }
.af-quiz { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.af-quiz .qrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.af-quiz .orow { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.af-quiz .orow input[type=radio] { width: auto; }
/* domande e risposte: caselle che crescono col testo, niente frasi tagliate a metà */
textarea.af-in { min-height: 0; resize: none; overflow: hidden; line-height: 1.45; padding: 7px 10px; }
textarea.af-in.q { font-weight: 600; min-height: 60px; }   /* parte già da due righe: le domande lunghe non nascono tagliate */
.af-quiz .qrow, .af-quiz .orow, .af-row { align-items: start; }
.af-quiz .orow input[type=radio] { margin-top: 12px; }
.af-quiz .orow.ai { grid-template-columns: auto 1fr auto; }
.af-quiz .regen { padding: 3px 8px; font-size: 13px; white-space: nowrap; }
.af-quiz .regen:disabled { opacity: .6; }
.af-quiz input.flash-in { animation: field-flash 1.2s ease-out; }
@keyframes field-flash { 0% { background: #fff3cf; } 100% { background: #fff; } }
.lesson-card .thumb.act-thumb { display: flex; align-items: center; justify-content: center; font-size: 44px; background: var(--chip); }

/* Schede delle Parole utili (abbinamento, flashcards) vestite con il template: il pannello dello studente diventa .act.vocab-act */
.stage.docked .pop.vocab-act { display: block; min-height: 0; border-radius: 0; overflow: auto; font-family: var(--font); isolation: isolate; }
.pop.vocab-act > .act-deco, .pop.vocab-act > .act-props { z-index: -1; }   /* sotto il contenuto, sopra lo sfondo del pannello (isolation) */
.vocab-wrap { display: flex; flex-direction: column; padding: 0 clamp(0px, 6%, 72px); }   /* niente min-height:100%: sommata al padding del pannello faceva sforare di qualche pixel (e i pulsanti finivano sotto) */   /* NON posizionato: l'intestazione assoluta resta relativa al pannello; margini = cornice per gli elementi del tema */
.pop.vocab-act > .act-props { top: 40px; }   /* sotto la riga del titolo */
.pop.vocab-act .ex-head h3.ex-title { color: var(--act-ink); font-family: var(--act-display); }
.pop.vocab-act .ex-head h3.ex-title .sub, .pop.vocab-act .instr, .pop.vocab-act .hint, .pop.vocab-act .flashcard .tr { color: var(--act-muted); }
.pop.vocab-act .badge { background: var(--act-card); color: var(--act-card-ink); border: 1px solid var(--act-line); }
.pop.vocab-act .mchip { background: var(--act-card); color: var(--act-card-ink); border-color: var(--act-line); font-family: var(--act-display); box-shadow: 0 2px 0 rgba(0,0,0,.10); }
.pop.vocab-act .mchip:hover { border-color: var(--act-accent); }
.pop.vocab-act .mchip.sel { border-color: var(--act-accent); background: color-mix(in srgb, var(--act-accent) 16%, var(--act-card)); }
.pop.vocab-act .mchip.good { border-color: var(--act-good); background: color-mix(in srgb, var(--act-good) 16%, var(--act-card)); color: var(--act-card-ink); }
.pop.vocab-act .mchip.wrongpick { border-color: var(--act-bad); background: color-mix(in srgb, var(--act-bad) 16%, var(--act-card)); }
.pop.vocab-act .mpair .link { background: var(--act-good); }
.pop.vocab-act .flashcard .face { background: var(--act-card); color: var(--act-card-ink); border-color: var(--act-line); }
.pop.vocab-act .flashcard .face.back { background: color-mix(in srgb, var(--act-accent) 10%, var(--act-card)); border-color: var(--act-accent); }
.pop.vocab-act .flashcard .word { font-family: var(--act-display); }
.pop.vocab-act button:not(.primary):not(.star):not(.link) { background: var(--act-card); color: var(--act-card-ink); border-color: var(--act-line); }
.pop.vocab-act button.primary { background: var(--act-accent); color: var(--act-accent-ink); border-color: transparent; }
.pop.vocab-act button.link { color: var(--act-muted); }
.pop.vocab-act input[type=text] { background: var(--act-card); color: var(--act-card-ink); border-color: var(--act-line); }
.pop.vocab-act .feedback { color: var(--act-good); }

/* Parliamone: quando (prima/dopo) e tipo di domanda */
.when-chip { padding: 4px 12px; font-size: 13px; }
.talk-meta { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.talk-meta .regen { padding: 2px 9px; font-size: 13px; }
.talk-row .kind { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: #fff; cursor: pointer; }
.talk-row .kind.none { border-style: dashed; }
.talk-row .kind.check { color: #7a4e00; border-color: #f0c766; background: #fff3cf; }
.talk-row .kind.talk { color: #1f5e9e; border-color: #b9d3f2; background: #e6f0ff; }
.talk-row .kind.warmup { color: #5a3d8f; border-color: #cbbcee; background: #f2ecff; cursor: default; }
.talk-row .kind:not(.warmup):hover { filter: brightness(.96); }

/* editor lungo: "↑ In alto" e la card raggiunta dalla struttura si illumina un istante */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: none; padding: 10px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.18); background: #fff; font-weight: 600; }
.to-top.show { display: block; }
.flash-card { animation: card-flash 1.2s ease; }
@keyframes card-flash { 0% { box-shadow: 0 0 0 0 rgba(31,111,235,.0); } 20% { box-shadow: 0 0 0 4px rgba(31,111,235,.45); } 100% { box-shadow: 0 0 0 0 rgba(31,111,235,0); } }
#e-flow .flow-chip button.txt { border: none; background: none; padding: 0 2px; font: inherit; font-weight: 600; cursor: pointer; color: inherit; border-radius: 6px; }
#e-flow .flow-chip button.txt:hover { text-decoration: underline; background: none; }

/* Struttura della lezione: sezioni in ordine, spostabili con ◀ ▶ attorno al video */
#e-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.flow-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--chip); padding: 4px 8px; font-size: 14px; font-weight: 600; }
.flow-chip.video { background: #e7f0ff; border-color: #bcd3f7; }
.flow-chip .txt { padding: 0 2px; white-space: nowrap; }
.flow-chip button.small { padding: 1px 7px; font-size: 13px; border-radius: 999px; }
.flow-sep { color: var(--muted); font-size: 13px; }

/* ---------- CONVERSAZIONE: editor dell'unità ---------- */
.conv-thumb { background: linear-gradient(135deg, #2f6fb0, #4a90d9); }
.conv-card { margin-top: 12px; }
.conv-row { gap: 6px; align-items: center; }
.conv-vocab .conv-row { margin-bottom: 4px; }
.conv-q { border-top: 1px solid var(--line); padding: 8px 0; }
.conv-q:first-child { border-top: 0; }
.conv-q .qn { min-width: 22px; font-weight: 700; color: var(--muted); }
.conv-q textarea.af-in.q { flex: 1 1 auto; min-width: 0; }
.conv-chart, .conv-text, .conv-photo { border-top: 1px solid var(--line); padding: 10px 0; }
.conv-chart:first-child, .conv-text:first-child, .conv-photo:first-child { border-top: 0; }
.conv-chart-rows { margin: 6px 0 6px 12px; }
.conv-text textarea.af-in { width: 100%; margin-top: 6px; }
.conv-photo { display: flex; gap: 10px; align-items: flex-start; }
.conv-photo .thumbimg { width: 120px; height: 80px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f6f7f9; }
.conv-photo .thumbimg img { width: 100%; height: 100%; object-fit: cover; }
.conv-photo .row { margin-bottom: 6px; }
button.small.ai { background: #f3e8ff; border-color: #c99cf5; }

/* ---------- CONVERSAZIONE: il foglio A4 ---------- */
/* Misure in mm: la pagina è la stessa a schermo e in stampa, così l'anteprima non mente. */
.cp-sheet { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cp-page {
  width: 210mm; min-height: 297mm; padding: 14mm 13mm 10mm; box-sizing: border-box;
  background: #fff; color: #1a2330; position: relative;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 9.4pt; line-height: 1.42;
  box-shadow: 0 2px 14px rgba(0,0,0,.16); display: flex; flex-direction: column;
}
.cp-head { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid #4a90d9; padding-bottom: 5px; margin-bottom: 8px; }
.cp-num { background: #4a90d9; color: #fff; font-weight: 700; font-size: 15pt; line-height: 1; padding: 3px 8px; border-radius: 3px; }
.cp-num.sm { font-size: 9pt; padding: 2px 6px; }
.cp-head h1 { margin: 0; font-size: 16pt; font-weight: 700; color: #2f6fb0; }
.cp-lvl { font-size: 8pt; color: #7b8794; white-space: nowrap; }
.cp-lvl b { color: #2f6fb0; }
.cp-cols { display: grid; grid-template-columns: 57mm 1fr; gap: 6.5mm; flex: 1 1 auto; }
.cp-left > * { margin-bottom: 4.5mm; }
.cp-box { border: 1px solid #d7e3ef; border-radius: 3px; overflow: hidden; }
.cp-box-h { background: #4a90d9; color: #fff; font-weight: 600; font-size: 8.6pt; padding: 4px 8px; }
.cp-vocab { margin: 0; padding: 6px 7px 7px 15px; background: #f5f9fd; list-style: none; }
.cp-vocab li { font-style: italic; color: #2f4a63; margin-bottom: 1.6px; font-size: 8.2pt; line-height: 1.32; }
.cp-chart { border: 1px solid #d7e3ef; border-radius: 3px; padding: 0 0 6px; }
.cp-chart-h { background: #eaf2fa; padding: 4px 7px; text-align: center; font-size: 8pt; color: #2f4a63; }
.cp-chart-h b { display: block; font-size: 8.4pt; line-height: 1.25; }
.cp-ref { color: #7b8794; font-style: italic; }
.cp-rows { padding: 5px 7px 0; }
.cp-row { display: grid; grid-template-columns: 1fr 14mm 7mm; gap: 4px; align-items: center; margin-bottom: 2.6px; font-size: 7.4pt; }
.cp-row .lb { color: #2f4a63; line-height: 1.18; }
.cp-row .bar { background: #e6edf4; border-radius: 6px; height: 8px; display: block; overflow: hidden; }
.cp-row .bar i { display: block; height: 100%; background: #4a90d9; border-radius: 6px; }
.cp-row .pc { text-align: right; font-weight: 700; color: #2f6fb0; font-size: 7.6pt; }
.cp-note { margin: 5px 8px 0; font-size: 6.4pt; color: #9aa5b1; font-style: italic; line-height: 1.3; }
.cp-qref { font-size: .85em; color: #667; white-space: nowrap; }
.cp-quote {background: #eaf2fa; border-radius: 3px; padding: 8px 9px; }
.cp-quote p { margin: 0 0 4px; font-style: italic; font-size: 9.2pt; color: #2f4a63; font-weight: 500; line-height: 1.35; }
.cp-src { font-size: 7.4pt; color: #7b8794; display: block; text-align: right; }
.cp-right { min-width: 0; }
.cp-photo { margin: 0 0 3.4mm; }
.cp-photo img { width: 100%; height: 13.7em; object-fit: cover; border-radius: 3px; display: block; }
.cp-photo.side img { width: 18.5em; height: 12em; }
.cp-q { margin: 0 0 4mm; padding-left: 7mm; }
.cp-q li { margin-bottom: 2.8mm; padding-left: 1.5mm; }
.cp-q li::marker { font-weight: 700; color: #2f6fb0; }
.cp-band { display: flex; align-items: center; gap: 7px; background: #4a90d9; color: #fff; padding: 4px 9px; border-radius: 3px; margin-bottom: 6mm; font-size: 9pt; }
.cp-band .cp-num { background: rgba(255,255,255,.25); }
.cp-role { display: flex; gap: 6mm; align-items: flex-start; margin-bottom: 7mm; }
.cp-role-txt { display: flex; gap: 3mm; flex: 1 1 auto; min-width: 0; }
.cp-role-txt p { margin: 0 0 3mm; }
.cp-role-n { font-weight: 700; color: #2f6fb0; }
.cp-steps { margin: 0; padding-left: 5mm; list-style: none; }
.cp-steps li { margin-bottom: 2mm; position: relative; }
.cp-steps li::before { content: '\25C6'; color: #4a90d9; position: absolute; left: -5mm; font-size: 7pt; top: 1px; }
.cp-text { margin-bottom: 6mm; }
.cp-th { display: flex; align-items: baseline; gap: 5px; margin-bottom: 1mm; }
.cp-th b { font-size: 11.5pt; color: #1a2330; }
.cp-tn { background: #2f6fb0; color: #fff; border-radius: 50%; width: 13px; height: 13px; font-size: 7pt; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cp-who { font-size: 7.8pt; font-style: italic; color: #7b8794; margin-bottom: 2.5mm; }
.cp-body { column-count: 2; column-gap: 6mm; text-align: justify; hyphens: auto; }
.cp-body p { margin: 0 0 2.4mm; }
.cp-text.article { display: flex; gap: 4mm; }
.cp-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3mm; background: #4a90d9; border-radius: 3px; padding: 5px 4px; color: #fff; }
.cp-vert { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 11pt; letter-spacing: .3px; }
.cp-tab .cp-tn { background: rgba(255,255,255,.3); }
.cp-text.article .cp-body { flex: 1 1 auto; min-width: 0; }
.cp-disc { font-size: 6.8pt; color: #9aa5b1; font-style: italic; border-top: 1px solid #e6edf4; padding-top: 2mm; margin-top: auto; }
.cp-foot { display: flex; gap: 6px; font-size: 7.2pt; color: #9aa5b1; border-top: 1px solid #e6edf4; padding-top: 2mm; margin-top: 4mm; }

@media print {
  @page { size: A4; margin: 0; }
  /* anche l'HTML, non solo il body: il colore dell'elemento radice e' quello che Chrome stende su TUTTA la carta,
     e il bianco del body copre solo il suo riquadro. Senza questa riga l'ultima pagina esce grigia sotto il testo. */
  html, body { background: #fff; }
  .noprint, #nav, #toast, #undo-bar, .app-bar { display: none !important; }
  body > main, #view-convprint { margin: 0; padding: 0; max-width: none; }
  .view:not(.active) { display: none !important; }
  .cp-sheet { gap: 0; display: block; }
  .cp-page { box-shadow: none; margin: 0; page-break-after: always; break-after: page; }
  .cp-page:last-child { page-break-after: auto; break-after: auto; }
  .cp-photo, .cp-chart, .cp-box, .cp-role, .cp-text { break-inside: avoid; }
}
.cp-page.cp-tight { outline: 2px dashed #d94a4a; }
button.small.warn { background: #fff1c2; border-color: #f5c400; color: #7a5a00; font-weight: 600; }

/* Esercizio "controllato": il salvataggio e' automatico, il verde dice che ci hai messo le mani tu.
   Si spegne da solo se il contenuto cambia (Rigenera, Altra frase, testo riscritto): va rimesso guardandolo. */
.ex-card.reviewed { background: #f4fbf6; border-color: #b7e4c7; }
.ex-card.rules.reviewed, .ex-card.ai.reviewed { border-left-color: #57b47e; }
.ex-card.reviewed .num { background: #2e9e5b; }
button.small.ok { background: #e6f6ea; border-color: #7fc99a; color: #17663a; font-weight: 600; }

/* Controllo delle traduzioni delle parole utili: proposte, mai applicate da sole */
.vocab-warn { margin-top: 8px; }
.vw-row { border-top: 1px solid rgba(0,0,0,.08); padding: 7px 0; }
.vw-row:first-of-type { border-top: 0; }
.vw-row .badge.bad { background: #ffe1e1; color: #a11; }
.notice.warn { background: #fff8e6; border: 1px solid #f0d089; border-radius: var(--radius); padding: 10px 12px; }

/* Traduci con la bandiera della lingua scelta + elenco delle lingue */
.tr-wrap { position: relative; display: inline-flex; }
.tr-wrap .tr-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tr-wrap .tr-pick { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-left: 7px; padding-right: 7px; }
/* Posizione e altezza vengono ricalcolate in JS sul viewport (v67): ancorato al pulsante finiva dietro il video. */
.tr-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 1000; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-height: 320px; overflow: auto; align-content: start; }
.tr-opt { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; white-space: nowrap; text-align: left; }
.tr-opt:hover { background: var(--chip); }
.tr-opt.on { background: #e8f0fe; font-weight: 700; }
.tr-opt .fl { font-size: 17px; }

/* Aiuto di "parola in più / parola sbagliata": segna una ZONA che lampeggia, non la parola */
.chip.zone { background: #fff3d0; border-color: #f0c469; box-shadow: inset 0 -2px 0 0 #f5c400; }
/* La stessa zona gialla sulle PAROLE della frase (v67, aiuto in tre stadi di "trova la parola mancante") */
.w.zone { display: inline-block; background: #fff3d0; box-shadow: inset 0 -2px 0 0 #f5c400; border-radius: 6px; padding: 0 .12em; }
.w.zone-flash { animation: zone-blink .42s ease-in-out 4; }
/* Il chip CLICCATO dentro la zona dell'aiuto deve mostrarsi selezionato (v66) e con un contrasto NETTO col giallo
   della zona (v67, 'troppo poco contrasto sulla parola Che'): arancione pieno, testo scuro in grassetto. */
.chip.zone.sel { background: var(--marker); border-color: #b35c00; color: #3a2200; font-weight: 700; box-shadow: none; }
.chip.zone-flash { animation: zone-blink .42s ease-in-out 4; }
@keyframes zone-blink { 0%,100% { background: #fff3d0; } 50% { background: #ffd873; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .chip.zone-flash { animation: none; } }

/* Foto delle schede: si ingrandisce al CLIC (l'hover restava aperto e copriva le parole).
   I blocchi con la foto e quelli con la parola hanno la stessa altezza: la riga e' una griglia. */
.back.zoomable { position: relative; cursor: zoom-in; }
.back .zoom-hint { position: absolute; right: 4px; bottom: 3px; font-size: 10px; line-height: 1; color: #33475b; background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.12); border-radius: 999px; padding: 4px 8px; white-space: nowrap; cursor: zoom-in; pointer-events: auto; z-index: 2;
  font-family: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.back .zoom-hint:hover { background: #fff; color: #0b1b2b; }
.rowh-tiny .back .zoom-hint { padding: 2px 5px; font-size: 11px; }
.rowh-tiny .back .zoom-hint .lbl { display: none; }
.mpair .mchip .zoom-hint { pointer-events: auto; }   /* la coppia è chiusa, ma la foto si può ancora guardare */
/* i blocchi con la foto e quelli con la parola hanno la stessa altezza */
.match .col .mchip { height: var(--rowh, 56px); box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
/* la ✕ dell'ingrandimento: bianca con ombra scura, leggibile su qualunque foto e su qualunque tema */
.img-preview .img-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.9); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.img-preview .img-x:hover { background: rgba(0,0,0,.78); }

/* ---------- SFIDA IN CLASSE (v68) ---------- */
.soon.new { background: #e7f6ec; color: #1c7c3e; }
.chal-cols { display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .chal-cols { grid-template-columns: 1fr; } }
.chal-join { text-align: center; }
.chal-qr { max-width: 400px; margin: 0 auto; }
.chal-qr svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.chal-pin-lbl { margin-top: 8px; color: var(--muted, #667); font-size: 13px; letter-spacing: .2em; }
.chal-pin { font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: .18em; margin: 2px 0 6px; }
.chal-board { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.chal-row { display: grid; grid-template-columns: 2.4em 1fr minmax(60px, 180px) auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.chal-row .rk { font-weight: 800; text-align: center; }
.chal-row .nick { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chal-row .bar { height: 8px; border-radius: 99px; background: var(--chip, #eef2f7); overflow: hidden; }
.chal-row .bar i { display: block; height: 100%; background: var(--accent, #1f6feb); border-radius: 99px; transition: width .4s; }
.chal-row .pts { font-weight: 700; white-space: nowrap; }
.chal-row.done { background: #f4fbf6; border-color: #bfe3c8; }
.chal-row.final { grid-template-columns: 2.4em 1fr auto auto; }
.chal-row.final .sub { color: var(--muted, #667); font-size: 13px; }
.chal-row.final.top { background: #fff8e6; border-color: #f0d78a; }
.chal-row.final.me { outline: 2px solid var(--accent, #1f6feb); }
/* telefono dello studente */
body.view-chalplay { background: #f4f6fa; }
.chp-wrap { max-width: 620px; margin: 0 auto; padding: 10px; }
.chp-join { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 18px; text-align: center; margin-top: 8vh; }
.chp-logo { font-weight: 800; color: var(--accent, #1f6feb); letter-spacing: .02em; }
.chp-join input { width: 100%; max-width: 320px; font-size: 18px; text-align: center; padding: 10px; margin: 14px auto 10px; display: block; }
.chp-join .primary.big { font-size: 17px; padding: 12px 22px; }
.chp-stage { min-height: 72vh; }
.chp-stage .act { min-height: 72vh; }
.chp-status { text-align: center; margin-top: 8px; padding: 8px; color: var(--muted, #667); font-size: 14px; }
.chp-final { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 14px; margin-top: 4vh; display: flex; flex-direction: column; gap: 6px; }
.chp-final h2 { text-align: center; margin: 0 0 8px; }
.chp-me { text-align: center; font-size: 18px; font-weight: 700; margin: 10px 0 0; }

/* ---------- SFIDA v69: due modalita', set multi-tipo ---------- */
.chal-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .chal-modes { grid-template-columns: 1fr; } }
.chal-mode { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; }
.chal-mode:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,111,235,.18); }
.chal-mode input { margin-top: 3px; }
.chal-thumb { font-size: 34px; }
.cs-items { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cs-item { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.cs-item .kind { font-weight: 700; white-space: nowrap; }
.cs-item .txt { color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* schermo proiettato */
.chal-clock { font-size: 26px; font-weight: 800; min-width: 70px; text-align: right; }
.chal-clock.low { color: #e5484d; }
.chal-qbox { padding: 8px 6px 2px; }
.chal-screen .instr { font-size: 16px; }
.chal-q { font-size: clamp(22px, 3.2vw, 40px); font-weight: 700; line-height: 1.45; margin: 12px 0; }
.chal-mcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.chal-mcopt { display: flex; gap: 10px; align-items: center; border-radius: 12px; padding: 14px 16px; font-size: clamp(17px, 2vw, 26px); font-weight: 600; color: #fff; }
.chal-mcopt .lt, .chp-mc .lt { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.25); font-weight: 800; flex: 0 0 auto; }
.chal-mcopt.o0, .chp-mc.o0 { background: #e21b3c; }
.chal-mcopt.o1, .chp-mc.o1 { background: #1368ce; }
.chal-mcopt.o2, .chp-mc.o2 { background: #d89e00; }
.chal-mcopt.o3, .chp-mc.o3 { background: #26890c; }
.chal-bank .chip { font-size: 19px; padding: 8px 14px; }
.chal-sol { text-align: center; margin: 14px 0; }
.chal-sol .lbl { color: var(--muted, #667); letter-spacing: .15em; font-size: 13px; }
.chal-sol .val { font-size: clamp(22px, 3vw, 36px); font-weight: 800; color: var(--ok, #1c7c3e); }
.chal-top5 { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.chal-matchcols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: clamp(18px, 2.2vw, 28px); }
.chal-mrow { padding: 6px 4px; font-weight: 600; }
/* telefono */
.chp-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 8px; }
.chp-q { font-size: 17px; font-weight: 600; line-height: 1.5; margin-bottom: 10px; }
.chp-mcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chp-mc { border: none; border-radius: 12px; min-height: 64px; color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; padding: 10px; cursor: pointer; }
.chp-mc .tx { text-align: left; }
.chp-mc.sel { outline: 4px solid #111; }
.chp-gap { width: 100%; font-size: 17px; padding: 10px; margin-top: 8px; }
.chp-bank { margin-top: 10px; }
.chp-bank .chip, .chp-words .chip { font-size: 16px; padding: 8px 12px; }
.chp-words .chip.sel { background: var(--marker); border-color: #b35c00; color: #3a2200; font-weight: 700; }
.chp-missline { line-height: 2.2; }
.chp-w { margin: 0 1px; font-size: 16px; }
.chp-slot { border: 1px dashed var(--line); background: #f6f8fb; border-radius: 6px; width: 22px; height: 26px; font-size: 12px; color: #99a3b0; padding: 0; cursor: pointer; vertical-align: middle; }
.chp-slot.sel { background: var(--marker); color: #fff; border-color: #b35c00; width: 30px; }
.chp-matchcols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chp-mleft, .chp-mright { display: flex; justify-content: space-between; gap: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 10px; font-size: 15px; text-align: left; cursor: pointer; }
.chp-mleft.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,111,235,.2); }
.chp-mleft .tag { font-weight: 800; color: var(--accent); }
.chp-mright.used { opacity: .45; }
.chp-send { width: 100%; margin-top: 12px; font-size: 17px; padding: 12px; }
.chp-reveal { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 14px; margin-top: 10px; }
.chp-reveal .big { font-size: 24px; font-weight: 800; }
.chp-reveal.ok .big { color: var(--ok, #1c7c3e); }
.chp-reveal.no .big { color: #e5484d; }
.chp-reveal .sol { margin-top: 8px; color: #444; }
.chp-reveal .pos { margin-top: 10px; font-weight: 700; }
.chp-stage2 { min-height: 60vh; }

/* ---------- v70: esercizi da una foto o screenshot ---------- */
.ig-previews { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ig-previews img { max-height: 110px; max-width: 160px; border-radius: 8px; border: 1px solid var(--line); }
.ig-out { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.ig-row { display: flex; gap: 8px; align-items: baseline; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.ig-row .kind { font-weight: 700; white-space: nowrap; }
.ig-row .txt { color: #444; font-size: 14px; }

/* ---------- v71: import nel set con ricerca, una card per lezione, niente doppioni ---------- */
dialog.wide { max-width: 720px; }
.ci-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.ci-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ci-title { font-weight: 700; margin-bottom: 6px; }
.ci-rows { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ci-row { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 14px; }
.ci-row.done { color: var(--muted, #667); }
.ci-preview { margin-top: 6px; }
.ci-preview summary { color: var(--accent, #1f6feb); font-size: 13px; cursor: pointer; }
.ci-line { font-size: 13px; color: #444; padding: 3px 0 3px 10px; border-left: 2px solid var(--line); margin-top: 3px; }
.ci-line.done { color: #99a3b0; text-decoration: line-through; }

/* ---------- v72: genera dalla trascrizione (card import), tessere scramble, modifica item ---------- */
.ci-gen { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ci-gen .lbl { font-size: 13px; font-weight: 700; color: #6b46c1; }
.ci-krow { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0; }
.ci-krow label { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; cursor: pointer; }
.ci-gen .row select { padding: 4px 6px; }
.ci-gmsg { font-size: 13px; margin-top: 4px; }
/* schermo del prof: tessere della frase da riordinare, nell'ordine mescolato pubblico */
.chal-tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.chal-tile { background: #fff; border: 2px solid #6b46c1; color: #333; border-radius: 12px; padding: 10px 16px; font-size: clamp(18px, 3.2vw, 30px); font-weight: 700; }
/* telefono: banca di tessere + riga della risposta componibile */
.chp-scrans { min-height: 52px; border: 2px dashed var(--line); border-radius: 12px; padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; background: #fafbfc; }
.chp-scrhint { color: #99a3b0; font-size: 14px; }
.chp-scrbank { display: flex; flex-wrap: wrap; gap: 8px; }
.chp-tile { border: 2px solid #6b46c1; background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
.chp-tile:disabled { opacity: .35; cursor: default; }
.chp-tile.inans { border-color: var(--accent, #1f6feb); background: #eef4ff; }

/* ---------- v73: tour di benvenuto + "?" in alto ---------- */
#btn-tour.qmark { width: 34px; padding: 8px 0; border-radius: 50%; font-weight: 800; }
#dlg-tour { max-width: 640px; width: calc(100vw - 40px); }
#dlg-tour h2 { margin-top: 0; }
.tour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tour-mini { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.tour-mini .ico { font-size: 26px; }
.tour-mini span:last-child { font-size: 13px; color: #566; }
.tour-step { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; }
.tour-step i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--accent, #1f6feb); color: #fff; font-style: normal; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tour-step span { padding-top: 3px; }
.tour-cta { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.tour-cta button { font-size: 16px; padding: 12px; }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
#tour-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line); margin: 0 3px; }
#tour-dots i.on { background: var(--accent, #1f6feb); }
@media (max-width: 560px) { .tour-grid { grid-template-columns: 1fr; } }

/* v74: la card del bookmarklet si illumina quando ci si arriva dal tour */
#bookmarklet-card.spot { outline: 3px solid var(--marker, #f6a821); outline-offset: 3px; transition: outline-color .4s; }

/* ---------- v76: contatore parole sul gap, ✕ sulla casella del semplificato ---------- */
.gwrap { position: relative; display: inline-block; vertical-align: baseline; }
.counts .gwrap { padding-top: 16px; }
.gcount { position: absolute; top: 1px; left: 4px; font-size: 10.5px; color: #8a94a3; white-space: nowrap; letter-spacing: .02em; pointer-events: none; user-select: none; }
.gclear { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #667; font-size: 10px; line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 2; }
.gclear:hover { background: #feecec; color: #c0392b; border-color: #e8a2a2; }
input.gap[readonly] { cursor: pointer; caret-color: transparent; }
/* v78: recap Soluzioni nell'editor — lista grande e leggibile, a tutto schermo */
/* v97 (Edoardo: "voglio che il pop up delle soluzioni sia più largo così alcune frasi che sono su due righe
   diventano di una riga e si risparmia in altezza"): serve anche max-width, altrimenti vince il 560px della
   regola generale `dialog` (la larghezza dell'id non batte un max-width che l'id non dichiara). */
#dlg-solutions { width: min(1280px, 96vw); max-width: min(1280px, 96vw); }

/* v98: foglio delle Soluzioni da stampare. Sullo schermo non esiste; in stampa e' l'UNICA cosa che resta.
   I margini li fa il padding, perche' la @page dell'app e' gia' a margin: 0 per il foglio A4 della conversazione. */
#print-area { display: none; }
.pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10mm; }
.pr-head-txt { min-width: 0; }
.pr-logo { width: 16mm; height: 16mm; flex: 0 0 auto; }
.pr-kicker { font-size: 9pt; letter-spacing: .18em; text-transform: uppercase; color: #6b7684; }
.pr-title { font-size: 20pt; margin: 1mm 0 2mm; }
.pr-sub { font-size: 9pt; color: #6b7684; margin-bottom: 6mm; }
@media print {
  body.printing > *:not(#print-area) { display: none !important; }
  /* niente padding qui: i margini di OGNI pagina li da' la @page che printSolutions inietta durante la stampa
     (il padding di un blocco lungo vale solo sulla prima e sull'ultima pagina, e le pagine in mezzo restavano
     senza margine, con la prima riga tagliata a meta') */
  body.printing #print-area { display: block; color: #111; }
  body.printing #print-area .sol-row { break-inside: avoid; page-break-inside: avoid; }
  body.printing #print-area .pr-head { break-after: avoid; page-break-after: avoid; }
  body.printing #print-area .sol-sent { orphans: 2; widows: 2; }
  /* sulla carta si sta piu' stretti che a schermo: stessa resa, meno fogli da stampare */
  body.printing #print-area .sol-row { padding: 2.6mm 0; }
  body.printing #print-area .sol-sent { font-size: 11pt; line-height: 1.38; }
  body.printing #print-area .sol-head { font-size: 8pt; margin-bottom: 1mm; }
}
.sol-row { padding: 12px 4px; border-bottom: 1px solid var(--line); }
.sol-row:last-child { border-bottom: 0; }
.sol-head { font-size: 13px; color: var(--muted); letter-spacing: .02em; margin-bottom: 4px; }
.sol-sent { font-size: 18px; line-height: 1.5; }
.sol-sent .sol-hit { background: #d8f5df; color: #14682c; font-weight: 700; border-radius: 4px; padding: 0 3px; }
.sol-sent .sol-strike { color: #c0392b; text-decoration: line-through; text-decoration-thickness: 2px; }
.sol-sent .sol-fix { color: var(--ok); font-weight: 700; }
.theme-chip.more { border-style: dashed; color: var(--muted); }
.theme-chip.more:hover { color: var(--ink); }
/* v83: espulsione dalla sfida — ✕ a due passi sulla riga della classifica */
.chal-row:not(.final) { grid-template-columns: 2.4em 1fr minmax(60px, 180px) auto auto; }
.chal-kick { padding: 2px 8px; font-size: 12px; border-radius: 8px; color: var(--muted); border-color: var(--line); background: #fff; }
.chal-kick:hover { color: #c0392b; border-color: #e8a2a2; background: #feecec; }
.chal-kick.arm { color: #fff; background: var(--bad); border-color: var(--bad); font-weight: 700; }