/* ==========================================================================
   EduBoard v2 — style.css
   Lavagna digitale interattiva per la scuola
   Tema: Dark Slate + Canvas bianco
   ========================================================================== */

/* --------------------------------------------------------------------------
   IMPORT FONT
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* --------------------------------------------------------------------------
   VARIABILI CSS
   -------------------------------------------------------------------------- */
:root {
    --bg-app:      #0f172a;
    --bg-surface:  #1e293b;
    --bg-elevated: #334155;
    --accent:      #3b82f6;
    --accent-glow: rgba(59, 130, 246, 0.25);
    --text:        #f1f5f9;
    --text-muted:  #94a3b8;
    --border:      rgba(148, 163, 184, 0.12);
    --danger:      #ef4444;
    --success:     #22c55e;
    --laser:       #ef4444;
}


/* --------------------------------------------------------------------------
   RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: var(--text);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    font-family: inherit;
}


/* ==========================================================================
   HEADER
   ========================================================================== */
#app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    z-index: 300;
}

/* --- Lato sinistro: logo + badge progetto --- */
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.logo-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}
.logo-edu   { color: var(--text); }
.logo-board { color: #3b82f6; }

.logo-sub {
    font-size: 0.52rem;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

#project-name {
    background: var(--bg-elevated);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
    border: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
}
#project-name:hover {
    border-color: rgba(255,255,255,0.15);
    color: var(--text);
}
#project-name.editing {
    border-color: rgba(59,130,246,0.6);
    color: var(--text);
    white-space: nowrap;
    overflow: visible;
    max-width: 300px;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

/* --- Lato destro: bottoni azioni --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hdr-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hdr-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.hdr-btn:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

/* Variante primaria (Salva) */
.hdr-btn--primary {
    background: var(--accent);
    color: #ffffff;
    border-color: transparent;
}

.hdr-btn--primary:hover {
    background: #2563eb;
    color: #ffffff;
}


/* ==========================================================================
   CANVAS AREA
   ========================================================================== */
#canvas-area {
    position: absolute;
    top: 56px; /* compensa l'header fisso */
    left: 0;
    /* Il transform CSS (pan+zoom) viene applicato qui da JS */
    will-change: transform;
    transform-origin: 0 0;
    /* Lo sfondo (pattern quadretti) è ora sul body per effetto infinito */
}

/* I canvas sovrapposti */
#bg-canvas,
#draw-canvas,
#objects-canvas,
#overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    /* width e height gestiti via JS (canvas 3× viewport per pan infinito) */
}

#bg-canvas {
    z-index: 1;
}

#draw-canvas {
    z-index: 3;
    cursor: crosshair;
}

#objects-canvas {
    z-index: 2;
    pointer-events: none; /* non intercetta: SelectManager usa hitTest via overlay */
}

#overlay-canvas {
    z-index: 4;
    /* Non riceve eventi di default; il JS abilita pointer-events per il laser */
    pointer-events: none;
    touch-action: none; /* impedisce al browser di intercettare tocchi come scroll → evita pointercancel */
}

/* Layer 4: input testo inline */
#text-cursor {
    position: absolute;
    min-width: 4px;
    min-height: 36px;
    background: transparent;
    outline: 2px dashed rgba(59, 130, 246, 0.7);
    outline-offset: 3px;
    border-radius: 2px;
    z-index: 150;
    white-space: pre;
    cursor: text;
    padding: 2px 4px;
    line-height: 1.3;
    caret-color: var(--accent);
}
#text-cursor:empty:before {
    content: 'Scrivi qui...';
    color: rgba(100,116,139,0.5);
    pointer-events: none;
}


/* ==========================================================================
   TOOLBAR WRAPPER + TOGGLE
   ========================================================================== */

/*
 * Il wrapper è centrato orizzontalmente in fondo allo schermo.
 * Di default è quasi nascosto (solo la linguetta da 40px è visibile).
 * La classe .visible lo porta completamente a schermo.
 */
#toolbar-wrapper {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% - 40px));
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(92vw, 900px);
    width: 100%;
}

#toolbar-wrapper.visible {
    transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   Linguetta toggle (#toolbar-toggle)
   Sempre visibile (~40px), forma a pillola aperta verso il basso
   -------------------------------------------------------------------------- */
#toolbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 32px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}

#toolbar-toggle:hover {
    background: var(--bg-elevated);
    color: var(--text);
}

/* Freccia SVG nel toggle */
#toggle-arrow {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Freccia ruota verso il basso quando la toolbar è aperta */
#toolbar-wrapper.visible #toggle-arrow {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Pannello toolbar principale (#floating-toolbar)
   -------------------------------------------------------------------------- */
