/* ══════════════════════════════════════════════════════
   PANEL – TOGGLE BUTTON
   ══════════════════════════════════════════════════════ */
                        .blockcoder-toggle-btn {
                            display: inline-flex;
                            align-items: center;
                            gap: 0.5rem;
                            padding: 7px 16px;
                            border-radius: 999px;
                            background: transparent;
                            border: 1px solid #a78bfa;
                            color: #a78bfa;
                            font-size: 0.82rem;
                            font-weight: 700;
                            font-family: inherit;
                            cursor: pointer;
                            transition: var(--transition);
                        }

                        .blockcoder-toggle-btn:hover,
                        .blockcoder-toggle-btn.active {
                            background: #a78bfa;
                            color: #0f172a;
                        }

                        /* ══════════════════════════════════════════════════════
   PANEL
   ══════════════════════════════════════════════════════ */
                        .bc-panel {
                            width: 100%;
                            background: var(--panel-bg);
                            border: 1px solid var(--border-color);
                            border-radius: var(--radius);
                            overflow: hidden;
                            margin-bottom: 1.25rem;
                            box-shadow: var(--shadow-sm);
                            display: none;
                            flex-direction: column;
                        }

                        .bc-panel.open {
                            display: flex;
                        }

                        /* ── Header ── */
                        .bc-header {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 10px 16px;
                            background: var(--box-bg);
                            border-bottom: 1px solid var(--border-color);
                            flex-wrap: wrap;
                            gap: 8px;
                            flex-shrink: 0;
                        }

                        .bc-title {
                            font-size: 0.85rem;
                            font-weight: 800;
                            color: #a78bfa;
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            white-space: nowrap;
                        }

                        .bc-header-controls {
                            display: flex;
                            align-items: center;
                            gap: 7px;
                            flex-wrap: wrap;
                        }

                        .bc-preset-btn {
                            padding: 5px 12px;
                            border-radius: 999px;
                            font-size: 0.74rem;
                            font-weight: 700;
                            font-family: inherit;
                            cursor: pointer;
                            border: 1px solid var(--border-color);
                            background: var(--box-bg);
                            color: var(--clr-muted);
                            transition: var(--transition);
                            white-space: nowrap;
                        }

                        .bc-preset-btn:hover {
                            border-color: #a78bfa;
                            color: #a78bfa;
                        }

                        .bc-preset-btn.active {
                            background: #a78bfa;
                            border-color: #a78bfa;
                            color: #0f172a;
                        }

                        .bc-speed-label {
                            font-size: 0.72rem;
                            color: var(--clr-muted);
                            font-weight: 600;
                            white-space: nowrap;
                        }

                        .bc-speed-select {
                            padding: 4px 8px;
                            border-radius: 8px;
                            border: 1px solid var(--border-color);
                            background: var(--box-bg);
                            color: var(--clr-text);
                            font-size: 0.74rem;
                            font-family: inherit;
                            cursor: pointer;
                            outline: none;
                        }

                        .bc-run-btn {
                            padding: 6px 16px;
                            border-radius: 999px;
                            font-size: 0.8rem;
                            font-weight: 700;
                            font-family: inherit;
                            cursor: pointer;
                            border: none;
                            background: linear-gradient(135deg, #a78bfa, #7c3aed);
                            color: #fff;
                            display: flex;
                            align-items: center;
                            gap: 5px;
                            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
                            box-shadow: 0 3px 10px rgba(167, 139, 250, 0.3);
                            white-space: nowrap;
                        }

                        .bc-run-btn:hover:not(:disabled) {
                            transform: translateY(-2px) scale(1.04);
                            box-shadow: 0 6px 18px rgba(167, 139, 250, 0.45);
                        }

                        .bc-run-btn:disabled {
                            opacity: 0.38;
                            cursor: not-allowed;
                            transform: none;
                            box-shadow: none;
                        }

                        .bc-stop-btn {
                            padding: 6px 14px;
                            border-radius: 999px;
                            font-size: 0.8rem;
                            font-weight: 700;
                            font-family: inherit;
                            cursor: pointer;
                            border: 1px solid var(--danger);
                            background: transparent;
                            color: var(--danger-text);
                            display: none;
                            align-items: center;
                            gap: 5px;
                            transition: var(--transition);
                            white-space: nowrap;
                        }

                        .bc-stop-btn.visible {
                            display: flex;
                        }

                        .bc-stop-btn:hover {
                            background: rgba(248, 113, 113, 0.1);
                        }

                        .bc-clear-btn {
                            padding: 6px 12px;
                            border-radius: 999px;
                            font-size: 0.8rem;
                            font-weight: 700;
                            font-family: inherit;
                            cursor: pointer;
                            border: 1px solid var(--border-color);
                            background: transparent;
                            color: var(--clr-muted);
                            transition: var(--transition);
                            white-space: nowrap;
                        }

                        .bc-clear-btn:hover {
                            border-color: var(--danger);
                            color: var(--danger-text);
                        }

                        /* ── Blockly Workspace ── */
                        .bc-blockly-wrap {
                            position: relative;
                            width: 100%;
                            height: 480px;
                            flex-shrink: 0;
                        }

                        #bcBlocklyDiv {
                            position: absolute;
                            inset: 0;
                        }

                        /* ── Pseudocode-Vorschau ── */
                        .bc-code-bar {
                            display: flex;
                            align-items: stretch;
                            border-top: 1px solid var(--border-color);
                            flex-shrink: 0;
                        }

                        .bc-code-label {
                            flex-shrink: 0;
                            padding: 7px 12px;
                            font-size: 0.65rem;
                            font-weight: 700;
                            text-transform: uppercase;
                            letter-spacing: 0.07em;
                            color: var(--clr-muted);
                            border-right: 1px solid var(--border-color);
                            background: var(--box-bg);
                            display: flex;
                            align-items: center;
                        }

                        #bcGeneratedCode {
                            flex: 1;
                            padding: 7px 12px;
                            font-size: 0.71rem;
                            font-family: 'Courier New', monospace;
                            color: var(--clr-muted);
                            background: var(--box-bg);
                            white-space: pre;
                            overflow-x: auto;
                            max-height: 80px;
                            overflow-y: auto;
                            line-height: 1.6;
                            margin: 0;
                        }

                        /* ── Variablen-Watch ── */
                        .bc-varwatch {
                            display: flex;
                            gap: 6px;
                            flex-wrap: wrap;
                            padding: 6px 14px;
                            background: var(--box-bg);
                            border-top: 1px solid var(--border-color);
                            font-size: 0.72rem;
                            font-family: 'Courier New', monospace;
                            min-height: 34px;
                            align-items: center;
                            flex-shrink: 0;
                        }

                        .bc-varwatch-label {
                            color: var(--clr-muted);
                            font-weight: 600;
                            font-family: inherit;
                            font-size: 0.67rem;
                            text-transform: uppercase;
                            letter-spacing: 0.06em;
                            white-space: nowrap;
                        }

                        .bc-var-pill {
                            padding: 2px 10px;
                            border-radius: 999px;
                            background: rgba(167, 139, 250, 0.14);
                            border: 1px solid rgba(167, 139, 250, 0.32);
                            color: #a78bfa;
                            font-weight: 700;
                            transition: background 0.2s;
                        }

                        .bc-var-pill.changed {
                            background: rgba(167, 139, 250, 0.38);
                        }

                        /* ── Status ── */
                        .bc-status {
                            padding: 8px 14px;
                            font-size: 0.78rem;
                            color: var(--clr-muted);
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            min-height: 36px;
                            background: var(--box-bg);
                            border-top: 1px solid var(--border-color);
                            flex-wrap: wrap;
                            flex-shrink: 0;
                        }

                        .bc-status-dot {
                            width: 7px;
                            height: 7px;
                            border-radius: 50%;
                            background: var(--clr-muted);
                            flex-shrink: 0;
                            transition: background 0.3s, box-shadow 0.3s;
                        }

                        .bc-status-dot.running {
                            background: #a78bfa;
                            box-shadow: 0 0 6px rgba(167, 139, 250, 0.7);
                            animation: bcPulse 0.9s ease-in-out infinite alternate;
                        }

                        .bc-status-dot.done {
                            background: var(--clr-accent);
                            box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
                        }

                        .bc-status-dot.error {
                            background: var(--danger);
                            box-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
                        }

                        @keyframes bcPulse {
                            from {
                                box-shadow: 0 0 4px rgba(167, 139, 250, 0.4);
                            }

                            to {
                                box-shadow: 0 0 14px rgba(167, 139, 250, 1);
                            }
                        }

                        /* ── Karten-Highlights ── */
                        .card-wrapper.bc-hl-cmp .card-face {
                            border-color: #ffab19 !important;
                            box-shadow: 0 0 0 2px #ffab19,
                                0 0 18px rgba(255, 171, 25, 0.5) !important;
                        }

                        .card-wrapper.bc-hl-act .card-face {
                            border-color: #a78bfa !important;
                            box-shadow: 0 0 0 2px #a78bfa,
                                0 0 18px rgba(167, 139, 250, 0.5) !important;
                        }

                        .card-wrapper.bc-hl-min .card-face {
                            border-color: #5cb1d6 !important;
                            box-shadow: 0 0 0 2px #5cb1d6,
                                0 0 14px rgba(92, 177, 214, 0.45) !important;
                        }