/* ==========================================================================
   BENTO IDE
   Theme: Matches tesaiot.dev admin UI
   Primary: #7239ea | TESA Blue: #3c54a4 | Success: #50cd89
   ========================================================================== */

:root {
    /* BENTO Brand Colors */
    --tesa-primary: #7239ea;
    --tesa-primary-hover: #5f2bc7;
    --tesa-primary-light: #e3d6ff;
    --tesa-primary-subtle: #f5f0ff;
    --tesa-blue: #3c54a4;
    --tesa-red: #e9292a;
    --tesa-navy: #231f20;

    /* Semantic Colors */
    --color-success: #50cd89;
    --color-success-hover: #43b578;
    --color-info: #009ef7;
    --color-info-hover: #0085d1;
    --color-warning: #ffc700;
    --color-danger: #f1416c;
    --color-danger-hover: #d9365d;

    /* Surface & Background */
    --bg-body: #f5f8fa;
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --bg-muted: #f1f3f5;
    --bg-code: #1e1e2d;
    --bg-terminal: #1a1a2e;

    /* Text */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-inverse: #f9fafb;
    --text-code: #d4d4d4;

    /* Borders */
    --border-color: #e5e7eb;
    --border-hover: #d1d5db;
    --border-focus: var(--tesa-primary);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

    /* Layout */
    --header-height: 54px;
    --toolbar-height: 40px;
    --statusbar-height: 26px;
    --border-radius: 8px;
    --border-radius-sm: 6px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

    /* Transitions */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base Reset
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-body);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Header
   ========================================================================== */

#header {
    height: var(--header-height);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tesa-navy);
    letter-spacing: -0.3px;
}

.logo-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
}

.logo-circles {
    display: inline-block;
    font-size: 13px;
    position: relative;
    top: -4px;
    letter-spacing: -4px;
    margin: 0 10px 0 0;
    color: #FF6B35;
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--bg-muted);
    border-radius: var(--border-radius-sm);
    padding: 2px;
    gap: 2px;
}

.view-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition);
}

.view-btn:hover {
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--bg-surface);
    color: var(--tesa-primary);
    box-shadow: var(--shadow-sm);
}

/* Connection Badge */
.connection-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--bg-muted);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.connection-badge.connected {
    background: #ecfdf5;
    color: #065f46;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    transition: all var(--transition);
}

.status-dot.connected {
    background: var(--color-success);
    box-shadow: 0 0 0 3px rgba(80, 205, 137, 0.2);
}

.status-dot.connecting {
    background: var(--color-warning);
    animation: pulse 1.2s ease-in-out infinite;
}

.status-dot.disconnected {
    background: var(--color-danger);
    opacity: 0.6;
}

.status-dot.reconnecting {
    background: var(--color-info);
    animation: pulse 1.0s ease-in-out infinite;
}

/* Device detected but not yet connected — ready to connect */
.status-dot.device-detected {
    background: var(--color-success);
    opacity: 0.55;
}

/* No device plugged in */
.status-dot.no-device {
    background: var(--color-danger);
    opacity: 0.6;
}

/* Scanning for device on startup */
.status-dot.scanning {
    background: var(--text-tertiary);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    user-select: none;
}

.btn:hover { filter: brightness(0.95); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.btn-primary {
    background: var(--tesa-primary);
    color: white;
    box-shadow: 0 1px 2px rgba(114, 57, 234, 0.3);
}
.btn-primary:hover { background: var(--tesa-primary-hover); }

.btn-success {
    background: var(--color-success);
    color: white;
    box-shadow: 0 1px 2px rgba(80, 205, 137, 0.3);
}
.btn-success:hover { background: var(--color-success-hover); }

.btn-danger {
    background: var(--color-danger);
    color: white;
}
.btn-danger:hover { background: var(--color-danger-hover); }

.btn-outline {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.btn-outline:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
}

.btn-xs { padding: 3px 8px; font-size: 11px; }

.hidden { display: none !important; }

/* ==========================================================================
   Toolbar
   ========================================================================== */

#toolbar {
    /* min-height (not a fixed height) + flex-wrap so the toolbar groups drop to a
       second row instead of overflowing the page on narrow screens (iPad). On a
       wide desktop the groups fit on one line, so nothing changes there. */
    min-height: var(--toolbar-height);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    flex-shrink: 0;
    gap: 8px;
}
/* Within a group, let the buttons wrap too so even a narrow tablet (portrait)
   never clips a button or forces horizontal page scroll. */
.toolbar-group { flex-wrap: wrap; }

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 4px;
}

/* ==========================================================================
   Main Layout
   ========================================================================== */

#main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.panel {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Blockly Panel */
#blocklyPanel {
    flex: 1;
    min-width: 300px;
    position: relative;
}

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

/* ==========================================================================
   Welcome Modal Overlay (floating, reopenable)
   ========================================================================== */

.welcome-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.welcome-modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.welcome-card {
    position: relative;
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 24px 28px;
    max-width: 1020px;
    width: 94%;
    max-height: 92vh;
    overflow-y: auto;
    animation: welcomeFadeIn 0.4s ease-out;
}

/* Close Button - top-right corner */
.welcome-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    z-index: 1;
}

.welcome-close:hover {
    background: var(--color-danger);
    color: white;
    transform: scale(1.1);
}

@keyframes welcomeFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.welcome-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.welcome-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.welcome-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}

/* Architecture Diagram */
.welcome-arch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 10px;
    padding: 10px 8px;
    background: var(--bg-muted);
    border-radius: var(--border-radius);
}

.arch-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    flex: 1;
    text-align: center;
}

.arch-cm33 {
    background: #e3d6ff;
    border: 1px solid #c4b0f0;
}

.arch-cm55 {
    background: #d1fae5;
    border: 1px solid #a3e4c5;
}

.arch-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.arch-desc {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 2px;
}

.arch-detail {
    font-size: 9px;
    color: var(--text-tertiary);
    margin-top: 3px;
}

.arch-ipc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    flex-shrink: 0;
}

.arch-ipc span {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Feature Cards */
.welcome-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 0;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}