#floating-toolbar {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 6px 12px 12px;
    width: 100%;
}


/* ==========================================================================
   RIGA OPZIONI CONTESTUALI (#tool-options-row)
   ========================================================================== */
#tool-options-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.options-colors,
.options-sizes {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Pulsanti modalità gomma (Area / Tratto) */
.eraser-mode-btn {
    padding: 3px 9px;
    border-radius: 14px;
    border: 1.5px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.65);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    white-space: nowrap;
}
.eraser-mode-btn.active {
    background: rgba(59,130,246,0.35);
    border-color: #3b82f6;
    color: white;
}
.eraser-mode-btn:hover:not(.active) {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
}

/* Divisore verticale tra gruppi di opzioni */
.options-divider {
    width: 1px;
    height: 26px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Palette colori (.color-swatch)
   -------------------------------------------------------------------------- */
.color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.color-swatch:hover {
    transform: scale(1.2);
}

.color-swatch.active {
    border-color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Pulsante per colore personalizzato */
.color-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated) !important;
}

.color-custom svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Bottoni dimensione pennino (.size-btn / .size-dot)
   -------------------------------------------------------------------------- */
.size-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.size-btn:hover {
    background: var(--bg-elevated);
}

.size-btn.active {
    background: var(--accent-glow);
}

/* Puntino che rappresenta visivamente il diametro del tratto */
.size-dot {
    background: #ffffff;
    border-radius: 50%;
    display: block;
}


/* ==========================================================================
   RIGA STRUMENTI PRINCIPALI (.main-row)
   ========================================================================== */
.main-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Gruppi di strumenti correlati */
.tool-group {
    display: flex;
    gap: 2px;
}

/* Separatore verticale tra gruppi */
.tool-separator {
    width: 1px;
    height: 44px;
    background: var(--border);
    margin: 0 6px;
    flex-shrink: 0;
    align-self: center;
}

/* --------------------------------------------------------------------------
   Bottoni strumento (.tool-btn)
   -------------------------------------------------------------------------- */
.tool-btn {
    width: 50px;
    height: 48px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tool-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.tool-btn span {
    font-size: 0.58rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.tool-btn:hover {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: var(--border);
}

/* Strumento selezionato */
.tool-btn.active {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent);
    border-color: rgba(59, 130, 246, 0.4);
}

/* I bottoni azione (undo/redo/clear) non mantengono lo stato active */
.action-btn.active {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

/* Bottone pericoloso (Cancella tutto) */
.danger-btn:hover {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Laser attivo: colore speciale */
.tool-btn[data-tool="laser"].active {
    color: var(--laser);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}


/* ==========================================================================
   CURSORI PERSONALIZZATI PER STRUMENTO
   ========================================================================== */
#draw-canvas.tool-pen,
#draw-canvas.tool-pencil,
#draw-canvas.tool-pastel,
#draw-canvas.tool-marker,
#draw-canvas.tool-shape {
    cursor: crosshair;
}

#draw-canvas.tool-eraser {
    cursor: cell;
}

#draw-canvas.tool-text {
    cursor: text;
}

/* Il cursore laser è disegnato sull'overlay canvas */
#draw-canvas.tool-laser {
    cursor: none;
}

#draw-canvas.tool-hand {
    cursor: grab;
}

#draw-canvas.tool-hand:active {
    cursor: grabbing;
}


/* ==========================================================================
   POPUP PANELS (.popup-panel)
   ========================================================================== */
.popup-panel {
    position: fixed;
    z-index: 250;
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    /* Posizione verticale/orizzontale calcolata dinamicamente da JS */
    left: 50%;
    transform: translateX(-50%);
}

/* Titolo sezione */
.popup-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Popup selezione forme (#shape-popup)
   -------------------------------------------------------------------------- */
.shape-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.shape-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--bg-elevated);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    color: var(--text-muted);
}

.shape-opt svg {
    width: 40px;
    height: 40px;
}

.shape-opt span {
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.shape-opt:hover {
    border-color: var(--border);
    color: var(--text);
}

.shape-opt.active {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

/* Riga toggle riempimento */
.shape-fill-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Toggle switch (.toggle-label / .toggle-slider)
   -------------------------------------------------------------------------- */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    user-select: none;
}

/* Checkbox reale nascosta */
.toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Traccia del toggle */
.toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--bg-elevated);
    border-radius: 10px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

/* Pallino scorrevole */
.toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

/* Stato checked */
.toggle-label input[type="checkbox"]:checked + .toggle-slider {
    background: var(--accent);
}

.toggle-label input[type="checkbox"]:checked + .toggle-slider::after {
    transform: translateX(16px);
}

