:root {
            --gate-fill: #ffffff;
            --wire-off: #9ca3af;
            --wire-on: #10b981;
            --wire-selected: #f59e0b;
            --workspace-light: #e5e7eb;
            --workspace-dark: #111827;
        }

        .dark {
            --gate-fill: #1f2937;
            --wire-off: #4b5563;
            --workspace-dark: #111827;
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            background: #f3f4f6;
            color: #111827;
            overflow: hidden;
            user-select: none;
            transition: background-color 0.25s ease, color 0.25s ease;
        }

        .dark body {
            background: #111827;
            color: #f3f4f6;
        }

        #workspace {
            --grid-size: 20px;
            --grid-x: 0px;
            --grid-y: 0px;
            background-color: var(--workspace-light);
            cursor: grab;
            position: relative;
        }

        .dark #workspace {
            background-color: var(--workspace-dark);
        }

        #workspace.show-grid {
            background-image:
                linear-gradient(to right, rgba(156,163,175,0.28) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(156,163,175,0.28) 1px, transparent 1px);
            background-size: var(--grid-size) var(--grid-size);
            background-position: var(--grid-x) var(--grid-y);
        }

        .dark #workspace.show-grid {
            background-image:
                linear-gradient(to right, rgba(75,85,99,0.55) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(75,85,99,0.55) 1px, transparent 1px);
        }

        #workspace:active { cursor: grabbing; }

        #canvas-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            transform-origin: 0 0;
        }

        .component {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 60px;
            height: 50px;
            z-index: 10;
            cursor: grab;
            transition: filter 0.18s ease, transform 0.08s ease;
        }

        .component:hover { filter: brightness(1.03); }
        .component:active { cursor: grabbing; }

        .component-box {
            background: #ffffff;
            border: 2px solid #d1d5db;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.06);
        }

        .dark .component-box {
            background: #374151;
            border-color: #4b5563;
            box-shadow: 0 10px 22px rgba(0,0,0,0.32), 0 3px 6px rgba(0,0,0,0.18);
        }

        .component.selected {
            z-index: 120 !important;
            outline: 3px solid rgba(59,130,246,0.95);
            outline-offset: 4px;
            border-radius: 12px;
            box-shadow: 0 0 0 8px rgba(59,130,246,0.16), 0 16px 32px rgba(59,130,246,0.18);
        }

        .selection-rect {
            position: absolute;
            border: 1px dashed rgba(59,130,246,0.95);
            background: rgba(59,130,246,0.14);
            pointer-events: none;
            display: none;
            z-index: 40;
        }

        .gate-svg {
            color: #6b7280;
            transition: color 0.18s ease, filter 0.18s ease;
            filter: drop-shadow(0 6px 10px rgba(0,0,0,0.10));
        }

        .dark .gate-svg {
            color: #9ca3af;
            filter: drop-shadow(0 6px 10px rgba(0,0,0,0.40));
        }

        .rs-latch-top-gate .gate-svg { color: #79cfff !important; }
        .rs-latch-bottom-gate .gate-svg { color: #7af08d !important; }

        .component:hover .gate-svg {
            color: #3b82f6;
            filter: drop-shadow(0 0 9px rgba(59,130,246,0.35));
        }

        .pin {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 999px;
            background: #9ca3af;
            border: 2px solid #ffffff;
            z-index: 20;
            cursor: crosshair;
            transition: transform 0.12s ease, background-color 0.18s ease, border-color 0.18s ease;
        }

        .dark .pin { border-color: #111827; }

        .pin:hover {
            transform: scale(1.24);
            background: #facc15;
        }

        .pin-in { left: -7px; }
        .pin-out { right: -7px; }
        .pin-in-1 { top: 25%; transform: translateY(-50%); }
        .pin-in-2 { top: 75%; transform: translateY(-50%); }
        .pin-in-center { top: 50%; transform: translateY(-50%); }
        .pin-out-center { top: 50%; transform: translateY(-50%); }

        .state-high { background-color: #10b981 !important; }
        .state-low { background-color: #ef4444 !important; }
        .state-none { background-color: #9ca3af !important; }
        .dark .state-none { background-color: #6b7280 !important; }

        .comp-tag {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            min-width: 28px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            text-align: center;
            color: #111827;
            background: rgba(255,255,255,0.92);
            border: 1px solid rgba(156,163,175,0.5);
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            pointer-events: none;
        }

        .dark .comp-tag {
            color: #f3f4f6;
            background: rgba(31,41,55,0.92);
            border-color: rgba(75,85,99,0.7);
        }

        svg.wires {
            position: absolute;
            top: 0;
            left: 0;
            overflow: visible;
            pointer-events: none;
            z-index: 5;
        }

        .wire-group {
            pointer-events: auto;
            cursor: pointer;
        }

        .wire-hitbox {
            fill: none;
            stroke: transparent;
            stroke-width: 22;
        }

        .wire-path {
            fill: none;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke 0.12s ease, stroke-width 0.12s ease, filter 0.12s ease;
        }

        .wire-high { stroke: var(--wire-on); }
        .wire-low { stroke: var(--wire-off); }
        .wire-temp { stroke: #facc15; stroke-dasharray: 7 5; }
        .wire-dangling { stroke: #ef4444 !important; stroke-dasharray: 6 6; }

        .wire-junction {
            r: 5px;
            stroke: #ffffff;
            stroke-width: 2;
            pointer-events: none;
        }

        .dark .wire-junction { stroke: #111827; }
        .wire-junction-high { fill: var(--wire-on); }
        .wire-junction-low { fill: var(--wire-off); }
        .wire-junction-dangling { fill: #ef4444; }
        .wire-rs-top { stroke: #79cfff !important; }
        .wire-rs-bottom { stroke: #7af08d !important; }
        .wire-rs-input-r { stroke: #79cfff !important; opacity: .92; }
        .wire-rs-input-s { stroke: #7af08d !important; opacity: .92; }
        .wire-junction-rs-top { fill: #79cfff !important; stroke: #0a2233 !important; }
        .wire-junction-rs-bottom { fill: #7af08d !important; stroke: #0a2233 !important; }
        .wire-junction-rs-input-r { fill: #79cfff !important; stroke: #0a2233 !important; }
        .wire-junction-rs-input-s { fill: #7af08d !important; stroke: #0a2233 !important; }

        .wire-group:hover .wire-path {
            stroke-width: 6;
            filter: drop-shadow(0 0 6px rgba(245,158,11,0.35));
        }

        .wire-group.selected .wire-path {
            stroke: var(--wire-selected) !important;
            stroke-width: 6;
            filter: drop-shadow(0 0 8px rgba(245,158,11,0.45));
        }

        .wire-handle {
            fill: #f59e0b;
            stroke: #ffffff;
            stroke-width: 2;
            cursor: grab;
            display: none;
        }

        .dark .wire-handle { stroke: #111827; }
        .wire-group.selected .wire-handle { display: block; }

        .wire-handle:hover {
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(1.08);
            filter: drop-shadow(0 0 6px rgba(245,158,11,0.45));
        }

        .wire-handle:active { cursor: grabbing; }

        .learning-stage-button {
            border: 1px solid rgba(148, 163, 184, .65);
            background: rgba(248, 250, 252, .92);
            color: #334155;
            transition: .16s ease;
        }

        .dark .learning-stage-button {
            background: rgba(30, 41, 59, .92);
            color: #dbeafe;
            border-color: rgba(100, 116, 139, .7);
        }

        .learning-stage-button:hover {
            transform: translateY(-1px);
            border-color: #60a5fa;
        }

        .learning-stage-button.active {
            background: #2563eb;
            border-color: #2563eb;
            color: #fff;
            box-shadow: 0 6px 16px rgba(37, 99, 235, .24);
        }

        #canvas-container.didactic-focus-active .component,
        #canvas-container.didactic-focus-active .wire-group {
            opacity: .15;
            transition: opacity .18s ease, filter .18s ease, transform .18s ease;
        }

        #canvas-container.didactic-focus-active .component.signal-focus,
        #canvas-container.didactic-focus-active .component.propagation-current,
        #canvas-container.didactic-focus-active .wire-group.signal-focus,
        #canvas-container.didactic-focus-active .wire-group.propagation-current {
            opacity: 1;
        }

        #canvas-container.didactic-focus-active .wire-group.signal-focus .wire-path,
        #canvas-container.didactic-focus-active .wire-group.propagation-current .wire-path {
            stroke-width: 7 !important;
            filter: drop-shadow(0 0 8px rgba(245, 158, 11, .58));
        }

        #canvas-container.didactic-focus-active .component.signal-focus,
        #canvas-container.didactic-focus-active .component.propagation-current {
            filter: drop-shadow(0 0 9px rgba(37, 99, 235, .48));
        }

        #canvas-container.didactic-focus-active #fanout-overlay,
        #canvas-container.didactic-focus-active #didactic-bus-overlay,
        #canvas-container.didactic-focus-active #expression-overlay {
            opacity: .12;
        }

        .didactic-attention {
            animation: didacticAttentionPulse 1s ease-in-out infinite alternate;
            filter: drop-shadow(0 0 9px rgba(245, 158, 11, .9)) !important;
        }

        .pin.learning-missing-pin {
            outline: 4px solid rgba(245, 158, 11, .35);
            box-shadow: 0 0 0 6px rgba(245, 158, 11, .15), 0 0 12px rgba(245, 158, 11, .7);
            animation: didacticAttentionPulse 1s ease-in-out infinite alternate;
        }

        @keyframes didacticAttentionPulse {
            from { opacity: .68; }
            to { opacity: 1; }
        }

        #canvas-container.prediction-hidden .wire-path {
            stroke: var(--wire-off) !important;
            filter: none !important;
        }

        #canvas-container.prediction-hidden .led-bulb {
            opacity: .12;
            filter: grayscale(1) blur(2px);
            box-shadow: none !important;
        }

        .prediction-choice.selected {
            background: #2563eb !important;
            border-color: #2563eb !important;
            color: #fff !important;
        }

        .feedback-category {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 2px 8px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            background: rgba(37, 99, 235, .12);
            color: #1d4ed8;
        }

        .dark .feedback-category {
            background: rgba(96, 165, 250, .16);
            color: #93c5fd;
        }

        .toolbar-item {
            transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
        }

        .toolbar-item:hover { transform: translateY(-1px); }
        .toolbar-item:active { transform: translateY(0); }

        .status-chip {
            border: 1px solid rgba(107,114,128,0.25);
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(10px);
        }

        .dark .status-chip {
            background: rgba(31,41,55,0.82);
            border-color: rgba(75,85,99,0.50);
        }

        .tt-row { transition: background-color 0.18s ease, border-color 0.18s ease; }

        .tt-row.active {
            background-color: rgba(59,130,246,0.10) !important;
            border: 1px solid rgba(59,130,246,0.28);
        }

        .dark .tt-row.active {
            background-color: rgba(59,130,246,0.18) !important;
            border: 1px solid rgba(59,130,246,0.46);
        }

        .kbd {
            padding: 1px 6px;
            border-radius: 6px;
            border: 1px solid rgba(107,114,128,0.30);
            font-size: 11px;
            font-weight: 700;
            background: rgba(255,255,255,0.95);
        }

        .dark .kbd {
            background: rgba(31,41,55,0.95);
            border-color: rgba(75,85,99,0.55);
        }

        input[type="text"] { outline: none; }

        .panel-card {
            background: rgba(255,255,255,0.88);
            border: 1px solid rgba(209,213,219,0.8);
            backdrop-filter: blur(8px);
        }

        .dark .panel-card {
            background: rgba(31,41,55,0.88);
            border-color: rgba(75,85,99,0.75);
        }

        select {
            appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
            background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
            background-size: 5px 5px, 5px 5px;
            background-repeat: no-repeat;
        }

        ::-webkit-scrollbar { width: 7px; height: 7px; }
        ::-webkit-scrollbar-track { background: #e5e7eb; }
        .dark ::-webkit-scrollbar-track { background: #111827; }
        ::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 999px; }
        .dark ::-webkit-scrollbar-thumb { background: #4b5563; }
        ::-webkit-scrollbar-thumb:hover { background: #6b7280; }


        .help-button {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
            color: #2563eb;
            background: rgba(59,130,246,0.12);
            border: 1px solid rgba(59,130,246,0.28);
            transition: transform 0.15s ease, background-color 0.15s ease;
        }

        .help-button:hover {
            transform: translateY(-1px);
            background: rgba(59,130,246,0.20);
        }

        .lesson-item {
            width: 100%;
            text-align: left;
            border: 1px solid rgba(156,163,175,0.30);
            background: rgba(255,255,255,0.72);
            transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
        }

        .dark .lesson-item {
            background: rgba(31,41,55,0.72);
            border-color: rgba(75,85,99,0.65);
        }

        .lesson-item:hover { transform: translateY(-1px); }

        .lesson-item.active {
            border-color: rgba(59,130,246,0.85);
            background: rgba(59,130,246,0.12);
            box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
        }

        .learning-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            border: 1px solid rgba(107,114,128,0.25);
            background: rgba(255,255,255,0.82);
        }

        .dark .learning-badge {
            background: rgba(31,41,55,0.84);
            border-color: rgba(75,85,99,0.60);
        }

        .formula-box {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            overflow-wrap: anywhere;
            border: 1px solid rgba(59,130,246,0.28);
            background: rgba(59,130,246,0.08);
            line-height: 1.85;
        }

        .logic-overline {
            display: inline-block;
            padding-top: 0.08em;
            text-decoration-line: overline;
            text-decoration-thickness: 2px;
            text-decoration-skip-ink: none;
        }

        .feedback-success {
            border-color: rgba(16,185,129,0.45) !important;
            background: rgba(16,185,129,0.10) !important;
        }

        .feedback-error {
            border-color: rgba(239,68,68,0.45) !important;
            background: rgba(239,68,68,0.10) !important;
        }

        .feedback-info {
            border-color: rgba(59,130,246,0.38) !important;
            background: rgba(59,130,246,0.08) !important;
        }

        .diagnostic-ok { color: #059669; }
        .diagnostic-warning { color: #d97706; }
        .diagnostic-error { color: #dc2626; }

        @media (max-width: 1100px) {
            #learning-dialog { width: calc(100vw - 24px); height: calc(100vh - 24px); }
            #learning-layout { grid-template-columns: 230px minmax(0, 1fr); }
        }

        @media (max-width: 760px) {
            #learning-layout { grid-template-columns: 1fr; }
            #learning-nav { max-height: 180px; border-right: 0; border-bottom: 1px solid rgba(107,114,128,0.25); }
        }



        /* ============================================================
           V8.8.8 — exclusão robusta de componentes, fios conectados e SVGs órfãos
           ============================================================ */
        :root {
            --app-bg: #07111f;
            --app-panel: #0d1928;
            --app-panel-2: #101f31;
            --app-card: #122236;
            --app-border: #26384d;
            --app-border-strong: #35506d;
            --app-text: #e8eef7;
            --app-muted: #93a4b8;
            --app-blue: #2f8cff;
            --app-green: #24c875;
            --app-red: #ef4444;
            --workspace-dark: #081522;
            --wire-off: #627186;
            --wire-on: #3bd67f;
            --gate-fill: #16283c;
        }

        .dark body {
            background: var(--app-bg);
            color: var(--app-text);
        }

        #app-header {
            min-height: 64px;
            padding: 10px 16px;
            background: linear-gradient(180deg, #0b1726 0%, #081321 100%) !important;
            border-color: var(--app-border) !important;
            box-shadow: 0 8px 24px rgba(0,0,0,.24);
        }

        #app-header > div:first-child { min-width: 285px; }
        #app-header > div:last-child {
            flex-wrap: nowrap !important;
            overflow-x: auto;
            scrollbar-width: thin;
            padding-bottom: 2px;
        }

        #app-header button,
        #app-header select {
            border: 1px solid var(--app-border) !important;
            background-color: #111f30 !important;
            color: var(--app-text) !important;
            box-shadow: none !important;
            white-space: nowrap;
        }

        #app-header #btn-learning,
        #app-header #btn-load-example {
            background: #1267d6 !important;
            border-color: #277fe8 !important;
        }

        #app-header #btn-clear {
            background: #9f2630 !important;
            border-color: #c13a45 !important;
        }

        #editor-shell { background: var(--app-bg); }

        #components-sidebar {
            width: 238px !important;
            min-width: 238px;
            background: #0a1624 !important;
            border-color: var(--app-border) !important;
        }

        #analysis-sidebar {
            width: 360px !important;
            min-width: 330px;
            background: #0a1624 !important;
            border-color: var(--app-border) !important;
        }

        #components-sidebar > div,
        #analysis-sidebar > div {
            border-color: var(--app-border) !important;
        }

        #components-sidebar h2,
        #analysis-sidebar h2 { color: #61a8ff !important; }

        #components-sidebar > div:first-child .grid,
        #gates-palette,
        #functional-palette {
            grid-template-columns: 1fr !important;
        }

        #components-sidebar .toolbar-item {
            min-height: 52px;
            flex-direction: row !important;
            justify-content: flex-start !important;
            gap: 12px !important;
            padding: 8px 12px !important;
            background: #101e2e !important;
            border-color: #263a50 !important;
            border-radius: 10px !important;
        }

        #components-sidebar .toolbar-item:hover {
            background: #162a40 !important;
            border-color: #3e6b97 !important;
        }

        #components-sidebar .toolbar-item > div {
            flex: 0 0 52px;
            margin: 0 !important;
        }

        #components-sidebar .toolbar-item span {
            font-size: 11px !important;
            color: #d6e2ef !important;
            text-align: left !important;
        }

        #workspace {
            background-color: #081522 !important;
            border-left: 1px solid rgba(255,255,255,.02);
            border-right: 1px solid rgba(255,255,255,.02);
        }

        .dark #workspace.show-grid {
            background-image:
                radial-gradient(circle, rgba(96,124,153,.36) 1px, transparent 1.2px) !important;
            background-size: var(--grid-size) var(--grid-size) !important;
            background-position: var(--grid-x) var(--grid-y) !important;
        }

        #canvas-toolbar {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 38;
            display: flex;
            align-items: center;
            gap: 6px;
            max-width: calc(100% - 250px);
            padding: 6px;
            border: 1px solid var(--app-border-strong);
            border-radius: 12px;
            background: rgba(12, 27, 43, .94);
            box-shadow: 0 12px 30px rgba(0,0,0,.28);
            backdrop-filter: blur(12px);
            overflow-x: auto;
        }

        #canvas-toolbar button {
            min-height: 36px;
            padding: 7px 10px !important;
            border: 1px solid #2a4159 !important;
            border-radius: 8px !important;
            background: #12243a !important;
            color: #dce8f5 !important;
            font-size: 12px !important;
            font-weight: 700;
            white-space: nowrap;
        }

        #canvas-toolbar button:hover {
            background: #19324e !important;
            border-color: #4388cf !important;
        }

        #btn-auto-route.active {
            background: #12673e !important;
            border-color: #28b56e !important;
            color: #effff6 !important;
        }

        #route-style-select {
            min-height: 36px;
            max-width: 190px;
            padding: 7px 34px 7px 10px;
            border: 1px solid #2a4159;
            border-radius: 8px;
            background-color: #12243a;
            color: #dce8f5;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        #route-style-select:focus {
            outline: 2px solid #2f8cff;
            outline-offset: 2px;
        }

        #didactic-bus-overlay {
            pointer-events: none;
        }

        #didactic-bus-overlay .didactic-rail {
            fill: none;
            stroke-width: 4.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        #didactic-bus-overlay .didactic-rail-label {
            fill: #f2f6fb;
            stroke: #081522;
            stroke-width: 3px;
            paint-order: stroke fill;
            font-size: 18px;
            font-weight: 800;
            text-anchor: middle;
            dominant-baseline: auto;
        }

        #didactic-bus-overlay .didactic-rail-guide {
            fill: none;
            stroke: rgba(226, 235, 245, .18);
            stroke-width: 8;
            stroke-linecap: round;
        }

        #didactic-bus-overlay .didactic-junction {
            stroke: #081522;
            stroke-width: 2.5;
            filter: drop-shadow(0 0 3px rgba(59,214,127,.35));
        }

        #didactic-bus-overlay .didactic-mode-caption {
            fill: #9fb1c4;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        #rs-latch-overlay {
            pointer-events: none;
        }

        #rs-latch-overlay .rs-latch-box {
            fill: rgba(47, 140, 255, .04);
            stroke: rgba(47, 140, 255, .92);
            stroke-width: 3;
            rx: 18;
            ry: 18;
        }

        #rs-latch-overlay .rs-latch-caption {
            fill: #83bbff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        #workspace > .absolute.top-3.left-3 {
            top: 60px !important;
            left: 12px !important;
        }

        .status-chip {
            color: #cbd8e6 !important;
            background: rgba(15, 31, 48, .90) !important;
            border-color: #2c4259 !important;
        }

        .panel-card {
            background: #101f31 !important;
            border-color: #2a3e55 !important;
            box-shadow: none !important;
        }

        #analysis-sidebar {
            color: var(--app-text);
        }

        #analysis-sidebar input,
        #analysis-sidebar select {
            background: #0b1827 !important;
            border-color: #334a62 !important;
            color: #e7eef6 !important;
        }

        #truth-table-content table {
            background: #0d1b2a;
            border: 1px solid #293d53;
        }

        #truth-table-content thead {
            background: #13263a !important;
        }

        #truth-table-content tr,
        #truth-table-content td,
        #truth-table-content th {
            border-color: #25384c !important;
        }

        .component-box {
            background: #17283b !important;
            border-color: #465d76 !important;
            box-shadow: 0 8px 20px rgba(0,0,0,.24) !important;
        }

        .dark .gate-svg { color: #aab9ca; }
        .component:hover .gate-svg { color: #6db2ff; }
        .component.selected {
            outline-color: #2f8cff !important;
            box-shadow: 0 0 0 7px rgba(47,140,255,.14) !important;
        }

        .wire-path { stroke-width: 4; }
        .wire-bus {
            fill: none;
            stroke-width: 4.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            pointer-events: none;
        }

        #fanout-overlay { pointer-events: none; }
        #fanout-overlay .wire-junction {
            stroke-width: 2.5;
            filter: drop-shadow(0 0 3px rgba(59,214,127,.45));
        }

        .wire-junction {
            stroke: #081522;
            stroke-width: 2.5;
        }

        .comp-tag {
            top: -24px;
            background: #101e2e !important;
            color: #f0f6fc !important;
            border-color: #314a64 !important;
            box-shadow: none !important;
        }

        .pin { border-color: #081522 !important; }

        @media (max-width: 1180px) {
            #analysis-sidebar { width: 320px !important; min-width: 300px; }
            #components-sidebar { width: 210px !important; min-width: 210px; }
            #canvas-toolbar { max-width: calc(100% - 40px); }
            #app-header > div:first-child p { display: none; }
        }



        #sidebar-analysis-panel {
            max-height: 270px;
            overflow-y: auto;
        }

        #sidebar-analysis-panel .formula-box {
            background: #0b1a2a !important;
            border: 1px solid #315276 !important;
            color: #edf5ff !important;
            font-size: 14px;
        }

        #sidebar-circuit-diagnostics > div {
            padding: 6px 8px;
            border-radius: 8px;
            background: rgba(17, 34, 53, .75);
        }

    

        /* ============================================================
           V8.6 — tema claro coerente e interface responsiva
           ============================================================ */
        html:not(.dark) {
            --app-bg: #edf2f7;
            --app-panel: #ffffff;
            --app-panel-2: #f5f8fc;
            --app-card: #ffffff;
            --app-border: #cbd5e1;
            --app-border-strong: #9fb2c7;
            --app-text: #172033;
            --app-muted: #64748b;
            --workspace-light: #f4f7fb;
            --wire-off: #7b8798;
            --wire-on: #d18a00;
            --gate-fill: #ffffff;
        }

        html:not(.dark) body {
            background: #edf2f7 !important;
            color: #172033 !important;
        }

        html:not(.dark) #app-header {
            background: #ffffff !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 6px 18px rgba(15, 23, 42, .10) !important;
        }

        html:not(.dark) #app-header button,
        html:not(.dark) #app-header select {
            background-color: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #243247 !important;
        }

        html:not(.dark) #app-header button:hover,
        html:not(.dark) #app-header select:hover {
            background-color: #eef3f8 !important;
            border-color: #94a3b8 !important;
        }

        html:not(.dark) #app-header #btn-learning,
        html:not(.dark) #app-header #btn-load-example {
            background: #1267d6 !important;
            border-color: #277fe8 !important;
            color: #ffffff !important;
        }

        html:not(.dark) #app-header #btn-clear {
            background: #b4232e !important;
            border-color: #ca3e48 !important;
            color: #ffffff !important;
        }

        html:not(.dark) #editor-shell {
            background: #edf2f7 !important;
        }

        html:not(.dark) #components-sidebar,
        html:not(.dark) #analysis-sidebar {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #1f2937 !important;
        }

        html:not(.dark) #components-sidebar > div,
        html:not(.dark) #analysis-sidebar > div,
        html:not(.dark) #analysis-sidebar > section {
            border-color: #d7e0ea !important;
            background-color: #f8fafc !important;
        }

        html:not(.dark) #components-sidebar h2,
        html:not(.dark) #analysis-sidebar h2 {
            color: #2563a8 !important;
        }

        html:not(.dark) #components-sidebar .toolbar-item {
            background: #ffffff !important;
            border-color: #cbd5e1 !important;
        }

        html:not(.dark) #components-sidebar .toolbar-item:hover {
            background: #eef6ff !important;
            border-color: #60a5fa !important;
        }

        html:not(.dark) #components-sidebar .toolbar-item span {
            color: #334155 !important;
        }

        html:not(.dark) #workspace {
            background-color: #e9eef4 !important;
            border-color: #d5dee8 !important;
        }

        html:not(.dark) #workspace.show-grid {
            background-image: radial-gradient(circle, rgba(71, 85, 105, .25) 1px, transparent 1.2px) !important;
            background-size: var(--grid-size) var(--grid-size) !important;
            background-position: var(--grid-x) var(--grid-y) !important;
        }

        html:not(.dark) #canvas-toolbar {
            background: rgba(255, 255, 255, .96) !important;
            border-color: #b8c6d5 !important;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .14) !important;
        }

        html:not(.dark) #canvas-toolbar button,
        html:not(.dark) #route-style-select {
            background: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #243247 !important;
        }

        html:not(.dark) #canvas-toolbar button:hover,
        html:not(.dark) #route-style-select:hover {
            background: #eaf2fb !important;
            border-color: #7ca5cc !important;
        }

        html:not(.dark) #btn-auto-route.active {
            background: #0f7a46 !important;
            border-color: #15945a !important;
            color: #ffffff !important;
        }

        html:not(.dark) .status-chip {
            color: #334155 !important;
            background: rgba(255, 255, 255, .93) !important;
            border-color: #cbd5e1 !important;
        }

        html:not(.dark) .panel-card {
            background: #ffffff !important;
            border-color: #cbd5e1 !important;
        }

        html:not(.dark) #analysis-sidebar input,
        html:not(.dark) #analysis-sidebar select {
            background: #ffffff !important;
            border-color: #b8c6d5 !important;
            color: #172033 !important;
        }

        html:not(.dark) #sidebar-analysis-panel .formula-box {
            background: #eef5ff !important;
            border-color: #9db9d8 !important;
            color: #172033 !important;
        }

        html:not(.dark) #sidebar-circuit-diagnostics > div {
            background: #eef2f7 !important;
            color: #334155 !important;
        }

        html:not(.dark) #truth-table-content table {
            background: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #263548 !important;
        }

        html:not(.dark) #truth-table-content thead {
            background: #e6eef7 !important;
            color: #334155 !important;
        }

        html:not(.dark) #truth-table-content tr,
        html:not(.dark) #truth-table-content td,
        html:not(.dark) #truth-table-content th {
            border-color: #cbd5e1 !important;
        }

        html:not(.dark) .tt-row.active {
            background: rgba(37, 99, 235, .10) !important;
            border-color: rgba(37, 99, 235, .32) !important;
        }

        html:not(.dark) .component-box {
            background: #ffffff !important;
            border-color: #8fa3b8 !important;
            box-shadow: 0 7px 16px rgba(15, 23, 42, .14) !important;
        }

        .switch-value {
            color: #f8fafc;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
        }

        html:not(.dark) .switch-value {
            color: #0f172a !important;
            text-shadow: none !important;
        }

        html:not(.dark) .gate-svg {
            color: #52667a !important;
            filter: drop-shadow(0 5px 8px rgba(15, 23, 42, .10)) !important;
        }

        html:not(.dark) .component:hover .gate-svg {
            color: #2563a8 !important;
        }

        html:not(.dark) .comp-tag {
            background: #ffffff !important;
            color: #172033 !important;
            border-color: #aebdcb !important;
        }

        html:not(.dark) .pin,
        html:not(.dark) .wire-junction,
        html:not(.dark) #fanout-overlay .wire-junction,
        html:not(.dark) #didactic-bus-overlay .didactic-junction {
            border-color: #e9eef4 !important;
            stroke: #e9eef4 !important;
        }

        html:not(.dark) #didactic-bus-overlay .didactic-rail-label {
            fill: #172033 !important;
            stroke: #e9eef4 !important;
        }

        html:not(.dark) #didactic-bus-overlay .didactic-rail-guide {
            stroke: rgba(71, 85, 105, .16) !important;
        }

        html:not(.dark) .wire-high {
            stroke: #d18a00 !important;
            filter: drop-shadow(0 0 1px rgba(209,138,0,.45));
        }

        html:not(.dark) .wire-junction-high,
        html:not(.dark) #fanout-overlay .wire-junction.wire-junction-high,
        html:not(.dark) #didactic-bus-overlay .didactic-junction.wire-junction-high {
            fill: #d18a00 !important;
        }

        html:not(.dark) .state-high {
            background-color: #f4a300 !important;
            box-shadow: 0 0 0 1px rgba(161,98,7,.22), 0 0 10px rgba(244,163,0,.24);
        }

        html:not(.dark) .wire-rs-top { stroke: #2f8fff !important; }
        html:not(.dark) .wire-rs-bottom { stroke: #d18a00 !important; }
        html:not(.dark) .wire-rs-input-r { stroke: #2f8fff !important; }
        html:not(.dark) .wire-rs-input-s { stroke: #d18a00 !important; }
        html:not(.dark) .wire-junction-rs-top,
        html:not(.dark) .wire-junction-rs-input-r { fill: #2f8fff !important; stroke: #f4f7fb !important; }
        html:not(.dark) .wire-junction-rs-bottom,
        html:not(.dark) .wire-junction-rs-input-s { fill: #d18a00 !important; stroke: #f4f7fb !important; }

        .circuit-expression-fo {
            overflow: visible;
            pointer-events: none;
        }

        .circuit-expression-box {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, .45);
            background: rgba(255, 255, 255, .82);
            color: #1f2937;
            font-size: 12px;
            line-height: 1.2;
            font-weight: 700;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
        }

        html.dark .circuit-expression-box {
            background: rgba(8, 21, 34, .82);
            color: #e5eef9;
            border-color: rgba(125, 211, 252, .28);
        }

        .circuit-expression-box.output-expression {
            background: rgba(255, 255, 255, .92);
            font-size: 13px;
        }

        #mobile-panel-controls,
        #mobile-panel-backdrop {
            display: none;
        }

        @media (max-width: 1024px) {
            body {
                height: 100dvh !important;
                width: 100% !important;
                min-width: 0;
            }

            #app-header {
                min-height: auto;
                flex-direction: column;
                align-items: stretch !important;
                gap: 8px;
                padding: 8px 10px !important;
            }

            #app-header > div:first-child {
                width: 100%;
                min-width: 0 !important;
            }

            #app-header > div:last-child {
                width: 100%;
                justify-content: flex-start !important;
                overflow-x: auto;
                overscroll-behavior-x: contain;
                padding-bottom: 4px;
            }

            #editor-shell {
                position: relative;
                min-width: 0;
                min-height: 0;
            }

            #workspace {
                width: 100%;
                min-width: 0;
            }

            #components-sidebar,
            #analysis-sidebar {
                position: absolute !important;
                top: 0;
                bottom: 0;
                height: 100%;
                z-index: 70;
                visibility: hidden;
                transition: transform .22s ease, visibility .22s ease;
                box-shadow: 0 18px 42px rgba(0, 0, 0, .30) !important;
            }

            #components-sidebar {
                left: 0;
                width: min(320px, 88vw) !important;
                min-width: 0 !important;
                transform: translateX(-103%);
            }

            #analysis-sidebar {
                right: 0;
                left: auto;
                width: min(380px, 92vw) !important;
                min-width: 0 !important;
                transform: translateX(103%);
            }

            #components-sidebar.mobile-open,
            #analysis-sidebar.mobile-open {
                visibility: visible;
                transform: translateX(0);
            }

            #mobile-panel-backdrop {
                display: block;
                position: absolute;
                inset: 0;
                z-index: 60;
                background: rgba(2, 8, 18, .52);
                opacity: 0;
                pointer-events: none;
                transition: opacity .2s ease;
            }

            #mobile-panel-backdrop.active {
                opacity: 1;
                pointer-events: auto;
            }

            #mobile-panel-controls {
                position: absolute;
                top: 8px;
                left: 8px;
                right: 8px;
                z-index: 52;
                display: flex;
                justify-content: space-between;
                gap: 8px;
                pointer-events: none;
            }

            #mobile-panel-controls button {
                pointer-events: auto;
                min-height: 36px;
                padding: 7px 12px;
                border: 1px solid #35506d;
                border-radius: 9px;
                background: rgba(12, 27, 43, .94);
                color: #e8eef7;
                font-size: 12px;
                font-weight: 800;
                box-shadow: 0 6px 16px rgba(0, 0, 0, .20);
            }

            html:not(.dark) #mobile-panel-controls button {
                background: rgba(255, 255, 255, .96);
                border-color: #b7c6d5;
                color: #243247;
            }

            #canvas-toolbar {
                top: 52px;
                left: 8px;
                right: 8px;
                width: auto;
                max-width: none;
                transform: none;
            }

            #workspace > .absolute.top-3.left-3 {
                top: 104px !important;
                left: 8px !important;
                right: 8px;
            }
        }

        @media (max-width: 640px) {
            #app-header > div:first-child .w-9.h-9 {
                width: 32px !important;
                height: 32px !important;
                border-radius: 9px !important;
            }

            #app-header h1 {
                font-size: 15px !important;
                line-height: 1.2 !important;
            }

            #app-header > div:first-child p {
                display: none !important;
            }

            #app-header button,
            #app-header select {
                min-height: 34px;
                padding: 6px 10px !important;
                font-size: 12px !important;
            }

            #canvas-toolbar {
                gap: 4px;
                padding: 5px;
            }

            #canvas-toolbar button,
            #route-style-select {
                min-height: 34px;
                padding-top: 6px !important;
                padding-bottom: 6px !important;
                font-size: 11px !important;
            }

            #workspace > .absolute.top-3.left-3 > :nth-child(2),
            #workspace > .absolute.top-3.left-3 > :nth-child(3) {
                display: none;
            }

            .status-chip {
                padding: 6px 8px !important;
                font-size: 10px !important;
            }

            #learning-dialog {
                width: calc(100vw - 12px) !important;
                height: calc(100dvh - 12px) !important;
            }
        }

        /* ============================================================
           V9.1 — espaço de aprendizagem integrado ao palco
           ============================================================ */
        :root {
            --learning-panel-width: clamp(370px, 30vw, 410px);
            --learning-panel-height: min(58dvh, 560px);
            --app-header-height: 72px;
        }

        #editor-shell {
            transition: margin-right .22s ease, margin-bottom .22s ease;
        }

        body.learning-session-active.learning-panel-open #editor-shell {
            margin-right: var(--learning-panel-width);
        }

        body.learning-session-active #app-header {
            min-height: 48px;
            padding: 6px 10px;
        }

        body.learning-session-active #app-header > div:first-child {
            gap: 8px;
        }

        body.learning-session-active #app-header > div:first-child .w-9.h-9 {
            width: 30px !important;
            height: 30px !important;
            border-radius: 8px !important;
        }

        body.learning-session-active #app-header h1 {
            font-size: 16px !important;
            line-height: 1.1;
        }

        body.learning-session-active #app-header > div:first-child p,
        body.learning-session-active #app-header > div:last-child {
            display: none !important;
        }

        body.learning-session-active #components-sidebar {
            width: 184px !important;
            min-width: 184px !important;
        }

        body.learning-session-active #components-sidebar > div {
            padding: 10px !important;
        }

        body.learning-session-active #components-sidebar .toolbar-item {
            min-height: 58px;
            padding: 7px !important;
            gap: 6px !important;
        }

        body.learning-session-active #components-sidebar h2,
        body.learning-session-active #components-sidebar .toolbar-item span {
            font-size: 9px !important;
        }

        body.learning-session-active #analysis-sidebar {
            display: none;
            width: 292px !important;
            min-width: 292px !important;
        }

        body.learning-session-active.learning-analysis-visible #analysis-sidebar {
            display: flex;
        }

        body.learning-session-active #analysis-sidebar > div:first-child {
            display: none;
        }

        body.learning-session-active #analysis-sidebar h2 {
            font-size: 11px !important;
        }

        body.learning-session-active #sidebar-analysis-panel,
        body.learning-session-active #truth-table-content {
            padding: 10px !important;
        }

        body.learning-session-active #learning-modal {
            inset: var(--app-header-height) 0 0 auto;
            width: var(--learning-panel-width);
            height: calc(100dvh - var(--app-header-height));
            padding: 0;
            background: transparent;
            backdrop-filter: none;
            align-items: stretch;
            justify-content: stretch;
            z-index: 65;
        }

        body.learning-session-active #learning-dialog {
            width: 100% !important;
            height: 100% !important;
            border-radius: 0;
            border-top: 0;
            border-right: 0;
        }

        body.learning-session-active #learning-dialog > header {
            padding: 8px 10px;
            gap: 8px;
        }

        body.learning-session-active #learning-dialog > header h2 {
            font-size: 15px;
            white-space: nowrap;
        }

        body.learning-session-active #learning-dialog > header button {
            min-height: 30px;
            padding: 5px 8px !important;
            font-size: 10px !important;
            border-radius: 7px;
        }

        body.learning-session-active #learning-dialog > header #btn-close-learning {
            width: 30px;
            height: 30px;
            padding: 0 !important;
            font-size: 21px !important;
        }

        body.learning-session-active #btn-toggle-learning-analysis.active {
            background: #2563eb !important;
            color: #fff !important;
        }

        body.learning-session-active #learning-dialog > header p,
        body.learning-session-active #learning-dialog > header .learning-badge {
            display: none;
        }

        body.learning-session-active #playlist-link {
            display: none;
        }

        body.learning-session-active #learning-layout {
            display: flex;
            flex-direction: column;
            grid-template-columns: 1fr !important;
        }

        body.learning-session-active #learning-nav {
            display: none;
            max-height: 150px;
            flex: 0 0 auto;
            border-right: 0;
            border-bottom: 1px solid rgba(107, 114, 128, .25);
        }

        body.learning-session-active.learning-nav-open #learning-nav {
            display: block;
        }

        body.learning-session-active #lesson-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px;
        }

        body.learning-session-active .lesson-item {
            padding: 8px;
        }

        body.learning-session-active .lesson-item .block.text-sm {
            font-size: 11px;
            line-height: 1.25;
        }

        body.learning-session-active #learning-layout > section {
            padding: 10px;
            font-size: 12px;
        }

        body.learning-session-active #lesson-title {
            font-size: 20px;
            line-height: 1.15;
        }

        body.learning-session-active #lesson-objective {
            margin-top: 5px;
            font-size: 12px;
            line-height: 1.45;
        }

        body.learning-session-active #learning-layout .panel-card {
            padding: 10px !important;
            border-radius: 10px;
        }

        body.learning-session-active #learning-layout article.mt-4,
        body.learning-session-active #learning-layout .grid.mt-4,
        body.learning-session-active #learning-layout .grid.mt-5 {
            margin-top: 10px !important;
        }

        body.learning-session-active #learning-layout h4 {
            font-size: 13px;
        }

        body.learning-session-active #learning-layout button,
        body.learning-session-active #learning-layout a {
            min-height: 28px;
            padding: 5px 8px !important;
            font-size: 10px !important;
            border-radius: 7px;
        }

        body.learning-session-active #learning-layout select {
            min-height: 30px;
            padding-top: 5px !important;
            padding-bottom: 5px !important;
            font-size: 10px;
        }

        body.learning-session-active #learning-reference-grid {
            display: none;
        }

        body.learning-session-active.learning-reference-open #learning-reference-grid {
            display: grid;
        }

        body.learning-session-active #learning-layout .grid.lg\:grid-cols-2,
        body.learning-session-active #learning-layout .grid.xl\:grid-cols-3 {
            grid-template-columns: 1fr;
        }

        body.learning-session-active #canvas-toolbar button {
            min-height: 30px;
            min-width: 32px;
            padding: 5px 7px !important;
            font-size: 0 !important;
        }

        body.learning-session-active #canvas-toolbar button::after {
            content: attr(data-learning-icon);
            font-size: 17px;
            line-height: 1;
        }

        body.learning-session-active #btn-align-left,
        body.learning-session-active #btn-align-top,
        body.learning-session-active #btn-distribute-h,
        body.learning-session-active #btn-distribute-v,
        body.learning-session-active #route-style-select,
        body.learning-session-active #btn-auto-route {
            display: none;
        }

        body.learning-session-active[data-learning-stage="observe"] #btn-undo,
        body.learning-session-active[data-learning-stage="observe"] #btn-redo {
            display: none;
        }

        #learning-stage-bar {
            position: absolute;
            left: 50%;
            bottom: 16px;
            z-index: 46;
            width: min(720px, calc(100% - 28px));
            transform: translateX(-50%);
            border: 1px solid rgba(52, 211, 153, .58);
            border-radius: 16px;
            background: rgba(7, 17, 31, .94);
            color: #e8eef7;
            box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
            backdrop-filter: blur(12px);
            padding: 10px 12px;
            pointer-events: auto;
        }

        html:not(.dark) #learning-stage-bar {
            background: rgba(255, 255, 255, .96);
            color: #172033;
            border-color: rgba(16, 185, 129, .52);
        }

        #learning-stage-bar .learning-stage-kicker {
            color: #34d399;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .09em;
            text-transform: uppercase;
        }

        html:not(.dark) #learning-stage-bar .learning-stage-kicker {
            color: #047857;
        }

        #learning-stage-bar button {
            min-height: 34px;
            border-radius: 9px;
            padding: 7px 11px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        body.learning-session-active.learning-panel-open #learning-stage-bar {
            padding: 7px 10px;
            border-radius: 12px;
        }

        body.learning-session-active.learning-panel-open #learning-stage-bar-title {
            font-size: 12px;
        }

        body.learning-session-active.learning-panel-open #learning-stage-bar-detail {
            font-size: 10px;
        }

        body.learning-session-active.learning-panel-open #btn-open-learning-panel,
        body.learning-session-active.learning-panel-open #btn-exit-learning-bar {
            display: none;
        }

        body.learning-session-active #didactic-canvas-controls {
            bottom: 88px;
        }

        #btn-learning-panel-edge {
            position: fixed;
            top: calc(var(--app-header-height) + (100dvh - var(--app-header-height)) / 2);
            right: 0;
            z-index: 68;
            width: 36px;
            height: 64px;
            transform: translateY(-50%);
            border: 1px solid rgba(52, 211, 153, .72);
            border-right: 0;
            border-radius: 12px 0 0 12px;
            background: rgba(5, 150, 105, .96);
            color: #fff;
            box-shadow: -7px 8px 22px rgba(0, 0, 0, .24);
            font-size: 26px;
            font-weight: 900;
            line-height: 1;
            transition: right .22s ease, background-color .16s ease, transform .16s ease;
        }

        #btn-learning-panel-edge:hover {
            background: #10b981;
        }

        body.learning-session-active.learning-panel-open #btn-learning-panel-edge {
            right: calc(var(--learning-panel-width) - 18px);
        }

        @media (min-width: 1025px) {
            body.learning-session-active.learning-panel-open #canvas-toolbar {
                left: 50%;
                right: auto;
                width: max-content;
                max-width: calc(100% - 24px);
                transform: translateX(-50%);
                flex-wrap: nowrap;
                justify-content: center;
                overflow-x: visible;
            }

        }

        @media (max-width: 1024px) {
            body.learning-session-active.learning-panel-open #editor-shell {
                margin-right: 0;
                margin-bottom: var(--learning-panel-height);
            }

            body.learning-session-active #learning-modal {
                inset: auto 0 0 0;
                width: 100vw;
                height: var(--learning-panel-height);
            }

            body.learning-session-active #learning-dialog {
                border-left: 0;
                border-bottom: 0;
            }

            body.learning-session-active #learning-nav {
                max-height: 135px;
            }

            body.learning-session-active #lesson-list {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            #btn-learning-panel-edge {
                top: auto;
                right: 50%;
                bottom: 0;
                width: 64px;
                height: 36px;
                transform: translateX(50%);
                border-right: 1px solid rgba(52, 211, 153, .72);
                border-bottom: 0;
                border-radius: 12px 12px 0 0;
                box-shadow: 0 -7px 22px rgba(0, 0, 0, .22);
                font-size: 20px;
                transition: bottom .22s ease, background-color .16s ease;
            }

            body.learning-session-active.learning-panel-open #btn-learning-panel-edge {
                right: 50%;
                bottom: calc(var(--learning-panel-height) - 18px);
            }
        }

        @media (max-width: 640px) {
            :root { --learning-panel-height: 62dvh; }

            body.learning-session-active #lesson-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            #learning-stage-bar {
                bottom: 8px;
                padding: 8px;
            }

            #learning-stage-bar .learning-stage-detail {
                display: none;
            }
        }

        @media (min-width: 1700px) and (min-height: 850px) {
            :root {
                --learning-panel-width: 500px;
            }

            body.learning-session-active #components-sidebar {
                width: 200px !important;
                min-width: 200px !important;
            }

            body.learning-session-active #analysis-sidebar {
                width: 318px !important;
                min-width: 318px !important;
            }

            body.learning-session-active #learning-layout > section {
                padding: 14px;
                font-size: 13px;
            }

            body.learning-session-active #lesson-title {
                font-size: 22px;
            }

            body.learning-session-active #lesson-objective {
                font-size: 13px;
            }

            body.learning-session-active #learning-layout h4 {
                font-size: 14px;
            }

            body.learning-session-active #learning-layout button,
            body.learning-session-active #learning-layout a,
            body.learning-session-active #learning-layout select {
                font-size: 11px !important;
            }

            body.learning-session-active #learning-layout .grid.lg\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            body.learning-session-active #learning-layout .grid.xl\:grid-cols-3 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            body.learning-session-active #learning-layout .grid.xl\:grid-cols-3 > :last-child {
                grid-column: 1 / -1;
            }

            body.learning-session-active #learning-stage-bar {
                width: min(760px, calc(100% - 36px));
            }
        }

        /* ============================================================
           V9.1 — controles compactos dos painéis e do palco
           ============================================================ */
        #canvas-toolbar button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            min-width: 34px;
            min-height: 34px;
            padding: 5px !important;
            font-size: 0 !important;
        }

        #canvas-toolbar button::after {
            content: attr(data-learning-icon);
            font-size: 17px;
            line-height: 1;
        }

        #route-style-select {
            width: 124px;
            max-width: 124px;
            min-height: 34px;
            padding: 5px 24px 5px 8px !important;
            font-size: 11px !important;
        }

        #canvas-status-bar {
            display: flex;
            align-items: center;
            flex-wrap: nowrap !important;
            gap: 1px !important;
            max-width: calc(100% - 20px);
            padding: 3px;
            border: 1px solid #273e56;
            border-radius: 10px;
            background: rgba(10, 22, 36, .94);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
            backdrop-filter: blur(12px);
        }

        #canvas-status-bar .status-chip {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            min-height: 26px;
            padding: 3px 4px !important;
            border: 0 !important;
            border-radius: 8px !important;
            background: transparent !important;
            box-shadow: none !important;
            font-size: 9px !important;
            line-height: 1;
            white-space: nowrap;
        }

        #canvas-status-bar .status-icon {
            color: #60a5fa;
            font-size: 11px;
            font-weight: 900;
        }

        html:not(.dark) #canvas-status-bar {
            border-color: #b8c6d5;
            background: rgba(255, 255, 255, .96);
            box-shadow: 0 8px 20px rgba(15, 23, 42, .13);
        }

        @media (min-width: 1025px) {
            #workspace > #canvas-status-bar {
                top: 10px !important;
                left: 10px !important;
                right: auto;
            }

            #canvas-toolbar,
            body.learning-session-active.learning-panel-open #canvas-toolbar {
                left: auto;
                right: 10px;
                width: max-content;
                max-width: calc(100% - 20px);
                transform: none;
            }

            body.learning-session-active #canvas-status-bar .status-chip:nth-child(2),
            body.learning-session-active #canvas-status-bar .status-chip:nth-child(3) {
                display: none;
            }
        }

        @media (min-width: 1025px) and (max-width: 1280px) {
            #canvas-status-bar .status-chip:nth-child(2),
            #canvas-status-bar .status-chip:nth-child(3) {
                display: none;
            }
        }

        @media (max-width: 1024px) {
            #workspace > #canvas-status-bar {
                right: auto !important;
                width: max-content;
                max-width: calc(100% - 16px);
            }
        }

        @media (min-width: 1025px) and (max-width: 1500px) {
            #app-header {
                gap: 10px;
                padding: 8px 10px !important;
            }

            #app-header > div:first-child {
                flex: 0 0 310px;
                min-width: 310px;
            }

            #app-header > div:first-child p {
                display: none;
            }

            #app-header h1 {
                font-size: 18px !important;
            }

            #app-header > div:last-child {
                flex: 1 1 auto;
                min-width: 0;
                gap: 6px;
                justify-content: flex-end !important;
            }

            #app-header button,
            #app-header select {
                min-height: 36px;
                padding: 7px 10px !important;
                font-size: 12px !important;
            }

            #example-select {
                width: 170px;
                max-width: 170px;
            }
        }

        @media (min-width: 1025px) and (max-width: 1180px) {
            #btn-theme,
            #btn-export,
            #btn-import {
                display: none !important;
            }
        }

        #btn-components-sidebar-level,
        #btn-analysis-sidebar-edge {
            position: absolute;
            top: 42%;
            z-index: 58;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 60px;
            transform: translateY(-50%);
            color: #fff;
            font-size: 24px;
            font-weight: 900;
            line-height: 1;
            box-shadow: 0 9px 22px rgba(15, 23, 42, .24);
            transition: left .22s ease, right .22s ease, background-color .16s ease, transform .16s ease;
        }

        #btn-components-sidebar-level {
            left: 220px;
            border: 1px solid rgba(96, 165, 250, .78);
            border-left: 0;
            border-radius: 0 12px 12px 0;
            background: rgba(37, 99, 235, .96);
        }

        #btn-components-sidebar-level:hover { background: #3b82f6; }

        #btn-analysis-sidebar-edge {
            right: 342px;
            border: 1px solid rgba(251, 146, 60, .82);
            border-right: 0;
            border-radius: 12px 0 0 12px;
            background: rgba(234, 88, 12, .96);
        }

        #btn-analysis-sidebar-edge:hover { background: #f97316; }

        #analysis-sidebar .sidebar-section-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            padding: 0 !important;
            border: 1px solid rgba(96, 165, 250, .42);
            border-radius: 8px;
            background: rgba(37, 99, 235, .10);
            color: #60a5fa;
            font-size: 16px;
            font-weight: 900;
            line-height: 1;
            transition: background-color .16s ease, border-color .16s ease;
        }

        #analysis-sidebar .sidebar-section-toggle:hover {
            border-color: rgba(96, 165, 250, .78);
            background: rgba(37, 99, 235, .20);
        }

        html:not(.dark) #analysis-sidebar .sidebar-section-toggle {
            border-color: #bfdbfe;
            background: #eff6ff;
            color: #2563eb;
        }

        #analysis-sidebar [data-section-collapsed="true"] {
            padding-top: 10px !important;
            padding-bottom: 10px !important;
        }

        body.learning-session-active #analysis-sidebar .sidebar-section-toggle {
            width: 24px;
            height: 24px;
            flex-basis: 24px;
            font-size: 14px;
        }

        @media (min-width: 1025px) {
            body:not(.learning-session-active).analysis-sidebar-user-hidden #analysis-sidebar {
                display: none !important;
            }

            body:not(.learning-session-active).analysis-sidebar-user-hidden #btn-analysis-sidebar-edge,
            body.learning-session-active:not(.learning-analysis-visible) #btn-analysis-sidebar-edge {
                right: 0;
            }

            body.learning-session-active #btn-components-sidebar-level { left: 166px; }
            body.learning-session-active #btn-analysis-sidebar-edge { right: 274px; }

            body[data-components-sidebar="compact"] #components-sidebar {
                display: flex !important;
                width: 72px !important;
                min-width: 72px !important;
            }

            body[data-components-sidebar="compact"] #components-sidebar > div {
                padding: 6px !important;
            }

            body[data-components-sidebar="compact"] #components-sidebar > div:nth-child(n+4) {
                display: none !important;
            }

            body[data-components-sidebar="compact"] #components-sidebar > div > .flex.items-center.justify-between {
                display: none !important;
            }

            body[data-components-sidebar="compact"] #components-sidebar > div:first-child .grid,
            body[data-components-sidebar="compact"] #gates-palette,
            body[data-components-sidebar="compact"] #functional-palette {
                grid-template-columns: 1fr !important;
                gap: 6px !important;
            }

            body[data-components-sidebar="compact"] #components-sidebar .toolbar-item {
                width: 58px;
                min-height: 50px;
                padding: 4px !important;
                gap: 0 !important;
                justify-content: center !important;
            }

            body[data-components-sidebar="compact"] #components-sidebar .toolbar-item > div {
                flex: 0 0 46px;
                width: 46px !important;
                height: 38px !important;
                margin: 0 !important;
            }

            body[data-components-sidebar="compact"] #components-sidebar .toolbar-item span {
                display: none !important;
            }

            body[data-components-sidebar="compact"] #btn-components-sidebar-level { left: 54px; }

            body[data-components-sidebar="hidden"] #components-sidebar {
                display: none !important;
            }

            body[data-components-sidebar="hidden"] #btn-components-sidebar-level { left: 0; }
        }

        @media (min-width: 1025px) and (max-width: 1180px) {
            #btn-components-sidebar-level { left: 192px; }
            #btn-analysis-sidebar-edge { right: 302px; }
            body.learning-session-active #btn-components-sidebar-level { left: 166px; }
            body.learning-session-active #btn-analysis-sidebar-edge { right: 274px; }
            body[data-components-sidebar="compact"] #btn-components-sidebar-level { left: 54px; }
            body[data-components-sidebar="hidden"] #btn-components-sidebar-level { left: 0; }
        }

        @media (min-width: 1700px) and (min-height: 850px) {
            body.learning-session-active #btn-components-sidebar-level { left: 182px; }
            body.learning-session-active #btn-analysis-sidebar-edge { right: 300px; }
            body[data-components-sidebar="compact"] #btn-components-sidebar-level { left: 54px; }
            body[data-components-sidebar="hidden"] #btn-components-sidebar-level { left: 0; }
            body.learning-session-active:not(.learning-analysis-visible) #btn-analysis-sidebar-edge { right: 0; }
        }

        @media (max-width: 1024px) {
            #btn-components-sidebar-level,
            #btn-analysis-sidebar-edge {
                display: none !important;
            }
        }