/* Editor E-R — stili. Caricato da Er.html prima del corpo della pagina. */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Scudo di avvio (vedi script nell'<head>): durante il caricamento i comandi
           non sono ancora definiti, quindi i click vengono ignorati invece di
           sollevare "Uncaught ReferenceError: ... is not defined". */
        html.booting body {
            pointer-events: none;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        }

        #sidebar {
            width: 310px;
            background: linear-gradient(180deg, #1a2a4a 0%, #16213e 100%);
            padding: 18px;
            overflow-y: auto;
            border-right: 2px solid #0f3460;
            display: flex;
            flex-direction: column;
            box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
        }

        /* Riga di testata: titolo a sinistra + tasto per nascondere la sidebar.
           Il bordo rosso è spostato dalla riga del titolo, così il tasto sta
           comunque dentro la linea. */
        #sidebar-header-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
            padding-bottom: 12px;
            border-bottom: 2px solid #e94560;
        }

        #sidebar h2 {
            color: #ffffff;
            font-size: 20px;
            text-align: left;
            flex: 1;
            min-width: 0;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        #sidebar-toggle-btn {
            flex-shrink: 0;
            width: 30px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(148, 187, 233, 0.1);
            border: 1px solid rgba(148, 187, 233, 0.3);
            border-radius: 6px;
            color: #94bbe9;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        #sidebar-toggle-btn:hover {
            background: rgba(148, 187, 233, 0.25);
            color: #ffffff;
        }

        /* Sidebar nascosta: il canvas occupa tutta la larghezza e la barra
           statistiche torna a partire dal bordo sinistro. */
        body.sidebar-collapsed #sidebar {
            display: none;
        }

        body.sidebar-collapsed #stats-bar {
            left: 0;
        }

        .tool-section {
            margin-bottom: 22px;
        }

        .tool-section h3 {
            color: #b8d4f0;
            font-size: 13px;
            margin-bottom: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn {
            width: 100%;
            padding: 10px 12px;
            margin-bottom: 7px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s ease;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .btn:active {
            transform: translateY(2px);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-primary {
            background: linear-gradient(135deg, #e94560 0%, #c73e54 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #ff6b6b 0%, #e94560 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(233, 69, 96, 0.4);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
            color: #94bbe9;
            border: 1px solid rgba(148, 187, 233, 0.2);
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #1a4b8c 0%, #0f3460 100%);
            color: #ffffff;
            transform: translateY(-2px);
        }

        .btn-success {
            background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(0, 184, 148, 0.3);
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #00d9a5 0%, #00b894 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 184, 148, 0.4);
        }

        .btn-warning {
            background: linear-gradient(135deg, #fdcb6e 0%, #f0b93d 100%);
            color: #2d3436;
            box-shadow: 0 4px 12px rgba(253, 203, 110, 0.3);
        }

        .btn-warning:hover {
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(253, 203, 110, 0.4);
        }

        .btn-info {
            background: linear-gradient(135deg, #74b9ff 0%, #5a9fd4 100%);
            color: #2d3436;
            box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
        }

        .btn-info:hover {
            background: linear-gradient(135deg, #a8d8ff 0%, #74b9ff 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(116, 185, 255, 0.4);
        }

        .btn-weak {
            background: linear-gradient(135deg, #a29bfe 0%, #8e7fcf 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(162, 155, 254, 0.3);
        }

        .btn-weak:hover {
            background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(162, 155, 254, 0.4);
        }

        /* Nuovi stili per i bottoni Storia e File */
        .btn-history {
            background: linear-gradient(135deg, #6c5ce7 0%, #5a4bcf 100%);
            color: white;
            width: 48%;
            display: inline-block;
            box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
        }

        .btn-history:hover {
            background: linear-gradient(135deg, #8e44ad 0%, #6c5ce7 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(108, 92, 231, 0.4);
        }

        .row-btns {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        /* I quattro comandi attributo stanno due per riga in 274px: "Identificatore"
           è il termine più lungo e deve restare su una sola riga, altrimenti il
           simbolo ● finisce da solo in alto e i due tasti della riga si allungano. */
        #attribute-commands .row-btns .btn {
            font-size: 11px;
            padding: 10px 6px;
            white-space: nowrap;
        }

        #canvas-container {
            flex: 1;
            overflow: auto;
            background: #ffffff;
            background-image:
                linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
            background-size: 20px 20px;
            position: relative;
        }

        /* Pan della vista con Shift: il cursore a manina vale anche sopra gli
           elementi, che di norma mostrano cursor: move. */
        #canvas-container.panning,
        #canvas-container.panning * {
            cursor: grabbing !important;
            user-select: none;
        }

        #canvas {
            min-width: 2000px;
            min-height: 1500px;
            background: transparent;
            transform-origin: 0 0;
            box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.05);
        }
        
        /* Rettangolo di selezione multipla */
        /* ── COMANDO "TASTO + CLICK" ARMATO ──
           Con un comando armato il cursore diventa un mirino e compare un badge
           che ricorda cosa farà il prossimo click e come annullare. */
        body.create-armed #canvas,
        body.create-armed #canvas-container { cursor: crosshair; }
        #create-hud {
            position: absolute;
            top: 40px;
            left: 12px;
            z-index: 300;
            display: none;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 8px;
            background: rgba(15, 52, 96, 0.95);
            border: 1px solid rgba(148, 187, 233, 0.35);
            color: #b8d4f0;
            font-size: 12px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            pointer-events: none;
        }
        #create-hud.on { display: flex; }
        #create-hud kbd {
            background: #0d1b2a;
            border: 1px solid rgba(148, 187, 233, 0.4);
            border-radius: 4px;
            padding: 1px 6px;
            color: #fdcb6e;
            font-weight: 700;
            font-size: 12px;
        }

        #selection-rectangle {
            position: absolute;
            border: 2px dashed rgba(233, 69, 96, 0.8);
            background: rgba(233, 69, 96, 0.15);
            pointer-events: none;
            z-index: 100;
            display: none;
        }

        /* Lettera della scorciatoia "tasto + click" mostrata dentro il pulsante
           della sidebar, così la scorciatoia si scopre senza aprire la guida. */
        .btn-key {
            display: inline-block;
            margin-left: 6px;
            padding: 0 5px;
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 4px;
            font-size: 10px;
            font-weight: 700;
            line-height: 15px;
            color: #fdcb6e;
            background: rgba(0, 0, 0, 0.25);
            vertical-align: middle;
        }

        .entity {
            cursor: move;
        }

        .entity rect {
            fill: #fff9e6;
            stroke: #2d3436;
            stroke-width: 2;
            vector-effect: non-scaling-stroke;
        }

        .entity text {
            font-size: 14px;
            font-weight: bold;
            fill: #2d3436;
            pointer-events: none;
        }

        .relationship {
            cursor: move;
        }

        .relationship polygon {
            fill: #e6f7ff;
            stroke: #2d3436;
            stroke-width: 2;
            vector-effect: non-scaling-stroke;
        }

        .relationship text {
            font-size: 12px;
            font-weight: bold;
            fill: #2d3436;
            pointer-events: none;
        }

        .attribute-group {
            cursor: move;
        }

        .attribute-group:hover .attribute-line {
            stroke: #e94560;
            stroke-width: 2;
        }

        .attribute-group.selected .attribute-line,
        .attribute-group.selected .attribute-circle,
        .attribute-group.selected .attribute-circle-filled,
        .attribute-group.selected .composite-ellipse {
            stroke: #e94560;
            stroke-width: 2.5;
        }

        .attribute-line {
            stroke: #2d3436;
            stroke-width: 1.5;
        }

        .attribute-circle {
            fill: white;
            stroke: #2d3436;
            stroke-width: 1.5;
        }

        .attribute-circle-filled {
            fill: #2d3436;
            stroke: #2d3436;
            stroke-width: 1.5;
        }

        /* CORREZIONE 1: pointer-events all e cursor pointer per abilitare il click sugli attributi */
        .attribute-text {
            font-size: 11px;
            fill: #2d3436;
            pointer-events: all;
            cursor: pointer;
        }

        .connection-line {
            stroke: #2d3436;
            stroke-width: 1.5;
        }

        .cardinality-group {
            cursor: move;
        }

        .cardinality-group:hover .cardinality-text {
            fill: #e94560;
            font-weight: 900;
            text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
        }

        .cardinality-group.selected .cardinality-text {
            fill: #e94560;
            font-weight: 900;
            text-shadow: 0 0 4px rgba(233, 69, 96, 0.5);
        }

        .cardinality-text {
            font-size: 13px;
            fill: #000000;
            font-weight: bold;
            font-family: 'Segoe UI', Arial, sans-serif;
            text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white;
            user-select: none;
        }

        .external-id-line {
            stroke: #2d3436;
            stroke-width: 2;
        }

        .generalization-line {
            stroke: #2d3436;
            stroke-width: 2;
        }

        .generalization-arrow {
            fill: #2d3436;
            stroke: #2d3436;
        }

        .generalization-click-area {
            fill: transparent;
            stroke: #6c5ce7;
            stroke-width: 2;
            stroke-dasharray: 5, 5;
            cursor: pointer;
        }

        .generalization-click-area:hover {
            fill: rgba(108, 92, 231, 0.1);
        }

        .generalization.selected .generalization-click-area {
            fill: rgba(233, 69, 96, 0.15);
            stroke: #e94560;
        }

        .coverage-text {
            font-size: 11px;
            fill: #6c5ce7;
            font-weight: bold;
            cursor: move;
            user-select: none;
        }

        .coverage-text:hover {
            fill: #e94560;
        }

        .selected rect,
        .selected polygon {
            stroke: #e94560;
            stroke-width: 3;
        }

        .composite-ellipse {
            fill: #f0fff0;
            stroke: #2d3436;
            stroke-width: 1.5;
        }

        .multivalue-circle-outer,
        .multivalue-circle-inner {
            fill: white;
            stroke: #2d3436;
            stroke-width: 1.5;
        }

        .identifier-line {
            stroke: #2d3436;
            stroke-width: 2;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: linear-gradient(135deg, #1e3a5f 0%, #16213e 100%);
            padding: 25px;
            border-radius: 15px;
            min-width: 380px;
            max-width: 520px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(148, 187, 233, 0.2);
        }

        .modal-content h3 {
            color: #ffffff;
            margin-bottom: 20px;
            cursor: move;
            user-select: none;
            padding-bottom: 12px;
            border-bottom: 2px solid #e94560;
            font-size: 18px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

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

        .form-group label {
            display: block;
            color: #b8d4f0;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 500;
        }

        .form-group input[type="text"],
        .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #0f3460;
            border-radius: 8px;
            background: #0d1b2a;
            color: #ffffff;
            font-size: 15px;
            transition: all 0.3s ease;
        }

        .form-group input[type="text"]:focus,
        .form-group select:focus {
            outline: none;
            border-color: #e94560;
            box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
        }

        .form-group input[type="text"]::placeholder {
            color: #5a6a7a;
        }

        /* Cardinalità: i quattro valori classici sono pulsanti (un click), il campo
           sotto serve solo per i valori fuori standard (es. (0,3)). */
        .card-presets {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }

        .card-preset {
            flex: 1;
            padding: 8px 4px;
            border: 2px solid #0f3460;
            border-radius: 8px;
            background: #0d1b2a;
            color: #b8d4f0;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .card-preset:hover {
            border-color: #94bbe9;
            color: #ffffff;
        }

        .card-preset.active {
            background: #e94560;
            border-color: #e94560;
            color: #ffffff;
        }

        .form-group .card-free {
            padding: 8px 12px;
            font-size: 14px;
        }

        .card-hint {
            font-size: 11px;
            color: #94bbe9;
            margin-top: 6px;
        }

        /* Stile per le checkbox nel modal */
        .modal-body input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            cursor: pointer;
            accent-color: #e94560;
        }

        .modal-body label {
            cursor: pointer;
            color: #ffffff;
            font-size: 14px;
        }

        .modal-body input[type="checkbox"]+label {
            display: inline-flex;
            align-items: center;
        }

        .modal-buttons {
            display: flex;
            gap: 12px;
            margin-top: 25px;
            padding-top: 15px;
            border-top: 1px solid rgba(148, 187, 233, 0.2);
        }

        .modal-buttons .btn {
            flex: 1;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .modal-buttons .btn-secondary {
            background: linear-gradient(135deg, #2d3a4f 0%, #1a2744 100%);
            color: #b8d4f0;
            border: 1px solid #3a4a6a;
        }

        .modal-buttons .btn-secondary:hover {
            background: linear-gradient(135deg, #3d4a5f 0%, #2a3764 100%);
            color: #ffffff;
        }

        .modal-buttons .btn-primary {
            background: linear-gradient(135deg, #e94560 0%, #c73e54 100%);
            color: #ffffff;
            border: none;
            box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
        }

        .modal-buttons .btn-primary:hover {
            background: linear-gradient(135deg, #ff6b6b 0%, #e94560 100%);
            box-shadow: 0 6px 20px rgba(233, 69, 96, 0.5);
        }

        /* Box scelta elemento su click sovrapposto */
        #element-picker {
            position: fixed;
            z-index: 1100;
            min-width: 260px;
            max-width: 360px;
            max-height: 40vh;
            overflow: auto;
            background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
            border: 1px solid rgba(148, 187, 233, 0.3);
            border-radius: 15px;
            padding: 16px 18px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            color: #e8eef7;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        #element-picker[hidden] {
            display: none;
        }

        #element-picker h4 {
            margin: 0 0 10px 0;
            font-size: 14px;
            color: #b8d4f0;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        #element-picker-list label {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 8px;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            border: 1px solid transparent;
        }

        #element-picker-list label:hover {
            background: rgba(148, 187, 233, 0.1);
            border-color: rgba(148, 187, 233, 0.2);
        }

        #element-picker-list input[type="radio"] {
            accent-color: #e94560;
            flex: none;
        }

        .element-picker-buttons {
            display: flex;
            gap: 10px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid rgba(148, 187, 233, 0.2);
        }

        .element-picker-buttons button {
            flex: 1;
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .element-picker-buttons .btn-secondary {
            background: linear-gradient(135deg, #2d3a4f 0%, #1a2744 100%);
            color: #b8d4f0;
            border: 1px solid #3a4a6a;
        }

        .element-picker-buttons .btn-secondary:hover {
            background: linear-gradient(135deg, #3d4a5f 0%, #2a3764 100%);
            color: #ffffff;
        }

        .element-picker-buttons .btn-primary {
            background: linear-gradient(135deg, #e94560 0%, #c73e54 100%);
            color: #ffffff;
            border: none;
            box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
        }

        .element-picker-buttons .btn-primary:hover {
            background: linear-gradient(135deg, #ff6b6b 0%, #e94560 100%);
        }

        /* Toast notification */
        #toast {
            position: fixed;
            bottom: 25px;
            right: 25px;
            background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
            color: white;
            padding: 14px 24px;
            border-radius: 10px;
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            pointer-events: none;
            z-index: 2000;
            box-shadow: 0 6px 20px rgba(0, 184, 148, 0.4);
            font-weight: 500;
            font-size: 14px;
        }

        /* Guide magnetiche */
        #magnetic-guides {
            pointer-events: none;
            z-index: 100;
        }

        /* Stile per il testo della cardinalità multivalore */
        .multivalue-cardinality-text {
            font-size: 10px;
            fill: #2d3436;
            font-weight: bold;
            cursor: move;
            user-select: none;
        }

        .multivalue-cardinality-text:hover {
            fill: #e94560;
        }



        /* Stile per il testo del ruolo nelle relazioni ricorsive */
        .role-text {
            font-size: 12px;
            fill: #000000;
            font-weight: bold;
            user-select: none;
            pointer-events: all;
            cursor: pointer;
            text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        .role-text:hover {
            fill: #e94560;
        }

        /* Per nascondere le sezioni */
        .tool-section.hidden {
            display: none;
        }

        /* Per mostrare le sezioni */
        .tool-section.visible {
            display: block;
        }

        /* Per il bottone copia/incolla */
        #copy-paste-container {
            transition: all 0.3s ease;
            margin-bottom: 10px;
        }

        #copy-paste-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        #copy-paste-btn.copied {
            background: #00b894 !important;
        }

        #copy-paste-btn.pasting {
            background: #6c5ce7 !important;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        /* ── STATS BAR ── */
        #stats-bar {
            position: fixed;
            top: 0; left: 310px;
            right: 0;
            height: 30px;
            background: rgba(10, 22, 45, 0.97);
            border-bottom: 1px solid rgba(148,187,233,0.15);
            display: flex;
            align-items: center;
            padding: 0 15px;
            gap: 12px;
            font-size: 11px;
            color: #94bbe9;
            z-index: 400;
            user-select: none;
            box-sizing: border-box;
            overflow: visible;
        }
        #stats-bar .stat { display: flex; align-items: center; gap: 4px; flex-shrink: 1; min-width: 0; }
        #stats-bar .stat strong { color: #fdcb6e; min-width: 18px; display: inline-block; text-align: right; }
        #stats-bar .sep { width: 1px; height: 12px; background: rgba(148,187,233,0.2); }
        #unsaved-dot { color: #e94560; display: none; font-size: 13px; }
        /* Tasto per riaprire la sidebar quando è nascosta (vive nella stats bar) */
        #sidebar-show-btn {
            display: none;
            background: rgba(148,187,233,0.1);
            border: 1px solid rgba(148,187,233,0.3);
            border-radius: 4px;
            color: #94bbe9;
            width: auto;
            height: 20px;
            padding: 0 8px;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
            flex-shrink: 0;
            align-items: center;
            gap: 5px;
        }
        #sidebar-show-btn:hover { background: rgba(148,187,233,0.25); color: #fff; }
        body.sidebar-collapsed #sidebar-show-btn { display: inline-flex; }
        #zoom-controls {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        #zoom-controls button, #btn-fit, #btn-validate-bar {
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
        }
        #zoom-controls button {
            background: rgba(148,187,233,0.1);
            border: 1px solid rgba(148,187,233,0.15);
            border-radius: 4px;
            color: #94bbe9;
            width: 22px; height: 18px;
            font-size: 13px;
            cursor: pointer; padding: 0;
        }
        #zoom-controls button:hover { background: rgba(148,187,233,0.25); color: #fff; }
        #zoom-pct { color: #fdcb6e; font-weight: 700; font-size: 11px; min-width: 36px; text-align: center; }
        #zoom-controls #btn-fit {
            background: rgba(0,184,148,0.15);
            border: 1px solid rgba(0,184,148,0.3);
            border-radius: 4px;
            color: #00b894;
            padding: 0 7px;
            height: 20px;
            width: auto;
            font-size: 11px; font-weight: 600;
            cursor: pointer;
        }
        #btn-fit:hover { background: rgba(0,184,148,0.3); }
        #zoom-controls #btn-validate-bar {
            background: rgba(253,203,110,0.12);
            border: 1px solid rgba(253,203,110,0.25);
            border-radius: 4px;
            color: #fdcb6e;
            padding: 0 7px;
            height: 20px;
            width: auto;
            font-size: 11px; font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            gap: 4px;
        }
        #btn-validate-bar:hover { background: rgba(253,203,110,0.25); }
        #canvas-container { padding-top: 30px; }

        /* ── SEARCH ── */
        #search-wrap { padding: 0 0 10px; }
        #search-input {
            width: 100%;
            padding: 8px 10px;
            background: #0d1b2a;
            border: 1px solid rgba(148,187,233,0.2);
            border-radius: 7px;
            color: #fff;
            font-size: 12px;
        }
        #search-input:focus { outline: none; border-color: #e94560; }
        #search-input::placeholder { color: #4a6080; }
        #search-results { margin-top: 5px; }
        .sr-item {
            padding: 5px 8px;
            border-radius: 5px;
            font-size: 11px;
            color: #94bbe9;
            cursor: pointer;
            display: flex; align-items: center; gap: 6px;
        }
        .sr-item:hover { background: rgba(148,187,233,0.1); color: #fff; }

        /* ── VALIDATION PANEL ── */
        #validation-panel {
            position: fixed;
            bottom: 165px; right: 20px;
            width: 270px;
            max-height: 280px;
            overflow-y: auto;
            background: rgba(16, 26, 50, 0.98);
            border: 1px solid rgba(148,187,233,0.25);
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.5);
            z-index: 600;
            display: none;
        }
        #validation-panel.open { display: block; }
        .vp-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 12px;
            border-bottom: 1px solid rgba(148,187,233,0.15);
            font-size: 12px; font-weight: 700; color: #b8d4f0;
            text-transform: uppercase; letter-spacing: 0.5px;
            position: sticky; top: 0;
            background: rgba(16, 26, 50, 0.98);
        }
        .vp-header button { background: none; border: none; color: #94bbe9; cursor: pointer; font-size: 15px; line-height: 1; }
        .vp-item {
            display: flex; gap: 7px; align-items: flex-start;
            padding: 7px 12px;
            font-size: 11px; line-height: 1.4;
            border-bottom: 1px solid rgba(148,187,233,0.07);
        }
        .vp-item:last-child { border-bottom: none; }
        .vp-item.err { color: #ff7675; }
        .vp-item.warn { color: #fdcb6e; }
        .vp-item.ok { color: #00cec9; }
        .vp-icon { flex-shrink: 0; font-size: 12px; }

        /* Modalità presentazione (F11): nasconde i pannelli e lascia il diagramma. */
        html.presentation-mode #sidebar,
        html.presentation-mode #stats-bar,
        html.presentation-mode #validation-panel {
            display: none !important;
        }
        html.presentation-mode #canvas-container {
            left: 0 !important;
        }