/* ============================================================================
   HST-Paper-Lab — Stylesheet module
   ============================================================================
   FASE 2.0 (3.5.410D): extracted verbatim from HST-Paper-Lab.html's own
   former inline <style> block (10,807 lines, byte-identical content, only
   moved) as the first step of an incremental modularization — see
   HST-Paper-Lab-Revision-History.md's own 3.5.410D entry and
   AI-COLLABORATION.md's CURRENT VERSION section for the full plan
   (Core Trainer Engine, then Data Model + Backup/Restore, then Class
   Sync, then Advisor/Student/Class Hub last).

   Loaded via a single <link rel="stylesheet" href="hst-styles.css"> in
   HST-Paper-Lab.html's own <head>. Deployed alongside it by
   .github/workflows/deploy-hst-paper.yml, which recognizes any
   hst-*.css/hst-*.js file by naming convention (no separate whitelist
   edit needed for future module files).
   ============================================================================ */

        /* --- CSS variables — Core design tokens --- */
        /* 
           -------------------------------------------------------------------------
           1. CORE DESIGN TOKENS (DESIGN SYSTEM)
           -------------------------------------------------------------------------
        */
        :root {
            /* Brand Identity Colors */
            --accent-blue: 
                #3b82f6;
            --accent-load: 
                #6366f1; 
            --neon-orange: 
                #f97316; 
            --btn-green: 
                #16a34a; 
            --btn-green-hover: 
                #15803d;
            --btn-red-danger: 
                #ef4444; 
            --btn-red-hover: 
                #dc2626;
            --correction-red: 
                #ff3131;
            
            /* Sizing & Geometry Tokens */
            --radius-lg: 
                14px;
            --radius-md: 
                10px;
            --ctrl-height: 
                54px;
            --mode-option-height: 
                140px; 
            --border-width-dashed: 
                2px;

            /* PROFESSIONAL REDESIGN: shared shadow / shine tokens */
            --shadow-card: 
                0 10px 30px -8px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.15);
            --shadow-card-hover:
                0 16px 40px -10px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.2);
            --shadow-inset-shine:
                inset 0 1px 0 rgba(255,255,255,0.18);
            --glass-shine:
                linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 45%);
        }

        /* --- CSS variables — Dark theme --- */
        /* 
           DARK THEME CONFIGURATION 
        */
        [data-theme="dark"] {
            --bg-deep: 
                #0b1220;
            --bg-gradient: 
                radial-gradient(at 15% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 55%), 
                radial-gradient(at 100% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
                radial-gradient(at 50% 100%, rgba(20, 184, 166, 0.06) 0px, transparent 60%);
            --glass-bg: 
                rgba(15, 23, 42, 0.75);
            --glass-blue: 
                rgba(30, 58, 95, 0.45);
            --glass-blue-light: 
                rgba(59, 130, 246, 0.25);
            --glass-border: 
                rgba(255, 255, 255, 0.15);
            --text-main: 
                #f1f5f9;
            --text-muted: 
                #94a3b8;
            --gold-active: 
                #fcd34d; 
            --acc-bright: 
                #4ade80; 
            --cell-bg-active: 
                #020617;
            --input-bg: 
                rgba(15, 23, 42, 0.85);
            --paper-bg: 
                rgba(255, 255, 255, 0.03);
            --btn-reset: 
                #334155;
            --char-correct-grey: 
                rgba(255, 255, 255, 0.15);
            --glass-correct-bg: 
                rgba(21, 128, 61, 0.4);
            --glass-wrong-bg: 
                rgba(185, 28, 28, 0.5);
            --wrong-bg-1:
                rgba(185, 28, 28, 0.12);
            --wrong-bg-2:
                rgba(185, 28, 28, 0.22);
            --wrong-bg-3:
                rgba(185, 28, 28, 0.32);
            --wrong-bg-4:
                rgba(185, 28, 28, 0.41);
            --wrong-bg-5:
                rgba(185, 28, 28, 0.5);
            --wrong-border-1:
                rgba(239, 68, 68, 0.3);
            --wrong-border-2:
                rgba(239, 68, 68, 0.48);
            --wrong-border-3:
                rgba(239, 68, 68, 0.65);
            --wrong-border-4:
                rgba(239, 68, 68, 0.82);
            --wrong-border-5:
                #ef4444;
            --orange-border: 
                #f97316;
            --flag-ui-border: 
                rgba(255, 255, 255, 0.5);
            --current-rx-border: #707070;
        }

        /* --- CSS variables — Light theme --- */
        /* 
           DAY THEME CONFIGURATION 
        */
        [data-theme="light"] {
            --bg-deep: 
                #dbe4ee;
            --bg-gradient: 
                radial-gradient(at 10% 0%, rgba(59,130,246,0.10) 0px, transparent 55%),
                linear-gradient(135deg, #dbe4ee 0%, #eef2f7 100%);
            --glass-bg: 
                rgba(255, 255, 255, 0.7);
            --glass-blue: 
                rgba(241, 245, 249, 0.8);
            --glass-blue-light: 
                rgba(59, 130, 246, 0.1);
            --glass-border: 
                rgba(15, 23, 42, 0.45); 
            --text-main: 
                #0f172a;
            --text-muted: 
                #475569;
            --gold-active: 
                #b45309; 
            --acc-bright: 
                #15803d; 
            --cell-bg-active: 
                #ffffff;
            --input-bg: 
                rgba(255, 255, 255, 0.95);
            --paper-bg: 
                rgba(0, 0, 0, 0.03);
            --btn-reset: 
                #64748b;
            --char-correct-grey: 
                rgba(0, 0, 0, 0.2);
            --glass-correct-bg: 
                rgba(34, 197, 94, 0.25);
            --glass-wrong-bg: 
                rgba(239, 68, 68, 0.25);
            --wrong-bg-1:
                rgba(239, 68, 68, 0.08);
            --wrong-bg-2:
                rgba(239, 68, 68, 0.13);
            --wrong-bg-3:
                rgba(239, 68, 68, 0.18);
            --wrong-bg-4:
                rgba(239, 68, 68, 0.22);
            --wrong-bg-5:
                rgba(239, 68, 68, 0.25);
            --wrong-border-1:
                rgba(220, 38, 38, 0.3);
            --wrong-border-2:
                rgba(220, 38, 38, 0.48);
            --wrong-border-3:
                rgba(220, 38, 38, 0.65);
            --wrong-border-4:
                rgba(220, 38, 38, 0.82);
            --wrong-border-5:
                #ef4444;
            --orange-border: 
                #ea580c;
            --flag-ui-border: 
                rgba(0, 0, 0, 0.4);
            --current-rx-border: #ffffff;
        }

        /* --- Global UI reset --- */
        /* 
           -------------------------------------------------------------------------
           2. GLOBAL UI RESET 
           -------------------------------------------------------------------------
        */
        * { 
            box-sizing: 
                border-box; 
            -webkit-font-smoothing: 
                antialiased; 
        }

        /* --- Desktop layout --- */
        body {
            font-family: 
                'IBM Plex Sans', 
                sans-serif;
            padding: 
                20px;
            background-color: 
                var(--bg-deep);
            background-image: 
                var(--bg-gradient);
            min-width: 
                1280px;
            color: 
                var(--text-main);
            margin: 
                0;
            overflow-x: 
                hidden;
            transition: 
                background 0.4s ease, 
                color 0.4s ease;
        }

        h1, h2 { 
            font-family: 
                'Big Shoulders Display', 
                sans-serif; 
            text-transform: 
                uppercase; 
            margin: 
                0; 
            letter-spacing: 
                1px;
        }

        label, 
        select, 
        input, 
        .stat-value, 
        .reveal, 
        #timerDisplay, 
        .nameplate-caption, 
        table, 
        .err-postit, 
        .btn { 
            font-family: 
                'IBM Plex Mono', 
                monospace; 
        }

        /* --- Container components — Glassmorphism --- */
        /* 
           -------------------------------------------------------------------------
           3. CONTAINER COMPONENTS (GLASSMORPHISM)
           -------------------------------------------------------------------------
        */
        .nameplate, 
        .admin-dashboard, 
        .header-controls {
            max-width: 
                1200px;
            margin-left: 
                auto;
            margin-right: 
                auto;
            margin-bottom: 
                25px;
            background-color: 
                var(--glass-bg); 
            background-image:
                var(--glass-shine);
            backdrop-filter: 
                blur(16px) saturate(140%); 
            border-width: 
                var(--border-width-dashed);
            border-style: 
                dashed;
            border-color: 
                var(--glass-border); 
            border-radius: 
                var(--radius-lg);
            transition: 
                all 0.3s ease;
            box-shadow:
                var(--shadow-card);
            position:
                relative;
        }

        .nameplate {
            padding:
                25px 45px;
            display:
                flex;
            justify-content:
                space-between;
            align-items:
                center;
            background-color: var(--glass-bg);
            background-image: var(--glass-shine);
            border-radius: var(--radius-lg);
            border-width: var(--border-width-dashed);
            border-style: dashed;
            border-color: var(--glass-border);
            box-shadow: var(--shadow-card);
        }

        [data-theme="dark"] .nameplate {
            /* TEACHER BUILD: distinct dark-grey header for dark mode */
            background-color: #141b28;
            background-image:
                radial-gradient(at 20% 0%, rgba(59,130,246,0.28), transparent 55%),
                radial-gradient(at 100% 100%, rgba(99,102,241,0.20), transparent 55%),
                linear-gradient(135deg, #1b2432, #10151f 70%);
            border-color: rgba(255,255,255,0.2);
            box-shadow:
                0 14px 34px -10px rgba(0,0,0,0.55), var(--shadow-inset-shine);
        }

        .title-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
            flex-wrap: wrap;
        }

        .teacher-tag {
            font-size: 18px;
            font-weight: 400;
            letter-spacing: 0.2px;
            color: var(--gold-active);
        }

        .header-controls {
            display: 
                flex;
            padding: 
                25px 45px; 
            gap: 
                18px;
            align-items: 
                flex-end;
            flex-wrap: 
                wrap; 
        }

        .admin-dashboard { 
            display: 
                block; 
            margin-top: 
                60px; 
            margin-bottom: 
                100px; 
            padding: 
                20px 45px; 
        }

        .admin-dashboard h2 { 
            color: 
                var(--gold-active); 
            margin-bottom: 
                30px; 
            font-size: 
                54px; 
            font-weight: 
                800;
        }
        
        /* Placeholder per i nomi senza bandiera */
.flag-placeholder {
    width: 34px;
    height: 22px;
    background-color: rgba(255,255,255,0.05); /* Grigio scuro trasparente */
    border: 1px dashed var(--glass-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 12px;
    font-weight: 800;
}

        /* --- Header text styles --- */
        /* HEADER TEXT STYLES */
        .nameplate-text .eyebrow {
            font-size:
                19px;
            font-weight:
                400;
            color:
                var(--gold-active);
            text-transform:
                uppercase;
            letter-spacing:
                5px;
            display:
                block;
            margin-bottom:
                5px;
        }

        .nameplate-text h1 { 
            font-size: 
                54px; 
            font-weight: 
                800; 
            line-height: 
                1; 
            color:
                var(--text-main);
        }

        .nameplate-caption {
            font-size: 
                14px;
            color: 
                var(--text-muted);
            margin-top: 
                10px;
            font-weight: 
                600;
            display: 
                block;
            letter-spacing: 
                0.2px;
        }

        /* Versiontag aligned with caption style */
        .version-label {
            font-size:
                14px;
            color:
                var(--text-muted);
            margin-top:
                2px;
            font-weight:
                600;
            display:
                block;
            opacity:
                0.8;
            letter-spacing:
                0.2px;
        }

        /* Theme-specific version label colors */
        .version-highlight.student {
            color: #4ade80; /* Dark mode - bright green */
        }
        .version-highlight.teacher {
            color: #fcd34d; /* Dark mode - bright yellow */
        }
        .version-highlight.teacher-lab {
            color: #f97316; /* Dark mode - bright orange for LAB version */
        }
        .version-highlight.divi {
            color: #a78bfa; /* Dark mode - bright purple */
        }
        [data-theme="light"] .version-highlight.student {
            color: #15803d; /* Light mode - dark green for better contrast */
        }
        [data-theme="light"] .version-highlight.teacher {
            color: var(--gold-active); /* Light mode - uses same orange as LETTERS for better readability */
        }
        [data-theme="light"] .version-highlight.teacher-lab {
            color: #ea580c; /* Light mode - darker orange for better contrast */
        }
        [data-theme="light"] .version-highlight.divi {
            color: #7c3aed; /* Light mode - dark purple for better contrast */
        }
        
#engineStatus {

    margin-top: 20px;

    display: inline-block;

    padding: 6px 12px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: 13px;

    font-weight: 700;

    background: transparent;

    border-width: var(--border-width-dashed);

    border-style: dashed;

    border-color: var(--glass-border);

    border-radius: var(--radius-md);

    color: var(--text-main);
}
        

        /* --- Theme toggle UI --- */
        /* Theme Toggle UI Container */
        .theme-toggle-box {
            display:
                flex;
            align-items:
                center;
            gap:
                12px;
            background-color:
                var(--glass-blue);
            padding:
                8px 16px;
            border-radius:
                30px;
            border-width:
                1px;
            border-style:
                solid;
            border-color:
                var(--glass-border);
            cursor:
                pointer;
            margin-bottom:
                10px;
            transition:
                0.3s;
        }

        .theme-toggle-box:hover {
            border-color:
                var(--accent-blue);
            background-color:
                var(--glass-blue-light);
        }

        /* DAY mode theme toggle - dark background for better visibility */
        [data-theme="light"] .theme-toggle-box {
            background-color:
                var(--btn-reset);
            border-color:
                var(--glass-border);
        }

        [data-theme="light"] .theme-toggle-text {
            color:
                #ffffff;
        }

        .theme-toggle-text {
            font-size:
                11px;
            font-weight:
                800;
            text-transform:
                uppercase;
            letter-spacing:
                1px;
            color:
                var(--text-main);
        }

        .header-brand-container { 
            display: 
                flex; 
            flex-direction: 
                column; 
            align-items: 
                flex-end; 
            gap: 
                15px; 
        }

        .header-logo { 
            height: 
                85px; 
            width: 
                auto; 
            object-fit: 
                contain; 
        }

        /* --- Language flag selection --- */
        /* Language Flag Selection UI (34x22) */
        .lang-flags { 
            display: 
                flex; 
            gap: 
                18px; 
        }

        .lang-flag { 
            width: 
                32px; 
            height: 
                18px; 
            cursor: 
                pointer; 
            border-radius: 
                2px; 
            opacity: 
                0.35; 
            transition: 
                0.3s; 
            object-fit: 
                cover; 
            border: 
                1px solid rgba(255,255,255,0.4);
        }

        .lang-flag.active { 
            opacity: 
                1; 
            transform: 
                scale(1.1); 
            box-shadow: 
                0 0 10px rgba(0,0,0,0.2); 
        }

        /* --- Mode options and input components --- */
        /* 
           -------------------------------------------------------------------------
           4. MODE OPTIONS & INPUT COMPONENTS
           -------------------------------------------------------------------------
        */
        .mode-switch { 
            display: 
                flex; 
            gap: 
                15px; 
            max-width: 
                1200px; 
            margin-left: 
                auto;
            margin-right: 
                auto;
            margin-bottom: 
                20px; 
        }

        /* 
           MODIFIED: Dashed borders for unselected mode options
        */
        .mode-option {
            flex: 
                1; 
            padding: 
                22px 25px; 
            background-color: 
                var(--glass-blue); 
            background-image:
                var(--glass-shine);
            border-width: 
                var(--border-width-dashed);
            border-style: 
                dashed;
            border-color: 
                var(--glass-border);
            border-radius: 
                var(--radius-lg); 
            cursor: 
                pointer; 
            transition: 
                background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
            min-height: 
                var(--mode-option-height); 
            display: 
                flex; 
            flex-direction: 
                column; 
            justify-content: 
                flex-start;
            box-shadow:
                0 6px 16px -6px rgba(0,0,0,0.3);
        }

        /* Audio Training ospita Speed+Tone affiancati e ha bisogno di
           qualche pixel in più: leggermente più largo di Manual Reception
           (che ospita solo Speed), altezza sempre identica (flex stretch) */
        #manualBox {
            flex: 0.92;
        }

        #trainingBox {
            flex: 1.08;
        }

        .mode-option:hover {
            background-color: var(--glass-blue-light);
        }

        .mode-option input[type="radio"] { 
            display: 
                none; 
        }

        .mode-option-title { 
            font-weight: 
                800; 
            font-size: 
                21px; 
            display: 
                block; 
            margin-bottom: 
                8px; 
            color: 
                var(--text-main); 
            text-transform: 
                uppercase; 
        }

        .mode-option-caption { 
            font-size: 
                14px; 
            color: 
                var(--text-muted); 
            line-height: 
                1.4; 
        }

        /* Visibilità dinamica: il riquadro SELEZIONATO mostra lo slider
           (Speed / Speed+Tone) e nasconde il testo esplicativo; quello NON
           selezionato mostra solo il testo e nasconde lo slider. */
        .mode-option .mode-fader-row {
            display: none;
        }

        .mode-option:has(input:checked) .mode-fader-row {
            display: flex;
        }

        .mode-option:has(input:checked) .mode-option-caption {
            display: none;
        }

        /* Selected State overrides dashed to solid */
        .mode-option:has(input:checked) { 
            border-style: 
                solid;
            border-color: 
                var(--accent-blue); 
            background-color: 
                var(--glass-blue-light); 
            box-shadow: 
                var(--shadow-card), 0 0 24px rgba(59, 130, 246, 0.25); 
        }

        .mode-option:has(input:checked) .mode-option-title { 
            color: 
                var(--gold-active); 
        }

        .control-group { 
            display: 
                flex; 
            flex-direction: 
                column; 
            gap: 
                8px; 
        }

        .control-group label { 
            font-size: 
                13px; 
            color: 
                var(--text-muted); 
            text-transform: 
                uppercase; 
            font-weight: 
                800; 
            letter-spacing: 
                1px; 
            margin-left: 
                10px; 
        }

        /* CLASS INPUT PROTECTION */
        .group-class-dynamic { 
            flex: 
                1; 
            min-width: 
                250px; 
        }

        .group-class-dynamic input { 
            width: 
                100%; 
        }

        select, 
        input.form-control {
            height: 
                var(--ctrl-height); 
            background-color: 
                var(--input-bg); 
            border-width: 
                1px;
            border-style: 
                solid;
            border-color: 
                var(--glass-border);
            color: 
                var(--text-main); 
            border-radius: 
                var(--radius-md); 
            padding: 
                0 18px; 
            font-size: 
                16px;
            box-shadow:
                inset 0 1px 3px rgba(0,0,0,0.25);
            transition:
                border-color 0.15s ease, box-shadow 0.15s ease;
        }

        select:focus,
        input.form-control:focus {
            outline: none;
            border-color: var(--accent-blue);
            box-shadow:
                inset 0 1px 3px rgba(0,0,0,0.25), 0 0 0 3px rgba(59,130,246,0.25);
        }

        #lessonNumber.highlight-active { 
            background-color: 
                #475569 !important; 
            color: 
                #ffffff !important;
            font-size: 
                14px;  
            font-weight: 
                800; 
            border: 
                1px solid #fff; 
        }

        

        /* Subtle blue background for SESSION PARAMETERS panel */
        #sessionParamsPanel {
            background: #232c3f;
            border: 1px solid rgba(255, 255, 255, 0.35);
        }
        .call-container { 
            position: 
                relative; 
            display: 
                flex; 
            align-items: 
                center; 
            width: 
                280px; 
        }

        .flag-icon-call {
            position: 
                absolute; 
            left: 
                14px; 
            width: 
                34px; 
            height: 
                22px; 
            border-radius: 
                2px;
            display: 
                none; 
            z-index: 
                5; 
            object-fit: 
                cover; 
            border: 
                1px solid var(--flag-ui-border);
        }

        /* Switzerland (and Vatican City) use a perfectly square 1:1 flag.
           object-fit:cover above scales the square image to fill the wider
           34x22 box, cropping ~6px off the top and bottom to fit — eating
           into the vertical margin around the white cross while the
           horizontal margin stays intact. object-fit:contain instead
           preserves the flag's true square proportions (small empty strips
           left/right instead of a vertical crop). Scoped to just these two
           square-ratio flags — every other (rectangular) flag is untouched. */
        .flag-icon-call.flag-square {
            object-fit: contain;
            border: none;
        }

        /* 
           -------------------------------------------------------------------------
           4b. MODE FADER ROW — vive DENTRO Manual Reception (solo Speed) e
           Audio Training (Speed + Tone affiancati, divisore verticale)
           -------------------------------------------------------------------------
        */
        .mode-fader-row {
            align-items: flex-start;
            gap: 18px;
            margin-top: 14px;
            cursor: default;
        }

        .fader-panel-divider {
            align-self: stretch;
            width: 1px;
            background-color: var(--glass-border);
        }

        .fader-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
            min-width: 0;
        }

        /* Etichetta SPEED/TONE ora sulla stessa riga del valore (risparmia
           una riga rispetto a prima, dove stava sopra su una riga propria)
           — "Speed"/"Tone" seguiti dal valore in WPM/Hz, poi CPM (se c'è)
           spinto a destra. Stessa font-size/colore/peso di sempre, cambia
           solo la posizione. */
        .fader-group label {
            font-size: 15px;
            color: var(--text-muted);
            text-transform: uppercase;
            font-weight: 800;
            letter-spacing: 1px;
            margin-left: 0;
        }

        .fader-readout .fader-label-inline {
            margin-left: 5px;
            margin-right: 10px;
        }

        .fader-readout {
            display: flex;
            align-items: baseline;
            font-family: 'IBM Plex Mono', monospace;
        }

        .fader-readout .fader-primary {
            font-size: 14px;
            font-weight: 800;
            color: var(--gold-active);
            letter-spacing: 0.5px;
        }

        .fader-readout .fader-secondary {
            font-size: 14px;
            color: var(--text-muted);
            font-weight: 600;
            margin-left: auto;
        }

        .fader-track-wrap {
            height: 34px;
            background-color: var(--input-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-md);
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
            display: flex;
            align-items: center;
            padding: 0 12px;
        }

        /* Traccia: gradiente unico argento (sinistra) → bianco (destra),
           stesso stile per Speed e Tone */
        input[type="range"].fader {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #6b7686 0%, #cbd5e1 55%, #ffffff 100%);
            border-radius: 4px;
            cursor: pointer;
            outline: none;
        }

        /* SPEED: traccia stile mixer audio — gradiente continuo come VU meter
           professionale. Nessuna zona visibile: transizione fluida da grigio
           scuro → verde → giallo → arancio → rosso, senza punti di salto. */
        input[type="range"].fader.speed-fader {
            background: linear-gradient(90deg,
                #475569 0%,
                #22c55e 25%,
                #facc15 55%,
                #f97316 80%,
                #dc2626 100%
            );
        }

        /* Cursore rettangolare stile "fader cap" da mixer, non rotondo */
        input[type="range"].fader::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 11px;
            height: 20px;
            border-radius: 3px;
            background: #f8fafc;
            border: 1px solid rgba(0,0,0,0.35);
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
            cursor: pointer;
            transition: transform 0.15s ease;
        }

        input[type="range"].fader::-webkit-slider-thumb:hover {
            transform: scaleY(1.08);
        }

        input[type="range"].fader::-moz-range-thumb {
            width: 11px;
            height: 20px;
            border-radius: 3px;
            background: #f8fafc;
            border: 1px solid rgba(0,0,0,0.35);
            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
            cursor: pointer;
            transition: transform 0.15s ease;
        }

        .fader-presets {
            display: flex;
            gap: 3px;
            flex-wrap: wrap;
        }

        .fader-preset-btn {
            flex: 1;
            min-width: 26px;
            height: 22px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 12px;
            font-weight: 700;
            background-color: var(--glass-blue);
            color: var(--text-muted);
            border: 1px solid var(--glass-border);
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }

        .fader-preset-btn:hover {
            background-color: var(--glass-blue-light);
            color: var(--text-main);
        }

        .fader-preset-btn.active {
            background-color: var(--accent-blue);
            color: #fff;
            border-color: var(--accent-blue);
        }

        /* 
           -------------------------------------------------------------------------
           4d. LATENCY ANALYSIS PANEL — grafico interattivo tempo per gruppo
           -------------------------------------------------------------------------
        */
        .latency-panel {
            max-width: 1200px;
            margin: 15px auto 0;
            padding: 25px 30px 15px;
            background-color: rgba(99, 102, 241, 0.10);
            background-image: 
                linear-gradient(160deg, rgba(99,102,241,0.22), rgba(0,0,0,0.35)),
                var(--glass-shine);
            border: 2px dashed var(--glass-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
        }

        [data-theme="light"] .latency-panel {
            background-color: var(--glass-blue-light);
            background-image: var(--glass-shine);
        }

        .latency-title {
            font-family: 'Big Shoulders Display', sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 26px;
            font-weight: 800;
            color: var(--gold-active);
            margin-bottom: 6px;
        }

        .latency-subtitle {
            font-size: 17px;
            color: var(--text-main);
            margin-bottom: 6px;
            font-weight: 600;
        }

        .latency-hint {
            font-size: 15px;
            color: var(--text-muted);
            margin-bottom: 16px;
            font-style: italic;
        }

        #latencySvg {
            width: 100%;
            height: auto;
            display: block;
            overflow: visible;
        }

        #audioTrainingHistoryLatencySvg {
            width: 100%;
            height: auto;
            display: block;
            overflow: visible;
        }

        .latency-axis-line {
            stroke: var(--glass-border);
            stroke-width: 1;
        }

        .latency-grid-line {
            stroke: var(--glass-border);
            stroke-width: 1.5;
            stroke-dasharray: 7 5;
            opacity: 0.6;
        }

        .latency-axis-label {
            fill: var(--text-muted);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 15px;
        }

        .latency-line-path {
            fill: none;
            stroke: var(--accent-blue);
            stroke-width: 2.5;
            stroke-linejoin: round;
            stroke-linecap: round;
        }

        .latency-hover-line {
            stroke: #ffffff;
            stroke-width: 1.5;
            opacity: 0;
            pointer-events: none;
        }

        .latency-hover-dot {
            fill: #fbbf24;
            stroke: #000000;
            stroke-width: 1.5;
            opacity: 0;
            pointer-events: none;
        }

        .latency-tooltip-bg {
            fill: #000000;
            opacity: 0;
            pointer-events: none;
            rx: 10;
        }

        .latency-tooltip-text {
            fill: #ffffff;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 18px;
            font-weight: 700;
            opacity: 0;
            pointer-events: none;
        }

        .latency-hover-capture {
            fill: transparent;
            cursor: crosshair;
        }

        .latency-empty-msg {
            fill: var(--text-muted);
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 14px;
        }

        .latency-gap-label {
            fill: var(--text-muted);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 12px;
            font-weight: 700;
        }

        .latency-inline-btn {
            margin-top: 12px;
            width: 100%;
            height: 34px;
            border: none;
            border-radius: var(--radius-md);
            background-color: var(--accent-blue);
            color: #ffffff;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            cursor: pointer;
            transition: filter 0.15s ease, box-shadow 0.15s ease;
            box-shadow: 0 4px 10px -4px rgba(0,0,0,0.4);
        }

        .latency-inline-btn:hover {
            filter: brightness(1.12);
            box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5), 0 0 14px rgba(59,130,246,0.35);
        }

        .latency-inline-btn:active {
            filter: brightness(0.92);
        }

        /* --- Quiz mode styles --- */
        /* 
           -------------------------------------------------------------------------
           4e. CW QUIZ — schermata a scelta multipla per le abbreviazioni CW
           -------------------------------------------------------------------------
        */
        .quiz-card {
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0;
            background: transparent;
        }

        .quiz-categories {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 24px;
            padding-left: 0;
        }

        .quiz-cat-label {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .quiz-cat-select {
            min-width: 220px;
            text-align: left;
        }

        .quiz-intro-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
        }

        .quiz-intro-left {
            text-align: left;
            flex: 1;
            min-width: 280px;
        }

        .quiz-intro-right {
            flex-shrink: 0;
        }

        .quiz-main-title {
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 700;
            font-size: 26px;
            color: var(--text-main);
            text-transform: uppercase;
            line-height: 1.2;
            letter-spacing: 0.5px;
        }

        .quiz-main-sub {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
            margin-top: 2px;
        }

        .quiz-intro-desc {
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 6px;
            line-height: 1.4;
            max-width: 560px;
        }

        .quiz-inner {
            max-width: 700px;
            margin: 0 auto;
            text-align: center;
        }

        .quiz-main-header {
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--glass-border);
        }

        .quiz-combined-title {
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 700;
            font-size: 18px;
            color: var(--text-main);
            text-transform: uppercase;
            text-align: left;
            letter-spacing: 0.5px;
        }

        .quiz-header-right {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .quiz-meta {
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            background-color: var(--input-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-md);
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-main);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .quiz-timer {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
            background-color: rgba(15, 23, 42, 0.4);
            padding: 10px 24px;
            border-radius: 6px;
            border: 1px solid var(--glass-border);
            min-width: 140px;
            text-align: center;
        }

        .quiz-main-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 50px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--glass-border);
        }

        .quiz-main-left {
            flex: 1;
            display: flex;
            align-items: flex-start;
        }

        .quiz-main-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
            text-align: right;
        }

        .quiz-control-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-top: 0;
            margin-bottom: 24px;
        }

        .quiz-actions-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        #quizStageMain:has(.quiz-answer-btn) .quiz-control-bar {
            margin-top: 24px;
            margin-bottom: 0;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .quiz-control-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .quiz-main-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            align-items: center;
            margin-top: 24px;
            flex-wrap: wrap;
        }

        .quiz-question-area {
            display: none;
            text-align: center;
        }

        .quiz-repeat-btn {
            margin-bottom: 0;
        }

        .quiz-speed-info {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 0;
            font-family: 'IBM Plex Mono', monospace;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .quiz-speed-wpm {
            font-size: 18px;
            font-weight: 800;
            color: var(--gold-active);
        }

        .quiz-speed-sep {
            color: var(--text-muted);
            opacity: 0.6;
            font-size: 18px;
            font-weight: 600;
        }

        .quiz-speed-cpm {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-main);
        }

        #lbl-quiz-begin,
        #lbl-quiz-start,
        #lbl-quiz-restart,
        #manualHistoryBtn-ops.history-exit-active {
            background: #16a34a;
            color: #fff;
        }

        #lbl-quiz-begin:hover,
        #lbl-quiz-start:hover,
        #lbl-quiz-restart:hover,
        #manualHistoryBtn-ops.history-exit-active:hover {
            background: #15803d;
        }

        #lbl-quiz-exit,
        #lbl-quiz-exit2,
        #lbl-select-clear,
        #manualClearAttemptBtn-ops,
        #manualClearHistoryBtn-ops,
        #manualDeleteAttemptBtn-ops {
            background: #ef4444;
            color: #fff;
        }

        #lbl-quiz-exit:hover,
        #lbl-quiz-exit2:hover,
        #lbl-select-clear:hover,
        #manualClearAttemptBtn-ops:hover,
        #manualClearHistoryBtn-ops:hover,
        #manualDeleteAttemptBtn-ops:hover {
            background: #dc2626;
        }

        .quiz-prompt-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            max-width: 900px;
            margin: 24px auto;
        }

        .quiz-prompt {
            font-size: 20px;
            font-weight: 700;
            color: var(--gold-active);
            margin: 0;
            max-width: 700px;
        }

        .quiz-answers {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            max-width: 900px;
            margin: 0 auto;
        }

        .quiz-answer-btn {
            padding: 22px 16px;
            min-height: 72px;
            background-color: var(--input-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-md);
            color: var(--text-main);
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        }

        .quiz-answer-btn:hover:not(:disabled) {
            background-color: var(--glass-blue-light);
            border-color: var(--accent-blue);
            transform: translateY(-2px);
        }

        .quiz-answer-btn:hover:not(:disabled) {
            background-color: var(--glass-blue-light);
            border-color: var(--accent-blue);
        }

        .quiz-answer-btn.correct {
            background-color: rgba(34, 197, 94, 0.35) !important;
            border-color: #22c55e !important;
            color: var(--text-main);
        }

        .quiz-answer-btn.wrong {
            background-color: rgba(239, 68, 68, 0.35) !important;
            border-color: #ef4444 !important;
        }

        .quiz-answer-btn:disabled {
            cursor: default;
        }

        .quiz-score {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-main);
            margin: 24px 0;
            font-family: 'IBM Plex Mono', monospace;
            text-align: center;
            letter-spacing: 0.5px;
        }

        .quiz-recap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            text-align: left;
        }

        .quiz-recap-col {
            background-color: var(--input-bg);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            padding: 10px 20px;
        }

        .quiz-recap-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 0;
        }

        .quiz-recap-row + .quiz-recap-row {
            border-top: 1px solid var(--glass-border);
        }

        .quiz-led {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        @keyframes quiz-led-blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.25; }
        }

        .quiz-led-green {
            background-color: #22c55e;
            box-shadow: 0 0 8px rgba(34,197,94,0.7);
            animation: quiz-led-blink 1.1s ease-in-out infinite;
        }

        .quiz-led-red {
            background-color: #ef4444;
            box-shadow: 0 0 8px rgba(239,68,68,0.7);
        }

        .quiz-recap-text {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 17px;
            color: var(--text-main);
            white-space: pre;
        }

        .quiz-recap-code {
            color: var(--gold-active);
            font-weight: 800;
            font-size: 19px;
            white-space: pre;
        }


        /* 
           -------------------------------------------------------------------------
           4c. BEGINNER CURRICULUM CONTROLS — segmented selector, manual char grid
           -------------------------------------------------------------------------
        */
        .seg-control {
            display: flex;
            height: var(--ctrl-height);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
        }

        .seg-btn {
            flex: 1;
            background-color: var(--input-bg);
            color: var(--text-muted);
            border: none;
            cursor: pointer;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 12.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.2px;
            padding: 0 6px;
            transition: background-color 0.15s ease, color 0.15s ease;
        }

        .seg-btn + .seg-btn {
            border-left: 1px solid var(--glass-border);
        }

        .seg-btn.active {
            background-color: var(--accent-blue);
            color: #fff;
        }

        .seg-btn:hover:not(.active) {
            background-color: var(--glass-blue-light);
            color: var(--text-main);
        }

        .beginner-info-bar {
            max-width: 1200px;
            margin: 0 auto 25px;
            padding: 14px 30px;
            background-color: rgba(0,0,0,0.12);
            border: 1px dashed var(--glass-border);
            border-radius: var(--radius-md);
            font-size: 14px;
            color: var(--text-muted);
            display: none;
            font-family: 'IBM Plex Mono', monospace;
        }

        .beginner-info-bar strong {
            color: var(--gold-active);
            font-size: 21px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .char-toggle-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .char-toggle-card {
            padding: 20px 25px;
            background-color: var(--glass-blue);
            background-image: var(--glass-shine);
            border: 2px dashed var(--glass-border);
            border-radius: var(--radius-lg);
        }

        .char-toggle-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px dashed var(--glass-border);
        }

        .char-toggle-btn {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            background-color: var(--input-bg);
            border: 1px solid var(--glass-border);
            color: var(--text-muted);
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 800;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }

        .char-toggle-btn.active {
            background-color: var(--accent-blue);
            color: #fff;
            border-color: var(--accent-blue);
            box-shadow: 0 0 12px rgba(59,130,246,0.4);
        }

        .char-toggle-btn:hover:not(.active) {
            background-color: var(--glass-blue-light);
            color: var(--text-main);
        }

        /* Numeri: sfondo distinto per separarli visivamente da lettere e
           caratteri speciali (che condividono lo stesso sfondo). Il bordo
           resta identico per tutti i gruppi. */
        .char-toggle-btn.numeric {
            background-color: rgba(249, 115, 22, 0.12);
        }

        .char-toggle-btn.numeric.active {
            background-color: var(--neon-orange);
            border-color: var(--neon-orange);
            color: #fff;
            box-shadow: 0 0 12px rgba(249,115,22,0.45);
        }

        .char-toggle-btn.numeric:hover:not(.active) {
            background-color: rgba(249, 115, 22, 0.22);
            color: var(--text-main);
        }

        /* Il divisore tra Beginner/Advanced deve cadere ESATTAMENTE nello
           stesso punto del divisore tra Manual Reception/Audio Training sopra
           (che non è un 50/50, ma 0.92/1.08 per via dello slider Tone in più
           in Audio Training). Usiamo lo STESSO meccanismo (flex-grow con
           flex-basis:0, stesso rapporto) così l'arrotondamento del layout è
           identico e i due bordi coincidono a pixel. */
        #levelSwitchWrap #beginnerBox {
            flex: 0.92;
            min-width: 0;
        }

        #levelSwitchWrap #advancedBox {
            flex: 1.08;
            min-width: 0;
        }

        /* I box BEGINNER/ADVANCED non hanno un mode-fader-row da mostrare al
           posto della caption quando selezionati: la caption deve restare
           sempre visibile (a differenza dei box Manual/Training in alto). */
        #levelSwitchWrap .mode-option-caption {
            display: block !important;
        }

        /* Tick marks: tacche bianche più alte sui valori "pieni",
           tacche grigie più corte sugli step intermedi. */
        .fader-ticks {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0 17.5px;
            height: 9px;
        }

        .fader-ticks .tick {
            width: 2px;
            border-radius: 1px;
        }

        .fader-ticks .tick-major {
            height: 8px;
            background-color: var(--text-main);
        }

        .fader-ticks .tick-minor {
            height: 5px;
            background-color: var(--text-muted);
            opacity: 0.6;
        }

        /* SPEED: le tacche non sono più un conteggio decorativo fisso, ma
           posizionate in base al valore reale (ogni 2 WPM), così i major
           (16, poi multipli di 10) cadono esattamente al loro posto anche
           se non equidistanti tra loro. */
        .fader-ticks.speed-ticks {
            display: block;
            position: relative;
        }

        .fader-ticks.speed-ticks .tick {
            position: absolute;
            top: 0;
        }

        /* --- Action toolbar and buttons --- */
        /* 
           -------------------------------------------------------------------------
           5. ACTION TOOLBAR & BUTTONS
           -------------------------------------------------------------------------
        */
        .training-bar {
            display: 
                none; 
            align-items: 
                center; 
            gap: 
                15px; 
            max-width: 
                1200px;
            margin-left: 
                auto;
            margin-right: 
                auto;
            margin-top:
                25px;
            margin-bottom: 
                25px; 
            padding: 
                15px 30px; 
            background-color: 
                rgba(0,0,0,0.1);
            border: 
                1px solid var(--glass-border); 
            border-radius: 
                var(--radius-md);
        }

        body.training-mode .training-bar { 
            display: 
                flex; 
        }

        .btn {
            height: 
                var(--ctrl-height); 
            font-weight: 
                700; 
            font-size: 
                15.5px;
            padding: 
                0 30px; 
            border-radius: 
                var(--radius-md); 
            cursor: 
                pointer; 
            border: 
                1px solid rgba(255,255,255,0.12); 
            transition: 
                background-position 0.25s ease, box-shadow 0.2s ease, filter 0.2s ease; 
            text-transform: 
                uppercase; 
            display: 
                flex; 
            align-items: 
                center; 
            justify-content: 
                center;
            background-size: 200% 100%;
            background-position: 0% 0%;
            box-shadow:
                0 6px 16px -6px rgba(0,0,0,0.45);
            letter-spacing: 0.4px;
        }

        .btn:hover {
            background-position: 100% 0%;
            filter: brightness(1.06);
        }

        .btn:active {
            filter: brightness(0.92);
            box-shadow: 0 2px 6px -2px rgba(0,0,0,0.5);
        }

        /* Light mode button borders for better visibility */
        [data-theme="light"] .btn {
            border: 1px solid rgba(0,0,0,0.15) !important;
        }

        .btn-start { 
            background-image:
                linear-gradient(90deg, #16a34a 0%, #22c55e 50%, #16a34a 100%);
            color: 
                #fff; 
            box-shadow:
                0 6px 16px -6px rgba(0,0,0,0.45), 0 0 18px rgba(34,197,94,0.25);
        }

        /* 
           EXPORT BUTTON SYNC (INDIGO):
           Matched with student load json colors.
        */
        .btn-export { 
            background-image:
                linear-gradient(90deg, #6366f1 0%, #818cf8 50%, #6366f1 100%);
            color: 
                #fff; 
            box-shadow:
                0 6px 16px -6px rgba(0,0,0,0.45), 0 0 18px rgba(99,102,241,0.25);
        }

        /* SAVE CHANGES BUTTON ALIGNMENT FIX */
        .btn-admin-save {
            background-image:
                linear-gradient(90deg, #16a34a 0%, #22c55e 50%, #16a34a 100%);
            color: 
                #fff; 
            height: 
                45px !important;
            font-size: 
                12px !important;
            padding-left: 
                20px;
            padding-right: 
                20px;
        }

        .btn-reset { 
            background-image:
                linear-gradient(90deg, #334155 0%, #475569 50%, #334155 100%);
            color: 
                white; 
            border-color: 
                rgba(255,255,255,0.12); 
            min-width: 110px;
        }
        
        #timerWrap {
            height:
                var(--ctrl-height);
            background-color:
                rgba(0,0,0,0.55);
            border:
                1px solid var(--glass-border);
            padding:
                0 25px;
            border-radius:
                var(--radius-md);
            min-width:
                160px;
            display:
                flex;
            align-items:
                center;
            justify-content:
                center;
            box-shadow:
                0 6px 16px -6px rgba(0,0,0,0.45);
        }

        /* Light mode timer styling - white background like buttons */
        [data-theme="light"] #timerWrap {
            background-color: #ffffff;
            border: 1px solid #cbd5e1;
        }

        [data-theme="light"] #timerDisplay {
            color: #0f172a;
        }

        #timerWrap.review-state { 
            background-color:
                rgba(0,0,0,0.55);
            border-color: 
                var(--glass-border); 
            box-shadow:
                0 6px 16px -6px rgba(0,0,0,0.45);
        }

        #timerDisplay {
            font-size:
                26px;
            font-weight:
                700;
            color:
                var(--text-main);
            letter-spacing:
                0.4px;
        }

        .review-text-mode { 
            font-size: 
                15.5px !important; 
            text-transform: 
                uppercase; 
            font-weight: 
                700; 
            letter-spacing: 
                1px; 
        }

        .btn-confirm { 
            background-color: 
                rgba(249, 115, 22, 0.15); 
            border-color: 
                var(--glass-border); 
            color: 
                var(--text-main); 
            margin-left: 
                20px; 
        }

        .btn-confirm:hover { 
            background-image:
                linear-gradient(90deg, #f97316 0%, #fb923c 50%, #f97316 100%);
            color: 
                #fff; 
            box-shadow:
                0 6px 16px -6px rgba(0,0,0,0.45), 0 0 18px rgba(249,115,22,0.35);
        }

        /* 
           RIGHT-ALIGNED HISTORY RESET
        */
        .btn-clear-history {
            margin-left: 
                auto; 
            white-space: 
                nowrap;
            background-image:
                linear-gradient(90deg, #ef4444 0%, #f87171 50%, #ef4444 100%);
            color: 
                #fff;
            box-shadow:
                0 6px 16px -6px rgba(0,0,0,0.45), 0 0 18px rgba(239,68,68,0.25);
        }

        #scrollTopBtn {
            position: 
                fixed;
            bottom: 
                30px;
            left: 
                30px;
            background-image:
                linear-gradient(145deg, #22c55e 0%, #16a34a 60%, #15803d 100%);
            color: 
                #fff;
            width: 
                58px;
            height: 
                58px;
            border-radius: 
                50%;
            border: 
                1px solid rgba(255,255,255,0.4);
            display: 
                none;
            align-items: 
                center;
            justify-content: 
                center;
            cursor: 
                pointer;
            z-index: 
                7000;
            font-size: 
                24px;
            transition: 
                box-shadow 0.2s ease, filter 0.2s ease;
            box-shadow: 
                0 10px 26px -6px rgba(0,0,0,0.5), 0 0 0px rgba(34,197,94,0);
        }

        #scrollTopBtn:hover {
            filter:
                brightness(1.12);
            box-shadow:
                0 10px 26px -6px rgba(0,0,0,0.5), 0 0 22px rgba(34,197,94,0.55);
        }

        /* --- Paper grid rendering --- */
        /* 
/* 
   -------------------------------------------------------------------------
   6. PAPER GRID RENDERING SYSTEM
   -------------------------------------------------------------------------
*/

.paper-wrap {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: var(--paper-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.paper-wrap:has(.grid-container.verified) {
    padding-bottom: 15px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px 25px;
    transition: gap 0.4s ease;
}

.grid-container.verified {
    gap: 10px 25px;
}

.cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.completed-border input {

    border-width: var(--border-width-dashed) !important;

    border-style: dashed !important;

    border-color: var(--glass-border) !important;

    background-color: var(--glass-bg) !important;

    backdrop-filter: blur(12px);

    /* The base .grid-container input rule sets a box-shadow (inset shine +
       drop shadow) that visually reads as a second, solid-looking edge
       layered underneath the dashed border above. Removing it here leaves
       the dashed border as the ONLY visible edge — nothing drawn on top of
       or underneath it. */
    box-shadow: none !important;
}

.archive-tag {
    display: inline-block;
    background-color: var(--gold-active);
    color: #000000;
    font-size: 15px;
    font-weight: 500;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}
.grid-container input {
    height: 105px;
    width: 100%;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 28pt;
    text-align: center;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #f1f5f9;
    border: 1px solid #334155;
    border-radius: 8px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    letter-spacing: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.cell.wrong-cell input {
    padding-bottom: 40px;
    line-height: 61px;
}

.grid-container input:focus {
    background-color: var(--cell-bg-active) !important;
    border: 3px solid var(--neon-orange) !important;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.45);
    outline: none;
    z-index: 10;
}

@keyframes rx-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #8a8a8a inset, 0 0 14px rgba(138,138,138,0.35); }
    50% { box-shadow: 0 0 0 2px #a8a8a8 inset, 0 0 22px rgba(138,138,138,0.6); }
}

[data-theme="dark"] .current-rx {
    animation: rx-pulse 1.6s ease-in-out infinite;
    border-radius: 12px !important;
}

[data-theme="light"] .current-rx input:not(:focus) {
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 4px rgba(255,255,255,0.9), 0 0 18px rgba(255,255,255,0.5);
}

.reveal {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    text-align: center;
    height: 34px;
    padding: 0 10px;
}

.grid-container.verified .cell.wrong-cell .reveal {
    display: grid;
}

/* Live (input col testo, letter-spacing) non si allinea con una griglia a
   colonne uguali come invece fa My Results (spans in griglia) — qui usiamo
   flex con un gap calcolato sul font reale per allineare badge e lettere. */
#morse-grid.verified .cell.wrong-cell .reveal {
    display: block;
    position: absolute;
    bottom: 10px;
}

#morse-grid .reveal span {
    width: 30px;
    display: inline-flex;
    justify-content: center;
}

#morse-grid .reveal span.char-wrong {
    height: 30px;
}

.reveal span {
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    visibility: hidden;
}

.reveal span.char-wrong {
    visibility: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 30px;
    height: 30px;
    background-color: rgba(15, 23, 42, 0.9);
    color: var(--gold-active);
    font-weight: 400;
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 7px;
}

/* Audio Training only (via .history-cell, never applied by Manual
   Reception): correction character is silver instead of gold/green,
   visually distinct from the user's wrong character above it. Wrong
   character, error badge, and cell background are untouched. */
.cell.history-cell .reveal span.char-wrong {
    border: none !important;
}

.err-postit {
    position: absolute;
    top: -8px;
    right: -14px;
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    color: #000000;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    border: 1px solid #ffffff;
    box-shadow: 0 8px 18px -4px rgba(0,0,0,0.4);
    z-index: 20;
    text-align: center;
}

.cell.wrong-cell .err-postit {
    display: flex;
}

/* History: align the existing error-count badge with the lower expected-character line. */
.cell.history-cell .err-postit {
    top: auto;
    bottom: 14px;
}

.cell.correct-cell input {
    background-color: var(--glass-correct-bg) !important;
    border-color: #22c55e !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(34,197,94,0.25) !important;
}

.cell.wrong-cell input {
    background-color: var(--glass-wrong-bg) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(239,68,68,0.25) !important;
}

.cell.wrong-cell.err-count-1 input {
    background-color: var(--wrong-bg-1) !important;
    border-color: var(--wrong-border-1) !important;
}

.cell.wrong-cell.err-count-2 input {
    background-color: var(--wrong-bg-2) !important;
    border-color: var(--wrong-border-2) !important;
}

.cell.wrong-cell.err-count-3 input {
    background-color: var(--wrong-bg-3) !important;
    border-color: var(--wrong-border-3) !important;
}

.cell.wrong-cell.err-count-4 input {
    background-color: var(--wrong-bg-4) !important;
    border-color: var(--wrong-border-4) !important;
}

.cell.wrong-cell.err-count-5 input {
    background-color: var(--wrong-bg-5) !important;
    border-color: var(--wrong-border-5) !important;
}

        .btn-backup {
            white-space: nowrap;
            background-image:
                linear-gradient(90deg, #6366f1 0%, #818cf8 50%, #6366f1 100%);
            color: #fff;
        }
.grid-controls-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px 25px;
    margin-bottom: 10px;
}

.grid-controls-buttons {
    grid-column: 1 / 5;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#timerWrap.grid-controls-timer {
    grid-column: 5 / 6;
    width: 100%;
    min-width: 0;
}

/* Pulsanti più piccoli (altezza/padding ridotti), stessa dimensione
   testo di sempre — non tocchiamo font-size. */
.btn-compact {
    height: 40px;
    padding: 0 16px;
}
.history-panel {
    max-width: 1200px;
    margin: 0 auto 25px;
    padding: 25px 30px;
    background-color: var(--glass-blue);
    background-image: var(--glass-shine);
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.history-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.history-center-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-side-badge {
    display: flex;
}

.history-index-wrap {
    width: 100px;
}

.history-type-wrap {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.history-side-value {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--input-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--gold-active);
    padding: 0 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
}

.history-type-wrap .history-side-value {
    font-size: clamp(14px, 2vw, 18px);
}

.history-delete-btn {
    background-color: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.4);
    color: #ef4444;
}

.history-delete-btn:hover {
    background-color: rgba(239,68,68,0.3) !important;
    border-color: #ef4444 !important;
}

.history-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background-color: var(--input-bg);
    color: var(--text-main);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.history-arrow:hover:not(:disabled) {
    background-color: var(--glass-blue-light);
    border-color: var(--accent-blue);
}

.history-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.history-info {
    text-align: center;
    min-width: 180px;
}

.history-date {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 800;
    font-size: 16px;
    color: var(--gold-active);
}

.history-type {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 20px 0;
}

.history-grid-wrap {
    padding: 25px 25px 55px;
    margin-bottom: 20px;
}

.history-grid-wrap:has(.grid-container.verified) {
    padding-bottom: 20px;
}

.history-grid-wrap .grid-container {
    gap: 15px 25px;
}

.history-grid-wrap .grid-container.verified {
    gap: 10px 25px;
}

.history-stats {
    display: flex;
    gap: 15px;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0;
    margin-bottom: 20px;
}

.history-stats .stat-card {
    padding-top: 18px;
    padding-bottom: 18px;
}

.history-latency-panel {
    margin: 0 0 20px;
}

.history-legacy-notice {
    grid-column: 1 / -1;
    padding: 18px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    background-color: rgba(0,0,0,0.15);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-md);
}

/* Cella di sola lettura per la vista storica (non un input) */
.history-cell-box {
    height: 105px;
    width: 100%;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 0 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 28pt;
    color: var(--text-main);
    background-color: var(--glass-blue);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-md);
    text-transform: uppercase;
}

.cell.wrong-cell .history-cell-box {
    padding-bottom: 40px;
}

.history-cell-char {
    text-align: center;
}

.cell.correct-cell .history-cell-box {
    background-color: var(--glass-correct-bg);
    border-color: var(--glass-border);
    box-shadow: 0 0 16px rgba(34,197,94,0.25);
}

.cell.wrong-cell .history-cell-box {
    background-color: var(--glass-wrong-bg);
    border-color: var(--glass-border);
    box-shadow: 0 0 16px rgba(239,68,68,0.25);
}

.cell.wrong-cell.err-count-1 .history-cell-box {
    background-color: var(--wrong-bg-1);
}

.cell.wrong-cell.err-count-2 .history-cell-box {
    background-color: var(--wrong-bg-2);
}

.cell.wrong-cell.err-count-3 .history-cell-box {
    background-color: var(--wrong-bg-3);
}

.cell.wrong-cell.err-count-4 .history-cell-box {
    background-color: var(--wrong-bg-4);
}

.cell.wrong-cell.err-count-5 .history-cell-box {
    background-color: var(--wrong-bg-5);
}

        .leaderboard-share-bar {
            max-width: 1200px;
            margin: 15px auto 0;
            padding: 18px 30px;
            background-color: var(--glass-blue);
            background-image: var(--glass-shine);
            border: 2px dashed var(--glass-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .leaderboard-consent {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--text-main);
            cursor: pointer;
            flex: 1;
            min-width: 260px;
        }

        .leaderboard-consent input[type="checkbox"] {
            width: 20px;
            height: 20px;
            accent-color: var(--accent-blue);
            cursor: pointer;
            flex-shrink: 0;
        }

        .leaderboard-send-btn {
            height: 46px;
            padding: 0 26px;
            font-size: 13px;
            background-image: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
            color: #fff;
        }

        .leaderboard-send-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            filter: none !important;
        }

        .leaderboard-status {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 13px;
            font-weight: 700;
            color: var(--acc-bright);
            min-width: 60px;
        }

        /* --- Statistics and analytics --- */
        /* 
           -------------------------------------------------------------------------
           7. STATISTICS & ANALYTICS
           -------------------------------------------------------------------------
        */
        .results-panel { 
            display: 
                none; 
            gap: 
                15px; 
            max-width: 
                1200px; 
            margin-left: 
                auto;
            margin-right: 
                auto;
            margin-top: 
                35px; 
            flex-direction: 
                row; 
            justify-content: 
                space-between; 
        }

        /* Superseded by the real PERFORMANCE/SESSION/ANALYSIS panels — these
           four Golden Master result boxes must never be shown in the LAB1
           interface anymore (live or History, either mode). !important so
           it wins over any inline style.display set elsewhere (confirmBtn
           handler on live completion, previous History force-visible fix).
           The values computed inside (statChars/statRate/statErr/statAcc)
           are untouched — PERFORMANCE already reuses them. */
        #resultsPanel {
            display: none !important;
        }

        /* Parked/deferred functionality (leaderboard publishing) — must not
           be shown yet. Not implemented/activated, purely hidden. */
        #leaderboardShareBar {
            display: none !important;
        }

        .stat-card {
            flex: 
                1; 
            padding: 
                28px; 
            background-color: 
                var(--glass-blue); 
            background-image:
                var(--glass-shine);
            border-width: 
                1px;
            border-style: 
                solid;
            border-color: 
                var(--glass-border);
            border-radius: 
                var(--radius-lg); 
            text-align: 
                center; 
            backdrop-filter: 
                blur(12px);
            box-shadow:
                var(--shadow-card);
            transition:
                background-color 0.2s ease, box-shadow 0.2s ease;
        }

        .stat-card:hover {
            background-color: var(--glass-blue-light);
            box-shadow: var(--shadow-card), 0 0 20px rgba(59,130,246,0.15);
        }

        .stat-value { 
            font-size: 
                42px; 
            font-weight: 
                800; 
            color: 
                var(--text-main); 
            display: 
                block; 
            margin-bottom: 
                8px; 
        }

        .stat-label { 
            font-size: 
                15px; 
            text-transform: 
                uppercase; 
            color: 
                var(--text-muted); 
            font-weight: 
                700; 
            letter-spacing: 1.5px; 
        }

        .admin-toolbar { 
            display: 
                flex; 
            gap: 
                20px; 
            align-items: 
                flex-end; 
            margin-bottom: 
                35px; 
            flex-wrap: 
                wrap; 
        }
        
        .class-group-header {
            background-color: 
                var(--glass-blue); 
            border-width: 
                1px;
            border-style: 
                solid;
            border-color: 
                var(--glass-border);
            padding: 
                18px 25px; 
            margin-top: 
                15px; 
            border-radius: 
                var(--radius-lg); 
            cursor: 
                pointer;
            display: 
                flex; 
            align-items: 
                center; 
            justify-content: 
                space-between; 
            transition: 
                0.3s;
        }

/* Cartella Docente Sottile e Professionale */
        .class-group-header {
            background-color: var(--glass-blue); 
            background-image: var(--glass-shine);
            border: 1px solid var(--glass-border);
            padding: 6px 16px; /* Molto più sottile */
            margin-top: 6px; 
            border-radius: var(--radius-md); 
            cursor: pointer;
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            transition: background-color 0.15s ease, box-shadow 0.15s ease;
            height: 40px; /* Altezza fissa per ordine visivo */
            box-shadow: var(--shadow-card);
        }

        .class-group-header:hover {
            background-color: var(--glass-blue-light);
        }

.class-group-header.archived-header {
    background-color: rgba(50, 50, 50, 0.5);
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;
}

        .folder-title { 
            display: flex; 
            align-items: center; 
            gap: 10px; 
        }

        .folder-title strong { 
            color: var(--text-main); 
            font-size: 14px; /* Font più sobrio */
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .folder-icon { 
            font-size: 16px; 
            color: var(--gold-active); 
        }

/* Stato normale: deve essere NASCOSTO (display: none) */
        .class-group-content { 
            display: none; 
            border: 1px solid var(--glass-border);
            border-top: none;
            background-color: rgba(0,0,0,0.02);
            border-radius: 0 0 8px 8px;
            padding: 10px;
            margin-bottom: 12px;
        }
        
        /* Stato aperto: deve essere VISIBILE */
        .class-group-content.expanded { 
            display: block !important; 
        }

        table { 
            width: 
                100%; 
            border-collapse: 
                collapse; 
            color: 
                var(--text-main); 
            font-size: 
                18px; 
        } 

table tbody tr {
    transition: background-color 0.15s ease;
}

table tbody tr:hover {
    background-color: rgba(255,255,255,0.04);
}

table th { 
            text-align: left; 
            padding: 12px 15px; 
            text-transform: uppercase; 
            font-size: 11px; 
            color: var(--text-muted); 
            border-bottom: 2px solid var(--glass-border); 
            letter-spacing: 1px;
        }

        table td { 
            padding: 15px; 
            border-bottom: 1px solid var(--glass-border); 
            vertical-align: middle; 
        }

/* 1. Respiro per Acc, Err, CPM (ora Colonne 6, 7, 8) */
table th:nth-child(6), table td:nth-child(6),
table th:nth-child(7), table td:nth-child(7),
table th:nth-child(8), table td:nth-child(8) {
    text-align: center;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 2. Centramento per Del, Les e Arch (ora Colonne 9, 10, 11) */
table th:nth-child(9), table td:nth-child(9),
table th:nth-child(10), table td:nth-child(10),
table th:nth-child(11), table td:nth-child(11) {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
/* Riduce lo spazio tra CLASS e DATE/TIME di 5px */
table td:nth-child(4) {
    padding-left: 10px; /* era 15px di default */
}

/* Riduce lo spazio tra DATE/TIME e PERIOD di 10px */
table td:nth-child(5) {
    padding-left: 5px; /* era 15px di default */
}

/* Aggiunge 2px di respiro a destra di DEL e LES */
table td:nth-child(9) {
    padding-right: 5px !important;
}

table td:nth-child(10) {
    padding-right: 5px !important;
}

        
        /* Forza i pulsanti a essere centrati nel loro spazio */
        .btn-delete-record, .lesson-btn-pro {
            margin: 0 auto;
        }        
        
                .admin-class-edit {
            background-color: 
                rgba(0,0,0,0.05); 
            border-width: 
                1px;
            border-style: 
                solid;
            border-color: 
                var(--accent-blue);
            color: 
                var(--text-main); 
            padding: 
                6px 10px; 
            border-radius: 
                6px; 
            width: 
                160px; 
            font-size: 
                15px; 
            font-weight: 
                700;
        }

        .admin-flag { 
            width: 
                34px; 
            height: 
                22px; 
            border-radius: 
                2px; 
            vertical-align: 
                middle; 
            margin-right: 
                12px; 
            border: 
                1px solid var(--flag-ui-border); 
            object-fit: 
                cover; 
        }

        /* --- Admin buttons --- */
        /* ADMIN BUTTONS STYLES */
        .lesson-btn-pro, 
        .btn-delete-record {
            height: 
                40px; 
            min-width: 
                50px; 
            border: 
                none; 
            border-radius: 
                8px; 
            cursor: 
                pointer; 
            font-family: 
                'IBM Plex Mono', 
                monospace; 
            transition: 
                filter 0.15s ease, box-shadow 0.15s ease; 
            text-transform: 
                uppercase;
            display: 
                inline-flex; 
            align-items: 
                center; 
            justify-content: 
                center; 
            padding-left: 
                15px;
            padding-right: 
                15px;
            box-shadow:
                0 6px 14px -6px rgba(0,0,0,0.4);
        }

        .lesson-btn-pro:hover,
        .btn-delete-record:hover {
            filter: brightness(1.15);
            box-shadow: 0 6px 14px -6px rgba(0,0,0,0.4), 0 0 14px rgba(255,255,255,0.15);
        }

        .lesson-btn-pro:active,
        .btn-delete-record:active {
            filter: brightness(0.9);
        }

        .lesson-btn-pro { 
            background-image:
                linear-gradient(135deg, #818cf8, var(--accent-load));
            color: 
                white; 
            font-weight: 
                600; 
            font-size: 
                14px; 
        }

        .lesson-btn-pro:hover { 
            background-image:
                linear-gradient(135deg, var(--gold-active), #eab308);
	    color: #000000; 

        }
        
        /* Nuova regola solo per il bottone ARCH */
.lesson-btn-pro.btn-archive {
    background-image: linear-gradient(135deg, #818cf8, var(--accent-load));
    color: #ffffff;
}

.lesson-btn-pro.btn-archive:hover {
    background-image: linear-gradient(135deg, #fb923c, var(--orange-border));
    color: #000000;
}

        .btn-delete-record { 
            background-image:
                linear-gradient(135deg, #f87171, var(--btn-red-danger));
            color: 
                white; 
            font-weight: 
                800; 
            font-size: 
                24px; 
        }


    /* LAB1 - PROFESSIONAL OPERATIONS CONSOLE
       Inspired by military/industrial control systems
       Modular, precision-engineered, information-dense
    */

    /* === RESET & BASE === */
    body {
        margin: 0;
        padding: 0;
        background: #0a0f18;
        color: #e8eaed;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 13px;
        line-height: 1.4;
        overflow-x: auto;
        overflow-y: auto;
    }

    /* Compact View only: the page's OTHER body{} rule (much earlier in
       this stylesheet, from the original layout) sets min-width:1280px
       unconditionally — this was the actual root cause of the centering
       bug: it forced body's layout width to 1280px regardless of the
       real window size, so .ops-console.compact's margin:0 auto centered
       against that fixed 1280px reference instead of the real viewport.
       Overriding it here, scoped to Compact only — Normal View's use of
       that 1280px minimum is untouched (and was always redundant there
       anyway, since .ops-console itself already enforces a stricter
       1840px minimum). */
    body:has(.ops-console.compact) {
        min-width: 0;
    }

    /* === LAYOUT FRAMEWORK === */
    .ops-console {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 320px 1fr 300px;
        grid-template-areas:
            "header header header"
            "navbar main status"
            "sidebar main status"
            "footer footer footer";
        min-height: 100vh;
        min-width: 1840px;
        max-width: 1840px;
        margin: 0 auto;
        gap: 0;
    }

    /* === HEADER BAR === */
    .ops-header {
        grid-area: header;
        background: linear-gradient(180deg, #141b2d 0%, #0f141f 100%);
        border-bottom: 2px solid #2a3b55;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .ops-header-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .ops-logo {
        width: 96px;
        height: 96px;
        object-fit: contain;
    }

    .ops-logo-link,
    .header-logo-link {
        display: inline-flex;
        cursor: pointer;
        flex-shrink: 0;
    }

    .ops-identity {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ops-eyebrow {
        font-size: 16px;
        font-weight: 700;
        color: #60a5fa;
        letter-spacing: 1px;
        text-transform: uppercase;
        line-height: 1;
        margin-bottom: -4px;
    }

    .ops-title {
        font-size: 30px;
        font-weight: 700;
        color: #e8eaed;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .ops-caption {
        font-size: 15px;
        color: #94a3b8;
        font-weight: 500;
        display: block;
        margin-top: 0;
        line-height: 1.1;
    }

    .ops-version {
        font-size: 15px;
        color: #94a3b8;
        font-weight: 600;
        display: block;
    }

    .ops-version-highlight {
        color: #f97316;
    }

    .ops-status-led {
        font-size: 10px;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }

    .ops-engine-status {
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        color: #10b981;
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.3);
        border-radius: 4px;
        padding: 8px 16px;
    }

    /* Two full rows, right-aligned as a block: row 1 is every header
       icon (LANGUAGE flags, DARK/DAY, SETTINGS/GEAR) in one unbroken
       line via .ops-header-icons-row below, all vertically centered
       together exactly as before this whole timestamp saga started;
       row 2 is the UTC date/time snapshot, right-aligned under the
       ENTIRE icon row — not under any single button — so the icon row
       itself never shifts or loses alignment regardless of whether the
       timestamp happens to be shown. (3.5.190D/191D both tried wrapping
       the timestamp under just one button, which pushed that one
       button's row position out of line with its neighbors whenever
       the timestamp was visible — this two-row structure has no such
       per-button coupling.) */
    .ops-header-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .ops-header-icons-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ops-control-btn {
        width: 36px;
        height: 36px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .ops-control-btn:hover {
        background: #334155;
        border-color: #475569;
    }

    .ops-control-btn img {
        width: 32px;
        height: 18px;
        border-radius: 3px;
        opacity: 0.6;
        transition: opacity 0.2s;
    }
    
    .ops-control-btn img.active {
        opacity: 1;
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
    }

    /* Training Guide button */
    .ops-guide-btn {
        height: 44px;
        padding: 0 22px 0 20px;
        margin-left: 20px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        color: #f1f5f9;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .ops-guide-btn:hover {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
        border-color: #475569;
    }

    .ops-guide-btn.active {
        background: linear-gradient(180deg, #166534 0%, #14532d 100%);
        border-color: #334155;
    }

    .training-guide-icon {
        color: #facc15;
    }

    .training-guide-label {
        font-size: 13px;
        font-weight: 600;
        color: #f1f5f9;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* Training Guide panel */
    #trainingGuidePanel {
        display: none;
        margin: 0 0 20px 0;
        background: rgba(18, 70, 65, 0.45);
        border: 1px solid rgba(18, 70, 65, 0.65);
        animation: guide-fade-in 0.25s ease;
    }

    @keyframes guide-fade-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .training-guide-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .training-guide-intro {
        display: flex;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
    }

    .training-guide-row {
        display: flex;
        gap: 16px;
        align-items: stretch;
    }

    .training-guide-col {
        flex: 1 1 50%;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .training-guide-col .training-guide-intro,
    .training-guide-col .training-step-card.current {
        flex: 1;
    }

    .training-pair-body {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        flex-wrap: nowrap;
    }

    .training-pair-body .training-letter-row {
        flex-wrap: nowrap;
        gap: 15px;
        padding-left: 10px;
    }

    .training-pair-title-wrap {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .training-step-card .training-letter-chip {
        flex-shrink: 0;
        min-width: 80px;
        padding: 16px 20px;
        border-radius: 10px;
    }

    .training-step-card .training-letter-chip .char {
        font-size: 30px;
    }

    .training-step-card .training-letter-chip .morse {
        font-size: 18px;
        margin-top: 6px;
    }

    .training-guide-mini-path {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 14px;
        color: #ffffff;
    }

    .training-guide-flow-line {
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .training-guide-intro-flow {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 12px;
        font-size: 14px;
        color: #ffffff;
        white-space: nowrap;
    }

    .training-guide-arrow {
        color: #64748b;
        font-weight: 700;
    }

    .training-guide-led {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #4ade80;
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
        flex-shrink: 0;
    }

    .training-pair-header {
        gap: 6px;
        justify-content: flex-start !important;
        margin-bottom: 10px;
    }

    .training-pair-count {
        font-size: 13px;
        color: #94a3b8;
        font-weight: 600;
    }

    .training-pair-sep {
        color: #64748b;
        font-size: 13px;
    }

    .guide-white {
        color: #ffffff;
    }

    /* Training Guide background swatches */
    #trainingGuidePanel {
        transition: background 0.3s ease;
    }

    /* Training Guide background palette — border always remains #334155 */
    #trainingGuidePanel.training-guide-bg-1 { background: #315B45; border-color: #334155 !important; }    /* Forest Green */
    #trainingGuidePanel.training-guide-bg-2 { background: #1D466B; border-color: #334155 !important; }    /* Midnight Blue */
    #trainingGuidePanel.training-guide-bg-3 { background: #4A535B; border-color: #334155 !important; }    /* Graphite Steel */
    #trainingGuidePanel.training-guide-bg-4 { background: #14532d; border-color: #334155 !important; }    /* Training Guide active button green */
    #trainingGuidePanel.training-guide-bg-5 { background: #244B4B; border-color: #334155 !important; }    /* Deep Petrol */
    #trainingGuidePanel.training-guide-bg-6 { background: #2B5757; border-color: #334155 !important; }    /* Petrol */
    #trainingGuidePanel.training-guide-bg-7 { background: #326363; border-color: #334155 !important; }    /* Muted Teal */
    #trainingGuidePanel.training-guide-bg-8 { background: #396E6E; border-color: #334155 !important; }    /* Soft Petrol */

    .training-guide-swatch {
        width: 24px;
        height: 24px;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        color: #ffffff;
        cursor: pointer;
        transition: all 0.2s;
    }

    .training-guide-swatches {
        display: none;
        gap: 6px;
    }

    .training-guide-swatch-1 { background: #315B45; }
    .training-guide-swatch-2 { background: #1D466B; }
    .training-guide-swatch-3 { background: #4A535B; }
    .training-guide-swatch-4 { background: #14532d; }
    .training-guide-swatch-5 { background: #244B4B; }
    .training-guide-swatch-6 { background: #2B5757; }
    .training-guide-swatch-7 { background: #326363; }
    .training-guide-swatch-8 { background: #396E6E; }

    .training-guide-swatch.active {
        background: #000000 !important;
        border-color: #ffffff;
    }

    .training-guide-swatch:hover {
        transform: scale(1.1);
        border-color: #ffffff;
    }

    .training-guide-group-panel {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .training-guide-group-panel .training-guide-intro,
    .training-guide-group-panel .training-step-card.current,
    .training-guide-group-panel .training-guide-path {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .training-guide-icon-box {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
    }

    .training-guide-objective-icon {
        width: 60px;
        height: 60px;
    }

    .training-guide-intro-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .training-guide-intro-text h3 {
        display: inline-block;
        width: fit-content;
        max-width: 100%;
        padding: 6px 12px;
        margin: 0 0 6px 0;
        font-size: 16px;
        font-weight: 700;
        color: #f1f5f9;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 10px;
    }

    .training-guide-intro-text p {
        margin: 0;
        font-size: 15px;
        color: #94a3b8;
        line-height: 1.5;
    }

    .training-guide-section {
        border: 1px solid #334155;
        border-radius: 8px;
        overflow: hidden;
    }

    .training-guide-section summary {
        padding: 12px 16px;
        background: #0f172a;
        color: #94a3b8;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .training-guide-section summary::after {
        content: '▾';
        font-size: 12px;
        transition: transform 0.2s;
    }

    .training-guide-section[open] summary::after {
        transform: rotate(180deg);
    }

    .training-guide-section summary::-webkit-details-marker {
        display: none;
    }

    .guide-section-number {
        display: inline-block;
        padding: 4px 10px;
        color: #f1f5f9;
        font-weight: 800;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 10px;
        margin-right: 8px;
    }

    .training-guide-section-content {
        padding: 16px;
        background: #1e293b;
        font-size: 15px;
        color: #cbd5e1;
        line-height: 1.6;
    }

    .training-letter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .training-letter-chip {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 56px;
        padding: 10px 12px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        font-family: 'IBM Plex Mono', monospace;
    }

    .training-letter-chip .char {
        font-size: 22px;
        font-weight: 700;
        color: #f1f5f9;
    }

    .training-letter-chip .morse {
        font-size: 13px;
        color: #94a3b8;
        margin-top: 4px;
    }

    .training-step-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
    }

    .training-step-card.current {
        border-color: #f59e0b;
    }

    .training-step-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .training-step-title {
        display: inline-block;
        padding: 6px 12px;
        font-size: 15px;
        font-weight: 700;
        color: #f1f5f9;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 10px;
        margin: 0;
    }

    .training-step-badge {
        display: inline-block;
        padding: 6px 12px;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 10px;
        font-size: 13px;
        color: #94a3b8;
        font-weight: 600;
    }

    .training-guide-mode-badge {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 40px !important;
        border-radius: 10px !important;
        padding: 0 22px !important;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        color: #f1f5f9;
        text-align: center;
        box-sizing: border-box;
    }

    .training-guide-close-btn {
        width: 32px;
        height: 32px;
        margin-left: 0;
        background: #ef4444;
        border: 1px solid #f87171;
        border-radius: 6px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .training-guide-close-btn:hover {
        background: #dc2626;
        border-color: #fca5a5;
    }

    .training-guide-close-btn:active {
        background: #b91c1c;
    }
    .training-guide-close-btn[data-tooltip] { position: relative; }
    .training-guide-close-btn[data-tooltip]::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 10px;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 6px;
        color: #f1f5f9;
        font-size: 12px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
        z-index: 100;
    }
    .training-guide-close-btn[data-tooltip]:hover::before { opacity: 1; }

    .training-step-flow {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #64748b;
    }

    .training-step-flow .arrow {
        color: #3b82f6;
    }

    .training-guide-path {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 18px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
    }

    .training-guide-path-step {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #f1f5f9;
    }

    .guide-step-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #334155;
    }

    .guide-step-dot.active {
        background: #22c55e;
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
    }

    .guide-path-arrow {
        color: #94a3b8;
        font-size: 20px;
    }

    .training-guide-flow-target {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        gap: 8px;
        margin-top: 12px;
    }

    .guide-target-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 12px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        color: #f1f5f9;
        text-align: center;
    }

    .guide-target-item .guide-sub {
        font-size: 13px;
        font-weight: 400;
        color: #94a3b8;
    }

    .guide-target-arrow {
        display: flex;
        align-items: center;
        color: #3b82f6;
        font-size: 14px;
    }

    .training-letter-chip.new {
        border-color: #f59e0b;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    }

    .training-letter-chip.new .char {
        color: #fbbf24;
    }

    .training-letter-chip.learned {
        border-color: #334155;
        opacity: 0.85;
    }

    .training-letter-chip.group-pair {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #f59e0b;
    }

    .training-letter-chip.group-pair .char {
        color: #f1f5f9;
    }

    .training-letter-chip.group-pair .morse {
        color: #ffffff;
    }

    .training-letter-chip {
        cursor: pointer;
        user-select: none;
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .training-letter-chip:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.35);
        border-color: #facc15;
    }

    .training-letter-chip:active {
        box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    }

    .training-pair-subtext {
        font-size: 13px;
        color: #facc15;
        margin: 6px 0 0 0;
        text-align: right;
        line-height: 1.4;
        max-width: 240px;
    }

    .training-step-card ul {
        margin: 0;
        padding-left: 18px;
        color: #cbd5e1;
    }

    .training-step-card ul li {
        margin-bottom: 6px;
    }

    .lab1-seg-control {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
    }

    .lab1-seg-control .seg-btn {
        width: 100%;
        height: 40px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        border-radius: 6px;
        border: 1px solid var(--glass-border);
        transition: background-color 0.15s ease, color 0.15s ease;
        box-sizing: border-box;
    }

    /* === LAB1 FADER INTEGRATION === */
    .lab1-fader-stack {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .lab1-fader-stack .fader-group {
        width: 100%;
    }

    .lab1-fader-stack .lab1-tone-fader {
        padding-top: 16px;
    }

    .lab1-fader-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .lab1-fader-row .fader-group {
        flex: 1;
        min-width: 0;
    }

    .ops-sidebar .fader-track-wrap {
        padding: 0 8px;
    }

    .ops-sidebar .fader-ticks {
        padding: 0 13px;
    }

    /* === NAVIGATION BAR === */
    .ops-navbar {
        display: none;
        grid-area: navbar;
        background: #0f141f;
        border-bottom: 1px solid #1e293b;
        padding: 8px 20px;
        gap: 4px;
    }

    .ops-nav-tab {
        padding: 10px 20px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .ops-nav-tab:hover {
        color: #94a3b8;
        background: rgba(255, 255, 255, 0.05);
    }

    .ops-nav-tab.active {
        color: #3b82f6;
        border-bottom-color: #3b82f6;
        background: rgba(59, 130, 246, 0.1);
    }

    /* === SIDEBAR === */
    .ops-sidebar {
        grid-area: sidebar;
        background: #0f141f;
        border-right: 1px solid #1e293b;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow-y: auto;
    }

    .ops-panel {
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 16px;
    }

    .ops-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #334155;
    }

    #trainingGuidePanel .ops-panel-header {
        border-bottom: none;
    }

    .ops-panel-title {
        font-size: 14px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .training-guide-title {
        color: #ffffff;
    }

    .ops-panel-indicator {
        width: 8px;
        height: 8px;
        background: #3b82f6;
        border-radius: 50%;
    }

    .ops-panel-page {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        color: #f1f5f9;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 4px;
        padding: 2px 6px;
        margin-left: 10px;
    }

    /* Student Profile card — compact display rows with an edit-icon toggle */
    .profile-field-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .profile-edit-btn {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 5px;
        color: #60a5fa;
        font-size: 13px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
    }
    .profile-edit-btn:hover {
        background: #334155;
        border-color: #60a5fa;
    }
    .profile-field-label {
        font-size: 13px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 130px;
        flex-shrink: 0;
    }
    .profile-field-value {
        font-size: 19px;
        font-weight: 600;
        color: #f8fafc;
        display: flex;
        align-items: center;
        font-family: 'JetBrains Mono', monospace;
    }
    .profile-field-input-wrap {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

    .profile-field-row-compact {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    #callsignRow {
        display: none !important;
    }

    .active-profile-option {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 13px;
        color: #f8fafc;
    }
    .active-profile-option:hover {
        background: #334155;
    }

    .profile-field-row-horizontal {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .profile-field-row-horizontal .profile-field-value-compact {
        margin-left: auto;
        text-align: right;
    }
    /* LIVE -> Settings -> local profile photo box. Unified with ADVISOR
       PROFILES' own photo box: same 96x96 square footprint as the
       adjacent flag area (settingsFlagImgLarge and settingsFlagFallbackLarge,
       both resized to match), clickable directly (no separate Browse
       button), same grey bust icon placeholder (photoPlaceholder(),
       shared with ADVISOR). */
    .settings-photo-box {
        width: 96px;
        height: 96px;
        border-radius: 8px;
        background: #1e293b;
        border: 1px solid #ffffff;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
    }
    .settings-photo-box:hover { filter: brightness(1.12); }
    .settings-photo-box img { width: 100%; height: 100%; object-fit: cover; }
    /* Once a photo is loaded, inset it 5px on every side — the box's
       has-photo class is toggled alongside the existing img/placeholder
       display toggle, in the two places that already do that. */
    .settings-photo-box.has-photo { padding: 5px; box-sizing: border-box; }

    /* Right-click "Remove photo" menu — shared by LIVE's .settings-photo-box
       and ADVISOR's .tc-photo-box, built once via showSharedPhotoContextMenu().
       Deliberately not a permanent button; only ever appears on right-click. */
    .shared-photo-context-menu {
        position: fixed;
        z-index: 3000;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        padding: 4px;
        min-width: 140px;
    }
    .shared-photo-context-menu-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        color: #ef4444;
        font-size: 13px;
        padding: 8px 10px;
        border-radius: 4px;
        cursor: pointer;
    }
    .shared-photo-context-menu-item:hover {
        background: rgba(239, 68, 68, 0.12);
    }
    .profile-edit-btn-compact {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 3px;
        color: #60a5fa;
        font-size: 9px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
    }
    .profile-edit-btn-compact:hover {
        background: #334155;
    }
    .profile-field-label-compact {
        font-size: 11px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }
    .profile-field-value-compact {
        font-size: 12px;
        font-weight: 600;
        color: #f8fafc;
        font-family: 'JetBrains Mono', monospace;
        display: flex;
        align-items: center;
    }

    .profile-card-empty .profile-card-content {
        filter: blur(2px);
        opacity: 0.55;
        pointer-events: none;
    }

    .ops-config-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 12px;
    }

    /* Positioning context for the absolutely-positioned .flag-icon-call
       image (reused from the Golden Master's .call-container pattern:
       flex row + align-items:center, wrapping only the flag+input pair). */
    .lab1-callsign-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }

    .ops-config-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding-left: 5px;
        margin-bottom: 5px;
    }

    .ops-config-value {
        width: 100%;
        box-sizing: border-box;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        color: #e8eaed;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 8px 12px;
    }

    #nameCall {
        color: #f59e0b;
        font-size: 16px;
    }

    .ops-config-select {
        width: 100%;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 8px 12px;
        color: #ffffff;
        font-size: 12px;
        font-family: 'JetBrains Mono', monospace;
        cursor: pointer;
        box-sizing: border-box;
        text-transform: uppercase;
    }

    /* STEP selector: proportional interface font (not monospace) for
       natural-looking labels, per readability request. */
    #curriculumStep {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        white-space: pre;
    }

    .ops-slider-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ops-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 8px;
        background: #334155;
        border-radius: 8px;
        outline: none;
    }

    .ops-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #3b82f6;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        border: 2px solid #1e293b;
    }

    .ops-slider-readout {
        display: flex;
        justify-content: space-between;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: #64748b;
    }

    /* === MAIN WORKSPACE === */
    .ops-main {
        grid-area: main;
        /* LIVE / SETTINGS / STUDENT DASHBOARD background — a blue/cyan
           vertical gradient (deep navy at the bottom rising to a brighter,
           muted teal-cyan at the top), deliberately distinct from ADVISOR
           DASHBOARD's own dark-blue look (restored unconditionally by the
           :has() override just below, so Advisor's appearance is
           byte-for-byte unchanged). Purely cosmetic: no other property on
           this rule (layout, padding, overflow, gap, min-width) was
           touched, and no HTML/structure/JS was touched anywhere for this
           change — this background is only visible in the gaps/padding
           around the cards/panels rendered inside .ops-main, which already
           have their own opaque backgrounds, so text/cell/button contrast
           is unaffected. */
        background: linear-gradient(180deg, #08142b 0%, #040b1b 42%, #020408 100%);
        padding: 20px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 1180px;
    }

    /* ADVISOR DASHBOARD is the one exception: while #opsTeacherMain is
       actually active (the real Advisor view, as opposed to LIVE/
       SETTINGS/STUDENT DASHBOARD, which also share .ops-main but must get
       the new gradient above), .ops-main reverts to its original flat
       background — Advisor's own look is completely unchanged by this
       edit. */
    .ops-main:has(#opsTeacherMain.active) {
        background: #0a0f18;
    }

    .ops-workspace-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 8px;
    }

    .ops-workspace-speed-row {
        display: none;
        align-items: center;
        gap: 12px;
        padding: 8px 16px;
        background: #0f172a;
        border: 1px solid #334155;
        border-top: none;
        border-radius: 0 0 8px 8px;
    }

    .ops-workspace-speed-label {
        font-size: 12px;
        font-weight: 600;
        color: #94a3b8;
        font-family: "JetBrains Mono", monospace;
        flex-shrink: 0;
    }

    .ops-workspace-speed-readout {
        font-size: 12px;
        color: #f1f5f9;
        font-weight: 600;
        min-width: 48px;
        text-align: right;
        flex-shrink: 0;
    }

    .ops-workspace-title {
        font-size: 14px;
        font-weight: 700;
        color: #e8eaed;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ops-workspace-badges {
        display: flex;
        gap: 8px;
    }

    .ops-badge {
        padding: 6px 14px;
        background: rgba(59, 130, 246, 0.2);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        color: #f8fafc;
        font-family: 'JetBrains Mono', monospace;
    }

    .ops-badge .ws-separator {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #3b82f6;
        border-radius: 50%;
        margin: 0 6px;
        vertical-align: middle;
        font-size: 0;
        color: transparent;
    }

    .ws-wpm {
        color: #fbbf24;
    }

    .ws-cpm {
        color: #f8fafc;
    }

    .ops-badge .ws-step-char {
        color: var(--neon-orange);
    }

    /* --- Saved-attempts history badge (Manual Reception) ---
       Independent element, toggled against #workspaceConfigBadge; never
       written to by updateWorkspaceSummary(). Reuses the existing .ws-wpm
       (gold) / .ws-cpm (white) colors already defined above for consistency.
       Metadata only — no navigation controls live inside this element;
       those are separate buttons in the command area (below). */
    .ops-badge.saved-attempts-badge {
        display: flex;
        align-items: center;
        border: none;
        border-radius: 8px;
        background: #000000;
        font-size: 20px;
    }

    .ops-console.compact .ops-badge.saved-attempts-badge {
        font-size: 14px;
    }

    /* Real MENU title element, toggled to RECEPTION HISTORY (same yellow
       as WPM) while HISTORY is active — see renderManualHistoryAttempt() /
       exitManualHistoryMode(). */
    .ops-workspace-title.title-gold {
        color: #fbbf24;
    }

    .ws-history-type {
        color: #fbbf24;
    }

    /* Same color already used by "Operations Console" (.ops-footer-right). */
    .ws-history-call {
        color: #60a5fa;
    }

    .ws-attempt-data {
        white-space: nowrap;
    }

    .ws-attempt-empty {
        color: #94a3b8;
        font-style: italic;
    }

    /* HISTORY-active-only navigation group (DELETE + prev/count/next).
       DELETE carries margin-left:auto, pushing this entire trailing group
       to the right side of the command-area line. */
    /* Pushes the entire trailing group (HISTORY/EXIT + nav + CLEAR HISTORY +
       DELETE) to the right, in both normal and HISTORY-active states —
       EXPORT/SAVE/CLEAR stay anchored left in both. */
    /* NORMAL state only: pushes HISTORY + CLEAR HISTORY to the right.
       Cancelled while HISTORY is active, so EXIT/CLEAR HISTORY/DELETE stay
       grouped together right after EXPORT/SAVE/CLEAR instead. */
    .ops-action-bar.history-active #manualHistoryBtn-ops,
    .ops-action-bar.history-active #manualDeleteAttemptBtn-ops {
        margin-left: 0;
    }

    /* The navigation trio (◀ / count / ▶) is its own separate group,
       pushed to the extreme right of the command line — independent from
       and well away from DELETE. Harmless when hidden (normal state). */
    #manualHistoryPrevBtn-ops {
        margin-left: auto;
    }

    /* Height/vertical-padding/font-size now match .ops-btn (the same class
       HISTORY itself uses), so all command-area buttons share the same
       overall button height. Horizontal padding/min-width stay compact
       (single-glyph / short-content elements), unlike HISTORY's own
       140px min-width, which would look wrong here. */
    .manual-history-nav-btn {
        min-width: 0;
        padding: 12px 22px;
        font-size: 28px;
        line-height: 1;
    }

    /* "1 / 3" — same visual language as the QUIZ timer (.quiz-timer):
       bordered badge, same vertical padding/font-size as the command
       buttons for consistent row height. */
    .manual-history-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        font-weight: 700;
        color: #e8eaed;
        background: rgba(15, 23, 42, 0.4);
        border: 1px solid #334155;
        border-radius: 6px;
        padding: 10px 20px;
        min-width: 70px;
        letter-spacing: 0.5px;
    }

    /* Saved-result state for grid cells (Manual Reception SAVE).
       Reuses the existing dashed-border pattern (.completed-border) and the
       existing bright green already used elsewhere for "correct" (#22c55e) —
       exact shade can be revisited later. Does not alter unsaved-cell styles. */
    .cell.saved-cell input {
        border-style: dashed !important;
        color: var(--acc-bright) !important;
    }

    /* HISTORY-viewer cells only (distinct from .saved-cell above, which is
       the normal post-SAVE working-cell style and is left untouched):
       black background, green text, solid panel border. */
    .cell.history-cell input {
        background-color: #000000 !important;
        border: 1px solid #334155 !important;
        border-radius: 10px !important;
        outline: none !important;
        box-shadow: none !important;
        color: var(--acc-bright) !important;
        /* No transition in HISTORY: the base input rule animates "all" for
           0.2s, so switching a cell from wrong (border: none, currentColor
           silver) to correct (1px #334155) interpolated the border and
           produced a white flash while stepping between attempts. */
        transition: none !important;
    }

    /* HISTORY wrong cells: the visible border is on the .cell wrapper itself,
       because the disabled <input> border is not reliably overridden across
       browsers. The input keeps its black background and silver text, but
       loses its own border so the wrapper's orange border is the only one. */
    .cell.wrong-cell.history-cell {
        border: 1px solid #475569;
        border-radius: 10px;
    }

    .cell.wrong-cell.history-cell input,
    .cell.wrong-cell.err-count-1.history-cell input,
    .cell.wrong-cell.err-count-2.history-cell input,
    .cell.wrong-cell.err-count-3.history-cell input,
    .cell.wrong-cell.err-count-4.history-cell input,
    .cell.wrong-cell.err-count-5.history-cell input {
        background-color: #000000 !important;
        border: none !important;
        border-radius: 10px !important;
        outline: none !important;
        box-shadow: none !important;
        color: silver !important;
    }

    /* HISTORY-only row-number indicator: small square, dark SEARCH-style
       background, white number, top-left corner of the cell. */
    .history-row-number {
        position: absolute;
        top: -8px;
        left: -14px;
        width: 34px;
        height: 34px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        color: #ffffff;
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        font-weight: 700;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        z-index: 10;
    }

    /* --- BEGINNER · MANUAL character selection panel (main column) --- */
    #manualCharsPanel {
        flex: none;
    }

    #manualCharsPanel .char-toggle-card {
        padding: 0;
        background: none;
        background-image: none;
        border: 0;
        border-radius: 0;
    }

    #manualCharsPanel .char-toggle-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #manualCharsPanel .char-toggle-btn {
        width: 42px;
        height: 42px;
        border-radius: 6px;
        background: #0f172a;
        border: 1px solid #334155;
        color: #e8eaed;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    #manualCharsPanel .char-toggle-btn:hover:not(.active) {
        background: #1e293b;
        color: #ffffff;
    }

    #manualCharsPanel .char-toggle-btn.active {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #ffffff;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    }

    #manualCharsPanel .char-toggle-btn.numeric {
        background: rgba(249, 115, 22, 0.12);
        color: #ffffff;
    }

    #manualCharsPanel .char-toggle-btn.numeric:hover:not(.active) {
        background: rgba(249, 115, 22, 0.22);
        color: #ffffff;
    }

    #manualCharsPanel .char-toggle-btn.numeric.active {
        background: #f97316;
        border-color: #f97316;
        color: #ffffff;
        box-shadow: 0 0 10px rgba(249, 115, 22, 0.45);
    }

    #manualCharsPanel .char-toggle-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #334155;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    #manualCharsPanel .char-bulk-btn {
        min-width: 0;
        flex: 0 0 auto;
        white-space: nowrap;
        /* Inherits the same .ops-btn family: padding, font-size, font-weight,
           border-radius, text-transform and letter-spacing. */
    }

    #manualCharsPanel .beginner-info-bar {
        display: block;
        max-width: none;
        margin: 14px 0 0;
        padding: 10px 14px;
        background: rgba(0, 0, 0, 0.25);
        border: 1px dashed #334155;
        border-radius: 6px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        color: #94a3b8;
    }

    #manualCharsPanel .beginner-info-bar strong {
        color: #fbbf24;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    [data-theme="light"] #manualCharsPanel .char-toggle-btn {
        background: #f8fafc;
        border-color: #e2e8f0;
        color: #64748b;
    }

    [data-theme="light"] #manualCharsPanel .char-toggle-btn:hover:not(.active) {
        background: #e2e8f0;
        color: #1e293b;
    }

    [data-theme="light"] #manualCharsPanel .char-toggle-btn.numeric {
        color: #1e293b;
    }

    [data-theme="light"] #manualCharsPanel .char-toggle-btn.numeric:hover:not(.active) {
        color: #1e293b;
    }

    [data-theme="light"] #manualCharsPanel .char-toggle-actions {
        border-top-color: #e2e8f0;
    }

    [data-theme="light"] #manualCharsPanel .beginner-info-bar {
        background: #f8fafc;
        border-color: #e2e8f0;
        color: #64748b;
    }

    .ops-exercise-grid {
        flex: none;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 20px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        overflow: visible;
        min-height: auto;
    }

    /* MANUAL RECEPTION: same gradient as the SEARCH button. */
    body:not(.training-mode) .ops-exercise-grid {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    }

    #morse-grid-wrapper {
        width: 100%;
        min-width: min-content;
    }

    #morse-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(200px, 1fr));
        gap: 15px 25px;
        width: 100%;
    }

    #morse-grid.pending .cell input {
        border-color: rgba(148, 163, 184, 0.4);
        background-color: rgba(30, 41, 59, 0.5);
        box-shadow: none;
        color: rgba(226, 232, 240, 0.5);
    }

    .ops-grid-placeholder {
        text-align: center;
        color: #64748b;
    }

    .ops-grid-placeholder-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .ops-grid-placeholder-text {
        font-size: 14px;
        font-weight: 600;
    }

    .ops-grid-placeholder-sub {
        font-size: 12px;
        margin-top: 8px;
    }

    /* === STATUS PANEL === */
    .ops-status {
        grid-area: status;
        background: #0f141f;
        border-left: 1px solid #1e293b;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: visible;
        min-width: 300px;
    }

    .ops-status-group {
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 16px;
    }

    .ops-snapshot-total-row {
        position: relative;
        z-index: 0;
        padding: 8px 0;
        margin: 4px 0;
    }
    .ops-snapshot-total-row::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -7px;
        right: -7px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        z-index: -1;
    }

    .ops-status-item:has(+ .ops-snapshot-total-row) {
        border-bottom: none;
    }

    #advisorSnapshotPanel .ops-status-item {
        border-bottom: none;
    }

    #advisorSnapshotPanel .ops-status-item:not(.ops-snapshot-total-row) {
        padding: 2.5px 0;
    }

    /* PERFORMANCE good-result glow (Audio Training Advanced only, errors <= 5) */
    #performancePanelGroup.performance-good {
        border-color: #22c55e;
        box-shadow: 0 0 18px rgba(34, 197, 94, 0.55);
    }

    /* Same glow, reusable by class (e.g. Archive card mockup, PHASE 1). */
    .archive-glow-good {
        border-color: #22c55e !important;
        box-shadow: 0 0 18px rgba(34, 197, 94, 0.55);
    }

    .archive-card {
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 12px;
        cursor: pointer;
        transition: border-color 0.15s ease, transform 0.1s ease;
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-family: 'JetBrains Mono', monospace;
    }

    .archive-card:hover {
        border-color: #60a5fa;
        transform: translateY(-2px);
    }

    .archive-card-large {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        padding: 20px;
        gap: 10px;
        background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
        border: 1px solid #334155;
        cursor: default;
    }

    .archive-card-large:hover {
        transform: none;
    }

    /* Sizing for .archive-card-large is now controlled entirely by the
       inline styles generated in renderArchiveCards() (callsign vs data
       need different explicit sizes, not a single blanket rule). */

    .archive-view-btn {
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        border: 2px solid transparent;
    }

    .archive-view-btn:hover {
        border-color: #fbbf24;
        box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
    }

    @media (max-width: 1100px) {
        #archiveCardsGrid { grid-template-columns: repeat(3, 1fr) !important; }
    }
    @media (max-width: 700px) {
        #archiveCardsGrid { grid-template-columns: repeat(2, 1fr) !important; }
    }

    .ops-status-group-title {
        font-size: 14px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .ops-status-led {
        font-size: 10px;
        animation: pulse 2s infinite;
    }

    .ops-status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #334155;
    }



    .ops-status-item:last-child {
        border-bottom: none;
    }

    .ops-status-label {
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
        display: inline-flex;
        gap: 10px;
        align-items: center;
    }

    /* HISTORY: highlight the active attempt-type label (LETTERS/FIGURES/MIXED) in white. */
    #debugPanel[data-active-type="LETTERS"] .ops-status-label[data-analysis="LETTERS"],
    #debugPanel[data-active-type="FIGURES"] .ops-status-label[data-analysis="FIGURES"],
    #debugPanel[data-active-type="MIXED"] .ops-status-label[data-analysis="MIXED"] {
        color: #ffffff;
    }
    .ops-status-main { min-width: 74px; }
    .ops-status-sub { min-width: 70px; font-size: 11px; font-weight: 700; }
    .ops-snapshot-total-row .ops-status-value { color: #f97316; }

    .ops-status-value {
        font-family: 'JetBrains Mono', monospace;
        font-size: 16px;
        color: #e8eaed;
    }

    .ops-status-value.highlight {
        color: #10b981;
    }

    .ops-status-value.warning {
        color: #f59e0b;
    }

    .ops-status-value.gold-value {
        color: #fbbf24;
    }

    /* === FOOTER === */
    .ops-footer {
        grid-area: footer;
        background: #0f141f;
        border-top: 1px solid #1e293b;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #64748b;
    }

    .ops-footer-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ops-footer-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ops-footer-item span {
        font-family: 'JetBrains Mono', monospace;
        color: #94a3b8;
        font-size: 14px;
    }

    .ops-footer-label {
        min-width: 60px;
    }
    
    .ops-footer-right {
        display: flex;
        align-items: center;
        gap: 20px;
        font-family: 'JetBrains Mono', monospace;
        color: #60a5fa;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* === ACTION BAR === */
    .ops-action-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 12px 12px 20px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 8px;
    }

    /* Default-hidden until the existing session-state JS explicitly shows
       them via inline style (which always wins over this rule). */
    #resetBtn-ops,
    #confirmBtn-ops,
    #exportBtn-ops {
        display: none;
    }

    .ops-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 24px;
        background: #3b82f6;
        border: none;
        border-radius: 6px;
        color: white;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 140px;
        white-space: nowrap;
    }

    .ops-btn:hover {
        background: #2563eb;
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    }

    .ops-btn.secondary {
        background: #475569;
    }

    .ops-btn.secondary:hover {
        background: #64748b;
    }

    .ops-btn.stop-active {
        background: #ef4444 !important;
        color: #ffffff !important;
        border-color: #ef4444;
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    }

    .ops-btn.danger {
        background: #dc2626;
    }

    .ops-btn.danger:hover {
        background: #b91c1c;
    }

    .ops-btn.confirm-active {
        background: var(--neon-orange) !important;
        color: #fff !important;
        border-color: var(--neon-orange) !important;
        box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
    }

    /* === HIDE ORIGINAL UI === */
    .nameplate,
    .header-brand-container,
    .mode-switch,
    .header-controls,
    .paper-wrap,
    .admin-dashboard,
    .training-bar {
        display: none !important;
    }

    /* The History-only latency graph reuses .paper-wrap for its visual
       style (same container look as the cells area), but .paper-wrap
       itself is force-hidden above (original Golden Master UI). This
       ID+class override has higher specificity, so it correctly wins when
       the toggle class is present — inline style.display could never beat
       the !important rule above, which is why the graph never appeared
       despite the JS toggle state being correct.

       Visual style below matches .ops-exercise-grid's actual cosmetic
       properties (background/border/radius/padding) — the REAL container
       the History cells use (NOT .paper-wrap, which is unrelated, hidden
       Golden Master markup). Deliberately omits .ops-exercise-grid's own
       flex/justify-content:center layout, since that would shrink-wrap
       the SVG to its content size instead of letting width:100% work. */
    #historyLatencyPanel.latency-panel-open {
        display: block !important;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 6px;
        padding: 20px 12px;
    }

    /* === LIGHT MODE === */
    [data-theme="light"] body {
        background: #f8fafc;
        color: #1e293b;
    }

    [data-theme="light"] .ops-header {
        background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
        border-bottom-color: #e2e8f0;
    }

    [data-theme="light"] .ops-brand {
        color: #3b82f6;
    }

    [data-theme="light"] .ops-system {
        color: #1e293b;
    }

    [data-theme="light"] .ops-system-status {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.3);
    }

    [data-theme="light"] .ops-navbar {
        background: #f1f5f9;
        border-bottom-color: #e2e8f0;
    }

    [data-theme="light"] .ops-nav-tab {
        color: #64748b;
    }

    [data-theme="light"] .ops-nav-tab:hover {
        color: #475569;
        background: rgba(0, 0, 0, 0.05);
    }

    [data-theme="light"] .ops-nav-tab.active {
        color: #3b82f6;
        border-bottom-color: #3b82f6;
        background: rgba(59, 130, 246, 0.1);
    }

    [data-theme="light"] .ops-sidebar {
        background: #f1f5f9;
        border-right-color: #e2e8f0;
    }

    [data-theme="light"] .ops-panel {
        background: #ffffff;
        border-color: #e2e8f0;
    }

    [data-theme="light"] .ops-panel-title {
        color: #64748b;
    }

    [data-theme="light"] .ops-config-label {
        color: #94a3b8;
    }

    

    [data-theme="light"] #sessionParamsPanel {
        background: #f9fafb;
        border: 1px solid rgba(255, 255, 255, 0.35);
    }
    [data-theme="light"] .ops-config-value,
    [data-theme="light"] .ops-config-select {
        background: #f8fafc;
        border-color: #e2e8f0;
        color: #1e293b;
    }

    [data-theme="light"] .ops-main {
        background: #f8fafc;
    }

    [data-theme="light"] .ops-workspace-header {
        background: #ffffff;
        border-color: #e2e8f0;
    }

    [data-theme="light"] .ops-workspace-title {
        color: #1e293b;
    }

    [data-theme="light"] .ops-exercise-grid {
        background: #ffffff;
        border-color: #e2e8f0;
    }

    [data-theme="light"] .ops-status {
        background: #f1f5f9;
        border-left-color: #e2e8f0;
    }

    [data-theme="light"] .ops-status-group {
        background: #ffffff;
        border-color: #e2e8f0;
    }

    [data-theme="light"] .ops-status-group-title {
        color: #64748b;
    }

    [data-theme="light"] .ops-status-label {
        color: #94a3b8;
    }

    [data-theme="light"] .ops-status-value {
        color: #1e293b;
    }

    [data-theme="light"] .ops-footer {
        background: #f1f5f9;
        border-top-color: #e2e8f0;
    }

    [data-theme="light"] .ops-footer-item span {
        color: #475569;
    }

    [data-theme="light"] .ops-action-bar {
        background: #ffffff;
        border-color: #e2e8f0;
    }

    /* === COMPACT VIEW === */
    .ops-trainer-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ops-compact-btn {
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 6px;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0 12px;
        height: 30px;
        cursor: pointer;
        transition: all 0.2s;
    }

    /* Compact / Normal toggle and the collapsible sidebar are Manual
       Reception only — hidden whenever Audio Training is active. */
    body.training-mode .ops-compact-btn,
    body.training-mode .ops-sidebar-toggle {
        display: none !important;
    }

    .ops-compact-btn:hover {
        background: #334155;
        color: #ffffff;
        border-color: #475569;
    }

    .ops-compact-btn.active {
        background: #22c55e;
        border-color: #22c55e;
        color: #000000;
    }

    .compact-view-label {
        color: #4ade80;
        font-weight: 700;
    }

    .ops-sidebar-toggle {
        display: none;
        width: 100%;
        height: 44px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #94a3b8;
        font-size: 22px;
        cursor: pointer;
        border-bottom: 1px solid #1e293b;
    }

    .ops-sidebar-toggle:hover {
        color: #e8eaed;
        background: rgba(255, 255, 255, 0.05);
    }

    .ops-compact {
        display: none;
        grid-area: compact;
        background: #0f141f;
        border-right: 1px solid #1e293b;
        padding: 16px;
        flex-direction: column;
        gap: 16px;
        overflow-y: auto;
        min-width: 280px;
    }

    .ops-compact .ops-panel,
    .ops-compact .ops-status-group {
        min-width: 248px;
    }

    .ops-console.compact {
        position: relative;
        width: 100%;
        min-width: 0;
        max-width: 1060px;
        margin: 0 auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }

    .ops-console.compact .ops-header {
        padding-left: 65px;
        padding-right: 8px;
        min-width: 0;
        border-radius: 0 0 8px 8px;
    }

    .ops-console.compact .ops-footer {
        border-radius: 8px;
        margin-top: 16px;
    }

    .ops-console.compact .ops-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 44px;
        padding: 0;
        overflow: hidden;
        align-items: center;
        z-index: 100;
    }

    .ops-console.compact .ops-sidebar > *:not(.ops-sidebar-toggle) {
        display: none;
    }

    .ops-console.compact .ops-sidebar-toggle {
        display: flex;
    }

    .ops-console.compact .ops-status {
        display: none;
    }

    .ops-console.compact .ops-compact {
        position: absolute;
        top: 44px;
        left: 0;
        bottom: 0;
        width: 310px;
        display: flex;
        z-index: 99;
        transform: translateX(calc(-100% - 4px));
        transition: transform 0.3s ease;
    }

    .ops-console.compact.compact-open .ops-compact {
        transform: translateX(0);
    }

    .ops-console.compact .ops-main {
        min-width: 0;
        padding: 16px 5px 5px 5px;
    }

    .ops-console.compact .ops-exercise-grid {
        padding: 0;
    }

    .ops-console.compact .ops-action-bar .ops-btn {
        min-width: 0;
        padding: 8px 12px;
        font-size: 11px;
    }

    .ops-console.compact .manual-history-nav-btn {
        padding: 8px 14px;
        font-size: 18px;
    }

    /* In Compact Manual Reception, hide the second menu speed slider (the
       one next to the callsign box) while keeping the sidebar speed slider. */
    body:not(.training-mode) .ops-console.compact #workspaceSpeedRow {
        display: none !important;
    }

    /* Collapsible Compact panel areas (Configuration/Options/Transmission/
       Engine/Session/Performance/Analysis) — small right-pointing triangle
       that rotates to point down when expanded. */
    .compact-collapse-triangle {
        display: inline-block;
        width: 14px;
        font-size: 11px;
        color: #60a5fa;
        margin-right: 10px;
        user-select: none;
    }

    /* Title stays left-aligned (after the triangle when present, e.g. in
       Compact), indicator/LED pushed to the far right — applies to both
       Normal View and Compact. For Normal View (no triangle, 2 items),
       this produces the same visual result as the previous
       space-between (title left, indicator right). */
    .ops-panel-header,
    .ops-status-group-title {
        justify-content: flex-start;
    }
    .ops-panel-header .ops-panel-indicator,
    .ops-status-group-title > *:last-child {
        margin-left: auto;
    }

    /* Compact MENU speed slider — the container is taller (set inline via
       JS, height:32px) to align with the MANUAL RECEPTION badge, but the
       thumb/track themselves stay at their normal default size. */
    .compact-menu-slider input[type="range"].fader.speed-fader {
        background: linear-gradient(90deg,
            #0f172a 0%,
            #334155 12%,
            #64748b 20%,
            #4ade80 45%,
            #22c55e 65%,
            #facc15 85%,
            #f97316 92%,
            #dc2626 100%
        );
    }

    /* Compact View + MANUAL RECEPTION ONLY. Scoped via the existing
       body.training-mode class (set by updateModeUI() on every rxmode
       change) — never matches while Audio Training is active, so its
       grid/cells/fonts/badges are completely untouched.

       !important is required on the grid-template-columns/gap rule: both
       #morse-grid and #morse-grid-wrapper are ID selectors, which always
       win over any number of chained classes regardless of specificity —
       confirmed in earlier iterations: a same-scope rule without
       !important never actually applied. !important is the only way a
       class-based rule can override a non-important ID rule.

       Cells use a FIXED, capped per-column width (not 1fr, which stretches
       to fill 100% of the available width) so they stay compact and
       centered with visible breathing room around them, rather than
       expanding to consume all available horizontal space. */
    body:not(.training-mode) .ops-console.compact .grid-container,
    body:not(.training-mode) .ops-console.compact #morse-grid {
        grid-template-columns: repeat(5, minmax(0, 180px)) !important;
        justify-content: center !important;
        gap: 18px 22px !important;
    }

    body:not(.training-mode) .ops-console.compact #morse-grid-wrapper {
        min-width: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    body:not(.training-mode) .ops-console.compact .ops-exercise-grid {
        padding: 24px 10px !important;
    }

    body:not(.training-mode) .ops-console.compact .grid-container input {
        width: 100%;
        max-width: 180px;
        height: 85px;
        font-size: 22pt;
        letter-spacing: 4px;
    }

    /* Priority: 5 visible cells > preserving Normal's font size. Narrower
       Compact widths shrink the font/cell further rather than letting the
       fixed-width assumption force overflow or a 6th column off-screen. */
    @media (max-width: 700px) {
        body:not(.training-mode) .ops-console.compact .grid-container,
        body:not(.training-mode) .ops-console.compact #morse-grid {
            grid-template-columns: repeat(5, minmax(0, 120px)) !important;
            gap: 10px 12px !important;
        }
        body:not(.training-mode) .ops-console.compact .grid-container input {
            max-width: 120px;
            height: 65px;
            font-size: 10pt;
            letter-spacing: 2px;
        }
    }

    @media (max-width: 520px) {
        body:not(.training-mode) .ops-console.compact .grid-container,
        body:not(.training-mode) .ops-console.compact #morse-grid {
            grid-template-columns: repeat(5, minmax(0, 82px)) !important;
            gap: 6px 8px !important;
        }
        body:not(.training-mode) .ops-console.compact .grid-container input {
            max-width: 82px;
            height: 46px;
            font-size: 8pt;
            letter-spacing: 1px;
        }
    }

    [data-theme="light"] .ops-compact {
        background: #f1f5f9;
        border-right-color: #e2e8f0;
    }

    [data-theme="light"] .ops-sidebar-toggle {
        color: #475569;
        border-bottom-color: #e2e8f0;
    }

    [data-theme="light"] .ops-sidebar-toggle:hover {
        color: #0f172a;
        background: rgba(0, 0, 0, 0.05);
    }

    /* === TEACHER / ADMIN ENTRY === */
    .ops-teacher-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 14px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        white-space: nowrap;
    }

    .ops-teacher-btn:hover {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
        border-color: #475569;
        box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    }

    .ops-teacher-btn svg {
        width: 18px;
        height: 18px;
        fill: #f97316;
    }

    [data-theme="light"] .ops-teacher-btn {
        background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
        border-color: #94a3b8;
        color: #0f172a;
    }

    [data-theme="light"] .ops-teacher-btn:hover {
        background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
        border-color: #64748b;
    }

    [data-theme="light"] .ops-teacher-btn svg {
        fill: #ea580c;
    }

    /* === TEACHER LOGIN MODAL === */
    .ops-teacher-overlay {
        position: fixed;
        inset: 0;
        background:
            radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.16) 0%, transparent 45%),
            radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
            rgba(2, 6, 23, 0.92);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        padding: 40px 0;
        transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .ops-teacher-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .ops-teacher-modal {
        width: 540px;
        max-width: 94vw;
        padding: 0;
        background: var(--glass-bg);
        background-image: var(--glass-shine);
        overflow: visible;
        backdrop-filter: blur(32px) saturate(180%);
        border: 1px solid rgba(59, 130, 246, 0.35);
        border-radius: 16px;
        box-shadow:
            0 0 0 1px rgba(59, 130, 246, 0.12),
            0 32px 90px -16px rgba(0, 0, 0, 0.75),
            0 0 100px rgba(59, 130, 246, 0.22);
        transform: translateY(20px) scale(0.98);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
        opacity: 0;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .ops-teacher-modal::after {
        content: '';
        position: absolute;
        top: -120px; left: -120px; right: -120px; bottom: -120px;
        background: radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.38) 0%, transparent 50%);
        z-index: -1;
        pointer-events: none;
        filter: blur(90px);
    }

    .ops-teacher-overlay.active .ops-teacher-modal {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .ops-teacher-modal-head {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 60px 36px;
        background:
            linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(99, 102, 241, 0.06) 100%);
        border-bottom: 1px solid rgba(59, 130, 246, 0.18);
        border-radius: 16px 16px 0 0;
    }

    .ops-teacher-modal-logo {
        width: 104px;
        height: 104px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 24px rgba(59, 130, 246, 0.25);
        flex-shrink: 0;
    }

    .ops-teacher-modal-title {
        text-align: center;
        flex: 1;
    }

    .ops-teacher-modal-shield {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 23, 42, 0.65);
        border: 1px solid rgba(96, 165, 250, 0.4);
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(59, 130, 246, 0.22);
        flex-shrink: 0;
    }

    .ops-teacher-modal-shield svg {
        width: 30px;
        height: 30px;
        fill: #60a5fa;
    }

    .ops-teacher-modal h2 {
        font-family: 'Big Shoulders Display', sans-serif;
        font-size: 32px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        margin: 0;
        color: var(--text-main);
    }

    .ops-teacher-modal-sub {
        margin: 8px 0 0;
        font-size: 15px;
        color: var(--text-muted);
        font-family: 'IBM Plex Sans', sans-serif;
        letter-spacing: 0.6px;
    }

    .ops-teacher-modal-body {
        padding: 28px 30px 36px;
        flex: 1 1 auto;
    }

    .ops-teacher-modal-page {
        position: absolute;
        top: 20px;
        right: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 24px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 5px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        color: #f1f5f9;
        cursor: default;
        z-index: 2;
    }

    .ops-teacher-modal-page::before {
        content: attr(data-page);
    }

    #teacherEditOverlay .ops-teacher-actions {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 24px;
        padding: 0 30px;
    }

    #teacherEditOverlay .ops-teacher-modal {
        width: auto;
        min-width: 620px;
    }

    #teacherEditOverlay .ops-teacher-modal-head {
        justify-content: space-between;
        align-items: center;
        padding: 18px 24px;
    }

    #teacherEditOverlay .ops-teacher-modal-logo {
        width: 72px;
        height: 72px;
        margin: 0;
    }

    #teacherEditOverlay .ops-teacher-modal-title {
        text-align: right;
        flex: none;
        padding-right: 40px;
    }

    #teacherEditOverlay .ops-teacher-modal-title h2 {
        font-weight: 700;
        font-size: 24px;
    }

    #teacherEditOverlay .ops-teacher-modal-title .ops-teacher-modal-sub {
        font-size: 18px;
        color: var(--text-main);
        margin: 8px 0 0;
    }

    #teacherBackupWizardOverlay .ops-teacher-modal-head {
        justify-content: space-between;
        align-items: center;
        padding: 18px 24px;
    }

    #teacherBackupWizardOverlay .ops-teacher-modal-logo {
        width: 72px;
        height: 72px;
        margin: 0;
    }

    #teacherBackupWizardOverlay .ops-teacher-modal-title {
        text-align: right;
        flex: none;
        padding-right: 40px;
    }

    #teacherBackupWizardOverlay .ops-teacher-modal-title h2 {
        font-weight: 700;
        font-size: 24px;
    }

    #teacherBackupWizardOverlay .ops-teacher-modal-title .ops-teacher-modal-sub {
        font-size: 15px;
        color: var(--text-muted);
        margin: 8px 0 0;
    }

    #teacherBackupWizardOverlay .ops-teacher-modal {
        width: 620px;
        max-width: 94vw;
        display: flex;
        flex-direction: column;
    }

    #teacherBackupWizardOverlay .ops-teacher-modal-body {
        overflow-y: visible;
    }

    #teacherBackupWizardBody {
        min-height: 400px;
    }

    #teacherEditOverlay .ops-teacher-field textarea {
        min-height: 100px;
    }

    #teacherEditOverlay #editClassYear {
        color-scheme: dark;
    }

    #teacherEditOverlay #editClassYear::-webkit-inner-spin-button,
    #teacherEditOverlay #editClassYear::-webkit-outer-spin-button {
        opacity: 1;
        filter: brightness(1.8) contrast(1.2);
        cursor: pointer;
    }

    #teacherEditOverlay .ops-teacher-field label {
        padding-left: 10px;
    }

    .ops-teacher-field {
        margin-bottom: 20px;
    }

    .ops-teacher-restore-select-body {
        display: flex;
        flex-direction: column;
        min-height: 320px;
    }

    .ops-teacher-restore-select {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto 0;
        width: 100%;
    }

    .ops-teacher-form-row {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
    }

    .ops-teacher-form-row .ops-teacher-field {
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 0;
    }

    .ops-teacher-field label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 12px;
    }

    .ops-teacher-field-icon {
        width: 22px;
        height: 22px;
        fill: #facc15;
        flex-shrink: 0;
    }

    .ops-teacher-field input,
    .ops-teacher-field select,
    .ops-teacher-field textarea {
        width: 100%;
        padding: 0 20px;
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(59, 130, 246, 0.22);
        border-radius: 10px;
        color: var(--text-main);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 16px;
        outline: none;
        transition: all 0.25s ease;
    }

    .ops-teacher-field input,
    .ops-teacher-field select {
        height: 58px;
    }

    .ops-teacher-field textarea {
        padding: 14px 20px;
        min-height: 110px;
        resize: vertical;
    }

    .ops-teacher-field input[type="file"] {
        color: transparent;
        padding: 0 14px;
        cursor: pointer;
    }

    .ops-teacher-field input[type="file"]::file-selector-button {
        height: 38px;
        margin-right: 14px;
        padding: 0 16px;
        background: rgba(59, 130, 246, 0.16);
        border: 1px solid rgba(59, 130, 246, 0.35);
        border-radius: 8px;
        color: var(--text-main);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        cursor: pointer;
    }

    .ops-teacher-field input:focus,
    .ops-teacher-field select:focus,
    .ops-teacher-field textarea:focus {
        background: rgba(15, 23, 42, 0.85);
        border-color: #60a5fa;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 0 22px rgba(59, 130, 246, 0.12);
    }

    /* Prevent browser autofill from painting username/password inputs
       bright yellow. Restore the intended dark background + white text. */
    .ops-teacher-field input:-webkit-autofill,
    .ops-teacher-field input:-webkit-autofill:hover,
    .ops-teacher-field input:-webkit-autofill:focus,
    .ops-teacher-field input:-webkit-autofill:active,
    #advisorUsername:-webkit-autofill,
    #advisorPassword:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #0b1220 inset !important;
        -webkit-text-fill-color: #f1f5f9 !important;
        transition: background-color 5000s ease-in-out 0s;
        border-color: #334155;
    }

    [data-theme="light"] .ops-teacher-field input,
    [data-theme="light"] .ops-teacher-field select,
    [data-theme="light"] .ops-teacher-field textarea {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(59, 130, 246, 0.3);
        color: #0f172a;
    }

    [data-theme="light"] .ops-teacher-field input:focus,
    [data-theme="light"] .ops-teacher-field select:focus,
    [data-theme="light"] .ops-teacher-field textarea:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
    }

    .ops-teacher-actions {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 24px;
    }

    .ops-teacher-actions button,
    .ops-teacher-actions .ops-teacher-cancel-btn {
        flex: 0 0 auto;
        width: 140px;
        height: 44px;
        border: none;
        border-radius: 10px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    #teacherEditActions {
        justify-content: flex-start;
    }

    #teacherDeleteOverlay .ops-teacher-action-btn {
        width: auto;
        min-width: 280px;
        padding: 0 24px;
    }

    .ops-teacher-login-btn {
        background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
        color: #ffffff;
        box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
    }

    .ops-teacher-login-btn:hover {
        background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
        box-shadow: 0 6px 22px rgba(22, 163, 74, 0.45);
        transform: translateY(-1px);
    }

    .ops-teacher-cancel-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 52px;
        padding: 0 14px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .ops-teacher-cancel-btn:hover {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
        border-color: #475569;
        box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    }

    [data-theme="light"] .ops-teacher-cancel-btn {
        background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
        border-color: #94a3b8;
        color: #0f172a;
    }

    [data-theme="light"] .ops-teacher-cancel-btn:hover {
        background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
        border-color: #64748b;
    }

    [data-theme="light"] .ops-teacher-cancel-btn:hover {
        background: #e2e8f0;
    }

    /* === TEACHER MAIN AREA === */
    .ops-teacher-status {
        display: none;
        align-items: center;
        gap: 12px;
        margin-left: 16px;
        padding: 6px 12px;
        background: rgba(16, 185, 129, 0.12);
        border: 1px solid rgba(16, 185, 129, 0.35);
        border-radius: 8px;
        color: #10b981;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ops-teacher-status.active {
        display: inline-flex;
    }

    .ops-teacher-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #10b981;
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    }

    .ops-teacher-logout {
        padding: 4px 10px;
        background: transparent;
        border: 1px solid rgba(16, 185, 129, 0.5);
        border-radius: 6px;
        color: #10b981;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .ops-teacher-logout:hover {
        background: rgba(16, 185, 129, 0.15);
        border-color: #10b981;
    }

    .ops-teacher-main {
        display: none;
        flex-direction: column;
        gap: 20px;
        padding: 0;
        box-sizing: border-box;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .ops-teacher-main.active {
        display: flex;
        flex: 1;
    }

    .ops-main.teacher-active {
        padding: 16px;
        gap: 0;
    }

    .ops-teacher-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 20px;
        background:
            linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(99, 102, 241, 0.04) 100%);
        border: 1px solid rgba(59, 130, 246, 0.12);
        border-radius: 10px;
        box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25);
    }

    .ops-teacher-hero h2 {
        font-family: 'Big Shoulders Display', sans-serif;
        font-size: 42px;
        /* 3.5.586D — Fulvio: "TUTTI (advisor/student) i sotto menu sono
           molto staccati dal titolo principale — possibile fare 15px
           massimo?" The subtitle's own margin-top is only 5px; the rest
           of the gap was this h2's default `line-height:normal` (~1.3
           for Big Shoulders Display = ~13px of dead space inside the
           title's own line box below the glyphs). `1` removes it —
           real title→subtitle gap now ~9px, under the 15px cap, on
           every dashboard hero (shared class). */
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        margin: 0;
        color: #f59e0b;
    }

    .ops-teacher-hero-subtitle {
        margin: 5px 0 0;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--text-muted);
    }

    .ops-teacher-hero > div:first-child {
        flex-shrink: 0;
    }

    /* 3.5.546D: Fulvio — "il menu non va bene, dobbiamo SEMPRE averlo su
       una riga" — `flex-wrap:wrap` let the newest tab (TRANSLATE/Lang)
       drop onto a visually broken second row instead of shrinking to
       fit, since the row's own rounded background box doesn't grow to
       cover a wrapped second line. `nowrap` + a smaller gap/tab padding
       buys back the room the 7th tab needs.
       3.5.555D: Fulvio — "quando hai ristretto i menu, ora se clicco
       COURSES il menu non va fuori l'area, devo usare la scroll bar."
       The `overflow-x:auto` added here as a wrap safety net forces
       overflow-y to `auto` too (CSS overflow computed-value rule: one
       axis non-visible drags the other off `visible`) — that clipped
       the COURSES dropdown, which is an absolutely-positioned child of
       this same element popping out *below* its own box. `3.5.550D`'s
       own width fix already made the row fit without ever needing this
       scroll fallback, so it's removed rather than reworked. */
    .ops-teacher-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 3px;
        padding: 6px;
        background: rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
    }

    [data-theme="light"] .ops-teacher-tabs {
        background: rgba(255, 255, 255, 0.45);
        border-color: rgba(15, 23, 42, 0.06);
    }

    .ops-teacher-tab {
        padding: 10px 7px;
        white-space: nowrap;
        background: transparent;
        border: none;
        border-radius: 10px;
        color: var(--text-muted);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* 3.5.559D: "Liquid Glass" tab bar — Fulvio's own design, shared via
       a claude.ai artifact link, replacing Student Dashboard's own main
       menu AND (as the "shelf" below) the Class Information Hub's own
       in-box tab row. Scoped entirely via `.lg-bar`/`.lg-blob`/`.lg-shelf*`
       — classes added ONLY to Student Dashboard's own markup — so
       Advisor's tab bar and Advisor's own Class Information Hub box are
       completely untouched. Supersedes 3.5.558D's own padding-only fix
       for this same bar (this redesign carries its own, more generous
       padding baked in, so that narrower fix is removed rather than left
       to conflict with it).
       The sliding highlight itself (#studentDashboardTabBlob) is
       positioned in JS — positionStudentDashboardBlob(), hst-core-trainer.js
       — against this bar's own `position:relative`, exactly like the
       artifact's own reference implementation.
       3.5.560D: Fulvio — "non ti ho detto di spostare il menu FUORI
       dall'area STUDENT DASHBOARD... voglio uguale al link." The shelf
       moved from a page-level sibling into THIS SAME `.ops-teacher-hero`
       card (see `.ops-teacher-hero-liquid`/`-toprow` below), so both
       rows share its one background/border instead of the shelf
       floating separately against the plain page background. Also adds
       the artifact's own `Inter` font (Google Fonts, added to the
       existing family list in HST-Paper-Lab.html's <head>) on these
       elements specifically — the shared `.ops-teacher-tab` base rule
       forces `'IBM Plex Mono', monospace` everywhere else in the app,
       which visibly changes glyph width/weight versus the artifact even
       at an identical font-size/padding.
       3.5.561D: Fulvio, comparing side-by-side again — "non voglio che
       mi cambi i colori di sfondo del primo menu... l'area non si deve
       ingrandire perché c'è spazio a sufficienza." Two real, separate
       causes: (1) `.lg-bar`/`.lg-shelf`'s own background was the
       artifact's own TRANSLUCENT overlay (`rgba(255,255,255,0.09→0.02)`)
       + `backdrop-filter` — correct in the artifact, which sits on a
       plain flat navy page, but this hero already carries its OWN blue-
       tinted gradient background (pre-existing, untouched) that bleeds
       through that same translucency and comes out a visibly different
       shade here than in the artifact. Replaced with the OPAQUE flat
       equivalent of that exact overlay blended over the artifact's own
       navy (`#0a0f1c`) — computed once, baked in — so the result reads
       the same regardless of what's actually behind it, hero tint
       included. (2) `gap`/padding trimmed back down — the hero's own
       existing padding was already generous enough for a 2nd row
       without needing this bar's own full 14px on top of it. */
    /* 3.5.564D: Fulvio — "ora me lo hai abbassato... deve essere a 10px
       dal bordo SUPERIORE." Every earlier attempt at this gap (align-
       items:center → flex-end, padding/gap trims) shared the same flaw:
       the title (~85px) and the bar (~48px) were row-siblings, so the
       row's own rendered height was ALWAYS forced to the taller title —
       align-items only moved the bar within that fixed height, it could
       never shrink it, and "move the gap above" (flex-end) just broke
       every OTHER tab (no shelf below to justify it). `.lg-menu-stack`
       (see markup) makes bar+shelf their own independent flex-column, a
       single flex item next to the title rather than nested inside a
       title-height-matched row — its own height is just its own
       content, decoupled from the title entirely. `align-items:flex-
       start` here pins both the title and this stack to the SAME top
       edge, so the bar sits 10px from the top on every tab, and the
       shelf (when shown) sits tight below the bar with no dependency on
       title height either way. */
    /* 3.5.577D: Fulvio — "i due menu non sono centrati VERTICALMENTE
       sull'area, così come anche quelli dell'advisor." `3.5.564D` pinned
       this to `flex-start` specifically so the bar sat a fixed 10px
       from the top on every tab, shelf or no shelf — explicit request
       at the time. Superseded now: centering the whole `.lg-menu-stack`
       (bar, or bar+shelf) within the hero's own height (driven by the
       title) reads better and is what's being asked for now.
       3.5.585D — Fulvio: "quando il sottomenu non è selezionato l'area
       del menu 1 è centrata all'area Dashboard ... Io invece la vorrei
       tenere in ALTO così da non creare questo movimento del menu."
       Centering was exactly the cause: `.lg-menu-stack` is one flex
       item whose height changes when the shelf appears/disappears, so
       `center` re-computed and the bar visibly jumped. `flex-start`
       pins the stack's own top edge to the hero's own top padding —
       the bar never moves, the shelf simply extends below it. */
    .ops-teacher-hero.ops-teacher-hero-liquid {
        align-items: flex-start;
        padding: 10px 20px;
    }

    .ops-advisor-hero-subline {
        display: flex;
        align-items: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    /* --- Advisor SETUP area (from setup-minimum-speed.html mockup) --- */
    .ops-setup-window {
        width: 100%;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); /* 3.5.696D: same gradient as the buttons */
        border: 1px solid #1c2436;
        border-radius: 12px;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0 auto;
    }
    .ops-setup-titlebar {
        height: 44px;
        background: #10182a;
        border-bottom: 1px solid #1c2436;
        display: flex;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
    }
    .ops-setup-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
    }
    .ops-setup-mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
    }
    .ops-setup-body-row {
        display: flex;
        flex-wrap: wrap;
    }
    .ops-setup-pane {
        box-sizing: border-box;
        padding: 28px 32px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-width: 320px;
    }
    .ops-setup-pane-left {
        flex: 2 1 0;
    }
    .ops-setup-pane-right {
        flex: 1 1 0;
    }
    .ops-setup-divider-v {
        width: 1px;
        background: #1c2436;
    }
    .ops-setup-divider-h {
        height: 1px;
        background: #1c2436;
    }
    .ops-setup-section-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .ops-setup-section-label {
        font-size: 15px;
        letter-spacing: 0.12em;
        color: #f2924b;
        font-weight: 700;
    }
    .ops-setup-section-title {
        margin: 0 0 14px;
        font-size: 32px;
        font-weight: 600;
        color: #e6e9f0;
    }
    .ops-setup-section-desc {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
        color: #7c8aa0;
        max-width: 400px;
    }
    .ops-setup-fields-row {
        display: flex;
        align-items: flex-end;
        gap: 14px;
    }
    .ops-setup-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .ops-setup-field-label {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 13px;
        color: #7c8aa0;
        margin-left: 10px;
    }
    input[type="text"].ops-setup-value-input,
    input[type="number"].ops-setup-value-input {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        background: #0e1626;
        border: 1px solid #2a3550;
        border-radius: 8px;
        color: #f5c451;
        font-weight: 600;
        text-align: center;
        width: 130px;
        height: 56px;
        font-size: 32px;
        box-sizing: border-box;
    }
    input[type="text"].ops-setup-value-input-sm,
    input[type="number"].ops-setup-value-input-sm {
        width: 100%;
        height: 56px;
        font-size: 28px;
    }
    .ops-setup-equals {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 18px;
        color: #4a5a78;
        padding-bottom: 14px;
    }
    .ops-setup-hint {
        margin: -12px 0 0;
        font-size: 12px;
        color: #5a6787;
    }
    .ops-setup-arrow {
        align-self: center;
    }
    .ops-setup-variant2-grid {
        flex: 1;
        display: grid;
        grid-template-columns: minmax(0, calc(50% - 50px)) minmax(0, calc(50% + 50px));
        gap: 20px;
    }
    .ops-setup-v2-inputs {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .ops-setup-v2-preview {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding-left: 20px;
        border-left: 1px solid #1c2436;
    }
    .ops-setup-block-label {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.1em;
        color: #4a5a78;
    }
    .ops-setup-sliders-block {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .ops-setup-slider-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .ops-setup-slider-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    .ops-setup-slider-title {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }
    .ops-setup-slider-name {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 14px;
        letter-spacing: 0.05em;
        color: #7c8aa0;
    }
    .ops-setup-slider-name-sm {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 13px;
        letter-spacing: 0.05em;
        color: #7c8aa0;
    }
    .ops-setup-slider-value {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 20px;
        font-weight: 700;
        color: #f5c451;
    }
    .ops-setup-slider-value-sm {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 16px;
        font-weight: 700;
        color: #f5c451;
    }
    .ops-setup-slider-cpm {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 12px;
        color: #7c8aa0;
    }
    .ops-setup-track-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .ops-setup-track {
        height: 8px;
        border-radius: 4px;
        position: relative;
    }
    .ops-setup-track-color {
        background: linear-gradient(90deg, #1c2436 0%, #22c55e 22%, #facc15 50%, #fb923c 72%, #dc2626 100%);
    }
    .ops-setup-track-grey {
        background: linear-gradient(90deg, #3a4258, #e6e9f0);
    }
    .ops-setup-thumb {
        position: absolute;
        top: -7px;
        width: 10px;
        height: 22px;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        pointer-events: none;
    }
    .ops-setup-thumb-grey {
        box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    /* 3.5.685D: the invisible drag area spans badge-center to badge-center (8
       equal badges, 5px gap) with a zero-width native thumb, so the pointer
       maps linearly onto the same positions the thumb/ticks are drawn at. */
    .ops-setup-range {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        position: absolute;
        top: 0;
        left: 5.5px;
        width: calc(100% - 11px);
        height: 100%;
        opacity: 0;
        cursor: pointer;
        margin: 0;
    }
    .ops-setup-range::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; }
    .ops-setup-range::-moz-range-thumb { width: 0; height: 0; border: 0; }

    /* SETUP copy of TRANSMISSION only (production panel untouched): slightly
       wider slider area, and the fader's thumb travel runs exactly from the
       first to the last badge center (pill = (100% - 21px)/8 wide, 3px gaps;
       native thumb 11px box + 1px border -> 6.5px). */
    #transmissionConfigPanel-setup {
        padding-left: 8px;
        padding-right: 8px;
        margin-top: 32px; /* + the 18px flex gap = 50px below MANUAL RECEPTION */
    }
    #transmissionConfigPanel-setup .fader-track-wrap {
        padding: 0 calc((100% - 21px) / 16 - 6.5px);
    }

    /* 3.5.687D layout: mac title bar always black; less air above SETUP, which
       is 3x bigger; the right column (MANUAL RECEPTION + TRANSMISSION) starts
       100px below the window's top border, beside the title, to win height. */
    .ops-setup-titlebar {
        background: #000000;
    }
    .ops-setup-pane-right {
        padding-top: 14px;
        display: grid;
        grid-template-columns: minmax(0, calc(50% - 50px)) minmax(0, calc(50% + 50px));
        column-gap: 20px;
        row-gap: 20px;
        align-content: start;
    }
    .ops-setup-pane-right > .ops-setup-section-header {
        grid-column: 1;
        grid-row: 1;
    }
    .ops-setup-variant2-grid {
        display: contents;
    }
    .ops-setup-v2-inputs {
        grid-column: 1;
        grid-row: 2;
    }
    .ops-setup-v2-preview {
        grid-column: 2;
        grid-row: 1 / span 2;
        /* 100px from the window's top edge = 1 border + 44 title bar + 1 + 14 pane padding + 41 */
        margin-top: 41px;
    }
    .ops-setup-section-label {
        font-size: 33px;
        line-height: 1;
    }
    .ops-setup-ticks {
        position: relative;
        width: 100%;
        height: 16px;
    }
    .ops-setup-tick-major {
        position: absolute;
        top: 0;
        width: 2px;
        height: 16px;
        background: #ffffff;
        border-radius: 1px;
        transform: translateX(-50%);
    }
    .ops-setup-tick-minor {
        position: absolute;
        top: 0;
        width: 1px;
        height: 14px;
        background: #6b7688;
        transform: translateX(-50%);
    }
    .ops-setup-pills {
        display: flex;
        gap: 5px;
    }
    .ops-setup-pill {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        border-radius: 6px;
        padding: 4px 0;
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        cursor: pointer;
        border: 1px solid #2a3550;
        user-select: none;
    }
    .ops-setup-pill-sm {
        font-size: 10px;
        border-radius: 5px;
        padding: 3px 0;
    }
    .ops-setup-pill-off {
        color: #8a93a8;
        background: #10182a;
        border-color: #2a3550;
        font-weight: 400;
    }
    .ops-setup-pill-on {
        color: #fff;
        background: #3b82f6;
        border-color: #3b82f6;
    }
    .ops-setup-footer {
        padding: 18px 32px 24px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        border-top: 1px solid #1c2436;
    }
    .ops-setup-btn {
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        border-radius: 7px;
        padding: 9px 20px;
        cursor: pointer;
        border: 1px solid #2a3550;
    }
    .ops-setup-btn-cancel {
        color: #c3cadb;
        background: transparent;
    }
    .ops-setup-btn-save {
        color: #0b1220;
        background: #f2924b;
        border-color: #f2924b;
        padding: 9px 22px;
    }

    .lg-menu-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 9px;
        /* 3.5.587D — Fulvio: "io ti ho detto di alzare il TESTO, NON di
           restringere l'area — ora l'area quando ci sono i due menu si
           abbassa! Riportala all'altezza di prima, non si deve vedere
           movimento dell'area, sia in STUDENT che in ADVISOR."
           3.5.586D's `line-height:1` shrank the title block (~65px),
           so on shelf-less tabs the hero now collapses to the title's
           own height and visibly grows again when the shelf appears.
           Reserve the shelf's own slot permanently instead: the stack
           always occupies bar (39px) + gap (9px) + shelf (29px) =
           77px whether the shelf is rendered or not — hero height is
           constant on every tab, the bar stays pinned top, zero
           movement in either direction (Student + Advisor share this
           one class). Value verified via headless Chrome measurement
           of the real markup (hero = 99px with AND without shelf). */
        min-height: 77px;
    }

    /* 3.5.568D: Fulvio — "il background del menu 1 prende la sfumatura
       dell'etichetta del programma... proprio come abbiamo fatto per le
       classi attive minimizzate." `--cc-accent` is set on
       #studentDashboardMain by openStudentDashboard() (hst-core-trainer.js)
       from this profile's own enrolled class level. Layered as a
       diagonal tint OVER the existing flat base (never replacing it —
       that base is what keeps this context-independent per 3.5.561D),
       fading out by 55% exactly like the class cards'/Advisor Hub's own
       `--cc-accent` gradient already does elsewhere — same formula,
       never a second invented one. "il menu secondario dovrebbe avere
       il background uniform" — `.lg-shelf` (below) deliberately does
       NOT get this treatment, unchanged. */
    /* 3.5.570D: Fulvio — "il bordo dei due menu è sempre neutro come gli
       altri bottoni" — `#334155` is the app's own established neutral
       border color (`.ops-teacher-action-btn` and everything else that
       calls itself a "normal button"), used here instead of the
       artifact's own whitish translucent border. "lo sfondo dei due
       menu (gradazione solo per il primo) deve essere così" — the base
       (before the level-accent overlay on the main bar only) is now the
       exact same flat navy gradient `.ops-teacher-action-btn` itself
       uses, not a separately-invented dark tone. */
    /* 3.5.571D: Fulvio — "i bordi del menu 1 e 2 devono essere 1px."
       The border itself was always a real 1px line, but the inset
       highlight/shadow pair below (mimicking a glassy bevel) sat right
       on top of it and read as a thicker/doubled border. Removed —
       plain 1px border, only the outer soft drop-shadow kept (it sits
       OUTSIDE the border, doesn't affect how the border itself reads). */
    .ops-teacher-tabs.lg-bar {
        position: relative;
        gap: 2px;
        padding: 6px;
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--cc-accent, #f97316) 22%, transparent) 0%, transparent 55%),
            linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 10px;
        box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    }

    .lg-blob {
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 0;
        width: 0;
        /* 3.5.578D: Fulvio confirmed via a direct side-by-side comparison
           tool (real shape vs labeled 6/8/10/12/14px reference swatches,
           no shadow) that the real 10px corner reads visually closer to
           14px on this small a pill — "fai 10px, e se è già 10px prova a
           fare 5px." It was already 10px (confirmed yet again); per his
           own explicit fallback, dropped to 5px instead of chasing the
           number further. */
        border-radius: 5px;
        background: linear-gradient(160deg, #60a5fa, #3b82f6);
        /* 3.5.577D: Fulvio, 5 rounds running — "i round corner non sono
           10px!!" The radius genuinely always WAS 10px (verified via
           computed style, an isolated render, and the live deployed
           CSS, repeatedly) — the actual culprit, found by rendering the
           real shape next to a true 10px reference box side by side:
           the artifact's own 20px-blur glow was so large and strong
           (0.55 alpha) that it visually smeared the corner's own curve
           into the surrounding glow, reading as noticeably LESS rounded
           than an identical shape with no shadow at all. Tightened the
           outer glow (20px blur → 4px, 6px offset → 2px) — same color/
           intent, just no longer strong enough to obscure the corner it
           surrounds. The radius itself is unchanged (still 10px). */
        box-shadow: 0 2px 4px rgba(59,130,246,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
        transition: left 380ms cubic-bezier(.2,.9,.25,1.2), width 380ms cubic-bezier(.2,.9,.25,1.2);
        z-index: 0;
        pointer-events: none;
    }

    .ops-teacher-tabs.lg-bar .ops-teacher-tab {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        line-height: 1;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
        font-size: 13px;
        font-weight: 700;
        padding: 4px 16px;
        border-radius: 8px;
        background: transparent;
        border: none;
        box-shadow: none;
        color: #9aa7bd;
        transition: color 200ms ease;
    }

    /* 3.5.567D: Fulvio — "ora è TROPPO stretto il primo menu. metti 2px
       sopra e sotto il titolo creando span." `3.5.566D`'s 4px vertical
       button padding read too tight — rather than just bumping that
       number again, Fulvio asked for the extra room via a dedicated
       `<span>` around the label specifically, so the button's own
       padding and the label's own breathing room are two separate,
       independently-tunable values going forward. */
    .lg-item-label {
        display: block;
        padding: 2px 0;
    }

    .ops-teacher-tabs.lg-bar .ops-teacher-tab-backup {
        color: #fb923c;
    }

    .ops-teacher-tabs.lg-bar .ops-teacher-tab:hover {
        color: #eef2f8;
        background: transparent;
    }

    /* 3.5.575D: Fulvio — "i menu selezionati devono avere un cornere di
       10px come l'area menu 1 e 2... non mi sembra che siano 10px!!
       CORREGGI PER TUTTI I MENU student e advisor." The bar's own
       ACTIVE button is transparent (the sliding `.lg-blob` behind it —
       already 10px, see its own rule — is what's actually visible), but
       stating it here too costs nothing and removes any doubt; shared/
       class-based, so this one rule already covers both Student's and
       Advisor's own bar identically. */
    .ops-teacher-tabs.lg-bar .ops-teacher-tab.active {
        color: #ffffff;
        background: transparent;
        border: none;
        border-radius: 5px;
        box-shadow: none;
    }

    /* The "shelf" — the artifact's own second row, hosting the Class
       Information Hub's own relocated tab buttons (Welcome/Course/Team/
       Resources — real `.cc-tab` elements, unchanged onclick handlers,
       see renderClassContentHub() in hst-class-hub.js) directly under
       the main Student Dashboard tabs instead of inside the Hub's own
       box further down the page. */
    .lg-shelf-wrap {
        display: flex;
        justify-content: flex-end;
    }

    .lg-shelf {
        display: flex;
        gap: 2px;
        padding: 3px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 10px;
        animation: lg-shelf-float-up 380ms cubic-bezier(.2,.9,.25,1.25);
    }

    /* 3.5.565D: the artifact's own `<div class="div">` — a thin vertical
       divider after Welcome and after Team (see shelfTabsHtml's own
       `dividerAfter` in hst-class-hub.js). Matches the artifact's exact
       `.lg-shelf .div` rule (renamed `.lg-shelf-div` here only to avoid
       a bare `.div` class name colliding with anything else in this
       stylesheet). */
    .lg-shelf-div {
        width: 1px;
        background: rgba(255,255,255,0.14);
        margin: 2px 2px;
    }

    @keyframes lg-shelf-float-up {
        from { opacity: 0; transform: translateY(10px) scale(.96); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* 3.5.565D: Fulvio — "ti ho detto di ridurre il menu 2 perché
       comunque allunga l'area. fai i testi più piccoli e centrati
       all'area arancione, adesso mi sembra che ci sia più spazio sotto
       il testo che non sopra." Shelf font/padding shrunk further
       (smaller than the main bar now, on purpose — the shelf is
       explicitly the one being reduced here); `display:inline-flex` +
       `line-height:1` added so the label sits truly centered inside its
       own pill regardless of the font's own ascent/descent metrics
       (Inter's default line-height was leaving visibly more room below
       the glyphs than above inside the orange WELCOME/active pill). */
    .lg-shelf .cc-tab,
    .lg-shelf .cc-course-dropdown-list .cc-course-dropdown-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        line-height: 1;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
        font-size: 11px;
        font-weight: 600;
        padding: 5px 10px;
        /* 3.5.583D — Fulvio: "diamo un po più di respiro al menu 2 in
           advisor dashboard — aggiungerei uno span di 2px per bottone,
           sinistra e destra, e i bottoni non li farei finire al bordo
           sinistro e destro ma gli darei 5px di spazio ... lo stesso
           spazio di respiro diamolo al menu 2 di Student dashboard."
           The shared `.lg-shelf` covers every second-line menu at once
           (Advisor Courses shelf, Advisor class shelf, Student's own
           shelf). Each tab's own 2px side margins stack on the shelf's
           existing 3px padding → the outermost buttons sit exactly 5px
           from the bar's own left/right border, and adjacent buttons
           get 2+2+2=6px of breathing room (was 2px gap only). */
        margin: 0 2px;
        border-radius: 7px;
        color: #9aa7bd;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .lg-shelf .cc-tab:hover {
        color: #eef2f8;
        background: rgba(255,255,255,0.06);
    }

    /* 3.5.575D: Fulvio — "il menu selezionato in ARANCIONE ha il testo
       più grande di quando non è selezionato... il testo rimane della
       stessa grandezza." The OLD Hub tab styling (`.cc-tab.active`, way
       below — predates the shelf, still used by nothing today but never
       removed) sets its own `font-size:13px` — same specificity as this
       rule's own SIBLING (`.lg-shelf .cc-tab`, non-active, 11px) since
       CSS cascades per-property: neither of THOSE two selectors is more
       specific than the other, so source order decided it, and
       `.cc-tab.active` sits later in the file. This rule itself (3
       classes: `.lg-shelf`+`.cc-tab`+`.active`) IS more specific than
       both, but never actually stated its own font-size before, so had
       nothing to contribute for THIS property. Stated explicitly now —
       wins outright regardless of source order, matching the inactive
       11px exactly. */
    .lg-shelf .cc-tab.active,
    .lg-shelf .cc-tab.cc-course-selected {
        font-size: 11px;
        color: #1a0f04;
        background: linear-gradient(160deg, #fb923c, #f97316);
        /* 3.5.577D: same glow-tightening fix as .lg-blob's own — a wide
           14px blur was smearing this pill's own 10px corner too.
           3.5.578D: Fulvio, pointing at this exact orange pill via a
           side-by-side comparison tool — "quello arancione! corrisponde
           di più a 14px... se confermi che sono 10px, fai 5px!" Dropped
           to 5px, same reasoning as .lg-blob's own. */
        box-shadow: 0 2px 4px rgba(249,115,22,0.5), inset 0 1px 1px rgba(255,255,255,0.3);
        border: none;
        border-radius: 5px;
    }

    .ops-teacher-tab:hover {
        color: var(--text-main);
        background: rgba(255, 255, 255, 0.05);
    }

    .ops-teacher-tab.active {
        font-size: 13px;
        color: #0f172a;
        background: linear-gradient(180deg, rgba(96, 165, 250, 0.85) 0%, rgba(59, 130, 246, 0.75) 100%);
        border: 1px solid rgba(96, 165, 250, 0.5);
        box-shadow:
            0 0 24px rgba(59, 130, 246, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    [data-theme="light"] .ops-teacher-tab.active {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.85) 0%, rgba(37, 99, 235, 0.85) 100%);
        border-color: rgba(59, 130, 246, 0.5);
    }

    .ops-teacher-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex: 1;
        min-width: 0;
    }

    .ops-teacher-panel {
        display: none;
        flex-direction: column;
        gap: 20px;
        min-width: 0;
    }

    .ops-teacher-panel.active {
        display: flex;
    }

    .ops-teacher-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }
    .profile-nav-label { color: #94a3b8; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 600; min-width: 100px; text-align: right; display: flex; align-items: center; justify-content: flex-end; }
    .profile-nav-label.next { text-align: left; justify-content: flex-start; }
    #profilePrevNext { align-items: center; gap: 10px; }
    #profilePrevBtn, #profileNextBtn { width: 160px; position: relative; font-size: 15px; }
    #profilePrevBtn { justify-content: flex-start; padding-left: 46px; }
    #profileNextBtn { justify-content: flex-end; padding-right: 46px; }
    #profilePrevBtn svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
    #profileNextBtn svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

    .ops-teacher-search {
        height: 44px;
        min-width: 260px;
        padding: 0 18px;
        background: var(--input-bg);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        color: var(--text-main);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        outline: none;
    }

    .ops-teacher-search:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .ops-teacher-search-btn {
        height: 44px;
        padding: 0 22px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .ops-teacher-search-btn:hover {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
        border-color: #475569;
    }

    .ops-teacher-filter {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ops-teacher-filter select {
        height: 44px;
        padding: 0 14px;
        background: var(--input-bg);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        color: var(--text-main);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
    }

    .advisor-settings-catalog {
        display: flex;
        flex-direction: column;
        gap: 24px;
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
    }

    .settings-section {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 10px;
        padding: 20px;
    }

    .settings-section-title {
        font-size: 16px;
        font-weight: 700;
        color: #facc15;
        margin: 0 0 16px 0;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    .settings-group {
        margin-bottom: 18px;
    }

    .settings-group:last-child {
        margin-bottom: 0;
    }

    .settings-group-title {
        font-size: 13px;
        font-weight: 600;
        color: #94a3b8;
        margin: 0 0 10px 0;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .settings-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .settings-item {
        font-size: 13px;
        color: #e2e8f0;
    }

    .settings-flags {
        display: inline-flex;
        align-items: center;
        gap: 12px;
    }

    .settings-flags .lang-flag {
        width: 32px;
        height: 18px;
        border-radius: 3px;
        object-fit: cover;
    }

    .settings-palette {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .settings-color-swatch {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        border: 1px solid #334155;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px;
    }

    .settings-swatch-number {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 22px;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }

    .settings-swatch-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9px;
        font-weight: 600;
        color: #ffffff;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.2;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }

    .ops-advisor-palette-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ops-advisor-palette-row {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .ops-advisor-palette-row .settings-color-swatch {
        width: 48px;
        height: 48px;
    }

    .ops-advisor-palette-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .ops-advisor-key-code {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        padding: 2px 6px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 6px;
        color: #facc15;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.3px;
        margin-right: 18px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .ops-advisor-keys-table {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ops-advisor-keys-table-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: rgba(15, 23, 42, 0.65);
        border: 1px solid #334155;
        border-radius: 8px;
    }

    .ops-advisor-keys-table-hcol {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 700;
        color: #facc15;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    .ops-advisor-keys-table-hcol:last-child {
        text-align: right;
    }

    .ops-advisor-keys-table-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid #334155;
        border-radius: 8px;
    }

    .ops-advisor-key-preview {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 44px;
    }

    .ops-advisor-key-preview > * {
        flex-shrink: 0;
    }

    .ops-advisor-key-preview .ops-guide-btn {
        margin-left: 0;
    }

    .ops-advisor-key-location {
        width: 220px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        text-align: right;
        letter-spacing: 0.4px;
    }

    .ops-advisor-keys-grid {
        column-count: 2;
        column-gap: 14px;
        width: 100%;
    }

    .ops-advisor-key-card {
        break-inside: avoid;
        width: 100%;
        box-sizing: border-box;
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 5px 10px;
        margin-bottom: 10px;
    }

    .ops-advisor-key-card:last-child {
        margin-bottom: 0;
    }

    .ops-advisor-key-card-main {
        display: grid;
        grid-template-columns: 50px 1fr 120px;
        gap: 10px;
        align-items: center;
    }

    .ops-advisor-key-number-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        margin-top: 3px;
    }

    .ops-advisor-key-card-main .ops-advisor-key-code {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: #f1f5f9;
    }

    .ops-advisor-key-preview-stack {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
    }

    .ops-advisor-key-preview-stack .ops-advisor-key-preview {
        flex: none;
    }

    .ops-advisor-key-card .ops-advisor-key-preview > * {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ops-advisor-key-card .ops-advisor-key-preview .ops-advisor-daydark-btn,
    .ops-advisor-key-card .ops-advisor-key-preview .seg-btn,
    .ops-advisor-key-card .ops-advisor-key-preview .ops-teacher-tab,
    .ops-advisor-key-card .ops-advisor-key-preview .ops-control-btn,
    .ops-advisor-key-card .ops-advisor-key-preview .ops-teacher-action-btn,
    .ops-advisor-key-card .ops-advisor-key-preview .ops-guide-btn,
    .ops-advisor-key-card .ops-advisor-key-preview .ops-teacher-cancel-btn {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ops-advisor-key-card .ops-advisor-key-preview .ops-control-btn {
        width: 44px !important;
    }

    .ops-advisor-key-card .ops-advisor-key-preview .ops-control-btn img {
        width: 36px !important;
        height: 22px !important;
    }

    .ops-advisor-key-card .ops-advisor-key-preview .settings-color-swatch {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }

    .ops-advisor-key-card .ops-advisor-key-preview .settings-swatch-number {
        font-size: 12px !important;
    }

    .ops-advisor-key-number-block .ops-advisor-key-card-location {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 0.4px;
        margin-top: 3px;
    }

    .ops-advisor-key-pages {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        align-content: flex-start;
        align-self: flex-start;
        max-width: 120px;
    }

    .ops-advisor-key-page {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 24px;
        padding: 0;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 5px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        color: #f1f5f9;
        cursor: help;
        position: relative;
    }

    .ops-advisor-key-page.pending {
        background: #facc15;
        border-color: #eab308;
        color: #1e293b;
    }

    .ops-advisor-key-page::before {
        content: attr(data-page);
    }

    .ops-advisor-key-page:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 8px;
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        color: #facc15;
        white-space: nowrap;
        z-index: 10;
        margin-bottom: 4px;
    }

    .ops-advisor-keys-filter {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(51, 65, 85, 0.6);
    }

    .ops-advisor-keys-filter-btn {
        padding: 8px 14px;
        border: 1px solid #334155;
        border-radius: 6px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .ops-advisor-keys-filter-btn:hover {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
        border-color: #475569;
    }

    .ops-advisor-keys-filter-btn.active {
        background: #facc15;
        color: #0f172a;
        border-color: #facc15;
    }

    .advisor-settings-catalog button:disabled,
    .advisor-settings-catalog .manual-history-count {
        opacity: 0.7;
        cursor: default;
        pointer-events: none;
    }

    .ops-advisor-settings {
        display: none;
        flex-direction: column;
        width: 100%;
        min-height: calc(100vh - 70px);
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0;
    }

    .ops-advisor-settings.active {
        display: flex;
    }

    .ops-advisor-settings-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 20px;
        margin: 0 0 16px 0;
        background: #1d466b;
        border: 1px solid #163a5c;
        border-radius: 10px;
        box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25);
    }

    .ops-advisor-settings-hero h2 {
        font-family: 'Big Shoulders Display', sans-serif;
        font-size: 42px;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        margin: 0;
        color: #f59e0b;
    }

    .ops-advisor-settings-subtitle {
        margin: 5px 0 0;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--text-muted);
    }

    .ops-advisor-hero-section-title {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .ops-advisor-hero-section-name {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 22px;
        font-weight: 700;
        color: #f1f5f9;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ops-advisor-hero-section-sub {
        font-size: 14px;
        color: #94a3b8;
        text-align: right;
        max-width: 320px;
    }



    .ops-advisor-settings-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .ops-advisor-content-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 10px;
    }

    .ops-advisor-content-group h4 {
        font-size: 18px;
        font-weight: 700;
        color: #facc15;
        margin: 0 0 4px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    .ops-advisor-content-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
    }

    .ops-advisor-content-title {
        font-size: 22px;
        font-weight: 700;
        color: #f1f5f9;
        margin: 0 0 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ops-advisor-content-desc {
        font-size: 16px;
        color: #94a3b8;
        margin: 0;
        line-height: 1.4;
    }

    .ops-advisor-section-filter-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 16px;
    }

    .ops-advisor-sort-main {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .ops-advisor-sort-main-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 44px;
        padding: 0 20px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 10px;
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .ops-advisor-sort-main-btn:hover {
        border-color: #475569;
    }

    .ops-advisor-sort-main-btn.active {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        color: #f1f5f9;
        border-color: #facc15;
    }

    .ops-advisor-sort-arrow {
        color: #facc15;
        font-size: 14px;
        font-weight: 700;
    }

    .ops-advisor-control {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ops-advisor-daydark-toggle {
        display: inline-flex;
        gap: 0;
        border: 1px solid #334155;
        border-radius: 10px;
        overflow: hidden;
    }

    .ops-advisor-daydark-btn {
        padding: 12px 24px;
        background: #1e293b;
        border: none;
        color: #94a3b8;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: default;
    }

    .ops-advisor-daydark-btn.active {
        background: #60a5fa;
        color: #000000;
    }

    .ops-advisor-control .seg-btn {
        font-size: 16px !important;
        padding: 14px 22px !important;
        letter-spacing: 0.4px;
    }

    .ops-teacher-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        align-items: start;
        width: 100%;
        min-width: 0;
    }

    .ops-teacher-column {
        display: flex;
        flex-direction: column;
        gap: 22px;
        min-width: 0;
    }

    .ops-teacher-column.archived-column .ops-teacher-card {
        padding: 14px;
    }
    .ops-teacher-column.archived-column .ops-teacher-card p,
    .ops-teacher-column.archived-column .ops-teacher-card .ops-teacher-speed-line,
    .ops-teacher-column.archived-column .ops-teacher-card .ops-teacher-card-footer {
        display: none;
    }

    /* 3.5.386D: each CLASSES card's own background is now tinted by its
       LEVEL, per Fulvio's own explicit request — "in TEAM ci sono i
       background arancione/verde/blu usati per le categorie
       toplist/trainer/freak.. queste gradazioni le voglio usare nelle
       schede quando uso il menu CLASSES.. ma usando la gradazione in
       base all'etichetta.. prendi le gradazioni delle etichette." Reuses
       the level badge's own EXACT existing colors (never a second,
       invented palette) via `--card-accent` (set inline per card from
       `getCcLevelAccent(c.level)` — the SAME lookup already driving the
       Class Information Hub's own `--cc-accent`, so this and that stay
       in sync automatically): BEGINNER `#22c55e` green, FUNDAMENTAL
       `#f59e0b` amber, INTERMEDIATE `#60a5fa` light blue/celeste,
       ADVANCED `#f97316` orange — answering Fulvio's own "FUNDAMENTAL
       gradazione ??" question. Same `color-mix()`-into-dark-background
       gradient TECHNIQUE already used by the Hub's own `.cc-tabs`
       background, applied here instead of the previous plain
       `--glass-bg`. This REPLACES the old `.ops-teacher-card-alt`
       year-index-based alternating indigo background (removed outright,
       see classCardHTML() — that alternation carried no real meaning;
       level does). 3.5.388D correction: the border was ALSO tinted by
       `--card-accent` in the first pass — Fulvio's own explicit "volevo
       solo la gradazione nell'area, il bordo doveva restare neutro"
       reverts the border (both resting and hover) back to its original
       plain neutral color, unrelated to level; only the background area
       itself carries the level tint. 3.5.389D: the tint itself was too
       subtle to notice at a glance ("la gradazione nelle schede si vede
       poco.. accentuala un pochino") — color-mix percentage raised
       16%→32% and the gradient's own dark stop pushed further out
       (60%→75%, opacity 0.85→0.8) so the accent color visibly spreads
       across more of the card instead of fading out almost immediately. */
    .ops-teacher-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 26px;
        background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #f97316) 32%, transparent) 0%, rgba(15, 23, 42, 0.8) 75%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        box-shadow: var(--shadow-card);
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
        cursor: pointer;
    }

    .ops-teacher-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-card-hover);
        border-color: rgba(59, 130, 246, 0.35);
    }

    /* --- Archived class mockup styles (visual only) --- */
    .ops-teacher-mock-btn {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        background: #475569;
        color: #fff;
        border: none;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;
    }
    .ops-teacher-mock-btn.active { background: #3b82f6; }
    .ops-teacher-mock-btn:hover { background: #64748b; }

    /* 1: V1 ORIGINALE — blur + grigio + ARCHIVED piccolo */
    .ops-teacher-card.mock-archived-1 {
        position: relative;
        overflow: hidden;
        background: rgba(15, 23, 42, 0.65);
        border-color: rgba(148, 163, 184, 0.25);
    }
    .ops-teacher-card.mock-archived-1 > * {
        filter: grayscale(1) brightness(0.45);
        opacity: 0.45;
    }
    .ops-teacher-card.mock-archived-1::before {
        content: '';
        position: absolute;
        z-index: 2;
        top: 50%;
        right: -50px;
        width: 240px;
        height: 44px;
        background: rgba(37, 99, 235, 0.45);
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        transform: translateY(-50%) rotate(-35deg);
    }
    .ops-teacher-card.mock-archived-1::after {
        content: 'ARCHIVED';
        position: absolute;
        z-index: 3;
        top: 50%;
        right: -50px;
        width: 240px;
        height: 44px;
        color: #0f172a;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 2px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 0 4px #93c5fd, 0 0 8px #3b82f6;
        transform: translateY(-50%) rotate(-35deg);
    }
    .ops-teacher-card.mock-archived-1:hover::after {
        color: #c0c0c0;
        font-weight: 400;
    }
    .ops-teacher-grid.compact .ops-teacher-card.mock-archived-1::after {
        transform: translateY(-50%) rotate(-35deg);
    }

    /* 2: V1 COMBINATA — nastro grigio trasparente che esce dai bordi */
    .ops-teacher-card.mock-archived-2 {
        position: relative;
        overflow: hidden;
        background: rgba(15, 23, 42, 0.65);
        border-color: rgba(148, 163, 184, 0.25);
    }
    .ops-teacher-card.mock-archived-2 .ops-teacher-class-title span:not(.ops-teacher-year-span),
    .ops-teacher-card.mock-archived-2 p,
    .ops-teacher-card.mock-archived-2 .ops-teacher-card-meta,
    .ops-teacher-card.mock-archived-2 .ops-teacher-student-count,
    .ops-teacher-card.mock-archived-2 .ops-teacher-wpm,
    .ops-teacher-card.mock-archived-2 .ops-teacher-cpm {
        color: #94a3b8 !important;
    }
    .ops-teacher-card.mock-archived-2 .ops-teacher-year-span {
        color: var(--year-color, currentColor) !important;
    }
    .ops-teacher-card.mock-archived-2 .ops-teacher-badge {
        opacity: 0.85;
    }
    .ops-teacher-card.mock-archived-2::before {
        content: '';
        position: absolute;
        z-index: 2;
        bottom: 0;
        right: 0;
        width: 240px;
        height: 44px;
        background: rgba(245, 158, 11, 0.85);
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        transform: translate(43px, -18px) rotate(-35deg);
    }
    .ops-teacher-card.mock-archived-2::after {
        content: 'ARCHIVED';
        position: absolute;
        z-index: 3;
        bottom: 0;
        right: 0;
        width: 240px;
        height: 44px;
        color: #0f172a;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 2px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 0 4px #fbbf24, 0 0 8px #f59e0b;
        transform: translate(48px, -23px) rotate(-35deg);
    }

    /* 3: angolo di pagina piegato */
    .ops-teacher-card.mock-archived-3 {
        position: relative;
        overflow: hidden;
        background: rgba(15, 23, 42, 0.65);
        border-color: rgba(148, 163, 184, 0.25);
        clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
    }
    .ops-teacher-card.mock-archived-3::before {
        content: '';
        position: absolute;
        z-index: 2;
        bottom: 0;
        right: 0;
        width: 240px;
        height: 44px;
        background: rgba(59, 130, 246, 0.85);
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        transform: translate(43px, -18px) rotate(-35deg);
    }
    .ops-teacher-card.mock-archived-3::after {
        content: 'ARCHIVED';
        position: absolute;
        z-index: 3;
        bottom: 0;
        right: 0;
        width: 240px;
        height: 44px;
        color: #0f172a;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 2px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 0 4px #93c5fd, 0 0 8px #3b82f6;
        transform: translate(48px, -23px) rotate(-35deg);
    }

    /* 4: V4 ORIGINALE — angolo piegato HISTORIC */
    .ops-teacher-card.mock-archived-4 {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.25);
        background: rgba(15, 23, 42, 0.55);
    }
    .ops-teacher-card.mock-archived-4::before {
        content: 'HISTORIC';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 120px;
        height: 28px;
        background: #64748b;
        color: #0f172a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(32px, 8px) rotate(-35deg);
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }

    /* 5: V4 NUOVA — fascia grigia trasparente laterale sinistra */
    .ops-teacher-card.mock-archived-5 {
        position: relative;
        overflow: hidden;
        padding-left: 52px;
        border-color: rgba(148, 163, 184, 0.25);
        background: rgba(15, 23, 42, 0.55);
    }
    .ops-teacher-card.mock-archived-5::before {
        content: 'ARCHIVED';
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 100%;
        background: rgba(100, 116, 139, 0.55);
        color: rgba(255,255,255,0.95);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 2px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 1px 2px rgba(0,0,0,0.4);
        box-shadow: 2px 0 8px rgba(0,0,0,0.15);
        backdrop-filter: blur(2px);
    }

    /* 6: cartellino vintage arancione */
    .ops-teacher-card.mock-archived-6 {
        position: relative;
        overflow: hidden;
        border: 1px dashed rgba(148, 163, 184, 0.35);
        background: rgba(15, 23, 42, 0.6);
    }
    .ops-teacher-card.mock-archived-6::before {
        content: 'ARCHIVED';
        position: absolute;
        top: 12px;
        right: -34px;
        width: 140px;
        height: 30px;
        background: rgba(245, 158, 11, 0.85);
        color: #0f172a;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate(35deg);
        box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    }

    /* 7: timbro umido rosso */
    .ops-teacher-card.mock-archived-7 {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.25);
    }
    .ops-teacher-card.mock-archived-7::after {
        content: 'ARCHIVED';
        position: absolute;
        bottom: 14px;
        right: 14px;
        width: 100px;
        height: 100px;
        border: 4px solid rgba(239, 68, 68, 0.45);
        border-radius: 50%;
        color: rgba(239, 68, 68, 0.55);
        font-family: 'Big Shoulders Display', sans-serif;
        font-size: 17px;
        font-weight: 900;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate(-18deg);
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) inset;
        text-transform: uppercase;
    }

    /* 8: bandierina expired in alto */
    .ops-teacher-card.mock-archived-8 {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.25);
    }
    .ops-teacher-card.mock-archived-8::before {
        content: 'EXPIRED';
        position: absolute;
        top: 0;
        right: 12px;
        width: 36px;
        height: 52px;
        background: rgba(100, 116, 139, 0.75);
        color: rgba(255,255,255,0.95);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .ops-teacher-card h3 {
        font-family: 'Big Shoulders Display', sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin: 0;
        color: var(--text-main);
    }

    .ops-teacher-card p {
        margin: 0;
        font-size: 15px;
        color: var(--text-muted);
        line-height: 1.55;
    }

    .ops-teacher-class-title {
        font-family: 'Big Shoulders Display', sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin: 0;
        color: var(--text-main);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .ops-teacher-group-white {
        color: var(--text-main);
    }

    .ops-teacher-group-yellow {
        color: #facc15;
    }

    .ops-teacher-calendar-icon {
        width: 22px;
        height: 22px;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .ops-teacher-student-number {
        color: #f97316;
    }

    .ops-teacher-card-group {
        font-size: 15px;
        color: #facc15;
        font-weight: 700;
        margin-top: 4px;
    }

    .ops-teacher-speed-line {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 15px;
        margin-top: 2px;
    }

    .ops-teacher-wpm {
        color: #facc15;
        font-weight: 700;
    }

    .ops-teacher-cpm {
        color: #f1f5f9;
        font-weight: 600;
    }

    [data-theme="light"] .ops-teacher-cpm {
        color: #0f172a;
    }

    .ops-teacher-card-footer {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .ops-teacher-student-count {
        color: #ffffff;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .ops-teacher-card-meta {
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        color: #ffffff;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
    }

    .ops-teacher-table-wrap {
        background: var(--glass-bg);
        background-image: var(--glass-shine);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        box-shadow: var(--shadow-card);
        overflow: hidden;
        overflow-x: auto;
    }

    .ops-teacher-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .ops-teacher-table th,
    .ops-teacher-table td {
        padding: 16px 20px;
        text-align: left;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        vertical-align: middle;
    }

    /* 3.5.546D: Fulvio — "non si capisce niente" — #teacherTranslateTable
       inherits `.ops-teacher-table`'s own `table-layout:fixed` with NO
       explicit column widths, so every column got an equal share
       regardless of content; a long dotted key ("backup.card.byClass.desc")
       or English phrase had nowhere to wrap and just overflowed straight
       into the next column's own text, rendering as garbled overlapping
       characters.
       3.5.548D: that first fix (explicit widths) wasn't enough on its
       own — Fulvio: "ancora un casino" — because renderTranslateRow()'s
       own Key `<td>` still carried an inline `white-space:nowrap`,
       which overrides `overflow-wrap` entirely (nowrap means "never
       break a line here," full stop). Real fix: Key and English are no
       longer two side-by-side columns competing for width at all — one
       merged column with the key stacked small/muted above the English
       text (see renderTranslateRow()), so there is nothing left to
       overflow into. Only 6 columns now, widths adjusted to match. */
    #teacherTranslateTable th:nth-child(1), #teacherTranslateTable td:nth-child(1) { width: 8%; }
    #teacherTranslateTable th:nth-child(2), #teacherTranslateTable td:nth-child(2) { width: 32%; overflow-wrap: anywhere; }
    #teacherTranslateTable th:nth-child(3), #teacherTranslateTable td:nth-child(3) { width: 17%; }
    #teacherTranslateTable th:nth-child(4), #teacherTranslateTable td:nth-child(4) { width: 17%; }
    #teacherTranslateTable th:nth-child(5), #teacherTranslateTable td:nth-child(5) { width: 17%; }
    #teacherTranslateTable th:nth-child(6), #teacherTranslateTable td:nth-child(6) { width: 9%; }

    .ops-teacher-table th {
        padding: 8px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-main);
        background: rgba(15, 23, 42, 0.45);
        vertical-align: middle;
    }

    .ops-teacher-table th:has(.ops-teacher-sort-btn) {
        padding: 8px;
    }

    .ops-teacher-sort-btn {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 10px 14px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .ops-teacher-sort-btn:hover {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
        border-color: #475569;
    }

    .ops-teacher-sort-btn::after {
        display: inline-block;
        width: 20px;
        text-align: center;
        content: '■';
        font-size: 12px;
        color: #475569;
        margin-left: auto;
    }

    .ops-teacher-sort-btn.asc::after {
        content: '▲';
        color: #facc15;
        font-size: 15px;
    }

    .ops-teacher-sort-btn.desc::after {
        content: '▼';
        color: #facc15;
        font-size: 15px;
    }

    [data-theme="light"] .ops-teacher-table th {
        background: rgba(241, 245, 249, 0.65);
    }

    .ops-teacher-student-name {
        position: relative;
        vertical-align: middle;
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
        padding-right: 70px;
    }

    .ops-teacher-student-callsign {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 15px;
        color: var(--text-muted);
    }
    .ops-teacher-student-id {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 5px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
    }
    #profileLayoutButtons {
        align-items: center;
        gap: 6px;
    }
    #profileLayoutButtons button.active {
        background: #3b82f6;
        border-color: #3b82f6;
        color: #fff;
    }

    .ops-teacher-student-flag-wrap {
        width: 32px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        margin-right: 12px;
    }

    .ops-teacher-student-flag {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 1px solid #ffffff;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .ops-teacher-student-flag-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #ffffff;
        border-radius: 3px;
        color: #ffffff;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 700;
        box-sizing: border-box;
    }

    .ops-teacher-class-label {
        margin-left: 8px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        font-weight: 700;
        color: #facc15;
        text-transform: uppercase;
    }

    .ops-teacher-progress-label {
        display: inline-block;
        margin-top: 6px;
        font-size: 13px;
        color: var(--text-muted);
        font-family: 'IBM Plex Mono', monospace;
        white-space: nowrap;
    }

    .ops-teacher-status-cell {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center;
    }

    .ops-teacher-table td:last-child {
        text-align: center;
    }

    .ops-teacher-table tr:hover td {
        background: rgba(59, 130, 246, 0.05);
    }

    .ops-teacher-table tr:last-child td {
        border-bottom: none;
    }

    /* 3.5.471D: Advisor RESULTS ungrouped view — the thin separator now
       appears ONLY between different students, tightening the padding
       on both sides of a same-callsign pair so the gap didn't stay at
       the old table's larger default.
       3.5.528D: that per-side 10px tightening was written for the OLD
       #teacherResultsTable/#studentDashboardResultsTable's own bigger
       base row padding — it never got removed when 3.5.525D moved both
       tables onto `.cc-perf-table`, whose base `td` padding is already
       just 5px (a deliberate 10px TOTAL gap, see 3.5.348D's own comment
       on `.cc-perf-table td` below). Stacking a 10px-per-side override
       on top of that made a same-callsign gap (10+10=20px) BIGGER than
       the default different-callsign gap (5+5=10px) — backwards from
       the original intent, and exactly what Fulvio's own screenshots
       flagged: "non intendevo che lo spazio rimanesse... tra bandiera
       dovrebbero esserci 10px." Removed — `.cc-perf-table`'s own
       `tr.group-open td { border-bottom: none }` (below) already
       suppresses the line with no padding override needed; the default
       5px+5px padding alone gives the correct 10px gap.
    */

    /* 3.5.526D: the block of nth-child rules that used to live here
       (padding on columns 3/4, centering column 4's Mode header/cells,
       centering columns 6/7's Accuracy/Errors) was written for the OLD
       DATE/STUDENT/CLASS/MODE/CPM/ACCURACY/ERRORS layout, where both
       tables shared the exact same 7 columns in the exact same order.
       3.5.525D's RESULTS/PERFORMANCE unification gave the two tables
       DIFFERENT column counts (Student: Date/Student/Program/Metrics/
       Source/Actions = 6; Advisor: same plus its own Class column = 7),
       so a single shared-by-ID nth-child(4) no longer means the same
       column in both — it hit METRICS in the Student table (wrongly
       forcing it to center, per Fulvio's own explicit "gli allineamenti
       si METRICS sono a SINISTRA [in Advisor]... per lo studente sono
       centrati = ERRATO") while landing on PROGRAM in the Advisor table
       (where it had no visible effect, since Program was already
       left-aligned). Removed outright rather than patched per-table:
       ccBuildPerfRowCells() already applies its own inline
       `text-align:center` to the one cell that actually needs it
       (Source), matching the untouched `.cc-perf-table` look the Class
       Hub's own per-class PERFORMANCE tab has always had with no
       ID-specific override at all — the exact reference table Fulvio
       pointed to as "correct" in this same report. */

    .ops-teacher-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        width: 160px;
        padding: 0 14px;
        border: none;
        border-radius: 10px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-sizing: border-box;
    }

    .ops-teacher-badge.beginner { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
    .ops-teacher-badge.fundamental { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
    .ops-teacher-badge.intermediate { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
    .ops-teacher-badge.advanced { background: rgba(249, 115, 22, 0.12); color: #f97316; }
    .ops-teacher-badge.custom { background: rgba(168, 85, 247, 0.12); color: #a855f7; }

    .ops-teacher-progress {
        height: 8px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        overflow: hidden;
    }

    [data-theme="light"] .ops-teacher-progress {
        background: rgba(0, 0, 0, 0.06);
    }

    .ops-teacher-progress > div {
        height: 100%;
        background: linear-gradient(90deg, #60a5fa, #34d399);
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    .ops-teacher-detail {
        display: none;
        padding: 26px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background: var(--glass-bg);
        background-image: var(--glass-shine);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 10px;
        box-shadow: var(--shadow-card);
    }

    .ops-teacher-detail.active {
        display: flex;
        gap: 24px;
    }
    .ops-teacher-detail:has(.tactical-card) {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .ops-teacher-detail.archived-detail .ops-teacher-detail-left > *:not(.ops-teacher-actions-row),
    .ops-teacher-detail.archived-detail .ops-teacher-detail-right > *:not(.ops-teacher-detail-students) {
        filter: grayscale(1) brightness(0.65);
        opacity: 0.65;
    }
    .ops-teacher-detail.archived-detail .ops-teacher-detail-students {
        filter: none;
        opacity: 1;
    }
    .ops-teacher-detail.archived-detail .ops-teacher-detail-student {
        color: #94a3b8;
        opacity: 0.7;
    }
    .ops-teacher-detail.archived-detail .ops-teacher-student-action {
        filter: none;
        opacity: 1;
    }

    .ops-teacher-detail-left {
        flex: 0 0 60%;
    }

    .ops-teacher-detail-right {
        flex: 0 0 40%;
        padding-left: 24px;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ops-teacher-detail-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ops-teacher-detail-group-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        pointer-events: none;
        white-space: nowrap;
    }

    .ops-teacher-detail-group-box .ops-teacher-class-title {
        font-size: 22px;
        margin: 0;
    }

    .ops-teacher-detail-students-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        padding: 10px 18px;
        width: 160px;
        box-sizing: border-box;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        font-family: 'Big Shoulders Display', sans-serif;
        font-size: 22px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #f1f5f9;
        pointer-events: none;
    }

    .ops-teacher-detail-students-box .ops-teacher-student-number {
        color: #f97316;
        margin-right: 6px;
    }

    /* Shared column grid for the whole list: flag | name | callsign | actions.
       Each row uses subgrid so the name column is sized by the longest name
       across ALL rows, keeping every callsign vertically aligned. */
    .ops-teacher-detail-students {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 32px max-content max-content 1fr;
        column-gap: 20px;
    }

    .ops-teacher-detail-student {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        cursor: pointer;
    }

    .ops-teacher-detail-student .ops-teacher-student-flag-wrap {
        margin-right: 0;
    }

    .ops-teacher-detail-student .ops-teacher-detail-student-actions {
        justify-self: end;
    }

    /* 3.5.504D: STUDENT-dashboard class roster only (the marker class is
       added exclusively by renderStudentDashboardClassScreen's own
       detail div — the Advisor's class detail never carries it).
       (a) Left/right proportion nudge 60/40 -> 46/54 so the right
           STUDENTS column can host six chips on one row.
       (b) .ops-rx-chip = M-format chip at FIXED width, independent of
           content: group 1 (LETTERS/FIGURES/MIXED) sized for "xxx",
           group 2 (TOPLIST/TRAINER/FREAK) wider for "xxx.xxx". Value
           text keeps the default M celeste #60a5fa for RX and the
           ADVANCED orange #f97316 for performance scores — border and
           background stay the stock .ops-teacher-student-action ones.
       (c) .ops-rx-chip-empty = never-used type: no text at all, same
           fixed footprint, dimmed to read as inactive. */
    /* 3.5.505D layout fix — 46%+54% bare = 100% PLUS the flex
       container's own 24px gap (flex-basis never accounts for gap),
       so the right column silently overflowed the panel's right edge
       by 24px: that's what clipped the classId chip ("C003_2…") and
       the last roster chips. Each side now subtracts its 12px half of
       the gap, AND the left column gives up a further 35px to the
       STUDENTS side (Fulvio: "restringere l'area classe di 30/40px").
       Sums to exactly 100%: (46%-47px) + (54%+23px) + 24px gap. */
    .ops-student-class-roster .ops-teacher-detail-left { flex: 0 0 calc(46% - 47px); }
    .ops-student-class-roster .ops-teacher-detail-right { flex: 0 0 calc(54% + 23px); }
    /* 3.5.570D: Fulvio — "NESSUNO TI HA DETTO DI TOGLIERE GLI STUDENTI!!!
       RIMETTIMI LA CLASSE COME ERA PRIMA." 3.5.569D's own comment above
       mis-read "senza le schede TEAM" as "remove the roster column
       outright, the Hub's own TEAM tab replaces it" — wrong: "il
       pannello DELLA CLASSE" is this ENTIRE original box, info AND
       roster together, exactly as it always was; "senza... le schede
       TEAM" meant the separate Class Information Hub/shelf content
       (Welcome/Team/Overview/...), never this roster. Reverted outright
       — no override left here at all, both columns back to their
       original `.ops-student-class-roster` split above. */
    /* Same breathing-room pass inside the roster grid: 20px column
       gaps -> 14px (flag/name/callsign/chips), ~18px reclaimed per
       row. Student-view only, via the marker class. */
    .ops-student-class-roster .ops-teacher-detail-students { column-gap: 14px; }
    .ops-student-class-roster .ops-rx-chip {
        width: 44px;
        min-width: 44px;
        padding: 0;
        box-sizing: border-box;
    }
    .ops-student-class-roster .ops-rx-chip-perf {
        width: 70px;
        min-width: 70px;
    }
    /* 3.5.517D — per-program value colors (Fulvio, in order):
       TOPLIST orange, TRAINER green, FREAK cyan. */
    .ops-student-class-roster .ops-rx-chip-toplist { color: #f97316; }
    .ops-student-class-roster .ops-rx-chip-trainer { color: #22c55e; }
    .ops-student-class-roster .ops-rx-chip-freak { color: #22d3ee; }
    .ops-student-class-roster .ops-rx-chip-empty {
        opacity: 0.45;
    }
    /* 3.5.506D: chips are inline-flex items aligned on BASELINE — an
       EMPTY chip has no text baseline so it aligns on its bottom
       margin edge, while a filled chip aligns on its text baseline:
       within the same row empty chips sat ~9px lower than filled ones
       ("le caselle vanno SOTTO e sopra") and the line box grew to
       39.5px/33.2px, giving every row a different height. The wrapper
       span is now inline-flex (flex items ignore baselines — uniform
       30px, every row exactly 50px); vertical-align:middle kept as a
       fallback. Last chip's trailing margin removed; 3.5.508D: the
       wrapper carries margin-right:-6px so the chips block ends
       exactly 20px before the PANEL's own right border (26px panel
       padding − 6px), per Fulvio's "20px dal margine DESTRO". */
    .ops-student-class-roster .ops-rx-chip { vertical-align: middle; }
    .ops-student-class-roster .ops-rx-chip:last-child { margin-right: 0; }

    .ops-teacher-detail-student:hover,
    .ops-teacher-student-row:hover {
        background: rgba(59, 130, 246, 0.08);
    }

    .ops-teacher-student-row.ops-teacher-student-selected {
        background: rgba(59, 130, 246, 0.15);
    }

    /* 3.5.254D: 3.5.253D's blur(0.2px) turned out to be BELOW the
       threshold most browsers/displays actually rasterize as visible
       softening at all — Fulvio confirmed a real INACTIVE row (DJ5CW,
       genuinely 0 enrollments) rendered indistinguishable from an ACTIVE
       one, even though the class/opacity/filter were all verifiably
       applied in the DOM and computed style (this was a perceptibility
       threshold issue, not a logic bug — see the 3.5.254D changelog entry
       for the full investigation). Moved blur up to a value confirmed, by
       an actual rendered screenshot comparison at realistic font size, to
       read clearly as "slightly out of focus" while remaining fully
       legible — opacity left close to where it was. */
    .ops-teacher-student-row.ops-teacher-student-row-inactive {
        opacity: 0.85;
        filter: blur(0.6px);
    }

    .ops-teacher-detail-student-name {
        font-weight: 600;
        color: var(--text-main);
    }

    .ops-teacher-detail-student-callsign {
        color: var(--text-muted);
        font-family: 'IBM Plex Mono', monospace;
    }

    [data-theme="light"] .ops-teacher-detail-right {
        border-left-color: rgba(15, 23, 42, 0.08);
    }

    [data-theme="light"] .ops-teacher-detail-student {
        border-bottom-color: rgba(15, 23, 42, 0.08);
    }

    .ops-teacher-grid.compact .ops-teacher-card {
        padding: 14px;
    }

    .ops-teacher-grid.compact .ops-teacher-card p,
    .ops-teacher-grid.compact .ops-teacher-card .ops-teacher-speed-line,
    .ops-teacher-grid.compact .ops-teacher-card .ops-teacher-card-footer {
        display: none;
    }

    .ops-teacher-detail h3 {
        font-family: 'Big Shoulders Display', sans-serif;
        font-size: 24px;
        margin: 0 0 10px;
        color: var(--text-main);
    }

    .ops-teacher-detail p {
        font-size: 15px;
        line-height: 1.6;
        color: var(--text-muted);
    }

    .ops-teacher-detail-meta {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        margin: 16px 0;
        font-size: 15px;
        color: var(--text-main);
    }

    .ops-teacher-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 22px;
        background: var(--glass-bg);
        background-image: var(--glass-shine);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        box-shadow: var(--shadow-card);
    }

    .ops-teacher-toggle-label {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-main);
    }

    .ops-teacher-toggle-desc {
        font-size: 14px;
        color: var(--text-muted);
        margin-top: 4px;
    }

    .ops-teacher-toggle-switch {
        position: relative;
        width: 48px;
        height: 26px;
        background: #334155;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
    }

    .ops-teacher-toggle-switch.active {
        background: #22c55e;
    }

    .ops-teacher-toggle-switch::after {
        content: '';
        position: absolute;
        top: 3px; left: 3px;
        width: 20px; height: 20px;
        background: #ffffff;
        border-radius: 50%;
        transition: transform 0.2s;
    }

    .ops-teacher-toggle-switch.active::after {
        transform: translateX(22px);
    }

    .ops-teacher-tab-backup {
        color: #f59e0b;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ops-teacher-tab-backup.active {
        color: #0f172a;
        background: linear-gradient(180deg, rgba(251, 191, 36, 0.85) 0%, rgba(245, 158, 11, 0.75) 100%);
        border: 1px solid rgba(251, 191, 36, 0.5);
        box-shadow:
            0 0 24px rgba(245, 158, 11, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    [data-theme="light"] .ops-teacher-tab-backup.active {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(245, 158, 11, 0.85) 0%, rgba(217, 119, 6, 0.85) 100%);
        border-color: rgba(245, 158, 11, 0.5);
    }

    #teacherBackupGrid, #studentDashboardBackupGrid {
        align-items: start;
    }

    /* 3.5.556D: Fulvio — "ancora troppo spazio tra i titoli backup
       restore actual snapshot e il bordo inferiore del menu." This
       mount only ever gets content when a view button is toggled open
       (openBackupDashboard()); the rest of the time it's an empty flex
       child, but `.ops-teacher-panel`'s own `gap:20px` still reserves a
       full gap on BOTH sides of it regardless (flex `gap` never
       collapses just because a sibling is empty) — 40px of dead space
       for nothing. Collapsing it out of the flex flow entirely while
       empty leaves a single real gap between the status strip and the
       BACKUP/RESTORE/ACTUAL SNAPSHOT grid instead of two. */
    #backupDashboardInline:empty {
        display: none;
    }

    .ops-teacher-backup-section {
        margin-bottom: 22px;
        display: flex;
        flex-direction: column;
    }

    /* 3.5.557D: Fulvio — "questo spazio NON SONO 20px !!! fai 20px."
       The flex gap between the status strip and this heading really
       was 20px, but this h4's own `min-height:40px` (with
       `align-items:flex-end`) reserved another ~12-16px of empty box
       ABOVE the visible glyph before the text itself started — the
       actual perceived gap was the 20px flex gap PLUS that invisible
       padding, not 20px alone. `min-height` removed: the box now
       shrinks to its own natural text height, all three headings
       (Backup/Restore/Actual Snapshot) still equal since they share
       this exact rule, so cross-column alignment is unaffected. */
    .ops-teacher-backup-section h4 {
        margin: 0 0 14px;
        display: flex;
        align-items: flex-end;
        padding-left: 20px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #60a5fa;
    }

    /* 3.5.543D: Fulvio — "possiamo rendere le aree della stessa altezza?"
       — "Full Restore GIT" (3.5.542D)'s own 3-line description made the
       RESTORE column's cards visibly taller than BACKUP's own 2-line
       ones. A shared min-height (sized for that tallest card) keeps
       every card in both columns visually even regardless of how many
       lines its own description wraps to — `align-items:center` on
       `.ops-teacher-toggle` itself already centers a shorter card's
       content vertically within the extra room. */
    :is(#teacherBackupGrid, #studentDashboardBackupGrid) .ops-teacher-toggle {
        min-height: 132px;
        box-sizing: border-box;
    }

    :is(#teacherBackupGrid, #studentDashboardBackupGrid) .ops-teacher-toggle > div:first-child {
        flex: 1;
        min-width: 0;
        padding-right: 16px;
    }

    .ops-teacher-snapshot-card {
        padding: 20px 22px;
        background: var(--glass-bg);
        background-image: var(--glass-shine);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        box-shadow: var(--shadow-card);
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .ops-teacher-snapshot-title {
        margin: 0 0 18px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #ffffff;
    }

    .ops-teacher-snapshot-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ops-teacher-snapshot-row:last-child {
        border-bottom: none;
    }

    .ops-teacher-snapshot-total-row {
        position: relative;
        z-index: 0;
    }
    .ops-teacher-snapshot-total-row::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -8px;
        right: -8px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        z-index: -1;
    }

    .ops-teacher-snapshot-row:has(+ .ops-teacher-snapshot-total-row) {
        border-bottom: none;
        margin-bottom: 7.5px;
    }

    .ops-teacher-snapshot-row:not(.ops-teacher-snapshot-total-row) {
        border-bottom: none;
        padding: 2.5px 0;
    }

    .ops-teacher-snapshot-total-row + .ops-teacher-snapshot-row {
        margin-top: 17.5px;
    }

    /* 3.5.514D — Fulvio: exactly 10px between consecutive total boxes
       (STUDENTS → ATTEMPTS → program totals) in the Actual Snapshot card.
       The ::before box spans the row's whole padding-box, so the visual
       gap is margins only — and total rows carry BOTH classes, so the
       generic (row:has(+ total) → margin-bottom:7.5px) and
       (total + row → margin-top:17.5px) rules above also hit them.
       Overriding both to 5+5 = exactly 10px box-to-box. */
    .ops-teacher-snapshot-total-row:has(+ .ops-teacher-snapshot-total-row) {
        margin-bottom: 5px;
    }
    .ops-teacher-snapshot-total-row + .ops-teacher-snapshot-total-row {
        margin-top: 5px;
    }

    .ops-teacher-snapshot-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #F08080;
        white-space: nowrap;
    }

    .ops-teacher-snapshot-value {
        min-width: 48px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 16px;
        font-weight: 700;
        color: #ffffff;
        text-align: right;
    }

    .ops-teacher-snapshot-timestamp {
        margin-top: 10px;
        text-align: right;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: 0.4px;
    }

    :is(#teacherBackupGrid, #studentDashboardBackupGrid) .ops-teacher-toggle .ops-teacher-toggle-label {
        color: #ffffff;
        font-weight: 700;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    :is(#teacherBackupGrid, #studentDashboardBackupGrid) .ops-teacher-backup-filename {
        color: #facc15;
        font-weight: 700;
    }

    /* 3.5.544D: #studentDashboardBackupGrid keeps its own original
       structural DOM shape (2 independent `.ops-teacher-backup-section`
       columns, Backup 1st, Restore 2nd) — these positional selectors
       still correctly target it. #teacherBackupGrid does NOT any more
       (its BACKUP/RESTORE cards are now siblings within ONE shared
       `.ops-teacher-backup-pair-grid`, see renderTeacherBackup()'s own
       comment) — `.ops-teacher-toggle-backup`/`-restore` (keyed off each
       card's own `type`, added directly by renderCard()) replace this
       structural dependency there instead, right below. */
    #studentDashboardBackupGrid .ops-teacher-backup-section:first-child .ops-teacher-toggle {
        background: linear-gradient(180deg, rgba(18, 70, 65, 0.45) 0%, rgba(2, 10, 12, 0.98) 100%);
        border: 1px solid rgba(18, 70, 65, 0.65);
    }

    #studentDashboardBackupGrid .ops-teacher-backup-section:nth-child(2) .ops-teacher-toggle {
        background: linear-gradient(180deg, rgba(120, 53, 15, 0.45) 0%, rgba(15, 10, 5, 0.98) 100%);
        border: 1px solid #334155;
    }

    #teacherBackupGrid .ops-teacher-toggle-backup {
        background: linear-gradient(180deg, rgba(18, 70, 65, 0.45) 0%, rgba(2, 10, 12, 0.98) 100%);
        border: 1px solid rgba(18, 70, 65, 0.65);
    }

    #teacherBackupGrid .ops-teacher-toggle-restore {
        background: linear-gradient(180deg, rgba(120, 53, 15, 0.45) 0%, rgba(15, 10, 5, 0.98) 100%);
        border: 1px solid #334155;
    }

    /* 3.5.544D: BACKUP/RESTORE cards now share one 2-column CSS Grid
       (`display:grid` overrides the base `.ops-teacher-backup-section`'s
       own `display:flex` — same specificity, later source order wins) —
       a grid row's own default `align-items:stretch` makes every cell in
       it exactly as tall as its own tallest sibling automatically, so
       row N of BACKUP and row N of RESTORE are ALWAYS equal height at
       any viewport width, with no min-height guessing needed at all.
       The two `<h4>` headings become row 1's own two cells the same way
       — real column headers, not just visually-adjacent text. */
    .ops-teacher-backup-pair-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 16px;
    }

    /* 3.5.556D: Fulvio — "devi alzarmi le aree di backup e restore, che
       sono abbassate rispetto a actual snapshot." The base
       `.ops-teacher-backup-section h4` rule's own `margin-bottom:14px`
       was stacking ON TOP of this grid's own `row-gap:16px` for BACKUP/
       RESTORE's two h4 cells (grid gap and item margins are additive,
       never collapsed) — 30px total before their first card, vs. just
       14px for ACTUAL SNAPSHOT's own plain (non-grid) h4, which has no
       separate row-gap. Zeroed here (2-class selector, wins over the
       1-class base rule regardless of source order) so row-gap alone
       provides the spacing, matching ACTUAL SNAPSHOT's 14px-ish math. */
    .ops-teacher-backup-section.ops-teacher-backup-pair-grid h4 {
        margin-bottom: 0;
    }

    .ops-teacher-backup-action {
        width: 48px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #15803d;
        border-radius: 10px;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        flex-shrink: 0;
        cursor: pointer;
        transition: background 0.2s;
    }

    .ops-teacher-backup-action:hover {
        background: #166534;
    }

    .ops-teacher-backup-action.restore {
        background: #b45309;
    }

    .ops-teacher-backup-action.restore:hover {
        background: #92400e;
    }

    .ops-teacher-wizard-steps {
        display: flex;
        gap: 8px;
        margin-bottom: 22px;
    }

    .ops-teacher-wizard-step {
        flex: 1;
        text-align: center;
        padding: 8px 4px;
        border-radius: 8px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid rgba(255,255,255,0.06);
    }

    .ops-teacher-wizard-step.active {
        color: #0f172a;
        background: linear-gradient(180deg, rgba(96, 165, 250, 0.85) 0%, rgba(59, 130, 246, 0.75) 100%);
    }

    .ops-teacher-wizard-step.done {
        color: #22c55e;
    }

    .ops-teacher-wizard-status {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 18px 0;
    }

    .ops-teacher-wizard-status-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 8px;
        font-size: 14px;
    }

    /* 3.5.409D: the VERIFY DATA INTEGRITY count rows (PROFILES, CLASSES,
       the 4 STUDENTS breakdowns, ATTEMPTS TOTAL, and the new FAQ/KEY
       POINTS/SESSIONS/RESOURCES counts added this version) are all short,
       uniform "N LABEL" rows — per Fulvio's own explicit "magari su due
       colonne cosi non lo facciamo cosi lungo" (a screenshot of the
       single, increasingly long vertical list). A dedicated grid variant
       for JUST these count rows — the "DATA VALID"/"INTEGRITY ISSUES"
       header and the (variable-length, sometimes long) WARNINGS/issues
       text below still use the original single-column
       `.ops-teacher-wizard-status` so long warning text is never
       squeezed into a half-width cell. `.ops-teacher-wizard-status-row`
       itself is reused unchanged as the grid's own cell styling — it
       never assumed a specific container display mode. */
    .ops-teacher-wizard-status-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 18px 0;
    }

    .ops-teacher-wizard-status-row.ok { color: #22c55e; }
    .ops-teacher-wizard-status-row.warn { color: #f59e0b; }
    .ops-teacher-wizard-status-row.err { color: #f87171; }

    .ops-teacher-wizard-conflict {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        font-size: 14px;
    }

    .ops-teacher-wizard-conflict:last-child {
        border-bottom: none;
    }

    .ops-teacher-wizard-conflict-actions {
        display: flex;
        gap: 6px;
    }

    .ops-teacher-wizard-conflict-btn {
        padding: 6px 10px;
        border: 1px solid #334155;
        border-radius: 6px;
        background: transparent;
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
    }

    .ops-teacher-wizard-conflict-btn.active {
        background: #22c55e;
        border-color: #22c55e;
        color: #0f172a;
    }

    .ops-teacher-wizard-conflict-btn.danger.active {
        background: #f87171;
        border-color: #f87171;
        color: #0f172a;
    }

    .ops-teacher-wizard-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
        justify-content: center;
        margin: 18px 0;
    }

    .ops-teacher-wizard-summary-cell {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 120px;
        height: auto;
        padding: 16px;
        text-align: center;
        background: var(--glass-bg);
        background-image: var(--glass-shine);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 10px;
    }

    .ops-teacher-wizard-summary-value {
        order: 2;
        font-size: 28px;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1;
    }

    .ops-teacher-wizard-summary-label {
        order: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 2.6em;
        gap: 2px;
        font-size: 12px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ops-teacher-actions-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 10px;
    }
    /* 3.5.296D: non-invasive SYNC success indicator (see flashSyncSuccessLed()
       in syncAdvisorClass()'s own success path, and ccMutateClass()'s new
       auto-sync-after-edit call) — replaces what used to be a persistent
       green text message under the SYNC button. Invisible at rest
       (opacity:0), blinks for 5 seconds when a sync completes
       successfully, then fades back to invisible on its own. */
    /* 3.5.376D: per Fulvio's own explicit "fallo BIANCO luminescente" —
       was green, now a glowing white (two stacked box-shadow blurs for
       a stronger glow). */
    .cc-sync-led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 8px #ffffff, 0 0 4px #ffffff; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
    .cc-sync-led.active { opacity: 1; animation: cc-sync-led-blink 0.8s ease-in-out infinite; }
    @keyframes cc-sync-led-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
    /* 3.5.547D: BACKUP dashboard (renderBackupStatusStrip()/openBackupDashboard())
       — the Terminal variant's own blinking cursor, and the Radar
       variant's own "most recent backup" pulse dot. */
    .hst-term-cursor { animation: hst-term-blink 1s step-end infinite; }
    @keyframes hst-term-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
    @keyframes hst-radar-pulse { 0% { box-shadow: 0 0 8px #38bdf8; transform: scale(1); } 50% { box-shadow: 0 0 16px #38bdf8, 0 0 4px #fff; transform: scale(1.3); } 100% { box-shadow: 0 0 8px #38bdf8; transform: scale(1); } }
    /* 3.5.439D: smaller variant for the Student profile's own SYNC
       button (buildActionsHTML()) — that button itself is smaller
       (smallBtnStyle) than the Advisor's per-class one this LED was
       originally built for, per Fulvio's own explicit "il tasto Sync in
       studente e' piu piccolo quindi ci vuole un led leggermente piu
       piccolo." Same blink keyframe/timing, only size and glow radius
       scaled down. */
    .cc-sync-led-sm { width: 8px; height: 8px; box-shadow: 0 0 6px #ffffff, 0 0 3px #ffffff; }

    .ops-teacher-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 44px;
        padding: 0 14px;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border: 1px solid #334155;
        border-radius: 10px;
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
        letter-spacing: 0.6px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .ops-teacher-action-btn:hover {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
        border-color: #475569;
    }

    .ops-teacher-action-btn.primary {
        background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
        border-color: rgba(34, 197, 94, 0.4);
        color: #ffffff;
    }

    .ops-teacher-action-btn.primary:hover {
        background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    }

    .ops-teacher-action-btn.blue {
        background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
        border-color: rgba(59, 130, 246, 0.4);
        color: #ffffff;
    }

    .ops-teacher-action-btn.blue:hover {
        background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    }

    .ops-teacher-action-btn.active {
        color: #0f172a;
        background: linear-gradient(180deg, rgba(96, 165, 250, 0.85) 0%, rgba(59, 130, 246, 0.75) 100%);
        border: 1px solid rgba(96, 165, 250, 0.5);
        box-shadow:
            0 0 24px rgba(59, 130, 246, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .ops-teacher-action-btn.active:hover {
        background: linear-gradient(180deg, rgba(96, 165, 250, 0.85) 0%, rgba(59, 130, 246, 0.75) 100%);
    }

    .ops-teacher-action-btn.gray {
        background: linear-gradient(180deg, rgba(71, 85, 105, 0.55) 0%, rgba(51, 65, 85, 0.55) 100%);
        border-color: rgba(148, 163, 184, 0.25);
        color: #f1f5f9;
    }

    .ops-teacher-action-btn.gray:hover {
        background: linear-gradient(180deg, rgba(100, 116, 139, 0.65) 0%, rgba(71, 85, 105, 0.65) 100%);
    }

    .ops-teacher-action-btn.red {
        background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
        border-color: rgba(239, 68, 68, 0.4);
        color: #ffffff;
    }

    .ops-teacher-action-btn.red:hover {
        background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
    }

    #manualHistoryBtn-ops {
        padding: 10px 24px;
        border: none;
        border-radius: 6px;
        min-width: 140px;
        height: auto;
        font-size: 12px;
        margin-left: auto;
        white-space: nowrap;
    }

    #manualDeleteAttemptBtn-ops {
        padding: 10px 24px;
        border: none;
        border-radius: 10px;
        min-width: 140px;
        height: auto;
        font-size: 12px;
        margin-left: auto;
        white-space: nowrap;
    }

    body:not(.training-mode) #manualHistoryPrevBtn-ops,
    body:not(.training-mode) #manualHistoryNextBtn-ops {
        width: 44px !important;
        min-width: 44px !important;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
    }

    #manualHistoryPrevBtn-ops {
        margin-left: auto !important;
    }

    #manualHistoryNextBtn-ops {
        margin-left: 0 !important;
    }

    #manualHistoryPrevBtn-ops.disabled,
    #manualHistoryNextBtn-ops.disabled {
        background: #334155 !important;
        border-color: #475569;
        cursor: default;
        opacity: 0.65;
    }

    #manualHistoryPrevBtn-ops.disabled .training-guide-icon polygon,
    #manualHistoryNextBtn-ops.disabled .training-guide-icon polygon {
        fill: #475569;
    }

    #perfLatencyRow.latency-row-clickable {
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
        border: none;
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4);
        border-radius: 8px;
        padding: 10px 18px;
        margin: 10px 0;
        position: relative;
    }

    #perfLatencyRow.latency-row-clickable::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -10px;
        height: 1px;
        background: #334155;
    }

    #perfLatencyRow.latency-row-clickable:hover {
        background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    }

    #perfLatencyRow.latency-row-clickable .ops-status-label,
    #perfLatencyRow.latency-row-clickable .ops-status-value {
        color: #fff !important;
    }

    #perfLatencyRow.latency-row-clickable .ops-status-value {
        display: inline-block;
        margin-left: auto;
        text-align: right;
        line-height: 1;
    }

    /* ADVISOR mode: hide operational training controls, keep navigation */
    .ops-console.advisor-active #trainingGuideBtn {
        display: none !important;
    }
    .ops-console.advisor-active #startBtn-ops,
    .ops-console.advisor-active #resetBtn-ops,
    .ops-console.advisor-active #confirmBtn-ops,
    .ops-console.advisor-active #manualSaveBtn-ops,
    .ops-console.advisor-active #manualClearAttemptBtn-ops,
    .ops-console.advisor-active .ops-start-group,
    .ops-console.advisor-active #transmissionConfigPanel,
    .ops-console #advisorSettingsBtn {
        display: none;
    }

    .ops-console.advisor-active #advisorSettingsBtn {
        display: inline-flex !important;
    }

    .ops-console.advisor-active #settingsBtn {
        display: none !important;
    }

    .ops-console.advisor-active #settingsPanel,
    .ops-console.advisor-active #manualCharsPanel,
    .ops-console.advisor-active #manualCharsWrap,
    .ops-console.advisor-active #sessionsPanelGroup,
    .ops-console.advisor-active .ops-workspace-header,
    .ops-console.advisor-active .ops-exercise-grid,
    .ops-console.advisor-active .ops-action-bar,
    .ops-console.advisor-active #archivesPlaceholder {
        display: none !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) .ops-main > * {
        margin-bottom: 20px !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) .ops-main > *:last-child {
        margin-bottom: 0 !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) .ops-workspace-header,
    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) .ops-exercise-grid,
    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) .ops-action-bar,
    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #historyLatencyPanel.latency-panel-open {
        display: flex !important;
    }

    /* While TRAINING HISTORY is open from the real ADVISOR DASHBOARD, the
       dashboard section itself (RESULTS list included) must not stay
       visible underneath — the history becomes the only content area.
       DOM/state untouched (hidden, not unmounted), so removing
       .advisor-history-view on EXIT brings the exact same list back. */
    .ops-console.advisor-history-view.advisor-active #opsTeacherMain {
        display: none !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #manualExportBtn-ops,
    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #manualClearHistoryBtn-ops,
    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #manualSaveBtn-ops,
    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #manualClearAttemptBtn-ops {
        display: none !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #sessionsPanelGroup {
        display: block !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #historyProfileFilterDisplay {
        width: 280px !important;
        min-width: 280px !important;
        height: 40px !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        display: flex !important;
        gap: 20px !important;
        padding: 0 0 0 20px !important;
        overflow: hidden;
        white-space: nowrap;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #historyProfileFilterFlag {
        width: 32px !important;
        height: 24px !important;
        object-fit: cover !important;
        border-radius: 2px !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #historyProfileFilterLabel {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 230px;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #morse-grid .cell input {
        border: 1px solid #334155 !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #morse-grid-wrapper,
    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #resultsPanel {
        display: block !important;
    }

    .ops-console.advisor-history-view:is(.advisor-active, .student-history-active) #morse-grid {
        display: grid !important;
    }

    .ops-advisor-context {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
    }

    /* PROFILES panel */
    /* Plain-text CALLSIGN color for a "real" profile — used bare (no
       .ops-teacher-source-badge) only on the PROFILES list's CALLSIGN
       column. The compound .ops-teacher-source-badge.ops-teacher-source-real
       rule below still overrides color for the separate SOURCE badge,
       which stays orange — this only affects the CALLSIGN text. */
    .ops-teacher-source-real {
        color: #ffffff;
        font-weight: 700;
    }
    .ops-teacher-source-demo {
        color: #94a3b8;
    }
    .ops-teacher-source-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border: 1px solid currentColor;
    }
    .ops-teacher-source-badge.ops-teacher-source-real {
        background: rgba(245, 158, 11, 0.12);
        color: #f59e0b;
    }
    .ops-teacher-source-badge.ops-teacher-source-demo {
        background: rgba(148, 163, 184, 0.12);
        color: #94a3b8;
    }
    .ops-teacher-source-badge.ops-teacher-source-synced {
        background: rgba(34, 197, 94, 0.12);
        color: #22c55e;
        border-color: #ffffff;
    }
    .ops-teacher-state-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border: 1px solid currentColor;
    }
    .ops-teacher-state-badge.active {
        background: rgba(34, 197, 94, 0.12);
        color: #22c55e;
    }
    .ops-teacher-state-badge.inactive {
        background: rgba(148, 163, 184, 0.12);
        color: #94a3b8;
    }
    .ops-teacher-student-actions {
        white-space: nowrap;
    }
    .ops-teacher-student-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 30px;
        padding: 0 6px;
        margin-right: 5px;
        border-radius: 6px;
        border: 1px solid #334155;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        color: #60a5fa;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    /* 3.5.300D: the Class Information Hub's own EDIT buttons (reusing
       this class since 3.5.298D/299D) read a bit too narrow — +5px each
       side, per Fulvio's own explicit request. Scoped to this modifier
       only, so the original P/M/R buttons in the STUDENTS list keep
       their own unmodified padding. */
    .ops-teacher-student-action-wide { padding: 0 11px; }
    .ops-teacher-student-action:hover {
        background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
        color: #fff;
        border-color: #475569;
    }
    /* 3.5.496D: P (Progress) action button while the student is LIVE —
       green border + green glyph, same livePresenceMap the LEDs read.
       Toggled by applyLivePresenceToDom() on every presence poll. */
    .ops-teacher-student-action.ops-teacher-action-live {
        border-color: #22c55e;
        color: #22c55e;
    }
    /* 3.5.498D: IDLE gets the same treatment in orange — the exact
       #f59e0b the IDLE LED itself already uses; OFFLINE stays plain. */
    .ops-teacher-student-action.ops-teacher-action-idle {
        border-color: #f59e0b;
        color: #f59e0b;
    }
    .ops-teacher-student-action-remove {
        color: #ef4444;
        border-color: #334155;
        background: transparent;
    }
    .ops-teacher-student-action-remove:hover {
        background: #ef4444;
        color: #fff;
        border-color: #ef4444;
    }
    .ops-teacher-status-cell {
        text-align: center !important;
    }
    #teacherProfilesTable th,
    #teacherProfilesTable td:nth-child(3),
    #teacherProfilesTable td:nth-child(4),
    #teacherProfilesTable td:nth-child(5),
    #teacherProfilesTable td:nth-child(6) {
        text-align: center;
    }
    #teacherProfilesTable th:nth-child(1) { width: 27%; box-sizing: border-box; }
    #teacherProfilesTable th:nth-child(2) { width: 18%; box-sizing: border-box; }
    #teacherProfilesTable th:nth-child(3) { width: 14%; box-sizing: border-box; }
    #teacherProfilesTable th:nth-child(4) { width: 13%; box-sizing: border-box; }
    #teacherProfilesTable th:nth-child(5) { width: 13%; box-sizing: border-box; }
    #teacherProfilesTable th:nth-child(6) { width: 15%; box-sizing: border-box; }
    #teacherProfilesTable td.ops-teacher-student-name { padding-right: 80px; overflow: hidden; }
    /* 3.5.579D — Fulvio: "i valori ATTEMPTS che sono a 0 fammeli in
       grigio scuro" — a zero count in the PROFILES table's own ATTEMPTS
       cell dims to the project's dark muted gray (the same #475569
       already used for muted values elsewhere); non-zero counts keep
       the default bright cell color. Class is only emitted on the
       zero case — see renderTeacherProfiles(). */
    #teacherProfilesTable td.ops-teacher-zero-count { color: #475569; }
    /* 3.5.286D — Option B: the new REMOTE badge sits AFTER the name text —
       .ops-teacher-student-name-text (wrapping just the name, see
       renderTeacherStudents()) truncates on its own when too long, so the
       badge right after it never gets pushed into the callsign column,
       and the badge itself is never the part that gets clipped. */
    #teacherStudentsTable .ops-teacher-student-name-text.remote { display: inline-block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
    #advisorSearchTable th:nth-child(3),
    #advisorSearchTable td:nth-child(3) {
        text-align: center;
    }
    :is(#teacherResultsTable, #studentDashboardResultsTable) th:nth-child(1),
    :is(#teacherResultsTable, #studentDashboardResultsTable) td:nth-child(1) {
        white-space: nowrap;
        font-size: 0.85rem;
    }
    /* 3.5.526D: the old nth-child(5)/(7) width rules (8%/10%, sized for
       the old CPM/Errors columns) removed for the same reason as the
       block above — column 5 is now Source in the Student table but
       METRICS in the Advisor table (which has its own extra Class
       column shifting everything over by one), so a shared 8% width
       would squeeze Advisor's own Metrics text.
       3.5.532D: Date's own WIDTH (as opposed to white-space/font-size,
       still shared above) is no longer shared either — Fulvio, on the
       Advisor table specifically: "la colonna DATE è troppo larga...
       si può restringere di almeno 40px e allargare di 20px la colonna
       CLASS, 10px PROGRAM, 10px METRICS." The 18% that used to sit here
       stays exactly as-is for the Student table (never flagged as
       wrong); Advisor gets its own narrower fixed width plus the 3 new
       widened columns below — a fixed table only really needs ONE
       side of "narrower here, wider there" pinned in px for the
       relative deltas to hold, so Student and Class/Program/Metrics
       are free to keep flowing with `table-layout:auto`. */
    #studentDashboardResultsTable th:nth-child(1),
    #studentDashboardResultsTable td:nth-child(1) {
        width: 18%;
    }
    /* 3.5.535D: Fulvio — "c'è spazio per togliere 20px a DATE e darli
       alla colonna METRICS... NON cambiare le altre colonne!!" —
       CLASS/PROGRAM (nth-child 3/4 below) untouched. */
    #teacherResultsTable th:nth-child(1),
    #teacherResultsTable td:nth-child(1) {
        width: 150px;
    }
    /* 3.5.536D: CLASS/PROGRAM/METRICS shift left by ONE column position
       whenever GROUP BY STUDENT hides the Student column (see
       renderTeacherResults()'s own `.cc-perf-table-grouped` class,
       toggled on the `<table>` itself) — Class becomes column 2 instead
       of 3, Program 3 instead of 4, Metrics 4 instead of 5. Two parallel
       rule sets (`:not(.cc-perf-table-grouped)` / `.cc-perf-table-grouped`)
       keep each width pinned to the right COLUMN regardless of which
       position it currently sits in, instead of a single nth-child
       silently landing on the wrong column when grouped.
       3.5.537D: Fulvio, on the grouped view specifically — "allargami
       la colonna classe, il programma... le ultime due colonne
       [SOURCE/Actions] siano uguali... finiscono in fondo a destra come
       quando c'è UNGROUP... non si dovrebbero vedere muovere." Without
       an explicit width, SOURCE/Actions (the only two columns left
       unconstrained) were the ones `table-layout:auto` handed ALL the
       leftover space to once the Student column's own width disappeared
       from the table — stretching them far wider than their own small
       badge/button content ever needed, and shifting every time METRICS'
       own real content length changed the table's total width. Pinning
       BOTH to the same fixed width (in every layout, not just grouped —
       nothing here depends on which columns exist to their LEFT) removes
       that variable entirely; the freed space goes to CLASS (178→220px)
       and PROGRAM (132→170px) instead, exactly as asked. */
    #teacherResultsTable:not(.cc-perf-table-grouped) th:nth-child(3),
    #teacherResultsTable:not(.cc-perf-table-grouped) td:nth-child(3) {
        width: 200px;
    }
    #teacherResultsTable:not(.cc-perf-table-grouped) th:nth-child(4),
    #teacherResultsTable:not(.cc-perf-table-grouped) td:nth-child(4) {
        width: 150px;
    }
    #teacherResultsTable.cc-perf-table-grouped th:nth-child(2),
    #teacherResultsTable.cc-perf-table-grouped td:nth-child(2) {
        width: 200px;
    }
    #teacherResultsTable.cc-perf-table-grouped th:nth-child(3),
    #teacherResultsTable.cc-perf-table-grouped td:nth-child(3) {
        width: 150px;
    }
    /* 3.5.538D: Fulvio — the ungrouped view broke outright after
       3.5.537D (E/R stacked vertically, pushed past the card's own
       right edge). `table-layout:auto` treats an explicit `width` as a
       SUGGESTION it can still shrink below once the sum of every
       column's own width/min-content (Metrics' `nowrap` forces a real
       320px floor) exceeds the table's `width:100%` — Source/Actions
       had a width but no `nowrap`, so once squeezed they were free to
       wrap their own badge/buttons onto a second line instead. Adding
       `nowrap` here guarantees they never do; CLASS/PROGRAM's own
       3.5.537D widening also stepped back (220→200 / 170→150) so the
       total stays comfortably under 100% instead of right at the edge
       — Class/Program/Student can still safely shrink or wrap their
       own plain text if a narrow viewport ever needs it, which just
       makes a row taller, not visually broken the way stacked buttons
       were. */
    #teacherResultsTable:not(.cc-perf-table-grouped) th:nth-child(6),
    #teacherResultsTable:not(.cc-perf-table-grouped) td:nth-child(6),
    #teacherResultsTable.cc-perf-table-grouped th:nth-child(5),
    #teacherResultsTable.cc-perf-table-grouped td:nth-child(5) {
        width: 100px;
        white-space: nowrap;
    }
    #teacherResultsTable:not(.cc-perf-table-grouped) th:nth-child(7),
    #teacherResultsTable:not(.cc-perf-table-grouped) td:nth-child(7),
    #teacherResultsTable.cc-perf-table-grouped th:nth-child(6),
    #teacherResultsTable.cc-perf-table-grouped td:nth-child(6) {
        width: 100px;
        white-space: nowrap;
    }
    /* 3.5.533D: Fulvio — "perché mi hai ristretto la colonna METRICS???
       NON DEVE ANDARE A CAPO SU DUE LINEE!!" `table-layout:auto` treats
       an explicit `width` as a SUGGESTION, not a hard cap — without
       `white-space:nowrap` the browser was free to wrap this column's
       own text (the longest one in the table, "CPM/Wrong/Max/Min" all
       on one line) the moment it didn't fit the 300px target. Adding
       `nowrap` makes the browser grow the column to fit its real content
       instead of wrapping (the `.ops-teacher-table-wrap` around it
       already has its own `overflow-x:auto`, so a rare very-long row
       scrolls horizontally rather than wrapping) — `width:300px` stays
       as the starting point for every OTHER row that fits it, both
       here and on the Student table below (never reported broken, but
       the exact same wrapping risk exists there for the same reason).
    */
    #teacherResultsTable:not(.cc-perf-table-grouped) th:nth-child(5),
    #teacherResultsTable:not(.cc-perf-table-grouped) td:nth-child(5) {
        width: 320px;
        white-space: nowrap;
    }
    #teacherResultsTable.cc-perf-table-grouped th:nth-child(4),
    #teacherResultsTable.cc-perf-table-grouped td:nth-child(4) {
        width: 320px;
        white-space: nowrap;
    }
    #studentDashboardResultsTable th:nth-child(4),
    #studentDashboardResultsTable td:nth-child(4) {
        white-space: nowrap;
    }
    .ops-teacher-result-group-header {
        background: rgba(59, 130, 246, 0.08);
    }
    .ops-teacher-result-group-header:hover {
        background: rgba(59, 130, 246, 0.15);
    }
    .ops-teacher-result-detail.collapsed,
    .ops-teacher-student-detail.collapsed {
        display: none;
    }
    .ops-teacher-student-expired,
    .ops-teacher-result-expired {
        filter: grayscale(100%) blur(0.5px);
        opacity: 0.65;
    }
    /* STUDENTS table: exact fixed pixel widths per Fulvio's spec (NAME
       180 / CALLSIGN 160 / LEVEL-CLASS 305 / PROGRESS 200 / STATUS 130,
       ACTIONS left unset to absorb remaining space), plus a fixed 10px
       gap between every column. LEVEL-CLASS is 5px narrower than the
       310 first requested (315px column incl. gap, not 320px) after
       Claude's pure-analysis pass found the prior 320px config left
       ACTIONS exactly 1px short of its own minimum content width (3
       action buttons + margins + td padding = 157px needed vs 156px
       available), which was silently overflowing the table by 1px and
       forcing a horizontal scrollbar; Fulvio's revised widths give
       ACTIONS 161px, comfortably above that 157px floor.
       The gap is NOT implemented via border-collapse:separate +
       border-spacing (that was tried in 3.5.186D and reverted: it paints
       the inter-cell gaps with whatever sits behind the table, which
       does not match the header row's own opaque background, so the
       header row visibly broke into mismatched-color blocks). Instead
       each of the 5 columns' own width is its requested width + 10px,
       with that extra 10px pushed entirely into padding-right — so the
       gap is part of the cell's own box and always shares that cell's
       real background (header bg for th, transparent/hover bg for td),
       never the table-wrap's background. Only 5 gaps exist (between the
       6 columns); there is deliberately no extra gap at the table's own
       outer edges this time. border-collapse stays the default
       `collapse` from .ops-teacher-table, so the header row remains one
       continuous, uniformly-colored bar. */
    /* 3.5.494D: STUDENTS rows rendered ~6px taller than PROFILES rows —
       the P/M/R action buttons (30px) are the tallest cell content vs
       PROFILES's own 24px flag wrap, both under the shared 16px
       vertical cell padding (56px vs 62px total). Tighten STUDENTS'
       vertical padding to 13px so the two lists come out the same
       height; flags, badges, buttons and the progress bar keep their
       own proportions untouched. */
    #teacherStudentsTable td {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    #teacherStudentsTable th:nth-child(1),
    #teacherStudentsTable td:nth-child(1) {
        width: 190px;
    }
    #teacherStudentsTable th:nth-child(1) {
        padding-right: 18px;
    }
    #teacherStudentsTable td:nth-child(1) {
        padding-right: 30px;
    }
    #teacherStudentsTable th:nth-child(2),
    #teacherStudentsTable td:nth-child(2) {
        width: 170px;
    }
    #teacherStudentsTable th:nth-child(2) {
        text-align: center;
        padding-right: 18px;
    }
    #teacherStudentsTable td:nth-child(2) {
        text-align: left;
        padding-right: 30px;
    }
    #teacherStudentsTable th:nth-child(3),
    #teacherStudentsTable td:nth-child(3) {
        width: 315px;
        text-align: center;
    }
    #teacherStudentsTable th:nth-child(3) {
        padding-right: 18px;
    }
    #teacherStudentsTable td:nth-child(3) {
        padding-right: 30px;
    }
    /* PROGRESS: the bar/label sit in one flex row (fixed in 3.5.185D) so
       the percentage always stays to the right of the bar, same line. */
    #teacherStudentsTable th:nth-child(4),
    #teacherStudentsTable td:nth-child(4) {
        width: 210px;
    }
    #teacherStudentsTable th:nth-child(4) {
        padding-right: 18px;
    }
    #teacherStudentsTable td:nth-child(4) {
        padding-right: 30px;
    }
    #teacherStudentsTable th:nth-child(5),
    #teacherStudentsTable td:nth-child(5) {
        width: 140px;
    }
    #teacherStudentsTable th:nth-child(5) {
        padding-right: 18px;
    }
    #teacherStudentsTable td:nth-child(5) {
        padding-right: 30px;
    }
    .ops-teacher-student-action[data-tooltip] {
        position: relative;
    }
    .ops-teacher-student-action[data-tooltip]::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 8px;
        border-radius: 4px;
        background: rgba(15, 23, 42, 0.95);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease;
        z-index: 10000;
    }
    .ops-teacher-student-action[data-tooltip]:hover::before {
        opacity: 1;
        visibility: visible;
    }
    /* 3.5.352D: per Fulvio's own explicit "l'alternate text viene
       tagliato... dobbiamo controllare che non ci sia un bordo che
       copre" — traced to `.ops-teacher-main` (this whole scrollable
       dashboard content area), which needs `overflow-x:hidden` paired
       with its own `overflow-y:auto` to avoid a stray horizontal
       scrollbar; that same property silently clips any part of a
       `position:absolute` tooltip that extends past ITS OWN edges, not
       just the browser viewport's. The default tooltip above is
       centered on its own button (`left:50%; transform:translateX(-50%)`),
       which needs free space on BOTH sides — fine for a button
       mid-row, but the Materialize button sits at the very right edge
       of its own row (`justify-self:end`), so the tooltip's own right
       half had nowhere to go but past that clipping ancestor's edge.
       This modifier anchors the tooltip's own RIGHT edge to the
       button's right edge instead, so it only ever grows LEFTWARD, into
       space that already exists. Scoped to this one button only — every
       other `.ops-teacher-student-action` tooltip (P/M/R/etc., never
       flush against a page edge) keeps the original centered behavior. */
    .ops-teacher-student-action.ops-tooltip-anchor-right[data-tooltip]::before {
        left: auto;
        right: 0;
        transform: none;
    }
    /* 3.5.398D: same clipping problem as `.ops-tooltip-anchor-right`
       above, but on the OTHER axis — per Fulvio's own explicit "l'alt
       text viene tagliato" (screenshot of RESOURCES' own category "+"
       button, its own tooltip visibly cut off at the top). The default
       tooltip pops UP (`bottom: calc(100% + 6px)`), but this button sits
       in `.cc-accordion-header`, the very FIRST element inside
       `.cc-accordion`'s own `overflow:hidden` — there is almost no room
       above it before hitting that clipping edge. Flips the tooltip to
       pop DOWN instead, into the accordion's own body area where there
       is always free space. */
    .ops-teacher-student-action.ops-tooltip-anchor-below[data-tooltip]::before {
        bottom: auto;
        top: calc(100% + 6px);
    }
    .ops-teacher-table td {
        vertical-align: middle;
    }
    .ops-teacher-table td:nth-child(3) {
        white-space: nowrap;
    }
    .ops-teacher-table .ops-teacher-badge {
        width: auto;
        height: 26px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 6px;
    }
    .ops-teacher-table .ops-teacher-class-label {
        display: inline;
        white-space: nowrap;
        margin-left: 8px;
        font-size: 13px;
    }
    .ops-teacher-action-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ops-teacher-action-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
    }
    .ops-teacher-action-modal-content {
        position: relative;
        background: var(--bg-card);
        padding: 24px;
        border-radius: 12px;
        max-width: 420px;
        width: 90%;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    }
    .ops-teacher-action-modal-content h3 {
        margin: 0 0 12px 0;
        color: #f97316;
    }
    .ops-teacher-action-modal-content select {
        width: 100%;
        padding: 8px 12px;
        margin: 12px 0;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: var(--bg-input);
        color: var(--text-main);
    }
    .ops-teacher-action-modal-info {
        padding: 14px 16px;
        border-radius: 8px;
        border: 1px solid #334155;
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        color: #f1f5f9;
        font-size: 0.8rem;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 28px;
    }
    .ops-teacher-action-modal-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 26px;
    }
    .ops-teacher-detail-student-actions {
        display: flex;
        gap: 6px;
        align-items: center;
        margin-left: auto;
    }
    .ops-teacher-lessons-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 12px;
    }
    .ops-teacher-lessons-divider {
        height: 1px;
        margin: 14px 0;
        background: rgba(255, 255, 255, 0.12);
        border: none;
    }
    .ops-teacher-lesson-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 10px;
        border-radius: 8px;
        background: var(--bg-input);
        border: 1px solid var(--border);
        cursor: pointer;
    }
    .ops-teacher-lesson-checkbox input {
        width: 18px;
        height: 18px;
    }
    .ops-teacher-lesson-checkbox span {
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .ops-teacher-profile-detail {
        display: grid;
        gap: 24px;
    }
    .pp-body {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        grid-template-areas: "identity data";
        gap: 24px;
    }
    .ops-teacher-profile-form-card { grid-area: identity; }
    .ops-teacher-profile-meta-card { grid-area: data; }
    .pp-h {
        display: grid;
        gap: 24px;
        padding: 24px;
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
    }
    .pp-h-main {
        display: flex;
        align-items: center;
        gap: 22px;
    }
    .pp-photo-wrap {
        width: 120px;
        height: 120px;
        border-radius: 20px;
        overflow: hidden;
        background: #1e293b;
        border: 2px solid rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
    }
    .pp-photo-wrap .ops-teacher-profile-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .pp-photo-wrap .ops-teacher-profile-photo-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 0.85rem;
        text-align: center;
    }
    .pp-h-titles { display: flex; flex-direction: column; gap: 6px; }
    .pp-h-label { font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; }
    .pp-h-name { margin: 0; color: #f1f5f9; font-size: 1.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
    .pp-h-callsign { color: #f97316; font-family: 'IBM Plex Mono', monospace; font-size: 1.3rem; font-weight: 700; }
    .pp-h-ids { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
    .pp-h-ids .ops-teacher-student-id { position: static; transform: none; }
    .pp-h-badges { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
    .pp-h-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    .pp-h-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
    .pp-h-common {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 24px;
        padding: 24px;
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
    }
    .pp-h-common .pp-h-main { justify-content: flex-start; }
    .pp-h-common .pp-h-right { justify-content: center; }
    .pp-vstats {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 18px;
        background: rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
    }
    .pp-vstats .ops-teacher-profile-stat { padding: 12px; }
    .pp-stats-row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }
    .pp-stats-row .ops-teacher-profile-stat { padding: 18px; }
    .pp-timeline-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .pp-top-class { display: flex; align-items: center; gap: 10px; }
    .pp-poster-class { margin: 8px 0 14px 0; }
    .pp-stats-bar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        padding: 16px;
        background: rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
    }
    .pp-poster {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 28px;
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        position: relative;
    }
    .pp-poster-top { position: absolute; top: 20px; right: 20px; }
    .pp-poster-photo {
        width: 160px;
        height: 160px;
        border-radius: 24px;
        overflow: hidden;
        background: #1e293b;
        border: 2px solid rgba(255, 255, 255, 0.12);
        margin-bottom: 16px;
    }
    .pp-poster-name { margin: 0; color: #f1f5f9; font-size: 2rem; font-weight: 800; text-transform: uppercase; text-align: center; }
    .pp-poster-callsign { color: #f97316; font-family: 'IBM Plex Mono', monospace; font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; }
    .pp-poster-badges { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
    .pp-poster-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; }
    .pp-passport {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 28px;
        padding: 28px;
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
    }
    .pp-passport-photo {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 16px;
        overflow: hidden;
        background: #1e293b;
        border: 2px solid rgba(255, 255, 255, 0.12);
    }
    .pp-passport-data { display: grid; align-content: center; gap: 16px; }
    .pp-passport-row { display: flex; align-items: center; gap: 20px; }
    .pp-passport-label { width: 120px; color: #94a3b8; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
    .pp-passport-value { color: #f1f5f9; font-size: 1.1rem; font-weight: 600; }

    .ops-teacher-profile-detail.layout-2 .pp-body { grid-template-columns: 1fr 340px; grid-template-areas: "data identity"; }
    .ops-teacher-profile-detail.layout-3 .pp-body { grid-template-columns: 1fr; grid-template-areas: "identity" "data"; }
    .ops-teacher-profile-detail.layout-3 .ops-teacher-profile-form-card,
    .ops-teacher-profile-detail.layout-3 .ops-teacher-profile-meta-card { max-width: 100%; }
    .ops-teacher-profile-detail.layout-4 .pp-body { grid-template-columns: 1fr; grid-template-areas: "data" "identity"; }
    .ops-teacher-profile-detail.layout-4 .ops-teacher-profile-form-card,
    .ops-teacher-profile-detail.layout-4 .ops-teacher-profile-meta-card { max-width: 100%; }
    .ops-teacher-profile-detail.layout-5 .pp-body { grid-template-columns: 1fr 320px; }
    .ops-teacher-profile-detail.layout-6 .pp-body-6 { grid-template-columns: 1fr 1fr; }

    .ops-teacher-profile-header {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
    }
    .ops-teacher-profile-identity {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .ops-teacher-profile-photo-wrap {
        width: 84px;
        height: 84px;
        border-radius: 12px;
        overflow: hidden;
        background: #1e293b;
        border: 1px solid rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
    }
    .ops-teacher-profile-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ops-teacher-profile-photo-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 0.75rem;
        text-align: center;
    }
    .ops-teacher-profile-form-card {
        padding: 22px;
        background: rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
    }
    .ops-teacher-profile-form-card h4 {
        margin: 0 0 18px 0;
        color: #facc15;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .ops-teacher-profile-form {
        display: grid;
        gap: 16px;
    }
    .ops-teacher-profile-form .ops-teacher-form-group {
        display: grid;
        gap: 6px;
    }
    .ops-teacher-profile-form label {
        color: #94a3b8;
        font-size: 0.95rem;
        font-weight: 600;
    }
    .ops-teacher-profile-form input {
        padding: 12px 14px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: var(--bg-input);
        color: #e2e8f0;
        font-size: 1.15rem;
        font-weight: 700;
    }
    .ops-teacher-profile-form input:read-only {
        opacity: 0.7;
        cursor: not-allowed;
    }
    .ops-teacher-profile-info {
        padding: 14px;
        border-radius: 8px;
        background: rgba(59, 130, 246, 0.08);
        border-left: 3px solid #3b82f6;
        font-size: 0.9rem;
    }
    .ops-teacher-profile-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
    }
    .ops-teacher-profile-meta-card {
        padding: 22px;
        background: rgba(15, 23, 42, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
    }
    .ops-teacher-profile-meta-card h4 {
        margin: 0 0 14px 0;
        color: #facc15;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .ops-teacher-profile-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }
    .ops-teacher-profile-stat {
        padding: 16px;
        background: rgba(15, 23, 42, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        text-align: center;
    }
    .ops-teacher-profile-stat-value {
        display: block;
        font-size: 1.6rem;
        font-weight: 700;
        color: #f97316;
    }
    .ops-teacher-profile-stat-label {
        display: block;
        margin-top: 4px;
        font-size: 0.8rem;
        color: var(--text-muted);
        text-transform: uppercase;
    }
    .ops-teacher-profile-enrollments {
        margin-bottom: 20px;
    }
    .ops-teacher-profile-enrollment-card {
        display: grid;
        grid-template-columns: 60px 1fr auto auto;
        align-items: center;
        gap: 10px 23px;
        padding: 12px;
        background: rgba(15, 23, 42, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        margin-bottom: 10px;
    }
    .ops-teacher-profile-enrollment-year {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 1.1rem;
        font-weight: 700;
        color: #facc15;
    }
    .ops-teacher-profile-enrollment-group {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-main);
    }
    .ops-teacher-profile-enrollment-group.unassigned {
        font-size: 0.95rem;
    }
    .ops-teacher-status-badge {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.95rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .ops-teacher-status-badge.active {
        font-size: calc(0.95rem - 1px);
    }
    /* 3.5.354D: replaces the old .ops-teacher-profile-performance* rules
       (one bordered box per row, max 3 shown, HST-Paper-Lab attempts
       only) — per Fulvio's own explicit "comincierei a fare un'area
       unica con una gradazione di sfondo come nei risultati CW Freak.net.
       Diminuirei il carattere per farci stare dentro 5 risultati, ma
       questi devono includere ANCHE gli altri programmi." ONE shared
       card (gradient background, same radial-gradient TECHNIQUE
       `.cc-teamcard-perf-block`'s own TEAM cards already use) now holds
       up to 5 plain, divider-separated rows (HST-Paper-Lab attempts AND
       RufzXP/CW Freak.NET manual entries, sorted together by date)
       instead of each being its own bordered box — smaller font
       (0.85rem, was 1.1rem) is what actually makes room for 5 rows
       instead of 3. 3.5.355D: the background is explicitly CYAN
       ("celeste"), per Fulvio's own explicit follow-up correction — the
       first attempt tinted it green to match this card's own
       pre-existing "tactical" identity, which was the wrong read of "come
       nei risultati CW Freak.net" (he meant literally CW Freak.NET's own
       cyan shade, `#22d3ee`, not merely its GRADIENT TECHNIQUE). */
    .tc-performances-unified {
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        padding: 4px 12px;
        background: radial-gradient(circle at 25% -10%, rgba(34,211,238,0.18) 0%, #05070c 75%);
        border: 1px solid rgba(34,211,238,0.3);
    }
    .tc-perf-row {
        display: grid;
        grid-template-columns: 1fr 0.9fr 0.75fr 0.6fr;
        gap: 16px;
        align-items: center;
        padding: 7px 0;
        font-size: 0.85rem;
    }
    .tc-perf-row + .tc-perf-row {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    .tc-perf-row-date {
        color: #ffffff;
    }
    .tc-perf-row-category {
        color: #94a3b8;
        font-weight: 600;
        text-transform: uppercase;
    }
    .tc-perf-row-primary {
        color: #f1f5f9;
        font-weight: 600;
        text-align: right;
    }
    .tc-perf-row-secondary {
        color: #f1f5f9;
        font-weight: 700;
        text-align: right;
        position: relative;
    }
    /* Same hover-reveal tooltip mechanism already used elsewhere in this
       file (e.g. .ops-teacher-student-action[data-tooltip],
       .tc-signal-bar[data-tooltip]) — per Fulvio's own explicit
       "mettiamo solo i valori ma se ci andiamo sopra con il mouse ci
       sara' scritto COMBO, MAX Speed": a manual entry's own secondary
       value (Max Speed for RufzXP Toplist/Trainer, Combo for CW
       Freak.NET) shows as a bare number, with the label available only
       on hover. An HST-Paper-Lab attempt row never carries a
       `data-tooltip` at all, so this never applies to its own accuracy%. */
    .tc-perf-row-secondary[data-tooltip]::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 6px);
        right: 0;
        padding: 4px 8px;
        border-radius: 4px;
        background: rgba(15, 23, 42, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease;
        z-index: 20;
    }
    .tc-perf-row-secondary[data-tooltip]:hover::before {
        opacity: 1;
        visibility: visible;
    }

    .ops-teacher-profile-detail { display: grid; gap: 20px; }
    .pp-header, .pp-card, .pp-metrics { padding: 20px; background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; }
    .pp-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
    .pp-photo { width: 100px; height: 100px; border-radius: 16px; overflow: hidden; background: #1e293b; border: 2px solid rgba(255, 255, 255, 0.12); }
    .pp-photo img, .pp-photo .ops-teacher-profile-photo { width: 100%; height: 100%; object-fit: cover; }
    .pp-photo .ops-teacher-profile-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 0.8rem; text-align: center; }
    .pp-info { display: flex; flex-direction: column; gap: 6px; }
    .pp-role { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; }
    .pp-name { color: #f1f5f9; font-size: 1.7rem; font-weight: 800; text-transform: uppercase; }
    .pp-callsign { color: #f97316; font-family: 'IBM Plex Mono', monospace; font-size: 1.2rem; font-weight: 700; }
    .pp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
    .pp-id { padding: 3px 8px; background: #1e293b; border: 1px solid #334155; border-radius: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: #94a3b8; font-weight: 700; }
    .pp-id-short { color: #22c55e; border-color: #22c55e; }
    .pp-flag img, .pp-flag .ops-teacher-student-flag { width: 40px; height: 28px; border-radius: 4px; object-fit: cover; }
    .pp-flag .ops-teacher-student-flag-placeholder { width: 40px; height: 28px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; background: #334155; border-radius: 4px; }
    .pp-source { padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
    .pp-source-demo { background: #1e293b; color: #94a3b8; border: 1px solid #475569; }
    .pp-source-real { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid #22c55e; }
    .pp-class-box { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
    .pp-class-chip { display: flex; align-items: center; gap: 8px; }
    .pp-class-level { padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; }
    .pp-class-group { color: #f1f5f9; font-weight: 700; }
    .pp-class-year { color: #facc15; font-weight: 700; }
    .pp-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .pp-stat { padding: 14px; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; text-align: center; }
    .pp-stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: #f97316; }
    .pp-stat-label { display: block; margin-top: 4px; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase; }
    .pp-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .pp-card h4 { margin: 0 0 14px 0; color: #facc15; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .pp-identity .ops-teacher-form-group { display: grid; gap: 6px; margin-bottom: 14px; }
    .pp-identity label { color: #f1f5f9; font-size: 0.9rem; font-weight: 600; }
    .pp-identity input { padding: 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--bg-input); color: var(--text-main); font-size: 1rem; }
    .pp-identity input:read-only { opacity: 0.7; }
    .pp-data h4 { color: #facc15; }

    .pp-skin-1 .pp-header { background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(15,23,42,0.4)); }
    .pp-skin-2 .pp-header { border-radius: 100px 14px 14px 100px; }
    .pp-skin-2 .pp-photo { border-radius: 50%; }
    .pp-skin-2 .pp-metrics { border-radius: 100px; }
    .pp-skin-3 .pp-content { grid-template-columns: 1fr; }
    .pp-skin-3 .pp-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .pp-skin-4 .pp-header { background: rgba(99,102,241,0.12); }
    .pp-skin-5 .pp-metrics { display: flex; justify-content: space-around; padding: 10px 0; }
    .pp-skin-5 .pp-stat { background: transparent; border: none; }
    .pp-skin-6 .pp-header { grid-template-columns: 1fr; text-align: center; }
    .pp-skin-6 .pp-photo { margin: 0 auto; }
    .pp-skin-6 .pp-class-box { align-items: center; }
    .pp-skin-6 .pp-content { grid-template-columns: 1fr; }

    /* === PROFILE DETAIL — 6 LAYOUTS, 2 SKINS (green/panel) === */
    .tactical-card { width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(57,255,20,0.25); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 20px 60px -20px rgba(57,255,20,0.15); background: radial-gradient(circle at 50% 0%, rgba(57,255,20,0.05), transparent 60%), repeating-linear-gradient(0deg, rgba(57,255,20,0.03) 0px, rgba(57,255,20,0.03) 1px, transparent 1px, transparent 26px), repeating-linear-gradient(90deg, rgba(57,255,20,0.03) 0px, rgba(57,255,20,0.03) 1px, transparent 1px, transparent 26px), #101410; display: flex; flex-direction: column; gap: 10px; }
    .tactical-card.skin-green { color: #d8ffd8; font-family: 'JetBrains Mono', monospace; }
    .tactical-card.skin-panel { background: #101826; color: #f1f5f9; font-family: 'JetBrains Mono', monospace; border-color: rgba(99,102,241,0.35); }
    .tactical-card.skin-panel .tc-header { background: rgba(30,41,59,0.6); border-color: rgba(99,102,241,0.25); }
    .tactical-card.skin-panel .tc-metric { border-color: rgba(99,102,241,0.2); background: rgba(15,23,42,0.45); }
    .tactical-card.skin-panel .tc-card { border-color: rgba(99,102,241,0.2); background: rgba(15,23,42,0.35); }
    .tactical-card.skin-panel .tc-tile { border-color: rgba(99,102,241,0.2); background: rgba(15,23,42,0.45); }
    .tactical-card.skin-panel .tc-callsign { color: #22d3ee; text-shadow: 0 0 8px rgba(34,211,238,.35); }
    .tactical-card.skin-panel .tc-eyebrow { color: #22d3ee; }
    .tactical-card.skin-panel .tc-tag-active { background: rgba(34,211,238,0.12); border-color: #22d3ee; color: #a5f3fc; }
    .tactical-card.skin-panel .tc-seg.filled { background: #22d3ee; box-shadow: 0 0 7px #22d3ee; }
    .tactical-card.skin-panel .tc-pct { color: #22d3ee; }

    .tc-header { border-bottom: 1px solid rgba(57,255,20,0.18); background: rgba(57,255,20,0.06); padding: 20px; position: relative; }
    .tc-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
    .tc-flag-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .tc-badge-wrap { width: 100%; text-align: center; }
    .tc-eyebrow { font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: #ffffff; opacity: .85; font-family: 'Inter', sans-serif; font-weight: 700; }
    .tc-badge { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; padding: 6px 12px; border-radius: 8px; }
    .tc-badge-demo { border: 1.5px solid #9aa3a0; color: #c7cfcc; background: rgba(154,163,160,0.12); }
    .tc-badge-real { border: 1.5px solid #ff8c1a; color: #ffbf80; background: rgba(255,140,26,0.1); }
    /* 3.5.430D: matches the PROFILES list's own .ops-teacher-source-synced
       green scheme, so the profile detail page's own SYNC badge (for a
       genuinely foreign, temporary sync mirror — see isForeignSyncMirror())
       looks consistent with the list's badge for the same profile. */
    .tc-badge-sync { border: 1.5px solid #22c55e; color: #22c55e; background: rgba(34,197,94,0.12); }
    .tc-header-main { display: flex; align-items: center; gap: 18px; }
    .tc-v1 .tc-header .tc-identity { max-width: 260px; }
    .tc-signal-activity {
        position: absolute;
        left: calc(50% + 70px);
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 60px;
        height: 140px;
        padding: 0 24px;
        width: 560px;
    }
    .tc-signal-activity::before,
    .tc-signal-activity::after {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        width: 1px;
        background: rgba(57, 255, 20, 0.12);
    }
    .tc-signal-activity::before { left: -10px; }
    .tc-signal-activity::after { right: -10px; }
    .tc-signal-graph {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .tc-signal-label { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #7fbf7f; font-family: 'Inter', sans-serif; font-weight: 600; white-space: nowrap; }
    .tc-signal-sub { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #7fbf7f; font-family: 'Inter', sans-serif; font-weight: 600; white-space: nowrap; }
    .tc-signal-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .tc-signal-text-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .tc-signal-state { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'Inter', sans-serif; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; position: relative; z-index: 3; }
    .tc-signal-bars { display: flex; justify-content: flex-start; align-items: flex-end; gap: 8px; height: 60px; }
    .tc-signal-bar { width: 11px; border-radius: 3px; background: linear-gradient(180deg, #22d3ee, #0e6f82); position: relative; }
    .tc-signal-bar-empty { background: rgba(255,255,255,0.05); }
    .tc-signal-bar.peak { background: linear-gradient(180deg, #eafdff, #22d3ee); }
    .tc-signal-bar[data-tooltip]::before {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        border-radius: 5px;
        background: #0f172a;
        border: 1px solid #334155;
        color: #e2e8f0;
        font-size: 13px;
        font-family: 'Inter', sans-serif;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
        z-index: 20;
    }
    .tc-signal-bar[data-tooltip]:hover::before { opacity: 1; }
    /* 3.5.352D: same root cause and same fix shape as the Materialize
       button's own tooltip above — `.ops-teacher-main`'s
       `overflow-x:hidden` (paired with its own `overflow-y:auto`, needed
       to avoid a stray horizontal scrollbar) clips this centered
       tooltip's own left half whenever the FIRST bar in a trend chart
       (`.tc-signal-bars`, e.g. the PERFORMANCE tab's own trend-by-day
       chart, per Fulvio's own explicit "anche qui in performance") sits
       close enough to the page's own left edge. Anchoring the first
       bar's own tooltip to grow rightward (its own left edge, not
       center) keeps it inside space that already exists; every other
       bar in the same row keeps the original centered behavior. */
    .tc-signal-bar[data-tooltip]:first-child::before {
        left: 0;
        transform: none;
    }
    .tc-signal-sub b { color: #22d3ee; }
    .tc-signal-state { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'Inter', sans-serif; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1; }
    .tc-signal-state.active { color: #22c55e; }
    .tc-signal-state.inactive { color: #94a3b8; }
    .tc-signal-led { display: inline-block; width: 16px; height: 6px; border-radius: 2px; box-shadow: 0 0 4px currentColor; }
    .tc-signal-state.active .tc-signal-led { background: #22c55e; color: #22c55e; }
    .tc-signal-state.inactive .tc-signal-led { background: #ef4444; color: #ef4444; box-shadow: 0 0 6px #ef4444; }
    .tc-header-inactive .tc-header-top,
    .tc-header-inactive .tc-identity,
    .tc-header-inactive .tc-photo-box,
    .tc-header-inactive .tc-empty-box,
    .tc-header-inactive .tc-signal-text-lines,
    .tc-header-inactive .tc-signal-graph {
        filter: grayscale(100%) blur(1.2px);
        opacity: 0.55;
    }

    /* ============================================================
       CLASS INFORMATION HUB (3.5.279D) — the nested "Class Content"
       tab strip shown below a CLASS's own detail (both ADVISOR's
       showTeacherClassDetail() and STUDENT's own
       renderStudentDashboardClassScreen() render through
       renderClassContentHub(), so this one CSS block styles both
       identically). Deliberately reuses the app's own existing color
       tokens (#94a3b8/#f97316/#22d3ee/#334155/#22c55e/#ef4444/#64748b)
       and, for the Performance trend bars, the existing
       .tc-signal-bars component — no new visual language, no new
       chart library.
    ============================================================= */
    /* 3.5.295D: the gap between the class card's own bottom edge and the
       Hub's tab bar must be exactly 20px on BOTH Advisor and Student —
       Fulvio flagged they didn't match. TWO separate causes found:
       (1) Advisor's #teacherClassDetail relied on the shared
       .ops-teacher-detail's own padding:26px on all sides, unmodified,
       while Student's own inline-styled card (renderStudentDashboardClassScreen())
       already used padding-bottom:6px — different internal bottom
       cushions made the visible whitespace from each card's last real
       content down to its own border differ, even before any external
       gap. Fixed by bringing Advisor's bottom padding down to the SAME
       6px (via this ID-scoped override — #teacherClassDetail is the one
       and only element with this id, so no other .ops-teacher-detail
       instance elsewhere in the app is affected). (2) The REAL border-to-
       border gap itself also differed: #teacherClassContentArea (Advisor)
       is a direct child of #teacherTab-classes, styled `.ops-teacher-panel.active
       { display:flex; flex-direction:column; gap:20px; }` — that flex
       `gap` ALREADY inserts 20px before #teacherClassContentArea, and
       .ops-teacher-classcontent's own `margin-top:20px` inside it then
       ADDED a second, redundant 20px on top, for 40px total. Student's
       own #studentDashboardClassContentArea is nested one level deeper
       (inside #studentDashboardContent, itself the panel's flex child —
       the panel's own `gap` never reaches its grandchildren), so there
       Student's `margin-top:20px` was the only contributor, correctly
       20px. Fixed by zeroing `.ops-teacher-classcontent`'s margin-top
       ONLY inside Advisor's #teacherClassContentArea (its own panel gap
       already supplies the 20px there); Student's shared rule below
       keeps margin-top:20px, unaffected, since it's still the only
       contributor for that side. */
    #teacherClassDetail.active { padding-bottom: 6px; }
    #teacherClassContentArea .ops-teacher-classcontent { margin-top: 0; }
    /* 3.5.571D: Fulvio — "lo spazio sotto dall'area student dashboard
       deve essere SEMPRE di 20px." The comment above this block
       predates the Liquid Glass rework (3.5.559D+): back then
       #studentDashboardClassContentArea really was "nested one level
       deeper than the panel's own flex gap reach," per its own
       reasoning — no longer true. `.ops-teacher-hero`/`.ops-teacher-panel`
       are direct siblings under `#studentDashboardMain`
       (`.ops-teacher-main`), whose OWN `gap:20px` now reaches this
       exact hero-to-content boundary regardless of nesting further
       down — so Student's Hub view was getting that 20px PLUS this
       rule's own 20px margin, 40px total, while the new plain "MY
       CLASS info" view (no such margin) correctly got only 20px — an
       inconsistency Fulvio's own screenshots caught directly. Zeroed
       here too, same fix as Advisor's own line above, for the same
       reason: the outer gap already supplies the 20px on both sides now. */
    #studentDashboardClassContentArea .ops-teacher-classcontent { margin-top: 0; }
    .ops-teacher-classcontent { margin-top: 20px; width: 100%; }
    /* 3.5.281D: the Hub's own "course information" skin now inherits the
       SELECTED CLASS's own level identity — --cc-accent is set inline on
       .ops-teacher-classcontent itself (see renderClassContentHub()),
       reusing the EXACT SAME hex values already used for the level badge
       backgrounds (.ops-teacher-badge.beginner/.fundamental/.intermediate/
       .advanced — see CC_LEVEL_ACCENT/getCcLevelAccent()), never a second
       palette. color-mix() (already used elsewhere in this file, e.g. the
       curriculum box) derives every shade from that one variable, so a
       BEGINNER class's Hub reads green, ADVANCED reads orange, etc. — data-
       driven, not hardcoded per class. Border removed per Fulvio's own
       explicit request (background treatment only). Same component
       (.ops-teacher-tabs/.ops-teacher-tab), same text size as the
       STUDENT DASHBOARD/ADVISOR DASHBOARD navigation above it (12px/13px
       active — deliberately NOT smaller), only the accent differs. */
    /* 3.5.294D: the hub label now lives INSIDE the tab bar itself (as its
       first flex child, see renderClassContentHub()), left-aligned and
       vertically centered with the tab buttons, per Fulvio's own explicit
       request — no more separate line above it. margin-right:auto pins it
       to the left while the tab buttons pack to the right, exactly like
       before. margin-bottom removed (no longer stacked above anything). */
    .cc-hub-label { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--cc-accent, #fb923c); }
    /* 3.5.295D: this LED is now ALWAYS white, per Fulvio's own explicit
       request — no longer tied to --cc-accent (the label's own text stays
       level-colored, unchanged; only the dot itself is fixed white now). */
    .cc-hub-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,0.8); flex-shrink: 0; }
    /* Advisor "view as student" Hub photo (TEAM card's "P" button).
       History: 3.5.466D (Devin) put it 64px, growing the whole row, with
       the fixed/flexible margins backwards (20px tied to the label
       instead of to WELCOME). 3.5.467D fixed the margins and shrunk it
       to 34px to avoid growing the row at all — Fulvio's own follow-up:
       34px read as too small against a 46px-tall row, and asked for an
       exact 50px row / 46px photo / 2px clearance top+bottom. The row's
       OWN vertical padding (6px, from the shared .ops-teacher-tabs base
       class) would otherwise stack on top of ANY child-height math to
       produce 46+6+6=58px (or more, with margin) — not 50px — so an
       exact 50px total requires that padding reduced to 2px specifically
       here; see .cc-tabs-photo-mode below (a modifier class, applied
       only when this photo actually renders, so the shared 6px padding
       stays completely untouched for every OTHER render of this same
       Hub tab bar). !important on width/height is required since
       .cc-team-photo-lg's own 64px, later in this file, would otherwise
       win. margin-right:14px + the row's own gap:6px totals an exact
       20px gap before WELCOME. */
    .cc-hub-student-photo { margin-left: auto; margin-right: 14px; width: 46px !important; height: 46px !important; border-radius: 8px; }
    .cc-tabs.cc-tabs-photo-mode { padding-top: 2px; padding-bottom: 2px; }
    .cc-tabs {
        flex-wrap: wrap; row-gap: 6px;
        align-items: center; /* 3.5.294D: vertically centers the hub label against the tab buttons */
        padding-left: 20px; /* 3.5.294D: explicit override of the shared .ops-teacher-tabs padding:6px — the hub label sits exactly 20px from the bar's own left edge, per Fulvio's own explicit request */
        background: linear-gradient(135deg, color-mix(in srgb, var(--cc-accent, #f97316) 14%, transparent) 0%, rgba(15,23,42,0.7) 55%);
        border: none; /* 3.5.281D: explicit override — the shared .ops-teacher-tabs base rule has its own 1px border, removed here per Fulvio's own explicit "remove the border, keep the background" request */
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    /* 3.5.379D: every main-bar button (WELCOME/COURSE/TEAM/PERFORMANCE/
       RESOURCES) now gets the SAME fixed width — wide enough for the
       longest label, "PERFORMANCE" — so switching which one is active
       (and its font-size bump to 13px below) never reflows/resizes the
       bar, per Fulvio's own explicit "l'effetto fisarmonica" complaint
       against the previous accordion's own second row (also removed
       here, see .cc-course-dropdown-* below). Width measured via a
       headless-Chrome test of the real rendered "Performance" button at
       its own active 13px size, then rounded up with a small safety
       margin. 3.5.385D: narrowed another 20px (132px -> 112px) for ALL
       5 buttons uniformly, per Fulvio's own explicit "per il menu CLASS
       INFORMATION HUB restringi per tutti i bottoni di 20px" — unlike
       the Advisor Dashboard's own menu (3.5.382D), where CURRICULUMS
       specifically stayed wider, here every button shrinks by the same
       amount, no exception. Re-verified no overflow at 112px for
       "Performance" (active, 13px) and for COURSE's own longest possible
       swapped label, "Key Point". */
    .cc-tab { font-size: 12px; padding: 10px 14px; width: 112px; text-align: center; }
    /* 3.5.393D: TEAM only narrowed another 20px (112px -> 92px), per
       Fulvio's own explicit "rendiamo solo il tasto TEAM in CLASS
       INFORMATION HUB ristretto di 20px" — all other main-bar buttons
       keep the shared 112px. 3.5.396D: narrowed another 20px again
       (92px -> 72px), per Fulvio's own explicit "accorciamo di 20px il
       tasto TEAM." */
    .cc-tab.cc-tab-team { width: 72px; }
    /* 3.5.396D: COURSE narrowed 10px (112px -> 102px), per Fulvio's own
       explicit "10px tasto COURSE" — only COURSE, every other main-bar
       button (Welcome/Team/Performance/Resources) keeps its own
       existing width. */
    .cc-tab.cc-course-tab { width: 102px; }
    /* 3.5.299D: the per-tab LEDs (3.5.283D) were removed from the tab
       buttons themselves — this rule is now unused, kept deleted rather
       than dead — per Fulvio's own explicit request to keep only the
       ONE LED next to "Class Information Hub" (.cc-hub-label::before),
       matching Student/Advisor Dashboard's own tab bars, neither of
       which has per-button LEDs. */
    .cc-tab.active {
        font-size: 13px;
        color: #0b0f19;
        background: linear-gradient(180deg, color-mix(in srgb, var(--cc-accent, #f97316) 88%, white) 0%, color-mix(in srgb, var(--cc-accent, #f97316) 85%, black) 100%);
        border: 1px solid color-mix(in srgb, var(--cc-accent, #f97316) 60%, transparent);
        box-shadow: 0 0 24px color-mix(in srgb, var(--cc-accent, #f97316) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
    }
    /* 3.5.379D: COURSE is now a real dropdown (replacing the previous
       accordion's own second tab-bar row, which pushed the bar to a
       second line — "l'effetto fisarmonica" Fulvio flagged). Same
       show/hide-a-floating-panel + click-outside-closes pattern already
       used by the Settings screen's own Profile dropdown
       (#activeProfileDropdownWrap/List — see toggleActiveProfileDropdown()),
       applied here via a shared class instead of one fixed id, since two
       Hub instances (Advisor/Student) can exist. No "which subtab was
       last open" state needed: the button's own selected label already
       IS whichever course subtab is `activeTab`, so there is nothing
       left to remember once the dropdown is a real select-style control
       instead of an inline accordion. */
    .cc-course-dropdown-wrap { position: relative; display: inline-block; }
    .cc-course-tab { display: flex; align-items: center; justify-content: center; gap: 6px; }
    /* 3.5.379D: the arrow is now a persistent "this opens a dropdown"
       affordance (not tied to accordion open/closed like the previous
       ▾/▴ swap) — kept bigger per Fulvio's own explicit "la freccia...
       deve essere più grande", and rotated 180° via the wrap's own
       `.open` class (toggled in JS alongside the floating panel's own
       display) instead of swapping the glyph. */
    .cc-course-arrow { font-size: 15px; line-height: 1; transition: transform 0.2s ease; }
    .cc-course-dropdown-wrap.open .cc-course-arrow { transform: rotate(180deg); }
    /* 3.5.379D: once a subtab is picked, COURSE's own button shows that
       subtab's name instead of "Course" — per Fulvio's own explicit "si
       posiziona al posto di COURSE ma con un colore differente, magari
       una gradazione di arancione" — a DIFFERENT, always-orange 3-stop
       gradient (not the data-driven `--cc-accent` the other main tabs'
       `.cc-tab.active` uses, since Fulvio asked for this one to read
       visually distinct from a plain selected tab, not identical to it
       like the earlier accordion iteration was). */
    .cc-course-tab.cc-course-selected {
        font-size: 13px;
        color: #1a0f02;
        background: linear-gradient(180deg, #fdba74 0%, #f97316 55%, #c2410c 100%);
        border: 1px solid rgba(251, 146, 60, 0.7);
        box-shadow: 0 0 20px rgba(249, 115, 22, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    }
    .cc-course-dropdown-list {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 160px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 8px;
        z-index: 50;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .cc-course-dropdown-item {
        padding: 10px 14px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        cursor: pointer;
        white-space: nowrap;
    }
    .cc-course-dropdown-item:hover { background: rgba(255,255,255,0.06); color: var(--text-main); }
    .cc-course-dropdown-item.active { color: #f97316; }
    /* 3.5.284D: Hub-wide typography scale increased AGAIN beyond
       3.5.283D, per Fulvio's own explicit follow-up request — content
       text, list/bullet text, info text, section titles and subtitles
       all sized up another notch while keeping the same title > subtitle
       > body hierarchy (only the absolute sizes moved, not the ratios). */
    .cc-body { background: rgba(0,0,0,0.18); border: 1px solid #334155; border-radius: 10px; padding: 20px; margin-top: 10px; font-size: 17px; line-height: 1.75; }
    /* Section titles: underline removed, replaced with pure whitespace
       (~20px) per Fulvio's own explicit correction — hierarchy through
       spacing, not a rule line. */
    .cc-section-title { color: var(--cc-accent, #fb923c); font-size: 20px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; margin: 0 0 20px; }
    .cc-subheading { color: #e2e8f0; font-size: 18px; font-weight: 700; margin: 20px 0 8px; }
    .cc-subheading:first-of-type { margin-top: 0; }
    .cc-bullet-list { margin: 0 0 8px; padding-left: 20px; color: #cbd5e1; font-size: 17px; line-height: 1.85; }
    .cc-bullet-list li { margin-bottom: 6px; }
    .cc-empty { color: #64748b; font-size: 16px; padding: 6px 0; }
    .cc-list-item { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .cc-list-item:last-child { border-bottom: none; }
    .cc-list-item-main { flex: 1; min-width: 0; }
    .cc-list-item-title { color: #e2e8f0; font-weight: 700; font-size: 18px; }
    .cc-list-item-sub { color: #94a3b8; font-size: 15px; margin-top: 3px; }
    .cc-list-item-body { color: #cbd5e1; font-size: 17px; line-height: 1.75; margin-top: 6px; white-space: pre-wrap; }
    .cc-list-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
    /* 3.5.283D: EDIT/REMOVE controls are now compact TEXT buttons, never
       an icon alone — Fulvio's own explicit correction ("too small and
       visually ambiguous... prefer a small textual control"). Still
       deliberately compact (not a large button). .danger now carries its
       own red tint by default (not only on :hover), so a destructive
       Remove reads as such at a glance, distinct from the neutral Edit. */
    .cc-btn-mini { background: #1e293b; border: 1px solid #334155; border-radius: 5px; color: #94a3b8; font-size: 13px; font-weight: 600; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
    .cc-btn-mini:hover { color: #e2e8f0; border-color: #475569; }
    .cc-btn-mini.danger { color: #f87171; border-color: rgba(239,68,68,0.35); }
    .cc-btn-mini.danger:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,0.08); }
    .cc-add-btn { background: #16a34a; border: 1px solid #16a34a; border-radius: 6px; color: #ffffff; font-size: 14px; font-weight: 700; padding: 8px 16px; cursor: pointer; margin-bottom: 14px; }
    .cc-edit-form { background: rgba(0,0,0,0.25); border: 1px solid #334155; border-radius: 8px; padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
    .cc-edit-form label { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
    .cc-edit-form input[type="text"], .cc-edit-form input[type="url"], .cc-edit-form input[type="number"], .cc-edit-form input[type="date"], .cc-edit-form textarea, .cc-edit-form select {
        background: #0f172a; border: 1px solid #334155; border-radius: 5px; color: #e2e8f0; font-size: 16px; padding: 8px 10px; width: 100%; box-sizing: border-box; font-family: inherit;
    }
    .cc-edit-form textarea { min-height: 90px; resize: vertical; }
    .cc-edit-actions { display: flex; gap: 8px; margin-top: 4px; }
    /* 3.5.303D: no underline, per Fulvio's own explicit request (matches
       RESOURCES' own links, .cc-compact-title-link, already underline-
       free since 3.5.299D) — this is the MEETINGS "Join Zoom Meeting"-
       style link's only usage in the whole file.
       3.5.304D: color now matches the SAME pattern as RESOURCES' own
       links exactly — white at rest (#e2e8f0, same as .cc-compact-title),
       cyan only on hover (#22d3ee, was permanently cyan) — per Fulvio's
       own explicit "voglio che sia BIANCO come i link e se ci passo
       sopra, in cyan" request. */
    /* 3.5.305D: bold + uppercase, per Fulvio's own explicit follow-up
       request ("Non è vero... è BIANCO ma NON BOLD, fare bold e poi
       tutto MAIUSCOLO"). */
    .cc-link { color: #e2e8f0; text-decoration: none; word-break: break-all; font-size: inherit; font-weight: 700; text-transform: uppercase; }
    .cc-link:hover { color: #22d3ee; }
    .cc-badge { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; }
    .cc-badge-auto { color: #64748b; background: rgba(100,116,139,0.15); border: 1px solid rgba(100,116,139,0.3); }
    .cc-badge-manual { color: #22c55e; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); }
    .cc-perf-table { width: 100%; border-collapse: collapse; font-size: 16px; }
    /* 3.5.349D: per Fulvio's own explicit "gli header con i sorteggi sono
       spostati un po piu a destra rispetto ai valori... spostare TUTTA
       la RIGA HEADER a SINISTRA di 10px mentre i valori rimangono dove
       sono" — the `.ops-teacher-sort-btn` inside a header cell (Date/
       Student/Program/Metrics, all sortable since 3.5.347D) carries its
       own left padding on top of this `th`'s own, visually pushing its
       label further right than the plain-text `td` below it. `position:
       relative; left:-10px` shifts every header cell's own painted
       position — text included — without touching column widths or any
       `td` (table-cell boxes ignore `margin`, so this offset technique is
       the standard way to nudge one without disturbing layout), affecting
       both Advisor and Student (same shared table). */
    .cc-perf-table th { text-align: left; color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 8px; border-bottom: 1px solid #334155; position: relative; left: -10px; }
    /* 3.5.347D: per Fulvio's own explicit "togliamo la linea fine che c'e'
       tra ogni tentativo cosi abbiamo una lista un po piu compatta" — the
       thin per-row separator is gone, for both Advisor and Student (same
       shared table). `border-bottom:none` is explicit, not just omitted
       — this file's own global `table td { border-bottom: 1px solid
       ...}` rule (line ~2958) would otherwise still apply, since nothing
       here would override it by simply not declaring the property at
       all. 3.5.348D: `3.5.347D`'s own first attempt kept the pre-existing
       10px top/bottom padding (a 20px total gap between adjacent rows'
       own text) on the theory that "20px tra ogni riga" meant preserving
       that exact number — Fulvio's own follow-up after seeing it live
       corrected that reading: "lo spazio tra le linee... e' ancora
       troppo grande.. portiamolo a 10px" (10px was always meant as the
       TOTAL gap, not the per-side padding). 5px top/bottom now sums to
       exactly that. */
    .cc-perf-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #e2e8f0; }
    /* 3.5.521D — Advisor CLASS PERFORMANCE: the thin separator appears
       ONLY between different callsigns — same same-student/group-open
       convention as #teacherResultsTable (3.5.471D): .group-open marks a
       row whose NEXT row is the same student, so its border-bottom (the
       line between the two) is suppressed. A single-student list (the
       Student's own History) therefore still shows no lines at all,
       exactly as before. */
    .cc-perf-table tbody tr.group-open td { border-bottom: none; }
    .cc-perf-table tbody tr:last-child td { border-bottom: none; }
    /* 3.5.529D: Fulvio, after the 3.5.528D same-callsign spacing fix —
       "quello che si può fare è che lo spazio, quando c'è la riga, sia
       maggiore... così da staccare visibilmente... 4px, 2 sopra e 2
       sotto." A row whose OWN border-bottom actually renders (i.e. not
       `.group-open`) gets 2px more padding-bottom, and a row that
       FOLLOWS one of those (i.e. not `.same-student` — that class means
       "my previous row had the same callsign, no line above me")
       gets 2px more padding-top — so the visible separator line sits in
       a 14px gap instead of the base 10px, while a same-callsign
       (line-free) pair keeps the tight 10px 3.5.528D just fixed.
       `:first-child` is excluded per Fulvio's own explicit "chiaramente
       non della prima riga" — the top edge of the table has no line
       above it to detach from. */
    .cc-perf-table tbody tr:not(.group-open) td { padding-bottom: 7px; }
    .cc-perf-table tbody tr:not(.same-student) td { padding-top: 7px; }
    .cc-perf-table tbody tr:first-child td { padding-top: 5px; }
    /* 3.5.522D — Fulvio: "la casella DATE è attaccata al bordo SINISTRO
       ... mettiamo lo stesso spazio dal bordo" (the ~10px inset the
       STUDENT RESULTS DATE/TIME header already shows). 3.5.349D's
       `left:-10px` header shift paints the FIRST header cell 10px left
       of the table edge — flush against the new glass wrap's border.
       Neutralizing it on :first-child only, scoped to the wrapped
       Advisor table (the Student History card keeps its own flush look),
       restores that same inset without touching the other headers' own
       3.5.349D alignment. */
    .ops-teacher-table-wrap .cc-perf-table th:first-child { left: 0; }
    /* 3.5.523D — Fulvio, same thread: "chiaramente anche il campo data
       deve essere spostato di 10px a destra" — the header's own +10px
       (rule above) left the DATE *values* still at the old 8px padding;
       td:first-child gets the same +10px so the whole first column
       carries the RESULTS-style inset. */
    /* 3.5.523D — Fulvio: "i caratteri delle colonne DATE / STUDENT /
       PROGRAM e METRICS non sono gli stessi usati in RESULTS —
       uniformare ... solo lo stile non i colori, quindi carattere e
       grandezza". Computed-style check: RESULTS cells render 15px
       (DATE/TIME column itself 0.85rem = 13.6px), while .cc-perf-table
       carried 16px td / 12px th / .05em letter-spacing. Same values
       applied here, scoped to the glass-wrapped Advisor table only —
       the Student History card keeps its own sizing. Colors untouched
       (program/callsign/metric colors stay exactly as declared). The
       first-child rules below merge the +10px DATE inset with the
       RESULTS-style 0.85rem date size in one block. */
    .ops-teacher-table-wrap .cc-perf-table { font-size: 15px; }
    .ops-teacher-table-wrap .cc-perf-table th { font-size: 15px; letter-spacing: 0.5px; }
    .ops-teacher-table-wrap .cc-perf-table th:first-child { font-size: 0.85rem; }
    .ops-teacher-table-wrap .cc-perf-table td:first-child { padding-left: 18px; font-size: 0.85rem; }
    .cc-perf-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
    .cc-perf-filters select, .cc-perf-filters input { background: #0f172a; border: 1px solid #334155; border-radius: 5px; color: #e2e8f0; font-size: 14px; padding: 6px 9px; }
    .cc-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
    /* 3.5.347D: per Fulvio's own explicit "rendiamoli uguali con gli
       angoli a 10px e non cosi rotondi" — was 20px (a full pill shape),
       now a squarer 10px radius, same as every other rounded-rectangle
       button in this file. */
    .cc-pill { background: #1e293b; border: 1px solid #334155; border-radius: 10px; color: #94a3b8; font-size: 14px; font-weight: 600; padding: 7px 16px; cursor: pointer; }
    .cc-pill.active { background: color-mix(in srgb, var(--cc-accent, #f97316) 15%, transparent); border-color: var(--cc-accent, #f97316); color: var(--cc-accent, #f97316); }
    /* 3.5.358D: replaces the old .cc-stat-row/.cc-stat-box/.cc-stat-label/
       .cc-stat-value (Best/Last Result/Trend 3-box row) and .cc-day-row/
       .cc-day-label/.cc-day-bar-wrap/.cc-day-bar-fill/.cc-day-pct ("By
       training day") — both removed outright, not just unused, from the
       Student PERFORMANCE tab redesign (renderCCPerformanceStudent()). */
    .cc-perf-best-area { margin-bottom: 20px; }
    /* Student PERFORMANCE tab's own History list, now a visually separate
       card (Fulvio's own explicit "l'AREA History deve essere un'area
       separata") — same card look already established elsewhere in this
       Hub (.cc-card). */
    /* 3.5.359D: top padding 9px (1px border + 9px padding = a visible
       10px gap, was 20px) per Fulvio's own explicit "troppo spazio
       SOPRA... HISTORY... massimo 10px sopra" — left/right/bottom
       padding untouched. */
    .cc-perf-history-card { background: rgba(0,0,0,0.18); border: 1px solid #334155; border-radius: 10px; padding: 9px 20px 20px; }
    /* 3.5.299D: .cc-meeting-card/.cc-meeting-icon removed (unused) —
       MEETINGS no longer wraps its single entry in a flex card with a
       decorative icon box; see renderCCMeetings(). */
    /* 3.5.297D: Resource-Manager-style redesign of SESSIONS/FAQ/KEY
       POINTS/RESOURCES — replaces the old always-expanded
       .cc-resource-group* rules (now unused, removed) with a compact,
       accordion-based system reused across all four sections. Same
       visual language as the rest of the Hub (same accent variable,
       same border/background tones as .cc-body/.cc-card), just far more
       information-dense: a whole category or item collapses to ONE row
       until clicked open. */
    .cc-accordion { border: 1px solid #334155; border-radius: 8px; margin-bottom: 10px; overflow: hidden; background: rgba(0,0,0,0.15); }
    .cc-accordion:last-child { margin-bottom: 0; }
    /* 3.5.298D: header background lightened to the SAME gradient as
       .ops-teacher-action-btn/.ops-teacher-student-action (the app's own
       existing "button 040" style) instead of reading almost-black like
       its own body content below it, per Fulvio's own explicit request —
       only the clickable header gets this lighter treatment; the body
       stays on .cc-accordion's own darker background. */
    .cc-accordion-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); }
    .cc-accordion-header:hover { background: linear-gradient(180deg, #334155 0%, #1e293b 100%); }
    .cc-accordion-icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
    /* 3.5.298D: accordion titles must read clearly BIGGER than their own
       content (19px vs. the 17px compact rows now use, see below), per
       Fulvio's own explicit request — title > content hierarchy. */
    .cc-accordion-title { flex: 1; min-width: 0; color: #e2e8f0; font-weight: 700; font-size: 19px; }
    .cc-accordion-chevron { flex-shrink: 0; color: #94a3b8; font-size: 11px; transition: transform 0.2s ease; }
    .cc-accordion-chevron.open { transform: rotate(180deg); }
    .cc-accordion-body { padding: 2px 14px 12px; border-top: 1px solid rgba(255,255,255,0.06); }
    /* 3.5.299D: bumped from 15px to 17px — Fulvio flagged this specific
       intro text (the category description paragraphs) as still too
       small after 3.5.298D's own font-size pass, which had missed it. */
    .cc-accordion-intro { color: #94a3b8; font-size: 17px; line-height: 1.7; margin: 12px 0 10px; }
    /* Compact single-line rows (FAQ questions, Key Points, Sessions,
       Resources) — replaces the old always-multi-line .cc-list-item
       usage in these four sections specifically (.cc-list-item itself
       is untouched, still used by WELCOME/OVERVIEW/MEETINGS). */
    .cc-compact-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
    .cc-compact-item:last-child { border-bottom: none; }
    .cc-compact-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; }
    .cc-compact-icon { flex-shrink: 0; width: 22px; height: 22px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
    .cc-compact-chevron { flex-shrink: 0; width: 18px; text-align: center; color: #64748b; font-size: 10px; transition: transform 0.2s ease; }
    .cc-compact-chevron.open { transform: rotate(180deg); }
    /* 3.5.298D: content text sizes matched to PERFORMANCE's own (17px,
       inherited from .cc-body), per Fulvio's own explicit "i caratteri
       sono troppo piccoli" complaint — was 14px. */
    .cc-compact-title { flex: 1; min-width: 0; color: #e2e8f0; font-weight: 600; font-size: 17px; }
    /* 3.5.399D: FAQ questions ONLY — per Fulvio's own explicit "vorrei
       le domande in giallo. non si leggono in BIANCO." Deliberately a
       separate modifier, not a change to `.cc-compact-title` itself,
       since that shared base rule also drives Key Points/Sessions/
       Resources item titles, none of which were asked to change. Same
       standard yellow accent (#facc15) already used everywhere else in
       this app (WPM/CPM values, calendar icons, etc.) — never a new,
       invented color. */
    .cc-faq-question { color: #facc15; }
    /* 3.5.399D: images embedded in a FAQ answer via ccSanitizeRichText()
       (e.g. <img src="https://...">) get a sensible default look —
       capped width so a large image never overflows the card, rounded
       corners and a small top margin matching this app's own established
       image-in-card style (photos, curriculum icons, etc.), and a
       pointer-free block layout so it never gets treated as inline text. */
    .cc-compact-body img { max-width: 100%; height: auto; border-radius: 8px; margin-top: 8px; display: block; }
    .cc-compact-title-link { text-decoration: none; }
    /* 3.5.299D: no underline on hover, per Fulvio's own explicit request
       — still shows the hover color change alone as the affordance. */
    .cc-compact-title-link:hover { color: #22d3ee; text-decoration: none; }
    .cc-compact-meta { flex-shrink: 0; color: #64748b; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
    /* 3.5.299D: the resource TYPE label (PDF/SOFTWARE/LINK/VIDEO/OTHER)
       specifically, per Fulvio's own explicit request — yellow, unlike
       Sessions' own plain grey SESSION/date meta labels which reuse the
       base .cc-compact-meta unchanged. */
    .cc-compact-meta-type { color: #facc15; }
    .cc-compact-actions { flex-shrink: 0; display: flex; gap: 4px; margin-left: 4px; }
    .cc-compact-body { padding: 0 4px 12px 36px; color: #cbd5e1; font-size: 17px; line-height: 1.75; white-space: pre-wrap; }
    /* 3.5.400D: bold text inside a FAQ answer (the only place
       ccSanitizeRichText() lets a real <b>/<strong> element through —
       Key Points/Sessions details still go through plain ccEscape(),
       so this can never affect them) — per Fulvio's own explicit "e'
       possibile invece di mettere BIANCO Bold, CYAN Bold? perche' non si
       vede": bold text just inheriting the body's own light-grey color
       (#cbd5e1) barely stood out from the surrounding paragraph. Same
       standard cyan (#22d3ee) already used elsewhere in this app (e.g.
       tactical card callsigns) — never an invented new color. */
    .cc-compact-body b, .cc-compact-body strong { color: #22d3ee; }
    /* 3.5.403D: FAQ answers and Key Points/Tips Detail (at the time, the
       only two fields rendering through ccSanitizeRichText() — Sessions'
       description also gained this treatment in 3.5.404D, but on its
       own separate `.cc-compact-body-blue` modifier below, not this one)
       get their own light "content card" background — per Fulvio's own
       explicit "riusciamo magari a
       fare un'area BIANCA?" with a screenshot of a pasted article
       rendering exactly as it would on its own original (light-
       background) page. Real pasted HTML often carries its own inline
       colors chosen against a WHITE page (e.g. the `#993300` heading
       color from this exact session's own example) — forcing that same
       content onto this app's dark theme fought against those choices;
       a dedicated light card lets inline colors read as originally
       intended while this app's own dark theme is completely unchanged
       everywhere else. `.cc-compact-body-rich` is a modifier ADDED
       alongside the existing `.cc-compact-body` (not a replacement),
       so its own padding/font-size/line-height/white-space are
       untouched — only background/text/heading/bold colors are reset
       here for legibility on light instead of dark. Placed AFTER the
       cyan-bold rule above so it wins the tie on `.cc-compact-body b`'s
       shared specificity (both are one class + one tag selector) via
       source order — cyan-on-dark was the right call for FAQ/Tips
       answers that stay in this app's own dark theme elsewhere; a plain
       dark, near-black bold reads correctly on THIS light card instead. */
    .cc-compact-body-rich {
        background: #f5f5f5;
        color: #3f3f3f;
        border-radius: 10px;
        padding: 20px 24px;
        margin: 6px 4px 12px 36px;
    }
    .cc-compact-body-rich h1, .cc-compact-body-rich h2, .cc-compact-body-rich h3,
    .cc-compact-body-rich h4, .cc-compact-body-rich h5, .cc-compact-body-rich h6 {
        color: #1a1a1a;
    }
    .cc-compact-body-rich b, .cc-compact-body-rich strong { color: #1a1a1a; }
    .cc-compact-body-rich a { color: #2563eb; }
    /* 3.5.404D: Sessions descriptions get the SAME rich-HTML treatment
       FAQ/Key Points already have (3.5.399D-3.5.403D) — per Fulvio's own
       explicit "anche per la parte SESSIONS ... non si vede cosi tanto
       ... possiamo fare la sfumatura che si usa come sfondo per la
       classe (blu sfumato) ... ma sopportiamo anche qui full HTML" — but
       Sessions content isn't pasted-from-a-white-page article text like
       FAQ/Tips was, so the light `.cc-compact-body-rich` card would be
       the wrong fit here; Fulvio instead asked for the SAME blue
       gradient already used for button "050"/"040" (`.ops-teacher-
       action-btn`'s own base state) and `.cc-card-welcome` — an existing
       app gradient, not a new color. `.cc-compact-body-blue` is a
       modifier ADDED alongside `.cc-compact-body` (not a replacement,
       same pattern as `-rich`), so padding/font-size/line-height/
       white-space stay untouched — this only makes the background a
       real opaque gradient instead of the semi-transparent
       `rgba(0,0,0,0.18)` `.cc-body` panel showing through, which is what
       was actually hurting legibility. No color overrides for bold/
       headings/links are needed here — the shared `.cc-compact-body b/
       strong` cyan rule above and default light body text already read
       correctly against this dark blue gradient (unlike `-rich`'s own
       light background, which needed dark overrides instead). */
    .cc-compact-body-blue {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        border-radius: 10px;
        padding: 20px 24px;
        margin: 6px 4px 12px 36px;
    }
    .cc-compact-body-blue h1, .cc-compact-body-blue h2, .cc-compact-body-blue h3,
    .cc-compact-body-blue h4, .cc-compact-body-blue h5, .cc-compact-body-blue h6 {
        color: #f1f5f9;
    }
    .cc-compact-body-blue a { color: #60a5fa; }
    /* 3.5.303D: a resource's own `note` field — replaces the old "ⓘ"
       hover-tooltip icon (3.5.299D/3.5.300D) with an always-visible,
       smaller, silver line directly below the title, per Fulvio's own
       explicit request. Same left indent as .cc-compact-body (aligns
       under the title, past the icon column). */
    /* 3.5.304D: explicit margin-top:10px is now the ENTIRE gap from the
       title above it (the row's own bottom padding is zeroed out inline
       whenever a note is present — see renderCCResources()) — per
       Fulvio's own explicit "10px" spacing request. */
    /* 3.5.305D: reduced from 10px (3.5.304D) to 5px, per Fulvio's own
       explicit follow-up request. */
    .cc-compact-note { margin-top: 5px; padding: 0 4px 10px 36px; color: silver; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
    /* 3.5.284D/3.5.285D: WELCOME + MEETINGS side-by-side — MEETINGS is no
       longer its own selectable tab; its content now renders alongside
       WELCOME whenever WELCOME is the active tab, per Fulvio's own
       explicit request. 3.5.285D correction: these are two fully
       INDEPENDENT cards (own border/background/padding each), not two
       columns sharing one outer bordered box — `.cc-welcome-split` is a
       purely invisible layout wrapper (grid, no border/background of its
       own) positioning two separate `.cc-card` elements at ~50% each
       with a real 20px gap between them. `.cc-body-plain` replaces
       `.cc-body` as the WELCOME tab's own outer wrapper specifically so
       there is no second, encompassing bordered box around both cards.
       Stacks to a single column on narrow viewports. */
    .cc-body-plain { margin-top: 10px; }
    /* 3.5.294D: align-items changed from `start` to `stretch` (grid's own
       default — was being explicitly overridden before) per Fulvio's own
       explicit request: whichever of Welcome/Meetings has the longer text
       now sets the row's height, and the SHORTER card stretches to match
       it, instead of each card only being as tall as its own content. */
    .cc-welcome-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
    .cc-welcome-split-col { min-width: 0; }
    .cc-card { background: rgba(0,0,0,0.18); border: 1px solid #334155; border-radius: 10px; padding: 20px; font-size: 17px; line-height: 1.75; box-sizing: border-box; }
    /* 3.5.582D — Fulvio: "possiamo fare quest'area come se fosse mac?
       come il backup terminal view?" — the WELCOME-tab MEETINGS (Zoom)
       card becomes a mac-window look: zero padding + overflow:hidden so
       the dark header bar (dots + title + decorative ✕, built inside
       renderCCMeetings) runs edge-to-edge against this card's own
       neutral #334155 border/10px radius. Background to solid #000 —
       the same black the backup terminal uses. */
    /* 3.5.622D: lightened one step from the page navy — still the same
       dark family, just less "hole" than pure #0a0f18 */
    .cc-card-mac { padding: 0; background: #121a2a; overflow: hidden; }
    .curriculum-top-inline { margin-top:0 !important; }
    .curriculum-inline-mac { width:100%; box-sizing:border-box; }
    .curriculum-inline-titlebar { background:#111; padding:10px 18px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #1f2937; }
    .cc-mac-dot { width:12px; height:12px; border-radius:50%; display:inline-block; flex-shrink:0; }
    .cc-mac-dot.red { background:#ef4444; }
    .cc-mac-dot.amber { background:#f59e0b; }
    .cc-mac-dot.green { background:#22c55e; }
    .curriculum-inline-title { color:#64748b; font-size:14px; margin-left:12px; font-family:'IBM Plex Mono',monospace; }
    .curriculum-inline-close { margin:0 0 0 auto; padding:4px 12px; font-size:12px; }
    .curriculum-inline-content { min-width:0; overflow-x:hidden; }
    .curriculum-inline-head { padding:10px 36px; display:flex; align-items:center; min-height:0; border-radius:0 !important; background:radial-gradient(700px 220px at 0% 0%, color-mix(in srgb, var(--curriculum-color) 28%, transparent), transparent 68%), linear-gradient(110deg, color-mix(in srgb, var(--curriculum-color) 18%, #121a2a) 0%, #17233b 52%, #121a2a 100%); }
    .curriculum-inline-head .ops-teacher-modal-logo { width:82px; height:82px; }
    .curriculum-inline-head .ops-teacher-modal-title { text-align:right; margin-left:auto; padding-right:30px; }
    .curriculum-inline-head .ops-teacher-modal-title h2 { margin:0; }
    .curriculum-inline-name { margin:5px 0 0; color:#facc15; font-size:1rem; font-weight:700; line-height:1.25; }
    .curriculum-inline-head .ops-teacher-modal-sub { margin:10px 0 0; }
    .curriculum-inline-classes { padding:10px 36px; background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(99,102,241,.06)); border-bottom:1px solid rgba(59,130,246,.18); display:flex; flex-wrap:wrap; gap:8px; min-height:52px; box-sizing:border-box; }
    .curriculum-inline-schedule { padding:0 30px 34px; min-width:0; }
    .curriculum-inline-schedule .curriculum-detail-grid { width:100%; }
    .adv-section { padding:10px 0 24px; }
    .adv-section:first-child { padding:10px 0 0; }
    .adv-section + .adv-section { padding-top:20px; }
    .adv-section h3 { margin:0 0 10px 15px; color:#fb923c; font-size:15px; letter-spacing:.08em; text-transform:uppercase; }
    .adv-week { display:grid; grid-template-columns:.84fr 1.11fr 1.11fr .84fr 1.11fr; gap:14px; align-items:start; }
    .adv-week.one { grid-template-columns:1fr; }
    .adv-day,.adv-material { background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); border-radius:16px; backdrop-filter:blur(20px); overflow:hidden; }
    .adv-day:not(.current-day):not(.expanded) { background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); }
    .adv-day.current-day:not(.expanded) { background:linear-gradient(180deg,#172033 0%,#080d16 100%) !important; border:1px solid #facc15; box-shadow:0 0 8px rgba(250,204,21,.36),0 8px 20px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.09); }
    .adv-day.current-day:not(.expanded) .adv-day-head b { color:#facc15; }
    .adv-day.current-day:not(.expanded) .adv-day-head .adv-led { background:#facc15; box-shadow:0 0 7px 1px rgba(250,204,21,.95),0 0 16px 4px rgba(250,204,21,.48); }
    .adv-day:not(.expanded) { padding:10px 17px; }
    .adv-day-head,.adv-inner-title,.adv-mhead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .adv-day-head>div { display:flex; align-items:center; gap:9px; font-size:15px; }
    .adv-actions { display:flex; gap:7px; margin-left:auto; }
    .adv-edit,.adv-expand { width:27px; height:27px; border-radius:8px; border:1px solid rgba(96,165,250,.3); background:rgba(59,130,246,.14); color:#60a5fa; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:11px; font-weight:800; padding:0; }
    .adv-expand { color:#aab6cb; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.07); }
    .adv-edit.on { background:#60a5fa; color:#0a0f1c; }
    .adv-expand svg { width:13px; height:13px; }
    .adv-led { width:12px; height:12px; border-radius:50%; flex-shrink:0; display:inline-block; }
    .adv-led.lesson { background:#4ade80; box-shadow:0 0 7px rgba(74,222,128,.9); }.adv-led.rufz{background:#60a5fa;box-shadow:0 0 7px #60a5fa}.adv-led.tx{background:#fb923c;box-shadow:0 0 7px #fb923c}.adv-led.runner{background:#a78bfa;box-shadow:0 0 7px #a78bfa}.adv-led.freak{background:#f472b6;box-shadow:0 0 7px #f472b6}
    .adv-day-content { padding-top:13px; }
    .adv-tool-row { display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-top:1px solid rgba(255,255,255,.14); min-height:80px; box-sizing:border-box; }
    .adv-tool-row:first-child{border-top:0;padding-top:0}.adv-tool-row:last-child{padding-bottom:0}.adv-tool-row .adv-led{margin-top:5px}.adv-tname{font-size:15px;font-weight:700}.adv-title-trainer{color:#4ade80}.adv-title-toplist{color:#fb923c}.adv-title-freak{color:#22d3ee}.adv-tdetail{font-size:15px;color:#aab6cb;margin-top:4px;line-height:1.6}.adv-lesson{font-size:15px;font-weight:700;color:#4ade80;padding:0;margin-left:23px}
    .adv-inner-title { padding:14px 18px; background:#0a0d13; border-bottom:1px solid rgba(255,255,255,.14); color:#aab6cb; font:13px 'IBM Plex Mono',monospace; }.adv-inner-title .adv-title-day{color:#facc15;font-weight:700}.adv-inner-title .spacer{flex:1}.adv-dot{width:11px;height:11px;border-radius:50%}.adv-dot.r{background:#ff5f57}.adv-dot.y{background:#febc2e}.adv-dot.g{background:#28c840}.adv-day.expanded .adv-day-content{padding:10px 19px}
    .adv-rich { margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:15px;line-height:1.75;color:#aab6cb }.adv-rich label{display:block;color:#fb923c;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}.adv-rich p{margin:0 0 10px}.adv-rich p:last-child{margin-bottom:0}.adv-rich img{max-width:100%;height:auto;border-radius:10px}
    .adv-materials { display:grid;grid-template-columns:repeat(4,1fr);gap:16px }.adv-material{padding:20px;display:flex;flex-direction:column}.adv-mhead b{font-size:15px}.adv-icon{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#facc15}.adv-icon svg{width:18px;height:18px}.adv-mhead .adv-edit{margin-left:auto}.adv-material p{font-size:15px;line-height:1.7;color:#aab6cb;flex:1} .adv-material p b{color:#f5f8fc}.adv-resource-tag{height:27px;margin:0 0 8px;box-sizing:border-box;align-self:flex-start;border:0;border-radius:6px;padding:5px 11px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.adv-resource-tag.software{background:rgba(167,139,250,.15);color:#a78bfa}.adv-resource-tag.software:hover{background:rgba(167,139,250,.26);color:#c4b5fd}.adv-resource-tag.pdf{background:rgba(251,146,60,.15);color:#fb923c}.adv-resource-tag.pdf:hover{background:rgba(251,146,60,.26);color:#fdba74}.adv-settings{height:120px;display:grid;grid-template-rows:repeat(3,40px)}.adv-settings>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0;border-top:1px solid rgba(255,255,255,.14);font-size:12px;box-sizing:border-box}.adv-settings .adv-setting-empty{display:block}.adv-settings span{color:#6b7893}.adv-settings b{text-align:right}
    .editing [data-adv-path]{outline:none;border-bottom:1px dashed rgba(96,165,250,.6);background:rgba(59,130,246,.08);border-radius:3px;padding:0 3px}
    @media(max-width:1100px){.adv-week{grid-template-columns:repeat(2,1fr)}.adv-materials{grid-template-columns:repeat(2,1fr)}}
    @media (max-width: 760px) {
        .curriculum-inline-head { padding:10px 18px; }
        .curriculum-inline-head .ops-teacher-modal-title { padding-right:0; }
        .curriculum-inline-classes { padding:10px 18px; }
        .curriculum-inline-schedule { padding:0 14px 28px; }
        .curriculum-inline-schedule .curriculum-detail-grid { grid-template-columns:1fr; }
    }

    /* 3.5.594D — Fulvio: FAQ redesigned to the master-detail layout of
       his own faq-master-detail.html mock. Left: 280px clickable
       question list (category dot + 12px question, blue-tinted
       selection); right: detail pane (uppercase category label, orange
       19px question, 13.5px answer, Edit/Remove pill buttons — advisor
       only). Palette/geometry follow the mock's own values; colors
       mapped onto the app's existing tokens (#fb923c orange-soft,
       #60a5fa blue-soft, #22c55e green, #9aa7bd/#5e6b82 text tiers).
       Stacks vertically under 640px exactly like the mock. */
    .cc-faq-md-wrap { display: flex; min-height: 340px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; }
    /* 3.5.597D — Fulvio: "allarghiamo più la parte sinistra delle
       domande almeno del 15%" — list column 280→322px (+15%). */
    .cc-faq-md-list { width: 30%; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.08); padding: 10px; overflow-y: auto; box-sizing: border-box; }
    /* 3.5.595D — Fulvio's updated mock (faq-master-detail-2.html):
       category filter chips above the list (All + per-category counts,
       LED + colored active tint per category) and glowing LED dots
       (per-category box-shadow) instead of flat dots — LED also inside
       the detail pane's own category label. */
    .cc-faq-md-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 2px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; }
    /* 3.5.598D — Fulvio: "i round delle categorie sempre 10px non di
       più" — the filter chips' pill radius (999px) capped at the app's
       own 10px corner like the menus/cards. */
    .cc-faq-md-chip { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: #9aa7bd; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); padding: 10px 16px; border-radius: 10px; cursor: pointer; transition: all 150ms; }
    .cc-faq-md-chip:hover { color: #eef2f8; background: rgba(255,255,255,0.07); }
    .cc-faq-md-chip .cnt { font-weight: 600; color: #5e6b82; }
    .cc-faq-md-chip.on { color: #eef2f8; }
    .cc-faq-md-chip.on.all { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
    .cc-faq-md-chip.on.equip { background: rgba(96,165,250,0.16); border-color: rgba(96,165,250,0.5); }
    .cc-faq-md-chip.on.soft { background: rgba(249,115,22,0.16); border-color: rgba(251,146,60,0.5); }
    .cc-faq-md-chip.on.conf { background: rgba(34,197,94,0.16); border-color: rgba(74,222,128,0.5); }
    /* 3.5.596D — Fulvio: "i led e le scritte devono essere più grandi e
       poi manca sempre il LED e la categoria sopra la domanda!!" Two
       changes: (1) LEDs and text scaled up throughout (list LED 8→11px,
       question 12→14px, detail LED 10→13px, category label 10.5→12.5px,
       chips 11→12.5px); (2) the LED + category label are now ALWAYS
       rendered — uncategorized items show a dim slate "GENERAL" led/
       label instead of nothing, so every row carries a dot and the
       detail pane always opens with the category line. */
    .cc-faq-md-led { width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
    .cc-faq-md-chip .cc-faq-md-led { width: 11px; height: 11px; margin-top: 0; }
    .cc-faq-md-led.equip { background: #60a5fa; box-shadow: 0 0 6px 1px rgba(96,165,250,0.9), 0 0 14px 3px rgba(96,165,250,0.5); }
    .cc-faq-md-led.soft { background: #fb923c; box-shadow: 0 0 6px 1px rgba(251,146,60,0.9), 0 0 14px 3px rgba(251,146,60,0.5); }
    .cc-faq-md-led.conf { background: #22c55e; box-shadow: 0 0 6px 1px rgba(74,222,128,0.9), 0 0 14px 3px rgba(74,222,128,0.5); }
    .cc-faq-md-led.none { background: #64748b; box-shadow: 0 0 6px 1px rgba(148,163,184,0.7), 0 0 14px 3px rgba(148,163,184,0.35); }
    .cc-faq-md-led.detail { width: 13px; height: 13px; margin-top: 0; }
    .cc-faq-md-row { padding: 14px 16px; border-radius: 10px; cursor: pointer; margin-bottom: 7px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid transparent; transition: all 150ms; }
    .cc-faq-md-row:hover { background: rgba(255,255,255,0.04); }
    .cc-faq-md-row.on { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border-color: #334155; }
    .cc-faq-md-q { font-size: 14px; font-weight: 600; color: #9aa7bd; line-height: 1.45; }
    .cc-faq-md-row.on .cc-faq-md-q { color: #eef2f8; }
    .cc-faq-md-detail { flex: 1; min-width: 0; padding: 26px 30px; }
    .cc-faq-md-cat { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5e6b82; margin-bottom: 14px; }
    .cc-faq-md-question { font-size: 19px; font-weight: 800; color: #fb923c; line-height: 1.35; margin: 0 0 18px; }
    .cc-faq-md-answer { font-size: 15.5px; line-height: 1.75; color: #9aa7bd; }
    /* 3.5.607D: full-HTML answers — embedded images are clickable and
       open in a fullscreen lightbox (delegated handler in
       hst-class-hub.js; zoom-in cursor as the affordance). */
    .cc-faq-md-answer img { max-width: 100%; height: auto; border-radius: 8px; margin-top: 8px; display: block; cursor: zoom-in; }
    .cc-img-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
    .cc-img-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }

    /* 3.5.609D: RESOURCES master-detail — Fulvio's
       resources-master-detail-complete.html mock. Same pattern as the
       FAQ master-detail above: left section sidebar with glowing
       per-category LEDs + counts, right detail pane. */
    .cc-res-md-wrap { display: flex; min-height: 480px; overflow-x: hidden; }
    .cc-res-md-side { width: 250px; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.08); padding: 12px; }
    .cc-res-md-sec { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; transition: background 150ms; }
    .cc-res-md-sec:hover { background: rgba(255,255,255,0.04); }
    .cc-res-md-sec.on { background: rgba(255,255,255,0.07); }
    .cc-res-md-name { font-size: 15px; font-weight: 700; color: #9aa7bd; flex: 1; min-width: 0; }
    .cc-res-md-sec.on .cc-res-md-name { color: #eef2f8; }
    .cc-res-md-cnt { font-size: 12px; font-weight: 700; color: #5e6b82; background: rgba(255,255,255,0.05); padding: 3px 9px; border-radius: 999px; }
    .cc-res-md-led { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
    .cc-res-md-cnt { align-self: center; }
    .cc-res-md-led.instructions { background: #60a5fa; box-shadow: 0 0 6px 1px rgba(96,165,250,.9), 0 0 14px 3px rgba(96,165,250,.5); }
    .cc-res-md-led.practice-sheet { background: #fb923c; box-shadow: 0 0 6px 1px rgba(251,146,60,.9), 0 0 14px 3px rgba(251,146,60,.5); }
    .cc-res-md-led.document { background: #4ade80; box-shadow: 0 0 6px 1px rgba(74,222,128,.9), 0 0 14px 3px rgba(74,222,128,.5); }
    .cc-res-md-led.software { background: #a78bfa; box-shadow: 0 0 6px 1px rgba(167,139,250,.9), 0 0 14px 3px rgba(167,139,250,.5); }
    .cc-res-md-detail { flex: 1; min-width: 0; padding: 24px 28px; overflow-y: auto; overflow-x: hidden; }
    .cc-res-md-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .cc-res-md-head h2 { font-size: 24px; font-weight: 800; color: #eef2f8; margin: 0; flex: 1; }
    .cc-res-md-intro { font-size: 15.5px; color: #9aa7bd; line-height: 1.65; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.07); white-space: pre-wrap; }
    .cc-res-md-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .cc-res-md-item:last-child { border-bottom: none; }
    .cc-res-md-ico { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: flex-start; justify-content: center; }
    .cc-res-md-ico svg { width: 22px !important; height: 22px !important; display: block; }
    .cc-res-md-ico.link { color: #60a5fa; }
    .cc-res-md-ico.pdf { color: #fb923c; }
    .cc-res-md-ico.software { color: #a78bfa; }
    .cc-res-md-ico.video { color: #f87171; }
    .cc-res-md-ico.other { color: #94a3b8; }
    .cc-res-md-txt { flex: 1; min-width: 0; }
    .cc-res-md-title { font-size: 16px; font-weight: 700; color: #eef2f8; }
    .cc-res-md-title-link { color: #eef2f8; text-decoration: none; }
    .cc-res-md-title-link:hover { color: #22d3ee; }
    .cc-res-md-desc { font-size: 15px; color: #9aa7bd; margin-top: 4px; line-height: 1.55; }
    .cc-res-md-note { font-size: 14px; color: #94a3b8; margin-top: 4px; line-height: 1.55; }
    .cc-res-md-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 5px 11px; border-radius: 6px; flex-shrink: 0; white-space: nowrap; background: rgba(255,255,255,0.06); color: #94a3b8; }
    .cc-res-md-tag.link { background: rgba(96,165,250,0.15); color: #60a5fa; }
    .cc-res-md-tag.pdf { background: rgba(251,146,60,0.15); color: #fb923c; }
    .cc-res-md-tag.software { background: rgba(167,139,250,0.15); color: #a78bfa; }
    .cc-res-md-tag.video { background: rgba(248,113,113,0.15); color: #f87171; }
    .cc-res-md-act { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
    .cc-res-md-act .cc-faq-md-btn { font-size: 13px; padding: 7px 13px; }
    @media (max-width: 640px) {
        .cc-res-md-wrap { flex-direction: column; }
        .cc-res-md-side { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    }

    /* 3.5.616D: SESSIONS master-detail — Fulvio's
       sessions-master-detail-complete-2.html mock. 35% sidebar with
       collapsible week groups + numbered session rows, 65% detail with
       the big number badge + orange "Session Description" section.
       Font sizes already scaled to this app's own reading sizes (the
       mock's small Inter sizes were Fulvio's complaint on RESOURCES). */
    .cc-sess-md-wrap { display: flex; min-height: 480px; overflow-x: hidden; }
    .cc-sess-md-side { flex: 0 0 35%; max-width: 35%; border-right: 1px solid rgba(255,255,255,0.08); padding: 12px; overflow-y: auto; box-sizing: border-box; }
    .cc-sess-md-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 12px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; }
    /* 3.5.620D: chips same size as Expand All — one line */
    .cc-sess-md-wfchip { font-size: 12.5px; font-weight: 700; color: #9aa7bd; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); padding: 7px 13px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
    .cc-sess-md-wfchip:hover { color: #eef2f8; background: rgba(255,255,255,0.07); }
    .cc-sess-md-wfchip.on { color: #eef2f8; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
    .cc-sess-md-toolbtn { font-size: 12.5px; font-weight: 700; color: #60a5fa; background: rgba(59,130,246,0.14); border: 1px solid rgba(96,165,250,0.3); padding: 7px 13px; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
    .cc-sess-md-toolbtn:hover { background: rgba(59,130,246,0.22); }
    .cc-sess-md-wgroup { margin-bottom: 5px; border-radius: 10px; overflow: hidden; }
    .cc-sess-md-whead { display: flex; align-items: flex-start; gap: 11px; padding: 12px; cursor: pointer; border-radius: 9px; }
    .cc-sess-md-whead:hover { background: rgba(255,255,255,0.03); }
    .cc-sess-md-wmain { flex: 1; min-width: 0; display: flex; align-items: center; }
    .cc-sess-md-wname { font-size: 15px; font-weight: 800; letter-spacing: .03em; color: #eef2f8; margin-bottom: 5px; }
    /* 3.5.619D: week range sits right of the week name, 20px gap */
    .cc-sess-md-whead { align-items: center; }
    .cc-sess-md-wrange { margin-left: 20px; font-size: 13px; color: #5e6b82; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; flex-shrink: 0; }
    .cc-sess-md-wname { margin-bottom: 0; }
    /* 3.5.623D: week name color groups — W1-4 orange, W5+ lighter */
    .cc-sess-md-wname.g1 { color: #fb923c; }
    .cc-sess-md-wname.g2 { color: #fdba74; }
    .cc-sess-md-wtri { color: #5e6b82; font-size: 11px; transition: transform 200ms; flex-shrink: 0; margin-top: 4px; }
    .cc-sess-md-wgroup.open .cc-sess-md-wtri { transform: rotate(90deg); }
    .cc-sess-md-wbody { display: none; padding-left: 4px; }
    .cc-sess-md-wgroup.open .cc-sess-md-wbody { display: block; }
    /* 3.5.620D: badge top-aligned with the session title line */
    .cc-sess-md-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px; border-radius: 9px; cursor: pointer; margin-bottom: 3px; border: 1px solid transparent; }
    .cc-sess-md-row:hover { background: rgba(255,255,255,0.04); }
    .cc-sess-md-row.on { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border-color: #334155; }
    .cc-sess-md-sn { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #eef2f8; flex-shrink: 0; }
    .cc-sess-md-row.on .cc-sess-md-sn { background: #60a5fa; border-color: transparent; color: #0a0f1c; font-weight: 800; }
    .cc-sess-md-stxt { min-width: 0; flex: 1; }
    .cc-sess-md-stitle { font-size: 14.5px; font-weight: 700; color: #9aa7bd; overflow: hidden; text-overflow: ellipsis; }
    .cc-sess-md-row.on .cc-sess-md-stitle { color: #eef2f8; }
    /* 3.5.625D: date stays on its own second line under the title,
       right-aligned, 20px off the row's right edge (11px padding + 9px) */
    .cc-sess-md-sdate { font-size: 13px; color: #5e6b82; font-family: 'IBM Plex Mono', monospace; margin-top: 3px; text-align: right; margin-right: 9px; }
    .cc-sess-md-detail { flex: 1; min-width: 0; padding: 26px 32px; overflow-y: auto; overflow-x: hidden; }
    .cc-sess-md-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
    .cc-sess-md-dn { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(160deg, #60a5fa, #3b82f6); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #0a0f1c; box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
    .cc-sess-md-title-row h2 { font-size: 22px; font-weight: 800; margin: 0; color: #eef2f8; }
    /* 3.5.617D: date+time sits on the title row, pushed right */
    /* 3.5.621D: same height as the + Add point mini button */
    .cc-sess-md-datefield { margin-left: auto; flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #9aa7bd; font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; padding: 6px 13px; border-radius: 8px; }
    .cc-sess-md-sectitle { font-size: 13.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fb923c; margin: 4px 0 12px; display: flex; align-items: center; }
    .cc-sess-md-desc { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; color: #cbd5e1; font-size: 15.5px; line-height: 1.75; padding: 14px 16px; white-space: pre-wrap; }
    .cc-sess-md-desc b, .cc-sess-md-desc strong { color: #22d3ee; }
    .cc-sess-md-desc img { max-width: 100%; height: auto; border-radius: 8px; margin-top: 8px; display: block; cursor: zoom-in; }
    /* 3.5.620D: KEY POINTS block — mock's .ed-point/.ed-mini-btn,
       green glow LED, transparent inline inputs for the Advisor */
    .cc-sess-md-points { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
    .cc-sess-md-point { display: flex; align-items: flex-start; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 13px 15px; }
    .cc-sess-md-pled { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px 1px rgba(74,222,128,.9), 0 0 14px 3px rgba(74,222,128,.5); flex-shrink: 0; margin-top: 7px; }
    .cc-sess-md-ptxt { flex: 1; min-width: 0; margin-left: 20px; display: flex; flex-direction: column; gap: 6px; }
    .cc-sess-md-ptitle, .cc-sess-md-psub { background: transparent; border: none; border-bottom: 1px dashed transparent; font-family: inherit; outline: none; width: 100%; padding: 2px 0; box-sizing: border-box; }
    .cc-sess-md-ptitle { color: #eef2f8; font-size: 15px; font-weight: 700; }
    .cc-sess-md-ptitle:focus { border-bottom-color: rgba(74,222,128,0.5); }
    .cc-sess-md-psub { color: #9aa7bd; font-size: 13px; font-weight: 500; padding: 1px 0; }
    .cc-sess-md-psub:focus { border-bottom-color: rgba(255,255,255,0.3); }
    .cc-sess-md-ptname { color: #eef2f8; font-size: 15px; font-weight: 700; }
    .cc-sess-md-psubtxt { color: #9aa7bd; font-size: 13px; }
    .cc-sess-md-prm { background: rgba(239,68,68,0.15); color: #f87171; border: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 13px; flex-shrink: 0; margin-top: 1px; margin-left: 8px; }
    .cc-sess-md-minibtn { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #60a5fa; background: rgba(59,130,246,0.14); border: 1px solid rgba(96,165,250,0.3); padding: 6px 12px; border-radius: 7px; cursor: pointer; text-transform: none; letter-spacing: 0; }
    .cc-sess-md-pempty { font-size: 13.5px; color: #5e6b82; font-style: italic; margin: -4px 0 22px; }
    /* 3.5.626D: LINKS & DOCUMENTS rows — mock's .ed-res-row */
    .cc-sess-md-res { display: flex; flex-direction: column; gap: 8px; }
    .cc-sess-md-rrow { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; padding: 10px 12px; }
    .cc-sess-md-rrow svg { width: 15px; height: 15px; color: #60a5fa; flex-shrink: 0; }
    .cc-sess-md-rtitle { flex: 1; min-width: 0; background: transparent; border: none; color: #eef2f8; font-size: 14px; font-family: inherit; outline: none; }
    .cc-sess-md-rtitle.ro { padding: 0; }
    .cc-sess-md-rrm { background: rgba(239,68,68,0.15); color: #f87171; border: none; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
    @media (max-width: 640px) {
        .cc-sess-md-wrap { flex-direction: column; }
        .cc-sess-md-side { flex: none; width: 100%; max-width: 100%; max-height: 260px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    }
    .cc-faq-md-actions { display: flex; gap: 9px; margin-top: 22px; }
    .cc-faq-md-btn { font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; }
    .cc-faq-md-btn.e { background: rgba(59,130,246,0.2); color: #60a5fa; }
    .cc-faq-md-btn.r { background: rgba(239,68,68,0.2); color: #f87171; }
    @media (max-width: 640px) {
        .cc-faq-md-wrap { flex-direction: column; }
        .cc-faq-md-list { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); max-height: 220px; }
    }
    /* 3.5.299D: WELCOME's own card only — same gradient as
       .ops-teacher-action-btn/.ops-teacher-student-action (button "050"/
       "040" in the design catalog), per Fulvio's own explicit request.
       MEETINGS keeps the plain .cc-card background above, unaffected. */
    .cc-card-welcome { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); }
    @media (max-width: 700px) {
        .cc-welcome-split { grid-template-columns: 1fr; }
    }
    /* 3.5.280D: PROGRAM -> SCORE -> percentage -> graphical indicator, per
       Fulvio's own explicit request — a horizontal percentage bar, same
       color-threshold rule the app already uses elsewhere for accuracy
       (>=90 green / >=80 amber / else red), never a new gauge widget. */
    .cc-perf-gauge-wrap { display: flex; align-items: center; gap: 8px; min-width: 140px; }
    .cc-perf-gauge-bar { flex: 1; height: 8px; min-width: 60px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
    .cc-perf-gauge-fill { height: 100%; border-radius: 4px; }
    .cc-perf-gauge-pct { font-size: 13px; font-weight: 700; min-width: 40px; text-align: right; }
    /* 3.5.315D: widened per Fulvio's own explicit request ("possiamo
       avere 3 schede per riga e quindi allargare la scheda") to comfortably
       fit the new embedded performance blocks on the Advisor's own card —
       auto-fit/minmax still settles at ~3 columns on a typical desktop
       Advisor panel width without hardcoding an exact column count that
       would break a narrower one. */
    .cc-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
    .cc-team-card { background: rgba(0,0,0,0.22); border: 1px solid #334155; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
    .cc-team-card-head { display: flex; align-items: center; gap: 10px; }
    .cc-team-photo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid #334155; flex-shrink: 0; background: #0f172a; }
    .cc-team-photo-placeholder { width: 44px; height: 44px; border-radius: 8px; border: 1px solid #334155; background: #0f172a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #475569; }
    /* 3.5.299D: TEAM's own student photos only — bigger (64px vs the
       shared 44px base, still used by WELCOME's own advisor photo,
       unaffected), per Fulvio's own explicit request; TEAM's own text
       sizes are unchanged. */
    .cc-team-photo.cc-team-photo-lg, .cc-team-photo-placeholder.cc-team-photo-lg { width: 64px; height: 64px; }
    /* 3.5.300D: WELCOME's own advisor photo — bigger than the base 44px,
       per Fulvio's own explicit "ingrandita" request. */
    /* 3.5.301D: enlarged again (56px -> 76px), per Fulvio's own explicit
       follow-up request. */
    .cc-team-photo.cc-advisor-photo, .cc-team-photo-placeholder.cc-advisor-photo { width: 76px; height: 76px; }
    .cc-team-callsign { color: var(--cc-accent, #f97316); font-weight: 700; font-size: 17px; }
    /* 3.5.330D: per Fulvio's own explicit "c'e' troppo spazio tra
       CALLSIGN e NOME.. vorrei lasciare dove e' la posizione CALLSIGN e
       alzare di 5px il NOME ingrandendo anche il carattere" — CALLSIGN
       itself is untouched; NAME pulled 5px closer via a negative
       margin-top and enlarged from 17px to 19px. */
    .cc-team-name { color: #e2e8f0; font-size: 19px; margin-top: -5px; }
    /* 3.5.298D: bumped from 13px to match PERFORMANCE's own 17px body
       text (inherited from .cc-body), per Fulvio's own explicit "i
       caratteri sono troppo piccoli" complaint. */
    .cc-team-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; color: #94a3b8; }
    .cc-team-stat > span:first-child { flex: 0 0 100%; color: #cbd5e1; font-weight: 600; }
    .cc-team-stat .tc-signal-bars { height: 20px; gap: 2px; }
    .cc-team-stat .tc-signal-bar { width: 4px; border-radius: 1px; }
    .cc-demo-banner { border: 1px dashed rgba(249,115,22,0.4); border-radius: 10px; padding: 16px; margin-bottom: 16px; background: rgba(249,115,22,0.05); font-size: 15px; line-height: 1.7; }
    .cc-demo-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 4px; color: #fb923c; background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.35); margin-left: 8px; }
    /* 3.5.315D — TEAM card embedded performance: a ONE-SHOT
       CSS-transition reveal (`.revealed` class, toggled once by
       setupCcTeamCardPerfObservers()), not an infinite keyframe loop, so
       the data settles and stays readable instead of repeatedly
       resetting to 0. See renderCCTeamCardPerfEmbedded(). */
    .cc-teamcard-perf { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
    /* 3.5.319D: border matches the standard `.cc-team-card` roster card
       border exactly, per Fulvio's own explicit "il bordo... me lo fai
       standard come il bordo della classe" — the accent-tinted radial
       gradient BACKGROUND is deliberately unchanged ("lasciamo comunque
       la gradazione"). */
    .cc-teamcard-perf-block { position: relative; padding: 10px 12px 8px; border-radius: 10px; background: radial-gradient(circle at 25% -10%, color-mix(in srgb, var(--cc-accent, #22d3ee) 28%, #0f172a) 0%, #05070c 75%); }
    .cc-teamcard-perf-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    /* 3.5.316D: Play is now a genuinely working REPLAY control (not
       inert) — full opacity, real pointer, a subtle hover using the same
       accent-tinted background language as the rest of the Hub. */
    .cc-teamcard-perf-play { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cc-accent, #22d3ee) 55%, #334155); background: transparent; color: var(--cc-accent, #22d3ee); cursor: pointer; transition: background .15s ease; }
    .cc-teamcard-perf-play:hover { background: color-mix(in srgb, var(--cc-accent, #22d3ee) 18%, transparent); }
    .cc-teamcard-perf-play svg { display: block; }
    /* 3.5.316D: family word (RufzXP) keeps the level accent; the
       specific variant (Toplist, Trainer, ...) is plain white. */
    /* 3.5.327D: per Fulvio's own explicit "le scritte RUFZXP TOPLIST e
       RUFZXP TRAINER si sono rimpicciolite... falle della stessa
       grandezza dei NOMI dello studente" — matched .cc-team-name/
       .cc-team-callsign's own font-size (17px). 3.5.328D: Fulvio then
       asked for a smaller size instead — "Portami i titoli trainer e
       toplist della stessa grandezza di Wrong" — matches
       .cc-teamcard-perf-meta's own font-size (13px, the size "Wrong"
       itself reads at) instead. */
    .cc-teamcard-perf-label { flex: 1; font-size: 13px; font-weight: 800; letter-spacing: .07em; }
    .cc-teamcard-perf-label-accent { color: var(--cc-accent, #22d3ee); }
    .cc-teamcard-perf-label-white { color: #e2e8f0; }
    /* 3.5.341D: .cc-teamcard-perf-actions (E/R's own wrapper) removed —
       no longer used anywhere, per E/R being removed from TEAM outright. */
    /* 3.5.339D: Student-only history-browser pager, right below the
       header/date row ("sotto la data"), same right-alignment
       convention every other auxiliary row in this card already uses. */
    /* 3.5.340D: per Fulvio's own explicit "il punteggio... deve
       rimanere allineato orizzontalmente ai tasti freccia" — the pager
       now sits inline on the VALUE row itself (see
       renderCCTeamCardPerfBlock()'s own `.cc-teamcard-perf-value-row`),
       not on its own row above it. */
    .cc-teamcard-perf-pager { display: inline-flex; align-items: center; gap: 4px; }
    /* Smaller than the standard 34x30 .ops-teacher-student-action box,
       per Fulvio's own explicit "che possono essere anche un po'
       rimpiccioliti" — the icons themselves are also already smaller
       (11px, vs. the usual 15px) for these two specifically. */
    .cc-teamcard-perf-pager-btn { min-width: 22px; height: 20px; padding: 0; margin-right: 0; }
    /* 3.5.359D: at its own boundary (no further attempt to page to) the
       button stays visible but turns grey/unclickable, per Fulvio's own
       explicit "voglio solo che siano GRIGIE e che non si possono
       cliccare" — native `:disabled`, not a manual class, so the click
       is genuinely blocked by the browser itself. */
    .cc-teamcard-perf-pager-btn:disabled { color: #475569; border-color: #334155; cursor: not-allowed; opacity: 0.6; }
    .cc-teamcard-perf-value { font-size: 24px; font-weight: 900; line-height: 1; color: #ffffff; text-shadow: 0 0 12px color-mix(in srgb, var(--cc-accent, #22d3ee) 50%, transparent); opacity: 0; transition: opacity .5s ease; margin-left: 10px; }
    .cc-teamcard-perf-block.revealed .cc-teamcard-perf-value { opacity: 1; }
    /* 3.5.337D: Advisor's own "Last : <date>" now shares this row with
       the value instead of its own separate row below — per Fulvio's
       own explicit "la data la vorrei subito sotto E e R allineata
       sulla linea del risultato... questo permette di accorciare le
       aree." */
    .cc-teamcard-perf-value-row { display: flex; align-items: baseline; justify-content: space-between; }
    /* 3.5.316D: the old single "% of personal best" fill bar is gone
       ("non serve a niente") — replaced by the SAME compact cyan
       multi-bar trend chart (.tc-signal-bar, default styling) the OLD
       `.cc-team-stat` line used to show — history at a glance, no
       percentage gauge. */
    /* 3.5.340D: per Fulvio's own explicit "il grafico e' piu attaccato
       allo score che non sotto con WRONG... vorrei abbassare il
       grafico aumentando lo spazio con score (+5px)" — top margin
       5px->10px. His own immediate correction on the BELOW gap —
       "sotto non e' da aumentare ma diminuire, come vedi dallo
       screenshot ce n'era troppo" — bottom margin 6px->2px (a
       DECREASE, reversing this same round's own first, wrong attempt
       at 10px). Net vertical change is +1px, close to his own "la
       scheda non dovrebbe cambiare altezza" goal. Shared CSS, applies
       identically to Advisor and Student (his own explicit follow-up:
       "questo ultimo cambiamento e' da fare anche per ADVISOR
       Dashboard") since both already render this exact same trend
       chart from the same code. */
    .cc-teamcard-perf-trend { height: 20px; gap: 2px; margin: 10px 0 2px 12px; opacity: 0; transition: opacity .5s ease .15s; }
    .cc-teamcard-perf-trend .tc-signal-bar { width: 4px; border-radius: 1px; }
    .cc-teamcard-perf-block.revealed .cc-teamcard-perf-trend { opacity: 1; }
    /* 3.5.317D: enlarged per Fulvio's own explicit "ingrandirei anche il
       testo." */
    .cc-teamcard-perf-meta { display: flex; flex-wrap: wrap; gap: 8px; min-height: 18px; font-size: 13px; opacity: 0; transition: opacity .5s ease .3s; margin-left: 10px; }
    .cc-teamcard-perf-block.revealed .cc-teamcard-perf-meta { opacity: 1; }
    .cc-teamcard-perf-stat { color: #94a3b8; }
    .cc-teamcard-perf-stat b { color: #ffcc00; font-size: 15px; }
    .cc-teamcard-perf-sep { color: rgba(255,255,255,0.25); }
    /* 3.5.362D/3.5.363D: Student PERFORMANCE tab's own "Best" area — 1/3
       info + 2/3 line chart, per Fulvio's own explicit "creando una
       UNICA AREA che finisca dove finisce CW Freak.net... gli altri 2/3
       dell'area CREARE UN'AREA GRAFICA della performance." Only ever
       applied when renderCCTeamCardPerfBlock() is called with
       showChart=true (the Student PERFORMANCE tab) — TEAM's own compact
       cards never opt in.
       3.5.363D: per Fulvio's own explicit "l'area del Grafico la voglio
       con una gradazione differente e voglio che sia completamente
       separata dall'area di sinistra. Farei la gradazione CELESTE per
       il grafico" — the two columns are now genuinely SEPARATE cards
       (own background/border-radius/padding each, real gap between
       them) instead of one shared card with an internal divider line.
       The outer `-wide` block itself goes transparent/padding-less so
       its own background never doubles up behind either card. The info
       card keeps the EXACT same per-program-accent gradient
       `.cc-teamcard-perf-block` always had.
       3.5.364D: per Fulvio's own explicit "un grafico deve avere uno
       sfondo uniforme, caratteri ben leggibili" — the chart card's own
       gradient is replaced with a FLAT, uniform fill plus a subtle
       border for definition against the page behind it; axis/value
       text sizes bumped up for legibility.
       3.5.366D: per Fulvio's own explicit "il background non e' da
       mettere SCURO. dobbiamo trovare un background ideale" (with a
       screenshot of the red/gold bar labels looking harsh against the
       near-black fill) — replaced with a light, neutral background
       (never tied to `--cc-accent` here either — always this same
       tone). This is the ONE shared component both roles' own
       PERFORMANCE tab renders (the Advisor's own "view as student" P
       button included), so the fix applies to both automatically, no
       separate configuration needed. Series/axis/legend colors below
       are all re-tuned for contrast against this light background
       (they were tuned for the old dark one).
       3.5.367D: that FIRST light attempt (`#eef2f6`, near-white) was
       too close to pure white against this file's own otherwise
       all-dark UI — per Fulvio's own explicit "un pugno in un occhio
       il bianco!!" — dialed back to a softer, muted slate (`#c7ced9`).
       3.5.368D: still wrong, per Fulvio's own explicit "non va
       assolutamente bene dobbiamo optare per qualcosa di SCURO ma non
       NERO" — a full reversal of `3.5.366D`'s own light-background
       premise, not just another shade of light. Background is now
       `#1e293b`, the SAME dark slate `.cc-pill`'s own background
       already uses elsewhere in this file (dark, but nowhere near the
       original `#070b14`/near-black that started this whole back-and-
       forth) — and every series/axis/legend color below reverts to its
       ORIGINAL bright/light values (tuned for a dark background, as
       they were before `3.5.366D` ever touched them), since a dark
       background needs light text/lines again, not the darkened set
       `3.5.366D` introduced for a light background.
       3.5.369D: the flat `#1e293b` fill replaced with the SAME
       gradient WELCOME's own card already uses (`.cc-card-welcome`),
       per Fulvio's own explicit "usiamo la gradazione di sfondo che e'
       usata in WELCOME" — reuses an already-established look instead
       of inventing yet another new one. */
    .cc-teamcard-perf-block-wide { background: none; padding: 0; }
    .cc-teamcard-perf-split { display: flex; gap: 16px; align-items: stretch; }
    .cc-teamcard-perf-info { flex: 0 0 33%; min-width: 0; padding: 14px 16px 10px; border-radius: 10px; background: radial-gradient(circle at 25% -10%, color-mix(in srgb, var(--cc-accent, #22d3ee) 28%, #0f172a) 0%, #05070c 75%); }
    .cc-teamcard-perf-chartarea { flex: 1 1 67%; min-width: 0; padding: 14px 16px 10px; border-radius: 10px; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border: 1px solid #334155; display: flex; flex-direction: column; justify-content: center; }
    .cc-perf-chart-legend { display: flex; gap: 14px; font-size: 13px; color: #cbd5e1; margin-bottom: 4px; }
    .cc-perf-chart-legend-item { display: inline-flex; align-items: center; gap: 5px; }
    .cc-perf-chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
    .cc-perf-chart-svg { width: 100%; height: 140px; display: block; }
    /* 3.5.364D: the 1-5 chart-type switcher, per Fulvio's own explicit
       "a destra del bottone CW Freak.net c'e' spazio... bottoni tipo 1
       2 3 4 5" — sits flush right on the SAME row as the program pills
       via `.cc-pill-row-wrap`'s own `justify-content:space-between`. */
    .cc-pill-row-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
    .cc-pill-row-wrap .cc-pill-row { margin-bottom: 0; }
    .cc-chart-type-group { display: flex; gap: 4px; }
    .cc-chart-type-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #334155; background: #1e293b; color: #94a3b8; font-size: 12px; font-weight: 700; cursor: pointer; }
    .cc-chart-type-btn.active { background: color-mix(in srgb, #22d3ee 20%, transparent); border-color: #22d3ee; color: #22d3ee; }
    .cc-perf-chart-svg circle { cursor: pointer; }
    /* 3.5.337D: "Last : <date>" no longer has its own dedicated row for
       EITHER role — Student rides the header row (next to the title,
       via the label's own flex:1), Advisor rides `.cc-teamcard-perf-value-row`
       (next to the value, via that row's own justify-content:space-between)
       — see renderCCTeamCardPerfBlock()'s own `headerDateHtml`/`valueDateHtml`.
       The old standalone `.cc-teamcard-perf-date` row class (3.5.317D) is
       gone — fully superseded, not left as dead code. */
    .cc-teamcard-perf-date-inline { font-size: 12px; color: #94a3b8; white-space: nowrap; }
    /* 3.5.316D: compact icon button (same family as E/R), not the old
       full-width green button — "riduce l'area". */
    .cc-teamcard-perf-add { margin-top: 2px; align-self: flex-start; }
    .cc-teamcard-perf-form { margin-top: 4px; }

    .tc-data-inactive .tc-section-title,
    .tc-data-inactive .tc-enrollments,
    .tc-data-inactive .tc-segbar16,
    .tc-data-inactive .tc-performances {
        filter: grayscale(100%) blur(1.2px);
        opacity: 0.55;
    }
    .tc-identity { display: flex; flex-direction: column; gap: 2px; flex: 1; position: relative; }
    .tc-callsign { font-size: 30px; font-weight: 700; color: #39ff14; text-shadow: 0 0 8px rgba(57,255,20,.35); margin-top: -5px; }
    .tc-name { font-size: 24px; font-weight: 600; color: #eaffea; margin-top: -5px; }
    .tc-ids { display: flex; gap: 8px; flex-wrap: wrap; }
    .tc-card-ids { display: flex; justify-content: flex-end; gap: 8px; position: absolute; top: 16px; right: 16px; }
    .tc-id-pill { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; background: #1e293b; border: 1px solid #334155; border-radius: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; font-weight: 700; color: #94a3b8; }
    /* 3.5.255D/256D: position:relative so the .browser pill nested inside
       it (see idPills in buildProfileLayoutHtml()) can be positioned via
       position:absolute purely relative to THIS pill's own box — 20px to
       its LEFT, regardless of the outer .tc-card-ids/.tc-ids container's
       own right-anchored layout. An absolutely-positioned child never
       affects its parent's own size, so the Short ID pill's own box (and
       therefore its visible position) is completely unchanged by this. */
    .tc-id-pill.short { color: #94a3b8; border-color: #334155; position: relative; }
    /* Same exact visual format as .tc-id-pill (border/radius/padding/
       height/font/color all inherited, unchanged from Student ID's own
       grey — 3.5.259D reverted an earlier white override) — only the
       position is anchored to the Short ID pill itself, 20px to its
       LEFT (3.5.256D — moved from the right, which spilled past
       IDENTITY FIELDS' own right edge into the neighboring ENROLLMENTS
       card), never to .tc-card-ids' own right edge. */
    .tc-id-pill.browser { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 20px; white-space: nowrap; }
    .tc-photo-box { background: #181d18; border: 1px solid #334155; box-shadow: 0 0 14px rgba(184,196,189,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: visible; cursor: pointer; }
    .tc-photo-box:hover { filter: brightness(1.12); }
    /* Once a real photo is uploaded, inset it 10px on every side within
       the box (whatever size that box happens to be for the active
       layout variant) and clip it to the box's own border-radius. The
       icon placeholder (no photo yet) is unaffected — it stays centered
       with no padding, since it isn't a rectangular image needing inset
       spacing. */
    .tc-photo-box.tc-photo-box-filled { padding: 10px; box-sizing: border-box; overflow: hidden; }
    .tc-empty-box { background: #181d18; border: 1px solid #334155; box-shadow: 0 0 14px rgba(184,196,189,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: absolute; left: 20px; top: 20px; width: 100px; height: 100px; border-radius: 10px; overflow: visible; }
    .tc-flag-in-empty { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; border: 1px solid #334155; box-shadow: 0 2px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
    .tc-flag-in-empty .ops-teacher-student-flag { border: none; max-width: 72%; max-height: 72%; width: auto; height: auto; object-fit: contain; }
    .tc-photo-badge { position: absolute; bottom: 10px; left: -70px; z-index: 2; }
    .tc-photo-box img { width: 100%; height: 100%; object-fit: cover; }
    .tc-flag-box { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border: 1px solid #334155; border-radius: 10px; padding: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); position: relative; flex-shrink: 0; overflow: hidden; }
    .tc-flag-box img { width: 100%; height: 100%; object-fit: cover; }
    .tc-combo { position: relative; flex-shrink: 0; }

    /* layouts 1-3: green tactical */
    .tc-v1 .tc-header-top, .tc-v1 .tc-header-main { padding-left: 140px; }
    .tc-v1 .tc-header-main { align-items: flex-start; padding-right: 140px; margin-top: -5px; }
    .tc-v1 .tc-empty-box { right: 20px; top: 20px; left: auto; width: 100px; height: 100px; }
    .tc-v1 .tc-photo-box { position: absolute; left: 20px; top: 20px; right: auto; width: 100px; height: 100px; border-radius: 10px; }
    .tc-v1 .tc-flag-box { width: 85px; height: 60px; border-radius: 10px; }
    .tc-v2 .tc-photo-box { width: 90px; height: 90px; border-radius: 14px; }
    .tc-v2 .tc-flag-box { width: 40px; height: 40px; border-radius: 10px; position: absolute; bottom: -10px; left: -10px; border: 2px solid #39ff14; }
    .tc-v3 .tc-photo-box { width: 100px; height: 100px; border-radius: 18px; }
    .tc-v3 .tc-flag-box { width: 44px; height: 44px; border-radius: 12px; position: absolute; bottom: -10px; right: -10px; border: 2px solid #39ff14; }

    /* layouts 4-5: tactical compact (from scheda-tactical v1/v2) */
    .tc-v4 .tc-header-main { display: flex; align-items: flex-start; gap: 12px; }
    .tc-v4 .tc-identity { flex: 1; }
    .tc-v4 .tc-photo-box { width: 52px; height: 52px; border-radius: 10px; }
    .tc-v4 .tc-flag-box { width: 46px; height: 46px; border-radius: 10px; }
    .tc-v5 .tc-header-main { display: flex; align-items: flex-start; gap: 12px; }
    .tc-v5 .tc-identity { flex: 1; }
    .tc-v5 .tc-combo { position: relative; flex-shrink: 0; }
    .tc-v5 .tc-photo-box { width: 58px; height: 58px; border-radius: 10px; }
    .tc-v5 .tc-flag-box { width: 28px; height: 28px; border-radius: 8px; position: absolute; bottom: -10px; left: -10px; border: 2px solid #39ff14; }
    /* layout 6: panel style */
    .tc-v6 .tc-header-main { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
    .tc-v6 .tc-photo-box { width: 80px; height: 80px; border-radius: 12px; border: 1px solid #b8c4bd; }
    .tc-v6 .tc-flag-box { width: 80px; height: 80px; border-radius: 12px; border: 1px solid #b8c4bd; }

    .tc-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 16px 20px 6px 20px; }
    .tc-metric { background: rgba(0,0,0,0.22); border: 1px solid #334155; border-radius: 10px; padding: 12px 8px; text-align: center; position: relative; }
    .tc-metric-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #7fbf7f; margin-bottom: 6px; font-family: 'Inter', sans-serif; font-weight: 600; }
    .tc-metric-value { font-size: 28px; font-weight: 700; color: #eaffea; text-shadow: 0 0 6px rgba(57,255,20,.2); }
    .tc-metric-details { position: absolute; bottom: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; min-width: 72px; box-sizing: border-box; background: #1e293b; border: 1px solid #334155; border-radius: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; font-weight: 700; color: #94a3b8; cursor: pointer; transition: all .15s; }
    .tc-metric-details:hover { color: #e2e8f0; border-color: #475569; background: #334155; }
    .tc-metrics .tc-metric:nth-child(5) .tc-metric-value { color: #22d3ee; text-shadow: 0 0 6px rgba(34,211,238,.25); }
    /* 3.5.255D widened this from 14px to 90px, to make room for the
       Browser pill when it still sat to the RIGHT of Student ID (see
       .tc-id-pill.browser). 3.5.256D moved that pill to Student ID's
       LEFT instead, so the 90px was no longer needed for that purpose —
       but was initially left in place anyway, growing IDENTITY FIELDS'
       own card into a visibly oversized empty gap in front of
       ENROLLMENTS. 3.5.257D: set to exactly 20px, per explicit request,
       now that nothing else depends on this value being wide. */
    .tc-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 6px 20px 20px 20px; }
    .tc-card { background: rgba(57,255,20,0.03); border: 1px solid rgba(57,255,20,0.18); border-radius: 10px; padding: 16px; }
    .tc-card h4 { color: #39ff14; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px 0; }
    .tc-section-title { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #39ff14; margin: 14px 0 12px; padding-top: 4px; font-family: 'Inter', sans-serif; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; }
    .tc-section-title:first-child { margin-top: 0; padding-top: 0; }
    .tc-pct { color: #39ff14; font-size: 13px; }
    .tc-segbar16 { display: flex; gap: 2.5px; width: 100%; margin-bottom: 30px; }
    .tc-seg { flex: 1; height: 10px; border-radius: 2px; background: rgba(255,255,255,0.07); }
    .tc-seg.filled { background: #39ff14; box-shadow: 0 0 7px #39ff14, 0 0 2px #39ff14 inset; }
    .tc-v1 .tc-seg.filled { background: #22d3ee; box-shadow: 0 0 7px #22d3ee, 0 0 2px #22d3ee inset; }
    .tactical-card.skin-panel.tc-v6 .tc-seg.filled { background: #39ff14; box-shadow: 0 0 7px #39ff14; }
    .tc-related-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .tc-tag { border-radius: 10px; padding: 0 10px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: .01em; height: 32px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
    .tc-enrollments .tc-tag:nth-child(2) { margin-left: -30px; }
    .tc-tag-neutral { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: #c9d6cf; }
    .tc-tag-active { background: #173817; border: 1px solid #39ff14; color: #9dffa0; box-shadow: 0 0 10px rgba(57,255,20,0.35), inset 0 0 6px rgba(57,255,20,0.15); }
    .tc-last-perf { display: flex; gap: 10px; margin-top: 6px; }
    .tc-tile { flex: 1; background: rgba(57,255,20,0.05); border: 1px solid rgba(57,255,20,0.2); border-radius: 10px; padding: 10px 12px; text-align: center; }
    .tc-tile span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #7fbf7f; margin-bottom: 4px; font-family: 'Inter', sans-serif; font-weight: 600; }
    .tc-tile b { font-size: 16px; color: #eaffea; }
    .tc-bottom-ids { display: flex; gap: 6px; }
    .tc-id-tag { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .03em; border: 1px solid rgba(255,255,255,0.16); color: #9fb8ab; background: rgba(255,255,255,0.03); padding: 8px 13px; border-radius: 10px; }

    /* --- LIVE TAB (3.5.477D) — remote student presence --- */
    .ops-teacher-tab-live { color: #22c55e; }
    .ops-teacher-tab-live.active {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(74, 222, 128, 0.85) 0%, rgba(34, 197, 94, 0.75) 100%);
        border: 1px solid rgba(74, 222, 128, 0.5);
        box-shadow: 0 0 24px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    /* LED: grey = OFFLINE (no heartbeat within the server TTL), green =
       LIVE (tab visible), dim green pulse = IDLE (tab in background). */
    .ops-teacher-live-led {
        display: inline-block; width: 12px; height: 12px; border-radius: 50%;
        background: #475569; border: 1px solid #64748b; vertical-align: middle;
        transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .ops-teacher-live-led.live {
        background: #22c55e; border-color: #4ade80;
        box-shadow: 0 0 10px #22c55e, 0 0 4px #4ade80;
    }
    .ops-teacher-live-led.idle {
        background: #f59e0b; border-color: #fbbf24;
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
    }
    /* 3.5.483D: callsign of an online student (LIVE or IDLE) in yellow. */
    .ops-teacher-live-on .ops-teacher-student-callsign { color: #facc15; }
    .ops-teacher-live-legend {
        display: inline-flex; align-items: center; gap: 20px;
        font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: var(--text-muted);
        letter-spacing: 0.5px; padding: 0 6px;
    }
    /* Small (~10px tall) flag + callsign in ONE column. */
    .ops-teacher-live-flag-wrap { display: inline-flex; align-items: center; }
    .ops-teacher-live-flag {
        width: 21px; height: 14px; object-fit: cover; border-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.5); display: block;
    }
    /* 3.5.478D: the cell itself must stay a real table-cell (display:flex on
       a <td> detached its border-bottom into a stray line under the text);
       the flag+callsign pair is aligned by an inline-flex wrapper instead. */
    .ops-teacher-live-table .ops-teacher-student-name { position: static; padding-right: 14px; }
    .ops-teacher-live-student { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
    .ops-teacher-live-table .ops-teacher-student-id { position: static; transform: none; }
    .ops-teacher-live-table th, .ops-teacher-live-table td { padding: 12px 14px; font-size: 14px; }
    .ops-teacher-live-table th:nth-child(n+4), .ops-teacher-live-table td:nth-child(n+4) { text-align: center; }
    /* 3.5.481D: OFFLINE rows lightly blurred — the LED (first cell) stays
       sharp in front of the blur. 3.5.515D: grayscale added to the same
       filter — Fulvio: the flag/callsign/SOURCE badge colors were still
       bleeding through the blur, making OFFLINE rows look less "off"
       than intended. Desaturating them too keeps the blur visually sober. */
    .ops-teacher-live-row.ops-teacher-live-off td:not(:first-child) { filter: blur(4px) grayscale(1) brightness(0.55); }
    .ops-teacher-live-group td { padding-top: 10px; padding-bottom: 10px; }

    /* --- CURRICULUM TAB --- */
    .ops-teacher-tab-curriculum {
        color: #f97316;
    }
    .ops-teacher-tab-curriculum.active {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(96, 165, 250, 0.85) 0%, rgba(59, 130, 246, 0.75) 100%);
        border: 1px solid rgba(96, 165, 250, 0.5);
        box-shadow:
            0 0 24px rgba(59, 130, 246, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    [data-theme="light"] .ops-teacher-tab-curriculum.active {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.85) 0%, rgba(37, 99, 235, 0.85) 100%);
        border-color: rgba(59, 130, 246, 0.5);
    }

    /* 3.5.382D-3.5.550D: Advisor Dashboard's own main tab bar used to fix
       every item to a flat pixel width (150px, then 110px, then 80px for
       4 named tabs) to control the bar's own layout by hand.
       3.5.573D: Fulvio — "MI SPIEGHI PERCHE' non HAI FATTO TUTTO UGUALE
       ???? IL FORMATO DEVE ESSERE IDENTICO!!!" — porting the Liquid
       Glass bar to Advisor (3.5.572D) already gave every `.ops-teacher-tab`
       here the SAME shared padding-based auto-sizing Student's own bar
       uses (`.ops-teacher-tabs.lg-bar .ops-teacher-tab`), but these
       leftover fixed-width overrides (same specificity, later in source
       order) were still winning over that padding — literally the same
       "width beats padding" trap the original nav-width saga was about,
       just reintroduced here by never removing these once Liquid Glass
       arrived. Removed outright: every Advisor tab now sizes exactly
       like Student's own (padding + text only), which is what "formato
       identico" actually requires — no per-tab pixel values left to
       drift out of sync again. */
    /* 3.5.381D: CLASSES' own submenu (Profiles/Students), per Fulvio's own
       explicit request to group them under CLASSES — modeled on the
       Class Information Hub's own COURSE dropdown (`.cc-course-dropdown-*`,
       3.5.379D) but deliberately simpler: no click-outside listener and
       no separate "last visited" memory, since open/closed state here is
       driven entirely by selectTeacherTab()'s own single `inClassesGroup`
       rule (see its own comment) — the dropdown is open for as long as
       ANY of Classes/Profiles/Students is the current page, and closed
       otherwise, with nothing else to track. Classes/Profiles/Students
       themselves get NO new style at all — same `.ops-teacher-tab`/
       `.active` classes as every other main tab, unchanged; only their
       DOM position (Profiles/Students moved off the main row into this
       floating list) is new. */
    .ops-teacher-dropdown-wrap { position: relative; display: inline-flex; }
    .ops-teacher-dropdown-arrow { font-size: 12px; margin-left: 4px; display: inline-block; transition: transform 0.2s ease; }
    .ops-teacher-dropdown-wrap.open .ops-teacher-dropdown-arrow { transform: rotate(180deg); }
    /* display:none is this element's own CSS default (first paint, before
       any JS runs); selectTeacherTab() then drives visibility directly
       via `.style.display = 'flex'/'none'` (same inline-style-toggle
       pattern as the Settings screen's own Profile dropdown and the Hub's
       own COURSE dropdown) — kept as plain JS state, not tied to the
       wrap's `.open` class, which here only drives the arrow's rotation. */
    .ops-teacher-dropdown-list {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 100%;
        flex-direction: column;
        gap: 6px;
        padding: 6px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 10px;
        z-index: 50;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .ops-teacher-dropdown-list .ops-teacher-tab { width: 100%; white-space: nowrap; }

    /* --- CURRICULUMS PANEL --- */
    .curriculum-view { min-height: 400px; }
    .curriculum-levels {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 18px;
    }
    .curriculum-level {
        background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
        border: 1px solid #334155;
        border-radius: 14px;
        padding: 22px;
        cursor: pointer;
        transition: all 0.2s;
    }
    [data-theme="light"] .curriculum-level {
        border-color: #e2e8f0;
    }
    .curriculum-level:hover {
        border-color: #475569;
    }
    [data-theme="light"] .curriculum-level:hover {
        border-color: #cbd5e1;
    }
    .curriculum-level.active {
        border-color: #f97316;
        box-shadow: 0 0 24px rgba(249, 115, 22, 0.25);
    }
    .curriculum-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 26px;
    }
    .curriculum-header .ops-teacher-badge {
        flex-shrink: 0;
    }
    .curriculum-header .curriculum-id {
        margin: 0;
        flex-shrink: 0;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .curriculum-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 80px;
        margin-bottom: 30px;
    }
    .curriculum-row:last-child {
        margin-bottom: 0;
        min-height: 60px;
    }
    .curriculum-label {
        font-size: 0.95rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.4;
    }
    .curriculum-value {
        font-size: 1.05rem;
        font-weight: 500;
        color: #f1f5f9;
        line-height: 1.45;
    }
    @media (max-width: 640px) {
        .curriculum-label { font-size: 0.85rem; }
        .curriculum-value { font-size: 0.95rem; }
    }

    .curriculum-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        align-items: start;
    }
    .curriculum-col {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .curriculum-col-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #facc15;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .curriculum-lessons-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .curriculum-lesson {
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition: border-color 0.2s;
    }
    .curriculum-lesson:hover {
        border-color: #475569;
    }
    .curriculum-lesson-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.95rem;
        font-weight: 700;
        color: #f1f5f9;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .curriculum-lesson-icon {
        color: #facc15;
        font-size: 0.85rem;
        width: 16px;
    }
    .curriculum-lesson-title {
        color: #f97316;
        min-width: 100px;
    }
    .curriculum-lesson-chars {
        color: #94a3b8;
        font-size: 0.8rem;
        margin-left: 10px;
        white-space: nowrap;
    }
    .curriculum-lesson-content {
        padding: 10px 18px 18px;
        border-top: 1px solid #334155;
    }
    .curriculum-lesson-line {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin: 0 0 12px 0;
        color: #cbd5e1;
        font-size: 0.95rem;
        line-height: 1.4;
    }
    .curriculum-lesson-label {
        color: #facc15;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
    }
    .curriculum-lesson-value {
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-weight: 600;
        text-align: left;
    }
    .curriculum-lesson-desc {
        margin: 12px 0 0 0;
        color: #94a3b8;
        font-size: 0.9rem;
        font-style: italic;
    }
    .curriculum-weekly-schedule {
        margin-top: 30px;
    }
    .curriculum-weekly-title {
        font-size: 1rem;
        font-weight: 700;
        color: #facc15;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin: 0 0 14px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .weekly-hamburger {
        color: #22c55e;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
    .curriculum-weekly-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .curriculum-day-card {
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 10px;
        padding: 14px 18px;
        transition: border-color 0.2s;
    }
    .curriculum-day-card:hover {
        border-color: #475569;
    }
    .curriculum-day-card.day-lesson-card {
        background: linear-gradient(180deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.05) 100%);
        border-color: rgba(34,197,94,0.35);
    }
    .curriculum-day-card.day-lesson-card:hover {
        border-color: rgba(34,197,94,0.40);
    }
    .curriculum-day-header {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .curriculum-day-title {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.95rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin: 0;
        width: 110px;
        text-align: left;
        flex-shrink: 0;
    }
    .curriculum-day-subtitle {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin: 0 0 0 -10px;
    }
    .day-lesson { color: #22c55e; }
    .day-lesson-card .curriculum-day-title { color: #94a3b8; }
    .day-consolidate { color: #f1f5f9; }
    .day-increase { color: #ef4444; }
    .day-calendar {
        color: #facc15;
        display: inline-flex;
        align-items: center;
        margin-left: auto;
    }
    .curriculum-day-content {
        padding: 12px 0 0 0;
        margin-top: 10px;
        border-top: 1px solid #334155;
        display: none;
    }
    .curriculum-day-card.open .curriculum-day-content {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 14px;
        row-gap: 6px;
        align-items: center;
    }
    .curriculum-day-line {
        /* Each line's label/value spans become direct items of the
           .curriculum-day-content grid above, so every row in the card
           shares the same label column — sized to the widest label — with
           all labels left-aligned and all values starting flush after it. */
        display: contents;
        color: #cbd5e1;
        font-size: 0.85rem;
        line-height: 1.4;
    }
    .curriculum-day-label {
        color: #facc15;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        text-align: left;
    }
    .curriculum-day-value {
        color: #f1f5f9;
        font-family: 'IBM Plex Mono', monospace;
        font-weight: 600;
    }
    .day-mode { color: #22c55e; }
    .day-goal-percent { color: #22c55e; }
    .day-goal-suffix { color: #f1f5f9; }
    @media (max-width: 900px) {
        .curriculum-detail-grid {
            grid-template-columns: 1fr;
        }
        .curriculum-lesson-chars {
            font-size: calc(0.8rem + 1px);
        }
    }



    /* 3.5.690D — TRANSMISSION (live panels): slider areas slightly wider and
       ticks centered on the badges, same look as the SETUP preview. The speed
       track runs from the first badge center to the last (+ a little past it
       for the top values); the JS-drawn .bs-thumb replaces the native thumb
       inside .ops-panel only (the compact-menu slider stays native). */
    #transmissionConfigPanel {
        padding-left: 8px;
        padding-right: 8px;
        --bs-n: 8;
        --bs-extra: 0;
    }
    #transmissionConfigPanel .fader-track-wrap.bs-track,
    #transmissionConfigPanel .lab1-tone-fader .fader-track-wrap {
        /* symmetric: line from first to last badge center (+ half thumb) with the same gap to the
           box edge on both sides; the few top values past the last badge just let the thumb
           overhang the line end a little */
        padding-left: calc((100% - (var(--bs-n) - 1) * 3px) / var(--bs-n) / 2 - 6.5px);
        padding-right: calc((100% - (var(--bs-n) - 1) * 3px) / var(--bs-n) / 2 - 6.5px);
    }
    #transmissionConfigPanel .fader-track-wrap.bs-track {
        position: relative;
        touch-action: pan-y;
    }
    #transmissionConfigPanel .fader-track-wrap.bs-track input[type="range"].fader {
        pointer-events: none;
    }
    #transmissionConfigPanel .fader-track-wrap.bs-track input[type="range"].fader::-webkit-slider-thumb {
        opacity: 0;
    }
    #transmissionConfigPanel .fader-track-wrap.bs-track input[type="range"].fader::-moz-range-thumb {
        opacity: 0;
    }
    .bs-thumb {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        width: 11px;
        height: 20px;
        box-sizing: border-box;
        border-radius: 3px;
        background: #f8fafc;
        border: 1px solid rgba(0,0,0,0.35);
        box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        pointer-events: none;
    }
    .compact-menu-slider .bs-thumb { display: none; }

    /* 3.5.692D/693D — TRANSMISSION labels: title, SPEED and TONE share the same left x,
       17px from the panel edge = exactly where the ENGINE title sits (16px padding +
       1px border), and the "xx CPM" readout sits 10px in from the right edge. Same on
       the SETUP copy. */
    #transmissionConfigPanel .ops-panel-header .ops-panel-title,
    #transmissionConfigPanel-setup .ops-panel-header .ops-panel-title {
        margin-left: 8px;
    }
    #transmissionConfigPanel .fader-readout,
    #transmissionConfigPanel-setup .fader-readout {
        padding-left: 3px;
        padding-right: 10px;
    }

    /* 3.5.695D — the plain SPEED slider of the Manual Reception profile row
       (#speedFader-menu, shown grayscale): dark gray on the left to white at the
       end, instead of the colored VU gradient whose red end turned mid-gray. */
    #speedFader-menu.fader.speed-fader {
        background: linear-gradient(90deg, #475569 0%, #ffffff 100%);
    }


    /* 3.5.700D — MANUAL RECEPTION block of the MIN SPEED window, matched to the TRANSMISSION
       panel below it: the white track has the same length as the SPEED/TONE lines (panel
       border 1 + padding 8 + box border 1 + the fader's own inset), the thumb is the same
       11x20 one, the label is written like the TRANSMISSION title and the values sit on
       the right like "xx CPM". */
    #advisorSetupArea .ops-setup-slider-header {
        padding: 0 19px 0 17px;
    }
    #advisorSetupArea .ops-setup-slider-title {
        width: 100%;
        justify-content: space-between;
    }
    #advisorSetupArea .ops-setup-slider-name-sm {
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        color: #94a3b8;
        letter-spacing: 1px;
    }
    /* the same dark rounded box that surrounds the SPEED and TONE sliders (.fader-track-wrap):
       9px in from the panel edge like those boxes, the line inside inset like theirs */
    #advisorSetupArea .ops-setup-track-wrap {
        height: 34px;
        margin: 0 9px;
        padding: 0 calc((100% - 39px) / 16 - 4.5px);
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: var(--input-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
    }
    #advisorSetupArea .ops-setup-track-wrap .ops-setup-track {
        flex: 1;
    }
    #advisorSetupArea .ops-setup-thumb {
        width: 11px;
        height: 20px;
        top: -6px;
    }

    /* 3.5.702D — MIN SPEED window, left column: SETUP label and "Minimum speed" title share the
       same typeface (the title's "Big Shoulders Display"; sizes and colors unchanged), the
       description and the CPM / WPM labels are bigger, and the "Editing one field..." hint is
       bigger and aligned under the CPM / WPM labels (10px in, like they are). */
    #advisorSetupArea .ops-setup-section-label {
        font-family: "Big Shoulders Display", sans-serif;
        font-weight: 600;
    }
    #advisorSetupArea .ops-setup-section-desc {
        font-size: 19px;
        max-width: none; /* the old 400px cap wrapped the bigger text onto 3 lines */
    }
    #advisorSetupArea .ops-setup-field-label {
        font-size: 17px;
    }
    #advisorSetupArea .ops-setup-hint {
        font-size: 16px;
        margin-left: 10px;
    }

    /* 3.5.703D — OVERVIEW, SESSIONS and RESOURCES mac windows: the same vertical gradient as
       the buttons / the MIN SPEED window (#1e293b to #0f172a) instead of the flat #121a2a.
       The black title bar is unchanged; the other tabs keep their flat body. */
    .cc-card-mac.cc-mac-grad {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    }

    /* 3.5.704D — SESSIONS: while today falls in a week's dates, that week's range and its sessions'
       dates are yellow (same for Advisor and Student, one renderer). */
    .cc-sess-md-wrange.now,
    .cc-sess-md-sdate.now {
        color: #facc15;
    }

    /* 3.5.706D — SESSIONS detail: the session title (above KEY POINTS) is yellow when the session is dated today. */
    .cc-sess-md-title-row h2.now { color: #facc15; }

    /* 3.5.707D — SESSIONS: "Simulate date" field above the session date (test aid; yellow while active). */
    .cc-sess-md-sim {
        display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 10px;
        font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b;
    }
    .cc-sess-md-sim input[type="date"] {
        background: #0e1626; border: 1px solid #334155; border-radius: 8px; color: #e6e9f0;
        padding: 6px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color-scheme: dark;
    }
    .cc-sess-md-sim.on input[type="date"] { color: #facc15; } /* only the date is yellow; label and border stay neutral */
    .cc-sess-md-simx {
        background: transparent; border: 1px solid #334155; border-radius: 8px; color: #94a3b8;
        width: 28px; height: 28px; cursor: pointer; font-size: 12px;
    }
    .cc-sess-md-simx:hover { color: #facc15; border-color: #facc15; }

    /* 3.5.709D — Advisor RESULTS: the E / R buttons of MANUAL rows are the same size as the AUTO /
       MANUAL badges (11px text, 20px high, 7px side padding, 4px radius), so MANUAL rows are no taller than AUTO
       rows. Scoped to the RESULTS table only (other lists keep the 30px action buttons). 3.5.710D: the
       selector no longer requires `.ops-teacher-result-detail` — the flat list shown when a student
       filter/search is active renders its rows without that class, so 3.5.709D did nothing there. The
       grouped view's +/- toggle keeps its own inline size. */
    #teacherResultsTable .ops-teacher-student-action {
        min-width: 0;
        height: 20px; /* = the AUTO / MANUAL badge box (measured 20px) */
        padding: 0 7px;
        margin-right: 5px;
        border-radius: 4px;
        font-size: 11px;
        line-height: normal;
        letter-spacing: .05em;
        box-shadow: none;
    }