/* --------------------------------------------------------------------------
   Popup selezione sfondo (#bg-popup)
   -------------------------------------------------------------------------- */

#bg-popup {
    width: 560px;                   /* largo → più colonne di sfondi + spazio Drive images */
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* Titolo + riga orientamento: sticky in cima quando si scrolla */
#bg-popup .popup-title,
#bg-popup .bg-orient-row {
    position: sticky;
    top: 0;
    background: rgba(30, 41, 59, 0.98);
    z-index: 1;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Riga orientamento + colore pagina */
.bg-orient-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    flex-shrink: 0; /* rimane sempre visibile in cima, non entra nel flusso scroll */
}
.bg-orient-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.bg-orient-btn:hover { background: var(--bg-elevated); color: var(--text); }
.bg-orient-btn.active { background: rgba(59,130,246,0.2); color: var(--accent); border-color: var(--accent); }
.bg-color-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: auto;
}
.bg-color-label input[type="color"] {
    width: 28px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
}

/* Bottone colore pagina (sostituisce input[type=color] visibile) */
.bg-page-color-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 24px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color 0.15s;
}
.bg-page-color-btn:hover { border-color: var(--accent); }
.bg-page-color-swatch {
    display: block;
    width: 20px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.18);
}

/* Palette colori pagina — modale flottante, position:fixed, posizionata via JS */
.bg-page-color-popup {
    position: fixed;
    z-index: 10000;             /* sopra tutto, incluso bg-popup */
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    width: 228px;
}
.bg-page-color-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}
.bg-page-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
    padding: 0;
}
.bg-page-color-dot:hover {
    border-color: var(--accent);
    transform: scale(1.18);
}
.bg-page-color-dot.active {
    border-color: white;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
}
.bg-page-color-custom-btn {
    width: 100%;
    padding: 5px 0;
    font-size: 0.78rem;
    font-family: inherit;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.bg-page-color-custom-btn:hover {
    background: rgba(59,130,246,0.15);
    color: var(--accent);
}

.bg-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);  /* più largo → 6 colonne */
    gap: 8px;
}

.bg-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 10px;
    padding: 6px;
    border: 2px solid transparent;
    transition: border-color 0.18s ease;
}

.bg-opt:hover {
    border-color: var(--border);
}

.bg-opt.active {
    border-color: var(--accent);
}

/* Miniatura anteprima sfondo */
.bg-preview {
    width: 56px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #ffffff;
    flex-shrink: 0;
}

