/* Rajdhani */
@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/Rajdhani-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/Rajdhani-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rajdhani';
  src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* DM Sans */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

        :root {
            --neon-cyan: #00fff2;
            --neon-cyan-rgb: 0,255,242;
            --neon-pink: #ff00ff;
            --bg-dark: #050b14;
            --bg-drawer: #0d1626;
            --bg-panel: #0a1120;
            --topbar-h: 46px;
            --bottombar-h: 68px;
            /* Valori default condivisi (cyberpunk è il tema base) */
            --grad-rgb-1: 0, 255, 242;
            --grad-rgb-2: 188, 19, 254;
            --alt-color: #ffffff;
            --title-grad: linear-gradient(to right, #00fff2 0%, white 50%, #ff00ff 100%);
            --neon-pink-dark: #c000c0;
            --neon-pink-glow: rgba(255,0,255,0.45);
            --btn-primary-text: #fff;
            --ui-active: #00fff2;
            --ui-active-rgb: 0,255,242;
        }

        /* PALETTE: RETROWAVE */
        :root[data-palette="retrowave"] {
            --grad-rgb-1: 222, 26, 88;
            --grad-rgb-2: 246, 125, 49;
            --neon-cyan: #DE1A58;
            --neon-cyan-rgb: 222,26,88;
            --neon-pink: #F67D31;
            --bg-dark: #07011a;
            --bg-drawer: #130838;
            --bg-panel: #0f0230;
            --alt-color: #F67D31;
            --title-grad: linear-gradient(to right, #1A05A2 0%, #DE1A58 50%, #F67D31 100%);
            --neon-pink-dark: #c55a10;
            --neon-pink-glow: rgba(246,125,49,0.45);
            --btn-primary-text: #fff;
            --ui-active: #DE1A58;
            --ui-active-rgb: 222,26,88;
        }

        /* PALETTE: SWITCH */
        :root[data-palette="switch"] {
            --grad-rgb-1: 8, 217, 214;
            --grad-rgb-2: 255, 46, 99;
            --neon-cyan: #08D9D6;
            --neon-cyan-rgb: 8,217,214;
            --neon-pink: #FF2E63;
            --bg-dark: #252A34;
            --bg-drawer: #303845;
            --bg-panel: #2e3446;
            --alt-color: #FF2E63;
            --title-grad: linear-gradient(to right, #08D9D6 0%, #EAEAEA 50%, #FF2E63 100%);
            --neon-pink-dark: #c0003d;
            --neon-pink-glow: rgba(255,46,99,0.45);
            --btn-primary-text: #fff;
            --ui-active: #08D9D6;
            --ui-active-rgb: 8,217,214;
        }

        /* PALETTE: CIOCCOLATO */
        :root[data-palette="cioccolato"] {
            --grad-rgb-1: 192, 133, 82;
            --grad-rgb-2: 75, 46, 43;
            --neon-cyan: #FFF8F0;
            --neon-cyan-rgb: 255,248,240;
            --neon-pink: #C08552;
            --bg-dark: #4B2E2B;
            --bg-drawer: #6a3e3a;
            --bg-panel: #5e3a36;
            --alt-color: #C08552;
            --title-grad: linear-gradient(to right, #FFF8F0 0%, #C08552 50%, #8C5A3C 100%);
            --neon-pink-dark: #8C5A3C;
            --neon-pink-glow: rgba(192,133,82,0.45);
            --btn-primary-text: #FFF8F0;
            --ui-active: #FFF8F0;
            --ui-active-rgb: 255,248,240;
        }

        /* PALETTE: HALLOWEEN */
        :root[data-palette="halloween"] {
            --grad-rgb-1: 250, 129, 18;
            --grad-rgb-2: 34, 34, 34;
            --neon-cyan: #FA8112;
            --neon-cyan-rgb: 250,129,18;
            --neon-pink: #FA8112;
            --bg-dark: #222222;
            --bg-drawer: #333333;
            --bg-panel: #2e2e2e;
            --alt-color: #FAF3E1;
            --title-grad: linear-gradient(to right, #FA8112 0%, #FAF3E1 50%, #FA8112 100%);
            --neon-pink-dark: #c55a00;
            --neon-pink-glow: rgba(250,129,18,0.45);
            --btn-primary-text: #111;
            --ui-active: #FA8112;
            --ui-active-rgb: 250,129,18;
        }

        /* PALETTE: PASTELLO */
        :root[data-palette="pastello"] {
            --grad-rgb-1: 221, 174, 211;
            --grad-rgb-2: 101, 148, 177;
            --neon-cyan: #DDAED3;
            --neon-cyan-rgb: 221,174,211;
            --neon-pink: #DDAED3;
            --bg-dark: #213C51;
            --bg-drawer: #2d4f6a;
            --bg-panel: #2d4f6a;
            --alt-color: #EEEEEE;
            --title-grad: linear-gradient(to right, #DDAED3 0%, #EEEEEE 50%, #6594B1 100%);
            --neon-pink-dark: #b07aa0;
            --neon-pink-glow: rgba(221,174,211,0.45);
            --btn-primary-text: #213C51;
            --ui-active: #DDAED3;
            --ui-active-rgb: 221,174,211;
        }

        /* PALETTE: GIUNGLA */
        :root[data-palette="giungla"] {
            --grad-rgb-1: 157, 192, 139;
            --grad-rgb-2: 64, 81, 59;
            --neon-cyan: #9DC08B;
            --neon-cyan-rgb: 157,192,139;
            --neon-pink: #609966;
            --bg-dark: #2a3528;
            --bg-drawer: #354530;
            --bg-panel: #40513B;
            --alt-color: #EDF1D6;
            --title-grad: linear-gradient(to right, #9DC08B 0%, #EDF1D6 50%, #609966 100%);
            --neon-pink-dark: #40513B;
            --neon-pink-glow: rgba(96,153,102,0.45);
            --btn-primary-text: #EDF1D6;
            --ui-active: #9DC08B;
            --ui-active-rgb: 157,192,139;
        }

        /* PALETTE: ELETTRICO */
        :root[data-palette="elettrico"] {
            --grad-rgb-1: 244, 206, 20;
            --grad-rgb-2: 69, 71, 75;
            --neon-cyan: #F4CE14;
            --neon-cyan-rgb: 244,206,20;
            --neon-pink: #F4CE14;
            --bg-dark: #1c1d1f;
            --bg-drawer: #2a2b2e;
            --bg-panel: #2a2b2e;
            --alt-color: #F5F7F8;
            --title-grad: linear-gradient(to right, #F4CE14 0%, #F5F7F8 50%, #F4CE14 100%);
            --neon-pink-dark: #c9a800;
            --neon-pink-glow: rgba(244,206,20,0.45);
            --btn-primary-text: #1c1d1f;
            --ui-active: #F4CE14;
            --ui-active-rgb: 244,206,20;
        }

        /* PALETTE: CARAMELLA */
        :root[data-palette="caramella"] {
            --grad-rgb-1: 255, 63, 127;
            --grad-rgb-2: 255, 196, 0;
            --neon-cyan: #FF3F7F;
            --neon-cyan-rgb: 255,63,127;
            --neon-pink: #FF3F7F;
            --bg-dark: #1a0035;
            --bg-drawer: #250048;
            --bg-panel: #250048;
            --alt-color: #FFC400;
            --title-grad: linear-gradient(to right, #FF3F7F 0%, #FFC400 50%, #8C00FF 100%);
            --neon-pink-dark: #cc0055;
            --neon-pink-glow: rgba(255,63,127,0.45);
            --btn-primary-text: #fff;
            --ui-active: #FF3F7F;
            --ui-active-rgb: 255,63,127;
        }

        /* PALETTE: FERRARI */
        :root[data-palette="ferrari"] {
            --grad-rgb-1: 218, 0, 55;
            --grad-rgb-2: 68, 68, 68;
            --neon-cyan: #DA0037;
            --neon-cyan-rgb: 218,0,55;
            --neon-pink: #DA0037;
            --bg-dark: #171717;
            --bg-drawer: #242424;
            --bg-panel: #222222;
            --alt-color: #EDEDED;
            --title-grad: linear-gradient(to right, #DA0037 0%, #EDEDED 50%, #DA0037 100%);
            --neon-pink-dark: #a00028;
            --neon-pink-glow: rgba(218,0,55,0.45);
            --btn-primary-text: #fff;
            --ui-color: #cccccc;
            --ui-color-rgb: 204,204,204;
            --ui-active: #FF2244;
            --ui-active-rgb: 255,34,68;
        }

        /* PALETTE: CYBERPUNK */
        :root[data-palette="cyberpunk"] {
            --grad-rgb-1: 0, 255, 242;
            --grad-rgb-2: 188, 19, 254;
            --neon-cyan: #00fff2;
            --neon-cyan-rgb: 0,255,242;
            --neon-pink: #ff00ff;
            --bg-dark: #050b14;
            --bg-drawer: #0d1626;
            --bg-panel: #0a1120;
            --alt-color: #ffffff;
            --title-grad: linear-gradient(to right, #00fff2 0%, white 50%, #ff00ff 100%);
            --neon-pink-dark: #c000c0;
            --neon-pink-glow: rgba(255,0,255,0.45);
            --btn-primary-text: #fff;
            --ui-active: #00fff2;
            --ui-active-rgb: 0,255,242;
        }


        * {
            touch-action: manipulation;
        }

        html, body {
            touch-action: manipulation;
        }

        body {
            font-family: 'Rajdhani', sans-serif;
            background-color: var(--bg-dark);
            color: #e2e8f0;
            transition: background 0.3s ease, color 0.3s ease;
            background-image:
                radial-gradient(circle at 10% 20%, rgba(var(--grad-rgb-1), var(--grad-opacity, 0.05)) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(var(--grad-rgb-2), var(--grad-opacity, 0.05)) 0%, transparent 20%);
        }

        .cyber-container {
            background: var(--bg-panel);
            border: 1px solid rgba(var(--neon-cyan-rgb),0.2);
            box-shadow: 0 0 15px rgba(var(--neon-cyan-rgb, 0,255,242), 0.1), inset 0 0 20px rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }

        /* --- STILE KBD --- */
        kbd {
            display: inline-block;
            padding: 2px 10px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--neon-cyan);
            background: rgba(var(--neon-cyan-rgb, 0,255,242), 0.05);
            border: 1px solid rgba(var(--neon-cyan-rgb, 0,255,242), 0.4);
            border-radius: 6px;
            box-shadow: 0 0 8px rgba(var(--neon-cyan-rgb),0.2);
            margin: 0 4px;
            text-transform: uppercase;
        }

        /* --- BOTTONI --- */
        .cyber-button {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 0.82rem;
            letter-spacing: 0.03em;
            padding: 11px 24px;
            border-radius: 10px;
            cursor: pointer;
            transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
            display: inline-flex; align-items: center; justify-content: center;
            gap: 8px;
            white-space: nowrap;
            background: rgba(var(--ui-color-rgb, var(--neon-cyan-rgb, 0,255,242)), 0.04);
            color: var(--ui-color, var(--neon-cyan));
            border: 1px solid rgba(var(--ui-color-rgb, var(--neon-cyan-rgb, 0,255,242)), 0.25);
            text-transform: uppercase;
            opacity: 0.75;
        }

        .cyber-button:hover:not(:disabled) {
            border-color: rgba(var(--ui-color-rgb, var(--neon-cyan-rgb, 0,255,242)), 0.6);
            opacity: 1;
            box-shadow: 0 0 12px rgba(var(--ui-color-rgb, var(--neon-cyan-rgb, 0,255,242)), 0.15);
        }
        .cyber-button:active { opacity: 0.6; }

        .button-primary {
            background: linear-gradient(135deg, var(--neon-pink), var(--neon-pink-dark)) !important;
            color: var(--btn-primary-text, #fff) !important;
            border: none !important;
            font-weight: 600 !important;
        }
        .button-primary:hover:not(:disabled) {
            box-shadow: 0 0 20px var(--neon-pink-glow) !important;
            color: var(--btn-primary-text, #fff) !important;
        }

        .cyber-toast {
            position: fixed; top: 20px; right: 20px;
            background: var(--bg-panel); border-left: 4px solid var(--neon-cyan);
            color: var(--neon-cyan); padding: 15px 25px; border-radius: 4px;
            box-shadow: 0 0 20px rgba(var(--neon-cyan-rgb, 0,255,242), 0.3); z-index: 1001;
            font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
            font-size: 0.75rem; pointer-events: none;
        }

        .cyber-toast--undo {
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 16px 12px 20px;
        }

        .cyber-toast__undo {
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            background: rgba(var(--neon-cyan-rgb), 0.15);
            border: 1px solid rgba(var(--neon-cyan-rgb), 0.5);
            color: var(--neon-cyan);
            padding: 4px 12px;
            border-radius: 6px;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: background 0.15s;
        }
        .cyber-toast__undo:hover {
            background: rgba(var(--neon-cyan-rgb), 0.3);
        }

        @media (max-width: 1023px) {
            .cyber-toast {
                top: var(--topbar-h);
                right: 0; left: 0;
                border-radius: 0;
                border-left: none;
                border-bottom: 2px solid var(--neon-cyan);
                text-align: center;
                padding: 10px 16px;
                font-size: 0.68rem;
            }
            .cyber-toast--undo {
                justify-content: center;
            }
        }

        /* Arancione per Carica DB */
        .button-orange {
            background: linear-gradient(135deg, #f97316, #ea580c) !important;
            color: #fff !important;
            border: none !important;
        }
        .button-orange:hover:not(:disabled) {
            box-shadow: 0 0 18px rgba(249,115,22,0.4) !important;
            color: #fff !important;
        }

        /* Verde per Manuale */
        .button-green {
            background: linear-gradient(135deg, #22c55e, #16a34a) !important;
            color: #fff !important;
            border: none !important;
        }
        .button-green:hover:not(:disabled) {
            box-shadow: 0 0 18px rgba(34,197,94,0.35) !important;
            color: #fff !important;
        }

        .cyber-input {
            background: rgba(var(--neon-cyan-rgb, 0,255,242), 0.03) !important;
            border: 1px solid rgba(var(--neon-cyan-rgb, 0,255,242), 0.15) !important;
            color: var(--neon-cyan) !important; outline: none;
        }

        .cursor-edit:hover {
            background: rgba(var(--neon-cyan-rgb, 0,255,242), 0.05);
            cursor: text;
        }


        /* ══ MOBILE ONLY ══ */
        @media (max-width: 1023px) {
            html, body { height: 100dvh; overflow: hidden; padding: 0 !important; margin: 0; }
            .desktop-only { display: none !important; }

            #mobileTopbar {
                position: fixed; top: 0; left: 0; right: 0;
                height: var(--topbar-h);
                display: flex; align-items: center; justify-content: space-between;
                padding: 0 14px;
                background: var(--bg-dark);
                border-bottom: 1px solid rgba(var(--ui-color-rgb, var(--neon-cyan-rgb)),0.15);
                z-index: 50;
            }
            #mobileTopbar h1 {
                font-size: 0.82rem; font-weight: 800;
                letter-spacing: 0.14em; text-transform: uppercase;
                background: var(--title-grad);
                -webkit-background-clip: text; background-clip: text;
                color: transparent; white-space: nowrap;
                display: inline-block;
            }
            #displayArea {
                position: fixed !important;
                top: var(--topbar-h) !important; left: 0 !important;
                right: 0 !important; bottom: var(--bottombar-h) !important;
                height: auto !important;
                border-radius: 0 !important;
                border-left: none !important; border-right: none !important;
                padding: 16px !important;

            }
            #mobileBottombar {
                position: fixed; bottom: 0; left: 0; right: 0;
                height: var(--bottombar-h);
                display: flex; align-items: center; gap: 8px; padding: 0 10px;
                background: var(--bg-dark);
                border-top: 1px solid rgba(var(--ui-color-rgb, var(--neon-cyan-rgb)),0.15);
                z-index: 50;
            }
            .mob-counter {
                display: flex; align-items: center;
                background: var(--bg-panel);
                border: 1px solid rgba(var(--ui-color-rgb, var(--neon-cyan-rgb)),0.2);
                border-radius: 999px; padding: 0 6px;
                height: 46px; flex-shrink: 0;
            }
            .mob-counter button {
                width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
                color: var(--ui-color, var(--neon-cyan)); font-size: 1.3rem; font-weight: bold;
                background: none; border: none; font-family: 'Rajdhani', sans-serif;
            }
            .mob-counter input {
                background: transparent; border: none; width: 26px; text-align: center;
                color: var(--ui-color, var(--neon-cyan)); font-weight: bold; font-size: 1.05rem;
                outline: none; font-family: 'Rajdhani', sans-serif;
            }
            #menuBtn {
                width: 46px; height: 46px; flex-shrink: 0;
                display: flex; align-items: center; justify-content: center;
                background: var(--bg-panel); border: 1px solid rgba(var(--ui-color-rgb, var(--neon-cyan-rgb)),0.2);
                border-radius: 10px; color: var(--ui-color, var(--neon-cyan));
            }
            #drawerOverlay {
                position: fixed; inset: 0; z-index: 48;
                background: rgba(0,0,0,0.55); display: none;
            }
            #drawerOverlay.open { display: block; }
            #drawer {
                position: fixed; bottom: var(--bottombar-h); left: 0; right: 0;
                background: var(--bg-drawer);
                border-top: 1px solid rgba(var(--neon-cyan-rgb, 0,255,242),0.2);
                border-radius: 18px 18px 0 0; z-index: 49;
                transform: translateY(100%);
                transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
                max-height: calc(100dvh - var(--topbar-h) - var(--bottombar-h));
                overflow-y: auto; padding: 10px 14px 18px;
                will-change: transform;
                touch-action: pan-x;
            }
            #drawer.open { transform: translateY(0); }
            #drawerOverlay { transition: opacity 0.28s ease; }
            .drawer-handle {
                width: 36px; height: 4px;
                background: rgba(var(--neon-cyan-rgb),0.2);
                border-radius: 2px; margin: 0 auto 12px;
            }
        }
        @media (min-width: 1024px) {
            #mobileTopbar, #mobileBottombar, #drawer, #drawerOverlay { display: none !important; }
            body { display: block; }
        }
        .palette-select {
            background: var(--bg-dark) !important;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 6px;
            padding: 2px 6px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ui-color, var(--neon-cyan));
            outline: none;
            cursor: pointer;
        }


        /* ══ EDITOR MODAL ══ */

        #editorModal {
            display: none !important;
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg-dark); z-index: 100;
            overflow: hidden;
        }
        #editorModal.editor-open {
            display: flex !important;
            flex-direction: column;
        }
        #editorModal > div {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            padding: 1rem;
        }
        #addSection {
            flex-shrink: 0;
        }
        #tableContainer {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        /* Mobile: sezione aggiungi nascosta di default */
        @media (max-width: 1023px) {
            #addSection { display: none; }
            #addSection.add-open { display: grid; }
            #editorModal > div { padding: 0.75rem; }
        }

        /* ══ MOBILE TABLE OVERRIDES ══ */
        @media (max-width: 1023px) {
            #tableContainer thead th:nth-child(2),
            #tableContainer thead th:nth-child(3) { display: none; }

            #wordTableBody td:first-child {
                width: 100%;
                max-width: 1px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            #wordTableBody td:nth-child(2) {
                width: 28px;
                min-width: 28px;
                max-width: 28px;
                text-align: right;
                padding-right: 12px;
                white-space: nowrap;
                overflow: visible;
                text-overflow: clip;
            }
            #wordTableBody td:nth-child(3) { display: none; }
        }

        .animate-fade { animation: bounce-in 0.3s ease-out; }
        @keyframes bounce-in { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }

        /* ══ THEME-AWARE UTILITY CLASSES ══ */

        /* Testi */
        .theme-label       { color: var(--ui-active, var(--neon-cyan)); opacity: 0.9; }
        .theme-muted       { color: var(--ui-color, var(--neon-cyan)); opacity: 0.4; }
        .theme-text        { color: var(--alt-color); opacity: 0.85; }
        .theme-waiting     { color: var(--neon-cyan); opacity: 0.25; font-style: italic; }

        /* Sfondi */
        .theme-panel-dark  { background: rgba(0,0,0,0.2); }
        .theme-panel-mid   { background: rgba(0,0,0,0.15); }
        .theme-row-hover:hover { background: rgba(var(--neon-cyan-rgb),0.04); }

        /* Bordi */
        .theme-border      { border-color: rgba(var(--neon-cyan-rgb),0.2) !important; }
        .theme-divide > * + * { border-top: 1px solid rgba(var(--neon-cyan-rgb),0.1); }

        /* Filtri categoria — stato inattivo */
        .theme-tag-inactive {
            background: rgba(var(--ui-color-rgb, var(--neon-cyan-rgb)),0.05);
            color: var(--ui-color, var(--neon-cyan));
            border-color: rgba(var(--ui-color-rgb, var(--neon-cyan-rgb)),0.2);
            opacity: 0.65;
        }
        /* Filtri categoria — stato attivo */
        .theme-tag-active {
            background: rgba(var(--ui-active-rgb),0.15);
            color: var(--ui-active);
            border-color: rgba(var(--ui-active-rgb),0.7);
            opacity: 1;
            box-shadow: 0 0 10px rgba(var(--ui-active-rgb),0.25);
        }

        /* Drag-over sui filtri tag */
        .tag-drag-over {
            border-color: rgba(var(--neon-cyan-rgb), 0.9) !important;
            box-shadow: 0 0 12px rgba(var(--neon-cyan-rgb), 0.4), inset 0 0 6px rgba(var(--neon-cyan-rgb), 0.1) !important;
            opacity: 1 !important;
        }

        /* Tag nell'editor */
        .theme-tag-chip {
            background: rgba(var(--neon-cyan-rgb),0.08);
            color: var(--neon-cyan);
            opacity: 0.7;
        }

        /* Input editabile */
        .theme-editable {
            color: var(--alt-color);
        }
        .theme-editable:focus {
            color: var(--neon-cyan);
            background: rgba(var(--neon-cyan-rgb),0.06);
        }

        /* KBD */
        .theme-kbd {
            background: rgba(var(--ui-color-rgb, var(--neon-cyan-rgb)),0.05);
            border-color: rgba(var(--ui-color-rgb, var(--neon-cyan-rgb)),0.3);
            color: var(--ui-color, var(--neon-cyan));
        }

        /* ══ EDITOR: righe fisse, no scroll mai, pagination fissa ══ */

        #wordTableBody tr { height: 52px; }
        #wordTableBody td {
            height: 52px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            max-width: 0;
        }
        #wordTableBody td:first-child { width: 35%; }
        #wordTableBody td:nth-child(2) { width: 50%; }
        #wordTableBody td:nth-child(3) { width: 15%; max-width: none; }

        #wordTableBody [contenteditable] {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
            width: 100%;
        }
        #wordTableBody [contenteditable]:focus {
            overflow: visible;
            text-overflow: clip;
            white-space: nowrap;
            position: relative;
            z-index: 1;
        }
        #wordTableBody td:nth-child(2) > div {
            display: flex;
            flex-wrap: nowrap;
            overflow: hidden;
            gap: 4px;
            align-items: center;
        }

        #tableContainer .overflow-x-auto { overflow: hidden !important; }

        #tableContainer {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        #paginationBar {
            flex-shrink: 0;
            margin-top: 12px;
        }

        @media (max-width: 1023px) {
            #addSection.add-open ~ #tableContainer {
                display: none !important;
            }
        }

        /* ══ MOBILE DETAIL SCREEN ══ */
        #mobileDetailScreen {
            display: none;
            position: absolute;
            inset: 0;
            background: var(--bg-dark);
            z-index: 200;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.25s ease;
        }
        #mobileDetailScreen.open {
            display: flex;
            transform: translateX(0);
        }
        #mobileDetailHeader {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(var(--neon-cyan-rgb), 0.15);
            flex-shrink: 0;
        }
        #mobileDetailBack {
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--neon-cyan);
            background: none;
            border: none;
            cursor: pointer;
            opacity: 0.7;
        }
        #mobileDetailTitle {
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--neon-cyan);
        }
        #mobileDetailBody {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        #mobileDetailFooter {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
            border-top: 1px solid rgba(var(--neon-cyan-rgb), 0.15);
            flex-shrink: 0;
        }

        @media (max-width: 1023px) {
            #editorModal {
                position: fixed;
                overflow: hidden;
            }
        }
        @media (min-width: 1024px) {
            #mobileDetailScreen { display: none !important; }
            .mobile-row-arrow { display: none !important; }
        }

        /* ══ PAGINATION FISSA IN FONDO ══ */
        #tableContainer {
            position: relative;
            display: flex;
            flex-direction: column;
        }
        #tableContainer .overflow-x-auto {
            flex: 1;
            overflow: hidden !important;
        }
        #paginationBar {
            flex-shrink: 0;
            margin-top: 12px;
        }

        /* ── AUTO TIMER ── */
        .timer-panel {
            background: rgba(var(--neon-cyan-rgb), 0.04);
            border: 1px solid rgba(var(--neon-cyan-rgb), 0.15);
            border-radius: 12px;
            padding: 10px 12px;
        }

        #autoTimerBarWrapper {
            align-items: center;
            gap: 10px;
            padding: 0 2px;
            margin-bottom: 2px;
        }

        /* Barra timer mobile: nascosta su desktop */
        @media (min-width: 1024px) {
            #mobileTimerBarWrapper { display: none !important; }
        }