:root {
    --widthLsidebar: 280px;
    --widthSelector: 180px;
    /* --widthProblem: 160px; */
    --heightsidebar: 100vh;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
a {
    text-decoration: none;
}
/* ========SLIDER CHIUDI============= */
.switch {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--widthLsidebar);
    height: 34px;
    background-color: rgb(92, 94, 236);
    cursor: pointer;
    z-index: 101;
    display: flex;
    align-items: center;
    transition: width .3s ease;
}
.fm-sb-close {
    overflow: hidden;
    text-align: center;
    font-size: 20px;
    color: white;
    cursor: pointer;
    margin-left: auto;
    width: 68px;
    opacity: 1;
    transition: width .3s ease, opacity .3s ease;
}
.fm-sb-slider {
    cursor: pointer;
    text-align: center;
    height: 26px;
    width: 26px;
    background-color: white;
    margin-left: auto;
    margin-right: 5px;
    flex-shrink: 0; /* Non si restringe */
}
#IObar{
    display: none;
}
/* ========FINE SLIDER CHIUDI============= */
.sidebar {
    background: rgb(176, 222, 252);
    height: calc(100vh - 34px);
    width: var(--widthLsidebar);
    position: fixed;
    top: 34px;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    transition: width .3s ease, opacity .3s ease;
}
/* Stato chiuso: CSS-driven, no JS animations */
body.fm-sidebar-closed .switch { width: 34px; }
body.fm-sidebar-closed .fm-sb-close { width: 0; opacity: 0; }
body.fm-sidebar-closed .sidebar { width: 0; opacity: 0; pointer-events: none; }
/* ======== SELETTORI ============= */
.sel-wrapper {
    /* Rimuovi position: fixed; top: 20px; */
    /* margin: 34px 0 0 0; <-- Rimuovi o adatta se la spaziatura è ancora necessaria */
    width: 100%; /* Precedentemente var(--widthLsidebar) */
    background-color: blueviolet;
    /* display: block; <-- Rimuovi se non necessario, div è block di default */
    flex-shrink: 0; /* Non si restringe */
    /* Gli stili per .sel-lab e .sel possono rimanere simili,
       ma position: fixed al loro interno andrà rimosso se erano relativi
       alla viewport. Dovranno essere posizionati rispetto a .sel-wrapper */
    padding: 13px 0; /* Esempio per ricreare il padding verticale */
    box-sizing: border-box;
}
/* `.fm-sb-lab` — sidebar label per il triplet Indirizzo/Classe/Materia. */
.fm-sb-lab {
    width: 80px;
    text-align: right;
    color: white;
    display: inline-block; /* Per allineamento con select */
    margin-right: 5px;
    vertical-align: middle;
}
/* `.fm-sb-sel` — sidebar <select> del triplet iis/cls/mater. Non
 * confondere con `.sel-iis`/`.sel-cls`/`.sel-mater` (ID coupled al
 * curriculum JS) né con `.sel-wrapper` / `.sel-session-banner` /
 * `.sel-action-link` (mantenuti, scope diverso). */
.fm-sb-sel {
    width: var(--widthSelector);
    vertical-align: middle;
    margin-bottom: 5px;
}
/* Potresti aver bisogno di un wrapper per ogni coppia label+select per gestire meglio il layout */
.sel-wrapper > br { display: none; } /* Nascondi i <br> se riorganizzi il layout interno */
/* ========FINE SELETTORI============= */
/* ======== SCROLLBAR (sidebar) =============
 * `.fm-sb-scroll` — contenitore dei button sezione (Mappe/Lab/Eser/
 * Verif/BES/RisDoc) e dei pannelli `.fm-sb-panel`. */
.fm-sb-scroll {
    width: 100%;
    flex-grow: 1; /* OCCUPA LO SPAZIO VERTICALE RIMANENTE */
    min-height: 0; /* Necessario per il corretto funzionamento di flex-grow con overflow */
    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer e Edge */
}

/* Nascondi la scrollbar in WebKit (Chrome, Safari, Edge Chromium) */
.fm-sb-scroll::-webkit-scrollbar {
    display: none;
}

.fm-sb-scroll:hover {
    overflow-y: auto;
}

/* Webkit scrollbar custom styling del contenitore #fm-sb-scroll. */
#fm-sb-scroll::-webkit-scrollbar-track {
    border-radius: 2px;
}
#fm-sb-scroll::-webkit-scrollbar {
    width: 5px;
    background-color: #F7F7F7;
}
#fm-sb-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #BFBFBF;
}
/* ======== FINE SCROLLBAR ============= */
/* ======== BOTTONI =============
 * `.fm-sb-sec` — button sezione sidebar (Mappe/Lab/Eser/Verif/BES/
 * RisDoc). Lookup/colore per `[data-sidepage="<key>"]`. */
.fm-sb-sec {
    position: sticky;
    width: var(--widthLsidebar);
    padding-right: 10px;
    border-style: outset;
    cursor: pointer;
    z-index: 17;
}

.fm-sb-sec:not([data-sidepage="mappe"]) {
    margin: 10px 0 0 0;
}

.fm-sb-sec[data-sidepage="mappe"] {
    top: 0;
    border-color: rgb(134, 239, 181);
    background: rgb(134, 239, 181);
}
.fm-sb-sec[data-sidepage="lab"] {
    top: 30;
    border-color: rgb(134, 190, 239);
    background-color: rgb(134, 190, 239);
}
.fm-sb-sec[data-sidepage="eser"] {
    top: 60;
    border-color: rgb(240, 221, 152);
    background-color: rgb(240, 221, 152);
}
.fm-sb-sec[data-sidepage="verif"] {
    top: 90;
    border-color: rgb(240, 221, 152);
    background-color: rgb(255, 176, 0);
}
.fm-sb-sec[data-sidepage="bes"] {
    top: 120;
    border-color: rgb(239, 134, 134);
    background-color: rgb(239, 134, 134);
}
.fm-sb-sec[data-sidepage="risdoc"] {
    top: 150;
    border-color: rgb(233, 87, 206);
    background-color: rgb(237, 105, 213);
}
/* Regole legacy .btn-es / .btn-esAct / .btn-esCopy (position:absolute)
   rimosse: applicavano absolute+right:0 ai pulsanti upbar (ATTIVA/
   GENERA-VER/COPIA-ESER), estraendoli dal flex flow di .wrapbtn-es2 e
   sovrapponendoli a destra dell'upbar. Le regole corrette per upbar
   vivono in layout_es.css (scope body.exercise-context). I pulsanti
   sidebar usano selettori .btn-es_sidebar / .btn-esAct_sidebar
   definiti più sotto. */
.btn-esactive {
    border-style: inset;
}
.fm-sb-sec[data-sidepage="mappe"]:hover {
    background-color: rgb(162, 240, 197);
}
.fm-sb-sec[data-sidepage="lab"]:hover {
    background-color: rgb(150, 195, 234);
}
.fm-sb-sec[data-sidepage="eser"]:hover {
    background-color: rgb(240, 221, 152);
}
.fm-sb-sec[data-sidepage="bes"]:hover {
    background-color: rgb(236, 161, 161);
}
.fm-sb-sec[data-sidepage="risdoc"]:hover {
    background-color: rgb(243, 138, 224);
}
.fm-sb-sec.active {
    border-style: inset;
}
/* Sidebar tooltip — hint "ATTIVA" sotto i select. */
.fm-sb-tip {
    position: absolute;
    background-color: #333;
    color: #fff;
    text-align: center;
    margin: 0px;
    border-radius: 3px;
    display: none;
    z-index: 1000;
    width: 200px;
    height: 45px;
    word-wrap: break-word;
}
#control-panel-tooltip {
    height: 58px;
    width: 222px;
    position: absolute;
    left: 33px;
    top: 224px;
    z-index: 1000;
    padding: 10px;
    display: none;
}
/* ========FINE BOTTONI============= */
/* ======== CONTENUTI BOTTONI ==========
 * `.fm-sb-panel` — pannello contenuto della sezione sotto ogni button.
 * ID: `#fm-sp-<key>` con `data-sidepage="<key>"` coerente col button. */
.fm-sb-panel {
    display: none;
}
#fm-sp-mappe {
    padding: 9px 0;
    position: relative;
    top: 0;
    z-index: 16;
    background-color: rgb(185, 215, 185);
}
#fm-sp-lab {
    padding: 9px 0;
    position: relative;
    top: 0;
    z-index: 14;
    background-color: rgb(169, 169, 241);
}
#fm-sp-eser {
    padding: 9px 0;
    position: relative;
    top: 0;
    z-index: 12;
    background-color: rgb(238, 233, 201);
}
#fm-sp-verif {
    padding: 9px 0;
    position: relative;
    top: 0;
    z-index: 10;
    background-color: rgb(255, 203, 88);
}
#fm-sp-bes {
    padding: 9px 0;
    position: relative;
    top: 0;
    z-index: 8;
    background-color: rgb(237, 172, 168);
}
#fm-sp-risdoc {
    padding: 9px 0;
    position: relative;
    top: 0;
    z-index: 6;
    background-color: rgb(243, 138, 224);
}
/* .hiding-panel / #hiding-panel-[0-4] rimossi in Phase 6 cleanup:
   mascheravano i pulsanti di sidebar sottostanti ed erano inutili. */
/* ======== FINE CONTENUTI BOTTONI ========== */
/* ======== IFRAME ============= */
.frame {
    /* overflow: hidden; */
    background-color: #000;
    height: 100%;
        align-content: center;
}
iframe {
    height: 100vh;
    background: #ccc;;
    min-width: 100%;
}
.frame div.warning-message#iframe-specific-warning {
    color: #FFFFFF; /* Testo bianco per contrasto con lo sfondo nero del .frame */
    font-weight: bold;
    text-align: center;
    font-size: 1.1em;
    padding: 15px;
    margin: 0; /* Rimuove margini del paragrafo per un miglior controllo del flex centering */
    background-color: brown;
}
.frame div.warning-message#iframe-specific-warning .icon {
    font-size: 10em; /* Dimensione dell'icona */
    margin-right: 10px;
    /* L'icona specifica (es. Unicode o FontAwesome) verrà aggiunta via JS */
}
.frame div.warning-message#iframe-specific-warning .icon.danger::before {
    content: "⚠️"; /* Icona di pericolo Unicode */
    color: #ffc107; /* Giallo ambra */
}
.frame div.warning-message#iframe-specific-warning .icon.info::before {
    content: "ℹ️"; /* Icona info Unicode */
    color: #17a2b8; /* Ciano */
}
/* ======== FINE IFRAME ============= */
#header {
    width: var(--widthLsidebar);
    height: 20px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    border-bottom: 1px solid #000;
    background: #F1EFE2;
    justify-content: center;
    align-items: top;
    z-index: 10;
}
div.slide-right p {
    /* -moz-animation: 15s slide-right;
  -webkit-animation: 15s slide-right;
  -o-animation: 15s slide-right; */
    animation: 15s slide-right;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* margin:0; */
}
@keyframes slide-right {
    from {
        margin-left: 100%;
        width: 300%;
    }
    to {
        margin-left: -280%;
        width: 300%;
    }
}
/* Style the button that is used to open and close the collapsible content */
/* Barra esercizi */
.upbar {
    position: absolute;
    /* min-width: 100% - var(--widthLsidebar); */
    overflow: hidden;
    background: #5959a9;
    height: 54px;
    /* text-align: top; */
    float: top;
    text-align: left;
    display: flex;
    align-items: center;
    /* Phase 20 — contenuto allineato a sinistra (dopo il padding-left
     * dinamico che compensa la sidebar aperta/chiusa). Così anche con
     * sidebar chiusa i controlli restano raggruppati a sx senza lasciare
     * il gap centrale del vecchio justify-content:center. */
    justify-content: flex-start;
    z-index: 2;
}
.selwrap {
    padding: 5px;
    margin: 0px 30px 0px 0px;
    /* flex: 1; */
    /* text-align: center; */
}
.self {
    width: 100%;
    /* text-align: center; */
}
.presenceMessage {
    display: inline-block;
    margin-left: 10px;
    color: red;
    font-weight: bold;
}
.selwrapbtn-es {
    /* position: relative; */
    z-index: 17;
    margin: 10px 0px 10px 0px;
    top: 140px;
    /* display: flex; */
    align-items: center;
    padding: 5px;
    border: 3px red dotted;
    width: -webkit-fill-available;
}
.wrapbtn-es_sidebar {
    display: flex;
     align-items: center;
    gap: 10px;
}
.btn-es_sidebar {
    border-style: outset;
    height: 20px;
}
.btn-esAct_sidebar {
    width: 90px;
    background: #f2ff00;
    border-color: #a4a632;
    color: rgb(0, 0, 0);
}
#btnAct_sidebar{
    cursor: pointer;
    transition: background-color 0.3s, border-style 0.1s;
}
#btnAct_sidebar:active {
    border-style: inset;
}
.materia, .documenti{
    position: relative;
    display: flex
}
.linkref {
    display: flex;
    position: relative;
}
/* Phase G7 — sidepage links usano .linkref per il click handler SPA
   ma devono restare INLINE accanto a numarg (no flex break-line). */
.fm-db-block .linkref,
.fm-sb-panel .linkref {
    display: inline;
}
.numArg{
    margin-right: 2px;;
}
.argomento {
    margin-left: 2px;
}
.input-wrapper-num_Arg{
    display: flex;
    margin-bottom: 2px;
    margin-left: -35px;
}
.display-toggle{
    cursor: pointer;
    font-size: 21px;
    padding-right: 6px;
    user-select: none;
    margin-top: -6px;
}

/* Stile per opacizzare il wrapper quando l'elemento è nascosto */
.input-wrapper-linkref[data-hidden="true"] {
    opacity: 0.4;
    background-color: rgba(200, 200, 200, 0.3);
    border-radius: 5px;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Stile normale per il wrapper */
.input-wrapper-linkref {
    transition: opacity 0.3s ease, background-color 0.3s ease;
}
.input-wrapper-href {
    width: -webkit-fill-available;
    display: flex;
    align-items: flex-end;
    margin-bottom: 6px;
    margin-left: -33px;
}
.input-wrapper-href-hide {
    width: -webkit-fill-available;
    display: none; /* Nascosto di default */
    align-items: flex-end;
    margin-bottom: 6px;
    margin-left: -33px;
}
.input-wrapper-href-hide.show {
    display: flex; /* Mostra quando ha la classe 'show' */
}
.input-numArg {
    width: 35px;
    text-align: center;
    height: 20px;
    resize: none;
    overflow: hidden;
}
.input-argomento {
    width: -webkit-fill-available;
    height: 20px;
    /* margin-bottom: 10px; */
    margin-left: 4px;
    margin-right: 4px;
    overflow: hidden;
    resize: none;
}
.h-link-opener {
    margin: 0px 2px 0px 0px;
    width: 50px;
    cursor: pointer;
    color: #0066cc;
    text-decoration: underline;
}
.input-href-hide,
.input-href {
    height: 20px;
    /* margin-bottom: 10px; */
    margin-left: 2px;
    margin-right: 5px;
    overflow: hidden;
    resize: none;
    width: -webkit-fill-available;
}
.input-href-hide{
    width: 217px;
}
.addArgBtn, .delArgBtn, .addArgBtn_from0, .DriveBtn {
    width: 23px;
    /* Larghezza del pulsante */
    height: 23px;
    /* Altezza del pulsante */
    background-color: #f0f0f0;
    /* Colore di sfondo bianco grigiolino */
    color: black;
    /* Colore del testo */
    border: 2px outset #ccc;
    /* Bordo outset */
    border-radius: 5px;
    /* Angoli arrotondati (opzionale) */
    font-size: 24px;
    /* Dimensione del simbolo */
    display: flex;
    /* Utilizza Flexbox */
    justify-content: center;
    /* Centra orizzontalmente */
    align-items: center;
    /* Centra verticalmente */
    cursor: pointer;
    /* Cambia il cursore al passaggio del mouse */
    transition: background-color 0.3s, border-style 0.1s;
    /* Transizione per lo sfondo e il bordo */
    position: sticky;
}
.DriveBtn {
    width: 30px;
    height: 23px;
    margin-left: 30px;
}
#from0{
    left: 235px;
    top: 13px;
}
.addArgBtn {
    left: 229px;
}
.delArgBtn {
    left: 253px;
    background-color: #f78080;
    font-size: medium;
}
.delArgBtn:active {
    border-style: inset;
    /* Bordo inset al clic */
    background-color: #e33e3e;
}
.addArgBtn:hover, .addArgBtn_from0:hover {
    background-color: #e0e0e0;
    /* Colore di sfondo al passaggio del mouse */
}
.addArgBtn:active, .addArgBtn_from0 {
    border-style: inset;
    /* Bordo inset al clic */
    background-color: #d0d0d0;
    /* Colore di sfondo al clic */
}
.bannerNotReg{
    margin-left: auto;
}
.tool_sidebar {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}
.checkbox-wrapper-accessFile,
.checkbox-wrapper-saveFile {
    padding-right: 5px;
    border-radius: 20em;
    height: 21px;
    display: flex;
    align-items: flex-end;
    /* align-items: center; */
}
.checkbox-wrapper-saveFile {
    background-color: orange;
    margin-right: 5px;
}
.checkbox-wrapper-accessFile {
    color: white;
    background-color: green;
}
.saveFile{
    background-color: white;
}
label[for="saveFile"] {
    margin-left: 2px;
}
.suggestions {
    position: absolute;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 1000;
}
.suggestion-item {
    padding: 5px;
    cursor: pointer;
}
.suggestion-item:hover {
    background: #f0f0f0;
}
.highlight {
    background-color: yellow;
    font-weight: bold;
}
/* Barra inferiore */
#bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    /* padding: 10px 0; */
    z-index: 1000; /* Assicura che sia sopra il contenuto */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}
#bottom-bar .bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
#bottom-bar .bar-content-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
#bottom-bar a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s;
}
#bottom-bar a:hover {
    background-color: #555;
    border-radius: 3px;
}
/* Stile per i banner modali */
.resource-placeholder {
    border: 1px dashed #ccc;
    padding: 20px;
    margin-top: 10px;
    background-color: #f9f9f9;
    min-height: 50px;
}
.fm-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 25px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1002;
    max-width: 90%;
    width: 650px; /* Aumentato leggermente per il contenuto dei cookie */
    border-radius: 8px;
    max-height: 90vh; /* Leggermente più alto per contenuto cookie */
    overflow-y: auto;
}
.fm-modal .fm-modal-body h2 { /* Specificità per h2 dentro .fm-modal-body */
    margin-top: 0;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.5em; /* Dimensione titolo modal */
}
.fm-modal span { /* Stile generico, potrebbe necessitare affinamento */
    /* margin-bottom: 15px; Questo potrebbe essere troppo generico */
    color: #555;
    font-size: 0.95em;
}
.fm-modal p {
    font-size: 0.95em;
    line-height: 1.5;
    color: #555;
    margin-bottom: 10px;
}
.fm-modal a {
    color: #007bff;
    text-decoration: none;
}
.fm-modal a:hover {
    text-decoration: underline;
}
.fm-modal-close {
    display: block;
    margin: 20px auto 0;
    padding: 10px 20px;
    background-color: #6c757d; /* Grigio per coerenza con rifiuta */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}
.fm-modal-close:hover {
    background-color: #545b62;
}
/* Overlay per lo sfondo (dal tuo CSS) */
#fm-modal-overlay { /* Prefix fm- per coerenza (ex #modal-overlay) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Leggermente più scuro */
    z-index: 1001;
}
/* Barra inferiore (dal tuo CSS) */
#bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}
#bottom-bar .bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 5px 20px; */
}
#bottom-bar a {
    color: white;
    text-decoration: none;
    /* padding: 8px 12px; */
    margin-left: 10px; /* Spazio tra i link */
    transition: background-color 0.3s;
}
#bottom-bar a:hover {
    background-color: #555;
    border-radius: 3px;
}
/* Stili specifici per il MODAL dei Cookie */
#fm-cookie-modal .fm-cookie-cat {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 15px;
    background-color: #fdfdfd;
}
#fm-cookie-modal .fm-cookie-cat-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 8px;
}
#fm-cookie-modal .fm-cookie-cat-title label {
    cursor: pointer;
}
#fm-cookie-modal .fm-cookie-cat-title .always-active {
    font-style: italic;
    color: #28a745; /* Verde per sempre attivi */
    font-size: 0.9em;
    font-weight:normal;
}
#fm-cookie-modal .fm-cookie-cat-description {
    font-size: 0.9em;
    color: #444;
    margin-bottom: 0;
    line-height: 1.4;
}
#fm-cookie-modal .fm-cookie-modal-actions {
    display: flex;
    justify-content: space-around; /* Spazio tra i bottoni */
    gap: 10px;
    margin-top: 25px;
    margin-bottom:15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
#fm-cookie-modal .fm-cookie-modal-actions button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95em;
    flex-grow: 1; /* Fa sì che i bottoni occupino spazio simile */
}
#fm-cookie-modal #accept-all-cookies-modal {
    background-color: #28a745; /* Verde */
    color: white;
}
#fm-cookie-modal #accept-all-cookies-modal:hover {
    background-color: #218838;
}
#fm-cookie-modal #confirm-choices-cookies-modal {
    background-color: #007bff; /* Blu */
    color: white;
}
#fm-cookie-modal #confirm-choices-cookies-modal:hover {
    background-color: #0056b3;
}
#fm-cookie-modal #reject-all-cookies-modal {
    background-color: #dc3545; /* Rosso */
    color: white;
}
#fm-cookie-modal #reject-all-cookies-modal:hover {
    background-color: #c82333;
}
/* Switch styles (invariati dalla versione precedente, ma assicurati siano presenti) */
.switch_cookies {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.switch_cookies input { opacity: 0; width: 0; height: 0; }
.slider_cookies {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
}
.slider_cookies:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
}
input:checked + .slider_cookies { background-color: #007bff; } /* Blu per coerenza */
input:focus + .slider_cookies { box-shadow: 0 0 1px #007bff; }
input:checked + .slider_cookies:before { transform: translateX(26px); }
.slider_cookies.round { border-radius: 24px; }
.slider_cookies.round:before { border-radius: 50%; }
/* Responsive */
@media (max-width: 768px) {
    .fm-modal {
        width: 95%; /* Più largo su mobile */
        padding: 10px 15px;
        font-size: small;
    }
    /* #fm-cookie-modal .fm-cookie-modal-actions { */
        /* flex-direction: column; Bottoni in colonna su mobile */
        /* flex-direction: column; */
    /* } */
    #fm-license-section{
        text-align: center;
    }
    #fm-cookie-modal .fm-cookie-modal-actions button {
        width: 100%; /* Bottoni a piena larghezza */
        margin-bottom: 10px;
    }
    /* #fm-cookie-modal .fm-cookie-modal-actions button:last-child {
        margin-bottom: 0;
    } */
    #bottom-bar .bar-content {
        /* flex-direction: column;
                */
        display: inline-flex;
        justify-content: space-between;
        width: 94%;
        padding: 0px 20px;
    }
    
    #bottom-bar a {
        margin-left: 0;
        /* padding: 0; */
        /* display: block; Link a blocco intero su mobile */
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .slider_cookies {
        width: 44px;
    }
    .slider_cookies:before {
        left: 0px;
    }
}

/* Stili specifici (opzionali) per il contenuto del modale licenza */
#fm-license-modal .license-details {
    font-size: 0.95em;
    line-height: 1.6;
    color: #333; /* Colore testo standard */
}

#fm-license-modal .license-details b {
    /* display: block; Fa andare "Copyright:" a capo */
    margin-bottom: 5px;
    color: #111; /* Un po' più scuro per il titolo */
}

#fm-license-modal .license-details a {
    color: #007bff; /* Colore standard per i link */
    text-decoration: none;
}

#fm-license-modal .license-details a:hover {
    text-decoration: underline;
}

#fm-license-modal .license-details img {
    height: 1.2em; /* Altezza unificata per le icone CC */
    margin-left: .2em;
    vertical-align: -0.2em; /* Aggiustamento fine per l'allineamento verticale */
    border: none; /* Assicura che non ci siano bordi strani sulle immagini linkate */
}

.control-panel {
    max-width: 600px;
    margin: 4px 0px;
    padding: 2px 5px;
    font-family: Arial, sans-serif;
    background: #96b3df;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none; /* Nascosto di default */
}

/* Header del pannello di controllo (cliccabile per espandere/comprimere) */
.control-panel-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.control-panel-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.control-panel-title {
    margin: 0;
    font-size: 10pt;
    font-weight: bold;
}

.control-panel-toggle {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.control-panel-toggle.expanded {
    transform: rotate(180deg);
}

/* Contenuto espandibile del pannello */
.control-panel-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}

.control-panel-content.expanded {
    max-height: 500px; /* Altezza massima sufficiente per il contenuto */
    opacity: 1;
}

/* Container dei pulsanti come griglia 3x3 */
.control-panel .btn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    margin: 10px 0;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
}
.control-panel-class {
    background-color: #8edf8e;
    border-bottom: outset;
    position: sticky;
    top: 0;
    z-index: 900;
    display: none; /* Nascosto di default */
}
.control-panel-class .btn-grid-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
}
.control-panel-class .btn-grid-panel .btn-syncG-class {
    width: auto;
    min-width: 0;
    font-size: 12px;
    padding: 2px 4px;
}
.btn-stop-sync {
    background: #ff9800 !important;
    display: none !important;
}
.btn-stop-sync.visible {
    display: flex !important;
}
.btn-stop-sync:hover {
    background: #e68900 !important;
}
.btn-close-panel {
    background: #607d8b !important;
    display: none !important;
}
.btn-close-panel.visible {
    display: flex !important;
}
.btn-close-panel:hover {
    background: #455a64 !important;
}