.bg-opt span {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Anteprime sfondi nelle miniature (.bg-preview)
   -------------------------------------------------------------------------- */

/* Righe 8mm */
.bg-p-lines-8 {
    background: white;
    background-image: repeating-linear-gradient(
        transparent 0px, transparent 11px,
        #93c5fd 11px, #93c5fd 12px
    );
}

/* Righe 5mm */
.bg-p-lines-5 {
    background: white;
    background-image: repeating-linear-gradient(
        transparent 0px, transparent 7px,
        #93c5fd 7px, #93c5fd 8px
    );
}

/* Righe 3mm */
.bg-p-lines-3 {
    background: white;
    background-image: repeating-linear-gradient(
        transparent 0px, transparent 4px,
        #93c5fd 4px, #93c5fd 5px
    );
}

/* Quadretti 10mm */
.bg-p-grid-10 {
    background: white;
    background-image:
        repeating-linear-gradient(#bfdbfe 0 1px, transparent 1px 100%),
        repeating-linear-gradient(90deg, #bfdbfe 0 1px, transparent 1px 100%);
    background-size: 14px 14px;
}

/* Quadretti 5mm */
.bg-p-grid-5 {
    background: white;
    background-image:
        repeating-linear-gradient(#bfdbfe 0 1px, transparent 1px 100%),
        repeating-linear-gradient(90deg, #bfdbfe 0 1px, transparent 1px 100%);
    background-size: 7px 7px;
}

/* Puntini */
.bg-p-dots {
    background: white radial-gradient(#94a3b8 1px, transparent 1px);
    background-size: 8px 8px;
}

/* Pentagramma musicale (5 linee + spazio) */
.bg-p-staff {
    background: white;
    background-image: repeating-linear-gradient(
        transparent  0px, transparent  6px,
        #93c5fd      6px, #93c5fd      7px,
        transparent  7px, transparent 12px,
        #93c5fd     12px, #93c5fd     13px,
        transparent 13px, transparent 18px,
        #93c5fd     18px, #93c5fd     19px,
        transparent 19px, transparent 24px,
        #93c5fd     24px, #93c5fd     25px,
        transparent 25px, transparent 38px
    );
}

/* --------------------------------------------------------------------------
   Feature 4 — Anteprime sfondi Righe Primaria
   -------------------------------------------------------------------------- */

/* 1ª elementare: righe blu grandi + righino rosso a metà */
.bg-p-lines-15-aux {
    background: white;
    background-image:
        repeating-linear-gradient(
            transparent 0px, transparent 12px,
            #f87171 12px, #f87171 14px,
            transparent 14px, transparent 20px,
            #60a5fa 20px, #60a5fa 22px
        );
}

/* 2ª elementare: righe blu + righino rosso più vicino */
.bg-p-lines-12-aux {
    background: white;
    background-image:
        repeating-linear-gradient(
            transparent 0px, transparent 8px,
            #f87171 8px, #f87171 10px,
            transparent 10px, transparent 16px,
            #60a5fa 16px, #60a5fa 18px
        );
}

/* 3ª elementare: righe da 9mm */
.bg-p-lines-9 {
    background: white;
    background-image: repeating-linear-gradient(
        transparent 0px, transparent 11px,
        #60a5fa 11px, #60a5fa 13px
    );
}

/* 4ª elementare: righe da 7mm */
.bg-p-lines-7 {
    background: white;
    background-image: repeating-linear-gradient(
        transparent 0px, transparent 8px,
        #60a5fa 8px, #60a5fa 10px
    );
}

/* Separatore sezione nel popup sfondo */
.bg-section-header {
    grid-column: 1 / -1;
    padding-top: 8px;
}

/* Sottotitolo sezione nei popup */
.popup-title-sub {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 10px 0 6px;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Feature 2 — Tavolozza 80 colori
   -------------------------------------------------------------------------- */

.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    padding: 4px;
}

.color-palette-grid button {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    outline: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.12s ease, outline-color 0.12s ease;
    flex-shrink: 0;
}

.color-palette-grid button:hover {
    transform: scale(1.25);
    outline-color: rgba(255,255,255,0.4);
    z-index: 1;
    position: relative;
}

.palette-custom-row {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

#palette-custom-btn {
    width: 100%;
    background: var(--bg-elevated);
    color: var(--text);
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    transition: background 0.15s ease;
}

#palette-custom-btn:hover {
    background: var(--accent);
}


/* ==========================================================================
   TOAST NOTIFICATIONS (#toast-container / .toast)
   ========================================================================== */
#toast-container {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 16px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    animation:
        toastIn  0.3s ease         forwards,
        toastOut 0.3s ease 2.7s    forwards;
}

.toast.success {
    border-left: 3px solid var(--success);
}

.toast.error {
    border-left: 3px solid var(--danger);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}


/* ===== TOOLBAR TESTO CONTESTUALE ===== */
.text-toolbar {
    position: fixed;
    bottom: 100px;  /* sopra la toolbar principale */
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 12px;
    display: none;
    align-items: center;
    gap: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    backdrop-filter: blur(16px);
    flex-wrap: wrap;
}

.text-toolbar select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 4px 6px;
    font-size: 0.82rem;
    cursor: pointer;
}

.txt-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.88rem;
    padding: 4px 8px;
    min-width: 30px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.txt-btn:hover { background: var(--accent); border-color: var(--accent); color: white; }
.txt-btn--active { background: rgba(59,130,246,0.25); border-color: var(--accent); color: var(--accent); }
.txt-btn--primary { background: var(--accent); border-color: var(--accent); color: white; }
.txt-btn--primary:hover { background: #2563eb; }
.txt-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }


/* ==========================================================================
   UPDATE BANNER (.update-banner)
   ========================================================================== */
.update-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: rgba(59, 130, 246, 0.95);
    color: #ffffff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

#update-btn {
    background: #ffffff;
    color: var(--accent);
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    font-size: 0.85rem;
    transition: opacity 0.15s ease;
}

#update-btn:hover {
    opacity: 0.9;
}

/* Pulsante chiudi (×) */
.close-x {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: auto;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.close-x:hover {
    background: rgba(255, 255, 255, 0.15);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet / mobile medio */
@media (max-width: 600px) {
    /* Nascondi etichette testuali dei bottoni strumento */
    .tool-btn span {
        display: none;
    }

    /* Bottoni più compatti senza testo */
    .tool-btn {
        width: 46px;
        height: 46px;
    }

    /* Griglia sfondo: già 4 colonne, confermato */
    .bg-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile piccolo */
@media (max-width: 400px) {
    .tool-group {
        gap: 1px;
    }

    /* Nasconde i separatori per risparmiare spazio */
    .tool-separator {
        display: none;
    }
}


/* ==========================================================================
   DRIVE INTEGRATION — drive.js
   ========================================================================== */

/* ── Pulsante header Drive ── */
#btn-drive.drive-connected { color: #22c55e; }
#btn-drive.drive-error      { color: #ef4444; }
#btn-drive.drive-syncing    { color: #f59e0b; animation: spin 1s linear infinite; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Mini-pannello stato Drive (popup da btn-drive) ── */
.drive-panel {
    position: fixed;
    top: 64px;
    right: 16px;
    background: rgba(30, 41, 59, 0.97);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0;
    width: 280px;
    z-index: 400;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
}

.drive-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
}

.drive-panel-header button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 4px;
    line-height: 1;
}
.drive-panel-header button:hover { color: var(--text); }

.drive-panel-body {
    padding: 12px 16px;
}
.drive-panel-email {
    font-size: 0.85rem;
    color: var(--text);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drive-panel-info {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.drive-panel-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
}
.drive-panel-btn {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.15s;
}
.drive-panel-btn:hover { background: var(--accent); border-color: var(--accent); }
.drive-panel-btn--danger:hover { background: var(--danger); border-color: var(--danger); }


/* ==========================================================================
   LIBRERIA LEZIONI — pannello laterale sinistro
   ========================================================================== */

.library-panel {
    position: fixed;
    top: 56px;
    left: 0;
    width: 300px;
    height: calc(100vh - 56px);     /* fallback per browser senza dvh */
    height: calc(100dvh - 56px);
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--border);
    z-index: 250;
    display: flex;
    flex-direction: column;
    overflow: visible;              /* visible per non clippare il tab-freccia che sporge fuori dal bordo */
    /* Animazione slide da sinistra */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.library-panel.open {
    transform: translateX(0);
}

/* Header pannello */
.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.92rem;
    flex-shrink: 0;
}
.library-header button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 4px;
}
.library-header button:hover { color: var(--text); }

/* Banner stato Drive */
.library-drive-status {
    padding: 6px 16px;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.drive-status-ok  { color: #22c55e; }
.drive-status-off { color: var(--text-muted); }

/* Albero lezioni */
.library-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px;
}
.library-tree::-webkit-scrollbar { width: 4px; }
.library-tree::-webkit-scrollbar-track { background: transparent; }
.library-tree::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Elementi dell'albero */
.tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text-muted);
    transition: background 0.15s, filter 0.15s;
    user-select: none;
}
.tree-item:hover       { background: var(--bg-elevated); color: var(--text); }
.tree-item.selected    { background: rgba(59,130,246,0.18); color: var(--accent); }
.tree-item.folder      { font-weight: 500; }
.tree-item.lesson      { font-size: 0.82rem; }