.feature-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-sensors .feature-icon { background: #e0f2fe; color: #0284c7; }
.feature-connectivity .feature-icon { background: #e8dcff; color: #7c3aed; }
.feature-security .feature-icon { background: #fce4de; color: #e9292a; }
.feature-display .feature-icon { background: #fef3c7; color: #d97706; }

.feature-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feature-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.feature-desc {
    font-size: 9px;
    color: var(--text-tertiary);
    line-height: 1.4;
    margin-top: 2px;
}

/* Quick Start */
.welcome-quickstart {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.quickstart-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.quickstart-btn {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--tesa-primary);
    background: var(--tesa-primary-subtle);
    color: var(--tesa-primary);
    cursor: pointer;
    transition: all var(--transition);
}

.quickstart-btn:hover {
    background: var(--tesa-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.welcome-footer {
    text-align: center;
    font-size: 10px;
    color: var(--text-tertiary);
    margin: 2px 0 0;
}

/* Quick Links */
.welcome-links {
    margin-bottom: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.welcome-links-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.welcome-links-grid {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.welcome-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    transition: all var(--transition);
    white-space: nowrap;
}

.welcome-link:hover {
    background: var(--tesa-primary-subtle);
    border-color: var(--tesa-primary);
    color: var(--tesa-primary);
}

.welcome-link svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: var(--text-tertiary);
    transition: color var(--transition);
}

.welcome-link:hover svg {
    color: var(--tesa-primary);
}

/* Status Bar Divider */
.status-divider {
    opacity: 0.3;
    margin: 0 2px;
}

/* Resize Handle */
.resize-handle {
    width: 5px;
    background: var(--border-color);
    cursor: col-resize;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

.resize-handle:hover,
.resize-handle.active {
    background: var(--tesa-primary);
}

.resize-dots {
    width: 3px;
    height: 20px;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.4) 2px,
        rgba(255,255,255,0.4) 4px
    );
    opacity: 0;
    transition: opacity var(--transition);
}

.resize-handle:hover .resize-dots,
.resize-handle.active .resize-dots {
    opacity: 1;
}

/* Vertical Resize Handle (between code and terminal) */
.v-resize-handle {
    height: 5px;
    background: var(--border-color);
    cursor: row-resize;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

.v-resize-handle:hover,
.v-resize-handle.active {
    background: var(--tesa-primary);
}

.v-resize-handle::after {
    content: '';
    width: 24px;
    height: 3px;
    background: repeating-linear-gradient(
        to right,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.4) 2px,
        rgba(255,255,255,0.4) 4px
    );
    opacity: 0;
    transition: opacity var(--transition);
}

.v-resize-handle:hover::after,
.v-resize-handle.active::after {
    opacity: 1;
}

/* Right Panel */
#rightPanel {
    width: 420px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
}

/* ==========================================================================
   Code Panel
   ========================================================================== */

.code-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 34px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.editor-example-name {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--tesa-primary, #7239ea);
    opacity: 0.85;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    background: var(--bg-surface);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.code-output {
    flex: 1;
    margin: 0;
    padding: 16px;
    background: var(--bg-code);
    color: var(--text-code);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    overflow: auto;
    tab-size: 4;
    white-space: pre;
}

.code-output code {
    display: block;
    background: transparent;
}

/* Syntax Highlighting (VS Code Dark+ inspired) */
.code-output .hl-keyword { color: #c586c0; }
.code-output .hl-string { color: #ce9178; }
.code-output .hl-number { color: #b5cea8; }
.code-output .hl-comment { color: #6a9955; font-style: italic; }
.code-output .hl-builtin { color: #4ec9b0; }
.code-output .hl-module { color: #9cdcfe; }

/* ==========================================================================
   Flowchart Panel
   ========================================================================== */

/* Flowchart overlay: never blocks — flowchart is a non-blocking floating panel */
#flowchartOverlay {
    pointer-events: none !important;
    background: transparent !important;
}

/* Slide-out panel — mirrors .help-panel pattern */
.flowchart-slide-panel {
    position: fixed;
    /* start BELOW the top menu so the toolbar stays clickable while the panel is
       open. --panels-top = the toolbar's measured bottom (js/panel-layout.js);
       the fallback is header 54 + toolbar 40. */
    top: var(--panels-top, 94px);
    right: 0;
    width: 480px;
    min-width: 320px;
    max-width: 700px;
    height: calc(100vh - var(--panels-top, 94px));
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.flowchart-slide-panel.open {
    transform: translateX(0);
}

/* BENTO Emulator panel — resizable (drag the left edge). Default is roomy but
   not locked; the user can shrink/grow it. */
.emulator-slide-panel {
    width: 720px;
    min-width: 420px;
    max-width: 92vw;
    /* sit between the top menu and the IDE's bottom status bar, burying neither */
    height: calc(100vh - var(--panels-top, 94px) - var(--statusbar-height, 26px));
}
.emulator-slide-output {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
.emulator-slide-output iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.emulator-size-select {
    background: var(--bg-hover, #f0f0f5);
    border: 1px solid var(--border-color, #2d2d4a);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    padding: 2px 4px;
    cursor: pointer;
}
.flowchart-zoom-btn.active {
    background: var(--tesa-primary, #7c3aed);
    color: #fff;
}
/* Run button becomes Stop while a program runs (single toggle control) */
.flowchart-zoom-btn.running {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
}

/* Pin button reuses AI Buddy's .buddy-btn-icon / .buddy-pin-btn design
   (same pushpin SVG, same pinned highlight) so the two panels match. */

.flowchart-slide-resize {
    position: absolute;
    left: -3px;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.2s ease;
}

.flowchart-slide-resize:hover,
.flowchart-slide-resize.active {
    background: var(--tesa-primary);
    opacity: 0.5;
}

.flowchart-slide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: linear-gradient(to right, var(--bg-surface), var(--bg-muted));
}

.flowchart-slide-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.flowchart-slide-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.flowchart-slide-controls::-webkit-scrollbar { display: none; }
.flowchart-slide-controls .help-close {
    flex-shrink: 0;
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--bg-muted);
}

/* ── Karel control cluster (Wiroon) ──────────────────────────────────────────
   The Karel controls used to sit on their own second header row, which stole
   ~41px of panel height from the Hardware bench below. They now ride the SAME
   row as the main controls, so the panel body keeps that height.
   Measured intrinsic widths (720px default panel): title 139 + main cluster 385
   + karel cluster 397 + gaps/padding ≈ 1002px — 280px too wide for one row.
   The `.karel-on` rules below buy that back WITHOUT dropping any Karel control:
   they trim chrome that is redundant *in the Karel profile only*. Every rule is
   scoped to .karel-on, so Arcade/plain MicroPython look exactly as before. */
.emulator-karel-bar {
    display: none;                 /* emuKarelChromeToggle flips this to flex */
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.emulator-karel-bar::after {       /* hairline between the Karel and main clusters */
    content: '';
    width: 1px;
    height: 16px;
    margin: 0 3px;
    background: var(--border-color);
}
.karel-speed-label { font-size: 11px; opacity: .75; }

/* Icon-only title: the panel is unmistakable once it is open, and the text is
   still available as a tooltip. Frees ~119px. */
.emulator-slide-panel.karel-on .slide-title-text { display: none; }
/* ▶ Run is exactly what ▶ Run All does in this profile (mode:'run' + emuRun),
   and 📐 Design drags LVGL widgets — Karel draws its own world grid and edits it
   with 🧱 World instead. Both are noise here; hiding them frees ~122px. */
.emulator-slide-panel.karel-on #btnEmulatorRun,
.emulator-slide-panel.karel-on #btnEmulatorDesign { display: none; }
/* The Slow/Normal/Fast menu names itself; the label is redundant (~41px). */
.emulator-slide-panel.karel-on .karel-speed-label { display: none; }
/* Final ~35px: tighter (but still touch-sized) buttons on the busy Karel row. */
.emulator-slide-panel.karel-on .flowchart-slide-controls .flowchart-zoom-btn { padding-left: 6px; padding-right: 6px; }

.flowchart-zoom-btn {
    flex-shrink: 0;
    background: var(--bg-muted);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.8;
    transition: background var(--transition), color var(--transition);
}

.flowchart-zoom-btn:hover {
    background: var(--tesa-primary);
    color: #fff;
    border-color: var(--tesa-primary);
}

.flowchart-ctrl-divider {
    flex-shrink: 0;
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 3px;
    align-self: center;
}

.flowchart-export-btn {
    font-size: 10px;
    letter-spacing: 0.04em;
}

.flowchart-fn-btn {
    font-size: 10px;
    letter-spacing: 0.02em;
    background: var(--bg-muted);
    border-color: #4ade80;
    color: #4ade80;
}

.flowchart-fn-btn:hover {
    background: #2d4a3e;
    color: #a7f3d0;
    border-color: #4ade80;
}

.flowchart-slide-output {
    flex: 1;
    overflow: auto;
    background: var(--bg-code);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 8px;
}

.flowchart-svg-wrap {
    transform-origin: 0 0;
    display: inline-block;
}

.flowchart-svg-wrap svg {
    display: block;
    max-width: none;
    height: auto;
}

.flowchart-error {
    color: var(--color-danger);
    font-size: 12px;
    font-family: var(--font-mono);
    padding: 16px 12px;
    opacity: 0.85;
    align-self: flex-start;
}

.flowchart-empty {
    color: var(--text-tertiary);
    font-size: 12px;
    font-family: var(--font-mono);
    padding: 16px 12px;
    align-self: flex-start;
}

/* ==========================================================================
   Terminal Panel
   ========================================================================== */

.terminal-panel {
    height: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

.terminal-header {
    background: #16162a;
    border-bottom: 1px solid #2d2d4a;
}

.terminal-header .panel-title {
    color: #a0a0c0;
}

.terminal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-info {
    font-size: 10px;
    color: #666;
    font-family: var(--font-mono);
}

.terminal-output {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-terminal);
    color: #c0c0e0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.terminal-output .line-ok { color: var(--color-success); }
.terminal-output .line-error { color: var(--color-danger); }
.terminal-output .line-info { color: var(--color-info); }
.terminal-output .line-prompt { color: #dcdcaa; }

.terminal-input-row {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 14px;
    background: #16162a;
    border-top: 1px solid #2d2d4a;
    flex-shrink: 0;
}

.prompt {
    color: var(--tesa-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
    user-select: none;
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #e0e0f0;
    font-family: var(--font-mono);
    font-size: 12px;
    outline: none;
}

.terminal-input::placeholder {
    color: #4a4a6a;
}

/* ── Smart REPL: Popup Buttons ── */
.terminal-popup-btn {
    background: none;
    border: none;
    color: #6a6a9a;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.terminal-popup-btn:hover {
    color: #e0e0f0;
    background: rgba(255,255,255,0.06);
}

/* ── Smart REPL: Autocomplete Dropdown ── */
.ac-dropdown {
    position: absolute;
    bottom: 36px;
    left: 40px;
    right: 60px;
    max-height: 220px;
    overflow-y: auto;
    background: #1e1e3a;
    border: 1px solid #3a3a5c;
    border-radius: 6px;
    z-index: 110;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.ac-dropdown.hidden { display: none; }

.ac-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #c0c0e0;
    white-space: nowrap;
    overflow: hidden;
}
.ac-item:hover, .ac-item.ac-active {
    background: #2a2a50;
}
.ac-item .ac-icon {
    color: #dcdcaa;
    font-style: italic;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
.ac-item .ac-name {
    color: #e0e0f0;
    font-weight: 500;
    flex-shrink: 0;
}
.ac-item .ac-params-hint {
    color: #6a6a9a;
    font-size: 11px;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.ac-item .ac-desc {
    color: #8080a0;
    font-size: 11px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-item .ac-tab-hint {
    color: #4a4a6a;
    font-size: 10px;
    border: 1px solid #3a3a5c;
    border-radius: 3px;
    padding: 1px 4px;
    flex-shrink: 0;
}

/* ── Smart REPL: Signature Hint Bar ── */
.sig-hint {
    position: absolute;
    bottom: 36px;
    left: 40px;
    right: 60px;
    padding: 5px 12px;
    background: #252545;
    border: 1px solid #3a3a5c;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #a0a0c0;
    z-index: 111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sig-hint.hidden { display: none; }
.sig-hint .sig-func { color: #dcdcaa; font-weight: 500; }
.sig-hint .sig-param { color: #8a8ab0; }
.sig-hint .sig-param.sig-active {
    color: #569cd6;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sig-hint .sig-comma { color: #6a6a8a; }
.sig-hint .sig-tab-hint {
    float: right;
    color: #4a4a6a;
    font-size: 10px;
    margin-left: 12px;
    line-height: 16px;
}

/* Push dropdown up when signature hint is visible */
.sig-hint:not(.hidden) ~ .ac-dropdown { bottom: 60px; }

/* ── Smart REPL: Terminal Popups (History / Command Reference) ── */
.terminal-popup {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    max-height: 300px;
    background: #1a1a32;
    border: 1px solid #3a3a5c;
    border-radius: 8px 8px 0 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.terminal-popup.hidden { display: none; }

.terminal-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #2d2d4a;
    font-size: 12px;
    font-weight: 600;
    color: #c0c0e0;
}
.terminal-popup-close {
    background: none;
    border: none;
    color: #6a6a9a;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.terminal-popup-close:hover { color: #e0e0f0; }

.terminal-popup-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 10px;
    border-bottom: 1px solid #2d2d4a;
}
.terminal-popup-tab {
    background: #252545;
    border: 1px solid #3a3a5c;
    border-radius: 4px;
    color: #8080a0;
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.terminal-popup-tab:hover { color: #c0c0e0; background: #2a2a50; }
.terminal-popup-tab.active { color: #e0e0f0; background: #3a3a6a; border-color: #569cd6; }

.terminal-popup-search {
    margin: 6px 10px;
    padding: 5px 10px;
    background: #16162a;
    border: 1px solid #3a3a5c;
    border-radius: 4px;
    color: #e0e0f0;
    font-family: var(--font-mono);
    font-size: 12px;
    outline: none;
}
.terminal-popup-search:focus { border-color: #569cd6; }
.terminal-popup-search::placeholder { color: #4a4a6a; }

.terminal-popup-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}

.terminal-popup-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    color: #c0c0e0;
    transition: background 0.1s;
}
.terminal-popup-item:hover { background: #2a2a50; }

.terminal-popup-item .cmd-name {
    color: #dcdcaa;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}
.terminal-popup-item .cmd-desc {
    color: #8080a0;
    font-size: 11px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.terminal-popup-item .cmd-ref-open {
    color: #4a4a6a;
    font-size: 12px;
    margin-left: 6px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.terminal-popup-item:hover .cmd-ref-open { color: #569cd6; }

.terminal-popup-empty {
    padding: 16px;
    text-align: center;
    color: #6a6a9a;
    font-size: 12px;
}

/* ==========================================================================
   Status Bar
   ========================================================================== */

#statusBar {
    height: var(--statusbar-height);
    background: var(--tesa-primary);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}

.status-left,
.status-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.85;
}

/* ==========================================================================
   Blockly Theme Overrides
   ========================================================================== */

.blocklyToolboxDiv {
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border-color) !important;
    padding: 6px 0 !important;
}

.blocklyTreeRow {
    padding: 4px 12px !important;
    margin: 1px 4px !important;
    border-radius: var(--border-radius-sm) !important;
    transition: background 0.15s ease !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.blocklyTreeRow:hover {
    background-color: var(--bg-muted) !important;
}

.blocklyTreeSelected {
    background-color: var(--tesa-primary-subtle) !important;
}

.blocklyTreeSelected .blocklyTreeLabel {
    color: var(--tesa-primary) !important;
    font-weight: 600 !important;
}

/* Toolbox Category Labels - multi-layered override for Blockly's injected CSS
   Blockly injects <style> with .blocklyTreeLabel { font-size:16px; font-family:sans-serif }
   We use higher specificity selectors + !important + JS inline style backup (see app.js) */
.blocklyToolboxDiv .blocklyToolboxCategory .blocklyTreeRow .blocklyTreeLabel,
.blocklyToolboxDiv .blocklyTreeRow .blocklyTreeLabel,
.blocklyToolboxDiv span.blocklyTreeLabel,
div.blocklyToolboxDiv .blocklyTreeLabel,
.blocklyTreeLabel {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: var(--text-primary) !important;
}

/* Override any Blockly span/text inside tree labels */
.blocklyToolboxDiv .blocklyTreeRow span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Flyout label text (CM33_NS / CM55 group headers) */
.blocklyFlyoutLabelText {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    fill: var(--text-tertiary) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    transform: translateX(20px);
}

/* Toolbox container spacing */
.blocklyToolboxContents {
    padding: 4px 0 !important;
}

/* Category icon dot size */
.blocklyTreeIcon {
    margin-right: 4px !important;
}

/* Hover state text color */
.blocklyTreeRow:hover .blocklyTreeLabel {
    color: var(--text-primary) !important;
}

.blocklyTreeSeparator {
    border-bottom: 1px solid var(--border-color) !important;
    margin: 6px 12px !important;
}

.blocklyFlyoutBackground {
    fill: var(--bg-muted) !important;
    fill-opacity: 0.98 !important;
}

.blocklyScrollbarHandle {
    rx: 4 !important;
    ry: 4 !important;
    fill: var(--text-tertiary) !important;
    opacity: 0.25 !important;
}

.blocklyScrollbarHandle:hover {
    opacity: 0.45 !important;
}

.blocklyMainBackground {
    fill: var(--bg-body) !important;
}

.blocklySelected > .blocklyPath {
    stroke: var(--tesa-primary) !important;
    stroke-width: 2.5px !important;
}

.blocklyTrash {
    opacity: 0.4 !important;
    transition: opacity 0.2s !important;
}

.blocklyTrash:hover {
    opacity: 0.8 !important;
}

.blocklyTreeIcon {
    margin-right: 2px !important;
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.terminal-output::-webkit-scrollbar-thumb,
.code-output::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.terminal-output::-webkit-scrollbar-thumb:hover,
.code-output::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Help Panel (API Reference Slide-out)
   ========================================================================== */

.help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.help-overlay.open {
    opacity: 1;
    visibility: visible;
}

.help-panel {
    position: fixed;
    top: var(--panels-top, 94px);          /* below the top menu (see panel-layout.js) */
    right: 0;
    width: 520px;
    min-width: 380px;
    max-width: 700px;
    height: calc(100vh - var(--panels-top, 94px));
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.help-resize-handle {
    position: absolute;
    left: -3px;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.2s ease;
}

.help-resize-handle:hover,
.help-resize-handle.active {
    background: var(--tesa-primary);
    opacity: 0.5;
}

.help-panel.open {
    transform: translateX(0);
}

.help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.help-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.help-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.help-pin-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.help-pin-btn:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
}

.help-pin-btn.pinned {
    color: var(--tesa-primary, #7239ea);
    background: rgba(114, 57, 234, 0.1);
}

.help-overlay.pinned-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.help-close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.help-close:hover {
    background: var(--color-danger);
    color: white;
}

.help-search {
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.help-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-sans);
    font-size: 13px;
    outline: none;
    transition: border-color var(--transition);
    background: var(--bg-muted);
    color: var(--text-primary);
}

.help-search input:focus {
    border-color: var(--tesa-primary);
    box-shadow: 0 0 0 3px rgba(114, 57, 234, 0.1);
}

.help-search input::placeholder {
    color: var(--text-tertiary);
}

.help-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 18px;
}

/* Module Section */
.help-module {
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.help-module-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-muted);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition);
}

.help-module-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.help-module-chevron::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-tertiary);
    border-bottom: 2px solid var(--text-tertiary);
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.help-module.collapsed .help-module-chevron::before {
    transform: rotate(45deg);
}

.help-module-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.help-module-header:hover {
    background: var(--tesa-primary-subtle);
}

.help-import {
    /* Was flex-shrink:0, so a long import (e.g. "from karel.stanfordkarel.
       karel_world import KarelWorld, dumps_world_json") ate the whole row and
       squeezed the module title into a one-word-per-line column. Let it shrink
       and truncate with an ellipsis; the full import still shows in the body. */
    flex-shrink: 1;
    min-width: 0;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tesa-primary);
    background: rgba(114, 57, 234, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}

.help-module-body {
    padding: 10px 14px;
}

.help-module.collapsed .help-module-body {
    display: none;
}

.help-module-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 12px;
    line-height: 1.5;
}

/* Function Entry */
.help-fn-entry {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.help-fn-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.help-fn-sig {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.help-fn-sig code {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--tesa-primary);
}

.help-fn-returns {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-success);
    background: rgba(80, 205, 137, 0.1);
    padding: 1px 6px;
    border-radius: 3px;
}

.help-fn-params {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.help-fn-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Code block wrapper with copy button */
.help-code-block {
    position: relative;
    margin: 6px 0 0;
}
.help-code-copy {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 3px 5px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.help-code-block:hover .help-code-copy { opacity: 1; }
.help-code-copy:hover { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }
.help-code-copy.copied { background: #4caf50; color: #fff; border-color: #4caf50; opacity: 1; }

.help-example {
    margin: 0;
    padding: 8px 10px;
    background: var(--bg-code);
    border-radius: 4px;
    overflow-x: auto;
}

.help-example code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-code);
    line-height: 1.5;
    white-space: pre;
    background: transparent;
}

/* Python syntax highlighting tokens */
.help-example .py-kw  { color: #c586c0; }
.help-example .py-str { color: #ce9178; }
.help-example .py-cmt { color: #6a9955; font-style: italic; }
.help-example .py-num { color: #b5cea8; }
.help-example .py-bi  { color: #dcdcaa; }
.help-example .py-fn  { color: #4ec9b0; }
.help-example .py-dec { color: #d7ba7d; }

/* Submodule */
.help-submodule-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 10px 0 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.help-fn-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0;
}

.help-fn-compact .help-fn-name {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--tesa-primary);
}

.help-fn-compact .help-fn-desc {
    font-size: 11px;
    flex: 1;
    min-width: 120px;
}

/* Constants */
.help-constants {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.help-constants code {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-muted);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Related Examples links */
.help-related-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.help-example-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--tesa-primary);
    background: var(--bg-muted);
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition);
}
.help-example-link:hover {
    background: var(--tesa-primary);
    color: white;
}
.help-example-icon {
    font-size: 12px;
}

/* Empty state */
.help-empty {
    text-align: center;
    padding: 40px 20px;
    font-size: 13px;
    color: var(--text-tertiary);
}

/* ==========================================================================
   Notification Toast
   ========================================================================== */

.notification-toast {
    position: fixed;
    bottom: 40px;
    right: 20px;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    z-index: 10000;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.notification-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.notification-success { background: var(--color-success); }
.notification-error { background: var(--color-danger); }
.notification-info { background: var(--color-info); }
.notification-warning { background: var(--color-warning); color: #1f2937; }

/* ==========================================================================
   Editor Auto-Save — "Restore last work" bar (bilingual TH/EN)
   ========================================================================== */
.autosave-bar {
    position: fixed;
    top: 64px;
    right: 20px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--tesa-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: 13px;
    z-index: 10001;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.autosave-bar.show { opacity: 1; transform: translateY(0); }
.autosave-bar .autosave-msg { flex: 1; line-height: 1.35; }
.autosave-bar .autosave-msg small { display: block; color: var(--text-tertiary); font-size: 11px; }
.autosave-bar button {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    white-space: nowrap;
}
.autosave-bar button.autosave-primary {
    background: var(--tesa-primary);
    border-color: var(--tesa-primary);
    color: #fff;
}
.autosave-bar button.autosave-primary:hover { background: var(--tesa-primary-hover); }
.autosave-bar button.autosave-close {
    border: none;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    color: var(--text-tertiary);
}

/* ==========================================================================
   Upload Progress Modal — no backdrop blur so serial console is visible
   ========================================================================== */

.upload-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
}

.upload-overlay.hidden {
    display: none;
}

.upload-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 28px 36px;
    min-width: 340px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: uploadCardIn 0.2s ease-out;
}

@keyframes uploadCardIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.upload-icon {
    font-size: 24px;
    margin-bottom: 10px;
    line-height: 1;
}

.upload-title {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.upload-bar-track {
    height: 8px;
    background: var(--bg-muted);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.upload-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--tesa-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.upload-status {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.upload-card.complete .upload-bar-fill {
    background: var(--color-success);
}

.upload-card.complete .upload-title {
    color: var(--color-success);
}

.upload-card.complete .upload-icon {
    color: var(--color-success);
}

.upload-hint {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 12px;
    line-height: 1.5;
    white-space: pre-line;
}

.upload-ok-btn {
    margin-top: 16px;
    padding: 8px 32px;
    font-size: 13px;
}

/* ==========================================================================
   Example Explorer Overlay
   ========================================================================== */

.examples-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.examples-overlay.hidden {
    display: none;
}

.examples-container {
    background: var(--bg-surface);
    border-radius: 16px;
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(114, 57, 234, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: welcomeCardIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.examples-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.examples-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.examples-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.examples-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    background: var(--bg-muted);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Filters Toolbar */
.examples-toolbar {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.examples-filter-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.examples-filter-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 2px;
}

.examples-chip {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.examples-chip:hover {
    border-color: var(--tesa-primary);
    color: var(--tesa-primary);
    background: var(--tesa-primary-subtle);
}

.examples-chip.active {
    background: var(--tesa-primary);
    color: white;
    border-color: var(--tesa-primary);
}

/* Search */
.examples-search-row {
    display: flex;
}

.examples-search-input {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-sans);
    font-size: 12px;
    outline: none;
    background: var(--bg-muted);
    color: var(--text-primary);
    transition: border-color var(--transition);
}

.examples-search-input:focus {
    border-color: var(--tesa-primary);
    box-shadow: 0 0 0 3px rgba(114, 57, 234, 0.1);
}

.examples-search-input::placeholder {
    color: var(--text-tertiary);
}

/* Card Grid */
.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

/* Example Card */
.example-card {
    padding: 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    cursor: pointer;
    transition: all 0.2s ease;
}

.example-card:hover {
    border-color: var(--tesa-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.example-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.example-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
}

.example-card-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.example-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.example-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    overflow: hidden;
    max-height: 22px;
}

.tag-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 500;
    background: var(--bg-hover, #f0f0f5);
    color: var(--text-secondary, #6c757d);
    white-space: nowrap;
}

/* Card header badge group (TYPE + difficulty, right-aligned) */
.example-card-badges {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* TYPE badge — Milestone / Full Game */
.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.type-milestone {
    background: #ede9fe;
    color: #5b21b6;
}

.type-full-game {
    background: #fef3c7;
    color: #92400e;
}

/* Difficulty Badges */
.difficulty-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.difficulty-beginner {
    background: #ecfdf5;
    color: #065f46;
}

.difficulty-intermediate {
    background: #e0f2fe;
    color: #075985;
}

.difficulty-advanced {
    background: #fef2f2;
    color: #991b1b;
}

/* Domain Label */
.domain-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ── Contributor provenance (card credit line + preview) ────────── */
.example-card-contributor {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
    min-width: 0;
}
.example-card-contributor .contrib-name {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contrib-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
/* Kind colours — kept distinct from difficulty/type badge palettes */
.contrib-community  { background: #e0f2fe; color: #075985; }
.contrib-bento-team { background: #ede9fe; color: #5b21b6; }
.contrib-ai         { background: #fdf4ff; color: #86198f; }

.preview-contributor {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.preview-contributor .contrib-link {
    color: var(--tesa-primary, #6d28d9);
    font-weight: 600;
    text-decoration: none;
}
.preview-contributor .contrib-link:hover { text-decoration: underline; }
.preview-contributor .contrib-name { font-weight: 600; color: var(--text-secondary); }
.preview-contributor .contrib-model { color: var(--text-tertiary); }

/* Domain Icon */
.domain-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.domain-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
}

/* Empty state */
.examples-empty {
    text-align: center;
    padding: 60px 20px;
    font-size: 13px;
    color: var(--text-tertiary);
    grid-column: 1 / -1;
}

.examples-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    font-size: 13px;
    color: var(--text-tertiary);
    grid-column: 1 / -1;
}

.examples-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--tesa-primary, #7c4dff);
    border-radius: 50%;
    animation: examples-spin 0.7s linear infinite;
}

@keyframes examples-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Example Preview Modal
   ========================================================================== */

.example-preview {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.example-preview.hidden {
    display: none;
}

.preview-card {
    background: var(--bg-surface);
    border-radius: 16px;
    max-width: 800px;
    width: 92%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: welcomeCardIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.preview-meta {
    flex: 1;
    min-width: 0;
}

.preview-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.preview-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 8px;
    line-height: 1.5;
}

.preview-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Preview Tabs */
.preview-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.preview-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preview-tab:hover {
    color: var(--text-primary);
}

.preview-tab.active {
    color: var(--tesa-primary);
    border-bottom-color: var(--tesa-primary);
}

/* Preview Content */
.preview-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 300px;
}

.preview-blocks-container {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

#previewBlocklyDiv {
    width: 100%;
    height: 100%;
}

.preview-code-container {
    position: absolute;
    inset: 0;
    background: var(--bg-code);
    color: var(--text-code);
    overflow: auto;
    padding: 0;
}

.preview-code-container pre {
    margin: 0;
    padding: 16px;
    padding-top: 40px;
}

.preview-code-container code {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    background: transparent;
}

.btn-copy-code {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-sans);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-copy-code:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Preview Actions */
.preview-actions {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* ==========================================================================
   Code Lens Modal — centered Blocky/Python preview for python_raw
   ========================================================================== */

.codelens-modal {
    position: fixed;
    inset: 0;
    z-index: 11001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.codelens-modal.hidden {
    display: none;
}

.codelens-card {
    background: var(--bg-surface);
    border-radius: 16px;
    width: min(900px, 94vw);
    height: min(84vh, 980px);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: welcomeCardIn 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.codelens-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.codelens-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.codelens-close {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.codelens-close:hover {
    border-color: var(--tesa-primary);
    color: var(--tesa-primary);
}

.codelens-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.codelens-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.codelens-tab:hover {
    color: var(--text-primary);
}

.codelens-tab.active {
    color: var(--tesa-primary);
    border-bottom-color: var(--tesa-primary);
}

.codelens-content {
    position: relative;
    flex: 1;
    min-height: 300px;
}

.codelens-panel {
    position: absolute;
    inset: 0;
    overflow: auto;
}

.codelens-panel-blocky {
    background: linear-gradient(180deg, #f6f8fb 0%, #eff3f9 100%);
    padding: 18px;
}

.codelens-blockly-wrap {
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.codelens-block-head {
    padding: 9px 12px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    color: #e8f7ef;
    background: linear-gradient(90deg, #2f7b52 0%, #38a169 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.codelens-blockly-div {
    width: 100%;
    flex: 1;
    min-height: 240px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.codelens-blockly-div .blocklyToolboxDiv,
.codelens-blockly-div .blocklyFlyout {
    display: none !important;
}

.codelens-panel-python {
    background: var(--bg-code);
}

.codelens-python-pre {
    margin: 0;
    padding: 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-code);
    white-space: pre;
}

/* Board Profile Section */
.welcome-section { margin-bottom: 10px; }

/* ── Board Picker — Netflix-style carousel (reference-matched) ── */

/* Toolbar: search + vendor filter + count */
.board-picker-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.board-picker-search {
    flex: 1;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-primary);
    outline: none;
    transition: border-color 0.15s;
}
.board-picker-search:focus { border-color: var(--tesa-primary); }
.board-picker-search::placeholder { color: var(--text-tertiary); }
.board-picker-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.board-picker-vendor-filter {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 11px;
    color: var(--text-primary);
    background: var(--bg-primary);
    cursor: pointer;
    outline: none;
}
.board-picker-count {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Carousel container */
.board-picker-carousel {
    position: relative;
    margin-bottom: 10px;
}
.board-picker {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.board-picker::-webkit-scrollbar { height: 4px; }
.board-picker::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.board-picker::-webkit-scrollbar-track { background: transparent; }

/* Arrow buttons — always visible when scrollable */
.board-picker-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background 0.15s, color 0.15s;
}
.board-picker-arrow.visible { display: flex; }
.board-picker-arrow:hover { background: var(--tesa-primary); color: #fff; }
.board-picker-arrow.left { left: -14px; }
.board-picker-arrow.right { right: -14px; }

/* Vertical card — ~252px wide, consistent height */
.board-picker-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 252px;
    min-height: 200px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--bg-primary);
}
.board-picker-card:hover {
    border-color: var(--tesa-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.board-picker-card.active {
    border-color: var(--tesa-primary);
    box-shadow: 0 0 0 2px var(--tesa-primary-light);
}

/* Card image — top area */
.board-picker-img {
    width: 100%;
    height: 110px;
    border-radius: 6px;
    object-fit: contain;
}

/* The TESAIoT Dev Kit photo is a narrower crop (aspect ~1.50) than the
   Infineon kits (~1.8), so at the shared height it reads smaller. Give it a
   bit more height so its board fills the card as fully as the others. */
.board-picker-card[data-pkg-id="tesa.psoc_edge_e84.dev_kit"] .board-picker-img {
    height: 132px;
}

/* Card info — below image */
.board-picker-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    align-items: center;
    min-width: 0;
}
.board-picker-name {
    font-weight: 700;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.3;
    text-align: center;
}
.board-picker-vendor {
    font-size: 9px;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.2;
}
.board-picker-ids {
    font-size: 9px;
    color: var(--text-tertiary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.board-picker-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    margin-top: 2px;
}

/* Board Summary */
.board-summary { font-size: 11px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }

/* Two-column layout for content below board picker */
.welcome-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

/* Board Picker Tags */
.board-picker-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.board-picker-tag[data-cat="ai"]           { background: #fce4ec; color: #c62828; }
.board-picker-tag[data-cat="sensor"]       { background: #e8f5e9; color: #2e7d32; }
.board-picker-tag[data-cat="media"]        { background: #e3f2fd; color: #1565c0; }
.board-picker-tag[data-cat="connectivity"] { background: #fff3e0; color: #e65100; }
.board-picker-tag[data-cat="security"]     { background: #f3e5f5; color: #7b1fa2; }
.board-picker-tag[data-cat="input"]        { background: #fff8e1; color: #f57f17; }

/* Coming Soon badge */
.board-picker-badge-soon {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    color: #e65100;
    letter-spacing: 0.04em;
    text-align: center;
}
.board-picker-card.coming-soon { opacity: 0.65; }
.board-picker-card.coming-soon:hover { opacity: 0.9; }

/* Exclusive feature chips — accent "＋" style (e.g. the Dev Kit superset extras) */
.board-picker-tag[data-cat="exclusive"] {
    background: var(--tesa-primary-subtle, #f5f0ff);
    color: var(--tesa-primary, #7239ea);
    border: 1px solid var(--tesa-primary-light, #e3d6ff);
}

/* Hero badge (e.g. ALL-IN-ONE) — accent pill overlaid on the card image */
.board-picker-card { position: relative; }
.board-picker-badge-hero {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--tesa-primary, #7239ea);
    padding: 2px 7px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .header-center { display: none; }
    .logo-subtitle { display: none; }
    #rightPanel { width: 320px; min-width: 250px; }
    .terminal-panel { height: 180px; }

    .examples-container { width: 98%; max-height: 95vh; }
    .examples-grid { grid-template-columns: 1fr; }
    .examples-filter-row { flex-direction: column; gap: 8px; }
    .preview-card { width: 98%; max-height: 90vh; }
    .codelens-card { width: 98%; height: min(88vh, 980px); max-height: 94vh; }
    .codelens-tab { padding: 10px 12px; }
    .codelens-content { min-height: 240px; }

    /* Welcome modal responsive */
    .welcome-two-col { grid-template-columns: 1fr; }
    .board-picker { flex-direction: column; }
    .board-picker-img { width: 100%; height: auto; }
    .welcome-features { grid-template-columns: 1fr; }
}

/* ============================================================
   Karel World Manager modal (js/world-manager.js)
   Mirrors the .example-preview overlay pattern; theme-driven via
   the shared CSS variables so it follows light/dark automatically.
   ============================================================ */
.world-mgr {
    position: fixed;
    inset: 0;
    /* Must sit ABOVE the emulator slide panel (z-index:1000) — the "Manage
       Worlds" entry point lives inside that panel's Karel bar, so the panel is
       always open when this modal shows; a lower value lets the emulator iframe
       swallow pointer events over the modal's right half. Stays below the
       global toast layer (11000) and the modal's own toasts (1200). */
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.world-mgr.hidden { display: none; }
.wm-card {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 94%;
    max-width: 940px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: welcomeCardIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.wm-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wm-header .wm-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}
.wm-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
}
.wm-close:hover { background: var(--border-color); color: var(--text-primary); }
.wm-body { overflow: auto; padding: 16px 18px; }
.wm-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.wm-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wm-btn:hover { border-color: var(--tesa-primary); }
.wm-btn.primary {
    background: var(--tesa-primary);
    border-color: var(--tesa-primary);
    color: #fff;
}
.wm-btn.primary:hover { background: var(--tesa-primary-hover); }
.wm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wm-btn.danger { color: #e74c3c; }
.wm-btn.danger:hover { border-color: #e74c3c; background: rgba(231, 76, 60, 0.08); }
.wm-btn.tool.active {
    background: var(--tesa-primary);
    border-color: var(--tesa-primary);
    color: #fff;
}
.wm-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 14px 0 8px;
}
.wm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.wm-tile {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    background: var(--bg-elevated);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wm-tile canvas {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    background: #0e1116;
    display: block;
}
.wm-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}
/* The exact run_karel_program("name") call for this world — copyable, so the
   friendly title above never hides the registry name students must type. */
.wm-tile-code {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 10.5px;
    color: var(--text-secondary, #9aa0aa);
    background: rgba(127, 127, 127, 0.12);
    border: 1px solid rgba(127, 127, 127, 0.18);
    border-radius: 5px;
    padding: 3px 6px;
    cursor: pointer;
    word-break: break-all;
    transition: background 0.12s, color 0.12s;
}
.wm-tile-code:hover {
    background: rgba(127, 127, 127, 0.22);
    color: var(--text-primary);
}
.wm-tile-meta {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.wm-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--tesa-primary-subtle);
    color: var(--tesa-primary);
}
.wm-tile-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-tile-actions .wm-btn { padding: 5px 9px; font-size: 11px; }
.wm-empty {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 10px 0;
}
/* Editor screen */
.wm-editor-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.wm-dims {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.wm-dims input {
    width: 46px;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 12px;
}
.wm-swatches { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wm-swatch {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid transparent;
    cursor: pointer;
}
.wm-swatch.active { border-color: var(--text-primary); }
.wm-canvas-wrap {
    display: flex;
    justify-content: center;
    background: #0e1116;
    border-radius: 12px;
    padding: 10px;
}
#wmEditorCanvas { max-width: 100%; touch-action: none; cursor: crosshair; }
.wm-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 8px 0 0;
    line-height: 1.5;
}
.wm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.wm-footer .wm-name-input {
    margin-right: auto;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13px;
    min-width: 180px;
}
.wm-warn {
    font-size: 11px;
    color: #e67e22;
    margin-right: auto;
    align-self: center;
}
.wm-seg {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    overflow: hidden;
}
.wm-seg button {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
}
.wm-seg button.active { background: var(--tesa-primary); color: #fff; }
@media (max-width: 640px) {
    .wm-card { width: 98%; max-height: 92vh; }
}

/* ==============================================================
   CodeMirror 6 — Python indent guides (VSCode parity)
   Painted by the custom `guideField` StateField in codemirror-init.js
   from two CSS custom properties. Per line the JS sets --guide-w (the
   leading-indent width) and --guide-period (the detected indent unit S
   in ch); the gradient below draws a 1px line at the start of every
   S-wide column, so guides land at 0, S, 2S … like VSCode. A brighter
   ::after line marks the cursor's active guide. Both are drawn inside
   the line's text area, so they never overlap the left gutter (line
   numbers / lint / fold) or the Karel breakpoint circle + current-line
   band (.cm-karel-current).
   Colours follow VSCode's editorIndentGuide.* (a subtle gray guide, a
   brighter gray for the active one — NOT a coloured accent), tuned for
   the oneDark background. --guide-period defaults to 4ch (PEP 8). */
.cm-editor {
    --indent-guide-color: rgba(171, 178, 191, 0.32);          /* VSCode editorIndentGuide.background */
    --indent-guide-active-color: rgba(198, 204, 214, 0.78);   /* VSCode editorIndentGuide.activeBackground (brighter gray) */
}
/* Active indent guide: the block the cursor sits in gets a brighter line at its
   own column (VSCode's coloured active guide). Drawn via ::after so it overlays
   the flat ::before guides. --active-guide = that column in ch. */
.cm-editor .cm-guide-active::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(2px + 0.5ch + var(--active-guide, 0ch));
    width: 1px;
    background: var(--indent-guide-active-color);
    pointer-events: none;
    z-index: 1;
}
/* Positioning context for the active-guide ::after and the Karel ::before
   circle marker. */
.cm-editor .cm-line { position: relative; }
/* Custom indent guides: painted as the line's OWN background-image (a 1px line
   every S columns across the leading indent — columns 0, S, 2S … indent−S), so
   they never occupy a pseudo-element. This is deliberate: the Karel current-line
   marker needs ::before for its circle and the active guide needs ::after, so
   the flat guides must not claim a pseudo-element too (they used to share
   ::before with the Karel circle, which collided into a distorted oval and
   dropped the guide on the debugged line). --guide-w = indent width, --guide-period
   = detected indent unit S (both in ch); +0.5ch centres each line in its column.
   background-color set by the active-line / Karel band still shows through. */
.cm-editor .cm-guides {
    background-image: repeating-linear-gradient(
        to right,
        var(--indent-guide-color) 0, var(--indent-guide-color) 1px,
        transparent 1px, transparent var(--guide-period, 4ch));
    background-repeat: no-repeat;
    background-position: calc(2px + 0.5ch) 0;
    background-size: var(--guide-w, 0ch) 100%;
}

/* ===== Tablet on-screen game controller (js/tablet-controller.js) =============
   Pinned to the REAL device screen corners (thumb zones in landscape), above the
   emulator panel. env(safe-area-inset-*) keeps it clear of the iPad home indicator
   / rounded corners; position:fixed to the TOP-LEVEL viewport means it never clips
   off the bottom the way an iframe-fixed overlay did. Shown only on a tablet while
   the emulator is open (toggled from js/tablet-controller.js). */
.vctrl {
    position: fixed;
    inset: 0;
    pointer-events: none;
    touch-action: none;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    z-index: 100000;
    /* ONE scale for the whole controller — every size below is a multiple of it.
       An iPad mini has ~40% less screen than a 12.9" Pro; a pad sized for one is
       either cramped or a land-grab on the other. Keyed to the SHORT edge, since
       that is what the thumb arc and the free margin actually track.
       js/tablet-controller.js derives the stick/tilt travel from the RENDERED box,
       so the axis mapping follows this automatically. */
    --u: 1;
}
@media (max-height: 800px), (max-width: 900px) { .vctrl { --u: 0.84; } }   /* iPad mini / split view */
@media (min-width: 1180px) and (min-height: 1000px) { .vctrl { --u: 1.12; } }  /* 12.9" Pro */
.vctrl[hidden] { display: none; }
.vctrl-btn {
    pointer-events: auto;
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    font: 700 18px/1 system-ui, sans-serif;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    background: rgba(48,54,66,0.92);
    border: 2px solid rgba(255,255,255,0.42);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    transition: background .08s, transform .08s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none; touch-action: none;
}
.vctrl-btn.on { background: rgba(97,175,239,0.92); border-color: rgba(220,235,255,0.95); transform: scale(0.92); }
/* The whole cluster (incl. the gaps between buttons) must absorb touches with
   touch-action:none so rapid taps in the D-pad cross never fall through to the
   page and trigger the browser's double-tap zoom. */
.vctrl-cluster, .vctrl-dpad, .vctrl-stick, .vctrl-tilt, .vctrl-actions, .vctrl-sys,
.vctrl-modes { pointer-events: auto; touch-action: none; }
/* The three left-hand modes (D-pad / stick / tilt) share ONE 150px footprint in
   the thumb zone — only one is ever un-hidden — with the mode chips above it.
   NOT .vctrl-left: that already means the D-pad's ◀ button. */
.vctrl-cluster { position: absolute; left: calc(20px + env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: calc(150px * var(--u)); height: calc(150px * var(--u)); }
.vctrl-dpad, .vctrl-stick, .vctrl-tilt { position: absolute; inset: 0; }
.vctrl-dpad[hidden], .vctrl-stick[hidden], .vctrl-tilt[hidden], .vctrl-btn[hidden] { display: none; }
.vctrl-d { width: calc(50px * var(--u)); height: calc(50px * var(--u)); font-size: calc(20px * var(--u)); }
.vctrl-up { top:0; left:calc(50px * var(--u)); } .vctrl-down { bottom:0; left:calc(50px * var(--u)); }
.vctrl-left { left:0; top:calc(50px * var(--u)); } .vctrl-right { right:0; top:calc(50px * var(--u)); }

/* mode chips — sit above the cluster, out of the thumb's resting arc */
.vctrl-modes { position: absolute; left: 0; bottom: calc(158px * var(--u)); display: flex; gap: calc(6px * var(--u)); }
.vctrl-mode {
    width: calc(46px * var(--u)); height: calc(26px * var(--u)); display: flex; align-items: center; justify-content: center;
    font: 700 calc(9px * var(--u))/1 system-ui, sans-serif; letter-spacing: .4px; color: rgba(255,255,255,0.72);
    background: rgba(20,22,28,0.62); border: 1.5px solid rgba(255,255,255,0.26);
    border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
.vctrl-mode--on { background: rgba(97,175,239,0.72); border-color: rgba(220,235,255,0.85); color: #fff; }
/* why the controls just changed shape by themselves (auto-select from the code) */
.vctrl-toast {
    position: absolute; left: 0; bottom: calc(190px * var(--u)); white-space: nowrap;
    padding: calc(4px * var(--u)) calc(8px * var(--u));
    font: 600 calc(10px * var(--u))/1.4 system-ui, sans-serif; color: #fff;
    background: rgba(97,175,239,0.86); border-radius: 6px; pointer-events: none;
}
.vctrl-toast[hidden] { display: none; }

/* analog stick — travel radius must match STICK_R in js/tablet-controller.js */
.vctrl-stick { display: flex; align-items: center; justify-content: center; }
.vctrl-stick-base {
    position: relative; width: calc(132px * var(--u)); height: calc(132px * var(--u)); border-radius: 50%;
    background: rgba(28,32,40,0.72); border: 2px solid rgba(255,255,255,0.34);
    box-shadow: inset 0 2px 12px rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
}
.vctrl-knob {
    width: calc(58px * var(--u)); height: calc(58px * var(--u)); border-radius: 50%;
    background: rgba(97,175,239,0.92); border: 2px solid rgba(220,235,255,0.9);
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    transition: transform .05s linear;
}
/* tilt pad — a bubble level, same idea as the emulator's HW-panel widget */
.vctrl-tilt { display: flex; align-items: center; justify-content: center; }
.vctrl-tilt-pad {
    position: relative; width: calc(132px * var(--u)); height: calc(132px * var(--u)); border-radius: 50%;
    background: rgba(28,32,40,0.72); border: 2px solid rgba(255,255,255,0.34);
    box-shadow: inset 0 2px 12px rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
}
.vctrl-tilt-pad::before {   /* centre crosshair = board level */
    content: ''; position: absolute; width: calc(46px * var(--u)); height: calc(46px * var(--u)); border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.3);
}
.vctrl-tilt-knob {
    width: calc(40px * var(--u)); height: calc(40px * var(--u)); border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, rgba(150,230,255,0.98), rgba(60,170,215,0.92));
    border: 2px solid rgba(225,248,255,0.92); box-shadow: 0 3px 10px rgba(0,0,0,0.45);
    transition: transform .05s linear;
}
/* LEVEL / SHAKE ride above A/B, only in tilt mode. .vctrl-btn is absolute, so
   they are placed explicitly rather than by flow. */
.vctrl-tiltbtn { height: calc(30px * var(--u)); padding: 0 calc(12px * var(--u)); border-radius: 15px; font-size: calc(11px * var(--u)); letter-spacing: .5px; background: rgba(40,45,56,0.9); }
.vctrl-level { right: calc(78px * var(--u)); top: calc(-34px * var(--u)); }
.vctrl-shake { right: 0; top: calc(-34px * var(--u)); }
.vctrl-actions { position: absolute; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: calc(150px * var(--u)); height: calc(120px * var(--u)); }
.vctrl-actions .vctrl-btn { border-radius: 50%; }
.vctrl-b { width: calc(58px * var(--u)); height: calc(58px * var(--u)); left: 0; bottom: calc(8px * var(--u)); font-size: calc(18px * var(--u)); }
.vctrl-a { width: calc(74px * var(--u)); height: calc(74px * var(--u)); right: 0; top: calc(6px * var(--u)); font-size: calc(22px * var(--u)); background: rgba(224,108,117,0.9); border-color: rgba(255,210,214,0.72); }
.vctrl-a.on { background: rgba(240,128,136,1); }
.vctrl-sys { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 10px; }
.vctrl-sysbtn { position: relative; height: calc(34px * var(--u)); padding: 0 calc(16px * var(--u)); border-radius: 17px; font-size: calc(12px * var(--u)); letter-spacing: .6px; white-space: nowrap; background: rgba(40,45,56,0.9); }
.vctrl-toggle {
    /* bottom-centre, above the Start/Back pair — NOT top-right, where it collided
       with the emulator panel's close (×) / pin buttons. */
    position: fixed;
    left: 50%; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; line-height: 1;
    background: rgba(20,22,28,0.6); border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 10px; cursor: pointer; z-index: 100001; opacity: 0.78;
    transition: opacity .1s, background .1s; -webkit-tap-highlight-color: transparent;
}
.vctrl-toggle[hidden] { display: none; }
.vctrl-toggle--on { background: rgba(97,175,239,0.7); border-color: rgba(220,235,255,0.8); opacity: 1; }
/* a real controller is attached: the on-screen pad is off and cannot be shown
   (the emulator reads the real pad instead) — say so rather than sit there dead */
.vctrl-toggle--gamepad { background: rgba(80,205,137,0.55); border-color: rgba(190,245,215,0.7); opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) {
    .vctrl-btn, .vctrl-toggle, .vctrl-knob, .vctrl-tilt-knob { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Contribute an Example — header button + two-column modal
   Uses the app's real design tokens (single light theme) and mirrors
   the #examplePreviewModal / .preview-card visual language.
   ═══════════════════════════════════════════════════════════════ */
.examples-header-right { display: flex; align-items: center; gap: 10px; }
.btn-contribute {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--border-radius-sm); cursor: pointer;
    font-size: 12px; font-weight: 600;
    background: var(--tesa-primary); color: #fff; border: none;
    transition: background var(--transition);
}
.btn-contribute:hover { background: var(--tesa-primary-hover); }

.contribute-overlay {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    padding: 20px;
}
.contribute-overlay.hidden { display: none; }
.contribute-card {
    width: min(1280px, 97vw); max-height: 92vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 16px;
    box-shadow: var(--shadow-lg); font-family: var(--font-sans);
    animation: welcomeCardIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contribute-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.contribute-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.contribute-foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 20px; border-top: 1px solid var(--border-color); flex-shrink: 0;
}
.cb-actions { display: flex; gap: 8px; margin-left: auto; }

/* Two-column body: properties left, editor right */
.contribute-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.cb-col-props {
    flex: 0 0 340px; width: 340px; padding: 18px 20px; overflow-y: auto;
    border-right: 1px solid var(--border-color);
}
.cb-col-code { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 18px 20px; }
.cb-col-code > label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.cb-code-mount {
    flex: 1; min-height: 340px; overflow: hidden;
    border: 1px solid var(--border-color); border-radius: var(--border-radius);
    background: var(--bg-code);
}
.cb-code-mount .cm-editor { height: 100%; }
.cb-code-mount .cm-scroller { font-family: var(--font-mono); font-size: 13px; }
.cb-code-fallback {
    width: 100%; height: 100%; min-height: 340px; border: none; resize: none;
    background: var(--bg-code); color: var(--text-code);
    font-family: var(--font-mono); font-size: 13px; padding: 10px; white-space: pre;
}

/* Property inputs — REAL tokens (fixes the black-on-white bug) */
.cb-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.cb-row label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.cb-hint { font-weight: 400; color: var(--text-tertiary); font-size: 11px; }
.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contribute-card input[type=text],
.contribute-card textarea,
.contribute-card select {
    width: 100%; padding: 8px 10px; border-radius: var(--border-radius-sm);
    font-size: 13px; font-family: var(--font-sans);
    background: var(--bg-muted); color: var(--text-primary);
    border: 1px solid var(--border-color); transition: border-color var(--transition);
}
.contribute-card input:focus, .contribute-card textarea:focus, .contribute-card select:focus {
    outline: none; border-color: var(--tesa-primary); background: var(--bg-surface);
}
.contribute-card ::placeholder { color: var(--text-tertiary); }

/* Icon picker */
.cb-icon-bar { display: flex; align-items: center; gap: 8px; }
.cb-icon-search { flex: 1; }
.cb-icon-sel { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); min-width: 90px; }
.cb-icon-sel img { width: 20px; height: 20px; object-fit: contain; }
.cb-icon-grid {
    margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 6px; max-height: 150px; overflow-y: auto; padding: 6px;
    background: var(--bg-muted); border: 1px solid var(--border-color); border-radius: var(--border-radius);
}
.cb-icon {
    display: grid; place-items: center; padding: 5px; cursor: pointer;
    border-radius: var(--border-radius-sm); background: var(--bg-surface);
    border: 1px solid transparent; transition: all var(--transition);
}
.cb-icon:hover { background: var(--tesa-primary-subtle); border-color: var(--border-hover); }
.cb-icon.selected { border-color: var(--tesa-primary); background: var(--tesa-primary-subtle); }
.cb-icon img { width: 24px; height: 24px; object-fit: contain; }

/* Identity / GitHub sign-in */
.cb-identity { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.cb-avatar { width: 22px; height: 22px; border-radius: 50%; }
.btn-github {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
    border-radius: var(--border-radius-sm); background: var(--tesa-navy); color: #fff;
    border: 1px solid var(--tesa-navy); cursor: pointer; font-size: 12px; font-weight: 600;
    transition: filter var(--transition);
}
.btn-github:hover { filter: brightness(1.4); }
.cb-link { background: none; border: none; color: var(--tesa-primary); cursor: pointer; font-size: 11px; padding: 0; }

.cb-msg { padding: 0 20px 14px; font-size: 12px; }
.cb-msg.err { color: var(--color-danger); }
.cb-msg.ok { color: var(--color-success); }

/* Collapse to one column on tablet-portrait / narrow desktop */
@media (max-width: 900px) {
    .contribute-body { flex-direction: column; overflow-y: auto; }
    .cb-col-props { flex: none; width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); }
    .cb-col-code { min-height: 340px; }
    .cb-code-mount { min-height: 260px; }
}