:root {
  --color-primary: #7c3aed;
  --color-text: #18181b;
  --color-gray-bg: #f5f5f5;
  --header-height: 64px;
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  /* Variabili richieste da assets/shared/richEditor.css (vendorizzato da
     CiaoSchoolPackage, non toccato) ma non definite altrove nel design
     system di questo CMS — mappate sugli equivalenti più vicini già
     esistenti. Vedi anche l'override per il tema Notte più sotto. */
  --border-strong: #d4d4d8;
  --surface: #ffffff;
  --surface-alt: var(--color-gray-bg);
  --teal-600: var(--color-primary);
  --teal-700: color-mix(in srgb, var(--color-primary) 80%, black);
  --text-body: var(--color-text);
  --white: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  font-family: var(--font-base);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--header-bg, #fff);
  border-bottom: 1px solid #eee;
  z-index: 1000;
  transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--header-font, var(--font-base));
  color: var(--header-text, var(--color-text));
}
.site-header.hide { transform: translateY(-100%); }

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
}
.brand-logo { height: 32px; width: auto; }

.hamburger {
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; color: var(--header-text, var(--color-text));
}
.hamburger .icon-open { display: none; }
.hamburger .icon-closed { display: flex; }
.hamburger.open .icon-open { display: flex; }
.hamburger.open .icon-closed { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang-switch { display: flex; align-items: center; gap: 1px; font-size: .8rem; font-weight: 700; }
.lang-switch a {
  text-decoration: none; color: var(--header-text, var(--color-text)); opacity: .4; padding: 4px 5px;
  transition: opacity .15s ease, color .15s ease;
}
.lang-switch a:hover { opacity: .75; }
.lang-switch a.active { opacity: 1; color: var(--color-primary); }

.edit-page-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.edit-page-fab:hover { transform: scale(1.08); }

.menu-panel {
  color: var(--header-text, var(--color-text));
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  width: 100%;
  /* Nessuna altezza fissa: le voci vanno a capo su più righe se non
     entrano tutte in una (flex-wrap:wrap su .menu-panel ul), il pannello
     cresce di conseguenza. Quando invece entrano in una sola riga, il
     pannello risulta comunque alto esattamente come .site-header — non per
     un valore hardcoded qui, ma perché .menu-panel-inner ha
     min-height:var(--header-height) e centra il contenuto al suo interno
     (stessa idea di .header-inner), quindi una singola riga più bassa di
     quel minimo non aggiunge mai altezza in più.
     Niente overflow qui (né -y né -x): qualunque valore diverso da "visible"
     ritaglierebbe anche .menu-submenu, la colonna a comparsa delle
     sotto-pagine, che deve poter sporgere sotto il pannello — un ancestor
     con overflow non-visible ritaglia i discendenti a prescindere dal loro
     position:absolute (bug reale trovato provando l'hover sulle sotto-pagine
     con il vecchio max-height:80vh/overflow-y:auto). */
  background: var(--header-bg, #fff);
  font-family: var(--header-font, var(--font-base));
  z-index: 999;
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
  /* Stesso meccanismo di scomparsa/comparsa della barra in alto
     (.site-header.hide, stesse durata/curva): un semplice slide via
     transform, non un'espansione di altezza/opacità. */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear .45s;
}
.menu-panel.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear;
}
/* Quando l'header si nasconde scorrendo (.site-header.hide) e il pannello è
   aperto, lo si sposta della stessa altezza dell'header (non del proprio
   -100%, molto più alto) così segue la barra invece di restare fermo: il
   pannello, ancorato con top:var(--header-height), finisce esattamente a
   top:0 colmando lo spazio lasciato libero. */
.menu-panel.open.hide { transform: translateY(calc(-1 * var(--header-height))); }
.menu-panel-inner { max-width: 960px; margin: 0 auto; padding: 0 20px; min-height: var(--header-height); display: flex; align-items: center; }
.menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.menu-panel li { display: flex; }
.menu-panel li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  color: var(--header-text, var(--color-text));
  transition: background .15s ease, color .15s ease;
}
.menu-panel li a:hover { background: var(--color-gray-bg); color: var(--color-primary); }
/* Separatore verticale, non a tutta larghezza: le voci (pagine, link
   esterni, admin, social) restano tutte sulla stessa riga finché c'è
   spazio, andando a capo solo quando necessario (flex-wrap su .menu-panel ul). */