.tree-icon  { font-size: 1rem; flex-shrink: 0; }
.tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pulsanti contestuali (visibili solo su hover) */
.tree-actions {
    display: none;
    gap: 2px;
    flex-shrink: 0;
}
.tree-item:hover .tree-actions { display: flex; }

.tree-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
}
.tree-btn:hover { opacity: 1; background: var(--bg-elevated); }

.tree-subtree { }

/* ── Drag handle riordino file lezioni ── */
.drag-handle {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0;
    cursor: grab;
    touch-action: none;
    transition: opacity 0.15s;
    line-height: 1;
    padding: 0 1px;
}
.tree-item:hover .drag-handle  { opacity: 0.45; }
.drag-handle:hover             { opacity: 1 !important; }
.drag-handle:active            { cursor: grabbing; }

.tree-item.lesson.drag-over-before { border-top: 2px solid var(--accent); }
.tree-item.lesson.drag-over-after  { border-bottom: 2px solid var(--accent); }
.tree-item.lesson.dragging-reorder { opacity: 0.4; pointer-events: none; }

/* Stati vuoto / loading / errore */
.tree-loading,
.tree-empty {
    padding: 16px 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}
.tree-error { color: var(--danger); }
.tree-empty p { margin-bottom: 10px; }

.tree-connect-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.84rem;
    transition: opacity 0.15s;
}
.tree-connect-btn:hover { opacity: 0.85; }