.btn-syncG {
    background: #4CAF50;
    color: white;
    padding: 0px 15px;
    width: 60px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-syncG-class {
    background: #4CAF50;
    color: white;
    padding: 0px 0px;
    width: 119px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-syncG-class:hover {
    background: #45a049; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-syncG:hover { 
    background: #45a049; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-syncG.btn-danger { 
    background: #f44336; 
}
.btn-syncG.btn-danger:hover { 
    background: #d32f2f; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}
.btn-syncG.btn-info { 
    background: #2196F3; 
}
.btn-syncG.btn-info:hover { 
    background: #1976D2; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}
.btn-syncG.btn-warning { 
    background: #ff9800; 
}
.btn-syncG.btn-warning:hover { 
    background: #f57c00; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}
.btn-syncG.btn-secondary { 
    background: #6c757d; 
}
.btn-syncG.btn-secondary:hover { 
    background: #5a6268; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}
.result {
    margin: 20px 0;
    padding: 15px;
    border-radius: 5px;
    display: none;
}
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
/* ==== Sidebar-aware content layout ==== */
/* Pagine con sidebar aperta lasciano a sinistra --widthLsidebar.
   Sidebar chiusa (body.fm-sidebar-closed) → solo 34px per il toggle ☰.
   Transition smooth accompagna l'animazione sidebar.

   Phase 21 — margin-top 0 di default (pagine senza upbar: mappe, risdoc,
   bes, home). Scoped override `body.fm-has-upbar` aggiunge i 34px di
   toggle-bar SOLO per le pagine esercizio/verifica. */
#fm-content,
main#fm-content,
.pagestyle,
body > main {
    margin-left: var(--widthLsidebar);
    margin-top: 0;
    min-height: 100vh;
    transition: margin-left .3s ease;
    box-sizing: border-box;
}
body.fm-has-upbar #fm-content,
body.fm-has-upbar main#fm-content,
body.fm-has-upbar .pagestyle,
body.fm-has-upbar > main {
    margin-top: 34px;
    min-height: calc(100vh - 34px);
}
/* G9.12 — quando topbar moderna e' attiva, la upbar legacy e' nascosta
 * (display:none) e la .fm-topbar e' position:sticky top:0. I padding/
 * margin riservati per la upbar legacy non servono piu' → 0. */
body.fm-topbar-active.fm-has-upbar {
    padding-top: 0 !important;
}
body.fm-topbar-active.fm-has-upbar #fm-content,
body.fm-topbar-active.fm-has-upbar main#fm-content,
body.fm-topbar-active.fm-has-upbar .pagestyle,
body.fm-topbar-active.fm-has-upbar > main {
    margin-top: 0 !important;
    min-height: 100vh;
}
body.fm-sidebar-closed #fm-content,
body.fm-sidebar-closed main#fm-content,
body.fm-sidebar-closed .pagestyle,
body.fm-sidebar-closed > main {
    margin-left: 34px;
}
/* G20.7 — modalita' embed (iframe ?embed=1): la sidebar non e' renderizzata,
 * quindi azzera il margin-left riservato allo spazio sidebar. Vale anche
 * per il toggle ☰ (34px) di body.fm-sidebar-closed. */
body.fm-embed #fm-content,
body.fm-embed main#fm-content,
body.fm-embed .pagestyle,
body.fm-embed > main {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.fm-external-iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 34px);
    border: 0;
    background: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 13 — Student → resource auth widget (in sidebar).
   Sostituisce il legacy .selwrapbtn-es "ADMIN RESTRICTED ZONE".
   ══════════════════════════════════════════════════════════════════ */
.fm-resource-auth { padding: .5rem; margin: .25rem .5rem; background: #f4f7fc; border: 1px solid #d6e0f0; border-radius: 4px; font-size: 12px; }
.fm-resource-auth small { display: block; color: #555; margin-bottom: 4px; font-weight: bold; }
.fm-resource-form { display: grid; gap: 4px; }
.fm-resource-form input { padding: 4px 6px; border: 1px solid #ccd6e8; border-radius: 3px; font-size: 12px; }
.fm-resource-form button { padding: 4px 8px; font-size: 11px; }
.fm-resource-msg { color: #c02a2a; margin: 4px 0 0; font-size: 11px; }
.fm-resource-grant { display: flex; flex-direction: column; gap: 4px; }
.fm-resource-grant strong { color: #1a4ea8; font-size: 13px; }

/* Edit-section button: dentro .fm-sb-panel, mostrato solo admin/teacher */
/* Phase 18 — btnAct_sidebar discreto (pill top-right). Non piu
   full-width giallo/rosso accecante. */
.fm-sb-panel .btn-esAct_sidebar {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 5;
    width: auto;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: inherit;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 10px;
    opacity: 0.65;
    transition: opacity 0.15s, background 0.15s;
}
.fm-sb-panel .btn-esAct_sidebar:hover { opacity: 1; background: rgba(0, 0, 0, 0.15); }
.fm-sb-panel .btn-esAct_sidebar.btn-esactive {
    background: rgba(255, 107, 0, 0.85);
    color: #fff;
    border-color: #c04700;
    opacity: 1;
}
.fm-sb-panel .btn-esAct_sidebar strong { font-weight: 600; letter-spacing: 1px !important; }
/* Il .fm-sb-panel deve essere relative per l'absolute position del btn */
.fm-sb-panel { position: relative; }
body.fm-dark .fm-sb-panel .btn-esAct_sidebar {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
body.fm-dark .fm-sb-panel .btn-esAct_sidebar:hover { background: rgba(255, 255, 255, 0.2); }
.fm-sb-panel[data-edit-active="1"] { outline: 2px dashed #f2ff00; outline-offset: -2px; }

/* Phase 21 — btn edit iniettato in OGNI .fm-db-head (uno per titolo
 * materia). L'originale direct-child resta come marker auth ma è
 * nascosto via :has() quando gli head-btn sono presenti. */
.fm-db-head {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.fm-db-head .js-edit-section {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fm-db-head .js-edit-section strong {
    font-weight: normal !important;
    letter-spacing: 0 !important;
}
.fm-sb-panel:has(.fm-db-head .js-edit-section) > .js-edit-section {
    display: none;
}
/* Phase 24.48 + 24.49 — bottone "✨ Nuova categoria" in cima al sidepage panel */
.fm-newcat-host {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.02);
}
.fm-newcat-btn {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.04);
    color: inherit;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 4px 8px;
}
.fm-newcat-btn:hover { background: rgba(0, 0, 0, 0.08); }
body.fm-dark .fm-newcat-host {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
body.fm-dark .fm-newcat-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: #e0e0e8;
}
body.fm-dark .fm-newcat-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* Phase 24.43 + 24.47 — "+ Nuovo" per-sezione (.fm-section-add o
 * .fm-cat-add per backward-compat): visibile solo nella sezione attiva.
 * data-edit-active vive sul singolo <ul.fm-db-block>, non sul .fm-sb-panel
 * intero, così l'edit mode è scoped alla sezione cliccata. */
.fm-db-head .fm-section-add,
.fm-db-head .fm-cat-add {
    display: none;
    margin-left: 4px;
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}
.fm-db-block[data-edit-active="1"] .fm-db-head .fm-section-add,
.fm-db-block[data-edit-active="1"] .fm-db-head .fm-cat-add {
    display: inline-block;
}
/* Item actions (✎ 🗑 👁 📥) per-sezione: visibili solo se il block è attivo. */
.fm-item-actions { display: none; }
.fm-db-block[data-edit-active="1"] .fm-item-actions {
    display: inline-flex;
    gap: 2px;
    margin-right: 6px;        /* Phase G7 — separa da numarg + link */
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 13.5 — Darkmode mini icon nel banner sidebar.
   Sostituisce il pulsante grosso DARK/LIGHT dell'upbar legacy.
   ══════════════════════════════════════════════════════════════════ */
.fm-darkmode-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 6px;
    background: transparent;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 50%;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1;
    vertical-align: middle;
    opacity: .55;
    transition: opacity .15s, background .15s, transform .1s;
}
.fm-darkmode-mini:hover { opacity: 1; background: rgba(0,0,0,.06); transform: scale(1.04); }
.fm-darkmode-mini:active { transform: scale(0.95); }
.fm-darkmode-mini:focus-visible { outline: 2px solid #0a4fad; outline-offset: 2px; opacity: 1; }
.fm-darkmode-mini .darkmode-icon { font-size: .95rem; line-height: 1; }
body.fm-dark .fm-darkmode-mini { border-color: rgba(255,255,255,.18); color: #ffd700; opacity: .5; }
body.fm-dark .fm-darkmode-mini:hover { background: rgba(255,255,255,.08); opacity: 1; }

/* ══════════════════════════════════════════════════════════════════
   PHASE 14 — Session banner AA-safe palette.
   Sostituisce inline styles in sidebar.php. Contrasto WCAG AA garantito
   (≥ 4.5:1 testo normale, ≥ 3:1 testo grande/bold).
   ══════════════════════════════════════════════════════════════════ */
/* Phase 18 — session banner minimale: una riga flex con user + link
   separati da spazi, niente chip/pill colorate, contrast AA su bg
   neutro. Dark mode inverte automatico via body.fm-dark. */
/* Phase 20 — banner session a 2 righe, entrambe centrate.
 *   riga 1: 👤 username + badges (super-admin ecc.)
 *   riga 2: links di navigazione (Area docente / Admin / Analytics / Tools)
 * Logout sposato in .sel-wrapper-actions accanto al darkmode-btn. */
.fm-session-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    margin: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: inherit;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}
.fm-session-banner strong { font-weight: 600; }
.fm-session-banner .fm-session-user {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
}
.fm-session-banner .fm-session-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
}
.fm-session-banner a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
    white-space: nowrap;
}
.fm-session-banner a:hover { opacity: 1; text-decoration: underline; }
.fm-session-banner a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Phase 18 — sel-wrapper-actions: riga sotto i 3 select con
   Curriculum link + dark toggle centrati. */
.sel-wrapper-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
/* Darkmode btn: cerchio perfetto. layout_es.css impone `min-width:90px`
 * per la versione dentro esercizi (pill) — forza unset + dimensione
 * fissa qui così nella sel-wrapper resta rotondo simmetrico ai pill
 * Curriculum/Logout ai lati. Classe funzionale `.fm-sb-dark` (lookup
 * JS via querySelector in bootstrap-compat / student-resource-auth). */
.sel-wrapper-actions .fm-sb-dark {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1 !important;
    color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
    flex-shrink: 0;
}
.sel-wrapper-actions .fm-sb-dark:hover { background: rgba(255, 255, 255, 0.22) !important; }
.sel-wrapper-actions .darkmode-icon { display: inline-block; line-height: 1; font-size: 14px; }
body.fm-dark .sel-wrapper-actions { border-top-color: rgba(255, 255, 255, 0.1); }

/* Phase 20 — link azione (Login/Registrati/Logout/Curriculum) accanto
 * al darkmode-btn. Pill coerente + simmetrico: stesse dimensioni ai
 * lati del cerchio darkmode. Varianti accent:
 *   --danger  (rosso) → Logout
 *   --accent  (viola) → Curriculum admin
 *   default   (neutro) → Login, Registrati */
.sel-wrapper-actions .sel-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    opacity: 0.92;
    background: rgba(255, 255, 255, 0.08);
    transition: background .15s ease, opacity .15s ease, transform .1s ease;
    white-space: nowrap;
}
.sel-wrapper-actions .sel-action-link:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}
.sel-wrapper-actions .sel-action-link:active { transform: scale(0.96); }
.sel-wrapper-actions .sel-action-link--danger {
    border-color: rgba(200, 90, 90, 0.5);
    color: #ffb6b6;
}
.sel-wrapper-actions .sel-action-link--danger:hover {
    background: rgba(200, 90, 90, 0.25);
    color: #ffd0d0;
}
.sel-wrapper-actions .sel-action-link--accent {
    border-color: rgba(150, 110, 220, 0.5);
    color: #d9c7ff;
    background: rgba(120, 80, 200, 0.22);
}
.sel-wrapper-actions .sel-action-link--accent:hover {
    background: rgba(120, 80, 200, 0.4);
    color: #efe3ff;
}
body.fm-dark .sel-wrapper-actions .sel-action-link {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}
body.fm-dark .sel-wrapper-actions .sel-action-link:hover {
    background: rgba(255, 255, 255, 0.14);
}
body.fm-dark .sel-wrapper-actions .sel-action-link--danger {
    border-color: rgba(255, 120, 120, 0.4);
    color: #ff9090;
}
body.fm-dark .sel-wrapper-actions .sel-action-link--danger:hover {
    background: rgba(255, 80, 80, 0.22);
}
body.fm-dark .sel-wrapper-actions .sel-action-link--accent {
    border-color: rgba(150, 110, 220, 0.45);
    color: #d9c7ff;
    background: rgba(90, 60, 160, 0.28);
}
body.fm-dark .sel-wrapper-actions .sel-action-link--accent:hover {
    background: rgba(120, 80, 200, 0.42);
}

body.fm-dark .fm-session-banner {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}
body.fm-dark .fm-session-banner a.fm-link-danger { color: #ff9090; }

/* Phase 14 — badge super-admin tecnico (ortogonale al role). */
.fm-super-badge {
    display: inline-block;
    margin-left: 2px;
    font-size: .9em;
    vertical-align: baseline;
    filter: drop-shadow(0 0 1px rgba(138,16,36,.4));
}
.fm-status[data-role="super"],
.fm-status[data-role="super_admin"] {
    background: #fbe1e6;
    color: #8a1024;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .72rem;
    letter-spacing: .5px;
    margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 13.5 — Edit toolbar per-sidepage (section-edit-mode.js).
   Iniettato dentro .sidepage[data-edit-active=1] da admin/teacher.
   Sostituisce il legacy "ADMIN RESTRICTED ZONE" + Editor_wrapper.
   ══════════════════════════════════════════════════════════════════ */
.fm-edit-toolbar {
    background: linear-gradient(180deg, #fff8e0 0%, #ffefb0 100%);
    border: 1px solid #c9a227;
    border-radius: 4px;
    margin: 6px 4px;
    padding: 6px 8px;
    font-size: 12px;
}
.fm-edit-toolbar__title { font-weight: bold; color: #7a5c00; margin-bottom: 4px; }
.fm-edit-toolbar__title code { background: rgba(0,0,0,.08); padding: 1px 4px; border-radius: 2px; }
.fm-edit-toolbar__actions { display: flex; gap: 4px; flex-wrap: wrap; }
.fm-edit-toolbar__actions .fm-btn { font-size: 11px; padding: 2px 6px; }
.fm-edit-toolbar__hint { color: #555; font-size: 10px; margin: 4px 0 0; line-height: 1.3; }

/* Phase 24.58 — istanze personali (multi-instance fork) sotto al template */
li.fm-risdoc-instance {
    padding-left: 24px;
    background: rgba(14, 165, 233, 0.06);
    border-left: 2px solid rgba(14, 165, 233, 0.4);
}
li.fm-risdoc-instance .fm-numarg {
    background: rgba(14, 165, 233, 0.18);
    color: #0c4a6e;
}
body.fm-dark li.fm-risdoc-instance {
    background: rgba(14, 165, 233, 0.1);
    border-left-color: rgba(14, 165, 233, 0.5);
}
body.fm-dark li.fm-risdoc-instance .fm-numarg {
    background: rgba(14, 165, 233, 0.25);
    color: #bae6fd;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 13 — Admin banner badge (admin-banner-badge.js).
   Iniettato dentro .sel-session-banner quando ci sono notifiche
   actionable (registrazioni in attesa, login falliti, blocchi).
   ══════════════════════════════════════════════════════════════════ */
.sel-session-banner.fm-has-notifications {
    border-left: 4px solid #d44;
    padding-left: 6px;
}
.fm-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(135deg, #ff5252, #c62828);
    color: #fff !important;
    text-decoration: none !important;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    animation: fm-badge-pulse 2s ease-in-out infinite;
}
.fm-admin-badge:hover { filter: brightness(1.15); }
.fm-admin-badge__star { font-size: 12px; line-height: 1; }
.fm-admin-badge__num { font-size: 11px; line-height: 1; }
@keyframes fm-badge-pulse {
    0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
    50%      { box-shadow: 0 1px 8px rgba(255, 0, 0, 0.6); }
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 18 — DB-backed sidepage content (db-sidepage.js).
   `ul.fm-db-block` va dentro #M/#G/#F del template sidepage e
   sostituisce l'<ul> legacy + nasconde il `.materia` header
   ridondante. Lo styling accent deriva dal btn corrispondente
   (btn0 verde / btn1 azzurro / btn2 giallo / btn5 arancio /
   btn3 rosso / btn4 rosa) per coerenza visiva.
   ══════════════════════════════════════════════════════════════════ */
ul.fm-db-block {
    list-style: none;
    margin: 4px 0;
    padding: 4px 8px;
    font-size: 12px;
    border-left: 3px solid transparent;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 0 4px 4px 0;
}
ul.fm-db-block .fm-db-head {
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 4px 0 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    text-align: center;
    color: inherit;
}
body.fm-dark ul.fm-db-block .fm-db-head {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
ul.fm-db-block li {
    padding: 3px 0;
    line-height: 1.35;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.06);
    text-align: left;
}
ul.fm-db-block li:last-child { border-bottom: none; }
ul.fm-db-block li[data-content-id],
ul.fm-db-block a {
    color: inherit;
    text-decoration: none;
    text-align: left;
}
ul.fm-db-block a:hover { text-decoration: underline; }
ul.fm-db-block .fm-numarg {
    display: inline-block;
    min-width: 2em;
    padding: 0 5px;
    margin-right: 4px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.08);
    text-align: center;
    opacity: 0.75;
}
ul.fm-db-block li.fm-error { color: #b00020; font-size: 11px; }

/* Phase 18 — pagina mappa: niente upbar, niente padding fisso,
   iframe Drawio full-width. */
body.fm-mappa-view { padding-top: 0; background-color: powderblue; min-width: 555px; }
body.fm-mappa-view .fm-mappa-study { padding: 0; }
body.fm-mappa-view .fm-mappa-wrap { margin: 8px; }
body.fm-dark.fm-mappa-view { background-color: #1e1e2a; }

/* Phase 20 — modalità multiarg esercizio: URL ha ?ids=N,M[,...] con ≥2
 * ids in /studio/esercizio/... Nasconde gli esercizi assegnati agli
 * studenti (.fm-contract-wrap diretti, non in #type_verAll) così il
 * docente vede solo "Verifiche correlate" aggregate dai topic cross.
 * Checkbox #fm-show-student-ex ri-abilita la visibilità.
 * Il nascondimento si applica SOLO quando #type_verAll è stato caricato
 * (Phase 21: auto-on per admin via ensureVerificaMode), altrimenti la pagina
 * resterebbe vuota. */
body.fm-esercizio-multiarg:has(#type_verAll):not(.fm-show-student-ex) #fm-content > .pagestyle > .DraggableContainer > .fm-contract-wrap,
body.fm-esercizio-multiarg:has(#type_verAll):not(.fm-show-student-ex) #fm-content > .pagestyle > .fm-contract-wrap,
body.fm-esercizio-multiarg:has(#type_verAll):not(.fm-show-student-ex) .DraggableContainer > .fm-contract-wrap:not([data-kind="verifica"]) {
    display: none;
}
/* Header "Verifiche correlate" con checkbox affiancato */
.fm-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.fm-toggle-student-ex {
    display: none; /* solo visible in multiarg */
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid #c0c8d0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.6);
}
body.fm-esercizio-multiarg .fm-toggle-student-ex { display: inline-flex; }
.fm-toggle-student-ex input { margin: 0; cursor: pointer; }
body.fm-dark .fm-toggle-student-ex {
    color: #c8d0dc;
    border-color: #3a3a4a;
    background: rgba(30, 30, 45, 0.6);
}

/* Phase 20/24.13 — highlight dell'item sidepage aperto. Matching:
 *   - data-content-id (esercizi/verifiche/mappe/bes DB-backed)
 *   - data-template-id (risdoc/strcomp template view)
 * Supporta multiarg: più items evidenziati se più contract attivi. */
.fm-sb-panel li[data-content-id].fm-open,
.fm-sb-panel li[data-template-id].fm-open {
    background: linear-gradient(90deg, rgba(255, 225, 100, 0.55), rgba(255, 225, 100, 0.15));
    border-left: 3px solid #e8a800;
    padding-left: 6px;
    font-weight: 600;
}
.fm-sb-panel li[data-content-id].fm-open a,
.fm-sb-panel li[data-template-id].fm-open a { color: #5a3d00; }
body.fm-dark .fm-sb-panel li[data-content-id].fm-open,
body.fm-dark .fm-sb-panel li[data-template-id].fm-open {
    background: linear-gradient(90deg, rgba(255, 200, 80, 0.2), rgba(255, 200, 80, 0.05));
    border-left-color: #d4a017;
}
body.fm-dark .fm-sb-panel li[data-content-id].fm-open a,
body.fm-dark .fm-sb-panel li[data-template-id].fm-open a { color: #ffe066; }
/* Phase 20 — mappe: azzera padding/margin-top di body.exercise-context
 * + content containers. layout_es.css imposta body.exercise-context
 * padding-top:84px per le pagine con upbar; le mappe non hanno upbar,
 * quindi recupero l'altezza per l'iframe full-height. */
body.fm-mappa-view.exercise-context,
body.exercise-context.fm-mappa-view                   { padding-top: 0; }
body.fm-mappa-view #fm-content,
body.fm-mappa-view main#fm-content,
body.fm-mappa-view .pagestyle,
body.fm-mappa-view > main                             { margin-top: 0; min-height: 100vh; }

/* Phase 18 — link admin curriculum nella sel-wrapper sidebar. */
.sel-admin-link {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 12px;
    text-decoration: none;
    color: #fff;
    background: #6a4ca8;
    border-radius: 4px;
}
.sel-admin-link:hover { background: #8060c8; }
body.fm-dark .sel-admin-link { background: #7050a0; }

/* Phase 18 — edit-section toolbar: tutto in una sola riga allineato.
   title + actions inline. Discreto, non accecante. */
.fm-edit-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 48px 4px 8px; /* right padding per btn .js-edit-section absolute */
    margin: 0 4px 6px;
    background: rgba(255, 250, 200, 0.6);
    border: 1px dashed rgba(181, 137, 0, 0.6);
    border-radius: 4px;
    font-size: 12px;
    min-height: 28px;
}
.fm-edit-toolbar__title {
    font-weight: 600;
    color: #7a5b00;
    white-space: nowrap;
}
.fm-edit-toolbar__title code {
    background: rgba(0, 0, 0, 0.08);
    padding: 0 5px;
    border-radius: 3px;
    font-size: 11px;
}
.fm-edit-toolbar__actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
}
body.fm-dark .fm-edit-toolbar {
    background: rgba(70, 55, 10, 0.4);
    border-color: rgba(212, 160, 32, 0.5);
}
body.fm-dark .fm-edit-toolbar__title { color: #ffd88a; }
body.fm-dark .fm-edit-toolbar__title code {
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
}

/* Phase 24.48 — Inline action buttons (✎🗑👁📥) per-block.
 * Override: la sola regola di visibility è in cima (riga ~1271):
 *   .fm-item-actions { display: none }
 *   .fm-db-block[data-edit-active="1"] .fm-item-actions { display: inline-flex }
 * Qui solo styling (no display) per evitare cascade override. */
.fm-item-actions {
    gap: 3px;
    margin-left: 6px;
    vertical-align: middle;
}
.fm-item-btn {
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
    cursor: pointer;
    line-height: 1;
}
.fm-item-btn:hover { background: rgba(0, 0, 0, 0.16); }
body.fm-dark .fm-item-btn {
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
}
body.fm-dark .fm-item-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* Phase 24.47 — sezione (.fm-db-block) in edit mode: bordo distintivo
 * scoped al block, non più all'intera .fm-sb-panel. */
.fm-db-block[data-edit-active="1"] {
    outline: 2px dashed #ff6b00;
    outline-offset: -2px;
}

/* Phase 18 — FmEditModal (create/edit content) */
.fm-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: fm-modal-in 0.15s ease-out;
}
@keyframes fm-modal-in { from { opacity: 0; } to { opacity: 1; } }
.fm-modal {
    background: #fff;
    color: #222;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    display: flex; flex-direction: column;
}
.fm-modal-header {
    padding: 14px 18px;
    background: #f0f4fa;
    border-bottom: 1px solid #d0d8e0;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600;
    font-size: 15px;
}
.fm-modal-header code { background: #e8eef5; padding: 1px 6px; border-radius: 3px; font-size: 13px; }
/* Phase 24.52 — X header rimossa: chiusura solo via Annulla / backdrop / Esc. */
.fm-modal-form {
    padding: 18px;
    display: grid; gap: 12px;
}
.fm-modal-form label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; font-weight: 600; color: #555;
}
.fm-modal-form input,
.fm-modal-form select,
.fm-modal-form textarea {
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid #c0c8d0;
    border-radius: 4px;
    background: #fff;
    color: #222;
    font-weight: normal;
}
.fm-modal-form input:focus,
.fm-modal-form select:focus {
    outline: none; border-color: #5a8fd8; box-shadow: 0 0 0 2px rgba(90,143,216,0.25);
}
.fm-modal-error:empty { display: none; }
.fm-modal-error {
    padding: 8px 12px; background: #fde4e4; color: #8a1d1d;
    border-radius: 4px; font-size: 13px;
}
.fm-modal-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    padding-top: 6px;
}
/* Phase 24.44 — fieldset Modello documento */
.fm-modal-layout {
    border: 1px solid #d0d8e0;
    border-radius: 4px;
    padding: 8px 12px 10px;
    margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.fm-modal-layout legend { padding: 0 4px; }
/* Phase 24.46 — override .fm-modal-form label flex-direction:column.
 * Il radio + testo deve restare INLINE (no wrap dopo il bullet). */
.fm-modal-form .fm-modal-layout__opt {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: normal;
    color: #333;
    cursor: pointer;
}
.fm-modal-layout__opt input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.fm-modal-layout__opt > span { flex: 1; line-height: 1.4; }
body.fm-dark .fm-modal-layout { border-color: #3a3a4a; }
body.fm-dark .fm-modal-form .fm-modal-layout__opt { color: #d0d0d8; }

/* Dark mode */
body.fm-dark .fm-modal { background: #24242e; color: #e0e0e0; }
body.fm-dark .fm-modal-header { background: #1a1a24; border-color: #3a3a4a; color: #e0e0e0; }
body.fm-dark .fm-modal-header code { background: #3a3a4a; color: #cfd8e8; }
body.fm-dark .fm-modal-close { color: #aaa; }
body.fm-dark .fm-modal-close:hover { color: #fff; }
body.fm-dark .fm-modal-form label { color: #bbb; }
body.fm-dark .fm-modal-form input,
body.fm-dark .fm-modal-form select,
body.fm-dark .fm-modal-form textarea {
    background: #1a1a24; color: #e0e0e0; border-color: #444;
}
body.fm-dark .fm-modal-error { background: #402020; color: #ffb0b0; }

/* ───── Dark mode: legacy modals (License/Author/Cookie) ─────
   NB: copertura aggressiva per ereditare color chiaro su tutti i
   descendants non-link (text nodes, b, strong, em, span). I selettori
   .fm-modal span/p/h2 light-mode hanno color: #555/#333 hardcoded che
   altrimenti vincerebbero per specificità + cascade. */
body.fm-dark .fm-modal,
body.fm-dark .fm-modal-body,
body.fm-dark .fm-modal .fm-modal-body,
body.fm-dark .fm-modal .license-details,
body.fm-dark .fm-modal p,
body.fm-dark .fm-modal span,
body.fm-dark .fm-modal b,
body.fm-dark .fm-modal strong,
body.fm-dark .fm-modal em,
body.fm-dark .fm-modal li,
body.fm-dark .fm-modal label {
    color: #e0e0e0;
}
body.fm-dark .fm-modal .fm-modal-body h2 {
    color: #e0e0e0;
    border-bottom-color: #3a3a4a;
}
body.fm-dark .fm-modal a { color: #93c5fd; }
body.fm-dark .fm-modal a:hover { color: #bfdbfe; }
body.fm-dark .fm-modal-close {
    background-color: #4a5568;
    color: #fff;
}
body.fm-dark .fm-modal-close:hover { background-color: #6b7280; }

/* Cookie modal sub-elements */
body.fm-dark #fm-cookie-modal .fm-cookie-cat {
    background-color: #2a2a36;
    border-color: #3a3a4a;
}
body.fm-dark #fm-cookie-modal .fm-cookie-cat-title { color: #e0e0e0; }
body.fm-dark #fm-cookie-modal .fm-cookie-cat-title .always-active { color: #6ee7b7; }
body.fm-dark #fm-cookie-modal .fm-cookie-cat-description { color: #b0b0bf; }
body.fm-dark #fm-cookie-modal .fm-cookie-modal-actions { border-top-color: #3a3a4a; }
body.fm-dark #fm-cookie-modal .warning-message { color: #fca5a5; }

/* Modal overlay più contrastato in dark */
body.fm-dark #fm-modal-overlay { background-color: rgba(0, 0, 0, 0.78); }

/* ───── Dark mode: bottom-bar ───── */
body.fm-dark #bottom-bar {
    background-color: #14141c;
    border-top: 1px solid #2a2a36;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.5);
}
body.fm-dark #bottom-bar a { color: #d0d0d8; }
body.fm-dark #bottom-bar a:hover { background-color: #2a2a36; color: #fff; }

/* Accent per-sidepage (derivato dai colori btn) */
#fm-sp-mappe ul.fm-db-block  { border-left-color: rgb(134, 239, 170); }
#fm-sp-lab ul.fm-db-block    { border-left-color: rgb(134, 190, 239); }
#fm-sp-eser ul.fm-db-block   { border-left-color: rgb(240, 221, 152); }
#fm-sp-verif ul.fm-db-block  { border-left-color: rgb(255, 176, 0); }
#fm-sp-bes ul.fm-db-block    { border-left-color: rgb(239, 134, 134); }
#fm-sp-risdoc ul.fm-db-block { border-left-color: rgb(237, 105, 213); }

/* Dark mode: bg più trasparente per lasciare trasparire il tint sidepage */
body.fm-dark ul.fm-db-block {
    background: rgba(0, 0, 0, 0.25);
}
body.fm-dark ul.fm-db-block li {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.fm-dark ul.fm-db-block .fm-numarg {
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
}

/* Optgroup separato per materie del docente in #sel-mater */
#sel-mater optgroup[data-fm-teacher-group] {
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — toggle globale via body.fm-dark (gestito da
   bootstrap-compat.initDarkModeToggleIfNeeded). Copre sidebar +
   upbar + #fm-content. Valori persistiti in localStorage.
   ══════════════════════════════════════════════════════════════════ */
body.fm-dark {
    background-color: #1e1e1e;
    color: #e0e0e0;
}
body.fm-dark .switch               { background-color: #2a2a5a; }
body.fm-dark .sidebar              { background: #2a2a3a; color: #e0e0e0; }
body.fm-dark .sel-wrapper          { background-color: #3a1a5a; }
body.fm-dark .fm-sb-lab            { color: #e0e0e0; }
body.fm-dark .fm-sb-sel            { background: #444; color: #eee; border-color: #555; }
body.fm-dark .selwrapbtn-es        { background: #2a2a3a; }
body.fm-dark .fm-sb-sec            { filter: brightness(0.6) saturate(0.85); color: #000; }
body.fm-dark .fm-sb-panel          { background: #2a2a3a; color: #e0e0e0; }
body.fm-dark .sel-session-banner   { background: #3a3a4a !important; color: #e0e0e0 !important; }
body.fm-dark .sel-session-banner a { color: #9dc9ff !important; }
body.fm-dark #fm-content           { background: #1e1e1e; color: #e0e0e0; }
body.fm-dark .upbar                { background: #1a1a3a; }
body.fm-dark .upbar .scrollbarUpBar { background: transparent; }
body.fm-dark .selwrapbtncopy       { background: rgba(50, 50, 90, 0.5); border-color: #aaaa22; }
body.fm-dark .wrapPrintmod label,
body.fm-dark .labelBtnDrop         { color: #e0e0e0 !important; }
body.fm-dark .dropdown-button,
body.fm-dark .btn-UpBar            { background: #2a2a4a; color: #e0e0e0; border-color: #555; }
body.fm-dark .fm-sb-dark         { background: #555; color: #ffeb3b; }
/* Phase 16 — Dark mode palette rivista:
 * - .pagestyle sfondo più scuro (body-matching) per far contrastare .problem
 * - .problem leggermente più chiaro del body → visibile come card
 * - .collapsible con viola medio che fa eco al legacy #5959a9 attenuato
 * - .selection con sfumatura di viola attenuato
 * - Testi chiari (non bianco puro) per ridurre glare
 */
body.fm-dark .pagestyle              { background: #16161f; color: #c8c8d0; }
body.fm-dark .problem                { background: #2d2d42; color: #c8c8d0; }
body.fm-dark .content                { background: #252538; color: #c8c8d0; }
body.fm-dark .collapsible            { background: #3a3a5e; color: #d0d0dc; }
body.fm-dark .collapsible.active     { background: #4a4a7a; }
body.fm-dark .collapsible:hover      { background: #505080; }
body.fm-dark .selection              { background: #3a3a5e; color: #d0d0dc; }
/* G20.7 — Phase 16 fm-dark .selection labcheck/pt_totA/B/total-pointsA/B
 * (testi #262628 dark + bg #dcdbff lavanda) RIMOSSI: in conflitto con la
 * nuova palette G20.7 che vuole testi BIANCHI su pill semi-trasparenti
 * bianchi (vedi .problem .check .labcheck / .input-wrapper-pt_tot a riga
 * ~3549). Lasciamo che le regole G20.7 dominino. */

/* Phase 16 — .checkIN + .titolo_quesito palette dark SCURA.
 * Legacy: bianco #fff. In dark: #3a3a4e (più scuro, coerente con .problem #2d2d42).
 * Testi chiari invece di scuri. */
body.fm-dark .checkIN                 { background: #3a3a4e; color: #c8c8d4; }
body.fm-dark .checkIN .labcheckIN,
body.fm-dark .checkIN .pt             { color: #c8c8d4; }
body.fm-dark .checkIN .origin,
body.fm-dark .checkIN .colorSelect,
body.fm-dark .checkIN .input-pt,
body.fm-dark .checkIN .move-position  { background: #1e1e28; color: #c8c8d4; border-color: #555; }
body.fm-dark .titolo_quesito          { color: #c8c8d4; }

/* Phase 16 — .titolo_quesito text color in base al background esplicito.
 * Match più specifico: usa "background-color:" prefix per non collidere con
 * "color: white" (text color). */
.titolo_quesito[style*="background-color: white"],
.titolo_quesito[style*="background-color:white"] { color: #000 !important; }
.titolo_quesito[style*="background-color: red"],
.titolo_quesito[style*="background-color:red"],
.titolo_quesito[style*="background-color: green"],
.titolo_quesito[style*="background-color:green"],
.titolo_quesito[style*="background-color: blue"],
.titolo_quesito[style*="background-color:blue"],
.titolo_quesito[style*="background-color: purple"],
.titolo_quesito[style*="background-color:purple"],
.titolo_quesito[style*="background-color: orange"],
.titolo_quesito[style*="background-color:orange"] { color: #fff !important; }

/* Phase 16 — dark mode: colori forti titolo_quesito desaturati + white→grigio. */
body.fm-dark .titolo_quesito[style*="background-color: red"],
body.fm-dark .titolo_quesito[style*="background-color:red"],
body.fm-dark .titolo_quesito[style*="background-color: green"],
body.fm-dark .titolo_quesito[style*="background-color:green"],
body.fm-dark .titolo_quesito[style*="background-color: blue"],
body.fm-dark .titolo_quesito[style*="background-color:blue"],
body.fm-dark .titolo_quesito[style*="background-color: purple"],
body.fm-dark .titolo_quesito[style*="background-color:purple"],
body.fm-dark .titolo_quesito[style*="background-color: orange"],
body.fm-dark .titolo_quesito[style*="background-color:orange"] {
    filter: brightness(0.65) saturate(0.7);
}
body.fm-dark .titolo_quesito[style*="background-color: white"],
body.fm-dark .titolo_quesito[style*="background-color:white"] {
    background: #4a4a5e !important;
    color: #d8d8dc !important;
}

/* Phase 16 — popup preview flottante (viewport-fixed, segue il focus cella) */
.fm-cell-popup-preview {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 2px solid #2a5ac7;
    border-radius: 6px;
    padding: 10px 14px;
    min-width: 280px;
    max-width: 420px;
    max-height: 260px;
    overflow: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    font: 13px/1.4 system-ui;
    pointer-events: none;
    color: #1a1a2a;
}
body.fm-dark .fm-cell-popup-preview {
    background: #1e1e2a !important;
    border-color: #4a4a7a !important;
    color: #c8c8d4 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}
body.fm-dark .fm-cell-popup-preview mjx-container,
body.fm-dark .fm-cell-popup-preview mjx-container * { color: #e0e0e8; }

/* =========================================================================
 * Phase 16 — DARK MODE GLOBAL MUST: nessun chiaro/forte ammesso.
 * Ogni wrapper editor/layout che usa bianchi, rgba(255,255,255,*), light greys
 * viene sovrascritto con palette dark coerente.
 * ========================================================================= */
body.fm-dark .fm-editor-panel { background: #1a1a28 !important; border-color: #555 !important; color: #c8c8d4 !important; }
body.fm-dark .fm-editor-panel h4,
body.fm-dark .fm-editor-panel > div > span,
body.fm-dark .fm-editor-panel label span { color: #a8b0c0 !important; }

/* fm-rm-layout-section + sottocontenitori .fm-rm-tables-container */
body.fm-dark .fm-rm-layout-section,
body.fm-dark .fm-rm-tables-container,
body.fm-dark .fm-editor-panel [class*="fm-rm"]  {
    background: #1a1a28 !important;
    border-color: #3a3a5a !important;
    color: #c8c8d4 !important;
}
body.fm-dark .fm-rm-layout-section > div,
body.fm-dark .fm-rm-tables-container > div {
    background: #1a1a28 !important;
    border-color: #3a3a5a !important;
}
body.fm-dark .fm-rm-layout-section h4 { color: #a8b0c0 !important; }

/* Tutti gli input/textarea/select dentro l'editor panel in dark */
body.fm-dark .fm-editor-panel input,
body.fm-dark .fm-editor-panel textarea,
body.fm-dark .fm-editor-panel select {
    background: #0e0e14 !important;
    color: #c8c8d4 !important;
    border-color: #3a3a5a !important;
}

/* Selector rgba(255,255,255,*) override generale (inline style) */
body.fm-dark [style*="rgba(255, 255, 255, 0.9"],
body.fm-dark [style*="rgba(255,255,255,0.9"],
body.fm-dark [style*="rgba(255, 255, 255, 0.8"],
body.fm-dark [style*="rgba(255,255,255,0.8"],
body.fm-dark [style*="rgba(255, 255, 255, 0.7"],
body.fm-dark [style*="rgba(255,255,255,0.7"],
body.fm-dark [style*="rgba(255, 255, 255, 0.6"],
body.fm-dark [style*="rgba(255,255,255,0.6"],
body.fm-dark [style*="rgba(255, 255, 255, 0.5"],
body.fm-dark [style*="rgba(255,255,255,0.5"],
body.fm-dark [style*="rgba(255, 255, 255, 0.4"],
body.fm-dark [style*="rgba(255,255,255,0.4"],
body.fm-dark [style*="rgba(255, 255, 255, 0.3"],
body.fm-dark [style*="rgba(255,255,255,0.3"] {
    background: rgba(26, 26, 42, 0.9) !important;
}

/* Labels + span azioni in editor panel chiari */
body.fm-dark .fm-editor-panel *[style*="color:#333"],
body.fm-dark .fm-editor-panel *[style*="color: #333"],
body.fm-dark .fm-editor-panel *[style*="color:#666"],
body.fm-dark .fm-editor-panel *[style*="color: #666"] {
    color: #b0b0c0 !important;
}

/* .fm-option-row fallback (se riappare in altri flussi) */
body.fm-dark .fm-option-row {
    background: #1a1a28 !important;
    border-color: #3a3a5a !important;
    color: #c8c8d4 !important;
}

/* Phase 16 — .collex-item rgba(255,255,255,0.92) light → dark override.
 * Il legacy applica inline rgba bianchi translucid come card background;
 * il selector matcha sia source colors che cyclic topic colors. */
body.fm-dark .collex-item             { background: rgba(30, 30, 42, 0.92) !important; }
body.fm-dark .collex-item[style*="rgba(255"] {
    background: rgba(30, 30, 42, 0.92) !important;
}

/* Phase 16 — body exercise-context in dark mode: powderblue → scuro.
 * Anche #infoVer palette dark + testi chiari. */
body.fm-dark.exercise-context,
body.exercise-context.fm-dark          { background-color: #16161f; }
body.fm-dark #scrollbarInfo            { background: #1e1e2f; color: #d0d0dc; }
body.fm-dark #infoVer                  { background: #252538; color: #d0d0dc; }
body.fm-dark #infoVer input[type="text"],
body.fm-dark #infoVer input[type="number"],
body.fm-dark #infoVer select,
body.fm-dark #infoVer textarea         { background: #1a1a2a; color: #d0d0dc; border-color: #555; }
body.fm-dark #infoVer label,
body.fm-dark #infoVer p                { color: #d0d0dc; }

/* Phase 16 — edit mode: option-row sfondo bianco inline → override
 * dark. `.fm-editor-panel .fm-option-row` (nuovo wrapper class). */
body.fm-dark .fm-editor-panel .fm-option-row {
    background: #1e1e2a !important;
    border-color: #3a3a5a !important;
    color: #b0b0bc !important;
}

/* Phase 16 — rgba(255,255,255,0.4-0.6) troppo chiari in dark. Override
 * per tutti i wrapper editor che usano white-translucent (cells cards,
 * RM layout section sub-cards, width-group). */
body.fm-dark .fm-rm-layout-section > div[style*="rgba(255, 255, 255"],
body.fm-dark .fm-rm-layout-section div[style*="rgba(255,255,255"] {
    background: #1e1e2a !important;
    border-color: #3a3a5a !important;
    color: #b0b0bc !important;
}
body.fm-dark .fm-rm-layout-section textarea,
body.fm-dark .fm-rm-layout-section input {
    background: #15151f !important;
    color: #b0b0bc !important;
    border-color: #3a3a5a !important;
}
body.fm-dark .fm-editor-panel .fm-option-row span,
body.fm-dark .fm-editor-panel .fm-option-row label { color: #b0b0bc !important; }

/* Phase 16 — .fm-rm-layout-section palette dark (legacy light blue #eef4ff). */
body.fm-dark .fm-rm-layout-section {
    background: #1e2538 !important;
    border-color: #4a5a7a !important;
    color: #b0b0bc !important;
}
body.fm-dark .fm-rm-layout-section > div:first-child,
body.fm-dark .fm-rm-layout-section span,
body.fm-dark .fm-rm-layout-section label { color: #b0b0bc !important; }
body.fm-dark .fm-rm-layout-section input,
body.fm-dark .fm-rm-layout-section select {
    background: #1a1a2a !important;
    color: #b0b0bc !important;
    border-color: #555 !important;
}
body.fm-dark .fm-rm-layout-section h4 { color: #a8c0e0 !important; }

/* G9.7 — RIMOSSI #infoVer ::before / ::after (e #scrollbarInfo equivalents):
 * gli pseudo-elements legacy creavano gradient ornamentali che non hanno
 * piu' senso col layout drawer modernizzato. Override hard a none. */
#infoVer::before,
#infoVer::after,
#scrollbarInfo::before,
#scrollbarInfo::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Phase 16 — Editor inline "Fonte" (popover triggered da `.fa-edit.edit-btn`).
 * Popup compatto con 5 campi form per modificare code/title/volume/publisher/
 * authors della fonte selezionata. Non blocca il resto della pagina (no
 * overlay scuro): è un popover leggero posizionato accanto al pulsante. */
.fm-source-editor {
    background: #fff;
    border: 1px solid #c8c8d4;
    border-radius: 8px;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28);
    font: 13px/1.4 system-ui, -apple-system, sans-serif;
    color: #222;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fm-source-editor .fm-se-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(135deg, #2a5ac7, #4a78e0);
    color: #fff;
}
.fm-source-editor .fm-se-title { font-weight: 600; font-size: 13px; }
.fm-source-editor .fm-se-close {
    background: transparent; border: none; color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer;
    padding: 0 4px; opacity: 0.85;
}
.fm-source-editor .fm-se-close:hover { opacity: 1; }
.fm-source-editor .fm-se-form {
    padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.fm-source-editor .fm-se-form label {
    display: flex; flex-direction: column; gap: 2px;
}
.fm-source-editor .fm-se-form label > span {
    font-size: 11px; font-weight: 600; color: #555; letter-spacing: 0.02em;
}
.fm-source-editor .fm-se-form input {
    padding: 6px 8px; font: 13px/1.2 system-ui; color: #222;
    border: 1px solid #bbb; border-radius: 4px; background: #fafafa;
    transition: border-color 0.15s, background 0.15s;
}
.fm-source-editor .fm-se-form input:focus {
    outline: none; border-color: #2a5ac7; background: #fff;
    box-shadow: 0 0 0 2px rgba(42, 90, 199, 0.15);
}
.fm-source-editor .fm-se-form input[readonly] {
    background: #eee; color: #666; cursor: not-allowed;
}
.fm-source-editor .fm-se-status {
    min-height: 16px; font-size: 11px; color: #777;
}
.fm-source-editor .fm-se-status.is-error { color: #c02a2a; font-weight: 600; }
.fm-source-editor .fm-se-actions {
    display: flex; gap: 6px; justify-content: flex-end; align-items: center;
    padding-top: 4px;
}
.fm-source-editor .fm-se-actions button {
    padding: 6px 12px; border-radius: 4px; cursor: pointer;
    font: 12px/1 system-ui; font-weight: 500;
    border: 1px solid transparent;
}
.fm-source-editor .fm-se-cancel {
    background: #eee; border-color: #bbb; color: #444;
}
.fm-source-editor .fm-se-cancel:hover { background: #ddd; }
.fm-source-editor .fm-se-save {
    background: #2a5ac7; color: #fff; border-color: #2a5ac7; font-weight: 600;
}
.fm-source-editor .fm-se-save:hover { background: #1e4aa0; }
.fm-source-editor .fm-se-del {
    background: #fff; border-color: #c02a2a; color: #c02a2a; margin-right: auto;
}
.fm-source-editor .fm-se-del:hover { background: #c02a2a; color: #fff; }

body.fm-dark .fm-source-editor {
    background: #1e1e2a; border-color: #4a4a5a; color: #d0d0dc;
}
body.fm-dark .fm-source-editor .fm-se-form input {
    background: #2a2538; border-color: #555; color: #d0d0dc;
}
body.fm-dark .fm-source-editor .fm-se-form input[readonly] {
    background: #333; color: #999;
}
body.fm-dark .fm-source-editor .fm-se-cancel {
    background: #3a3a5e; border-color: #4a4a5a; color: #b8b8c0;
}
body.fm-dark .fm-source-editor .fm-se-cancel:hover { background: #4a4a7a; }

/* Icona .fa-edit.edit-btn cliccabile: hover + padding */
.fas.fa-edit.edit-btn,
i.fa-edit.edit-btn {
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 6px;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.fas.fa-edit.edit-btn:hover,
i.fa-edit.edit-btn:hover { opacity: 1; color: #2a5ac7; }

/* Phase 16 — Editor toolbar layout uniforme.
 * Tutti i figli diretti (button, select, wrapper dropdown) hanno la stessa
 * altezza (30px) e un gap leggero (6px). Regole generiche con !important per
 * prevalere sugli inline-style ereditati dai builder JS. */
.fm-editor-toolbar {
    gap: 6px !important;
    align-items: center !important;
}
.fm-editor-toolbar > button,
.fm-editor-toolbar > select,
.fm-editor-toolbar > .fm-tex-dropdown,
.fm-editor-toolbar > .fm-backup-dropdown,
.fm-editor-toolbar > .fm-sources-dropdown {
    height: 30px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.fm-editor-toolbar > button,
.fm-editor-toolbar > select,
.fm-editor-toolbar > .fm-tex-dropdown > button,
.fm-editor-toolbar > .fm-backup-dropdown > button,
.fm-editor-toolbar > .fm-sources-dropdown > button {
    height: 30px !important;
    padding: 0 10px !important;
    font: 12px/1 system-ui !important;
    justify-content: center !important;
}

/* Phase 16 — Editor toolbar dark: tutti button/select uniformi #3a3a5e. */
body.fm-dark .fm-editor-toolbar {
    background: #1e1e2a !important;
    border-color: #4a4a5a !important;
    color: #b8b8c0 !important;
}
body.fm-dark .fm-editor-toolbar button,
body.fm-dark .fm-editor-toolbar select {
    background: #3a3a5e !important;
    color: #b8b8c0 !important;
    border-color: #4a4a5a !important;
}
body.fm-dark .fm-editor-toolbar button:hover {
    background: #4a4a7a !important;
}
/* Chip snippet in toolbar dropdown: override inline #f0f4fc */
body.fm-dark .fm-tex-menu button[style*="background:#f0f4fc"],
body.fm-dark .fm-tex-menu button[style*="background: rgb(240, 244, 252)"],
body.fm-dark .fm-tex-menu button[style*="background:#fff"] {
    background: #3a3a5e !important;
    border-color: #4a4a5a !important;
    color: #b8b8c0 !important;
}

/* Phase 16 — Dropdown TeX menu dark mode. */
body.fm-dark .fm-tex-menu {
    background: #2a2538 !important;
    border-color: #555 !important;
    color: #b0b0bc !important;
}
body.fm-dark .fm-tex-menu > div {
    color: #b0b0bc !important;
}
body.fm-dark .fm-tex-menu .fm-tex-group {
    border-top-color: #444 !important;
}
body.fm-dark .fm-tex-menu .fm-tex-group button {
    color: #b0b0bc !important;
}
body.fm-dark .fm-tex-menu .fm-tex-group > div {
    background: #1e1e2f !important;
}
/* Chip snippet dark */
body.fm-dark .fm-tex-menu button[style*="background:#f0f4fc"],
body.fm-dark .fm-tex-menu button[style*="background: rgb(240, 244, 252)"] {
    background: #2a3a5e !important;
    border-color: #4a5a7a !important;
    color: #a8c0e0 !important;
}

/* Dialog TeX action (new/edit/delete) dark */
body.fm-dark #fm-tex-action-dialog {
    background: #2a2538 !important;
    color: #b0b0bc !important;
    border-color: #555 !important;
}
body.fm-dark #fm-tex-action-dialog input,
body.fm-dark #fm-tex-action-dialog select,
body.fm-dark #fm-tex-action-dialog textarea {
    background: #1a1a2a !important;
    color: #b0b0bc !important;
    border-color: #555 !important;
}

/* Find/replace dialog dark */
body.fm-dark #fm-findreplace-dialog {
    background: #2a2538 !important;
    color: #b0b0bc !important;
    border-color: #555 !important;
}
body.fm-dark #fm-findreplace-dialog input {
    background: #1a1a2a !important;
    color: #b0b0bc !important;
    border-color: #555 !important;
}

/* Phase 16 — testo .problem/.collex in dark: il legacy a volte aveva
 * colori neri inline da MathJax content. Forziamo color inherit. */
body.fm-dark .collex,
body.fm-dark .collex div,
body.fm-dark .collex p,
body.fm-dark .collex span:not(.fm-badge):not(.fm-badge *),
body.fm-dark .giustsol,
body.fm-dark .giustsol div              { color: #c8c8d0; }

/* Phase 16 — details.sol (legacy background giallo chiaro #fff7d8) →
 * dark NEUTRO. Palette meno ambra per AA contrast + meno aggressivo. */
body.fm-dark details.sol,
body.fm-dark .fm-db-study .collex-item details.sol {
    background: #1e1e28 !important;
    border-left-color: #b88a2a !important;
    color: #d0d0dc;
}
body.fm-dark details.sol summary,
body.fm-dark .fm-db-study .collex-item details.sol summary {
    color: #c0a060 !important;
}
body.fm-dark details.sol div,
body.fm-dark details.sol p,
body.fm-dark details.sol span:not(.fm-badge):not(.fm-badge *),
body.fm-dark details.sol mjx-container,
body.fm-dark details.sol mjx-container * {
    color: #d0d0dc;
}

/* Phase 16 — tabelle dentro .sol/.collex (DATI/INCOGNITE): background
 * trasparente + border grigio chiaro in dark + testi NEUTRI. */
body.fm-dark .collex table,
body.fm-dark .sol table,
body.fm-dark details.sol table {
    background: transparent;
    border-color: #555570;
}
body.fm-dark .collex table td,
body.fm-dark .collex table th,
body.fm-dark .sol table td,
body.fm-dark .sol table th,
body.fm-dark details.sol table td,
body.fm-dark details.sol table th {
    border-color: #555570;
    color: #d0d0dc;
}

/* Phase 16 — TikZ SVG in darkmode: lines nere su sfondo scuro = invisibili.
 * Apply invert filter solo su SVG generati da tikzjax (non mjx-container).
 * Il MutationObserver tikzjax rende direttamente <svg> (no .fm-badge wrap),
 * quindi target-are via ancestor .fm-editor-preview oppure via attributo
 * data-tikz o .problem .collex > svg. */
body.fm-dark .collex > svg,
body.fm-dark .collex svg:not(mjx-container svg):not(.fm-badge svg),
body.fm-dark .fm-editor-preview svg:not(mjx-container svg),
body.fm-dark details.sol > svg {
    filter: invert(0.88) hue-rotate(180deg);
    background: #f0f0f4;
    border-radius: 4px;
}

/* Phase 16 — rm-table: sfondo trasparente in dark, border chiaro. */
body.fm-dark .rm-table td.rm-option,
body.fm-dark .rm-table th {
    background: #2d2d42 !important;
    border-color: #555 !important;
    color: #d0d0dc;
}
body.fm-dark .rm-table td.rm-option.rm-correct {
    background: #2d3d2d !important;
    border-color: #6a9a6a !important;
}

/* Phase 16 — .fm-badge testi scuri ora su sfondo dark: il legacy usa
 * \small{\text{...}} MathJax che renderizza con color del container. In
 * dark il container è scuro → testo deve essere chiaro. Sovrascriviamo. */
body.fm-dark .fm-badge {
    background: transparent;
    color: inherit;
}
body.fm-dark .fm-badge mjx-container {
    color: #e0e0e8;
}
body.fm-dark h1, body.fm-dark h2, body.fm-dark h3 { color: #9dc9ff; }
body.fm-dark .titolo h1              { color: #9dc9ff; }

/* Phase 16 — MathJax dark mode SENZA filter:invert (rompeva i \color{red}
 * espliciti e le formule della preview editor). Override via inherit color
 * del parent. CHTML eredita color; SVG fill richiede override esplicito. */
body.fm-dark mjx-container           { color: #dcdce0; }
body.fm-dark mjx-container mjx-math  { color: inherit; }
body.fm-dark mjx-container svg       { fill: currentColor; }
body.fm-dark .fm-editor-preview mjx-container { color: #e8e8ec; }

/* ── Shell pages (admin/dashboard, /admin/tools, /register, ecc.) ── */
body.fm-dark.fm-shell                                 { background: #1e1e1e; color: #e0e0e0; }
body.fm-dark .fm-card,
body.fm-dark .fm-card--wide,
body.fm-dark .fm-card--modal                          { background: #2a2a3a; color: #e0e0e0; border-color: #555; }
body.fm-dark .fm-tile                                 { background: #333; color: #e0e0e0; border-color: #555; }
body.fm-dark .fm-tile h3                              { color: #cfd8e8; }
body.fm-dark .fm-big                                  { color: #9dc9ff; }

/* Phase 14 — alert tile (pending > 0) con palette AA safe in light+dark. */
.fm-tile--alert { background: #fff3cd; color: #3a2d00; border-color: #e0c665; }
.fm-tile--alert h3    { color: #3a2d00; }
.fm-tile--alert .fm-big { color: #6b4a00; }
.fm-tile--alert .fm-muted { color: #5a4a1a; }
body.fm-dark .fm-tile--alert { background: #3a3020; color: #ffe08a; border-color: #6b5a30; }
body.fm-dark .fm-tile--alert h3    { color: #ffe08a; }
body.fm-dark .fm-tile--alert .fm-big { color: #ffcc4d; }
body.fm-dark .fm-tile--alert .fm-muted { color: #cfbc7a; }

.fm-big--danger { color: #c62828; }
body.fm-dark .fm-big--danger { color: #ff6b6b; }
.fm-tile--alert .fm-big--danger { color: #8a1024; }
body.fm-dark .fm-tile--alert .fm-big--danger { color: #ff7a85; }
/* Phase 14 — fm-code (timestamp, username in tabelle admin): bg chiaro
   legacy (#f3f4f7) → bg scuro + testo chiaro in darkmode. */
body.fm-dark .fm-code                                 { background: #2a2a3a; color: #cfd8e8; }

/* Phase 14 — sidepage legacy (#fm-sp-mappe verde / #fm-sp-lab viola / #fm-sp-eser
   crema / #fm-sp-verif arancio / #fm-sp-bes rosa / #fm-sp-risdoc fucsia)
   hanno background-color hardcoded. In darkmode scuriamo mantenendo la
   tinta identificativa della sezione, con testo chiaro leggibile. */
body.fm-dark #fm-sp-mappe           { background-color: #1e3a2a; color: #e0f0e5; }
body.fm-dark #fm-sp-lab          { background-color: #2a2a4a; color: #e0e0f0; }
body.fm-dark #fm-sp-eser            { background-color: #3a3420; color: #f0e8c8; }
body.fm-dark #fm-sp-verif           { background-color: #4a3800; color: #ffd88a; }
body.fm-dark #fm-sp-bes   { background-color: #3a2325; color: #f5cbc8; }
body.fm-dark #fm-sp-risdoc          { background-color: #3a2335; color: #f0c8e5; }
body.fm-dark .sidepage li a,
body.fm-dark .sidepage a      { color: inherit; }

body.fm-dark .fm-table,
body.fm-dark .fm-tools-table,
body.fm-dark .fm-an-table                             { color: #e0e0e0; border-color: #555; }
body.fm-dark .fm-table th,
body.fm-dark .fm-tools-table th,
body.fm-dark .fm-an-table th                          { background: #2a2a3a; color: #cfd8e8; border-color: #555; }
body.fm-dark .fm-table td,
body.fm-dark .fm-tools-table td,
body.fm-dark .fm-an-table td                          { background: #1e1e2a; color: #e0e0e0; border-color: #444; }
body.fm-dark .fm-table tr:hover,
body.fm-dark .fm-tools-table tr:hover,
body.fm-dark .fm-an-table tr:hover td                 { background: #333; }
body.fm-dark .fm-input                                { background: #2a2a3a; color: #e0e0e0; border-color: #555; }
body.fm-dark .fm-input::placeholder                   { color: #888; }
body.fm-dark .fm-label                                { color: #cfd8e8; }
body.fm-dark .fm-muted                                { color: #999; }

/* Phase 20 — multiarg secondary contract-render (argomenti aggiunti
   via body.fm-multiarg). Tono ridotto + separator top. */
.fm-contract-render.fm-muted,
.fm-contract-wrap.fm-muted {
    opacity: 0.9;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
    padding-top: 8px;
    margin-top: 14px;
}
body.fm-dark .fm-contract-render.fm-muted,
body.fm-dark .fm-contract-wrap.fm-muted {
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* Phase 20 — body.fm-verifica-mode + body.fm-multiarg: nasconde
   .fm-contract-render degli esercizi studente (source topic), lascia
   visibile solo #type_verAll con verifiche correlate/intersect.
   Single-arg (verifica-mode solo, no multiarg): comportamento precedente
   invariato — esercizi primary visible + verifica sotto. */
body.fm-multiarg.fm-verifica-mode #fm-content > .fm-contract-render,
body.fm-multiarg.fm-verifica-mode #fm-content > .fm-contract-wrap,
body.fm-multiarg.fm-verifica-mode #fm-content > .pagestyle {
    display: none;
}

/* Phase 20 — #type_verAll in modalità multiarg union: banner discreto
   che indica "esercizi aggregati da N topic" (dedupe per data-id). */
.fm-multiarg-union::before {
    content: "🔀 Esercizi aggregati da " attr(data-multiarg-count) " argomenti selezionati";
    display: block;
    padding: 4px 10px;
    margin-bottom: 8px;
    font-size: 11px;
    font-style: italic;
    color: #7a5b00;
    background: rgba(255, 250, 200, 0.5);
    border-left: 3px solid #b58900;
    border-radius: 2px;
}
body.fm-dark .fm-multiarg-union::before {
    color: #ffd88a;
    background: rgba(70, 55, 10, 0.4);
    border-left-color: #d4a020;
}
body.fm-dark .fm-link,
body.fm-dark a                                        { color: #9dc9ff; }
body.fm-dark .fm-tabs                                 { border-bottom-color: #555; }
body.fm-dark .fm-tab                                  { background: #2a2a3a; color: #cfd8e8; border-color: #555; }
body.fm-dark .fm-tab--active                          { background: #444; color: #fff; border-color: #777; }
body.fm-dark .fm-an-card                              { background: #2a2a3a; color: #e0e0e0; border-color: #555; }
body.fm-dark .fm-an-card .fm-an-num                   { color: #9dc9ff; }
body.fm-dark fieldset                                 { border-color: #555; color: #e0e0e0; }
body.fm-dark code                                     { background: #2a2a3a; color: #cfd8e8; padding: 1px 4px; border-radius: 2px; }

/* Bottoni white-text generici (sidepage, admin tools) */
body.fm-dark .fm-btn,
body.fm-dark .fm-btn--primary,
body.fm-dark .fm-btn--ghost,
body.fm-dark .fm-btn--small                           { color: #fff; border-color: #777; }
body.fm-dark .fm-btn                                  { background: #3a3a44; }
body.fm-dark .fm-btn:hover:not(:disabled)             { background: #4a4a54; border-color: #888; }
body.fm-dark .fm-btn:disabled                         { background: #232328; color: #6b6b75; border-color: #3a3a44; cursor: not-allowed; opacity: 0.7; }
body.fm-dark .fm-btn--ghost                           { background: transparent; }
body.fm-dark .fm-btn--ghost:hover                     { background: rgba(255,255,255,.08); }
body.fm-dark .fm-btn--primary                         { background: #1a4ea8; border-color: #2563c0; }
body.fm-dark .fm-btn--primary:hover:not(:disabled)    { background: #2563c0; }
body.fm-dark .fm-btn--primary:disabled                { background: #1a3050; color: #6b8bb0; }
body.fm-dark .fm-btn--danger                          { background: #c62828; color: #fff; border-color: #ef4444; }
body.fm-dark .fm-btn--danger:hover:not(:disabled)     { background: #d62929; }
body.fm-dark .fm-btn--accent                          { background: #15803d; color: #fff; border-color: #16a34a; }
body.fm-dark .fm-btn--accent:hover:not(:disabled)     { background: #16a34a; }

/* Sidepage btn (.fm-sb-sec) hanno sfondo colorato chiaro: assicuriamoci
   che testo resti leggibile in dark sui colori già scuri. */
body.fm-dark .scrollbar .btn                          { color: #1a1a1a !important; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

/* Cookie privacy page: text bianco su sfondo bianco era illeggibile */
body.fm-dark h1, body.fm-dark h2, body.fm-dark h3, body.fm-dark h4,
body.fm-dark h5, body.fm-dark h6                      { color: #cfd8e8; }
body.fm-dark .fm-breadcrumb a                         { color: #9dc9ff; }
body.fm-dark .fm-alert--warn                          { background: #5a4a1a; color: #ffe066; border-color: #7a6a2a; }
body.fm-dark .fm-alert--success                       { background: #1a4a2a; color: #b6e0c2; border-color: #2a7a4a; }
body.fm-dark .fm-alert--error                         { background: #4a1a1a; color: #ffb6b6; border-color: #7a2a2a; }

/* Phase 20 — dark mode per /teacher/templates (editor modelli esercizi).
 * Override di stili inline hardcoded nella view (bg #fff, border #ddd,
 * textarea #ccc). Mantiene contrasto alto + coerenza col resto
 * dell'admin/dashboard in body.fm-dark. */
body.fm-dark .fm-tpl-page                       { color: #e1e6ef; }
body.fm-dark .fm-tpl-page h1                    { color: #cfd8e8; }
body.fm-dark .fm-tpl-page h2                    { color: #9dc9ff !important; }
body.fm-dark .fm-tpl-page p                     { color: #a0a8b8; }
body.fm-dark .fm-tpl-page header a              { background: #2a2a3a !important; border-color: #3a3a4a !important; color: #cfd8e8 !important; }
body.fm-dark .fm-tpl-card                             { background: #1e1e2a !important; border-color: #3a3a4a !important; box-shadow: 0 1px 3px rgba(0,0,0,.3) !important; }
body.fm-dark .fm-tpl-card label > span                { color: #b8bfc8 !important; }
body.fm-dark .fm-tpl-title,
body.fm-dark .fm-tpl-intro,
body.fm-dark .fm-tpl-field,
body.fm-dark .fm-tpl-opt-content                      { background: #15151f !important; color: #e1e6ef !important; border-color: #3a3a4a !important; }
body.fm-dark .fm-tpl-title:focus,
body.fm-dark .fm-tpl-intro:focus,
body.fm-dark .fm-tpl-field:focus,
body.fm-dark .fm-tpl-opt-content:focus                { border-color: #5a7aaa !important; outline: none; }
body.fm-dark .fm-tpl-item                             { background: #24242f !important; border-color: #3a3a4a !important; }
body.fm-dark .fm-tpl-item > div:first-child span      { color: #a0a8b8 !important; }
body.fm-dark .fm-tpl-add-collect,
body.fm-dark .fm-tpl-add-rm,
body.fm-dark .fm-tpl-add-vf                           { background: #2a3a5a !important; border-color: #4a6aaa !important; color: #9dc9ff !important; }
body.fm-dark #fm-tpl-save                             { background: #3a6ad0 !important; color: #fff !important; }
body.fm-dark #fm-tpl-save:hover                       { background: #2a5ac7 !important; }
body.fm-dark #fm-tpl-save:disabled                    { background: #3a3a4a !important; color: #8a8a9a !important; cursor: wait; }
body.fm-dark #fm-tpl-reload                           { background: #2a2a3a !important; border-color: #3a3a4a !important; color: #cfd8e8 !important; }
body.fm-dark #fm-tpl-status                           { background: #2a2a3a !important; color: #cfd8e8 !important; border-color: #3a3a4a !important; }
/* Delete buttons (✕): mantieni rosso accent ma adatta bg + contrasto */
body.fm-dark .fm-tpl-item > div:first-child button    { background: #2a1a1a !important; border-color: #7a3a3a !important; color: #ff9090 !important; }
body.fm-dark .fm-tpl-item > div:first-child button:hover { background: #4a1a1a !important; }
body.fm-dark .fm-tpl-opt button                       { color: #ff9090 !important; }

/* ══════════════════════════════════════════════════════════════════
   Phase G1.a — Google Drive status pill (teacher dashboard).
   Stati: loading, connected, disconnected, error.
   ══════════════════════════════════════════════════════════════════ */
.fm-drive-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #f4f6fb;
    border: 1px solid #d8dee8;
    font-size: .9rem;
    margin-top: var(--fm-space-2, 6px);
}
.fm-drive-pill .fm-drive-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c8c8c8;
    flex-shrink: 0;
}
.fm-drive-pill[data-state="connected"]    .fm-drive-dot { background: #34a853; }
.fm-drive-pill[data-state="disconnected"] .fm-drive-dot { background: #b0b0b0; }
.fm-drive-pill[data-state="error"]        .fm-drive-dot { background: #d93025; }
.fm-drive-pill[data-state="loading"]      .fm-drive-dot { background: #fbbc04; animation: fm-drive-pulse 1.4s ease-in-out infinite; }
@keyframes fm-drive-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.fm-drive-pill .fm-drive-actions { margin-left: 12px; display: inline-flex; gap: 6px; }
body.fm-dark .fm-drive-pill { background: #1f2330; border-color: #2e3445; color: #cfd8e8; }

/* ══════════════════════════════════════════════════════════════════
   Phase G3.a — Drive sync buttons.
   G19.48 — refactor: 3-button triplet (Drive / Local / GitHub) preceduto
   da label "Sync:" dentro `.fm-sync-bar`. Stile icon-only quadrato (no
   etichetta testuale: la label e' solo nel container).
   ══════════════════════════════════════════════════════════════════ */
.fm-sync-bar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
}
.fm-sync-bar__label {
    font-size: .82rem;
    font-weight: 600;
    opacity: .85;
    margin-right: 2px;
}

.fm-sync-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: background .12s ease, transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}
.fm-sync-btn:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.fm-sync-btn:active { transform: translateY(1px); }
.fm-sync-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Drive (verde) */
.fm-sync-btn--drive,
.fm-session-drive-sync {
    background: linear-gradient(180deg, #34a853 0%, #2a8f44 100%);
    border-color: #1f7a36;
}
.fm-sync-btn--drive:hover,
.fm-session-drive-sync:hover {
    background: linear-gradient(180deg, #3eb95f 0%, #2f9c4a 100%);
}
.fm-session-drive-sync[data-state="syncing"] {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    border-color: #b45309;
}
.fm-session-drive-sync[data-state="syncing"]:hover {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    border-color: #b91c1c;
}

/* Local (blu) */
.fm-sync-btn--local,
.fm-session-local-sync {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1e3a8a;
}
.fm-sync-btn--local:hover,
.fm-session-local-sync:hover {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}
.fm-session-local-sync[data-state="syncing"] {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    border-color: #b45309;
    cursor: wait;
}

/* GitHub (grigio scuro, placeholder futuro) */
.fm-sync-btn--github,
.fm-session-github-sync {
    background: linear-gradient(180deg, #24292f 0%, #1f2328 100%);
    border-color: #14171a;
}
.fm-sync-btn--github:hover,
.fm-session-github-sync:hover {
    background: linear-gradient(180deg, #32383f 0%, #24292f 100%);
}

.fm-local-icon, .fm-drive-icon, .fm-github-icon {
    display: inline-block;
    vertical-align: middle;
}
.fm-sync-btn .fm-drive-icon,
.fm-sync-btn .fm-local-icon,
.fm-sync-btn .fm-github-icon {
    width: 16px;
    height: 16px;
    margin: 0;
}

body.fm-dark .fm-session-local-sync,
body.fm-dark .fm-sync-btn--local {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
    border-color: #1e3a8a;
}

/* Per-item sync btn dentro .fm-item-actions (accanto a ✎🗑👁📥). */
.fm-item-btn.fm-item-drive-sync { color: #9dd1ff; }
.fm-item-btn.fm-item-drive-sync[data-state="syncing"] { opacity: .5; cursor: wait; }
.fm-item-btn.fm-item-drive-sync[data-state="unsynced"]::after {
    content: "•";
    color: #f4a261;
    margin-left: -2px;
    font-size: 1.2em;
    vertical-align: super;
    line-height: 0;
}
body.fm-dark .fm-session-drive-sync {
    background: linear-gradient(180deg, #2d8745 0%, #226d36 100%);
    border-color: #1a5728;
}
body.fm-dark .fm-session-drive-sync:hover {
    background: linear-gradient(180deg, #379354 0%, #2a7a40 100%);
}

/* G7 → G19.48 — Drive sync icon dimensione standard (overridden da
   .fm-sync-btn .fm-drive-icon più sopra; questa regola resta solo per
   il legacy `.fm-item-drive-sync` per-item). */
.fm-item-drive-sync .fm-drive-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Phase G7 — dark mode fix: fm-modal-cancel + fm-sb-slider washout. */
body.fm-dark .fm-btn.fm-modal-cancel {
    background: #2a2a35 !important;
    color: #d8e0ec !important;
    border: 1px solid #4a5160 !important;
}
body.fm-dark .fm-btn.fm-modal-cancel:hover {
    background: #3a3a45 !important;
    border-color: #6a7180 !important;
}
body.fm-dark .fm-sb-slider {
    background-color: #2a2a35 !important;
    color: #d8e0ec !important;
    border: 1px solid #4a5160 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Phase G3.b — Modal create mappa: drag-drop file + drawio embed.
   ══════════════════════════════════════════════════════════════════ */
/* Phase G3.b/review — sezioni reveal dentro fieldset "Modello documento". */
.fm-modal-doc-section {
    margin: 4px 0 8px 24px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}
.fm-modal-doc-section[hidden] { display: none !important; }
.fm-modal-doc-section.fm-modal-template-pick {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.fm-dark .fm-modal-doc-section {
    background: #1f2330;
    border-color: #2e3445;
    color: #cfd8e8;
}

/* ══════════════════════════════════════════════════════════════════
   Phase G7 — Drive sync log panel (floating bottom-right).
   Visibile solo durante operazioni sync batch.
   ══════════════════════════════════════════════════════════════════ */
.fm-drive-sync-panel {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 380px;
    max-height: 60vh;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 9998;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-size: 12px;
}
.fm-drive-sync-panel--active { display: flex; }
.fm-drive-sync-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #cbd5e1;
}
.fm-drive-sync-head strong { flex: 1; }
.fm-drive-sync-counter { font-family: monospace; color: #475569; }
.fm-drive-sync-cancel {
    background: #fef2f2; border: 1px solid #fca5a5; border-radius: 4px;
    cursor: pointer; padding: 3px 10px;
    font-size: 12px; font-weight: 600;
    color: #b91c1c;
    transition: background .12s ease;
}
.fm-drive-sync-cancel:hover { background: #fecaca; }
.fm-drive-sync-bar {
    height: 4px; background: #e2e8f0; overflow: hidden;
}
.fm-drive-sync-bar-fill {
    height: 100%; background: #34a853;
    width: 0%; transition: width .25s ease;
}
.fm-drive-sync-log {
    flex: 1; overflow-y: auto;
    padding: 8px 12px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    background: #fafafa;
}
.fm-drive-sync-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-drive-sync-line--ok    { color: #166534; }
.fm-drive-sync-line--error { color: #b91c1c; font-weight: 600; }
.fm-drive-sync-line--info  { color: #475569; }

body.fm-dark .fm-drive-sync-panel { background: #1f2330; border-color: #2e3445; color: #cfd8e8; }
body.fm-dark .fm-drive-sync-head { background: #161a24; border-color: #2e3445; }
body.fm-dark .fm-drive-sync-log { background: #14171f; }
body.fm-dark .fm-drive-sync-line--ok    { color: #4ade80; }
body.fm-dark .fm-drive-sync-line--error { color: #ef4444; }
body.fm-dark .fm-drive-sync-line--info  { color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════════
   Phase G7 — riquadro "Apri editor drawio" dentro modal edit mappa.
   ══════════════════════════════════════════════════════════════════ */
.fm-modal-drawio-edit-wrap {
    margin: 6px 0;
    padding: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
}
.fm-modal-drawio-edit-info {
    margin: 0 0 6px;
    font-size: 12px;
    color: #475569;
}
body.fm-dark .fm-modal-drawio-edit-wrap {
    background: #1e293b;
    border-color: #334155;
}
body.fm-dark .fm-modal-drawio-edit-info {
    color: #cbd5e1;
}

.fm-drop-zone {
    border: 2px dashed #94a3b8;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    background: #f8fafc;
    transition: border-color .15s, background .15s;
}
.fm-drop-zone--over { border-color: #2563eb; background: #eff6ff; }
.fm-drop-status { word-break: break-all; }

.fm-modal-map-drawio { padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 6px; }

.fm-drawio-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.fm-drawio-iframe { width: 95vw; height: 92vh; border: 0; border-radius: 6px; background: #fff; }
.fm-drawio-close {
    position: absolute; top: 12px; right: 16px;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 999px;
    width: 36px; height: 36px; font-size: 18px; cursor: pointer;
}
.fm-drawio-close:hover { background: #f1f5f9; }

body.fm-dark .fm-modal-mappa-mode,
body.fm-dark .fm-modal-map-drawio { background: #1f2330; border-color: #2e3445; color: #cfd8e8; }
body.fm-dark .fm-drop-zone { background: #1f2330; border-color: #475569; color: #cfd8e8; }
body.fm-dark .fm-drop-zone--over { border-color: #60a5fa; background: #1e293b; }

/* ──────────── Phase G8 — Modern unified topbar ────────────
 * Sostituisce gradualmente `.upbar > .selwrapbtncopy` legacy.
 * 3 zone: meta (titolo/tipo) | target (azioni primarie) | actions (filtri/editor).
 * topbar-modern.js gestisce visibilita a runtime (body.exercise-context).
 * Bridge legacy invisibile (#overleaf/#Server/#syncDrive/#btnCopyver) interno. */
.fm-topbar {
    display: flex;
    /* G19.26 — wrap permette a `.fm-topbar__zone--eser` di andare a
     * nuova riga (flex-basis: 100% + order: 99). Le 3 zone primarie
     * (meta/target/actions) restano sulla stessa riga via `flex: 0 1 auto`. */
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #1f3b5c 0%, #2a5d8a 50%, #1f3b5c 100%);
    color: #f1f5f9;
    border-bottom: 1px solid #0f172a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    /* G9.14 — position fixed: rimane in top durante scroll pagina,
     * indipendente da overflow degli ancestor (sticky non funziona
     * dentro #fm-content che ha overflow). left = sidebar width
     * cosi' non si sovrappone alla sidebar. */
    position: fixed;
    top: 0;
    left: var(--widthLsidebar, 200px);
    right: 0;
    z-index: 1500;
    font-size: 13px;
    line-height: 1.2;
}
body.fm-sidebar-closed .fm-topbar {
    left: 34px; /* sidebar collassata */
}
/* Reserve top space per fm-topbar fixed (~46px) cosi' il contenuto
 * non sta sotto la topbar. Solo quando topbar e' attiva. */
body.fm-topbar-active.fm-has-upbar #fm-content,
body.fm-topbar-active.fm-has-upbar main#fm-content,
body.fm-topbar-active.fm-has-upbar .pagestyle,
body.fm-topbar-active.fm-has-upbar > main {
    padding-top: 50px !important;
    margin-top: 0 !important;
}
.fm-topbar[hidden] { display: none; }
.fm-topbar__zone {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.fm-topbar__zone--meta {
    flex: 0 1 auto;
    min-width: 140px;
    padding-right: 6px;
    border-right: 1px solid rgba(255,255,255,0.12);
    overflow: hidden;
}
.fm-topbar__zone--target {
    flex: 0 1 auto;
    gap: 8px;
}
.fm-topbar__zone--actions {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 6px;
    border-left: 1px solid rgba(255,255,255,0.12);
}
/* G20.6 — .fm-printinfo-actions dentro topbar/.selector-eser DEVE essere
 * inline-flex nowrap per tenere [save | load | Info | verTitlePrefix |
 * verTitle] tutti sulla stessa riga. Senza questo verTitle finiva sotto
 * verTitlePrefix per default block layout. */
.fm-topbar__zone--eser .fm-printinfo-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}
/* G20.6 — verTitlePrefix + verTitle rilocati dentro .fm-printinfo-actions
 * (zone --eser), subito dopo il bottone Info. Compatti per stare in linea
 * con scelte-verifica-wrapper senza forzare wrap. */
.fm-printinfo-actions #verTitlePrefix,
.fm-printinfo-actions #verTitle {
    height: 22px;
    font-size: 11px;
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    padding: 0 6px;
    margin-left: 3px;
}
.fm-printinfo-actions #verTitlePrefix,
.scelte-verifica-wrapper #verTitlePrefix {
    min-width: 50px;
    max-width: 90px;
    padding: 0 4px;
}
.fm-printinfo-actions #verTitle,
.scelte-verifica-wrapper #verTitle {
    flex: 1 1 auto;
    min-width: 70px;
    /* G20.7 — verTitle si estende fino al margine destro della zona scelte. */
    max-width: none;
}
/* Versione + verTitle/Prefix dentro .scelte-verifica-wrapper: stessi stili
 * compatti che applichiamo in .fm-printinfo-actions. */
.scelte-verifica-wrapper #verTitlePrefix,
.scelte-verifica-wrapper #verTitle,
.scelte-verifica-wrapper #versione {
    height: 22px;
    font-size: 11px;
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
}
.scelte-verifica-wrapper #versione {
    width: 56px;
    padding: 0 4px;
}
body.fm-light .scelte-verifica-wrapper #verTitlePrefix,
body.fm-light .scelte-verifica-wrapper #verTitle,
body.fm-light .scelte-verifica-wrapper #versione {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}
.fm-printinfo-actions #verTitle:focus,
.fm-printinfo-actions #verTitlePrefix:focus {
    outline: none;
    border-color: rgba(96,165,250,0.5);
    background: rgba(255,255,255,0.12);
}
body.fm-light .fm-printinfo-actions #verTitlePrefix,
body.fm-light .fm-printinfo-actions #verTitle {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}
/* Info btn rilocato in --eser zone: compatto. */
.fm-printinfo-actions [data-fm-action="info"].fm-topbar__btn--in-eser {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 6px !important;
    margin-left: 3px !important;
    font-size: 11px !important;
}
.fm-printinfo-actions [data-fm-action="info"].fm-topbar__btn--in-eser .fm-topbar__lbl {
    font-size: 11px;
    margin-left: 2px;
}
/* G19.22 + G19.26 + G19.27 — slot per `.selector-eser` rilocata in topbar:
 * forzato su nuova riga (flex-basis 100% + order 99) cosi' non comprime
 * le zone meta/target/actions. Style uniformato al topbar dark
 * (semi-trasparente, compatti 24px h). */
.fm-topbar__zone--eser {
    flex: 0 0 100%;
    order: 99;
    gap: 4px;
    padding: 3px 0 0;
    margin-top: 3px;
    border-top: 1px solid rgba(255,255,255,0.12);
    min-width: 0;
    flex-wrap: nowrap;
}
.fm-topbar__zone--eser .selector-eser {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
/* G20.7 — 3 sub-zone visualmente separate dentro .selector-eser:
 * [Crea] | [Help + PrintInfo (💾📂 + ⓘInfo)] | [Help + Scelte (💾v1v2v3📂 + verTitle)]
 * Separazione: border-left semi-trasparente. */
.fm-topbar__zone--eser .fm-eser-zone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    flex-wrap: nowrap;
}
.fm-topbar__zone--eser .fm-eser-zone--printinfo,
.fm-topbar__zone--eser .fm-eser-zone--scelte {
    border-left: 1px solid rgba(255,255,255,0.16);
}
.fm-topbar__zone--eser .fm-eser-zone--scelte { flex: 1 1 auto; min-width: 0; }
.fm-topbar__zone--eser .fm-eser-zone--create { flex: 0 0 auto; padding-left: 0; }
body.fm-light .fm-topbar__zone--eser .fm-eser-zone--printinfo,
body.fm-light .fm-topbar__zone--eser .fm-eser-zone--scelte {
    border-left-color: rgba(15,23,42,0.12);
}

/* `+ Crea esercizi` — compatto, accent verde sobrio */
.fm-topbar__zone--eser .selector-eser .fm-create-eser-btn,
.fm-topbar__zone--eser .selector-eser #fm-create-exercise-btn {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    background: rgba(34, 197, 94, 0.18) !important;
    color: #d1fae5 !important;
    border: 1px solid rgba(34, 197, 94, 0.42) !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1 !important;
    box-shadow: none !important;
    text-transform: none;
    letter-spacing: 0.1px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.fm-topbar__zone--eser .selector-eser .fm-create-eser-btn:hover,
.fm-topbar__zone--eser .selector-eser #fm-create-exercise-btn:hover {
    background: rgba(34, 197, 94, 0.32) !important;
    border-color: rgba(34, 197, 94, 0.7) !important;
    color: #ffffff !important;
}
.fm-topbar__zone--eser .selector-eser .fm-create-eser-icon {
    margin-right: 4px;
    font-size: 13px;
    color: #86efac;
}
.fm-topbar__zone--eser .selector-eser .fm-create-eser-btn:hover .fm-create-eser-icon {
    color: #ffffff;
}

/* help-circle (?) — discreto, neutro */
.fm-topbar__zone--eser .selector-eser .help-circle {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.65) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    font-size: 11px;
}
.fm-topbar__zone--eser .selector-eser .help-circle:hover {
    background: rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
}

/* PrintInfo save/load (💾/📂) — compatti 22x22, semi-trasparenti */
body.fm-topbar-active .fm-topbar__zone--eser #savePrintInfoBtn,
body.fm-topbar-active .fm-topbar__zone--eser #loadPrintInfoBtn,
.fm-topbar__zone--eser #savePrintInfoBtn,
.fm-topbar__zone--eser #loadPrintInfoBtn {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.10) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
body.fm-topbar-active .fm-topbar__zone--eser #savePrintInfoBtn:hover,
.fm-topbar__zone--eser #savePrintInfoBtn:hover {
    background: rgba(20, 184, 166, 0.32) !important;
    border-color: rgba(20, 184, 166, 0.62) !important;
    color: #ffffff !important;
}
body.fm-topbar-active .fm-topbar__zone--eser #loadPrintInfoBtn:hover,
.fm-topbar__zone--eser #loadPrintInfoBtn:hover {
    background: rgba(59, 130, 246, 0.32) !important;
    border-color: rgba(59, 130, 246, 0.62) !important;
    color: #ffffff !important;
}

/* `.scelte-verifica-wrapper` (Salva/Carica Scelte + v1/v2/v3) — uniformato
 * al topbar dark. Spinge a destra via margin-left auto. */
.fm-topbar__zone--eser .scelte-verifica-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.fm-topbar__zone--eser .scelte-verifica-wrapper .salva-scelte-btn,
.fm-topbar__zone--eser .scelte-verifica-wrapper .carica-scelte-btn {
    height: 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600;
    line-height: 1 !important;
    border: 1px solid;
    cursor: pointer;
    text-transform: none;
    white-space: nowrap;
}
.fm-topbar__zone--eser .scelte-verifica-wrapper .salva-scelte-btn {
    background: rgba(22, 163, 74, 0.22) !important;
    color: #d1fae5 !important;
    border-color: rgba(22, 163, 74, 0.5) !important;
}
.fm-topbar__zone--eser .scelte-verifica-wrapper .salva-scelte-btn:hover {
    background: rgba(22, 163, 74, 0.4) !important;
    color: #ffffff !important;
}
.fm-topbar__zone--eser .scelte-verifica-wrapper .carica-scelte-btn {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #dbeafe !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
}
.fm-topbar__zone--eser .scelte-verifica-wrapper .carica-scelte-btn:hover {
    background: rgba(37, 99, 235, 0.4) !important;
    color: #ffffff !important;
}
/* G20.7 — .scelte-versioni come segmented buttons (v1/v2/v3 toggle).
 * Compatto: ogni button 22x22, border condiviso. Active = inset+pressed. */
.fm-topbar__zone--eser .scelte-versioni {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 22px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    box-sizing: border-box;
}
.fm-topbar__zone--eser .scelte-versioni .fm-version-btn {
    height: 20px;
    min-width: 22px;
    padding: 0 6px;
    background: transparent;
    color: rgba(255,255,255,0.65);
    border: 0;
    border-left: 1px solid rgba(255,255,255,0.14);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.fm-topbar__zone--eser .scelte-versioni .fm-version-btn:first-child { border-left: 0; }
.fm-topbar__zone--eser .scelte-versioni .fm-version-btn:hover {
    background: rgba(255,255,255,0.10);
    color: #ffffff;
}
.fm-topbar__zone--eser .scelte-versioni .fm-version-btn--active {
    background: rgba(96,165,250,0.32);
    color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

/* G20.7 — Random selection toggle + button (zone scelte) */
.fm-topbar__zone--eser .scelte-verifica-wrapper #fm-random-toggle,
.fm-topbar__zone--eser .scelte-verifica-wrapper #fm-random-pick {
    height: 22px;
    width: 26px;
    min-width: 26px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fm-topbar__zone--eser .scelte-verifica-wrapper #fm-random-toggle[aria-pressed="true"] {
    background: rgba(168, 85, 247, 0.32);
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
    color: #fff;
}
.fm-topbar__zone--eser .scelte-verifica-wrapper #fm-random-toggle:hover,
.fm-topbar__zone--eser .scelte-verifica-wrapper #fm-random-pick:hover {
    background: rgba(255,255,255,0.14);
}
.fm-topbar__zone--eser .scelte-verifica-wrapper #fm-random-pick {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.5);
}
.fm-topbar__zone--eser .scelte-verifica-wrapper #fm-random-pick:hover {
    background: rgba(245, 158, 11, 0.4);
}

/* G20.7 — Modernizzazione del .check header (problem) e .input-wrapper-pt_tot.
 * Layout pill-style coerente con gli altri controlli del topbar. */
.problem .check {
    height: auto !important;
    min-height: 26px;
    padding: 2px 4px !important;
    gap: 4px !important;
    border-left: 1px solid rgba(99,102,241,0.35) !important;
    border-right: 1px solid rgba(99,102,241,0.35) !important;
    flex-wrap: nowrap;
    overflow: visible;
}
.problem .check > div {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* G20.7 — A/R checkbox: input nativo nascosto, .labcheck diventa una pill
 * cliccabile (`<label for=>` mantiene il toggle). Stato checked controllato
 * via :has() sul wrapper div. */
.problem .check .checkboxA,
.problem .check .checkboxB {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
.problem .check .labcheck {
    margin: 0;
    height: 20px;
    width: 22px;
    min-width: 22px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.30);
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.85);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    transition: background-color .12s, color .12s, border-color .12s;
}
.problem .check .labcheck:hover {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
}
/* checked state: A → verde, R → arancione */
.problem .check > div:has(.checkboxA:checked) .labcheck {
    background: #16a34a;
    border-color: #15803d;
    color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.problem .check > div:has(.checkboxB:checked) .labcheck {
    background: #f59e0b;
    border-color: #d97706;
    color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
/* Light-theme override (background biancastro) */
body.fm-light .problem .check .labcheck {
    border-color: rgba(15,23,42,0.20);
    background: #ffffff;
    color: #475569;
}
body.fm-light .problem .check .labcheck:hover { background: #f1f5f9; color: #0f172a; }
/* ptA / ptR: pill compatti. Il .selection ha sfondo dark indigo
 * (#5959a9) → testi devono avere contrasto bianco (era indigo on indigo,
 * illeggibile). Sfondo pill semi-trasparente bianco; testi white. */
.problem .check .input-wrapper-pt_tot {
    height: 20px;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    margin: 0 !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 4px !important;
    font-size: 10px;
    font-weight: 600;
    gap: 3px;
    line-height: 1;
    flex-shrink: 1;
}
.problem .check .pt_totA,
.problem .check .pt_totB {
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.78);
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.problem .check .total-pointsA,
.problem .check .total-pointsB {
    color: #ffffff;
    font-weight: 700;
    font-size: 10.5px;
}
/* Light theme: indigo testi su sfondo bianco (contrasto OK). */
body.fm-light .problem .check .input-wrapper-pt_tot {
    background: rgba(99,102,241,0.10) !important;
    border-color: rgba(99,102,241,0.35) !important;
}
body.fm-light .problem .check .pt_totA,
body.fm-light .problem .check .pt_totB { color: rgba(99,102,241,0.95); }
body.fm-light .problem .check .total-pointsA,
body.fm-light .problem .check .total-pointsB { color: #0f172a; }

/* G20.7 — Random per-problem inputs: hidden by default, visible quando
 * body ha .fm-rand-mode (toggle attivo). Compatti accanto ai checkbox A/R. */
.fm-rand-inputs { display: none; }
body.fm-rand-mode .fm-rand-inputs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}
body.fm-rand-mode .fm-rand-inputs .fm-rand-n,
body.fm-rand-mode .fm-rand-inputs .fm-rand-pt {
    width: 48px;
    height: 20px;
    padding: 0 4px;
    font-size: 10.5px;
    border: 1px solid rgba(216, 180, 254, 0.7);
    border-radius: 4px;
    background: rgba(216, 180, 254, 0.18);
    color: #ffffff;
    font-weight: 600;
}
body.fm-rand-mode .fm-rand-inputs .fm-rand-n::placeholder,
body.fm-rand-mode .fm-rand-inputs .fm-rand-pt::placeholder {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    letter-spacing: 0.04em;
}
body.fm-light.fm-rand-mode .fm-rand-inputs .fm-rand-n,
body.fm-light.fm-rand-mode .fm-rand-inputs .fm-rand-pt {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.08);
    color: #0f172a;
}
body.fm-light.fm-rand-mode .fm-rand-inputs .fm-rand-n::placeholder,
body.fm-light.fm-rand-mode .fm-rand-inputs .fm-rand-pt::placeholder {
    color: rgba(168, 85, 247, 0.7);
}

/* G20.7 — .selection auto-width: si adatta al contenuto invece di
 * occupare 305px fissi. Per far estendere .collapsible fino al bordo
 * destro coprendo TUTTO lo spazio rimanente (era residuo blu vuoto a
 * destra) convertiamo .problem da float-based a flex.
 * - .PosCheckEs: flex 0 0 auto (size to content)
 * - .collapsible: flex 1 1 auto (riempie il resto)
 * - .content: flex 1 1 100% via flex-wrap → va a capo sotto. */
body.admin-access .problem {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
}
body.admin-access .PosCheckEs > .selection {
    width: auto !important;
}
body.admin-access .problem > .PosCheckEs {
    width: auto !important;
    float: none !important;
    flex: 0 0 auto;
}
body.admin-access .problem > .collapsible {
    width: auto !important;
    flex: 1 1 auto;
    margin-left: 4px;
}
body.admin-access .problem > .content {
    flex: 1 1 100%;
}

/* G20.7-update — verTitle/Prefix dentro .titolo.fm-related-header.
 * Si allineano accanto al testo "Verifiche correlate". */
.titolo.fm-related-header {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.titolo.fm-related-header #verTitlePrefix,
.titolo.fm-related-header #verTitle {
    height: 28px;
    font-size: 13px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
}
.titolo.fm-related-header #verTitlePrefix { min-width: 120px; max-width: 160px; }
.titolo.fm-related-header #verTitle { flex: 1 1 200px; min-width: 200px; }
body.fm-dark .titolo.fm-related-header #verTitlePrefix,
body.fm-dark .titolo.fm-related-header #verTitle {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
.fm-topbar__doctype {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #cfe3ff;
}
.fm-topbar__title {
    font-weight: 500;
    font-size: 13px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28vw;
}
/* G9.25 — slot per P.TOT-A / P.TOT-R sempre visibili nel topbar.
 * Le sub_wrapInfoSchool spostate dentro vengono compattate. */
.fm-topbar__totals {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    flex: 0 0 auto;
}
.fm-topbar__totals:empty { display: none; }
.fm-topbar__totals .sub_wrapInfoSchool {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 4px !important;
    padding: 1px 5px !important;
    margin: 0 !important;
    height: 22px !important;
    width: auto !important;
    min-width: 0 !important;
}
.fm-topbar__totals p {
    margin: 0 !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #cfe3ff !important;
    white-space: nowrap;
    line-height: 1;
}
.fm-topbar__totals input {
    width: 36px !important;
    background: rgba(0,0,0,0.22) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 3px !important;
    padding: 1px 3px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    height: 18px !important;
    margin: 0 !important;
    box-shadow: none !important;
}
body.fm-dark .fm-topbar__totals .sub_wrapInfoSchool {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
.fm-topbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    white-space: nowrap;
}
.fm-topbar__btn:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.fm-topbar__btn:active { transform: translateY(0); box-shadow: none; }
.fm-topbar__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.fm-topbar__btn--primary {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border-color: #15803d;
    color: #ffffff;
    font-weight: 600;
}
/* G20.7 — btn topbar con logo SVG (Overleaf, ZIP, VSCode): proporzionato
 * agli altri btn topbar (text height ~16px + padding 6px = ~28px). Logo
 * 16px altezza per allinearsi visualmente al testo dei btn vicini. */
.fm-topbar__btn--logo {
    padding: 2px 3px !important;
    gap: 0 !important;
}
.fm-topbar__logo {
    height: 21px;
    width: auto;
    max-width: 56px;
    display: block;
    object-fit: contain;
}
/* VSCode logo e' molto colorato → sfondo neutro non-accent
 * (override del btn--accent che ora serve solo per il bordo evidenziato). */
.fm-topbar__btn--logo.fm-topbar__btn--accent {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(96, 165, 250, 0.5);
}
.fm-topbar__btn--logo.fm-topbar__btn--accent:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(96, 165, 250, 0.8);
}
.fm-topbar__btn--primary:hover {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
}
.fm-topbar__btn--accent {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    border-color: #b45309;
    color: #ffffff;
    font-weight: 600;
}
.fm-topbar__btn--accent:hover {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
}
.fm-topbar__btn--icon {
    padding: 6px 10px;
}
.fm-topbar__btn[aria-pressed="true"] {
    background: rgba(34, 197, 94, 0.32);
    border-color: #22c55e;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.fm-topbar__ico {
    font-size: 14px;
    line-height: 1;
}
.fm-topbar__lbl {
    font-size: 13px;
}

/* Bridge legacy invisibile: ID-only, non occupa spazio. */
.fm-topbar__legacy-bridge { display: none; }

/* Phase G8 — quando topbar moderna e' attiva, nasconde la upbar legacy
 * SENZA rimuoverla (script.js / selettori jQuery sui controlli filtri
 * residui di upbar-controls-container devono restare disponibili).
 * Implementato via class su <body> aggiunta da topbar-modern.js. */
body.fm-topbar-active .upbar {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
}
body.fm-topbar-active .upbar #upbar-toggle-container { display: none; }
body.fm-topbar-active .upbar .scrollbarUpBar {
    padding-top: 0;
    transform: none;
    transition: none;
}
/* G8.13 / G9.1 / G9.6 — upbar-controls-container come drawer slide-in via ⚙ filtri.
 * Default: nascosta quando topbar moderna attiva. Visibile solo quando
 * body ha .fm-filtri-open. La .upbar quando aperta NON deve occupare
 * spazio nel flow (altrimenti pusha la topbar in basso): la rendiamo
 * position:fixed wrapper trasparente che non interferisce con sticky topbar.
 * Il drawer interno (.upbar-controls-container) e' a sua volta position:fixed
 * con coordinate proprie. */
body.fm-topbar-active .upbar { display: none; }
body.fm-topbar-active.fm-filtri-open .upbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 1599;
    pointer-events: none;
    padding: 0;
    margin: 0;
}
body.fm-topbar-active.fm-filtri-open .upbar #upbar-toggle-container,
body.fm-topbar-active.fm-filtri-open .upbar .scrollbarUpBar > .selwrapbtncopy,
body.fm-topbar-active.fm-filtri-open .upbar .scrollbarUpBar > .upbar-controls-container > .wrapgrid:empty {
    display: none;
}
body.fm-topbar-active.fm-filtri-open .upbar .scrollbarUpBar {
    transform: none;
    transition: none;
    padding: 0;
    overflow: visible;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container {
    /* G9.21 — single row con 4 sezioni (dopo merge JS DIFFICOLTÀ+ORIGINE):
     *   col 1 = FILTRI (DIFFICOLTÀ + ORIGINE)
     *   col 2 = VISIBILITÀ
     *   col 3 = SHOWCHECKED
     *   col 4 = SELEZIONA TUTTI
     * Layout flex-row con figli a width fissa cosi' nessuno si squisha. */
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    position: fixed;
    top: 50px;
    right: 12px;
    z-index: 1600;
    background: #ffffff;
    color: #0f172a;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.28);
    width: min(900px, 96vw);
    max-height: calc(100vh - 80px);
    overflow: visible;
    font-size: 13px;
    align-items: stretch;
    pointer-events: auto;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > .wrapgrid,
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > .wrapgrid-checks {
    flex: 1 1 0;
    min-width: 160px;
}
/* Empty .wrapgrid (placeholder legacy senza figli): non occupa colonna */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > .wrapgrid:empty {
    display: none !important;
}
/* G9.21 — Header drawer "⚙ FILTRI": rimosso (ridondante con ::before
 * della prima wrapgrid che gia' dice "📊 Filtri"). Il bottone topbar
 * filtri attivo (aria-pressed=true) gia' indica lo stato. */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container::before {
    content: none !important;
    display: none !important;
}
/* Wrapper sezione (gruppi di controlli) — uniforme padding/border */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .wrapgrid,
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .wrapgrid-checks {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0;
    min-height: 0;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .wrapgrid:empty {
    display: none;
}
/* Header logico per i gruppi via prima riga (nessun H tag esistente,
 * usiamo pseudo-elements sui gruppi noti). */
body.fm-topbar-active.fm-filtri-open #toggle-visibility-control::before {
    content: "👁 Visibilità";
}
body.fm-topbar-active.fm-filtri-open #toggle-checkboxABin-control::before {
    content: "✅ ShowChecked";
}
body.fm-topbar-active.fm-filtri-open #toggle-selectAll-control::before {
    content: "☑ Seleziona tutti";
}
body.fm-topbar-active.fm-filtri-open #wrapper-mods::before {
    content: "🏷 Origine";
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > div::before {
    display: block;
    font-weight: 600;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #475569;
    margin: 0 0 6px 0;
    padding: 0 0 6px 0;
    border-bottom: 1px dashed #cbd5e1;
    /* G9.23 — altezza fissa cosi' la dashed line cade allo stesso y in
     * tutte le sezioni indipendentemente da content/text-wrap. */
    height: 21px;
    min-height: 21px;
    box-sizing: border-box;
    flex: 0 0 auto;
}
/* G9.21 — primo .wrapgrid (combina DIFFICOLTÀ + ORIGINE dopo JS merge) */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > .wrapgrid:first-of-type::before {
    content: "📊 Filtri";
}
/* Override legacy bg green su #sel-origin (era admin-style, non serve qui) */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container #sel-origin {
    background: transparent !important;
    background-color: transparent !important;
}
/* Layout dei 2 dropdown nel primo wrapgrid: flex-column, ognuno con
 * label propria sopra il button (evita ridondanza con section header). */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > .wrapgrid:first-of-type {
    flex-direction: column;
    gap: 10px;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > .wrapgrid:first-of-type > .dropdown {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > .wrapgrid:first-of-type > .dropdown > div:not(.dropdown-content) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px;
}
/* In questo layout combinato i label inner (DIFFICOLTÀ/ORIGINE) servono
 * a distinguere i 2 dropdown — li mostriamo come pill compatte sopra. */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > .wrapgrid:first-of-type .labelBtnDrop {
    display: inline-block !important;
    color: #475569 !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
}
/* Dropdown nel drawer: full-width pulito */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown {
    position: relative;
    margin: 0;
    width: 100%;
    background: transparent;
    border: 0;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown > div:not(.dropdown-content) {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
/* G9.16 — labelBtnDrop legacy ridondante: il section header ::before
 * gia' mostra "DIFFICOLTÀ"/"ORIGINE"/etc. Nascondi il label inner.
 * Eccezione: i checkbox-row li mantengono perche' indicano il singolo
 * controllo (HideAll Eser, ShowChecked-A, etc). */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown .labelBtnDrop {
    display: none !important;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .checkbox-row .labelBtnDrop {
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    flex: 1 1 auto;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-button {
    flex: 1 1 auto;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
    line-height: 1.3;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-button::after {
    content: " ▾";
    color: #94a3b8;
    font-size: 10px;
}
/* G9.5 — .dropdown wrapper full-width nel drawer (sostituisce inline-flex
 * legacy a 80px). Necessario perche' la popover ancora a .dropdown
 * (position:relative) e prende la sua larghezza. */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    position: relative;
    border-radius: 0;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 8px;
}
/* G9.11 — target SOLO il wrapper label+button (primo <div>), non
 * .dropdown-content (anch'esso <div> figlio di .dropdown). */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown > div:not(.dropdown-content) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
/* Dropdown content come popover scrollabile (escapa il container) */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
    z-index: 1800 !important;
    min-width: 100% !important;
    max-width: min(360px, 90vw) !important;
    width: max-content !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px 0 !important;
    display: none;
    /* Stack a column dei figli (a tags) */
    flex-direction: column !important;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content.is-open {
    display: flex !important;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content a {
    display: block !important;
    padding: 6px 14px !important;
    color: #0f172a !important;
    text-decoration: none !important;
    font-size: 13px !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    line-height: 1.3;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content a:hover {
    background: #e0f2fe !important;
}
/* La .wrapgrid contenitore del dropdown deve avere position:relative
 * (gia' lo ha) e overflow:visible per non clippare il popover */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .wrapgrid,
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .wrapgrid-checks {
    overflow: visible;
    position: relative;
}
/* Checkbox rows — uniformi label-checkbox flex */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .checkbox-row {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .checkbox-row .No-drop {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    width: 100%;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .checkbox-row .No-drop > div {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .checkbox-row .labelBtnDrop {
    flex: 1 1 auto;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #0b5fd1;
}
/* btnP (HideAll Probl) — rendelo button uniforme alla riga */
body.fm-topbar-active.fm-filtri-open .upbar #btnP.btn-UpBar {
    width: 100%;
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    margin: 0;
    height: auto;
    box-shadow: none;
    transform: none;
}
body.fm-topbar-active.fm-filtri-open .upbar #btnP.btn-UpBar:hover {
    background: #e0f2fe;
    border-color: #0284c7;
}
/* Dark theme drawer */
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container {
    background: #1f2330;
    color: #cfd8e8;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .wrapgrid,
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .wrapgrid-checks {
    background: #0f172a;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container > div::before {
    color: #94a3b8;
    border-bottom-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container::before {
    color: #60a5fa;
    border-bottom-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .labelBtnDrop {
    color: #94a3b8 !important;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-button,
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar #btnP.btn-UpBar {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content {
    background: #1f2330;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content a {
    color: #cfd8e8;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content a:hover {
    background: #1e3a8a;
}
/* G9.18 dark — checkbox + buttons drawer filtri */
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .checkbox-row .labelBtnDrop {
    color: #cbd5e1 !important;
}
body.fm-dark.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .checkbox-row input[type="checkbox"] {
    accent-color: #38bdf8;
}

/* ──────────── Phase G9 — Info verifica drawer modernizzato ──────────── */
/* Default: quando topbar moderna attiva, #scrollbarInfo nascosta (assorbita
 * nel drawer ⓘ Info). Visibile solo con body.fm-info-open. */
body.fm-topbar-active #scrollbarInfo {
    display: none;
}
body.fm-topbar-active.fm-info-open #scrollbarInfo {
    /* G9.13 — banner full-page-width sotto la topbar.
     * left=widthLsidebar (rispetta sidebar), right=0, no border-radius
     * laterali. Scroll orizzontale automatico per #infoVer largo
     * (wrapInfoSchool con molti campi). */
    display: block;
    position: fixed;
    top: 46px;
    left: var(--widthLsidebar, 200px);
    right: 0;
    z-index: 1600;
    background: #ffffff;
    color: #0f172a;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    width: auto;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: auto;
    transform: none;
    transition: none;
}
body.fm-topbar-active.fm-info-open.fm-sidebar-closed #scrollbarInfo {
    /* sidebar collassata (34px) */
    left: 34px;
}
/* G9.9 — scrollbar orizzontale stilizzata */
body.fm-topbar-active.fm-info-open #scrollbarInfo::-webkit-scrollbar {
    height: 10px !important;
    width: 10px;
}
body.fm-topbar-active.fm-info-open #scrollbarInfo::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}
body.fm-topbar-active.fm-info-open #scrollbarInfo::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
body.fm-topbar-active.fm-info-open #scrollbarInfo::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}
/* G9.7 — Header pseudo-element del drawer: pulito senza ::before
 * ornamentali del legacy (erano gradient powderblue inutili). */
body.fm-topbar-active.fm-info-open #scrollbarInfo > h3.fm-info-title,
body.fm-topbar-active.fm-info-open #scrollbarInfo .fm-info-title-fallback {
    display: block;
}
/* G9.7 — RIMOSSO ::before "ⓘ Info verifica" header del drawer:
 * il bottone ⓘ Info nella topbar rimane "active" (aria-pressed=true)
 * indicando lo stato; il titolo era ridondante. */
body.fm-topbar-active.fm-info-open #scrollbarInfo-toggle-container {
    display: none;
}
body.fm-topbar-active.fm-info-open #scrollbarInfo #infoVer {
    background: transparent;
    color: #0f172a;
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
}
/* G9.13/G9.22 — #wrapInfoSchool: flex-wrap permesso. Le prime 7 card
 * (ANNO/TIME/CL/SEZ/INDIRIZZO/ISTITUTO/VERSIONE) hanno width specifiche
 * cosi' entrano tutte sulla riga 1. Il resto (NUM.COPIE/SALVA/P.TOT-A/R/
 * studente) wrappa alla 2a riga. Horizontal scroll resta abilitato come
 * fallback se la finestra e' molto stretta. */
body.fm-topbar-active.fm-info-open #infoVer #wrapInfoSchool {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: visible;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}
body.fm-topbar-active.fm-info-open #infoVer #wrapInfoSchool > * {
    flex: 0 0 auto;
}
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic,
body.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    margin: 0;
    flex: 0 0 auto;
    width: 100px;
}
/* G9.22 — width specifiche per i campi InfoVer (riga 1 fino a VERSIONE). */
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic:has(#anno),
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic:has(#verTime) {
    width: 60px;
}
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic:has(#classe),
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic:has(#sezione) {
    width: 40px;
}
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic:has(#addressSchool) {
    width: 130px;
}
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic:has(#istituto) {
    width: 160px;
}
body.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool:has(#versione) {
    width: 90px;
}
body.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool:has(#nPrint) {
    width: 150px;  /* NUM.COPIE: 3 inputs side by side */
}
body.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool:has(#SumPtotA),
body.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool:has(#SumPtotB) {
    width: 90px;
}
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic p,
body.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool > p {
    font-size: 10px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
    font-weight: 600;
}
body.fm-topbar-active.fm-info-open #infoVer input[type="text"],
body.fm-topbar-active.fm-info-open #infoVer input:not([type]),
body.fm-topbar-active.fm-info-open #infoVer input[type="number"],
body.fm-topbar-active.fm-info-open #infoVer input[type="search"] {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    box-shadow: none;
    text-align: left;
}
body.fm-topbar-active.fm-info-open #infoVer input:focus {
    outline: none;
    border-color: #0b5fd1;
    box-shadow: 0 0 0 2px rgba(11, 95, 209, 0.18);
}
body.fm-topbar-active.fm-info-open #infoVer input[readonly] {
    background: #f1f5f9;
    color: #475569;
}
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoPrint {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 3px 5px;
    margin: 0 2px;
}
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoPrint p {
    font-size: 9px;
    margin: 0;
    color: #475569;
}
body.fm-topbar-active.fm-info-open #infoVer .wrapInfoPrint .inputPrint {
    padding: 2px 4px;
    font-size: 12px;
    border: 0;
    background: transparent;
}
/* G19.20 — `#savePrintInfoBtn` + `#loadPrintInfoBtn` icon-only, stesse
 * dimensioni di `.salva-scelte-btn` (28px h), spostati accanto a
 * `.scelte-verifica-wrapper` dentro `.selector-eser`. Niente label "Salva". */
body.fm-topbar-active.fm-info-open #infoVer .fm-printinfo-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin: 0;
}
body.fm-topbar-active.fm-info-open #infoVer #savePrintInfoBtn,
body.fm-topbar-active.fm-info-open #infoVer #loadPrintInfoBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    flex: 0 0 auto !important;
}
body.fm-topbar-active.fm-info-open #infoVer #savePrintInfoBtn {
    background: #0f766e !important;
    color: #ffffff !important;
    border: 1px solid #0d6964 !important;
}
body.fm-topbar-active.fm-info-open #infoVer #savePrintInfoBtn:hover {
    background: #115e59 !important;
    border-color: #0a504c !important;
}
body.fm-topbar-active.fm-info-open #infoVer #loadPrintInfoBtn {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
}
body.fm-topbar-active.fm-info-open #infoVer #loadPrintInfoBtn:hover {
    background: #1d4ed8 !important;
    border-color: #1e3a8a !important;
}
body.fm-topbar-active.fm-info-open #infoVer #savePrintInfoBtn::after,
body.fm-topbar-active.fm-info-open #infoVer #loadPrintInfoBtn::after {
    content: none !important;
}
/* G19.21 — toggle button per `#wrapInfoStudent` (verifica nominativa) */
body.fm-topbar-active.fm-info-open #infoVer #fm-toggle-student {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    padding: 0;
    margin: 0 2px 0 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
body.fm-topbar-active.fm-info-open #infoVer #fm-toggle-student[aria-pressed="true"] {
    background: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
}
body.fm-topbar-active.fm-info-open #infoVer #fm-toggle-student:hover {
    border-color: #2563eb;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #fm-toggle-student {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #fm-toggle-student[aria-pressed="true"] {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
}
body.fm-topbar-active.fm-info-open #infoVer #wrapInfoStudent {
    display: flex;
    gap: 6px;
    background: transparent;
    padding: 0;
    flex: 1 1 240px;
    min-width: 240px;
}
body.fm-topbar-active.fm-info-open #infoVer #wrapInfoStudent[hidden] {
    display: none;
}
body.fm-topbar-active.fm-info-open #infoVer #wrapInfoStudent input {
    flex: 1 1 auto;
    min-width: 0;
}
/* #wrapInfoVer — checkbox + verTitle row */
body.fm-topbar-active.fm-info-open #infoVer #wrapInfoVer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    background: transparent;
}
body.fm-topbar-active.fm-info-open #infoVer #wrapDSA,
body.fm-topbar-active.fm-info-open #infoVer #wrapGriglieMisure {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 4px 10px;
}
body.fm-topbar-active.fm-info-open #infoVer #wrapInfoVer label {
    font-size: 12px;
    color: #0f172a;
    font-weight: 500;
    margin: 0;
}
body.fm-topbar-active.fm-info-open #infoVer #wrapInfoVer input[type="checkbox"] {
    accent-color: #0b5fd1;
    width: 14px;
    height: 14px;
    margin: 0;
}
body.fm-topbar-active.fm-info-open #infoVer #verTitlePrefix,
body.fm-topbar-active.fm-info-open #infoVer #verTitle {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 13px;
    color: #0f172a;
}
body.fm-topbar-active.fm-info-open #infoVer #verTitle {
    flex: 1 1 200px;
    min-width: 200px;
}
/* selector-eser + scelte-verifica-wrapper: layout pulito */
body.fm-topbar-active.fm-info-open #infoVer .selector-eser {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: transparent;
}
body.fm-topbar-active.fm-info-open #infoVer .selector-eser select,
body.fm-topbar-active.fm-info-open #infoVer .selector-eser .dropdown-button_gen {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    color: #0f172a;
}
/* G19.9 — wrapper INSIDE `.selector-eser` (template moved). Push to
 * the right with margin-left:auto so it sits at the end of the row,
 * dopo `.tipoEsercizio_ver` + `.sync-quesiti_ver-btn`. */
body.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper {
    display: inline-flex !important;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    height: 28px;
    box-sizing: border-box;
    padding: 0 8px;
    margin: 0 0 0 30px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
body.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper button {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1;
}
/* G19.5 — dark mode override per il wrapper inline e i suoi children,
 * altrimenti `#f1f5f9` (light) si nota su layout scuro. */
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper {
    background: #1e293b;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper .scelte-versioni {
    /* G19.10 — `.scelte-versioni` ora naked (no border/bg) */
    background: transparent;
    border: none;
}

/* G19.18 — Modal Carica Print Info */
#fm-load-printinfo-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    opacity: 0;
    transition: opacity .15s;
    overflow-y: auto;
}
#fm-load-printinfo-modal.fm-modal--visible { opacity: 1; }
.fm-load-printinfo {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    color: #0f172a;
    position: relative;
}
.fm-load-printinfo h3 { margin: 0 0 8px; font-size: 18px; }
.fm-load-printinfo .fm-muted { font-size: 12px; color: #64748b; margin-bottom: 12px; }
.fm-load-printinfo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.fm-load-printinfo-table th,
.fm-load-printinfo-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}
.fm-load-printinfo-table th {
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.fm-load-printinfo-table tr:hover { background: #f1f5f9; }
.fm-load-printinfo-table .fm-btn-primary {
    height: 26px;
    padding: 0 10px;
    border: 1px solid #15803d;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}
.fm-load-printinfo-table .fm-btn-primary:hover { background: #15803d; }
/* G20.6 — delete-row + delete-all buttons */
.fm-load-printinfo-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}
.fm-load-printinfo-table .fm-btn-danger,
.fm-load-printinfo .fm-btn-danger {
    height: 26px;
    padding: 0 10px;
    background: #dc2626;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.fm-load-printinfo-table .fm-btn-danger:hover,
.fm-load-printinfo .fm-btn-danger:hover { background: #b91c1c; }
.fm-load-printinfo .fm-modal-actions { gap: 8px; }
.fm-load-printinfo .fm-modal-actions .fm-btn-danger { margin-right: auto; }

/* G20.7 — modal Carica Print Info card-based: ogni record e' una card
 * con tutti i campi salvati visibili (anno, tempo, NOR/DSA/DIS, versione,
 * studente, flag bes, titolo) e form inline edit on-demand. */
.fm-pi-cards { display: flex; flex-direction: column; gap: 10px; }
.fm-pi-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}
.fm-pi-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.fm-pi-card-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #0f172a;
    flex-wrap: wrap;
}
.fm-pi-tag {
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
}
.fm-pi-tag--mat { background: #fef3c7; color: #92400e; }
.fm-pi-card-istituto { color: #64748b; font-size: 11px; font-style: italic; }
.fm-pi-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fm-pi-card-actions .fm-btn,
.fm-pi-card-actions .fm-btn-primary,
.fm-pi-card-actions .fm-btn-danger {
    height: 26px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
}
.fm-pi-card-actions .fm-btn-primary { background: #16a34a; color: #fff; }
.fm-pi-card-actions .fm-btn-primary:hover { background: #15803d; }
.fm-pi-card-actions .fm-btn { background: #fff; color: #0f172a; border: 1px solid #cbd5e1; }
.fm-pi-card-actions .fm-btn:hover { background: #f1f5f9; }
.fm-pi-card-actions .fm-btn-danger { background: #dc2626; color: #fff; }
.fm-pi-card-actions .fm-btn-danger:hover { background: #b91c1c; }

/* G20.7 — single-row layout: tutti i campi in linea via flex nowrap;
 * overflow-x scrollabile se la modal e' troppo stretta. */
.fm-pi-card-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.fm-pi-card-grid > div {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 3px 6px;
    flex: 0 0 auto;
    min-width: 22px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.fm-pi-card-grid > .fm-pi-card-grid--wide {
    flex: 1 1 auto;
    min-width: 100px;
}
.fm-pi-card-grid dt {
    color: #64748b;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}
.fm-pi-card-grid dd { margin: 0; color: #0f172a; font-weight: 500; white-space: nowrap; }

.fm-pi-card-edit {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
}
.fm-pi-edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.fm-pi-edit-grid label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: #475569;
    font-weight: 500;
}
.fm-pi-edit-grid input[type="text"],
.fm-pi-edit-grid input:not([type]) {
    height: 28px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    color: #0f172a;
    background: #fff;
}
.fm-pi-edit-grid input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.fm-pi-edit-cb {
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    background: #f1f5f9;
    padding: 6px 8px;
    border-radius: 4px;
}
.fm-pi-edit-cb input { width: 14px; height: 14px; margin: 0; }
.fm-pi-edit-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* Dark theme */
body.fm-dark .fm-pi-card { background: #1e293b; border-color: #334155; }
body.fm-dark .fm-pi-card-title { color: #e2e8f0; }
body.fm-dark .fm-pi-tag { background: #1e3a8a; color: #dbeafe; }
body.fm-dark .fm-pi-tag--mat { background: #92400e; color: #fef3c7; }
body.fm-dark .fm-pi-card-istituto { color: #94a3b8; }
body.fm-dark .fm-pi-card-grid > div { background: #0f172a; border-color: #334155; }
body.fm-dark .fm-pi-card-grid dt { color: #94a3b8; }
body.fm-dark .fm-pi-card-grid dd { color: #e2e8f0; }
body.fm-dark .fm-pi-card-edit { border-top-color: #334155; }
body.fm-dark .fm-pi-edit-grid label { color: #cbd5e1; }
body.fm-dark .fm-pi-edit-grid input { background: #0f172a; color: #e2e8f0; border-color: #334155; }
body.fm-dark .fm-pi-edit-cb { background: #0f172a; }
body.fm-dark .fm-pi-card-actions .fm-btn { background: #1e293b; color: #e2e8f0; border-color: #334155; }
body.fm-dark .fm-pi-card-actions .fm-btn:hover { background: #334155; }

.fm-load-printinfo .fm-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #64748b;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    line-height: 1;
}
.fm-load-printinfo .fm-modal-close:hover { background: #f1f5f9; }
.fm-load-printinfo .fm-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}
.fm-load-printinfo .fm-btn {
    height: 32px; padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.fm-load-printinfo .fm-btn:hover { background: #f1f5f9; }
body.fm-dark .fm-load-printinfo {
    background: #1f2330;
    color: #e2e8f0;
}
body.fm-dark .fm-load-printinfo h3 { color: #e2e8f0; }
body.fm-dark .fm-load-printinfo-table th { background: #0f172a; color: #94a3b8; }
body.fm-dark .fm-load-printinfo-table th,
body.fm-dark .fm-load-printinfo-table td { border-color: #334155; }
body.fm-dark .fm-load-printinfo-table tr:hover { background: #1e293b; }
body.fm-dark .fm-load-printinfo .fm-btn {
    background: #1e293b; color: #e2e8f0; border-color: #334155;
}
body.fm-dark .fm-load-printinfo .fm-btn:hover { background: #334155; }
body.fm-dark .fm-load-printinfo .fm-modal-close { color: #94a3b8; }
body.fm-dark .fm-load-printinfo .fm-modal-close:hover { background: #334155; color: #e2e8f0; }

/* G19.18 — `#loadPrintInfoBtn` accanto al save (📂 verde) */
#savePrintInfoBtn,
#loadPrintInfoBtn {
    height: 26px;
    width: auto;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background-color .12s, border-color .12s;
    margin: 0 2px;
}
#savePrintInfoBtn:hover,
#loadPrintInfoBtn:hover {
    background: #eff6ff;
    border-color: #2563eb;
}
body.fm-dark #savePrintInfoBtn,
body.fm-dark #loadPrintInfoBtn {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
body.fm-dark #savePrintInfoBtn:hover,
body.fm-dark #loadPrintInfoBtn:hover {
    background: #1e293b;
    border-color: #38bdf8;
}

/* G19.13 (revertito) — modal flottante per `.fm-editor-panel` revertito.
 * L'utente vuole poter aprire più editor inline contemporaneamente per
 * editing parallelo. Stili `.fm-editor-modal` non più usati ma lasciati
 * per eventuale re-attivazione futura selettiva (es. solo su mobile). */
.fm-editor-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    opacity: 0;
    transition: opacity .15s;
    overflow-y: auto;
}
.fm-editor-modal.fm-modal--visible {
    opacity: 1;
}
.fm-editor-modal .fm-editor-panel {
    background: #fffbe6;
    border: 2px dashed #b58900;
    border-radius: 12px;
    padding: 16px 20px;
    width: 100%;
    max-width: 720px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
    color: #0f172a;
    box-sizing: border-box;
}
body.fm-dark .fm-editor-modal .fm-editor-panel {
    background: #1f2330;
    border-color: #b58900;
    color: #e2e8f0;
}
/* Lock body scroll quando modal aperta */
body.fm-editor-modal-open {
    overflow: hidden;
}

/* G19.12 — `+ Crea esercizio` button: launcher unico del wizard
 * (sostituisce i 2 select `tipoEsercizio` + `dropdown_gen`). */
.fm-create-eser-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 14px;
    border: 1px solid #15803d;
    border-radius: 6px;
    background: #16a34a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, transform .1s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.fm-create-eser-btn:hover {
    background: #15803d;
}
.fm-create-eser-btn:active {
    transform: translateY(1px);
}
.fm-create-eser-icon {
    font-size: 16px;
    line-height: 1;
}

/* G19.12 — Wizard modal "Crea esercizio" */
.fm-exercise-wizard-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    opacity: 0;
    transition: opacity .15s;
    overflow-y: auto;
}
.fm-exercise-wizard-modal.fm-modal--visible {
    opacity: 1;
}
.fm-exercise-wizard {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 28px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    position: relative;
    color: #0f172a;
}
.fm-exercise-wizard h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}
.fm-exercise-wizard .fm-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #64748b;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    line-height: 1;
}
.fm-exercise-wizard .fm-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.fm-ew-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin: 0 0 14px;
}
.fm-ew-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
body.fm-dark .fm-ew-section-title { color: #94a3b8; }

.fm-ew-intro {
    margin: -4px 0 14px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}
.fm-ew-intro code {
    background: #f1f5f9;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
    font-family: ui-monospace, Consolas, monospace;
    color: #2a5ac7;
}
body.fm-dark .fm-ew-intro { color: #94a3b8; }
body.fm-dark .fm-ew-intro code { background: #1e293b; color: #60a5fa; }
.fm-ew-radio-card {
    display: flex !important;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
    box-sizing: border-box;
    transition: border-color .12s, background-color .12s;
}
.fm-ew-radio-card:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.fm-ew-radio-card input[type="radio"] {
    margin: 2px 0 0 0;
    flex-shrink: 0;
    accent-color: #16a34a;
}
.fm-ew-radio-card input[type="radio"]:checked ~ * {
    color: #0f172a;
}
.fm-ew-radio-card:has(input:checked) {
    border-color: #16a34a;
    background: #f0fdf4;
}
.fm-ew-card-icon {
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
}
.fm-ew-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.fm-ew-card-body strong {
    font-size: 13px;
    font-weight: 600;
}
.fm-ew-card-body .fm-muted {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
}
.fm-ew-select,
.fm-ew-input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    box-sizing: border-box;
}
.fm-ew-select:focus,
.fm-ew-input:focus {
    outline: 2px solid #16a34a;
    outline-offset: -1px;
}
.fm-ew-hint {
    margin: 6px 0 0;
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}
.fm-exercise-wizard .fm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.fm-exercise-wizard .fm-btn {
    height: 32px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.fm-exercise-wizard .fm-btn:hover {
    background: #f1f5f9;
}
.fm-exercise-wizard .fm-btn-primary {
    background: #16a34a;
    color: #ffffff;
    border-color: #15803d;
}
.fm-exercise-wizard .fm-btn-primary:hover {
    background: #15803d;
}

/* Dark mode */
body.fm-dark .fm-exercise-wizard {
    background: #1f2330;
    color: #e2e8f0;
}
body.fm-dark .fm-exercise-wizard h3 { color: #e2e8f0; }
body.fm-dark .fm-exercise-wizard .fm-modal-close { color: #94a3b8; }
body.fm-dark .fm-exercise-wizard .fm-modal-close:hover {
    background: #334155;
    color: #e2e8f0;
}
body.fm-dark .fm-ew-section {
    border-color: #334155;
}
body.fm-dark .fm-ew-section legend { color: #94a3b8; }
body.fm-dark .fm-ew-radio-card {
    border-color: #334155;
}
body.fm-dark .fm-ew-radio-card:hover {
    background: #1e293b;
    border-color: #475569;
}
body.fm-dark .fm-ew-radio-card:has(input:checked) {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.12);
}
body.fm-dark .fm-ew-card-body strong { color: #e2e8f0; }
body.fm-dark .fm-ew-card-body .fm-muted { color: #94a3b8; }
body.fm-dark .fm-ew-select,
body.fm-dark .fm-ew-input {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
body.fm-dark .fm-exercise-wizard .fm-btn {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
body.fm-dark .fm-exercise-wizard .fm-btn:hover { background: #334155; }

/* G19.13/G19.16 — orphan declarations rimosse (erano residuo del
 * rule body originale G19.10 prima dello split fix per fix parse error
 * a layout.css:3984). Le declarations naked dark sono già nella nuova
 * regola a riga ~3985. */
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper .salva-scelte-btn,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper .carica-scelte-btn {
    color: #ffffff;
    border-color: transparent;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper .salva-scelte-btn {
    background-color: #16a34a;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper .carica-scelte-btn {
    background-color: #3b82f6;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .scelte-versione-option {
    color: #cbd5e1;
}
body.fm-topbar-active.fm-info-open #infoVer .salva-scelte-btn,
body.fm-topbar-active.fm-info-open #infoVer .carica-scelte-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    color: #0f172a;
    cursor: pointer;
}

/* G19.5 — dedupe-hide RIMOSSA. Originariamente nascondeva la
 * `.scelte-verifica-wrapper` INSIDE `.selector-eser` per evitare
 * doppione (ui-comp.js cloneva 2 wrapper). Ora il template ha
 * `display:none` rimosso E `verifica-scelte.js` mostra UNA SOLA
 * istanza. Serve invece NASCONDERE LE SUCCESSIVE (defensive — se
 * il clone legacy ne genera ancora 2, mostriamo la prima): */
body.fm-topbar-active.fm-info-open #infoVer .scelte-verifica-wrapper ~ .scelte-verifica-wrapper {
    display: none !important;
}

/* G9.18 — selector-eser: layout uniforme + button modernizzati */
body.fm-topbar-active.fm-info-open #infoVer .selector-eser {
    overflow: visible;
    gap: 8px !important;
}
/* G19.5 — `margin-left: auto` rimosso (user request): pushava
 * `.help-circle` a destra creando vasto vuoto centrale tra gruppo sx
 * (`.tipoEsercizio + sync + dropdown`) e gruppo dx (`?` + `.tipoEsercizio_ver
 * + sync_ver + .scelte-verifica-wrapper`). Ora il flow è naturale,
 * gli elementi seguono il document order con `gap: 8px` uniforme. */
body.fm-topbar-active.fm-info-open #infoVer .selector-eser .help-circle {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: help;
    font-weight: 600;
    flex-shrink: 0;
}
body.fm-topbar-active.fm-info-open #infoVer .selector-eser .dropdown_gen {
    position: relative;
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
body.fm-topbar-active.fm-info-open #infoVer .selector-eser .dropdown-content_gen {
    max-height: 220px;
    overflow-y: auto;
}
/* G9.18 — select native (.tipoEsercizio, .tipoEsercizio_ver, #verTitlePrefix)
 * uniformi: light card, border 1px, font 12. */
body.fm-topbar-active.fm-info-open #infoVer .selector-eser select,
body.fm-topbar-active.fm-info-open #infoVer .tipoEsercizio,
body.fm-topbar-active.fm-info-open #infoVer .tipoEsercizio_ver {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    height: 28px !important;
    box-sizing: border-box;
    line-height: 26px;
    cursor: pointer;
    margin: 0 !important;
}
/* dropdown-button_gen ("Seleziona origine") + half-moon-button (+ verde):
 * teal coerente con SALVA INFO, non eccessivo */
body.fm-topbar-active.fm-info-open #infoVer .dropdown-button_gen {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px 0 0 4px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    height: 28px !important;
    box-sizing: border-box;
    line-height: 26px;
    width: auto !important;
    margin: 0 !important;
    cursor: pointer;
}
body.fm-topbar-active.fm-info-open #infoVer .dropdown-button_gen:hover {
    background: #e0f2fe !important;
}
body.fm-topbar-active.fm-info-open #infoVer .half-moon-button {
    background: #0f766e !important;
    color: #ffffff !important;
    border: 1px solid #0d6964 !important;
    border-left: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    height: 28px !important;
    box-sizing: border-box;
    cursor: pointer;
    line-height: 1;
    margin: 0 !important;
    width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.fm-topbar-active.fm-info-open #infoVer .half-moon-button:hover {
    background: #115e59 !important;
}
body.fm-topbar-active.fm-info-open #infoVer .half-moon-button > span {
    font-size: 14px;
    font-weight: 600;
}

/* G19.11 — sync btns nel selector-eser ora stile half-moon (green pill,
 * white icon, glued via border-radius asimmetrico). L'override sotto
 * mantiene la coerenza nello scope `body.fm-topbar-active.fm-info-open`
 * (che ha priorità sul CSS base in layout_es.css). */
body.fm-topbar-active.fm-info-open #infoVer .sync-quesiti-btn img,
body.fm-topbar-active.fm-info-open #infoVer .sync-quesiti_ver-btn img {
    /* Filter brightness(0) invert(1) → icona update.svg diventa BIANCA */
    filter: brightness(0) invert(1);
    width: 14px;
    height: 14px;
    display: block;
}
/* Le altre img[src$="/update.svg"] (non sync-btn) restano scure */
body.fm-topbar-active.fm-info-open #infoVer img[src$="/update.svg"]:not(.sync-quesiti-btn img):not(.sync-quesiti_ver-btn img) {
    filter: invert(1) brightness(0.55) contrast(1.2);
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}
body.fm-topbar-active.fm-info-open #infoVer .sync-quesiti-btn,
body.fm-topbar-active.fm-info-open #infoVer .sync-quesiti_ver-btn {
    background: #16a34a;
    border: 1px solid #15803d;
    border-radius: 0 6px 6px 0;
    padding: 0;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.fm-topbar-active.fm-info-open #infoVer .sync-quesiti-btn:hover,
body.fm-topbar-active.fm-info-open #infoVer .sync-quesiti_ver-btn:hover {
    background: #15803d;
}
/* Group containers nello scope #infoVer: select+sync incollati */
body.fm-topbar-active.fm-info-open #infoVer .selector-eser .fm-eser-group,
body.fm-topbar-active.fm-info-open #infoVer .selector-eser .fm-ver-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
body.fm-topbar-active.fm-info-open #infoVer .selector-eser .fm-eser-group > select,
body.fm-topbar-active.fm-info-open #infoVer .selector-eser .fm-ver-group > select {
    border-radius: 4px 0 0 4px !important;
    border-right: none !important;
}

/* G9.10 / G9.11 — force dropdown-content closed di default + flex-column
 * quando aperto. positionDropdownContent (upbar-controls.js) imposta
 * inline style position/top/left/min-width/max-height al click — quei
 * inline styles vincono sul nostro CSS. Per il drawer overrride con
 * !important AND attribute selector che batte inline style.
 * Soluzione: forziamo position absolute via attribute style override. */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content {
    display: none !important;
    flex-direction: column !important;
}
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content.is-open {
    display: flex !important;
    flex-direction: column !important;
    /* Override gli inline style che positionDropdownContent imposta:
     * forziamo position absolute (non fixed) cosi' il popover sta nel
     * flow del drawer e non viaggia per il viewport. */
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    transform: none !important;
    min-width: 100% !important;
    max-width: min(360px, 90vw) !important;
}
/* Items in colonna sempre, con override block (il legacy ha flex su a) */
body.fm-topbar-active.fm-filtri-open .upbar .upbar-controls-container .dropdown-content > a {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
}

/* G9.4 — wrapInfoSchool sub-card: punteggi auto-stretch full width */
body.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool {
    min-width: 0;
}
body.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool > div[style*="display: flex"] {
    gap: 4px;
}

/* G9.4 — assicura solid bg su topbar (no transparency su pagine con
 * sfondo chiaro/cementizio sotto). */
.fm-topbar {
    background: linear-gradient(135deg, #1f3b5c 0%, #2a5d8a 50%, #1f3b5c 100%) !important;
    backdrop-filter: blur(0);
}

/* G9.4 — quando filtri o info aperti, click outside copre tutto il viewport
 * con un velo trasparente per indicare modal-like behaviour, oltre a
 * intercettare i click. Veil iniettato lato JS solo se serve. */
body.fm-filtri-open::after,
body.fm-info-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    z-index: 1550;
    pointer-events: none;
}

/* Dark theme info drawer */
body.fm-dark.fm-topbar-active.fm-info-open #scrollbarInfo {
    background: #1f2330;
    color: #cfd8e8;
    border-color: #334155;
}
/* G9.7 — rimosso dark-mode equivalente del ::before drawer header */
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool {
    background: #0f172a;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .wrapInfoBasic p,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .sub_wrapInfoSchool > p {
    color: #94a3b8;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer input,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #verTitle,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #verTitlePrefix {
    background: #1f2330;
    color: #e2e8f0;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #wrapInfoVer {
    border-top-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #wrapDSA,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #wrapGriglieMisure {
    background: #0f172a;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #wrapInfoVer label,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .salva-scelte-btn,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .carica-scelte-btn {
    color: #cfd8e8;
}

/* G9.16-G9.18 dark theme overrides */
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #savePrintInfoBtn {
    background: #134e4a !important;       /* teal-900 dark */
    border-color: #0d3a37 !important;
    color: #ffffff !important;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer #savePrintInfoBtn:hover {
    background: #0f3735 !important;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .selector-eser .help-circle {
    background: #1f2330;
    color: #94a3b8;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .selector-eser select,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .tipoEsercizio,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .tipoEsercizio_ver,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .dropdown-button_gen {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .dropdown-button_gen:hover {
    background: #1e293b !important;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .half-moon-button {
    background: #134e4a !important;
    border-color: #0d3a37 !important;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .half-moon-button:hover {
    background: #0f3735 !important;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .sync-quesiti-btn,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .sync-quesiti_ver-btn {
    background: #0f172a;
    border-color: #334155;
}
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .sync-quesiti-btn:hover,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .sync-quesiti_ver-btn:hover {
    background: #1e293b;
    border-color: #38bdf8;
}
/* update.svg in dark: invert riduce a colore chiaro su sfondo scuro,
 * applichiamo solo brightness/contrast (no invert ulteriore). */
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .sync-quesiti-btn img,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer .sync-quesiti_ver-btn img,
body.fm-dark.fm-topbar-active.fm-info-open #infoVer img[src$="/update.svg"] {
    filter: brightness(1.1) contrast(1.1);
}

/* Dark theme — gia' coerente coi gradient blu, solo overrides border. */
body.fm-dark .fm-topbar {
    border-bottom-color: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.fm-dark .fm-topbar__btn {
    border-color: rgba(255,255,255,0.14);
}

/* Responsive: collassa labels sotto 720px. */
@media (max-width: 720px) {
    .fm-topbar { padding: 6px 10px; gap: 6px; }
    .fm-topbar__zone--meta { min-width: 0; border-right: none; padding-right: 0; flex-basis: 100%; }
    .fm-topbar__zone--actions { border-left: none; margin-left: 0; }
    .fm-topbar__lbl { display: none; }
    .fm-topbar__btn--primary .fm-topbar__lbl,
    .fm-topbar__btn--accent .fm-topbar__lbl { display: inline; }
    .fm-topbar__title { max-width: 60vw; }
}

/* ──────────── Phase G8 — Verifica documents per-materia blocks ──────────── */
.fm-vd-host {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
/* G19.28 — Blocchi verifica_documents stile UNIFORMATO ai blocchi
 * standard `.fm-db-block` (Esercizi/Lab/Risdoc). Niente background blu
 * gradient: head eredita lo style della sidepage parent (Verifiche →
 * arancio), label cream/serif identico agli altri. */
.fm-vd-block .fm-db-head {
    /* Niente background/color override: eredita da `.fm-db-head` standard */
    padding: 4px 8px;
}
/* G19.26 — pulse animation per #fm-topbar SalvaTEX hint */
.fm-pulse {
    animation: fm-pulse-glow 0.6s ease-in-out 2;
}
@keyframes fm-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
/* G19.29 — `.fm-vd-block` UNIFORMATO ai blocchi standard:
 *   - head: niente color override, eredita da `.fm-db-head` standard
 *   - link: niente color override (era grigio/verde in base a has_pdf
 *     → confondeva l'utente). Eredita da `.fm-db-block li a`.
 *   - cursor: pointer (click apre popup detail). */
.fm-vd-block li[data-content-id] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.fm-vd-block li[data-content-id]:last-child { border-bottom: none; }
.fm-vd-block .fm-vd-link { cursor: pointer; }
.fm-vd-block .fm-numarg {
    /* identico ai numarg standard di `.fm-db-block`: stesso colore/size */
    font-size: 11px;
    min-width: 36px;
    text-align: right;
}
body.fm-dark .fm-vd-block li[data-content-id] {
    border-bottom-color: rgba(255,255,255,0.06);
}

/* ──────────── Phase G8 — PDF upload + viewer modals ──────────── */
.fm-vd-modal {
    position: fixed; inset: 0; z-index: 9800;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 150ms ease;
}
.fm-vd-modal.fm-modal--visible { opacity: 1; }
.fm-vd-upload {
    background: #ffffff;
    border-radius: 8px;
    padding: 18px 22px;
    width: min(540px, 92vw);
    box-shadow: 0 12px 40px rgba(0,0,0,0.32);
    position: relative;
}
.fm-vd-upload h3 { margin: 0 0 6px; font-size: 16px; }
.fm-vd-upload .fm-modal-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #64748b;
}
.fm-vd-upload .fm-modal-close:hover { color: #0f172a; }
.fm-vd-progress {
    margin-top: 10px;
    background: #eef2f7;
    border-radius: 4px;
    height: 18px;
    position: relative;
    overflow: hidden;
}
.fm-vd-progress-bar {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    height: 100%;
    width: 100%;
    animation: fm-vd-progress-pulse 1.4s linear infinite;
}
.fm-vd-progress-msg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
@keyframes fm-vd-progress-pulse {
    0%,100% { opacity: 0.85; }
    50%     { opacity: 1; }
}

/* Viewer (iframe full-screen) */
.fm-vd-modal--viewer { background: rgba(0,0,0,0.78); }
.fm-vd-viewer {
    width: 96vw; height: 94vh;
    background: #ffffff;
    border-radius: 6px;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.fm-vd-viewer-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: #1e3a8a; color: #fff;
    border-radius: 6px 6px 0 0;
}
.fm-vd-viewer-title {
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fm-vd-viewer-toolbar .fm-btn { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
.fm-vd-viewer-toolbar .fm-btn:hover { background: rgba(255,255,255,0.28); }
.fm-vd-viewer-iframe {
    flex: 1 1 auto;
    border: 0;
    width: 100%;
    background: #f8fafc;
    border-radius: 0 0 6px 6px;
}

body.fm-dark .fm-vd-upload { background: #1f2330; color: #cfd8e8; }
body.fm-dark .fm-vd-upload .fm-modal-close { color: #94a3b8; }
body.fm-dark .fm-vd-upload .fm-modal-close:hover { color: #e2e8f0; }
body.fm-dark .fm-vd-progress { background: #0f172a; }

/* ──────────── Phase G8 — GENERA modal (target picker) ──────────── */
.fm-vd-genera {
    background: #ffffff;
    border-radius: 8px;
    padding: 18px 22px;
    width: min(580px, 92vw);
    box-shadow: 0 12px 40px rgba(0,0,0,0.32);
    position: relative;
}
.fm-vd-genera h3 { margin: 0 0 6px; font-size: 16px; }
.fm-vd-genera .fm-modal-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: 0; font-size: 22px; cursor: pointer; color: #64748b;
}
.fm-vd-genera-targets {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}
.fm-vd-target-btn {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
}
.fm-vd-target-btn:hover:not(:disabled) {
    background: #e0f2fe;
    border-color: #0284c7;
    transform: translateY(-1px);
}
.fm-vd-target-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.fm-vd-target-btn > span:last-child {
    display: flex; flex-direction: column; gap: 2px;
}
.fm-vd-target-btn strong { font-size: 14px; }
.fm-vd-target-btn .fm-muted { font-size: 11px; color: #64748b; }
.fm-vd-target-ico {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

body.fm-dark .fm-vd-genera { background: #1f2330; color: #cfd8e8; }
body.fm-dark .fm-vd-target-btn {
    background: #0f172a; border-color: #334155; color: #e2e8f0;
}
body.fm-dark .fm-vd-target-btn:hover:not(:disabled) {
    background: #1e293b; border-color: #38bdf8;
}
body.fm-dark .fm-vd-target-btn .fm-muted { color: #94a3b8; }

/* G19 — Batch list per-variant download (8 file TEX con nome legacy). */
.fm-vd-batch-list {
    margin-top: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.fm-vd-batch-list__title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}
.fm-vd-batch-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
}
.fm-vd-batch-link {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: #1e293b;
    font-size: 12px;
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s;
}
.fm-vd-batch-link:hover {
    background: #fff;
    border-color: #38bdf8;
}
.fm-vd-batch-variant {
    font-weight: 700;
    color: #2a5ac7;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
}
.fm-vd-batch-fname {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-vd-batch-size {
    font-size: 10px;
    color: #94a3b8;
    flex-shrink: 0;
}
body.fm-dark .fm-vd-batch-list { background: #0f172a; border-color: #334155; }
body.fm-dark .fm-vd-batch-list__title { color: #94a3b8; }
body.fm-dark .fm-vd-batch-link { color: #cbd5e1; }
body.fm-dark .fm-vd-batch-link:hover { background: #1e293b; }
body.fm-dark .fm-vd-batch-variant { color: #38bdf8; }
body.fm-dark .fm-vd-batch-fname { color: #94a3b8; }

/* ──────────── G20.7 — Templates editor modal (iframe wrapper) ──────────── */
.fm-vd-templates-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 150ms ease;
}
.fm-vd-templates-backdrop.fm-modal--visible { opacity: 1; }
.fm-vd-templates-modal {
    background: #ffffff;
    width: 92vw;
    height: 92vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fm-vd-templates-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.fm-vd-templates-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}
.fm-vd-templates-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.fm-vd-templates-open-tab {
    height: 28px;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    color: #0f172a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.fm-vd-templates-open-tab:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.fm-vd-templates-modal .fm-modal-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}
.fm-vd-templates-modal .fm-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.fm-vd-templates-iframe {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: #ffffff;
}
body.fm-dark .fm-vd-templates-modal { background: #1f2330; }
body.fm-dark .fm-vd-templates-header {
    background: #171a26;
    border-bottom-color: #334155;
}
body.fm-dark .fm-vd-templates-header h3 { color: #e2e8f0; }
body.fm-dark .fm-vd-templates-open-tab {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.fm-dark .fm-vd-templates-open-tab:hover { background: #334155; }
body.fm-dark .fm-vd-templates-modal .fm-modal-close { color: #94a3b8; }
body.fm-dark .fm-vd-templates-modal .fm-modal-close:hover {
    background: #334155;
    color: #e2e8f0;
}
body.fm-dark .fm-vd-templates-iframe { background: #1f2330; }

/* G20.7 — quando la pagina /area-docente/templates e' caricata in iframe
 * con ?embed=1 (popup Editor), comprime la page-header per dare piu'
 * spazio all'editor. Lo style lives nel body dell'iframe (body.fm-embed). */
body.fm-embed .fm-area-docente-nav { padding: 4px 8px; font-size: 12px; }
body.fm-embed .fm-area-docente-nav__title { display: none; }
body.fm-embed .fm-area-docente-page > header h1 {
    font-size: 16px;
    margin: 0 0 4px;
}
body.fm-embed .fm-area-docente-page > header p { display: none; }
body.fm-embed .fm-area-docente-page { padding: 8px 14px; }

/* ──────────── Phase G8.12 — Templates editor modal (legacy, ridondante) ──────────── */
.fm-vd-modal--templates { background: rgba(15, 23, 42, 0.62); }
.fm-vd-templates {
    background: #ffffff;
    width: min(960px, 96vw);
    height: min(720px, 92vh);
    border-radius: 8px;
    padding: 18px 22px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    position: relative;
    display: flex;
    flex-direction: column;
}
.fm-vd-templates h3 { margin: 0 0 4px; font-size: 16px; }
.fm-vd-templates .fm-modal-close {
    position: absolute; top: 8px; right: 12px;
    background: none; border: 0; font-size: 22px; cursor: pointer; color: #64748b;
}
.fm-vd-tpl-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    flex: 1 1 auto;
    overflow: hidden;
    margin-top: 10px;
}
/* G13 — modal senza sidebar: form full-width */
.fm-vd-templates > .fm-vd-tpl-form {
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}
.fm-vd-tpl-sidebar {
    border-right: 1px solid #cbd5e1;
    padding-right: 10px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.fm-vd-tpl-new {
    margin-bottom: 8px;
}
.fm-vd-tpl-list {
    list-style: none; padding: 0; margin: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.fm-vd-tpl-item {
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 2px;
    transition: background 80ms ease;
}
.fm-vd-tpl-item:hover { background: #f1f5f9; }
.fm-vd-tpl-item--active { background: #dbeafe; font-weight: 500; }
.fm-vd-tpl-form {
    overflow-y: auto;
    padding-right: 4px;
    display: flex; flex-direction: column; gap: 8px;
}
.fm-vd-tpl-row {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13px;
}
.fm-vd-tpl-row--inline { flex-direction: row; align-items: center; gap: 8px; }
.fm-vd-tpl-row input[type="text"] {
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font: inherit;
}
.fm-vd-tpl-section summary {
    cursor: pointer;
    font-weight: 600;
    padding: 6px 4px;
    border-radius: 4px;
    background: #f8fafc;
    font-size: 13px;
}
.fm-vd-tpl-section[open] summary { background: #e0f2fe; }
.fm-vd-tpl-section textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, "Fira Code", Consolas, monospace;
    font-size: 12px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    margin-top: 4px;
    resize: vertical;
    background: #fafbfc;
}
.fm-btn--danger { background: #dc2626; color: #fff; border-color: #b91c1c; }
.fm-btn--danger:hover { background: #b91c1c; }

/* G14 — Admin RisDoc panel inline (era pagina standalone /admin/risdoc).
 * Stile portato da views/admin/risdoc.php legacy + dark mode coerente
 * con la pagina /admin/templates moderna. Namespace .fm-ar-*. */
.fm-ar-wrap { width: 100%; padding: 0; }
.fm-ar-tabs { display: flex; gap: 4px; margin: 0 0 12px 0; }
.fm-ar-tab {
    padding: 8px 16px; background: #e2e8f0; color: #334155; border: 0; cursor: pointer;
    border-radius: 4px 4px 0 0; font-size: 13px;
}
.fm-ar-tab[aria-selected="true"] { background: #0b5fd1; color: #fff; font-weight: 600; }
.fm-ar-panel {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 4px;
    padding: 16px; min-height: 400px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.fm-ar-loading { color: #64748b; font-size: 13px; }
table.fm-ar-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fm-ar-tbl th, table.fm-ar-tbl td { padding: 6px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; }
table.fm-ar-tbl th { background: #f8fafc; font-weight: 600; color: #334155; font-size: 12px; }
.fm-ar-pill {
    display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px;
    background: #e2e8f0; color: #334155;
}
.fm-ar-pill--warn   { background: #fef3c7; color: #92400e; }
.fm-ar-pill--ok     { background: #d1fae5; color: #065f46; }
.fm-ar-pill--danger { background: #fee2e2; color: #991b1b; }
.fm-ar-actions button {
    margin: 0 2px; padding: 4px 10px; font-size: 11px;
    background: #0b5fd1; color: #fff; border: 0; border-radius: 3px; cursor: pointer;
}
.fm-ar-actions button:hover { background: #0947a6; }
.fm-ar-inline-list { display: flex; flex-wrap: wrap; gap: 4px; }
.fm-ar-inline-list span {
    background: #dbeafe; color: #1e40af; padding: 2px 6px; border-radius: 3px; font-size: 11px;
}
.fm-ar-cat-head {
    font-size: 13px; font-weight: 600; color: #475569;
    margin: 18px 0 6px; padding: 4px 8px;
    background: rgba(11, 95, 209, 0.08); border-left: 3px solid #0b5fd1;
    border-radius: 0 4px 4px 0;
}
.fm-ar-cat-head:first-child { margin-top: 0; }
.fm-numarg.fm-ar-numarg,
.fm-ar-tbl .fm-numarg {
    display: inline-block; padding: 1px 6px; min-width: 32px; text-align: center;
    background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 600; border-radius: 3px;
}
.fm-ar-link-btn {
    display: inline-block; padding: 4px 8px; margin: 0 2px;
    background: #475569; color: #fff !important; text-decoration: none;
    border-radius: 3px; font-size: 11px;
}
.fm-ar-link-btn:hover { background: #334155; }

/* Dark theme — RisDoc panel inline */
body.fm-dark .fm-ar-tab { background: #1e293b; color: #cbd5e1; }
body.fm-dark .fm-ar-tab[aria-selected="true"] { background: #2563eb; color: #fff; }
body.fm-dark .fm-ar-panel { background: #1f2330; border-color: #334155; color: #cfd8e8; }
body.fm-dark .fm-ar-loading { color: #94a3b8; }
body.fm-dark table.fm-ar-tbl th { background: #0f172a; color: #94a3b8; }
body.fm-dark table.fm-ar-tbl td { border-bottom-color: #334155; color: #e2e8f0; }
body.fm-dark .fm-ar-pill { background: #334155; color: #cbd5e1; }
body.fm-dark .fm-ar-pill--warn   { background: #78350f; color: #fef3c7; }
body.fm-dark .fm-ar-pill--ok     { background: #064e3b; color: #d1fae5; }
body.fm-dark .fm-ar-pill--danger { background: #7f1d1d; color: #fecaca; }
body.fm-dark .fm-ar-inline-list span { background: #1e3a8a; color: #dbeafe; }
body.fm-dark .fm-ar-actions button { background: #2563eb; }
body.fm-dark .fm-ar-actions button:hover { background: #1d4ed8; }
body.fm-dark .fm-ar-cat-head {
    color: #cbd5e1; background: rgba(96, 165, 250, 0.15); border-left-color: #60a5fa;
}
body.fm-dark .fm-numarg.fm-ar-numarg,
body.fm-dark .fm-ar-tbl .fm-numarg { background: #78350f; color: #fef3c7; }

/* G13.5 — Admin templates page tabs + table */
.fm-admin-templates-page { max-width: 1100px; margin: 20px auto; padding: 20px; }
.fm-admin-tabs { display: flex; gap: 8px; border-bottom: 2px solid #cbd5e1; margin: 20px 0 0 0; }
.fm-admin-tab {
    background: transparent; border: 0; padding: 10px 20px; font-size: 14px; font-weight: 500;
    color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.fm-admin-tab--active { color: #0b5fd1; border-bottom-color: #0b5fd1; font-weight: 600; }
.fm-admin-tabpanel { padding: 20px 0; display: none; }
.fm-admin-tabpanel--active { display: block; }
.fm-admin-tab-iframe {
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 500px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
}
body.fm-dark .fm-admin-tab-iframe { border-color: #334155; }
.fm-admin-templates-toolbar > div { font-size: 12px; line-height: 1.5; color: #475569; }
.fm-admin-templates-toolbar code {
    background: #fde68a; padding: 1px 4px; border-radius: 2px; font-family: ui-monospace, monospace; font-size: 11px;
}
.fm-admin-templates-toolbar {
    display: flex; gap: 12px; align-items: center; margin-bottom: 16px;
    background: #fef3c7; border: 1px solid #fbbf24; border-radius: 6px; padding: 10px 14px;
}
.fm-admin-templates-table {
    width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 6px; overflow: hidden; font-size: 13px;
}
.fm-admin-templates-table th, .fm-admin-templates-table td {
    padding: 8px 10px; border-bottom: 1px solid #f1f5f9; text-align: left;
}
.fm-admin-templates-table th { background: #f8fafc; font-weight: 600; color: #475569; }
.fm-vt-sections .fm-vt-sec-yes,
.fm-vt-sections .fm-vt-sec-no {
    display: inline-block; width: 18px; height: 18px; border-radius: 3px; text-align: center;
    line-height: 18px; font-size: 10px; font-weight: 700; margin-right: 2px;
}
.fm-vt-sections .fm-vt-sec-yes { background: #dcfce7; color: #166534; }
.fm-vt-sections .fm-vt-sec-no  { background: #fee2e2; color: #991b1b; }
body.fm-dark .fm-admin-templates-table { background: #1f2330; border-color: #334155; }
body.fm-dark .fm-admin-templates-table th { background: #0f172a; color: #94a3b8; }
body.fm-dark .fm-admin-templates-table td { border-bottom-color: #334155; color: #cfd8e8; }
body.fm-dark .fm-admin-tab { color: #94a3b8; }
body.fm-dark .fm-admin-tab--active { color: #60a5fa; border-bottom-color: #60a5fa; }
body.fm-dark .fm-admin-tabs { border-bottom-color: #334155; }

/* G13 — context bar (indirizzo, materia, tipologia, dsa) */
.fm-vd-tpl-context {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0 14px 0;
}
.fm-vd-tpl-context label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #475569;
    flex: 1 1 140px;
}
.fm-vd-tpl-context label.fm-vd-tpl-context-dsa {
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    text-transform: none;
    font-size: 13px;
    letter-spacing: 0;
    background: #fff7ed;
    border: 1px solid #fbbf24;
    border-radius: 4px;
    padding: 6px 10px;
    color: #78350f;
    cursor: pointer;
}
.fm-vd-tpl-context label.fm-vd-tpl-context-dsa input { margin: 0 6px 0 0; accent-color: #d97706; }
.fm-vd-tpl-context select {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 13px;
    color: #0f172a;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

/* G13 — source badge sulla summary di ogni section */
.fm-vd-tpl-source {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    flex: 0 0 auto;
}
.fm-vd-tpl-source.fm-src-personal   { background: #dcfce7; color: #166534; }
.fm-vd-tpl-source.fm-src-system     { background: #dbeafe; color: #1e40af; }
.fm-vd-tpl-source.fm-src-system-fb  { background: #fef3c7; color: #78350f; }
.fm-vd-tpl-source.fm-src-builtin    { background: #f1f5f9; color: #475569; }

.fm-vd-tpl-section-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* G10/G13 — sidebar buttons rimossi (no piu' sidebar). Restano definizioni
 * per compat con eventuali moduli che riusano queste classi. */
.fm-vd-tpl-new,
.fm-vd-tpl-restore {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    margin-bottom: 4px;
    width: 100%;
}
.fm-vd-tpl-new:hover,
.fm-vd-tpl-restore:hover {
    background: #e0f2fe;
    border-color: #0284c7;
}
.fm-vd-tpl-restore {
    background: #fef3c7;        /* amber-100 distinguibile */
    border-color: #fbbf24;
    color: #78350f;
}
.fm-vd-tpl-restore:hover {
    background: #fde68a;
    border-color: #d97706;
}

/* G10 — preview .tex buttons dentro summary */
.fm-vd-tpl-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.fm-vd-tpl-preview {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    margin-left: auto;
    flex: 0 0 auto;
}
.fm-vd-tpl-preview:hover {
    background: #e0f2fe;
    border-color: #0284c7;
}

/* G10 — placeholder code styling within muted hint */
.fm-vd-templates .fm-muted code {
    background: #f1f5f9;
    color: #0b5fd1;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: ui-monospace, "Fira Code", Consolas, monospace;
    font-size: 11px;
}

/* G10.4 — Dark theme overrides per i pulsanti del modal templates */
body.fm-dark .fm-vd-templates .fm-btn:not(.fm-btn--primary):not(.fm-btn--danger):not(.fm-vd-tpl-restore):not(.fm-vd-tpl-preview) {
    background: #1f2330;
    color: #e2e8f0;
    border-color: #334155;
}
body.fm-dark .fm-vd-templates .fm-btn:not(.fm-btn--primary):not(.fm-btn--danger):not(.fm-vd-tpl-restore):not(.fm-vd-tpl-preview):hover {
    background: #1e293b;
    border-color: #38bdf8;
}
body.fm-dark .fm-vd-tpl-new,
body.fm-dark .fm-vd-tpl-preview {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
body.fm-dark .fm-vd-tpl-new:hover,
body.fm-dark .fm-vd-tpl-preview:hover {
    background: #1e293b;
    border-color: #38bdf8;
}
body.fm-dark .fm-vd-tpl-restore {
    background: #422006;
    color: #fde68a;
    border-color: #92400e;
}
body.fm-dark .fm-vd-tpl-restore:hover {
    background: #78350f;
    border-color: #d97706;
}
body.fm-dark .fm-vd-templates .fm-muted code {
    background: #0f172a;
    color: #60a5fa;
}

body.fm-dark .fm-vd-templates { background: #1f2330; color: #cfd8e8; }
body.fm-dark .fm-vd-tpl-sidebar { border-right-color: #334155; }
body.fm-dark .fm-vd-tpl-item:hover { background: #1e293b; }
body.fm-dark .fm-vd-tpl-item--active { background: #1e3a8a; color: #fff; }
body.fm-dark .fm-vd-tpl-row input[type="text"],
body.fm-dark .fm-vd-tpl-section textarea {
    background: #0f172a; border-color: #334155; color: #e2e8f0;
}
body.fm-dark .fm-vd-tpl-section summary { background: #0f172a; }
body.fm-dark .fm-vd-tpl-section[open] summary { background: #1e3a8a; color: #fff; }

/* ──────────── G19.24 + G19.30 — Popup centrale dettaglio verifica ──────────── */
/* G19.30 final — la geometry critica del backdrop e' applicata INLINE da
 * `verifica-detail-modal.js` (Object.assign(m.style, ...)). Inline style
 * ha specificita' massima e non puo' essere sovrascritto.
 *
 * Qui solo il content `.fm-vd-detail` (niente `!important` per evitare
 * conflitti con l'inline override del backdrop). */
.fm-modal-backdrop.fm-vd-modal .fm-vd-detail {
    background: #ffffff;
    color: #0f172a;
    border-radius: 10px;
    width: min(880px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
    position: relative;
    margin: 0;
    transform: translateY(8px);
    transition: transform 160ms ease;
}
.fm-modal-backdrop.fm-vd-modal.is-open .fm-vd-detail { transform: translateY(0); }
.fm-vd-detail-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 22px 12px;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}
.fm-vd-detail-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    flex: 1 1 auto;
    line-height: 1.2;
}
.fm-vd-detail-header .fm-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}
.fm-vd-detail-header .fm-modal-close:hover { color: #0f172a; }
.fm-vd-detail-meta {
    font-size: 12px;
    /* G21.1 — allinea inline il button "Anteprima" con la meta info */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 36px;  /* spazio per close button absolute */
}
.fm-vd-detail-meta .fm-btn {
    font-size: 11px;
    padding: 3px 8px;
}
.fm-vd-detail-cols {
    display: flex;
    gap: 14px;
    padding: 16px 22px;
    flex-wrap: wrap;
}
.fm-vd-detail-col { flex: 1 1 320px; min-width: 280px; }
.fm-vd-detail-col-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #2563eb;
    padding-bottom: 4px;
}
.fm-vd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fm-vd-detail-slot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px;
    min-height: 78px;
}
/* G19.44 — lista delle versioni dentro un kind slot */
.fm-vd-version-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fm-vd-version-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 11px;
}
.fm-vd-version-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    color: #475569;
    font-weight: 600;
}
.fm-vd-version-actions {
    display: inline-flex;
    gap: 3px;
    flex: 0 0 auto;
}
.fm-vd-version-del {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}
.fm-vd-version-del:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
}
body.fm-dark .fm-vd-modal .fm-vd-version-row {
    background: #1e293b;
    border-color: #334155;
}
body.fm-dark .fm-vd-modal .fm-vd-version-label { color: #94a3b8; }
body.fm-dark .fm-vd-modal .fm-vd-version-del {
    color: #f87171 !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}
body.fm-dark .fm-vd-modal .fm-vd-version-del:hover {
    background: rgba(220, 38, 38, 0.18) !important;
}

/* ─────────── G19.45 — FM.Dialog (alert/confirm/prompt curati) ─────────── */
.fm-dialog {
    background: #ffffff;
    color: #0f172a;
    border-radius: 12px;
    width: min(440px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    animation: fm-dialog-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fm-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fm-dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 8px;
    border-bottom: 1px solid #f1f5f9;
}
.fm-dialog-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    background: #dbeafe;
    color: #1e40af;
}
.fm-dialog-backdrop--warn .fm-dialog-icon { background: #fef3c7; color: #b45309; }
.fm-dialog-backdrop--danger .fm-dialog-icon { background: #fee2e2; color: #b91c1c; }
.fm-dialog-backdrop--success .fm-dialog-icon { background: #dcfce7; color: #15803d; }
.fm-dialog-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.fm-dialog-body {
    padding: 14px 20px;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
    white-space: pre-wrap;
}
.fm-dialog-input {
    margin: 0 20px 8px;
    padding: 8px 10px;
    font-size: 13px;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    transition: border-color 0.12s;
    font-family: inherit;
}
.fm-dialog-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.fm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}
.fm-dialog-btn {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, transform 0.08s;
    font-family: inherit;
    line-height: 1.2;
}
.fm-dialog-btn:active { transform: translateY(1px); }
.fm-dialog-btn--cancel {
    background: #ffffff;
    color: #475569;
    border-color: #cbd5e1;
}
.fm-dialog-btn--cancel:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.fm-dialog-btn--ok {
    background: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
}
.fm-dialog-btn--ok:hover {
    background: #1d4ed8;
    border-color: #1e3a8a;
}
.fm-dialog-backdrop--warn .fm-dialog-btn--ok { background: #d97706; border-color: #b45309; }
.fm-dialog-backdrop--warn .fm-dialog-btn--ok:hover { background: #b45309; border-color: #92400e; }
.fm-dialog-backdrop--danger .fm-dialog-btn--ok { background: #dc2626; border-color: #b91c1c; }
.fm-dialog-backdrop--danger .fm-dialog-btn--ok:hover { background: #b91c1c; border-color: #991b1b; }
.fm-dialog-backdrop--success .fm-dialog-btn--ok { background: #16a34a; border-color: #15803d; }

/* Dark theme */
body.fm-dark .fm-dialog {
    background: #1f2330;
    color: #e2e8f0;
    border-color: #334155;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}
body.fm-dark .fm-dialog-header { border-bottom-color: #334155; }
body.fm-dark .fm-dialog-title { color: #f1f5f9; }
body.fm-dark .fm-dialog-icon { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
body.fm-dark .fm-dialog-backdrop--warn .fm-dialog-icon { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
body.fm-dark .fm-dialog-backdrop--danger .fm-dialog-icon { background: rgba(220, 38, 38, 0.22); color: #fca5a5; }
body.fm-dark .fm-dialog-backdrop--success .fm-dialog-icon { background: rgba(22, 163, 74, 0.22); color: #86efac; }
body.fm-dark .fm-dialog-body { color: #cbd5e1; }
body.fm-dark .fm-dialog-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
body.fm-dark .fm-dialog-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}
body.fm-dark .fm-dialog-actions {
    background: rgba(15, 23, 42, 0.5);
    border-top-color: #334155;
}
body.fm-dark .fm-dialog-btn--cancel {
    background: #0f172a;
    color: #cbd5e1;
    border-color: #334155;
}
body.fm-dark .fm-dialog-btn--cancel:hover {
    background: #1e293b;
    border-color: #60a5fa;
    color: #f1f5f9;
}
body.fm-dark .fm-dialog-btn--ok {
    background: #2563eb;
    border-color: #1d4ed8;
}
.fm-vd-detail-slot.is-empty {
    background: #f1f5f9;
    border-style: dashed;
    color: #94a3b8;
}
.fm-vd-detail-slot-label {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: #2563eb;
    text-transform: uppercase;
}
/* G19.43 — title variante (es. "q — A_SOL") sotto il label per
 * distinguere le versioni nel modal. */
.fm-vd-detail-slot-title {
    font-size: 11px;
    color: #475569;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
    font-family: monospace;
}
body.fm-dark .fm-vd-modal .fm-vd-detail .fm-vd-detail-slot-title {
    color: #94a3b8;
}
.fm-vd-detail-slot.is-empty .fm-vd-detail-slot-label { color: #94a3b8; }
.fm-vd-detail-slot-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
}
.fm-vd-detail-pdf,
.fm-vd-detail-tex {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.fm-vd-detail .fm-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
.fm-vd-detail .fm-btn:hover { border-color: #2563eb; color: #2563eb; }
.fm-vd-detail .fm-btn--accent {
    background: #16a34a;
    color: #ffffff;
    border-color: #15803d;
    font-weight: 600;
}
.fm-vd-detail .fm-btn--accent:hover { background: #15803d; color: #fff; border-color: #14532d; }
.fm-vd-detail-tex-versions {
    border-top: 1px solid #e2e8f0;
    padding: 14px 22px 18px;
}
.fm-vd-detail-tex-versions h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
}
.fm-vd-detail-tex-versions p { margin: 0 0 6px; font-size: 12px; }

/* G19.23 — `.fm-vd-pdf` come bottone testo "PDF" prima del link */
.fm-vd-block .fm-vd-pdf {
    background: #ef4444;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #b91c1c;
    padding: 1px 6px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
    font-size: 10.5px;
    letter-spacing: 0.4px;
}
.fm-vd-block .fm-vd-pdf:hover { background: #dc2626; }
.fm-vd-block li[data-fm-has-pdf="0"] .fm-vd-pdf { background: #94a3b8; border-color: #64748b; }
.fm-vd-block li[data-fm-has-pdf="0"] .fm-vd-pdf:hover { background: #64748b; }

/* Dark theme */
/* G19.31 — Dark theme verifica detail modal: copertura completa
 * (header / cols / slots / TEX section / PDF section / empty state). */
body.fm-dark .fm-vd-modal .fm-vd-detail {
    background: #1f2330;
    color: #e2e8f0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    border: 1px solid #334155;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-header {
    border-bottom-color: #334155;
    background: linear-gradient(180deg, #232838 0%, #1f2330 100%);
}
body.fm-dark .fm-vd-modal .fm-vd-detail-header h3 {
    color: #f1f5f9;
    font-weight: 700;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-meta { color: #94a3b8; }
body.fm-dark .fm-vd-modal .fm-vd-detail-meta .fm-muted { color: #94a3b8; }
body.fm-dark .fm-vd-modal .fm-vd-detail-cols {
    background: transparent;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-col-title {
    color: #f1f5f9;
    border-bottom-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    padding: 6px 8px;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-slot {
    background: #0f172a;
    border-color: #334155;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-slot.is-empty {
    background: #161b29;
    border-color: #2d3748;
    color: #64748b;
    border-style: dashed;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-slot.is-empty .fm-vd-detail-slot-label {
    color: #475569;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-slot-label {
    color: #60a5fa;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.18);
}
body.fm-dark .fm-vd-modal .fm-vd-detail-pdf,
body.fm-dark .fm-vd-modal .fm-vd-detail-tex {
    background: transparent;
}
body.fm-dark .fm-vd-modal .fm-vd-detail .fm-btn {
    background: #0f172a;
    color: #cbd5e1;
    border-color: #334155;
}
body.fm-dark .fm-vd-modal .fm-vd-detail .fm-btn:hover {
    border-color: #60a5fa;
    color: #ffffff;
    background: #1e293b;
}
body.fm-dark .fm-vd-modal .fm-vd-detail .fm-btn--accent {
    background: #16a34a;
    color: #ffffff;
    border-color: #166534;
    font-weight: 700;
}
body.fm-dark .fm-vd-modal .fm-vd-detail .fm-btn--accent:hover {
    background: #15803d;
    border-color: #14532d;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-tex-versions {
    border-top-color: #334155;
    background: rgba(15, 23, 42, 0.4);
}
body.fm-dark .fm-vd-modal .fm-vd-detail-tex-versions h4 { color: #f1f5f9; }
body.fm-dark .fm-vd-modal .fm-vd-detail-tex-versions p { color: #94a3b8; }
body.fm-dark .fm-vd-modal .fm-vd-detail-tex-versions .fm-muted { color: #94a3b8; }
body.fm-dark .fm-vd-modal .fm-vd-detail-tex-versions code {
    background: #0f172a;
    color: #fbbf24;
    border: 1px solid #334155;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-header .fm-modal-close {
    color: #94a3b8;
    background: transparent;
}
body.fm-dark .fm-vd-modal .fm-vd-detail-header .fm-modal-close:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   G20.1 — Area docente: nav + page layout
   ══════════════════════════════════════════════════════════════════ */
.fm-area-docente-nav {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #e2e8f0;
    padding: 0;
    margin-bottom: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    border-radius: 8px;
}
.fm-area-docente-nav__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.fm-area-docente-nav__title {
    font-weight: 700;
    font-size: 17px;
    color: #f1f5f9;
}
.fm-area-docente-nav__tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.fm-area-docente-nav__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 6px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
    border: 1px solid transparent;
}
.fm-area-docente-nav__tab:hover {
    background: rgba(255,255,255,.06);
    color: #f8fafc;
    text-decoration: none;
}
.fm-area-docente-nav__tab--active {
    background: rgba(59,130,246,.18);
    color: #f8fafc;
    border-color: rgba(59,130,246,.4);
}
.fm-area-docente-nav__icon { font-size: 18px; }

.fm-area-docente-page {
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 22px;
}
.fm-area-docente-page h1 {
    font-size: 26px;
    margin: 0 0 6px 0;
    color: #1e293b;
}
.fm-area-docente-page > header {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
}
.fm-area-docente-page > header p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* Card sezione */
.fm-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    margin-bottom: 16px;
}
.fm-card h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #1e293b;
}
.fm-card h3 {
    margin: 18px 0 6px 0;
    font-size: 14px;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Table standard */
.fm-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.fm-data-table thead {
    background: #f1f5f9;
}
.fm-data-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #e5e7eb;
}
.fm-data-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.fm-data-table tbody tr:hover { background: #fafafa; }

/* Badge attivo per istituto corrente */
.fm-badge--active {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Layout file-tree editor (riusato da admin templates) */
.fm-vfiles-layout-area-docente {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 18px;
    min-height: 600px;
}
@media (max-width: 900px) {
    .fm-vfiles-layout-area-docente {
        grid-template-columns: 1fr;
    }
}

/* Dark mode */
body.fm-dark .fm-area-docente-page h1 { color: #f1f5f9; }
body.fm-dark .fm-area-docente-page > header { border-color: #334155; }
body.fm-dark .fm-area-docente-page > header p { color: #94a3b8; }
body.fm-dark .fm-card {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}
body.fm-dark .fm-card h2 { color: #f1f5f9; }
body.fm-dark .fm-card h3 { color: #94a3b8; }
body.fm-dark .fm-data-table thead { background: #0f172a; }
body.fm-dark .fm-data-table th { color: #94a3b8; border-color: #334155; }
body.fm-dark .fm-data-table td { border-color: #334155; }
body.fm-dark .fm-data-table tbody tr:hover { background: #243047; }

/* ─────────────────────────────────────────────────────────────────── */
/* G21.1 — Verifica Preview Modal (TeX↔PDF + SyncTeX + compare).      */
/* Modal full-screen stile VSCode con editor CodeMirror + PDF.js.     */
/* ─────────────────────────────────────────────────────────────────── */
.fm-vp-backdrop {
    /* Riusa .fm-modal-backdrop ma full-screen senza padding */
    padding: 0;
}
.fm-vp-modal {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    background: #f5f5f7;
    color: #222;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.fm-vp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: #fff;
    border-bottom: 1px solid #d0d0d6;
    flex-shrink: 0;
    gap: 10px;
}
.fm-vp-title {
    font-size: 14px;
    margin: 0;
    color: #333;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-vp-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.fm-vp-toolbar .fm-btn {
    font-size: 12px;
    padding: 4px 8px;
}
.fm-vp-toolbar .fm-modal-close {
    font-size: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 8px;
    color: #555;
}
.fm-vp-toolbar .fm-modal-close:hover { color: #c00; }
.fm-vp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #555;
    user-select: none;
    cursor: pointer;
}
.fm-vp-engine {
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* Tabs varianti */
.fm-vp-tabs {
    display: flex;
    gap: 0;
    padding: 0 14px;
    background: #ececf1;
    border-bottom: 1px solid #d0d0d6;
    overflow-x: auto;
    flex-shrink: 0;
}
.fm-vp-tab {
    padding: 6px 14px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.fm-vp-tab:hover {
    background: #d8d8df;
    color: #222;
}
.fm-vp-tab--active {
    background: #f5f5f7;
    color: #0066cc;
    border-bottom-color: #0066cc;
    font-weight: 600;
}

/* Status bar */
.fm-vp-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 14px;
    background: #fafafd;
    border-bottom: 1px solid #e0e0e6;
    font-size: 11px;
    color: #666;
    flex-shrink: 0;
    gap: 12px;
}
.fm-vp-status [data-status-info][data-kind="error"] { color: #c00; }
.fm-vp-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    margin-left: 4px;
}
.fm-vp-badge--warn  { background: #fef3c7; color: #92400e; }
.fm-vp-badge--error { background: #fee2e2; color: #991b1b; }

/* Body: editor + pdf side-by-side */
.fm-vp-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    min-height: 0;
}
.fm-vp-modal.fm-vp-compare .fm-vp-body {
    grid-template-columns: 1fr 1fr 1fr;
}
.fm-vp-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #d0d0d6;
    min-width: 0;
}
.fm-vp-pane:last-child { border-right: none; }
.fm-vp-pane--editor { background: #fff; }
.fm-vp-pane--pdf,
.fm-vp-pane--pdf2 {
    background: #2c2c34;
}

/* Editor host */
.fm-vp-editor-host {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
.fm-vp-editor-host .cm-editor {
    height: 100%;
    font-size: 13px;
}
.fm-vp-editor-host .cm-content {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
/* G21.2 v3 — highlight SyncTeX via CodeMirror Decoration .fm-vp-flash */
.fm-vp-editor-host .cm-line.fm-vp-flash {
    background-color: #ffeb3b !important;
    outline: 2px solid #ff6f00;
    outline-offset: 1px;
    border-radius: 3px;
    animation: fm-vp-flash-1s 1s ease-out;
}
@keyframes fm-vp-flash-1s {
    0%   { background-color: #ffeb3b; }
    50%  { background-color: rgba(255, 235, 59, 0.7); }
    100% { background-color: rgba(255, 235, 59, 0.4); }
}
body.fm-dark .fm-vp-editor-host .cm-line.fm-vp-flash {
    background-color: #ff9800 !important;
    color: #000;
    outline: 2px solid #fff59d;
    animation-name: fm-vp-flash-1s-dark;
}
@keyframes fm-vp-flash-1s-dark {
    0%   { background-color: #ff9800; }
    50%  { background-color: rgba(255, 152, 0, 0.7); }
    100% { background-color: rgba(255, 152, 0, 0.4); }
}

/* PDF host */
.fm-vp-pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #1f1f24;
    border-bottom: 1px solid #444;
    color: #ccc;
    font-size: 11px;
    flex-shrink: 0;
}
.fm-vp-pdf-toolbar [data-page-info],
.fm-vp-pdf-toolbar [data-page-info-2] {
    min-width: 56px;
    text-align: center;
}
.fm-vp-pdf-toolbar select {
    background: #2c2c34;
    color: #ddd;
    border: 1px solid #555;
    padding: 2px 4px;
    font-size: 11px;
}
.fm-vp-pdf-toolbar .fm-btn {
    background: #3a3a44;
    color: #ddd;
    border: 1px solid #555;
    padding: 2px 6px;
    font-size: 11px;
    cursor: pointer;
}
.fm-vp-pdf-toolbar .fm-btn:hover { background: #4a4a54; }
.fm-vp-pdf-help {
    margin-left: auto;
    color: #888;
    font-style: italic;
    font-size: 10px;
}
.fm-vp-pdf-host {
    flex: 1;
    overflow: auto;
    padding: 12px;
    text-align: center;
    background: #2c2c34;
    min-height: 0;
}
.fm-vp-pdf-canvas {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    height: auto;
    cursor: crosshair;
}

/* Footer log */
.fm-vp-footer {
    background: #1f1f24;
    color: #ccc;
    border-top: 1px solid #444;
    flex-shrink: 0;
    max-height: 200px;
    overflow: auto;
}
.fm-vp-log summary {
    padding: 4px 14px;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    background: #2c2c34;
}
.fm-vp-log summary:hover { background: #3a3a44; }
.fm-vp-log pre {
    margin: 0;
    padding: 8px 14px;
    font-size: 11px;
    font-family: "SFMono-Regular", Consolas, monospace;
    color: #b8b8c0;
    background: #1f1f24;
    overflow: auto;
    max-height: 160px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Dark mode */
body.fm-dark .fm-vp-modal { background: #14141a; color: #ddd; }
body.fm-dark .fm-vp-header { background: #1c1c24; border-color: #2c2c34; }
body.fm-dark .fm-vp-title { color: #eee; }
body.fm-dark .fm-vp-toolbar .fm-modal-close { color: #aaa; }
body.fm-dark .fm-vp-engine { background: #2c2c34; color: #ddd; border-color: #444; }
body.fm-dark .fm-vp-toggle { color: #ccc; }
/* G21.1 fix dark — bottoni toolbar (Ricompila, Salva TEX, PDF) leggibili */
body.fm-dark .fm-vp-toolbar .fm-btn {
    background: #3a3a44;
    color: #e8e8ed;
    border: 1px solid #555;
}
body.fm-dark .fm-vp-toolbar .fm-btn:hover {
    background: #4a4a54;
    color: #fff;
    border-color: #6a6a74;
}
body.fm-dark .fm-vp-toolbar .fm-btn:disabled {
    background: #2c2c34;
    color: #888;
    border-color: #3a3a44;
    cursor: not-allowed;
}
body.fm-dark .fm-vp-tabs { background: #1f1f28; border-color: #2c2c34; }
body.fm-dark .fm-vp-tab { color: #aaa; }
body.fm-dark .fm-vp-tab:hover { background: #2c2c34; color: #ddd; }
body.fm-dark .fm-vp-tab--active { background: #14141a; color: #66b3ff; border-bottom-color: #66b3ff; }
body.fm-dark .fm-vp-status { background: #1c1c24; border-color: #2c2c34; color: #aaa; }
body.fm-dark .fm-vp-pane { border-color: #2c2c34; }
body.fm-dark .fm-vp-pane--editor { background: #14141a; }
body.fm-dark .fm-vp-footer { background: #0f0f14; }
body.fm-dark .fm-vp-log summary { background: #1c1c24; color: #ccc; }
body.fm-dark .fm-vp-log summary:hover { background: #2c2c34; }
body.fm-dark .fm-vp-log pre { background: #0f0f14; color: #b8b8c0; }

/* Responsive: stack su schermi piccoli */
@media (max-width: 900px) {
    .fm-vp-body {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 1fr;
    }
    .fm-vp-modal.fm-vp-compare .fm-vp-body {
        grid-template-rows: 1fr 1fr 1fr;
    }
}



/* G21.4 — Dark theme pre-paint guard: applicato sull <html> dal head script */
html.fm-dark-pre { background-color: #14141a; color: #ddd; }