.menu-divider { align-self: stretch; width: 1px; background: #e5e5e5; margin: 6px 4px; }

/* Icone social a colori (social_icon_svg()): il badge arrotondato è già
   dipinto dentro l'SVG stesso col colore ufficiale della piattaforma, qui
   serve solo azzerare il padding testuale del link e dare un feedback al
   passaggio del mouse. */
.menu-panel li a.menu-icon-link {
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.menu-panel li a.menu-icon-link:hover { background: none; transform: scale(1.08); }

/* Sotto-pagine (pages.parent_id): la voce del genitore mostra una
   piccola freccia accanto al link; passandoci sopra (desktop) o toccandola
   (mobile, via assets/js/main.js che aggiunge/rimuove .open) appare una
   colonna con le sotto-pagine, sganciata dal flusso della riga (position:
   absolute) così non cambia mai l'altezza del pannello menu. */
.menu-has-children { position: relative; }
.menu-submenu-toggle {
  background: none; border: none; cursor: pointer; padding: 4px; margin-left: -4px;
  display: flex; align-items: center; color: inherit; border-radius: 6px;
  transition: transform .15s ease, background .15s ease;
}
.menu-submenu-toggle:hover { background: var(--color-gray-bg); }
.menu-has-children:hover .menu-submenu-toggle,
.menu-has-children.open .menu-submenu-toggle { transform: rotate(180deg); }
.menu-submenu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  min-width: 190px; background: var(--header-bg, #fff); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16); z-index: 1001;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.menu-has-children:hover .menu-submenu,
.menu-has-children.open .menu-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear;
}
.menu-submenu li { display: block; }
.menu-submenu li a {
  display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  color: var(--header-text, var(--color-text));
  transition: background .15s ease, color .15s ease;
}
.menu-submenu li a:hover { background: var(--color-gray-bg); color: var(--color-primary); }

main { padding-top: var(--header-height); min-height: 60vh; }

/* ---------- Lettura facilitata (assets/js/accessibility.js) ---------- */
/* Solo <main> viene ingrandito/spaziato (non header/footer, a differenza
   del progetto originale che aveva un unico wrapper .app-shell da
   ridimensionare tutto insieme): "zoom" ridimensiona l'intero sotto-albero
   (rem compresi) senza toccare la larghezza della pagina, a differenza di
   font-size che qui non avrebbe effetto sui discendenti (già in rem,
   relativi alla root, non a main). */
main { zoom: var(--a11y-font-scale, 1); }
html.cms-a11y-spacing main,
html.cms-a11y-spacing main * {
  letter-spacing: 0.04em !important;
  word-spacing: 0.14em !important;
  line-height: 1.85 !important;
}

/* Temi colore: cambiano solo lo sfondo di base bianco/grigio chiaro,
   header, footer e colore del testo — MAI i riquadri con uno sfondo
   colore/sfumato scelto a mano dall'insegnante nel builder (che restano
   come progettati, decisione presa esplicitamente con l'utente). */
html[data-a11y-theme="cream"] body { background: #fdf6e3 !important; }
html[data-a11y-theme="cream"] .site-header,
html[data-a11y-theme="cream"] .block.bg-white,
html[data-a11y-theme="cream"] .menu-panel { background: #fdf6e3 !important; }
html[data-a11y-theme="cream"] .block.bg-gray { background: #f5ecd7 !important; }
html[data-a11y-theme="cream"] body,
html[data-a11y-theme="cream"] .site-footer { color: #4a3f2b !important; }

html[data-a11y-theme="blue"] body { background: #eef3fb !important; }
html[data-a11y-theme="blue"] .site-header,
html[data-a11y-theme="blue"] .block.bg-white,
html[data-a11y-theme="blue"] .menu-panel { background: #eef3fb !important; }
html[data-a11y-theme="blue"] .block.bg-gray { background: #e2ebf7 !important; }
html[data-a11y-theme="blue"] body,
html[data-a11y-theme="blue"] .site-footer { color: #1f2937 !important; }

/* Copertura del pannello admin per Crema/Azzurro (12/08/2026, stesso bug
   segnalato per "contrast" — vedi la nota più sotto — ma qui mai notato
   perché il nero è più eclatante): stesso set di selettori di
   html[data-a11y-theme="contrast"] qui sotto, con la palette chiara di
   ciascun tema presa dai token di CiaoSchoolPackage (app.css,
   html[data-a11y-theme="cream"/"blue"], --surface/--surface-sunken/
   --surface-alt/--border/--text-muted) invece del nero. */
html[data-a11y-theme="cream"] .admin-card { background: #fdf6e3 !important; border-color: #e0d3ae !important; }
html[data-a11y-theme="cream"] .admin-table th { color: #7a6c50 !important; border-bottom-color: #e0d3ae !important; }
html[data-a11y-theme="cream"] .admin-table td { border-bottom-color: #f5ecd7 !important; }
html[data-a11y-theme="cream"] .admin-lang-switch a { color: #7a6c50 !important; }
html[data-a11y-theme="cream"] .admin-lang-switch a:hover { background: #f5ecd7 !important; color: #4a3f2b !important; }
html[data-a11y-theme="cream"] .admin-lang-switch a.active { background: #fdf6e3 !important; }
html[data-a11y-theme="cream"] .form-row input[type=text],
html[data-a11y-theme="cream"] .form-row input[type=password],
html[data-a11y-theme="cream"] .form-row input[type=email],
html[data-a11y-theme="cream"] .form-row input[type=url],
html[data-a11y-theme="cream"] .form-row input[type=number],
html[data-a11y-theme="cream"] .form-row input[type=file],
html[data-a11y-theme="cream"] .form-row textarea,
html[data-a11y-theme="cream"] .form-row select,
html[data-a11y-theme="cream"] .cms-color-hex {
  background: #f8f0dd !important; border-color: #e0d3ae !important; color: #4a3f2b !important;
}
html[data-a11y-theme="cream"] .pill-option { border-color: #e0d3ae !important; color: #4a3f2b !important; }
html[data-a11y-theme="cream"] .settings-divider { border-top-color: #e0d3ae !important; }
html[data-a11y-theme="cream"] .settings-provider-card { background: #f5ecd7 !important; }
html[data-a11y-theme="cream"] .settings-section-title,
html[data-a11y-theme="cream"] .settings-hint { color: #7a6c50 !important; }
html[data-a11y-theme="cream"] .btn-admin.secondary { background: #f5ecd7 !important; color: #4a3f2b !important; }
html[data-a11y-theme="cream"] .share-url-input { background: #f8f0dd !important; border-color: #e0d3ae !important; color: #4a3f2b !important; }

html[data-a11y-theme="blue"] .admin-card { background: #eef3fb !important; border-color: #c9d8ee !important; }
html[data-a11y-theme="blue"] .admin-table th { color: #55648e !important; border-bottom-color: #c9d8ee !important; }
html[data-a11y-theme="blue"] .admin-table td { border-bottom-color: #e2ebf7 !important; }
html[data-a11y-theme="blue"] .admin-lang-switch a { color: #55648e !important; }
html[data-a11y-theme="blue"] .admin-lang-switch a:hover { background: #e2ebf7 !important; color: #1f2937 !important; }
html[data-a11y-theme="blue"] .admin-lang-switch a.active { background: #eef3fb !important; }
html[data-a11y-theme="blue"] .form-row input[type=text],
html[data-a11y-theme="blue"] .form-row input[type=password],
html[data-a11y-theme="blue"] .form-row input[type=email],
html[data-a11y-theme="blue"] .form-row input[type=url],
html[data-a11y-theme="blue"] .form-row input[type=number],
html[data-a11y-theme="blue"] .form-row input[type=file],
html[data-a11y-theme="blue"] .form-row textarea,
html[data-a11y-theme="blue"] .form-row select,
html[data-a11y-theme="blue"] .cms-color-hex {
  background: #e8eff8 !important; border-color: #c9d8ee !important; color: #1f2937 !important;
}
html[data-a11y-theme="blue"] .pill-option { border-color: #c9d8ee !important; color: #1f2937 !important; }
html[data-a11y-theme="blue"] .settings-divider { border-top-color: #c9d8ee !important; }
html[data-a11y-theme="blue"] .settings-provider-card { background: #e2ebf7 !important; }
html[data-a11y-theme="blue"] .settings-section-title,
html[data-a11y-theme="blue"] .settings-hint { color: #55648e !important; }
html[data-a11y-theme="blue"] .btn-admin.secondary { background: #e2ebf7 !important; color: #1f2937 !important; }
html[data-a11y-theme="blue"] .share-url-input { background: #e8eff8 !important; border-color: #c9d8ee !important; color: #1f2937 !important; }

html[data-a11y-theme="contrast"] body { background: #000 !important; }
html[data-a11y-theme="contrast"] .site-header,
html[data-a11y-theme="contrast"] .block.bg-white,
html[data-a11y-theme="contrast"] .menu-panel { background: #000 !important; }
html[data-a11y-theme="contrast"] .block.bg-gray { background: #1a1a1a !important; }
html[data-a11y-theme="contrast"] body,
html[data-a11y-theme="contrast"] .block.bg-white,
html[data-a11y-theme="contrast"] .block.bg-gray,
html[data-a11y-theme="contrast"] .site-header,
html[data-a11y-theme="contrast"] .site-footer,
html[data-a11y-theme="contrast"] .menu-panel,
html[data-a11y-theme="contrast"] .brand-name,
html[data-a11y-theme="contrast"] .menu-panel li a { color: #e5e7eb !important; }

/* Tema di lettura facilitata "alto contrasto" esteso al pannello admin
   (12/08/2026, bug reale segnalato: l'utente attivava il tema nero su una
   pagina admin, es. Pagine, e i riquadri restavano a sfondo bianco) — le
   regole sopra coprivano solo le classi del SITO PUBBLICO (.block.bg-white/
   .block.bg-gray/.site-header/.menu-panel), mai .admin-card/.admin-table/i
   campi form, dato che accessibility.js viene caricato anche dalle pagine
   admin (admin/_footer.php) ma nessuna regola a11y le aveva mai considerate.
   Stesso set di selettori del tema Notte del sito più sotto, ma con una
   palette DELIBERATAMENTE diversa (vedi CiaoSchoolPackage, app.css,
   html[data-theme="dark"] vs html[data-a11y-theme="contrast"]): questo
   tema deve restare visivamente distinguibile dalla Notte, non un suo
   duplicato — nero vero (#000/#1a1a1a) invece del blu-ardesia scuro della
   Notte, e bordo/testo attenuato quasi bianco (#d1d5db, non un grigio medio)
   perché lo scopo dichiarato di questo tema è il MASSIMO contrasto, non
   un'estetica "dark mode" morbida. Due bug reali corretti nello stesso
   passaggio: alcune regole (.ai-generate-box, .ai-generate-chat-*) erano
   scritte come selettore condiviso `html[data-theme="night"] X,
   html[data-a11y-theme="contrast"] X { ... }` — un'unica dichiarazione
   quindi FORZAVA gli stessi identici colori su entrambi i temi, il vero
   motivo per cui sembravano indistinguibili. */
html[data-a11y-theme="contrast"] .admin-card { background: #1a1a1a !important; border-color: #d1d5db !important; }
html[data-a11y-theme="contrast"] .admin-table th { color: #d1d5db !important; border-bottom-color: #d1d5db !important; }
html[data-a11y-theme="contrast"] .admin-table td { border-bottom-color: #262626 !important; }
html[data-a11y-theme="contrast"] .admin-lang-switch a { color: #d1d5db !important; }
html[data-a11y-theme="contrast"] .admin-lang-switch a:hover { background: #262626 !important; color: #e5e7eb !important; }
html[data-a11y-theme="contrast"] .admin-lang-switch a.active { background: #1a1a1a !important; }
html[data-a11y-theme="contrast"] .form-row input[type=text],
html[data-a11y-theme="contrast"] .form-row input[type=password],
html[data-a11y-theme="contrast"] .form-row input[type=email],
html[data-a11y-theme="contrast"] .form-row input[type=url],
html[data-a11y-theme="contrast"] .form-row input[type=number],
html[data-a11y-theme="contrast"] .form-row input[type=file],
html[data-a11y-theme="contrast"] .form-row textarea,
html[data-a11y-theme="contrast"] .form-row select,
html[data-a11y-theme="contrast"] .cms-color-hex {
  background: #000 !important; border-color: #d1d5db !important; color: #e5e7eb !important;
}
html[data-a11y-theme="contrast"] .pill-option { border-color: #d1d5db !important; color: #e5e7eb !important; }
html[data-a11y-theme="contrast"] .settings-divider { border-top-color: #d1d5db !important; }
html[data-a11y-theme="contrast"] .settings-provider-card { background: #1a1a1a !important; }
html[data-a11y-theme="contrast"] .settings-section-title,
html[data-a11y-theme="contrast"] .settings-hint { color: #d1d5db !important; }
html[data-a11y-theme="contrast"] .btn-admin.secondary { background: #262626 !important; color: #e5e7eb !important; }
html[data-a11y-theme="contrast"] .share-url-input { background: #000 !important; border-color: #d1d5db !important; color: #e5e7eb !important; }

/* Tema Notte del sito (Impostazioni → Aspetto, un'unica scelta dell'admin
   per tutti i visitatori — non un interruttore lato visitatore come i temi
   di lettura facilitata sopra): stessa filosofia, cambia solo lo sfondo di
   base/testo/riquadri bianco-o-grigio di DEFAULT, mai un riquadro con
   colore/sfumato scelto a mano dall'admin nel builder. La barra/menu non
   serve un override qui: ha già il proprio sistema di colore configurabile
   (--header-bg/--header-text, vedi resolved_header_bg_color()), che sceglie
   da solo un default scuro in tema Notte finché l'admin non imposta un
   colore esplicito. **Palette blu-ardesia, non nero puro** (12/08/2026,
   bug reale segnalato — il tema Notte usava una famiglia di grigi
   quasi-neri indistinguibile a occhio dal tema di lettura facilitata "alto
   contrasto" sopra): riallineata a `html[data-theme="dark"]` di
   CiaoSchoolPackage (`app.css`, token `--surface`/`--surface-sunken`/
   `--surface-alt`/`--border-strong`/`--text-body`/`--text-muted`), che usa
   deliberatamente uno slate blu (`#0f172a`/`#1e293b`/`#334155`/`#475569`)
   invece del nero — la Notte resta "dark mode" morbida, il tema di lettura
   facilitata resta l'unico a puntare al massimo contrasto possibile
   (nero vero + testo/bordi quasi bianchi). */
html[data-theme="night"] body { background: #0f172a; color: #e2e8f0; }
html[data-theme="night"] .block.bg-white { background: #1e293b; }
html[data-theme="night"] .block.bg-gray { background: #334155; }
html[data-theme="night"] .block-col p { color: #c7c7cf; }
html[data-theme="night"] .site-footer { color: #94a3b8; }
html[data-theme="night"] .site-footer-links a { color: #94a3b8; }

/* Tema Notte esteso al pannello admin: su richiesta esplicita, il tema del
   sito non riguarda più solo le pagine pubbliche ma anche Impostazioni/
   Pagine/Prodotti/ecc. — stessa impostazione site_theme, stesso attributo
   data-theme sull'<html>, ora impostato anche da admin/_header.php (non più
   forzato sempre chiaro). Copre solo la "struttura" (sfondo, riquadri,
   bordi, testo), mai il contenuto scelto dall'admin nel builder. */
html[data-theme="night"] {
  /* Stesse variabili definite in :root per assets/shared/richEditor.css, ridefinite qui per il tema Notte. */
  --border-strong: #475569;
  --surface: #1e293b;
  --surface-alt: #334155;
  --text-body: #e2e8f0;
  --white: #1e293b;
}
html[data-theme="night"] .admin-card { background: #1e293b; border-color: #475569; }
html[data-theme="night"] .admin-table th { color: #94a3b8; border-bottom-color: #475569; }
html[data-theme="night"] .admin-table td { border-bottom-color: #334155; }
html[data-theme="night"] .admin-lang-switch a { color: #6b7280; }
html[data-theme="night"] .admin-lang-switch a:hover { background: #334155; color: #e2e8f0; }
html[data-theme="night"] .admin-lang-switch a.active { background: #334155; }
html[data-theme="night"] .form-row input[type=text],
html[data-theme="night"] .form-row input[type=password],
html[data-theme="night"] .form-row input[type=email],
html[data-theme="night"] .form-row input[type=url],
html[data-theme="night"] .form-row input[type=number],
html[data-theme="night"] .form-row input[type=file],
html[data-theme="night"] .form-row textarea,
html[data-theme="night"] .form-row select,
html[data-theme="night"] .cms-color-hex {
  background: #0f172a; border-color: #475569; color: #e2e8f0;
}
html[data-theme="night"] .pill-option { border-color: #475569; color: #e2e8f0; }
html[data-theme="night"] .settings-divider { border-top-color: #475569; }
html[data-theme="night"] .settings-provider-card { background: #334155; }
html[data-theme="night"] .settings-section-title,
html[data-theme="night"] .settings-hint { color: #94a3b8; }
html[data-theme="night"] .btn-admin.secondary { background: #334155; color: #e2e8f0; }
html[data-theme="night"] .flash { background: #0f2b20; color: #6ee7b7; }
html[data-theme="night"] .flash.error { background: #2b1414; color: #fca5a5; }
html[data-theme="night"] .login-page { background: #0f172a; }
html[data-theme="night"] .login-sitename { color: #e2e8f0; }

.a11y-toggle-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a11y-toggle-btn:hover { filter: brightness(0.9); }
.a11y-toggle-btn svg { width: 1.5rem; height: 1.5rem; }

.a11y-panel-title-icon { display: inline-flex; vertical-align: middle; width: 1.1rem; height: 1.1rem; margin-right: 0.3rem; }
.a11y-panel-title-icon svg { width: 100%; height: 100%; }

.a11y-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 4.75rem;
  width: 300px;
  max-width: calc(100vw - 2rem);
  max-height: 75vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  padding: 1rem;
  z-index: 900;
  display: none;
}
.a11y-panel.a11y-panel-open { display: block; }

.a11y-panel-title { font-weight: 700; font-size: 0.95rem; margin: 0 0 0.75rem; color: var(--color-text); display: flex; align-items: center; }
.a11y-panel-row { margin-bottom: 0.9rem; }
.a11y-panel-label { display: block; font-size: 0.78rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.4rem; }

.a11y-btn-group { display: flex; gap: 0.4rem; }
.a11y-btn {
  flex: 1;
  padding: 0.4rem 0.3rem;
  border: 1px solid #eee;
  border-radius: 6px;
  background: var(--color-gray-bg);
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.85rem;
}
.a11y-btn:hover { border-color: #ccc; }

.a11y-checkbox-option { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }

.a11y-swatches { display: flex; gap: 0.5rem; }
.a11y-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid #eee;
  cursor: pointer;
  padding: 0;
}
.a11y-swatch.a11y-swatch-active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }

.a11y-hint { font-size: 0.72rem; color: #888; margin: 0.3rem 0 0; }

.a11y-reset-link {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: #888;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* ---------- Riquadri (blocchi) ---------- */
.block {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.block.bg-gray { background: var(--color-gray-bg); }
.block.bg-white { background: #fff; }

/* Wrapper interno per la larghezza "stretta" facoltativa di un riquadro: lo
   sfondo (sopra) resta sempre a tutta larghezza, solo il contenuto si
   restringe — stesso schema di .site-header/.header-inner. */
.block-inner { display: flex; flex-wrap: wrap; width: 100%; }
.block-inner.narrow { max-width: 960px; margin: 0 auto; padding: 0 20px; }

.block-col {
  flex: 1 1 0;
  padding: 64px 40px;
  min-width: 280px;
}
.block.layout-1 .block-col { max-width: 960px; margin: 0 auto; }
/* Allineamento con la colonna centrale già stabilita altrove (Impostazioni,
   960px + 20px di padding, la stessa formula di .header-inner): il testo di
   un riquadro a colonna singola deve iniziare esattamente dove inizia il
   logo/nome scuola nella barra, non 40px più a destra come il padding di
   default di .block-col darebbe. In un riquadro "narrow" il wrapper
   (.block-inner.narrow) fornisce già quei 20px, quindi qui il padding va
   azzerato (altrimenti si sommerebbero); in un riquadro "full" (sfondo a
   piena larghezza) è .block-col stesso a doverli aggiungere. */
.block.layout-1 .block-inner.narrow .block-col { padding-left: 0; padding-right: 0; }
.block.layout-1 .block-inner:not(.narrow) .block-col { padding-left: 20px; padding-right: 20px; }
.block.layout-2 .block-col,
.block.layout-3 .block-col {
  display: flex;
  flex-direction: column;
  /* flex-start, non center: con "align-items: stretch" di default su
     .block-inner ogni colonna viene già allungata all'altezza della più
     alta della riga — centrare il contenuto AL SUO INTERNO sposta in basso
     le colonne con meno testo/un'immagine più bassa, disallineandole dalle
     altre invece di farle iniziare tutte allo stesso livello in alto. */
  justify-content: flex-start;
}

/* Riquadri a 3+ colonne (es. griglie prodotto): card più compatte e
   centrate come gruppo, invece di allargarsi a piena larghezza su schermi
   ampi — flex-basis fissa (non-growing) invece di flex:1 1 0. Il numero di
   colonne per riga che il flex-wrap sceglie dipende dal flex-basis
   "ipotetico" di ognuna, non dal min-width (il min-width entra in gioco
   solo DOPO che il browser ha già deciso quante ne stanno su una riga) —
   per questo layout-4/layout-5 hanno un basis più piccolo di layout-3,
   calibrato per stare in una riga anche dentro un riquadro "narrow" (960px,
   920px di contenuto): 4×210=840px e 5×165=825px, contro i 920 disponibili. */
.block.layout-3 .block-inner,
.block.layout-4 .block-inner,
.block.layout-5 .block-inner { justify-content: center; }
/* In un riquadro "narrow" (griglie prodotto tipiche del Negozio) la prima
   card deve iniziare dove inizia il logo nella barra e l'ultima finire dove
   finisce l'icona hamburger — spazia il gruppo sull'intera larghezza
   disponibile invece di centrarlo con margini simmetrici. Il caso "full"
   (sfondo a piena larghezza) resta invece centrato come gruppo: senza un
   riquadro "narrow" a definire un bordo di riferimento, spargere le card
   fino ai bordi del viewport sarebbe eccessivo. */
.block.layout-3 .block-inner.narrow,
.block.layout-4 .block-inner.narrow,
.block.layout-5 .block-inner.narrow { justify-content: space-between; }
.block.layout-3 .block-col,
.block.layout-4 .block-col,
.block.layout-5 .block-col {
  padding: 32px 24px;
}
.block.layout-3 .block-col { flex: 0 1 260px; min-width: 220px; }
.block.layout-4 .block-col { flex: 0 1 210px; min-width: 180px; }
.block.layout-5 .block-col { flex: 0 1 165px; min-width: 140px; }

.block-col h1, .block-col h2, .block-col h3 { margin: 24px 0 0; line-height: 1.2; }
.block-col > *:first-child { margin-top: 0; }
.block-col p { color: #444; }
.block-col img { border-radius: 12px; width: 100%; height: auto; object-fit: cover; }
.cms-image-link { display: block; transition: opacity .15s ease; }
.cms-image-link:hover { opacity: .88; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  margin-top: 12px;
}
/* Riquadri a 4/5 colonne sono griglie di card (es. prodotti in Negozio): un
   bottone a piena grandezza come nel resto del sito risulta sproporzionato
   in una card stretta, quindi solo qui il pulsante è più piccolo — non un
   nuovo tipo di elemento, stesso .btn, solo più compatto per contesto. */
.block.layout-4 .btn, .block.layout-5 .btn {
  padding: 8px 16px; font-size: .85rem; margin-top: 8px;
}

/* Modulo pubblico di richiesta informazioni (elemento "contact-form") */
.cms-contact-form { max-width: 420px; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cms-contact-form h3 { margin: 0 0 4px; }
.cms-contact-form .cf-row { display: flex; gap: 10px; }
.cms-contact-form .cf-row input { flex: 1; }
.cms-contact-form input[type="text"],
.cms-contact-form input[type="email"],
.cms-contact-form textarea {
  padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font: inherit; width: 100%; resize: vertical;
}
.cms-contact-form .cf-checkbox { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.cms-contact-form .cf-checkbox input { width: auto; }
.cms-contact-form button {
  align-self: flex-start; padding: 10px 20px; border: none; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-weight: 600; cursor: pointer;
}
.cms-contact-form .cf-hp,
.cms-booking-widget .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cms-contact-form .cf-msg { margin: 0; font-size: .85rem; }
.cms-contact-form .cf-msg.success { color: #15803d; }
.cms-contact-form .cf-msg.error { color: #b91c1c; }

/* Riga telefono (facoltativo) condivisa da contact-form e booking-widget:
   prefisso libero + popover di scelta rapida paese (assets/js/phone-picker.js). */
.cf-phone-row { display: flex; gap: 10px; }
.cf-phone-prefix-wrap { position: relative; flex: 0 0 92px; display: flex; align-items: center; }
.cf-phone-prefix, .cf-phone-number {
  padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font: inherit;
}
.cf-phone-prefix { width: 100%; padding-right: 26px; }
.cf-phone-country-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: #888; font-size: .7rem; padding: 2px; line-height: 1;
}
.cf-phone-number { flex: 1; width: auto; }
.cf-phone-country-popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: 260px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.cf-phone-country-popover[hidden] { display: none; }
/* Elenco di oltre 240 paesi: la ricerca resta visibile mentre l'elenco
   sottostante scorre (sticky, non dentro un secondo contenitore scrollabile). */
.cms-phone-country-search-wrap { position: sticky; top: 0; z-index: 1; background: #fff; padding: 6px 6px 0; }
.cms-phone-country-search {
  width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px;
  font: inherit; font-size: .85rem; box-sizing: border-box;
}
.cms-phone-country-list { display: flex; flex-direction: column; padding: 6px; }
.cms-phone-country-option {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border: none; background: none; border-radius: 6px;
  text-align: left; cursor: pointer; font: inherit; font-size: .85rem; color: var(--color-text);
}
.cms-phone-country-option:hover { background: var(--color-gray-bg); }
.cms-phone-country-option[hidden] { display: none; }
.cms-phone-country-prefix { color: #888; font-weight: 600; }

/* Widget pubblico di prenotazione lezione (elemento "booking-widget", solo generato da synth_product_blocks()) */
.cms-booking-widget { max-width: 420px; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cms-booking-widget .bk-date-label { font-weight: 600; font-size: .9rem; }
.bk-calendar { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
.bk-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bk-cal-month-label { font-weight: 600; font-size: .95rem; text-transform: capitalize; }
.bk-cal-nav {
  width: 30px; height: 30px; border: 1px solid #ddd; border-radius: 8px; background: #fff;
  cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--color-text);
}
.bk-cal-nav:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.bk-cal-nav:disabled { opacity: .35; cursor: default; }
.bk-cal-weekdays, .bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal-weekdays span { text-align: center; font-size: .75rem; color: #888; font-weight: 600; padding-bottom: 4px; }
.bk-cal-day {
  aspect-ratio: 1; border: none; border-radius: 8px; background: transparent; font: inherit; font-size: .85rem;
  color: var(--color-text);
}
.bk-cal-day.available { cursor: pointer; background: var(--color-gray-bg, #f5f5f5); font-weight: 600; }
.bk-cal-day.available:hover { background: var(--color-primary); color: #fff; }
.bk-cal-day.available.selected { background: var(--color-primary); color: #fff; }
.bk-cal-day.unavailable { color: #ccc; cursor: not-allowed; }
.bk-cal-day.is-today:not(.selected) { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.bk-cal-loading { grid-column: 1 / -1; text-align: center; color: #888; font-size: .8rem; padding: 20px 0; }
html[data-theme="night"] .bk-calendar { border-color: #475569; }
html[data-theme="night"] .bk-cal-nav { background: #1e293b; border-color: #475569; }
html[data-theme="night"] .bk-cal-day.available { background: #334155; }
html[data-theme="night"] .bk-cal-day.unavailable { color: #555; }
/* Stesso identico set del tema Notte sopra, per il tema di lettura
   facilitata "alto contrasto" (12/08/2026, stesso bug/fix già applicato
   al resto del pannello admin — vedi la nota più in alto su
   html[data-a11y-theme="contrast"]): senza queste righe il calendario
   generale di admin/bookings.php restava a sfondo bianco anche col tema
   nero attivo. */
html[data-a11y-theme="contrast"] .bk-calendar { border-color: #d1d5db !important; }
html[data-a11y-theme="contrast"] .bk-cal-nav { background: #1a1a1a !important; border-color: #d1d5db !important; color: #e5e7eb !important; }
html[data-a11y-theme="contrast"] .bk-cal-day { color: #e5e7eb !important; }
html[data-a11y-theme="contrast"] .bk-cal-day.available { background: #262626 !important; }
html[data-a11y-theme="contrast"] .bk-cal-day.unavailable { color: #555 !important; }
html[data-a11y-theme="cream"] .bk-calendar { border-color: #e0d3ae !important; }
html[data-a11y-theme="cream"] .bk-cal-nav { background: #fdf6e3 !important; border-color: #e0d3ae !important; color: #4a3f2b !important; }
html[data-a11y-theme="cream"] .bk-cal-day.available { background: #f5ecd7 !important; }
html[data-a11y-theme="blue"] .bk-calendar { border-color: #c9d8ee !important; }
html[data-a11y-theme="blue"] .bk-cal-nav { background: #eef3fb !important; border-color: #c9d8ee !important; color: #1f2937 !important; }
html[data-a11y-theme="blue"] .bk-cal-day.available { background: #e2ebf7 !important; }

/* Calendario dell'admin (admin/bookings.php): a differenza di quello
   pubblico sopra, ogni giorno è sempre cliccabile (serve per scegliere
   l'intervallo di date della nuova disponibilità, non solo per prenotare),
   quindi qui non esistono classi "unavailable"/disabled — solo tre stati
   che si possono sommare: regola esistente (verde), prenotazione esistente
   (rosso, ha priorità visiva sul verde), selezione in corso da salvare
   (anello del colore primario, sempre visibile sopra gli altri due). */
#avail-calendar .bk-cal-day { cursor: pointer; }
#avail-calendar .bk-cal-day:hover { background: var(--color-gray-bg, #f5f5f5); }
#avail-calendar .bk-cal-day.rule-available { background: #dcfce7; color: #166534; font-weight: 600; }
#avail-calendar .bk-cal-day.rule-occupied { background: #fee2e2; color: #991b1b; font-weight: 600; }
#avail-calendar .bk-cal-day.range-pick { box-shadow: inset 0 0 0 2px var(--color-primary); }
.cal-legend { display: flex; gap: 16px; margin-top: 10px; font-size: .8rem; flex-wrap: wrap; }
.cal-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 4px; vertical-align: middle; }
.cal-legend-dot.rule-available { background: #dcfce7; box-shadow: inset 0 0 0 1px #166534; }
.cal-legend-dot.rule-occupied { background: #fee2e2; box-shadow: inset 0 0 0 1px #991b1b; }
.cal-legend-dot.range-pick { background: transparent; box-shadow: inset 0 0 0 2px var(--color-primary); }
html[data-theme="night"] #avail-calendar .bk-cal-day:hover { background: #334155; }
html[data-theme="night"] #avail-calendar .bk-cal-day.rule-available { background: #14532d; color: #86efac; }
html[data-theme="night"] #avail-calendar .bk-cal-day.rule-occupied { background: #4c1d1d; color: #fca5a5; }
html[data-a11y-theme="contrast"] #avail-calendar .bk-cal-day:hover { background: #262626 !important; }
html[data-a11y-theme="cream"] #avail-calendar .bk-cal-day:hover { background: #f5ecd7 !important; }
html[data-a11y-theme="blue"] #avail-calendar .bk-cal-day:hover { background: #e2ebf7 !important; }
html[data-a11y-theme="contrast"] #avail-calendar .bk-cal-day.rule-available { background: #14532d !important; color: #86efac !important; }
html[data-a11y-theme="contrast"] #avail-calendar .bk-cal-day.rule-occupied { background: #4c1d1d !important; color: #fca5a5 !important; }

/* Anteprima prenotazioni (admin/bookings.php): a differenza di #avail-calendar
   (celle piccole, un solo colore/numero) qui ogni cella è più alta e ospita
   una mini-lista di "chip" prenotazione (orario + nome) — vista mese (griglia
   7 colonne come sopra) e vista settimana (7 colonne più larghe, una riga). */
.bk-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bk-preview-range-label { font-weight: 600; font-size: .95rem; text-transform: capitalize; }
.bk-preview-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bk-preview-grid.is-week .bk-preview-cell { min-height: 140px; }
.bk-preview-grid.is-month .bk-preview-cell { min-height: 76px; }
.bk-preview-cell { border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px; font-size: .78rem; background: #fff; }
.bk-preview-cell[data-date] { cursor: pointer; }
.bk-preview-cell[data-date]:hover { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.bk-preview-cell.is-blank { border-color: transparent; background: transparent; cursor: default; }
.bk-preview-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.bk-preview-day-num { font-weight: 600; opacity: .7; margin-bottom: 4px; }
.bk-preview-chip { display: block; border-radius: 5px; padding: 2px 5px; margin-bottom: 3px; font-size: .74rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-preview-chip.status-pending { background: #ffedd5; color: #9a3412; }
.bk-preview-chip.status-confirmed { background: #dcfce7; color: #166534; }
.bk-preview-chip.status-cancelled { background: #f4f4f5; color: #a1a1aa; text-decoration: line-through; }
.bk-preview-more { font-size: .72rem; color: #888; }
.bk-preview-empty { font-size: .72rem; color: #aaa; }
html[data-theme="night"] .bk-preview-cell { background: #1e293b; border-color: #475569; }
html[data-theme="night"] .bk-preview-chip.status-pending { background: #431407; color: #fdba74; }
html[data-theme="night"] .bk-preview-chip.status-confirmed { background: #14532d; color: #86efac; }
html[data-theme="night"] .bk-preview-chip.status-cancelled { background: #334155; color: #71717a; }
html[data-a11y-theme="contrast"] .bk-preview-cell { background: #1a1a1a !important; border-color: #d1d5db !important; }
html[data-a11y-theme="cream"] .bk-preview-cell { background: #fdf6e3 !important; border-color: #e0d3ae !important; }
html[data-a11y-theme="blue"] .bk-preview-cell { background: #eef3fb !important; border-color: #c9d8ee !important; }
html[data-a11y-theme="contrast"] .bk-preview-chip.status-pending { background: #431407 !important; color: #fdba74 !important; }
html[data-a11y-theme="contrast"] .bk-preview-chip.status-confirmed { background: #14532d !important; color: #86efac !important; }
html[data-a11y-theme="contrast"] .bk-preview-chip.status-cancelled { background: #262626 !important; color: #71717a !important; }
.cms-booking-widget .bk-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-booking-widget .bk-slot {
  padding: 8px 14px; border: 1px solid #ddd; border-radius: 999px; background: #fff;
  cursor: pointer; font: inherit; font-size: .85rem;
}
.cms-booking-widget .bk-slot:hover,
.cms-booking-widget .bk-slot.selected { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.cms-booking-widget .bk-no-slots { color: #888; font-size: .85rem; }
.cms-booking-widget .bk-form { display: flex; flex-direction: column; gap: 10px; }
.cms-booking-widget .bk-form[hidden] { display: none; }
.cms-booking-widget .bk-form input[type="text"],
.cms-booking-widget .bk-form input[type="email"] {
  padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font: inherit; width: 100%;
}
.cms-booking-widget .bk-form button {
  align-self: flex-start; padding: 10px 20px; border: none; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-weight: 600; cursor: pointer;
}
.cms-booking-widget .bk-msg { margin: 0; font-size: .85rem; }
.cms-booking-widget .bk-msg.success { color: #15803d; }
.cms-booking-widget .bk-msg.error { color: #b91c1c; }
.cms-booking-widget .bk-pay-link {
  display: inline-block; margin-top: 4px; padding: 10px 20px; border-radius: 999px;
  background: var(--color-primary); color: #fff; text-decoration: none; font-weight: 600;
}

/* ---------- Comparsa animata allo scroll ---------- */
[data-reveal="1"] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal="1"].revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Nel builder ogni modifica sostituisce tutto #cms-blocks-root.innerHTML
   (render-draft): i nuovi elementi con data-reveal="1" non vengono mai
   ripassati all'IntersectionObserver di main.js (girato una sola volta al
   caricamento pagina), quindi restano invisibili (opacity:0) finché non si
   ricarica con Salva. Nel builder l'effetto non serve comunque (non c'è
   scroll reale da "rivelare" durante l'editing): disattivato del tutto. */
body.cms-builder [data-reveal="1"] { opacity: 1 !important; transform: none !important; }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 32px;
  color: #888;
  font-size: .9rem;
}
.site-footer-brand { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 8px; font-weight: 600; }
.site-footer-brand a { color: inherit; text-decoration: none; }
.site-footer-brand a:hover { color: var(--color-primary); }
.site-footer-logo { width: 18px; height: 18px; object-fit: contain; }
.site-footer-links { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; font-size: .85rem; }
.site-footer-links a { color: #888; text-decoration: none; }
.site-footer-links a:hover { color: var(--color-primary); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .block.layout-2 .block-col,
  .block.layout-3 .block-col,
  .block.layout-4 .block-col,
  .block.layout-5 .block-col { flex: 1 1 100%; }
  .block-col { padding: 40px 24px; }
  .header-inner { padding: 0 16px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .block.layout-4 .block-col,
  .block.layout-5 .block-col { flex: 1 1 50%; }
}

/* =====================================================
   Pannello di amministrazione
   ===================================================== */
.admin-wrap { max-width: 960px; margin: calc(var(--header-height) + 40px) auto 60px; padding: 0 20px; }
.admin-wrap h1 { margin-top: 0; }
/* Modalità "embed" (?embed=1, vedi admin/_header.php): niente intestazione
   sito sopra, quindi niente margine pensato per farci spazio — usata dal
   pannello inline "Aggiungi:" di admin/lezione-edit.php. */
.admin-embed .admin-wrap { margin-top: 20px; }
.admin-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.admin-card h2 { margin-top: 0; font-size: 1.1rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left; padding: 10px 12px; border-bottom: 2px solid #eee;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #888;
}
.admin-table td { text-align: left; padding: 12px; border-bottom: 1px solid #f0f0f0; }
.admin-table tbody tr:hover { background: #fafafa; }
.admin-table td a:not(.btn-admin) { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.admin-table td a:not(.btn-admin):hover { text-decoration: underline; }

.settings-section-title {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #888;
  margin: 0 0 16px; font-weight: 700;
}
.settings-divider { border: none; border-top: 1px solid #eee; margin: 28px 0; }
.settings-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.settings-provider-card { background: var(--color-gray-bg); border-radius: 10px; padding: 16px; }
.settings-provider-card h3 { margin: 0 0 12px; font-size: .95rem; }
.settings-provider-card .form-row:last-child { margin-bottom: 0; }
.settings-hint { color: #888; font-size: .85rem; margin-top: 16px; }

/* Campo di sola lettura per un link pubblico (share/edit/view), stesso
   pattern del link generato in admin/video-lesson.php: un <input readonly>
   invece di un <code>, cosi il testo e selezionabile/copiabile in un click
   e dimensionato al contenuto (size="" calcolato lato server dalla
   lunghezza del link) invece di allungarsi a piena larghezza. */
.share-url-input {
  font-family: ui-monospace, monospace; font-size: .85rem;
  padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px;
  background: var(--color-gray-bg); color: var(--color-text);
  max-width: 100%; vertical-align: middle;
}
html[data-theme="night"] .share-url-input { background: #0f172a; border-color: #475569; color: #e2e8f0; }

/* Impostazioni: pagina di arrivo con un pulsante quadrato colorato per
   sezione (invece delle voci in cima a un'unica pagina lunghissima), stesso
   trattamento grafico — colore pieno, badge icona semi-trasparente,
   etichetta sotto — dei riquadri della dashboard dell'app companion
   CiaoSchool (_ModuleTile in ciaoschool_app/lib/screens/dashboard_screen.dart),
   per coerenza visiva fra i due prodotti. Ogni sezione vive ora nella
   propria pagina dedicata (admin/settings-*.php), con un link "Torna a
   Impostazioni" per rientrare qui. */
.settings-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  max-width: 960px;
}
.settings-tile {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  padding: 14px;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.settings-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.settings-tile-icon {
  width: 40px; height: 40px;
  border-radius: 13px;
  background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
}
.settings-tile-label { font-size: .9rem; font-weight: 600; line-height: 1.2; }

/* Quadrati "Presto disponibile" in admin/tools.php: stesso trattamento
   grafico dei quadrati normali (colore pieno, per non spezzare la griglia)
   ma non cliccabili (sono <div>, non <a>) — resi riconoscibili con opacità
   ridotta e nessun effetto hover, più un'etichetta secondaria sotto il nome. */
.settings-tile.disabled { opacity: .55; cursor: default; }
.settings-tile.disabled:hover { transform: none; box-shadow: none; }
.settings-tile-soon { font-size: .75rem; font-weight: 600; opacity: .85; }

.settings-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-primary); text-decoration: none; font-weight: 600;
  font-size: .9rem; margin-bottom: 16px;
}
.settings-back-link:hover { text-decoration: underline; }

/* Barra titolo di pagina condivisa (render_page_title_bar() in
   functions.php): icona + titolo a sinistra, "Torna a X" sulla stessa riga
   allineato a destra — sostituisce il vecchio <p><a class=settings-back-link>
   seguito da un <h1> separato su due righe, uno per pagina admin. */
.admin-page-title-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.admin-page-title-bar h1 { display: flex; align-items: center; gap: 10px; margin: 0; }
.admin-page-title-bar h1 svg { flex: none; }
.admin-page-title-bar .settings-back-link { margin-bottom: 0; flex: none; }

/* Elenco Lezioni (admin/lezioni.php): barra ricerca+ordina sopra la tabella, letta/scritta da listSearchSort.js vendorizzato. */
.admin-list-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.admin-list-toolbar input[type="search"] { flex: 1 1 220px; }
.admin-list-toolbar label { display: flex; align-items: center; gap: 6px; font-size: .9rem; white-space: nowrap; }
.admin-list-toolbar select { width: auto; }

/* Riga "Aggiungi:" nell'editor Lezioni (admin/lezione-edit.php): pulsanti
   colorati più piccoli dei riquadri di Strumenti, verso get_tool_tiles()
   enabled — aprono lo strumento nel pannello inline sotto (#lesson-tool-panel,
   un iframe), non più in una nuova scheda: da qui il reset stile-bottone
   (era un <a>, ora un <button>, stesso aspetto). */
.lesson-tool-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.lesson-tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 10px; color: #fff; text-decoration: none;
  font-size: .85rem; font-weight: 600; border: none; cursor: pointer; font-family: inherit;
}
.lesson-tool-btn:hover { opacity: .9; }

/* Pannello inline che carica lo strumento scelto in un iframe, sotto la
   lezione — un solo strumento alla volta (un secondo click su un'altra
   scorciatoia sostituisce semplicemente il src invece di aprirne un altro),
   nascosto di default e sempre richiuso al salvataggio (location.reload()
   riporta la pagina allo stato iniziale, pannello incluso). */
.lesson-tool-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lesson-tool-panel-iframe { width: 100%; height: 70vh; min-height: 480px; border: 1px solid #eee; border-radius: 10px; }
html[data-theme="night"] .lesson-tool-panel-iframe { border-color: #333; }

/* Annunci di bacheca: elenco admin (admin/classe-bacheca.php) e vista pubblica (classe.php) condividono lo stesso schema visivo, classi separate perché uno è dentro .admin-card e l'altro dentro un block-col pubblico. */
.admin-announcement, .class-board-announcement {
  padding: 16px 0; border-bottom: 1px solid #f0f0f0;
}
.admin-announcement:last-child, .class-board-announcement:last-child { border-bottom: none; }
.admin-announcement-date, .class-board-date {
  font-size: .8rem; color: #6b7280; margin-bottom: 6px; font-weight: 600;
}
.admin-announcement-body, .class-board-body { line-height: 1.6; }
.admin-announcement-body img, .class-board-body img { max-width: 100%; height: auto; border-radius: 8px; }
html[data-theme="night"] .admin-announcement, html[data-theme="night"] .class-board-announcement { border-bottom-color: #334155; }
html[data-theme="night"] .admin-announcement-date, html[data-theme="night"] .class-board-date { color: #94a3b8; }

/* Editor pagina Libro-gioco (admin/libro-gioco-pagina.php): righe scelta dinamiche label+numero pagina. */
.gb-choice-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.gb-choice-row .gb-choice-label { flex: 1 1 auto; }
.gb-choice-row .gb-choice-target { width: 100px; flex: 0 0 auto; }

/* Vista mappa Libro-gioco (admin/libro-gioco-mappa.php): colonna = distanza BFS dalla prima pagina, riga = posizione nella colonna (gamebook_map_layout(), includes/functions.php). */
.gb-map { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 12px; }
.gb-map-col { display: flex; flex-direction: column; gap: 16px; flex: 0 0 220px; }
.gb-map-node {
  display: block; padding: 12px 14px; border-radius: 10px; border: 1px solid #e5e7eb;
  background: #fff; text-decoration: none; color: var(--color-text);
}
.gb-map-node:hover { border-color: var(--color-primary); }
.gb-map-node-isolated { border-style: dashed; opacity: .7; }
.gb-map-node strong { display: block; margin-bottom: 4px; }
.gb-map-choice { display: block; font-size: .85rem; color: #6b7280; }
.gb-map-choice-ghost { color: #dc2626; }
.gb-map-ending { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--color-primary); }
html[data-theme="night"] .gb-map-node { background: #1e293b; border-color: #475569; }
html[data-theme="night"] .gb-map-choice { color: #94a3b8; }

/* Selettore stile carte nel pannello Flashcard (admin/flashcard-edit.php) — porting minimale di .flashcard-layout-picker della fonte (nomi di classe propri per non confondersi con quella, che qui non è vendorizzata). */
.fc-layout-picker { display: flex; flex-wrap: wrap; gap: 12px; }
.fc-lang-row { display: flex; gap: 20px; flex-wrap: wrap; }
.fc-lang-row > div { flex: 1; min-width: 10rem; }
.fc-lang-row select { width: 100%; }
.fc-layout-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 110px; padding: 10px; border: 2px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; text-align: center; font-size: .8rem;
}
.fc-layout-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fc-layout-option:has(input:checked) { border-color: var(--color-primary); }
.fc-layout-swatch { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.4rem; border-radius: 6px; font-weight: 600; }
.fc-layout-swatch-minimal { background: #ffffff; border: 1px solid #e2e8f0; color: #1a202c; }
.fc-layout-swatch-dark { background: #0a0e1a; border: 1px solid #00e5ff; color: #7fd8ff; font-family: 'Courier New', monospace; }
.fc-layout-swatch-papyrus { background: #f3ede1; border: 1px solid #b8860b; color: #6b5a3f; font-family: Georgia, serif; }

.header-preview-box {
  height: 56px; border-radius: 10px; border: 1px solid #e5e5e5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; transition: background .15s ease, color .15s ease;
}
.header-preview-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.header-preview-brand img { height: 24px; width: auto; }
.header-preview-hamburger { font-size: 1.2rem; line-height: 1; }
html[data-theme="night"] .header-preview-box { border-color: #475569; }

.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-option {
  display: flex !important; align-items: center; gap: 6px; font-weight: 400 !important;
  border: 1px solid #ddd; border-radius: 20px; padding: 6px 12px; cursor: pointer; font-size: .85rem;
}
.pill-option input { margin: 0; }
a.pill-option { text-decoration: none; color: inherit; }
a.pill-option.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 600 !important; }
button.pill-option.selected { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 600 !important; }
.form-row input[type=text],
.form-row input[type=password],
.form-row input[type=email],
.form-row input[type=url],
.form-row input[type=color],
.form-row input[type=file],
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}

.btn-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: .95rem;
  line-height: normal;
  box-sizing: border-box;
  vertical-align: middle;
}
.btn-admin.secondary { background: #eee; color: var(--color-text); }
.btn-admin.danger { background: #dc2626; }
.btn-admin[disabled] { opacity: .4; cursor: not-allowed; }
.btn-small { padding: 6px 10px; font-size: .85rem; border-radius: 6px; height: 30px; box-sizing: border-box; }
/* Variante solo-icona, senza sfondo, solo bordo — stessa altezza di un
   .btn-admin.btn-small "di testo" accanto a cui compare sempre (es. il
   pulsante Elimina nell'elenco Pagine, accanto a Modifica), ma quadrata e
   senza riempimento colorato. Selettore a 4 classi per battere in
   specificità .btn-admin.danger (2 classi, sfondo pieno) a prescindere
   dall'ordine nel foglio di stile. L'altezza esplicita (ereditata da
   .btn-small) è necessaria: senza, questo variante arriva a un'altezza
   diversa dal fratello di testo perché non ha il suo stesso padding
   verticale a determinarla — un vero disallineamento, nonostante il
   commento sopra lo desse già per garantito. */
.btn-admin.btn-small.btn-icon-outline {
  background: transparent;
  border: 1px solid #ddd;
  color: var(--color-text);
  padding: 0;
  width: 30px;
  justify-content: center;
}
.btn-admin.btn-small.btn-icon-outline.danger {
  background: transparent;
  color: #dc2626;
  border-color: #dc2626;
}
.btn-admin.btn-small.btn-icon-outline.danger:hover { background: #fef2f2; }

.block-editor-item { border: 1px solid #eee; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.block-editor-item .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .85rem;
  color: #666;
}
.block-editor-item .actions { display: flex; gap: 6px; flex-wrap: wrap; }

.element-row { border: 1px dashed #ddd; border-radius: 8px; padding: 12px; margin-bottom: 10px; }

/* Il "sotto-menu" di ogni pagina admin (admin/_nav.php) riusa direttamente
   .settings-tiles/.settings-tile delle pagine-hub (admin/dashboard.php) —
   stessi riquadri grandi ovunque, su richiesta esplicita, invece della
   versione compatta 36×36px di prima (.admin-nav-tile, rimossa). Qui serve
   solo lo spazio sotto la griglia (le pagine-hub non ne hanno bisogno,
   essendo i riquadri l'ultimo elemento) e lo stato "pagina corrente". */
.settings-tiles { margin-bottom: 24px; }
.settings-tile.active { box-shadow: 0 0 0 3px var(--color-text); }
html[data-theme="night"] .settings-tile.active { box-shadow: 0 0 0 3px #e2e8f0; }

/* Switcher della lingua dell'interfaccia admin (admin/_header.php), unica
   barra lingua del pannello — vive nell'header accanto al menu ☰ invece che
   nella barra di navigazione, quindi qui .header-actions annulla il
   margin-left:auto pensato per la vecchia posizione dentro .admin-nav. */
.header-actions .admin-lang-switch { margin-left: 0; }
.admin-lang-switch { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.admin-lang-switch a {
  padding: 6px 8px; border-radius: 6px; background: transparent; text-decoration: none;
  font-size: .75rem; font-weight: 700; color: #9ca3af; transition: color .15s ease, background .15s ease;
}
.admin-lang-switch a:hover { background: #ececec; color: var(--color-text); }
.admin-lang-switch a.active { background: #f5f5f5; color: var(--color-primary); }

.login-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: var(--color-gray-bg); }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; }
.login-logo { height: 56px; width: auto; }
.login-sitename { font-size: 1.3rem; font-weight: 700; color: var(--color-text); }
.admin-login-box { max-width: 360px; width: 100%; margin: 0; }

/* Selettore lingua sopra il marchio nella schermata di installazione
   (cms/install.php) — tutte e 10 le lingue supportate (non solo quelle
   attive del sito, che a questo punto non è ancora configurato), stile
   pillole compatte come .admin-lang-switch ma centrato e senza il
   margin-left:auto pensato per stare dentro .admin-nav. */
.install-lang-switch { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.install-lang-switch a {
  padding: 6px 10px; border-radius: 6px; background: transparent; text-decoration: none;
  font-size: .75rem; font-weight: 700; color: #9ca3af; transition: color .15s ease, background .15s ease;
}
.install-lang-switch a:hover { background: rgba(0,0,0,.06); color: var(--color-text); }
.install-lang-switch a.active { background: #fff; color: var(--color-primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.login-forgot { text-align: center; margin: 16px 0 0; }
.login-forgot a { color: var(--color-primary); font-size: .9rem; text-decoration: none; }
.login-forgot a:hover { text-decoration: underline; }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; background: #ecfdf5; color: #065f46; }
.flash.error { background: #fef2f2; color: #991b1b; }
.flash.trial-warning-banner { background: #fffbeb; color: #92400e; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
html[data-theme="night"] .flash.trial-warning-banner { background: #451a03; color: #fdba74; }
.flash ul { margin: 0; padding-left: 18px; }

/* =====================================================
   Builder visivo (anteprima live, stile WordPress)
   ===================================================== */
body.cms-builder { padding-top: 52px; }
body.cms-builder .site-header { top: 52px; }
body.cms-builder main { padding-top: calc(var(--header-height) + 52px); }

.builder-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: #f4f4f5;
  color: #18181b;
  border-bottom: 1px solid #e4e4e7;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  font-size: .9rem;
}
.builder-topbar a.back { color: #52525b; text-decoration: none; flex: 0 0 auto; }
.builder-topbar a.back:hover { color: #18181b; }
.builder-topbar input.page-title {
  background: transparent;
  border: 1px solid transparent;
  color: #18181b;
  font-size: .95rem;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  min-width: 160px;
  flex: 1;
}
.builder-topbar input.page-title:hover,
.builder-topbar input.page-title:focus { border-color: #d4d4d8; background: #fff; outline: none; }
.builder-topbar label.published-toggle { display: flex; align-items: center; gap: 6px; color: #52525b; white-space: nowrap; }
.cms-lang-tabs { display: flex; gap: 2px; flex: 0 0 auto; }
.cms-lang-tab {
  background: transparent; border: 1px solid #d4d4d8; color: #3f3f46; cursor: pointer;
  padding: 5px 10px; border-radius: 6px; font-size: .8rem; font-weight: 600;
}
.cms-lang-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cms-history-controls { display: flex; gap: 2px; flex: 0 0 auto; }
.cms-history-controls button {
  background: transparent; border: 1px solid #d4d4d8; color: #3f3f46; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.cms-history-controls button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.cms-history-controls button:disabled { opacity: .3; cursor: not-allowed; }
.builder-topbar .spacer { flex: none; }
.builder-topbar .save-status { color: #15803d; font-size: .8rem; min-width: 90px; }
.builder-topbar .save-status.saving { color: #b45309; }
.builder-topbar .save-status.error { color: #b91c1c; }
.builder-topbar a.view-live {
  color: #fff; background: var(--color-primary); text-decoration: none;
  padding: 8px 14px; border-radius: 8px; font-size: .85rem;
}

/* Riquadro modificabile: bordo tratteggiato leggero al passaggio del mouse */
.cms-block-wrap { position: relative; }
.cms-block-wrap:hover { outline: 2px dashed rgba(124, 58, 237, .35); outline-offset: -2px; }

.cms-block-toolbar {
  position: absolute;
  top: 8px; right: 8px;
  display: none;
  gap: 4px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  padding: 6px;
  border-radius: 8px;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.cms-block-wrap:hover .cms-block-toolbar,
.cms-block-toolbar.force-show { display: flex; }
.cms-block-toolbar button {
  background: #fff; color: #18181b; border: 1px solid #e4e4e7; border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cms-block-toolbar button:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.cms-block-toolbar button[disabled] { opacity: .3; cursor: not-allowed; }
.cms-block-toolbar button.active { color: #b45309; }

/* Elementi di testo modificabili in linea */
.cms-editable {
  outline: none;
  border-radius: 4px;
  transition: box-shadow .15s ease;
  cursor: text;
}
.cms-editable:hover { box-shadow: 0 0 0 2px rgba(124, 58, 237, .25); }
.cms-editable:focus { box-shadow: 0 0 0 2px var(--color-primary); }
/* Solo il paragrafo: un'altezza minima di alcune righe invece di collassare
   a una singola riga vuota/corta, così la finestra di scrittura è subito
   utilizzabile senza dover prima digitare abbastanza testo da "aprirla". */
p.cms-editable { min-height: 4.5em; }
.cms-editable:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
}

/* Barra di formattazione testo (grassetto/corsivo/link), non a tendina */
.cms-text-toolbar {
  position: absolute;
  display: none;
  gap: 2px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  padding: 4px;
  border-radius: 8px;
  z-index: 3000;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.cms-text-toolbar.show { display: flex; }
.cms-text-toolbar button {
  background: transparent; color: #18181b; border: none; border-radius: 5px;
  width: 30px; height: 30px; cursor: pointer; font-size: .95rem;
}
.cms-text-toolbar button:hover { background: #e4e4e7; }
.cms-text-toolbar button.active { background: var(--color-primary); color: #fff; }
.cms-text-toolbar-sep { width: 1px; margin: 4px 2px; background: #d4d4d8; }
.cms-font-btn { font-size: .85rem !important; font-weight: 600; }
.cms-size-btn { font-weight: 700; }

/* Pulsante "+" per aggiungere un elemento in una colonna */
.cms-add-element-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 10px;
  border: 1px dashed #ccc; border-radius: 8px;
  background: transparent; color: #888; cursor: pointer; font-size: .85rem;
}
.cms-add-element-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Barra "+" per aggiungere un riquadro tra due sezioni */
.cms-add-block-bar {
  position: relative;
  height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.cms-add-block-bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed #ddd;
}
.cms-add-block-bar button {
  position: relative; z-index: 2;
  background: #fff; border: 1px solid #ddd; color: var(--color-primary);
  border-radius: 999px; width: 30px; height: 30px; cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.cms-add-block-bar button:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Popover generico per i picker visivi (layout, sfondo, tipo elemento) */
.cms-popover {
  position: absolute;
  display: none;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: 16px;
  z-index: 3000;
  width: 320px;
}
.cms-popover.show { display: block; }
.cms-popover h4 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #888; }
.cms-popover-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cms-popover-row:last-child { margin-bottom: 0; }

.cms-pick {
  border: 2px solid #eee; border-radius: 10px; background: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; font-size: .75rem; color: #555; flex: 1 1 80px; min-width: 80px;
}
.cms-pick:hover { border-color: var(--color-primary); }
.cms-pick.selected { border-color: var(--color-primary); background: #f5f0ff; }

.cms-scale-manual-row { align-items: center; gap: 6px !important; }
.cms-scale-manual-input {
  width: 70px; padding: 8px 10px; border: 2px solid #eee; border-radius: 10px;
  font-size: .9rem; text-align: right;
}
.cms-scale-manual-input:focus { border-color: var(--color-primary); outline: none; }
.cms-scale-manual-suffix { color: #888; font-size: .85rem; }
.cms-pick-icon { display: flex; gap: 3px; height: 24px; align-items: stretch; }
.cms-pick-icon span { display: block; width: 8px; background: #ccc; border-radius: 2px; }
.cms-pick.selected .cms-pick-icon span { background: var(--color-primary); }

.cms-swatch {
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  border: 2px solid #eee;
}
.cms-swatch.selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(124,58,237,.25); }
.cms-swatch.gradient-swatch { background: linear-gradient(135deg, #7dd3fc, #039be5); }

/* Widget colore condiviso: campo HEX + pallini palette (assets/js/color-picker.js).
   Il colore corrente non ha una "barra" dedicata: è il pallino corrispondente
   ad avere un anello (bordo colorato + alone) come indicatore di selezione. */
.cms-color-picker { width: 100%; }
.cms-color-hex {
  width: 100%; margin-bottom: 12px; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px;
  font-family: ui-monospace, monospace; font-size: .85rem;
}
.cms-palette-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-palette-grid.pastel { padding-top: 10px; border-top: 1px solid #eee; }
.cms-palette-dot {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd;
}
.cms-palette-dot:hover { box-shadow: 0 0 0 1px #999; transform: scale(1.12); }
.cms-palette-dot.selected { box-shadow: 0 0 0 2px var(--color-primary); }
/* I colori pastello sono molto chiari — il bordo standard #ddd vi si vede a
   malapena; un grigio più scuro li mantiene visibili sullo sfondo bianco. */
.cms-palette-grid.pastel .cms-palette-dot { box-shadow: 0 0 0 1px #999; }
.cms-palette-grid.pastel .cms-palette-dot:hover { box-shadow: 0 0 0 1px #666; }
.cms-palette-label { font-size: .72rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
/* Interlinea fra la griglia colori vivaci (che include il pallino bianco) e
   il titolo "Colori pastello" subito sotto — prima erano troppo attaccati. */
.cms-palette-grid + .cms-palette-label { margin-top: 14px; }

.cms-element-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px solid #eee; border-radius: 10px; background: #fff; cursor: pointer;
  padding: 10px 6px; font-size: .72rem; color: #555; flex: 1;
}
.cms-element-pick:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cms-element-pick .glyph { font-size: 1.2rem; }

/* Immagini modificabili */
.cms-image-wrap { position: relative; }
.cms-image-wrap img { display: block; }
.cms-image-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 4 / 3; border-radius: 12px;
  background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e9e9e9 10px, #e9e9e9 20px);
  color: #999; font-size: .85rem; cursor: pointer;
}
.cms-image-actions {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity .15s ease;
}
.cms-image-wrap:hover .cms-image-actions { opacity: 1; }
.cms-image-edit-btn {
  background: rgba(24,24,27,.85); color: #fff; border: none;
  padding: 8px 12px; border-radius: 999px; font-size: .78rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cms-image-resize-btn { padding: 8px; }

/* Pulsante (elemento "button") modificabile: testo + link separati */
.cms-editable-btn { display: inline-flex; align-items: center; gap: 8px; }
.cms-editable-btn .cms-editable { color: #fff; }
.cms-link-edit-btn {
  background: rgba(255,255,255,.25); border: none; color: #fff;
  width: 24px; height: 24px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Elemento "html" (blocco generato dall'AI, vedi "Vista HTML"/chatbox AI nel
   builder) — riquadro tratteggiato al passaggio del mouse per farlo
   riconoscere come modificabile, dato che non è contenteditable diretto. */
.cms-html-block-wrap { position: relative; border-radius: 8px; transition: outline-color .15s ease; outline: 2px dashed transparent; outline-offset: 4px; }
.cms-html-block-wrap:hover { outline-color: rgba(124,58,237,.3); }
.cms-html-block-wrap .cms-html-block-actions {
  /* bottom, non top: la mini-barra del riquadro (.cms-block-toolbar) occupa
     già l'angolo in alto a destra — un bug reale, scoperto verificando dal
     vivo, dove i due si sovrapponevano e il click arrivava sempre alla
     barra del riquadro invece che a questo pulsante. */
  position: absolute; bottom: -14px; right: 0;
  opacity: 0; transition: opacity .15s ease;
}
.cms-html-block-wrap:hover .cms-html-block-actions { opacity: 1; }
.cms-html-edit-btn { padding: 6px 12px; gap: 6px; }
.cms-html-block :first-child { margin-top: 0; }
.cms-html-block :last-child { margin-bottom: 0; }

/* Toggle Vista normale/Vista HTML sopra i riquadri, e la sorgente HTML
   mostrata quando la vista è attiva — vedi admin/builder.php. */
.cms-view-toggle { display: flex; gap: 4px; padding: 10px 20px; }
.cms-view-toggle button {
  background: transparent; border: 1px solid #d4d4d8; color: #52525b; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600;
}
.cms-view-toggle button.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cms-html-view {
  display: none; margin: 0 20px 20px; padding: 16px; border-radius: 10px;
  background: #18181b; color: #d4d4d8; overflow-x: auto;
  font-family: 'SF Mono', Consolas, monospace; font-size: .82rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.cms-html-view.show { display: block; }

/* Chatbox AI in fondo al builder, presente in entrambe le viste — genera un
   nuovo blocco HTML (sanificato) dal prompt del docente, vedi builder.js. */
.cms-ai-page-box { margin: 24px 20px 40px; padding: 16px; border-radius: 10px; background: var(--color-gray-bg); }
.cms-ai-page-box h4 { margin: 0 0 10px; font-size: .95rem; }
.cms-ai-page-row { display: flex; gap: 8px; }
.cms-ai-page-row textarea {
  flex: 1; resize: vertical; min-height: 2.6rem; max-height: 10rem;
  padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; font-size: .9rem;
}
.cms-ai-page-status { display: block; margin-top: 6px; font-size: .8rem; color: #666; }
html[data-theme="night"] .cms-html-view { background: #0d0d10; }
html[data-theme="night"] .cms-ai-page-row textarea { background: #334155; border-color: #3c4043; color: #e2e8f0; }

/* Riquadro vuoto: invito a iniziare */
.cms-empty-block-hint {
  padding: 40px; text-align: center; color: #aaa; font-size: .85rem;
  border: 1px dashed #ddd; border-radius: 10px; width: 100%;
}

/* Evidenzia brevemente un riquadro/elemento appena aggiunto, così è chiaro
   che l'azione ha avuto effetto anche se è fuori dalla vista corrente
   (assets/js/builder.js lo scrolla in vista e applica questa classe). */
@keyframes cms-flash { 0%, 100% { box-shadow: 0 0 0 3px transparent; } 20%, 60% { box-shadow: 0 0 0 3px var(--color-primary); } }
.cms-just-added { animation: cms-flash 1.4s ease; border-radius: 8px; }

@media (max-width: 768px) {
  .builder-topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; }
  body.cms-builder { padding-top: 96px; }
  body.cms-builder .site-header { top: 96px; }
  body.cms-builder main { padding-top: calc(var(--header-height) + 96px); }
}

/* Editor "Giochi didattici" (assets/js/games-builder.js) + selettore
   immagini Wikimedia Commons (assets/js/games-image-picker.js, vendorizzato
   verbatim da CiaoSchoolPackage — il markup lì dentro usa .form-input/.btn/
   .btn-secondary invece delle classi .btn-admin di questo progetto, quindi
   queste regole restano scoped a .image-picker-panel per non toccare lo
   stile dei pulsanti .btn a piena pillola usati nel sito pubblico). */
.form-input {
  width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px;
  font-size: 1rem; font-family: inherit;
}
.game-play-page { max-width: 46rem; margin: 0 auto; }
.game-preview-frame {
  border: 1px solid #ddd; border-radius: 12px; padding: 16px;
  display: flex; justify-content: center; background: #fafafa;
}
.game-preview-frame #previewHost { width: 100%; max-width: 420px; }
.cgd-field-row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.cgd-field-row .form-input { flex: 1; }
.cgd-icon-btn {
  border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 6px 10px;
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.cgd-icon-btn:hover { background: #f3f3f3; }
.cgd-row-block { border: 1px solid #eee; border-radius: 10px; padding: 14px; margin-bottom: 12px; position: relative; }
.cgd-row-remove {
  position: absolute; top: 8px; right: 8px; border: none; background: none;
  color: #999; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.cgd-row-remove:hover { background: #fef2f2; color: #dc2626; }
.cgd-inline-fields { display: flex; gap: 16px; }
.cgd-inline-fields > div { flex: 1; }
.cgd-add-btn { margin-top: 4px; }
.cgd-option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cgd-option-row input[type="radio"] { flex: none; }

/* Selettore del layout Cruciverba (assets/js/games-builder.js): miniature
   cliccabili dei candidati generati da cgdAutoLayoutCrossword(). */
.cgd-generate-btn { margin: 8px 0 16px; }
.cgd-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 12px 0; }
.cgd-thumb { border: 2px solid #ddd; border-radius: 8px; padding: 8px; cursor: pointer; background: #fff; text-align: center; font-size: .75rem; }
.cgd-thumb-selected { border-color: var(--color-primary); background: #f0f4ff; }
.cgd-thumb-grid-cells { display: grid; gap: 1px; margin: 0 auto 6px; background: #ddd; }
.cgd-thumb-cell { width: 12px; height: 12px; background: #fff; }
.cgd-thumb-cell-filled { background: #b8c6f5; }

.emoji-picker-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex;
  align-items: center; justify-content: center; z-index: 1000;
}
.emoji-picker-panel {
  background: #fff; border-radius: 12px; width: 100%; max-width: 28rem;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
.image-picker-panel { max-width: 36rem; }
.emoji-picker-header { display: flex; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid #eee; }
.emoji-picker-header .form-input { flex: 1; }
.emoji-picker-close { border: none; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: #999; }
.emoji-picker-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid #eee; }
.emoji-picker-tab { flex: none; border: none; background: var(--color-gray-bg); border-radius: 6px; padding: 5px 8px; cursor: pointer; font-size: .9rem; }
.emoji-picker-tab-active { background: var(--color-primary); color: #fff; }
.emoji-picker-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 12px; }
.emoji-picker-btn { border: none; background: none; font-size: 1.3rem; padding: 5px; border-radius: 5px; cursor: pointer; }
.emoji-picker-btn:hover { background: var(--color-gray-bg); }
@media (max-width: 640px) { .emoji-picker-grid { grid-template-columns: repeat(6, 1fr); } }
.image-picker-filters { display: flex; gap: 6px; padding: 8px 12px 0; }
.image-picker-filter-btn { border: none; background: #f3f3f3; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: .8rem; color: var(--color-text); }
.image-picker-filter-btn[data-active="true"] { background: var(--color-primary); color: #fff; }
.image-picker-results { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; padding: 12px; }
.image-picker-card { border: 1px solid #ddd; border-radius: 8px; padding: 0; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #f3f3f3; }
.image-picker-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-picker-detail { padding: 16px; text-align: center; }
.image-picker-pager { display: flex; justify-content: space-between; padding: 10px 12px; border-top: 1px solid #eee; }
.image-picker-pager .btn { padding: 8px 16px; border-radius: 999px; background: #eee; color: var(--color-text); text-decoration: none; font-weight: 600; margin-top: 0; cursor: pointer; border: none; font-size: .9rem; }
.image-picker-pager .btn:hover { background: #e2e2e2; }

/* Editor "Lezione dinamica" (admin/lezione-dinamica-edit.php +
   assets/js/dynamic-lesson-editor.js): cornice app (.dl-*) + campi/editor
   domande-coppie-opzioni condivisi con Quiz/Sondaggio/Abbinamento/Scelta
   rapida (.is-*), estratti da app.css della fonte come già fatto per
   .cgd-*/.emoji-picker-*/.image-picker-* dei Giochi didattici. */
.dl-app { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; }
html[data-theme="night"] .dl-app { background: #1e293b; border-color: #475569; }
.dl-titlebar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #ddd; }
.dl-title-input { font-size: 1.05rem; font-weight: 500; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 4px 8px; min-width: 8rem; flex: 1; }
.dl-title-input:hover { border-color: #ddd; }
.dl-title-input:focus { outline: none; border-color: var(--color-primary); }
.dl-titlebar-status { font-size: .78rem; color: #666; margin-left: auto; white-space: nowrap; }
.dl-palette { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.dl-palette-tile {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1.5px dashed #ccc; border-radius: 6px; background: #f8f9fa;
  cursor: grab; font-size: .85rem; user-select: none;
}
.dl-palette-tile:hover { border-color: var(--color-primary); background: rgba(124,58,237,.06); }
.dl-palette-tile:active { cursor: grabbing; }
.dl-palette-tile-icon { font-size: 1.1rem; }
.dl-steps { display: flex; flex-direction: column; gap: 14px; min-height: 4rem; border-radius: 8px; transition: background-color .15s; }
.dl-steps.is-drop-target { background: rgba(124,58,237,.06); outline: 2px dashed var(--color-primary); outline-offset: 4px; }
.dl-steps-empty { color: #666; font-size: .9rem; padding: 24px; text-align: center; border: 1.5px dashed #ccc; border-radius: 8px; }
.dl-step-card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.dl-step-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f8f9fa; border-bottom: 1px solid #ddd; }
.dl-step-number { font-size: .75rem; color: #666; font-variant-numeric: tabular-nums; }
.dl-step-type-icon { font-size: 1.1rem; }
.dl-step-type-label { font-weight: 600; font-size: .9rem; }
.dl-step-controls { margin-left: auto; display: flex; gap: 3px; }
.dl-step-body { padding: 14px; }
.dl-file-preview { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dl-file-preview img { max-height: 5rem; border-radius: 4px; border: 1px solid #ddd; }
.dl-wiki-image-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 5px 10px; font-size: .8rem; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: inherit; cursor: pointer; font-family: inherit; }
.dl-wiki-image-btn:hover { background: var(--color-gray-bg, #f8f9fa); border-color: var(--color-primary); }
html[data-theme="night"] .dl-wiki-image-btn { background: #334155; border-color: #3c4043; }
html[data-theme="night"] .dl-titlebar { border-color: #475569; }
html[data-theme="night"] .dl-palette-tile { background: #334155; border-color: #3c4043; }
html[data-theme="night"] .dl-steps-empty { border-color: #3c4043; }

/* Griglia "scegli un tipo tra N" — usata dopo "Nuovo..." quando la scelta
   va fatta nella schermata successiva invece che nella lista (Giochi
   didattici, vedi CLAUDE.md). Stessa forma visiva di .dl-palette-tile ma
   pensata per un click che decide una volta sola, non per un drag. */
/* 4 per riga (richiesta esplicita) — nome sopra, anteprima SVG del tipo di
   gioco sotto (game_type_preview_svg(), includes/functions.php). */
.type-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.type-picker-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px; border: 1.5px solid #ddd; border-radius: 10px;
  background: #f8f9fa; cursor: pointer; font-size: .85rem; font-family: inherit;
  color: var(--color-text); text-align: center;
}
.type-picker-tile-name { font-weight: 600; }
.type-picker-tile-preview { width: 100%; }
.type-picker-tile-preview svg { width: 100%; height: auto; display: block; }
.type-picker-tile:hover:not(:disabled) { border-color: var(--color-primary); background: rgba(124,58,237,.06); }
.type-picker-tile:disabled { opacity: .5; cursor: not-allowed; }
html[data-theme="night"] .type-picker-tile { background: #334155; border-color: #3c4043; }
@media (max-width: 720px) { .type-picker-grid { grid-template-columns: repeat(2, 1fr); } }
html[data-theme="night"] .dl-step-card { border-color: #475569; }
html[data-theme="night"] .dl-step-header { background: #334155; border-color: #475569; }
html[data-theme="night"] .dl-file-preview img { border-color: #475569; }

.is-field { margin-bottom: 8px; }
.is-field label { display: block; font-size: .75rem; color: #666; margin-bottom: 3px; }
.is-input, .is-textarea, .is-select { width: 100%; padding: 6px 8px; border: 1px solid #ddd; border-radius: 5px; font-size: .85rem; box-sizing: border-box; font-family: inherit; background: #fff; color: var(--color-text); }
.is-textarea { min-height: 4.2rem; }
.is-input-number { width: 6rem; }
.is-settings-row { display: flex; gap: 10px; }
.is-settings-row .is-field { flex: 1; }
.is-checkbox-row { display: flex; align-items: center; gap: 6px; font-size: .85rem; margin: 8px 0; }
.is-hint { font-size: .75rem; color: #666; margin: 4px 0; }
.is-btn { padding: 7px 14px; border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; border-radius: 5px; cursor: pointer; font-size: .85rem; }
.is-btn:hover { filter: brightness(.94); }
.is-btn-small { padding: 4px 10px; font-size: .75rem; }
.is-domande-wrap { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; }
.is-domanda-card { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.is-domanda-header { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: #666; margin-bottom: 6px; }
.is-opzioni-wrap { margin-top: 6px; }
.is-opzione-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.is-opzione-row .is-input { flex: 1; }
.is-vf-wrap { display: flex; gap: 20px; margin: 6px 0; }
.is-radio-label { display: flex; align-items: center; gap: 4px; font-size: .85rem; }
.is-matching-b-preview { margin: 6px 0; }
.is-matching-b-preview img { max-width: 140px; max-height: 100px; display: block; border-radius: 5px; border: 1px solid #ddd; }
.is-icon-btn { width: 1.6rem; height: 1.6rem; border: 1px solid #ddd; background: #fff; border-radius: 4px; cursor: pointer; font-size: .85rem; line-height: 1; color: var(--color-text); }
.is-icon-btn:hover { background: #f5f5f5; }
.is-btn-danger { border-color: #dc2626; color: #dc2626; }
.is-btn-danger:hover { background: #fef2f2; }
html[data-theme="night"] .is-input, html[data-theme="night"] .is-textarea, html[data-theme="night"] .is-select { background: #334155; border-color: #3c4043; color: #e2e8f0; }
html[data-theme="night"] .is-domande-wrap { border-color: #475569; }
html[data-theme="night"] .is-domanda-card { background: #1e293b; border-color: #475569; }
html[data-theme="night"] .is-icon-btn { background: #334155; border-color: #3c4043; color: #e2e8f0; }
html[data-theme="night"] .is-icon-btn:hover { background: #334155; }

/* Vista pubblica "Lezione dinamica" (cms/lezione-dinamica.php): un
   contenuto per step, uno alla volta, come slide. */
.dp-app { width: 100%; max-width: 42rem; margin: 0 auto; }
.dp-progress { font-size: .85rem; color: #666; margin-bottom: 6px; }
.dp-progress-bar { height: 6px; background: #e8eaed; border-radius: 3px; overflow: hidden; margin-bottom: 24px; }
.dp-progress-bar-fill { height: 100%; background: var(--color-primary); transition: width .25s ease; }
.dp-step { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 28px; width: 100%; box-sizing: border-box; }
.dp-step-title { margin: 0 0 12px; font-size: 1.15rem; }
.dp-instructions { color: #666; margin-bottom: 16px; }
.dp-text { font-size: 1.05rem; line-height: 1.6; margin-bottom: 24px; }
.dp-video-wrap { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 8px; background: #000; border-radius: 8px; overflow: hidden; }
.dp-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dp-video-fallback { font-size: .85rem; margin: 0 0 24px; }
.dp-audio-wrap { width: 100%; height: 152px; margin-bottom: 8px; border-radius: 8px; overflow: hidden; }
.dp-audio-wrap iframe { width: 100%; height: 100%; border: 0; }
.dp-audio-native { width: 100%; margin-bottom: 8px; }
.dp-pdf-frame { width: 100%; height: 32rem; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 24px; }
.dp-image { max-width: 100%; border-radius: 8px; margin-bottom: 24px; display: block; }
.dp-question { margin-bottom: 20px; }
.dp-question-text { font-weight: 600; margin-bottom: 8px; }
.dp-option { display: block; padding: 6px 0; }
.dp-done { text-align: center; padding: 48px 24px; background: #fff; border: 1px solid #ddd; border-radius: 10px; }
.dp-reader { width: 100%; max-width: 42rem; margin: 0 auto; }
.dp-reader:fullscreen, .dp-reader:-webkit-full-screen { background: #fff; padding: 24px; overflow-y: auto; max-width: none; }
.dp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dp-topbar .dp-progress { margin-bottom: 0; }
.dp-fullscreen-btn { font-size: .8rem; padding: 6px 12px; border-radius: 6px; border: 1px solid #ddd; background: #fff; color: var(--color-text); cursor: pointer; }
.dp-fullscreen-btn:hover { background: #e8eaed; }
.dp-nav { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
html[data-theme="night"] .dp-step, html[data-theme="night"] .dp-done, html[data-theme="night"] .dp-reader:fullscreen { background: #1e293b; border-color: #475569; }
html[data-theme="night"] .dp-fullscreen-btn { background: #1e293b; border-color: #3c4043; color: #e2e8f0; }
html[data-theme="night"] .dp-progress-bar { background: #334155; }

/* Tabelle nel contenuto ricco pubblico (sanitize_rich_content() ora accetta
   <table>, vedi includes/functions.php) — scoped ai wrapper usati da ogni
   pagina pubblica che renderizza quel contenuto, non un <table> globale, per
   non toccare le tabelle .admin-table del pannello admin. L'editor stesso
   (.gsrte-editable table, assets/shared/richEditor.css) ha già il proprio
   stile identico per coerenza durante la modifica. */
.block-col table, .class-board-body table, .admin-announcement-body table, .dp-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1em;
}
.block-col table td, .class-board-body table td, .admin-announcement-body table td, .dp-text table td {
  border: 1px solid var(--border-strong);
  padding: 0.4em 0.6em;
}
.block-col table.gsrte-table-borderless td, .class-board-body table.gsrte-table-borderless td,
.admin-announcement-body table.gsrte-table-borderless td, .dp-text table.gsrte-table-borderless td {
  border: none;
}

/* Assistente AI — admin/settings-ai.php (elenco provider) e
   admin/assistente-ai-chat.php (chat). Non un porting, vedi CLAUDE.md. */
.ai-default-badge { display: inline-block; font-size: .7rem; font-weight: 600; color: #fff; background: var(--color-primary); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.ai-provider-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ddd; }
html[data-theme="night"] .ai-provider-form { border-color: #475569; }
#ai-test-result { font-size: .85rem; color: #666; min-height: 1.2em; }
html[data-theme="night"] #ai-test-result { color: #94a3b8; }

.ai-chat-app { display: flex; flex-direction: column; height: 70vh; min-height: 420px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
html[data-theme="night"] .ai-chat-app { background: #1e293b; border-color: #475569; }
.ai-chat-titlebar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #ddd; }
html[data-theme="night"] .ai-chat-titlebar { border-color: #475569; }
.ai-chat-title-input { font-size: 1.05rem; font-weight: 500; background: transparent; color: var(--text-body); border: 1px solid transparent; border-radius: 4px; padding: 4px 8px; flex: 1; min-width: 8rem; }
.ai-chat-title-input:hover { border-color: #ddd; }
.ai-chat-title-input:focus { outline: none; border-color: var(--color-primary); }
.epub-edit-titlebar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #ddd; }
.epub-edit-title-input { font-size: 1.05rem; font-weight: 500; background: transparent; color: var(--text-body); border: 1px solid transparent; border-radius: 4px; padding: 4px 8px; flex: 1; min-width: 8rem; }
.epub-edit-title-input:hover { border-color: #ddd; }
.epub-edit-title-input:focus { outline: none; border-color: var(--color-primary); }
html[data-theme="night"] .epub-edit-titlebar { border-color: #475569; }

.ai-chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-inner { display: flex; flex-direction: column; max-width: 75%; }
.ai-msg-user .ai-msg-inner { align-items: flex-end; }
.ai-msg-assistant .ai-msg-inner { align-items: flex-start; }
.ai-msg-bubble { padding: 10px 14px; border-radius: 12px; word-break: break-word; font-size: .92rem; line-height: 1.45; }
/* Markdown minimo (grassetto/corsivo/titoli/elenchi) reso come nodi DOM veri
   da assets/js/ai-assistant-chat.js, mai da innerHTML sul testo grezzo —
   qui solo gli scarti di margine per non sembrare pagina web dentro una
   bolla di chat. */
.ai-msg-bubble p { margin: 0 0 .5em; }
.ai-msg-bubble p:last-child { margin-bottom: 0; }
.ai-msg-bubble h4, .ai-msg-bubble h5, .ai-msg-bubble h6 { margin: .6em 0 .3em; font-size: 1em; font-weight: 700; }
.ai-msg-bubble h4:first-child, .ai-msg-bubble h5:first-child, .ai-msg-bubble h6:first-child { margin-top: 0; }
.ai-msg-bubble ul, .ai-msg-bubble ol { margin: 0 0 .5em; padding-left: 1.3em; }
.ai-msg-bubble ul:last-child, .ai-msg-bubble ol:last-child { margin-bottom: 0; }
.ai-msg-bubble li { margin-bottom: .2em; }
.ai-msg-user .ai-msg-bubble { background: var(--color-primary); color: #fff; border-bottom-right-radius: 3px; }
.ai-msg-assistant .ai-msg-bubble { background: var(--color-gray-bg); color: var(--text-body); border-bottom-left-radius: 3px; }
.ai-msg-error .ai-msg-bubble { background: #fef2f2; color: #991b1b; }
.ai-msg-thinking .ai-msg-bubble { font-style: italic; color: #666; }
.ai-msg-provider-note { font-size: .72rem; color: #888; margin-top: 3px; padding: 0 4px; }
html[data-theme="night"] .ai-msg-assistant .ai-msg-bubble { background: #334155; }
html[data-theme="night"] .ai-msg-thinking .ai-msg-bubble { color: #94a3b8; }
html[data-theme="night"] .ai-msg-error .ai-msg-bubble { background: #3a1f1f; color: #fca5a5; }
html[data-theme="night"] .ai-msg-provider-note { color: #94a3b8; }
html[data-a11y-theme="contrast"] .ai-msg-assistant .ai-msg-bubble { background: #262626 !important; }
html[data-a11y-theme="contrast"] .ai-msg-thinking .ai-msg-bubble { color: #d1d5db !important; }
html[data-a11y-theme="contrast"] .ai-msg-error .ai-msg-bubble { background: #3a1f1f !important; color: #fca5a5 !important; }
html[data-a11y-theme="contrast"] .ai-msg-provider-note { color: #d1d5db !important; }
html[data-a11y-theme="contrast"] .ai-chat-app { background: #1a1a1a !important; border-color: #d1d5db !important; }
html[data-a11y-theme="cream"] .ai-msg-assistant .ai-msg-bubble { background: #f5ecd7 !important; }
html[data-a11y-theme="cream"] .ai-chat-app { background: #fdf6e3 !important; border-color: #e0d3ae !important; }
html[data-a11y-theme="blue"] .ai-msg-assistant .ai-msg-bubble { background: #e2ebf7 !important; }
html[data-a11y-theme="blue"] .ai-chat-app { background: #eef3fb !important; border-color: #c9d8ee !important; }
.ai-msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; max-width: 75%; }
.ai-msg-user .ai-msg-attachments { margin-left: auto; }
.ai-msg-attachment-image { max-width: 160px; max-height: 160px; border-radius: 8px; display: block; }
.ai-msg-attachment-file { font-size: .82rem; padding: 6px 10px; border-radius: 8px; background: var(--color-gray-bg); color: var(--text-body); text-decoration: none; }
html[data-theme="night"] .ai-msg-attachment-file { background: #334155; }

.ai-chat-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; }
.ai-attachment-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; background: var(--color-gray-bg); border-radius: 999px; padding: 4px 6px 4px 12px; }
html[data-theme="night"] .ai-attachment-chip { background: #334155; }
.ai-attachment-chip-remove { border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: #666; padding: 2px 6px; }
.ai-attachment-chip-remove:hover { color: #991b1b; }

.ai-chat-input-row { display: flex; align-items: flex-end; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid #ddd; }
html[data-theme="night"] .ai-chat-input-row { border-color: #475569; }
#ai-message-input { flex: 1; resize: vertical; min-height: 2.4em; font: inherit; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; }
html[data-theme="night"] #ai-message-input { background: #1e293b; border-color: #475569; color: var(--text-body); }

/* Riquadro "Genera con AI" — la chat condivisa (assets/js/ai-generate-chat.js)
   compare dentro questo stesso riquadro ovunque nella piattaforma: Flashcard,
   Giochi didattici, Lezione dinamica, Libro-gioco, Pagine. */
.ai-generate-box { background: var(--color-gray-bg); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; }
html[data-theme="night"] .ai-generate-box { background: #334155; }
html[data-a11y-theme="contrast"] .ai-generate-box { background: #1a1a1a !important; }
html[data-a11y-theme="cream"] .ai-generate-box { background: #f5ecd7 !important; }
html[data-a11y-theme="blue"] .ai-generate-box { background: #e2ebf7 !important; }
.ai-generate-box h2 { margin: 0 0 10px; font-size: 1rem; }

/* Chat AI condivisa da tutti i riquadri "Genera con AI" della piattaforma
   (assets/js/ai-generate-chat.js: Flashcard, Giochi didattici, Lezione
   dinamica, Libro-gioco, Pagine) — riusa le classi .ai-msg-*/
   .ai-chat-messages dell'Assistente AI (assets/css/style.css più sopra) per
   coerenza visiva, ma dentro un riquadro più compatto: qui non c'è una
   pagina intera dedicata, solo un piccolo pannello nell'editor dello
   strumento, quindi altezza fissa con scroll invece di 70vh. */
.ai-generate-chat-topbar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.ai-generate-chat-clear-btn { font-size: .78rem; color: #888; background: none; border: none; text-decoration: underline; cursor: pointer; padding: 0; }
.ai-generate-chat-clear-btn:hover { color: var(--color-primary); }
html[data-theme="night"] .ai-generate-chat-clear-btn { color: #94a3b8; }
html[data-a11y-theme="contrast"] .ai-generate-chat-clear-btn { color: #d1d5db !important; }
html[data-a11y-theme="cream"] .ai-generate-chat-clear-btn { color: #7a6c50 !important; }
html[data-a11y-theme="blue"] .ai-generate-chat-clear-btn { color: #55648e !important; }
.ai-generate-chat-messages { display: flex; flex-direction: column; gap: 10px; max-height: 320px; min-height: 0; overflow-y: auto; margin: 0 0 12px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
html[data-theme="night"] .ai-generate-chat-messages { border-color: #475569; background: #1e293b; }
html[data-a11y-theme="contrast"] .ai-generate-chat-messages { border-color: #d1d5db !important; background: #1a1a1a !important; }
html[data-a11y-theme="cream"] .ai-generate-chat-messages { border-color: #e0d3ae !important; background: #fdf6e3 !important; }
html[data-a11y-theme="blue"] .ai-generate-chat-messages { border-color: #c9d8ee !important; background: #eef3fb !important; }
.ai-generate-chat-messages:empty { display: none; margin: 0; padding: 0; border: none; }
.ai-generate-chat-row { display: flex; gap: 8px; align-items: flex-end; }
.ai-generate-chat-row textarea { flex: 1; resize: vertical; }

/* Selezione multipla + cancellazione bulk nella tabella carte. */
.fc-bulk-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.fc-select-all-label { display: flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }
.fc-checkbox-col { width: 2rem; }