/* Azioni in fondo al pannello */
.library-actions {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.library-actions button {
    flex: 1;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.library-actions button:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Overlay semitrasparente quando il pannello è aperto (mobile) */
@media (max-width: 600px) {
    .library-panel {
        width: 85vw;
    }
    .library-panel.open::after {
        content: '';
        position: fixed;
        inset: 0;
        left: 85vw;
        background: rgba(0,0,0,0.5);
        z-index: -1;
    }
}


/* ==========================================================================
   GEO POPUP — pulsanti strumenti geometrici attivi
   ========================================================================== */

.shape-opt.geo-active {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent);
}


/* ===== LINGUETTE LIBRERIA LATERALI — RIMOSSE, ora usa .library-tab fixed ===== */
.lib-tab {
    display: none !important;  /* eliminati — tenuto solo per retrocompatibilità */
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 210;
    cursor: pointer;
    background: rgba(30, 41, 59, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    padding: 14px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    user-select: none;
    touch-action: none;
    transition: background 0.2s, color 0.2s, opacity 0.2s;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    writing-mode: vertical-rl;  /* testo verticale */
    text-orientation: mixed;
}
.lib-tab--left {
    left: 0;
    border-radius: 0 10px 10px 0;
    border-left: none;
}
.lib-tab--right {
    right: 0;
    border-radius: 10px 0 0 10px;
    border-right: none;
}
.lib-tab:hover, .lib-tab.lib-tab--active {
    background: rgba(59, 130, 246, 0.75);
    color: white;
}
.lib-tab svg {
    flex-shrink: 0;
}
/* Nasconde span testo su schermi piccoli */
@media (max-width: 600px) {
    .lib-tab span { display: none; }
}
/* Nascondi le vecchie linguette fisse quando il pannello libreria è aperto
   (la nuova .library-tab all'interno del pannello gestisce la chiusura) */
#library-panel.open ~ #lib-tab-left,
#library-panel.open ~ #lib-tab-right {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Tab libreria — fissi ai lati dello schermo, sempre visibili.
   NOTA: elementi FUORI da #library-panel (transform parent blocca position:fixed). */
.library-tab {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 56px;
    background: rgba(30, 41, 59, 0.97);
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
    z-index: 300;           /* sopra library-panel (z-index: 250) — sempre visibili */
    touch-action: none;
}
.library-tab--left {
    left: 0;
    border-left: none;
    border-radius: 0 8px 8px 0;
}
.library-tab--right {
    right: 0;
    border-right: none;
    border-radius: 8px 0 0 8px;
}
.library-tab:hover { background: rgba(51, 65, 85, 0.97); color: var(--text); }
/* Evidenzia il tab del lato aperto */
.library-tab.active { background: rgba(59, 130, 246, 0.6); color: #fff; }

/* Libreria aperta da destra */
.library-panel.from-right {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border);
    transform: translateX(100%);  /* nascosta a destra */
}
.library-panel.from-right.open {
    transform: translateX(0);
}
/* Close button a destra quando pannello è da sinistra */
.library-panel:not(.from-right) #library-close { margin-left: auto; }


/* ===== PULSANTE EXIT FULLSCREEN ===== */
.exit-fs-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 500;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    padding: 0;
}
.exit-fs-btn:hover {
    background: rgba(15, 23, 42, 0.75);
    color: rgba(255, 255, 255, 0.9);
}

/* ===== FULLSCREEN MODE — header nascosto ===== */
#app-header {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
body.fullscreen-mode #app-header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
body.fullscreen-mode #canvas-area {
    top: 0 !important;
}

/* ===== MODAL — Salva prima di continuare ===== */
#dirty-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.dirty-modal-box {
    background: var(--bg-elevated, #1e293b);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    text-align: center;
}
.dirty-modal-msg {
    font-size: 1.05rem;
    color: var(--text, #e2e8f0);
    margin: 0 0 24px;
    line-height: 1.5;
}
.dirty-modal-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dirty-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text, #e2e8f0);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s;
}
.dirty-btn:hover { background: rgba(255,255,255,0.10); }
.dirty-btn--primary {
    background: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
    color: #fff;
    font-weight: 600;
}
.dirty-btn--primary:hover { background: #2563eb; }
.dirty-btn--cancel { color: rgba(255,255,255,0.45); }


/* ===== MODAL — Selezione pagine stampa ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-box {
    background: var(--bg-elevated, #334155);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 28px 32px;
    min-width: 320px;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-box h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #f1f5f9);
}
.print-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text, #f1f5f9);
}
.print-option input[type="radio"] { cursor: pointer; }
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}
.btn-primary {
    padding: 9px 20px;
    border-radius: 8px;
    border: none;
    background: var(--accent, #3b82f6);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-primary:hover { background: #2563eb; }
.btn-secondary {
    padding: 9px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: var(--text-muted, #94a3b8);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.08); }


/* ===== Sfondi da Drive ===== */
#bg-drive-section {
    /* nessun vincolo flex speciale necessario con il nuovo layout overflow-y */
}

.bg-drive-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;          /* riga unica orizzontale */
    gap: 8px;
    padding: 4px 2px 8px;
    overflow-x: auto;           /* scroll orizzontale */
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.bg-drive-grid::-webkit-scrollbar { height: 5px; }
.bg-drive-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.bg-drive-thumb {
    width: 90px;
    height: 65px;
    flex-shrink: 0;             /* non si comprime — mantiene dimensione fissa */
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: border-color 0.15s, transform 0.1s;
}
.bg-drive-thumb:hover { border-color: var(--accent); transform: scale(1.05); }
.bg-drive-loading,
.bg-drive-empty {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 8px 0;
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   PANNELLO CONTESTUALE OGGETTI (compatto con icone)
   ========================================================================== */
.ctx-panel {
    position: fixed;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 500;
    overflow: visible;
}
.ctx-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 6px;
    flex-wrap: wrap;
}
.ctx-icon-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    color: #475569;
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
}
.ctx-icon-btn:hover { background: #e0f2fe; color: #0369a1; }
.ctx-icon-btn--danger:hover { background: #fee2e2; color: #dc2626; }
.ctx-sep {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    margin: 0 2px;
    flex-shrink: 0;
}
.ctx-pixel-only { display: none; }
.ctx-popup {
    padding: 8px 10px;
    border-top: 1px solid #e2e8f0;
    min-width: 180px;
    background: #ffffff;
    border-radius: 0 0 8px 8px;
}
.ctx-popup label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #475569;
    white-space: nowrap;
}
.ctx-popup input[type="range"] {
    flex: 1;
    accent-color: #3b82f6;
    min-width: 80px;
}
.ctx-popup input[type="color"] {
    width: 28px;
    height: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
}
.ctx-popup input[type="number"] {
    width: 70px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 0.82rem;
    color: #1e293b;
}

/* Mantieni retrocompatibilità per ctx-btn usati altrove */
.ctx-btn {
    background: var(--bg-elevated, #334155);
    border: none;
    color: var(--text, #f1f5f9);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s;
}
.ctx-btn:hover { background: rgba(71,85,105,0.8); }
.ctx-btn--danger { color: #ef4444; }
.ctx-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.ctx-color-input {
    width: 30px;
    height: 28px;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
}
.ctx-number-input {
    width: 70px;
    background: var(--bg-elevated, #334155);
    border: 1px solid var(--border, rgba(148,163,184,0.12));
    color: var(--text, #e2e8f0);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
}
.ctx-btn--small {
    padding: 4px 6px;
    font-size: 0.78rem;
}
.ctx-label {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    margin-bottom: -2px;
}
.ctx-slider {
    width: 100%;
    accent-color: #3b82f6;
}
.ctx-divider {
    border-top: 1px solid var(--border, rgba(148,163,184,0.12));
    margin: 2px 0;
}

/* ==========================================================================
   BARRA PAGINE (#page-bar)
   ========================================================================== */
#page-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    z-index: 190;
    overflow-x: auto;
    scrollbar-width: thin;
}
#page-bar::-webkit-scrollbar { height: 4px; }
#page-bar::-webkit-scrollbar-track { background: transparent; }
#page-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.page-btn {
    min-width: 28px;
    height: 28px;
    border: 1px solid rgba(148,163,184,0.3);
    border-radius: 6px;
    background: rgba(30,41,59,0.8);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    padding: 0 6px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.page-btn:hover { background: rgba(51,65,85,0.9); color: #e2e8f0; }
.page-btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-btn--add { border-style: dashed; color: var(--accent); font-size: 16px; font-weight: 700; }
.page-btn--add:hover { background: rgba(59,130,246,0.15); }

/* FIX PAGINE B: container pagina con pulsante X visibile */
.page-container {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.page-del-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
}
.page-del-btn:hover { background: #dc2626; }

/* Sposta la toolbar-wrapper in alto di 38px quando la page-bar è visibile */
body.has-page-bar #toolbar-wrapper {
    bottom: 38px;
}

/* BUG 2 fix: quando il wrapper NON è visible, nascondi completamente il contenuto
   della toolbar (indipendente da bottom/transform) per evitare la barra nera */
#toolbar-wrapper:not(.visible) #floating-toolbar {
    display: none;
}
/* Sposta il FAB drive un po' più in alto */
body.has-page-bar #drive-fab-wrapper {
    bottom: 62px;
}
/* Sposta l'indicatore zoom */
body.has-page-bar #zoom-indicator {
    bottom: 108px;
}

/* Indicatore zoom — mostra il livello di zoom corrente */
#zoom-indicator {
    position: fixed;
    bottom: 70px;
    right: 16px;
    background: rgba(30,41,59,0.85);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
#zoom-indicator.visible {
    opacity: 1;
}

/* Badge zoom fisso — centrato nella page-bar in basso a destra */
#zoom-badge {
    position: fixed;
    bottom: 9px;        /* centra verticalmente nella page-bar (h≈38px) */
    right: 24px;
    width: 52px;
    background: transparent;
    border: none;
    padding: 2px 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(71, 85, 105, 0.95);
    z-index: 200;
    cursor: pointer;
    user-select: none;
    text-align: center;
    line-height: 1;
}
body:not(.has-page-bar) #zoom-badge {
    bottom: 4px;        /* fallback senza page-bar */
}
#zoom-badge:hover {
    color: #3b82f6;
}
/* =============================================
   DRIVE FAB — Floating Action Button
   ============================================= */

/* Wrapper fisso per il FAB + badge auto-save */
#drive-fab-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 600;
    /* Necessario per posizionare il badge ::before e il ring */
}

/* Anello rotante (stato saving) */
#drive-fab-wrapper.autosave-saving #drive-fab::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #22c55e;
    animation: spin 1s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Badge checkmark salvato */
#drive-fab-wrapper .autosave-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #22c55e;
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(15, 23, 42, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}
#drive-fab-wrapper.autosave-saved .autosave-badge {
    opacity: 1;
}

/* Stato pending: box-shadow gialla pulsante */
#drive-fab-wrapper.autosave-pending #drive-fab {
    box-shadow: 0 0 0 3px #f59e0b, 0 4px 16px rgba(0,0,0,0.4);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.drive-fab {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(148, 163, 184, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    user-select: none;
}
.drive-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.drive-fab:active {
    transform: scale(0.96);
}

/* Stato: connesso — bordo verde */
.drive-fab.drive-fab--connected {
    border-color: #22c55e;
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.drive-fab-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(226, 232, 240, 0.8);
}

/* Badge puntino verde connessione */
.drive-fab-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid rgba(15, 23, 42, 0.9);
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

/* Status header */
.drive-status-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.8);
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drive-status-header.drive-status--connected {
    color: #86efac;
}
.drive-status-header svg {
    flex-shrink: 0;
    stroke: #86efac;
}

/* ===== LIBRERIA — lezione corrente evidenziata ===== */
.lesson-item--active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-left: 3px solid #3b82f6;
    color: var(--accent) !important;
    font-weight: 600;
}

/* =============================================================================
   TOOLBAR TOP ROW — riga con mini-color-bar + linguetta toggle fianco a fianco
   ============================================================================= */
#toolbar-top-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;               /* spazio tra le mini-bar e la linguetta */
    padding-bottom: 0;
}

/* =============================================================================
   MINI COLOR BAR — a SINISTRA della freccia, visibile solo toolbar chiusa
   MINI SIZE BAR  — a DESTRA della freccia, stessa condizione
   ============================================================================= */

/* Stile base condiviso — pillola flottante, staccata dalla linguetta */
#mini-color-bar,
#mini-size-bar {
    display: none;           /* nascosta di default, JS la mostra con flex */
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    height: 36px;            /* altezza fissa uguale per entrambe */
    box-sizing: border-box;
    background: rgba(10, 18, 35, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;     /* pillola completa — staccata dalla linguetta */
    margin-bottom: 6px;      /* galleggia sopra il bordo inferiore */
    touch-action: none;
    transition: background 0.2s;
}

/* Pallini colore — stessa altezza dei pulsanti dimensione */
.mini-color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.22);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    touch-action: manipulation;
    padding: 0;
    flex-shrink: 0;
}
.mini-color-dot:active { transform: scale(0.82); }
.mini-color-dot.active {
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.65);
}

/* Pulsanti dimensione — icone linea SVG, stessa altezza dei pallini */
.mini-size-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    color: rgba(255,255,255,0.55);
    touch-action: manipulation;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.mini-size-btn:active { transform: scale(0.85); }
.mini-size-btn.active {
    color: rgba(255,255,255,0.95);
    background: rgba(59,130,246,0.30);
    border-color: rgba(59,130,246,0.55);
}
.mini-size-btn:hover:not(.active) {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.08);
}

/* Popup zoom — si apre sopra il badge */
#zoom-popup {
    position: fixed;
    bottom: 48px;
    right: 12px;
    background: var(--surface, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
#zoom-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text, #e2e8f0);
    font-size: 0.9rem;
    font-weight: 600;
    width: 4ch;
    text-align: right;
    /* Nessuna freccia spinner */
    -moz-appearance: textfield;
}
#zoom-input::-webkit-outer-spin-button,
#zoom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.zoom-popup-pct {
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
}
#zoom-reset-btn {
    background: var(--accent, #3b82f6);
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    cursor: pointer;
    margin-left: 4px;
    white-space: nowrap;
}
#zoom-reset-btn:hover {
    background: #2563eb;
}