/**
 * CrashBasic Theme Variables
 * CSS custom properties for theming support
 */

:root {
  /* ========================================
   * Default Theme: Monaco Dark
   * ======================================== */

  /* Backgrounds */
  --cb-bg-primary: #1e1e1e;
  --cb-bg-secondary: #2d2d30;
  --cb-bg-tertiary: #252526;
  --cb-bg-input: #3c3c3c;
  --cb-bg-hover: #3e3e42;
  --cb-bg-active: #094771;
  --cb-bg-selected: #094771;

  /* Borders */
  --cb-border: #3e3e42;
  --cb-border-light: #454545;
  --cb-border-focus: #007acc;

  /* Text */
  --cb-text-primary: #d4d4d4;
  --cb-text-secondary: #cccccc;
  --cb-text-muted: #888888;
  --cb-text-disabled: #555555;
  --cb-text-inverse: #1e1e1e;

  /* Accent Colors */
  /* Desaturated steel blue for selected/active surfaces — the old #0e639c was
     too saturated for selection highlights (harsh against the dark UI). The
     punchy brand blue lives on in --cb-btn-primary-bg for CTAs. */
  --cb-accent-primary: #3b7091;
  --cb-accent-hover: #4684aa;
  --cb-accent-active: #094771;
  --cb-accent-success: #16825d;
  --cb-accent-success-hover: #1a9d6f;
  --cb-accent-warning: #cc6633;
  --cb-accent-warning-hover: #e07539;
  --cb-accent-danger: #f44747;
  --cb-accent-danger-hover: #ff5555;
  --cb-accent-text: #ffffff;

  /* Status Bar */
  --cb-status-bar: #007acc;
  --cb-status-bar-text: #ffffff;

  /* Scrollbars */
  --cb-scrollbar-thumb: #424242;
  --cb-scrollbar-thumb-hover: #4e4e4e;
  --cb-scrollbar-track: #1e1e1e;

  /* Focus & Glow */
  --cb-focus-glow: rgba(59, 112, 145, 0.3);
  --cb-focus-outline: #007acc;

  /* Syntax Highlighting (for non-Monaco elements) */
  --cb-syntax-keyword: #569cd6;
  --cb-syntax-function: #dcdcaa;
  --cb-syntax-type: #4ec9b0;
  --cb-syntax-number: #b5cea8;
  --cb-syntax-string: #ce9178;
  --cb-syntax-comment: #6a9955;
  --cb-syntax-variable: #9cdcfe;

  /* Special UI */
  --cb-loading-bg: #1a1a2e;
  --cb-loading-text: #e0e0e0;
  --cb-loading-accent: #00d4ff;
  --cb-modal-overlay: rgba(0, 0, 0, 0.7);
  --cb-tooltip-bg: #252526;
  --cb-tooltip-text: #cccccc;

  /* Buttons */
  --cb-btn-bg: #3c3c3c;
  --cb-btn-text: #cccccc;
  --cb-btn-hover: #4e4e4e;
  --cb-btn-active: #555555;
  --cb-btn-primary-bg: #0e639c;
  --cb-btn-primary-text: #ffffff;

  /* Menu */
  --cb-menu-bg: #252526;
  --cb-menu-hover: #094771;
  --cb-menu-separator: #3e3e42;

  /* Widget */
  --cb-widget-header: #2d2d30;
  --cb-widget-body: #1e1e1e;

  /* Scrollbar (matches Monaco style) */
  --cb-scrollbar-thumb: rgba(121, 121, 121, 0.4);
  --cb-scrollbar-thumb-hover: rgba(100, 100, 100, 0.7);

  /* Debug Panel */
  --cb-debug-bg: #252526;
  --cb-debug-header: #333333;
  --cb-debug-border: #3e3e42;
}

/* Dark theme class (same as default) */
body.theme-dark {
  /* Uses :root defaults */
}

/* ========================================
 * Crash-tan Theme (Dark with Pink Accents)
 * Based on the Crash-tan Teaches BASIC book theme
 * ======================================== */
body.theme-crash-tan {
  /* Backgrounds - Dark blue base */
  --cb-bg-primary: #1a1a2e;
  --cb-bg-secondary: #16213e;
  --cb-bg-tertiary: #0f0f1a;
  --cb-bg-input: #1a1a2e;
  --cb-bg-hover: #252550;
  --cb-bg-active: #c4607f;
  --cb-bg-selected: #2a2a4e;

  /* Borders */
  --cb-border: #333355;
  --cb-border-light: #444466;
  --cb-border-focus: #c4607f;

  /* Text - Light for contrast */
  --cb-text-primary: #e6e6e6;
  --cb-text-secondary: #cccccc;
  --cb-text-muted: #888899;
  --cb-text-disabled: #555566;
  --cb-text-inverse: #1a1a2e;

  /* Accent Colors - Pink/Magenta primary (for highlights, borders, focus) */
  --cb-accent-primary: #c4607f;
  --cb-accent-hover: #d07e96;
  --cb-accent-active: #a84e6b;
  --cb-accent-success: #178a5a;
  --cb-accent-success-hover: #1ea869;
  --cb-accent-warning: #b3741f;
  --cb-accent-warning-hover: #c98428;
  --cb-accent-danger: #ff5555;
  --cb-accent-danger-hover: #ff7777;
  --cb-accent-text: #ffffff;

  /* Status Bar */
  --cb-status-bar: #c4607f;
  --cb-status-bar-text: #ffffff;

  /* Scrollbars */
  --cb-scrollbar-thumb: #444466;
  --cb-scrollbar-thumb-hover: #555577;
  --cb-scrollbar-track: #1a1a2e;

  /* Focus & Glow */
  --cb-focus-glow: rgba(196, 96, 127, 0.35);
  --cb-focus-outline: #c4607f;

  /* Syntax Highlighting - Dracula-inspired for book theme */
  --cb-syntax-keyword: #ff79c6;
  --cb-syntax-function: #50fa7b;
  --cb-syntax-type: #8be9fd;
  --cb-syntax-number: #bd93f9;
  --cb-syntax-string: #f1fa8c;
  --cb-syntax-comment: #6272a4;
  --cb-syntax-variable: #f8f8f2;

  /* Special UI */
  --cb-loading-bg: #1a1a2e;
  --cb-loading-text: #e6e6e6;
  --cb-loading-accent: #c4607f;
  --cb-modal-overlay: rgba(0, 0, 0, 0.7);
  --cb-tooltip-bg: #16213e;
  --cb-tooltip-text: #e6e6e6;

  /* Buttons */
  --cb-btn-bg: #252550;
  --cb-btn-text: #e6e6e6;
  --cb-btn-hover: #333366;
  --cb-btn-active: #444477;
  --cb-btn-primary-bg: #c2185b;
  --cb-btn-primary-text: #ffffff;

  /* Menu */
  --cb-menu-bg: #16213e;
  --cb-menu-hover: #c4607f;
  --cb-menu-separator: #333355;

  /* Widget */
  --cb-widget-header: #16213e;
  --cb-widget-body: #1a1a2e;

  /* Debug Panel */
  --cb-debug-bg: #0f0f1a;
  --cb-debug-header: #16213e;
  --cb-debug-border: #333355;
}

/* ========================================
 * Dr. Brane Theme (Light with Maroon Accents)
 * Scientific/academic feel - Crash-tan's creator
 * ======================================== */
body.theme-dr-brane {
  /* Backgrounds - Aged parchment tones (toned down from bright paper) */
  --cb-bg-primary: #E0D8CF;
  --cb-bg-secondary: #D4CBC1;
  --cb-bg-tertiary: #C9BFB4;
  --cb-bg-input: #EAE3DB;
  --cb-bg-hover: #CBBFB3;
  --cb-bg-active: #7A1F2B;
  --cb-bg-selected: #BEB3A7;

  /* Borders */
  --cb-border: #A89A8F;
  --cb-border-light: #BEB3A7;
  --cb-border-focus: #7A1F2B;

  /* Text - Dark for contrast on parchment */
  --cb-text-primary: #1F1F1F;
  --cb-text-secondary: #3D3D3D;
  --cb-text-muted: #6A6A6A;
  --cb-text-disabled: #999999;
  --cb-text-inverse: #FFFFFF;

  /* Accent Colors - Maroon primary */
  --cb-accent-primary: #7A1F2B;
  --cb-accent-hover: #8B2A36;
  --cb-accent-active: #5C1720;
  --cb-accent-success: #2E7D32;
  --cb-accent-success-hover: #388E3C;
  --cb-accent-warning: #D4B84E;
  --cb-accent-warning-hover: #DCCA6A;
  --cb-accent-danger: #C62828;
  --cb-accent-danger-hover: #D32F2F;
  --cb-accent-text: #ffffff;

  /* Status Bar */
  --cb-status-bar: #7A1F2B;
  --cb-status-bar-text: #FFFFFF;

  /* Scrollbars */
  --cb-scrollbar-thumb: #A89A8F;
  --cb-scrollbar-thumb-hover: #968880;
  --cb-scrollbar-track: #D4CBC1;

  /* Focus & Glow */
  --cb-focus-glow: rgba(122, 31, 43, 0.35);
  --cb-focus-outline: #7A1F2B;

  /* Syntax Highlighting - Academic/professional */
  --cb-syntax-keyword: #7A1F2B;
  --cb-syntax-function: #3A8A90;
  --cb-syntax-type: #3A8A90;
  --cb-syntax-number: #7A3B0E;
  --cb-syntax-string: #1B5E20;
  --cb-syntax-comment: #807468;
  --cb-syntax-variable: #1A0A05;

  /* Special UI */
  --cb-loading-bg: #E0D8CF;
  --cb-loading-text: #1F1F1F;
  --cb-loading-accent: #7A1F2B;
  --cb-modal-overlay: rgba(0, 0, 0, 0.5);
  --cb-tooltip-bg: #1F1F1F;
  --cb-tooltip-text: #FFFFFF;

  /* Buttons */
  --cb-btn-bg: #D4CBC1;
  --cb-btn-text: #1F1F1F;
  --cb-btn-hover: #CBBFB3;
  --cb-btn-active: #BEB3A7;
  --cb-btn-primary-bg: #7A1F2B;
  --cb-btn-primary-text: #ffffff;

  /* Menu */
  --cb-menu-bg: #E0D8CF;
  --cb-menu-hover: #7A1F2B;
  --cb-menu-separator: #A89A8F;

  /* Widget */
  --cb-widget-header: #D4CBC1;
  --cb-widget-body: #E0D8CF;

  /* Debug Panel */
  --cb-debug-bg: #C9BFB4;
  --cb-debug-header: #D4CBC1;
  --cb-debug-border: #A89A8F;
}

/* ========================================
 * Victor Hardline Theme (Dark Corporate/Dystopian)
 * Cold, calculated - the villain's aesthetic
 * ======================================== */
body.theme-victor-hardline {
  /* Backgrounds - Near black with steel tones */
  --cb-bg-primary: #0F1115;
  --cb-bg-secondary: #1C1F26;
  --cb-bg-tertiary: #161920;
  --cb-bg-input: #1C1F26;
  --cb-bg-hover: #242933;
  --cb-bg-active: #00B4D8;
  --cb-bg-selected: #2F3644;

  /* Borders */
  --cb-border: #3A3F4B;
  --cb-border-light: #4A5058;
  --cb-border-focus: #00B4D8;

  /* Text - High contrast light on dark */
  --cb-text-primary: #EDEDED;
  --cb-text-secondary: #9AA0A6;
  --cb-text-muted: #5C6B73;
  --cb-text-disabled: #3A3F4B;
  --cb-text-inverse: #0F1115;

  /* Accent Colors - Compliance Blue primary */
  --cb-accent-primary: #00B4D8;
  --cb-accent-hover: #48CAE4;
  --cb-accent-active: #0096C7;
  --cb-accent-success: #06D6A0;
  --cb-accent-success-hover: #1DE9B6;
  --cb-accent-warning: #FFB703;
  --cb-accent-warning-hover: #FFC940;
  --cb-accent-danger: #EF476F;
  --cb-accent-danger-hover: #FF6B8A;
  --cb-accent-text: #0F1115;

  /* Status Bar */
  --cb-status-bar: #00B4D8;
  --cb-status-bar-text: #0F1115;

  /* Scrollbars */
  --cb-scrollbar-thumb: #3A3F4B;
  --cb-scrollbar-thumb-hover: #4A5058;
  --cb-scrollbar-track: #0F1115;

  /* Focus & Glow */
  --cb-focus-glow: rgba(0, 180, 216, 0.5);
  --cb-focus-outline: #00B4D8;

  /* Syntax Highlighting - Cold corporate colors */
  --cb-syntax-keyword: #00B4D8;
  --cb-syntax-function: #5C6B73;
  --cb-syntax-type: #00B4D8;
  --cb-syntax-number: #90E0EF;
  --cb-syntax-string: #9AA0A6;
  --cb-syntax-comment: #5C6B73;
  --cb-syntax-variable: #EDEDED;

  /* Special UI */
  --cb-loading-bg: #0F1115;
  --cb-loading-text: #EDEDED;
  --cb-loading-accent: #00B4D8;
  --cb-modal-overlay: rgba(0, 0, 0, 0.85);
  --cb-tooltip-bg: #1C1F26;
  --cb-tooltip-text: #EDEDED;

  /* Buttons */
  --cb-btn-bg: #2E2E2E;
  --cb-btn-text: #EDEDED;
  --cb-btn-hover: #3A3F4B;
  --cb-btn-active: #4A5058;
  --cb-btn-primary-bg: #0077b6;
  --cb-btn-primary-text: #ffffff;

  /* Menu */
  --cb-menu-bg: #1C1F26;
  --cb-menu-hover: #00B4D8;
  --cb-menu-separator: #3A3F4B;

  /* Widget */
  --cb-widget-header: #1C1F26;
  --cb-widget-body: #0F1115;

  /* Debug Panel */
  --cb-debug-bg: #161920;
  --cb-debug-header: #1C1F26;
  --cb-debug-border: #3A3F4B;
}

/**
 * Tab Group Widget Styles
 * Chrome-inspired tab design for widget tab groups
 */

/* Tab Group Container */
.tab-group-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--cb-bg-primary);
}

/* Tab Bar */
.tab-group-tabs {
  display: flex;
  background-color: var(--cb-bg-secondary);
  flex-shrink: 0;
  overflow: hidden;
  height: 35px;
}

/* Individual Tab */
.tab-group-tab {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background-color: var(--cb-bg-secondary);
  border-right: 1px solid var(--cb-border);
  cursor: pointer;
  user-select: none;
  min-width: 120px;
  max-width: 200px;
  position: relative;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.tab-group-tab:hover {
  background-color: var(--cb-bg-hover);
}

.tab-group-tab.active {
  background-color: var(--cb-bg-primary);
  border-bottom: 2px solid var(--cb-accent-primary);
}

/* Tab Drag Handle */
.tab-drag-handle {
  cursor: grab;
  color: var(--cb-text-muted);
  font-size: 10px;
  margin-right: 6px;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 2px;
  line-height: 1;
}

.tab-group-tab:hover .tab-drag-handle {
  opacity: 1;
}

.tab-drag-handle:hover {
  color: var(--cb-text-secondary);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.tab-drag-handle:active {
  cursor: grabbing;
}

/* Tab Icon */
.tab-icon {
  font-size: 14px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Tab Title */
.tab-title {
  flex: 1;
  font-size: 13px;
  color: var(--cb-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tab-group-tab.active .tab-title {
  color: var(--cb-text-primary);
  font-weight: 500;
}

/* Tab Close Button */
.tab-close {
  background: none;
  border: none;
  color: var(--cb-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  line-height: 1;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-group-tab:hover .tab-close {
  opacity: 1;
}

.tab-close:hover {
  color: var(--cb-text-inverse);
  background-color: var(--cb-accent-danger);
}

/* Tab Popout Button */
.tab-popout {
  background: none;
  border: none;
  color: var(--cb-text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  line-height: 1;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-group-tab:hover .tab-popout {
  opacity: 1;
}

.tab-popout:hover {
  color: var(--cb-text-inverse);
  background-color: var(--cb-accent-primary);
}

/* Tab Help Button */
.tab-help {
  background: none;
  border: none;
  color: var(--cb-text-muted);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  line-height: 1;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-group-tab:hover .tab-help {
  opacity: 1;
}

.tab-help:hover {
  color: var(--cb-text-inverse);
  background-color: var(--cb-accent-primary);
}

/* Tab Content Area */
.tab-group-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  background-color: var(--cb-bg-primary);
}

.tab-group-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: auto;
}

/* Ensure direct children of tab panel fill the space */
.tab-group-panel > * {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.tab-group-panel.active {
  display: block;
}

/* Drop Zone Overlay (for future drag-drop implementation) */
.tab-group-drop-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--cb-focus-glow);
  border: 2px dashed var(--cb-accent-primary);
  display: none;
  z-index: 1000;
  pointer-events: none;
}

.tab-group-drop-zone.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drop-zone-center {
  background-color: var(--cb-focus-glow);
  border: 2px solid var(--cb-accent-primary);
  border-radius: 8px;
  padding: 24px 32px;
  text-align: center;
  pointer-events: none;
}

.drop-zone-icon {
  font-size: 48px;
  margin-bottom: 8px;
  opacity: 0.8;
}

.drop-zone-text {
  color: var(--cb-accent-primary);
  font-weight: bold;
  font-size: 14px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Animations */
@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-group-tab {
  animation: tab-fade-in 0.2s ease-out;
}

/* Focus state for accessibility */
.tab-group-tab:focus {
  outline: 1px solid var(--cb-focus-outline);
  outline-offset: -1px;
}

/* Scrollbar styling for tab content */
.tab-group-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--cb-scrollbar-thumb) var(--cb-scrollbar-track);
}

.tab-group-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.tab-group-panel::-webkit-scrollbar-track {
  background: var(--cb-scrollbar-track);
}

.tab-group-panel::-webkit-scrollbar-thumb {
  background: var(--cb-scrollbar-thumb);
  border-radius: 5px;
}

.tab-group-panel::-webkit-scrollbar-thumb:hover {
  background: var(--cb-scrollbar-thumb-hover);
}

/* Empty state */
.tab-group-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--cb-text-muted);
  font-size: 14px;
}

/* Tab group in split-pane - ensure proper sizing */
.widget-pane .tab-group-container {
  width: 100%;
  height: 100%;
}

/* Tab Overflow Dropdown */
.tab-overflow-container {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  position: relative;
  margin-left: auto;
  background-color: var(--cb-bg-secondary);
  border-left: 1px solid var(--cb-border);
}

.tab-overflow-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--cb-text-secondary);
  cursor: pointer;
  padding: 0 10px;
  height: 35px;
  font-size: 12px;
  transition: background-color 0.2s;
}

.tab-overflow-btn:hover {
  background-color: var(--cb-bg-hover);
}

.tab-overflow-btn.visible {
  display: flex;
}

.tab-overflow-count {
  background-color: var(--cb-accent-primary);
  color: var(--cb-text-inverse);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  min-width: 14px;
  text-align: center;
}

.tab-overflow-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  max-width: 280px;
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--cb-menu-bg);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.tab-overflow-menu.open {
  display: block;
}

.tab-overflow-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s;
  border-bottom: 1px solid var(--cb-border);
}

.tab-overflow-item:last-child {
  border-bottom: none;
}

.tab-overflow-item:hover {
  background-color: var(--cb-bg-hover);
}

.tab-overflow-item.active {
  background-color: var(--cb-menu-hover);
}

.tab-overflow-item-icon {
  font-size: 14px;
  margin-right: 8px;
  flex-shrink: 0;
}

.tab-overflow-item-title {
  flex: 1;
  font-size: 13px;
  color: var(--cb-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-overflow-item.active .tab-overflow-item-title {
  color: var(--cb-text-primary);
  font-weight: 500;
}

/* Scrollbar for overflow menu */
.tab-overflow-menu::-webkit-scrollbar {
  width: 6px;
}

.tab-overflow-menu::-webkit-scrollbar-track {
  background: var(--cb-menu-bg);
}

.tab-overflow-menu::-webkit-scrollbar-thumb {
  background: var(--cb-scrollbar-thumb);
  border-radius: 3px;
}

.tab-overflow-menu::-webkit-scrollbar-thumb:hover {
  background: var(--cb-scrollbar-thumb-hover);
}

/* Load IBM BIOS font for authentic retro text rendering */
@font-face {
  font-family: 'IBM BIOS';
  src: url(/assets/Web437_IBM_BIOS-bde4fb6491be7e095556.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* Ensure font loads before use */
}

/* The engine's other built-in face. Declared here so the editors' Text tool can
   rasterize with it (the runtime injects its own @font-face separately). */
@font-face {
  font-family: 'IBM EGA 8x8';
  src: url(/assets/Web437_IBM_EGA_8x8-ff9a821a83d2c0d3eea2.woff) format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--cb-bg-primary);
  color: var(--cb-text-primary);
  overflow: hidden;
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--cb-bg-primary);
}

/* Browser recommendation banner */
.browser-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(90deg, #4285f4, #34a853);
  color: #fff;
  padding: 8px 16px;
  font-size: 13px;
  text-align: center;
  position: relative;
  z-index: 10000;
}

.browser-banner a {
  text-decoration: underline;
}

.browser-banner a:hover {
  text-decoration: none;
}

.browser-banner-dismiss {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.15s;
}

.browser-banner-dismiss:hover {
  opacity: 1;
}

/* Git Warning Banner (inline in toolbar) */
.git-warning-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cb-text-muted, #999);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  margin-left: 16px;
}

.git-warning-dismiss {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.git-warning-dismiss:hover {
  opacity: 1;
}

.toolbar-container {
  flex-shrink: 0;
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  background-color: var(--cb-bg-primary);
}

/* Split-pane container fills content area */
#grid-container {
  width: 100%;
  height: 100%;
}

.toolbar {
  background-color: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Add padding for window controls in Electron */
body.electron-app .toolbar {
  padding-left: 80px; /* Space for macOS traffic lights */
  -webkit-app-region: drag; /* Make toolbar draggable */
}

/* Make buttons clickable (not draggable) */
body.electron-app .toolbar-btn {
  -webkit-app-region: no-drag;
}

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

.toolbar-left {
  flex: 0 0 auto;
}

/* Ensure first button group doesn't overlap window controls */
body.electron-app .toolbar-left:first-child {
  margin-left: 8px; /* Additional spacing from window controls */
}

.toolbar-center {
  flex: 0 0 auto;
  margin: 0 auto;
}

.toolbar-right {
  flex: 0 0 auto;
  margin-right: 8px;
}

.toolbar-btn {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border: none;
  padding: 10px 48px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  width: auto;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toolbar-btn:hover {
  background-color: var(--cb-accent-hover);
}

.toolbar-btn:disabled {
  background-color: var(--cb-text-disabled);
  color: var(--cb-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.toolbar-btn.save-btn {
  background-color: var(--cb-accent-primary);
}

.toolbar-btn.save-btn:hover {
  background-color: var(--cb-accent-hover);
}

.toolbar-btn.run-btn {
  background-color: var(--cb-accent-success);
}

.toolbar-btn.run-btn:hover {
  background-color: var(--cb-accent-success-hover);
}

/* MIDI capture toggle. Sized here rather than inline because the global
   .toolbar-btn padding is 10px 48px, which would make it three times the width
   of the buttons it sits beside. */
.toolbar-btn.midi-capture-btn {
  margin-left: 16px;
  padding: 4px 8px;
  gap: 6px;
}

/* Off reads as off without relying on colour alone: the label says so, and the
   button drops out of the accent colour into the plain button surface. */
.toolbar-btn.midi-capture-btn[aria-pressed="false"] {
  background-color: var(--cb-btn-bg);
  color: var(--cb-text-muted);
}

.toolbar-btn.midi-capture-btn[aria-pressed="false"]:hover {
  background-color: var(--cb-btn-hover);
  color: var(--cb-btn-text);
}

.toolbar-btn.midi-capture-btn[aria-pressed="false"] > span:first-child {
  opacity: 0.5;
}

.version-info {
  color: #ffd700;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
  user-select: none;
}

.toolbar-btn.stop-btn {
  background-color: var(--cb-accent-warning);
}

.toolbar-btn.stop-btn:hover {
  background-color: var(--cb-accent-warning-hover);
}

/* View Menu Dropdown Styles */
.view-menu-container {
  position: relative;
}

.view-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background-color: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border-light);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  min-width: 200px;
  z-index: 10000;
  padding: 4px 0;
}

.view-menu-dropdown.hidden {
  display: none;
}

.view-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--cb-text-primary);
  font-size: 13px;
  user-select: none;
}

.view-menu-item:hover {
  background-color: var(--cb-menu-hover);
}

.view-menu-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.view-menu-label {
  flex: 1;
}

.view-menu-popup-btn {
  background: none;
  border: none;
  color: var(--cb-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  border-radius: 2px;
  opacity: 0.7;
  transition: all 0.2s;
}

.view-menu-popup-btn:hover {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  opacity: 1;
}

.view-menu-separator {
  height: 1px;
  background-color: var(--cb-border-light);
  margin: 4px 0;
}

/* Main Menu Dropdown Styles */
.main-menu-container {
  position: relative;
}

.main-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background-color: var(--cb-menu-bg);
  border: 1px solid var(--cb-border-light);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  min-width: 250px;
  z-index: 10000;
  padding: 4px 0;
  overflow: visible;
}

.main-menu-dropdown.hidden {
  display: none;
}

/* Menu section headers */
.menu-section-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--cb-text-muted);
  padding: 8px 16px 4px 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  user-select: none;
}

/* Menu items */
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--cb-text-primary);
  font-size: 13px;
  user-select: none;
  transition: background 0.2s;
}

.menu-item:hover {
  background-color: var(--cb-menu-hover);
}

.menu-item[data-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.menu-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.menu-label {
  flex: 1;
}

.menu-shortcut {
  font-size: 11px;
  color: var(--cb-text-muted);
  margin-left: auto;
}

.menu-separator {
  height: 1px;
  background-color: var(--cb-menu-separator);
  margin: 4px 0;
}

/* Submenu styles */
.menu-item.has-submenu {
  position: relative;
}

.menu-item.has-submenu:hover > .submenu {
  display: block;
}

.submenu-arrow {
  font-size: 10px;
  color: var(--cb-text-muted);
  margin-left: auto;
}

.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -4px;
  background-color: var(--cb-menu-bg);
  border: 1px solid var(--cb-border-light);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  min-width: 220px;
  padding: 4px 0;
  z-index: 10001;
}

/* Show submenu on hover */
.menu-item.has-submenu:hover {
  background-color: var(--cb-menu-hover);
}

.editor-container {
  flex: 1;
  overflow: hidden;
  /* Removed height: 100% - it was causing editor to extend into status bar */
}

/* Graphics Modal Styles */
.game-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.3s ease;
  outline: none;
  overflow: auto;
}

.game-canvas.hidden {
  opacity: 0;
  pointer-events: none;
}

.game-canvas:focus {
  outline: 2px solid var(--cb-focus-outline);
  outline-offset: -2px;
}

.game-canvas-content {
  background-color: var(--cb-bg-secondary);
  border: none;
  border-radius: 6px;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.game-canvas-header {
  background-color: var(--cb-bg-input);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cb-border-light);
  border-radius: 6px 6px 0 0;
}

.graphics-title {
  color: var(--cb-text-primary);
  font-size: 14px;
  font-weight: 500;
}

.keyboard-status {
  color: var(--cb-accent-success);
  font-size: 12px;
  font-weight: normal;
}

.keyboard-status.completed {
  color: var(--cb-accent-primary);
  font-weight: 500;
}

.keyboard-status.stopped {
  color: var(--cb-accent-danger);
  font-weight: 500;
}

.keyboard-status.hidden {
  display: none;
}

.graphics-controls {
  display: flex;
  gap: 4px;
}

.modal-btn {
  background-color: var(--cb-btn-bg);
  color: var(--cb-text-primary);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 0px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-btn:hover {
  background-color: var(--cb-btn-hover);
}

.modal-btn:last-child:hover {
  background-color: var(--cb-accent-warning);
}

/* Screenshot button - better contrast */
#graphics-screenshot {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  font-size: 18px;
}

#graphics-screenshot:hover {
  background-color: var(--cb-accent-hover);
}

.screenshot-container {
  position: relative;
  display: inline-block;
}

.screenshot-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--cb-menu-bg);
  border: 1px solid var(--cb-border-light);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin-top: 4px;
  z-index: 1000;
  min-width: 180px;
}

.screenshot-menu.hidden {
  display: none;
}

.screenshot-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--cb-text-primary);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s;
}

.screenshot-menu-item:hover {
  background-color: var(--cb-menu-hover);
}

.screenshot-menu-item:first-child {
  border-radius: 4px 4px 0 0;
}

.screenshot-menu-item:last-child {
  border-radius: 0 0 4px 4px;
}

.game-canvas-body {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.graphics-canvas-container {
  background-color: #000;
}

/* Play URL Mode - borderless fullscreen */
.game-canvas.play-url-mode {
  background-color: #000;
}

.game-canvas.play-url-mode .game-canvas-content {
  background-color: transparent;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.game-canvas.play-url-mode .game-canvas-body {
  width: 100%;
  height: 100%;
}

.game-canvas.play-url-mode .graphics-canvas-container {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.game-canvas.play-url-mode .graphics-canvas-container canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Full Screen Mode - scale canvas to fit browser while maintaining aspect ratio */
.game-canvas.full-screen-mode {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

.game-canvas.full-screen-mode .game-canvas-content {
  width: 100%;
  height: 100%;
  /* Don't use flex - it interferes with Phaser's Scale Manager */
  display: block;
  padding: 0;
  margin: 0;
}

.game-canvas.full-screen-mode .game-canvas-body {
  width: 100%;
  height: 100%;
  /* Don't use flex - let Phaser manage the canvas */
  display: block;
  padding: 0;
  margin: 0;
}

.game-canvas.full-screen-mode .graphics-canvas-container {
  width: 100%;
  height: 100%;
  /* Critical: Don't interfere with Phaser's positioning */
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
}

/* Full screen canvas scaling - DO NOT override Phaser's inline styles */
.game-canvas.full-screen-mode .graphics-canvas-container canvas {
  /* Let Phaser's FIT scale mode handle all sizing via inline styles */
  /* Removed !important overrides that were breaking Phaser's calculations */
  display: block;
}

/* Alternative approach using the full-screen-canvas class directly */
.full-screen-canvas {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

.full-screen-canvas canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}

.status-bar {
  background-color: var(--cb-status-bar);
  color: var(--cb-status-bar-text);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  flex-shrink: 0;
}

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

.status-item {
  padding: 0 4px;
}

#status-storage {
  cursor: pointer;
  padding: 0 8px;
  font-weight: bold;
}

#status-storage:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* Debug UI Styles - toolbar styles moved to index.html to avoid conflicts */

.debug-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.debug-button {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.debug-button:hover {
  background-color: var(--cb-accent-hover);
}

.debug-button:disabled {
  background-color: var(--cb-text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.debug-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.separator {
  width: 1px;
  height: 24px;
  background-color: #555;
  margin: 0 4px;
}

.debug-state {
  color: var(--cb-text-primary);
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
}

/* Debug Widget Header */
.debug-header {
  padding: 12px;
  background: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
  flex-shrink: 0;
}

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

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

.debug-subtitle {
  margin: 0;
  color: var(--cb-text-muted);
  font-size: 12px;
}

.debug-status-badge {
  font-size: 12px;
  font-weight: 500;
}

/* Debug Toolbar Wrapper */
.debug-toolbar-wrapper {
  padding: 8px;
  background: var(--cb-bg-tertiary);
  border-bottom: 1px solid var(--cb-border);
  flex-shrink: 0;
}

/* Debug Button Variants */
.debug-btn-primary {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.debug-btn-danger {
  background: var(--cb-accent-danger);
  color: var(--cb-text-inverse);
}

.debug-btn-success {
  background: var(--cb-accent-success);
  color: var(--cb-accent-text);
}

.debug-btn-secondary {
  background: var(--cb-btn-bg);
  color: var(--cb-text-primary);
}

/* Debug Widget Tabs */
.debug-tabs {
  display: flex;
  background: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
  flex-shrink: 0;
}

.debug-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--cb-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.debug-tab:hover:not(.active) {
  background: var(--cb-bg-hover);
  color: var(--cb-text-primary);
}

.debug-tab.active {
  color: var(--cb-text-primary);
  border-bottom-color: var(--cb-accent-primary);
}

.debug-tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.debug-tab-content > .debug-panel {
  flex: 1;
  min-height: 0;
}

/* Variable Detail Modal */
.variable-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cb-modal-overlay, rgba(0, 0, 0, 0.7));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.variable-detail-modal {
  background: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.variable-detail-header {
  padding: 12px 16px;
  background: var(--cb-bg-tertiary);
  border-bottom: 1px solid var(--cb-border);
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.variable-detail-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.variable-detail-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--cb-syntax-variable);
  font-family: 'Courier New', monospace;
}

.variable-detail-type {
  font-size: 11px;
  color: var(--cb-text-muted);
  text-transform: uppercase;
}

.variable-detail-close {
  background: transparent;
  border: none;
  color: var(--cb-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.variable-detail-close:hover {
  background: var(--cb-bg-hover);
  color: var(--cb-text-primary);
}

.variable-detail-body {
  padding: 16px;
  flex: 1;
  overflow-y: auto;
  min-height: 100px;
  max-height: 400px;
}

.variable-detail-value {
  background: var(--cb-bg-primary);
  border: 1px solid var(--cb-border-light);
  border-radius: 4px;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--cb-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.variable-detail-footer {
  padding: 12px 16px;
  background: var(--cb-bg-tertiary);
  border-top: 1px solid var(--cb-border);
  border-radius: 0 0 8px 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.variable-detail-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.variable-detail-btn-secondary {
  background: var(--cb-btn-bg);
  color: var(--cb-text-primary);
}

.variable-detail-btn-secondary:hover {
  background: var(--cb-btn-hover);
}

.variable-detail-btn-primary {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.variable-detail-btn-primary:hover {
  filter: brightness(1.1);
}

/* Clickable variable items in debug panel */
.variable-item-clickable {
  cursor: pointer;
  transition: background-color 0.2s;
}

.variable-item-clickable:hover {
  background: var(--cb-bg-hover) !important;
}

.state-idle { color: var(--cb-text-muted); }
.state-running { color: var(--cb-accent-success); }
.state-paused { color: var(--cb-accent-warning); }
.state-stepping { color: var(--cb-accent-primary); }

.debug-panels-container {
  display: none;
  background-color: var(--cb-bg-primary);
  border-top: 1px solid var(--cb-border);
  height: 300px;
  min-height: 200px;
  flex-shrink: 0;
  overflow: hidden;
  width: 100%;
}

.debug-panels-container.visible {
  display: block;
}

.debug-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  gap: 1px;
  background-color: var(--cb-border);
}

.debug-panel {
  background-color: var(--cb-debug-bg);
  border: 1px solid var(--cb-debug-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100px;
}

.debug-panel.debug-console {
  grid-column: 1 / -1;
}

.debug-panel-header {
  background-color: var(--cb-debug-header);
  color: var(--cb-text-primary);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--cb-debug-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.debug-panel-content {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--cb-text-primary);
}

.panel-placeholder {
  color: var(--cb-text-muted);
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.panel-button {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border: none;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
}

.panel-button:hover {
  background-color: var(--cb-accent-hover);
}

/* Console panel (live push) — submit Crash BASIC to the running interpreter */
.debug-panel-console {
  display: flex;
  flex-direction: column;
  min-height: 0; /* let the log scroll instead of pushing the input off-panel */
}

.debug-console-log {
  font-family: 'Courier New', monospace;
  min-height: 0;
}

.debug-console-entry {
  padding: 2px 0;
  word-break: break-word;
}

/* pre-wrap belongs on the text itself, not the wrapper: on the wrapper it also
   preserves the template's own newlines/indentation between the child divs,
   which renders as blank lines around every entry. */
.debug-console-source {
  white-space: pre-wrap;
}

.debug-console-caret {
  display: inline-block;
  width: 14px;
  color: var(--cb-text-muted);
  user-select: none;
}

.debug-console-entry.kind-input .debug-console-source {
  color: var(--cb-text-primary);
}

/* A pushed selection/file, echoed so the log shows what changed and when. */
.debug-console-entry.kind-push .debug-console-source {
  color: var(--cb-syntax-type);
}

/* The value a bare expression evaluated to — the thing you asked for. */
.debug-console-entry.kind-value .debug-console-source {
  color: var(--cb-syntax-string);
}

/* Ran, nothing to show (a definition hot-swapped, a statement executed). */
.debug-console-entry.kind-ok .debug-console-source {
  color: var(--cb-accent-success);
}

.debug-console-entry.kind-error .debug-console-source {
  color: var(--cb-accent-danger);
}

.debug-console-detail {
  color: var(--cb-text-muted);
  padding-left: 14px; /* align under the caret column */
  font-size: 11px;
  white-space: pre-wrap;
}

.debug-console-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid var(--cb-border);
  background-color: var(--cb-bg-secondary);
}

.debug-console-prompt {
  color: var(--cb-accent-primary);
  font-family: 'Courier New', monospace;
  user-select: none;
}

.debug-console-input {
  flex: 1;
  background-color: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  padding: 4px 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.debug-console-input:focus {
  outline: none;
  border-color: var(--cb-border-focus);
  box-shadow: var(--cb-focus-glow);
}

.debug-console-input:disabled {
  color: var(--cb-text-disabled);
  cursor: not-allowed;
}

/* Variable panel styles */
.debug-variable {
  display: flex;
  padding: 4px 0;
  border-bottom: 1px solid #333;
  gap: 8px;
  align-items: center;
}

.debug-variable-name {
  font-weight: 500;
  color: var(--cb-syntax-variable);
  min-width: 80px;
}

.debug-variable-value {
  color: var(--cb-syntax-string);
  flex: 1;
  font-family: 'Courier New', monospace;
}

.debug-variable-type {
  color: var(--cb-syntax-type);
  font-size: 10px;
}

.debug-variable-scope {
  color: #888;
  font-size: 10px;
}

/* Watch panel styles */
.watch-input {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.watch-input input {
  flex: 1;
  background-color: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border-light);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 12px;
}

.watch-input button {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border: none;
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
}

.debug-watch {
  display: flex;
  padding: 4px 0;
  border-bottom: 1px solid #333;
  align-items: center;
  gap: 8px;
}

.debug-watch-expression {
  font-weight: 500;
  color: var(--cb-syntax-variable);
  flex: 1;
}

.debug-watch-value {
  color: var(--cb-syntax-string);
  font-family: 'Courier New', monospace;
}

.debug-watch-error {
  color: var(--cb-accent-danger);
  font-style: italic;
}

.debug-watch-remove {
  color: var(--cb-accent-danger);
  cursor: pointer;
  font-weight: bold;
  padding: 0 4px;
}

/* Breakpoints panel styles */
.debug-breakpoint {
  display: flex;
  padding: 4px 0;
  border-bottom: 1px solid #333;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

.debug-breakpoint:hover {
  background-color: var(--cb-bg-hover);
}

.debug-breakpoint-line {
  font-weight: 500;
  color: var(--cb-syntax-variable);
  min-width: 60px;
}

.debug-breakpoint-condition {
  color: var(--cb-syntax-string);
  flex: 1;
  font-style: italic;
}

.debug-breakpoint-remove {
  color: var(--cb-accent-danger);
  cursor: pointer;
  background: none;
  border: none;
  font-weight: bold;
  padding: 2px 4px;
}

/* Call stack styles */
.debug-stack-frame {
  display: flex;
  padding: 4px 0;
  border-bottom: 1px solid #333;
  cursor: pointer;
  gap: 8px;
}

.debug-stack-frame:hover {
  background-color: var(--cb-bg-hover);
}

.debug-stack-frame.active {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.debug-stack-frame-name {
  font-weight: 500;
  flex: 1;
}

.debug-stack-frame-line {
  color: var(--cb-text-muted);
  font-size: 11px;
}

@media (max-width: 768px) {
  .content-container {
    flex-direction: column;
  }

  .canvas-container {
    width: 100%;
    height: 300px;
  }

  .toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .debug-panels {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
  }
}

/* Modal Styles */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-dialog {
  background-color: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border-light);
  border-radius: 4px;
  min-width: 400px;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideIn 0.2s ease-out;
  pointer-events: auto;
  overflow: hidden;
}

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cb-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--cb-bg-input);
}

.modal-header h3 {
  margin: 0;
  color: var(--cb-text-primary);
  font-size: 14px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #fff;
}

.modal-body {
  padding: 20px;
  flex-shrink: 0;
}

.modal-body label {
  display: block;
  margin-bottom: 8px;
  color: var(--cb-text-primary);
  font-size: 12px;
  font-weight: 500;
}

.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="file"],
.modal-body textarea {
  width: 100%;
  padding: 8px 12px;
  background-color: var(--cb-bg-input);
  border: 1px solid var(--cb-border-light);
  border-radius: 3px;
  color: var(--cb-text-primary);
  font-size: 13px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.modal-body input:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: var(--cb-border-focus);
  box-shadow: 0 0 0 2px var(--cb-focus-glow);
}

/* The native "Choose file" button inside a file input — theme it like our
   buttons instead of leaving the browser default. */
.modal-body input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.modal-body input[type="file"]::file-selector-button:hover {
  background: var(--cb-btn-hover);
}

.input-hint {
  font-size: 11px;
  color: #999;
  margin-bottom: 0;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--cb-border-light);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background-color: var(--cb-bg-tertiary);
}

.modal-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  min-width: fit-content;
  white-space: nowrap;
}

.modal-btn.primary {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.modal-btn.primary:hover {
  background-color: var(--cb-accent-hover);
}

.modal-btn.secondary {
  background-color: var(--cb-btn-bg);
  color: var(--cb-btn-text);
}

.modal-btn.secondary:hover {
  background-color: var(--cb-btn-hover);
}

.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #444 !important;
}

/* Import Modal Styles */
.import-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.import-option {
  text-align: center;
}

.import-option h4 {
  margin: 0 0 12px 0;
  color: var(--cb-text-primary);
  font-size: 14px;
}

.import-divider {
  text-align: center;
  color: #888;
  font-size: 12px;
  padding: 8px 0;
}

.drop-zone {
  border: 2px dashed var(--cb-border-light);
  border-radius: 4px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--cb-bg-tertiary);
  color: var(--cb-text-muted);
  font-size: 13px;
}

.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--cb-accent-primary);
  background-color: var(--cb-bg-selected);
  color: var(--cb-text-primary);
}

/* ============================================================================
   Tutorial System Styles
   ============================================================================ */

/* Tutorial Overlay Container */
.tutorial-overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  pointer-events: none;
  display: none;
  animation: tutorialFadeIn 0.2s ease-out;
}

@keyframes tutorialFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Spotlight Mask */
.tutorial-spotlight-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.tutorial-spotlight-svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* Spotlight Highlight (pulsing border around target) */
.tutorial-spotlight-highlight {
  position: absolute;
  border: 2px solid var(--cb-focus-outline);
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--cb-focus-glow);
  pointer-events: none;
  animation: tutorialPulse 2s ease-in-out infinite;
}

@keyframes tutorialPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 122, 204, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(0, 122, 204, 0.2); }
}

/* Tooltip */
.tutorial-tooltip {
  position: absolute;
  pointer-events: auto;
  background-color: var(--cb-tooltip-bg);
  border: 1px solid var(--cb-border-light);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 360px;
  min-width: 280px;
  animation: tutorialTooltipSlide 0.2s ease-out;
}

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

.tutorial-tooltip-content {
  position: relative;
}

/* Close X button */
.tutorial-close-x {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--cb-text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 2px;
  z-index: 1;
}

.tutorial-close-x:hover {
  color: var(--cb-text-inverse);
  background-color: var(--cb-accent-warning);
}

/* Tooltip Header */
.tutorial-tooltip-header {
  padding: 16px 40px 12px 16px;
  border-bottom: 1px solid var(--cb-border-light);
}

.tutorial-tooltip-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cb-text-primary);
}

.tutorial-step-indicator {
  font-size: 11px;
  color: var(--cb-text-muted);
}

/* Tooltip Body */
.tutorial-tooltip-body {
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cb-tooltip-text);
}

.tutorial-tooltip-body code {
  background-color: var(--cb-bg-primary);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--cb-syntax-string);
}

.tutorial-tooltip-body strong {
  color: var(--cb-text-primary);
  font-weight: 600;
}

.tutorial-tooltip-body ul,
.tutorial-tooltip-body ol {
  margin: 8px 0;
  padding-left: 20px;
}

.tutorial-tooltip-body li {
  margin: 4px 0;
}

/* Tooltip Footer */
.tutorial-tooltip-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--cb-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tutorial-nav-buttons {
  display: flex;
  gap: 8px;
}

/* Tutorial Buttons */
.tutorial-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.15s ease;
}

.tutorial-btn-back {
  background-color: var(--cb-btn-bg);
  color: var(--cb-btn-text);
}

.tutorial-btn-back:hover {
  background-color: var(--cb-btn-hover);
}

.tutorial-btn-primary {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.tutorial-btn-primary:hover {
  background-color: var(--cb-accent-hover);
}

.tutorial-btn-arrow {
  font-size: 14px;
}

/* Progress Dots */
.tutorial-progress {
  display: flex;
  gap: 6px;
}

.tutorial-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--cb-btn-bg);
  transition: background-color 0.2s ease;
}

.tutorial-progress-dot.active {
  background-color: var(--cb-accent-primary);
}

/* Widget Help Button */
.widget-control-btn.widget-help {
  font-size: 14px;
  font-weight: bold;
  color: var(--cb-text-muted);
}

.widget-control-btn.widget-help:hover {
  color: var(--cb-text-inverse);
  background-color: var(--cb-accent-primary);
}

/* ========================================
 * Resources Widget
 * ======================================== */

/* Error and empty states */
.resource-error-state,
.resource-empty-state {
  text-align: center;
  padding: 20px;
}

.resource-error-state {
  color: var(--cb-accent-danger);
}

.resource-empty-state {
  color: var(--cb-text-muted);
}

/* One scroll area for the whole Resources body. Sections must not pin the
   file list below the viewport when the widget is short. */
.resources-widget-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.resources-widget-content > * {
  flex-shrink: 0;
}

.resources-widget-content .resource-container {
  flex: 1 0 auto;
  min-height: auto;
}

.resources-widget-content .resource-list {
  flex: 0 0 auto;
  overflow: visible;
}

/* Toolbar */
.resource-toolbar {
  padding: 8px;
  background: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Every button in this widget is compact chrome, so the size is keyed to the
   WIDGET, not to the toolbar. Scoped to .resource-toolbar, a button added to
   any other row here silently fell back to the global .toolbar-btn — which is
   padding: 10px 48px, and looks nothing like its neighbours. */
.resources-widget-content .toolbar-btn {
  padding: 4px 8px;
  background: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  /* Fixed line box so the label's glyphs can't set the button's height. An
     emoji falls back to the emoji font, whose metrics are taller than the UI
     font's: measured in Chrome, every emoji-labelled button came out 28px and
     "✕ Clear" — the one label here with no emoji — came out 22px. 20px is the
     line height those emoji buttons already had, so this lifts the odd one out
     without resizing the rest. Height is the widget's to decide, not the
     glyph's. */
  line-height: 20px;
}

.resources-widget-content .toolbar-btn.danger {
  background: var(--cb-accent-danger);
}

/* New dropdown */
.new-dropdown-container {
  position: relative;
  display: inline-block;
}

.new-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 140px;
  background: var(--cb-menu-bg);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-top: 2px;
}

.new-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--cb-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.new-dropdown-item:hover {
  background: var(--cb-bg-hover);
}

/* Resource container and tabs */
.resource-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: outline-color 0.15s;
  outline: 2px dashed transparent;
  outline-offset: -2px;
}

.resource-container.file-drag-over {
  outline-color: #0e639c;
  background-color: rgba(14, 99, 156, 0.08);
}

.resource-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--cb-bg-tertiary);
  border-bottom: 1px solid var(--cb-border);
}

.resource-tab-btn {
  padding: 4px 12px;
  background: var(--cb-btn-bg);
  color: var(--cb-text-primary);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.resource-tab-btn.active {
  background: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
}

/* Resource list */
.resource-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* Select-all row. Always present, so "select all" is reachable from a list
   where nothing is ticked yet. */
.resource-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--cb-border-light);
  font-size: 11px;
  color: var(--cb-text-muted);
  flex-shrink: 0;
}

.resource-select-all-label {
  cursor: pointer;
  user-select: none;
}

.resource-select-all:disabled + .resource-select-all-label {
  opacity: 0.5;
  cursor: default;
}

/* Bulk actions. `hidden` on the element does the showing/hiding, so this only
   has to lay it out. */
.resource-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 12px;
  background-color: var(--cb-bg-hover);
  border-bottom: 1px solid var(--cb-border);
  flex-shrink: 0;
}

.resource-selection-bar[hidden] {
  display: none;
}

.resource-selection-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-text-primary);
}

.resource-selection-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Folder header.

   Nesting is drawn purely by indent: the list is a flat run of rows, so a
   folder's depth is the only thing saying it sits inside another. --folder-depth
   is stamped on the row by the template and is 0 for anything at the top. */
.folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  padding-left: calc(12px + var(--folder-depth, 0) * 16px);
  background-color: var(--cb-bg-hover);
  border-bottom: 1px solid var(--cb-border-light);
  font-weight: 600;
  font-size: 12px;
  margin: 4px 0;
  user-select: none;
  /* The header drags the whole folder; .folder-info still clicks to expand. */
  cursor: grab;
  transition: background-color 0.15s, border-color 0.15s;
}

.folder-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
}

.folder-select {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}

.folder-toggle {
  width: 16px;
  text-align: center;
  font-size: 10px;
}

.folder-icon {
  font-size: 14px;
}

.folder-name {
  font-size: 12px;
}

.folder-count {
  color: var(--cb-text-muted);
  font-size: 10px;
  margin-left: 4px;
}

/* Where a dragged file or folder would land. A class rather than inline styles
   so that dropping it restores whatever the theme had. */
.folder-drop-target.drop-hover {
  background-color: var(--cb-bg-selected);
  border-color: var(--cb-accent-primary);
}

/* Root folder drop zone */
.root-folder-drop {
  padding: 8px 12px;
  color: var(--cb-text-muted);
  font-size: 11px;
  border: 1px dashed var(--cb-border);
  border-radius: 4px;
  margin: 4px 8px;
  text-align: center;
  transition: background-color 0.15s, border-color 0.15s;
}

/* Resource item */
.resource-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  margin: 2px 0;
  background: var(--cb-bg-secondary);
  border-radius: 3px;
  font-size: 12px;
  color: var(--cb-text-primary);
  cursor: grab;
}

/* A row lines up under its folder's name, one step further in. */
.resource-item.in-folder {
  margin-left: calc(20px + var(--folder-depth, 0) * 16px);
}

.resource-item .drag-handle {
  margin-right: 8px;
  font-size: 14px;
  cursor: grab;
}

.resource-item .resource-details {
  flex: 1;
  min-width: 0;
}

.resource-item .resource-name {
  font-weight: 500;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-item .resource-meta {
  font-size: 10px;
  color: var(--cb-text-muted);
}

.resource-item .entry-badge {
  background: var(--cb-accent-primary);
  padding: 2px 4px;
  border-radius: 2px;
  margin-left: 4px;
  color: var(--cb-accent-text);
  font-size: 9px;
}

.resource-item .resource-actions {
  display: flex;
  gap: 4px;
  position: relative;
}

/* Action dropdown */
.action-dropdown {
  position: relative;
}

.action-dropdown-trigger {
  padding: 4px 8px;
  background: var(--cb-bg-tertiary);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  min-width: 24px;
}

.action-dropdown-trigger:hover {
  background: var(--cb-bg-hover);
}

.action-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 2px;
  background: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 160px;
  padding: 4px 0;
}

.action-dropdown.open .action-dropdown-menu {
  display: block;
}

.action-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--cb-text-primary);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}

.action-menu-item:hover {
  background: var(--cb-bg-hover);
}

.action-menu-item[data-action="delete"]:hover {
  background: var(--cb-accent-danger);
  color: var(--cb-text-inverse);
}

.action-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.action-label {
  flex: 1;
}

/* Standalone edit button */
.action-btn-edit {
  padding: 4px 8px;
  background: var(--cb-accent-success, #16825d);
  color: var(--cb-accent-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.action-btn-edit:hover {
  background: #1a9e6f;
}

/* Standalone delete button */
.action-btn-delete {
  padding: 4px 8px;
  background: var(--cb-accent-danger);
  color: var(--cb-text-inverse);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.action-btn-delete:hover {
  background: #c41818;
}

/* Legacy action-btn (still used for folder delete) */
.resource-item .action-btn {
  padding: 2px 6px;
  color: white;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
}

/* File groups (related files grouped together) */
.resource-group {
  margin: 2px 0;
}

.resource-group.in-folder {
  margin-left: calc(20px + var(--folder-depth, 0) * 16px);
}

.resource-group .group-header {
  background: var(--cb-bg-secondary);
  border-left: 2px solid var(--cb-accent-primary);
}

.resource-group .group-toggle {
  width: 16px;
  min-width: 16px;
  text-align: center;
  font-size: 10px;
  cursor: pointer;
  color: var(--cb-text-muted);
  margin-right: 4px;
}

.resource-group .group-toggle:hover {
  color: var(--cb-text-primary);
}

.group-badge {
  background: var(--cb-bg-tertiary);
  padding: 1px 4px;
  border-radius: 8px;
  margin-left: 6px;
  color: var(--cb-text-muted);
  font-size: 9px;
  font-weight: normal;
}

.resource-item.in-group {
  margin-left: 0;
  background: var(--cb-bg-tertiary);
  border-left: 2px solid transparent;
  padding-left: 6px;
}

.resource-item.in-group:hover {
  background: var(--cb-bg-hover);
}

.group-indent {
  width: 20px;
  min-width: 20px;
  border-left: 1px solid var(--cb-border-light);
  margin-left: 8px;
  margin-right: 4px;
  align-self: stretch;
}

.modified-badge {
  background: var(--cb-accent-warning, #d79921);
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 6px;
  color: var(--cb-text-inverse, #1e1e1e);
  font-size: 9px;
  font-weight: 600;
}

/* Folder actions */
.folder-actions .action-btn {
  padding: 2px 6px;
  background: var(--cb-accent-danger);
  color: var(--cb-text-inverse);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
}

/* Resource footer */
.resource-footer {
  padding: 8px;
  background: var(--cb-bg-tertiary);
  border-top: 1px solid var(--cb-border);
  flex-shrink: 0;
}

.resource-stats {
  color: var(--cb-text-muted);
  font-size: 11px;
}

/* Inline busy spinner for long operations (e.g. downloading a game from the
   Arcade). Lives here rather than index.css because the VS Code extension loads
   crash-basic.css but deliberately skips index.css — a spinner defined there
   would be invisible in the extension. Distinct from `.loading-spinner`, which
   is the web-only boot spinner. */
@keyframes cb-spin {
  to { transform: rotate(360deg); }
}

.cb-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid var(--cb-border);
  border-top-color: var(--cb-accent-primary);
  border-radius: 50%;
  animation: cb-spin 0.8s linear infinite;
}

/**
 * Instrument Editor Widget Styles
 */

/* This widget is its own scroll container: .instrument-editor-widget keeps a
   definite height:100% (the envelope graph's percentage height resolves against
   it) and scrolls internally. The framework's .widget-body is also overflow:auto,
   which produced a second, redundant vertical scrollbar — disable its scroll
   when it hosts this widget so there's exactly one. */
.widget-body:has(> .instrument-editor-widget) {
  overflow: hidden;
}

.instrument-editor-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  color: var(--cb-text-primary);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  overflow-y: auto;
  background: var(--cb-bg-primary);
}

.ie-section {
  margin-bottom: 12px;
  padding: 8px;
  background: var(--cb-bg-tertiary);
  border-radius: 4px;
}

.ie-section-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--cb-syntax-keyword);
  font-size: 11px;
  text-transform: uppercase;
}

.ie-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}

.ie-label {
  width: 70px;
  color: var(--cb-syntax-variable);
}

.ie-label-name {
  width: auto;
  margin-left: 12px;
}

.ie-label-cutoff {
  width: auto;
  margin-left: 8px;
}

.ie-wave-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ie-inst-number {
  width: 60px;
  flex: none;
}

.ie-inst-select {
  flex: 2;
}

.ie-filter-type {
  width: 100px;
  flex: none;
}

.ie-add-layer {
  margin-left: 8px;
  padding: 2px 6px;
}

.ie-remove-layer {
  padding: 2px 6px;
}

.ie-input {
  flex: 1;
  background: var(--cb-bg-input);
  border: 1px solid var(--cb-border-light);
  color: var(--cb-text-primary);
  padding: 4px 6px;
  border-radius: 3px;
}

.ie-input:focus {
  border-color: var(--cb-border-focus);
  outline: none;
}

select.ie-input {
  padding: 3px 6px;
}

.ie-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  background: var(--cb-border-light);
  border-radius: 2px;
}

.ie-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--cb-accent-primary);
  border-radius: 50%;
  cursor: pointer;
}

.ie-value {
  width: 45px;
  text-align: right;
  color: var(--cb-syntax-string);
}

/* Caption next to a toggle (e.g. "per-layer pitch slide"). Unlike .ie-value
 * it isn't a fixed 45px numeric column, so descriptive text flows on one line. */
.ie-toggle-desc {
  color: var(--cb-text-secondary, #888);
  font-size: 11px;
  white-space: nowrap;
}

.ie-btn {
  background: var(--cb-accent-primary);
  border: none;
  color: var(--cb-accent-text);
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}

.ie-btn:hover {
  background: var(--cb-accent-hover);
}

.ie-btn-danger {
  background: var(--cb-accent-danger);
}

.ie-btn-danger:hover {
  background: var(--cb-accent-danger-hover);
}

.ie-wave-btn,
.ie-loop-mode-btn,
.ie-pitch-mode-btn,
.ie-loop-preset-btn {
  padding: 4px 8px;
  background: var(--cb-bg-input);
  border: 1px solid var(--cb-border-light);
  color: var(--cb-text-primary);
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
}

.ie-wave-btn.active,
.ie-loop-mode-btn.active,
.ie-pitch-mode-btn.active {
  background: var(--cb-accent-primary);
  border-color: var(--cb-border-focus);
}

/* Hover affordance on the mode pickers so picked / unpicked state
 * isn't the only feedback the user gets. */
.ie-loop-mode-btn:hover,
.ie-pitch-mode-btn:hover,
.ie-loop-preset-btn:hover {
  background: var(--cb-bg-input-hover, var(--cb-bg-tertiary));
}

/* The mode picker rows use a flex container so the buttons sit
 * side-by-side with a small gap, matching the wave-buttons row. */
.ie-loop-mode-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Inline help text under the Loop label when Manual mode is active —
 * explains what Start/End actually mean (sample frame indices). */
.ie-loop-help-text {
  font-size: 10px;
  color: var(--cb-text-secondary, #888);
  line-height: 1.4;
}

.ie-loop-help-text strong {
  color: var(--cb-text-primary);
  font-weight: 600;
}

/* Collapsible section help (e.g. the Pitch Envelope explainer): a one-line
 * plain-English summary always visible, full detail tucked behind a native
 * <details> disclosure so it doesn't dominate the panel. */
.ie-help-details {
  margin: 2px 0 8px;
}

.ie-help-summary {
  font-size: 10px;
  color: var(--cb-text-secondary, #888);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;          /* hide default marker; we draw our own ▸ below */
  user-select: none;
}

.ie-help-summary::-webkit-details-marker { display: none; }

.ie-help-summary::before {
  content: '\25B8';          /* ▸ */
  display: inline-block;
  margin-right: 5px;
  color: var(--cb-text-muted, #666);
  transition: transform 0.12s ease;
}

.ie-help-details[open] > .ie-help-summary::before {
  transform: rotate(90deg);  /* ▾ when expanded */
}

.ie-help-summary strong {
  color: var(--cb-text-primary);
  font-weight: 600;
}

/* Muted body text revealed when expanded, with emphasized key terms. */
.ie-help-text {
  font-size: 10px;
  color: var(--cb-text-secondary, #888);
  line-height: 1.5;
  margin-top: 5px;
  padding-left: 13px;        /* align under the summary text, past the marker */
}

.ie-help-text strong {
  color: var(--cb-text-primary);
  font-weight: 600;
}

/* Bank Info fields revealed under the disclosure — nudged in to line up
 * with the summary text past the marker. */
.ie-bank-meta {
  margin-top: 6px;
  padding-left: 13px;
}

/* Sample-length + loop-length info rows. Muted vs the primary inputs
 * so they read as ambient context, not actionable controls. */
.ie-loop-meta-text {
  font-size: 10px;
  color: var(--cb-text-muted, #888);
  font-family: var(--cb-mono-font, monospace);
}

.ie-layer {
  background: var(--cb-bg-secondary);
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 4px;
  border-left: 3px solid var(--cb-accent-primary);
}

.ie-layer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ie-envelope-display {
  height: 60px;
  background: var(--cb-bg-primary);
  border-radius: 4px;
  margin-top: 4px;
  position: relative;
}

.ie-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Piano Keyboard */
.ie-keyboard {
  display: flex;
  height: 50px;
  margin-top: 4px;
  overflow-x: auto;
  position: relative;
}

.ie-key {
  flex: 0 0 24px;
  min-width: 24px;
  background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
  border: 1px solid #333;
  border-left: none;
  cursor: pointer;
  border-radius: 0 0 3px 3px;
  position: relative;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1);
}

.ie-key:first-child {
  border-left: 1px solid #333;
}

.ie-key.black {
  flex: 0 0 14px;
  min-width: 14px;
  background: linear-gradient(to bottom, #333 0%, #111 100%);
  margin-left: -7px;
  margin-right: -7px;
  height: 60%;
  z-index: 1;
  border-radius: 0 0 2px 2px;
  border: 1px solid #000;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}

.ie-key:hover {
  background: linear-gradient(to bottom, #d0e8ff 0%, #b0d0ff 100%);
}

.ie-key.black:hover {
  background: linear-gradient(to bottom, #555 0%, #333 100%);
}

.ie-key:active,
.ie-key.active {
  background: linear-gradient(to bottom, #90c0ff 0%, #70a0ff 100%);
}

.ie-key.black:active,
.ie-key.black.active {
  background: linear-gradient(to bottom, #666 0%, #444 100%);
}

.ie-octave-marker {
  position: absolute;
  bottom: 2px;
  left: 2px;
  font-size: 8px;
  color: #999;
  pointer-events: none;
}

/* --- Sample loop view -------------------------------------------------- */

.ie-loop-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ie-loop-canvas {
  width: 100%;
  height: 72px;
  display: block;
  background-color: var(--cb-bg-input);
  border: 1px solid var(--cb-border-light);
  border-radius: 3px;
  /* The pointer handlers own horizontal gestures (drag region, pan); leaving
     browser panning on would steal them on touch and trackpads. */
  touch-action: none;
  cursor: crosshair;
}

.ie-loop-view-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ie-loop-zoom-btn {
  padding: 2px 7px;
  background: var(--cb-bg-input);
  border: 1px solid var(--cb-border-light);
  color: var(--cb-text-primary);
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1.4;
}

.ie-loop-zoom-btn:hover {
  background: var(--cb-bg-input-hover, var(--cb-bg-tertiary));
}

.ie-loop-view-range {
  margin-left: auto;
  font-size: 10px;
  color: var(--cb-text-secondary);
}

/**
 * Music Tracker Widget Styles
 */

.music-tracker-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--cb-text-primary);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 11px;
  background: var(--cb-bg-primary);
  overflow: hidden;
}

/* Toolbar */
.mt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--cb-bg-tertiary);
  border-bottom: 1px solid var(--cb-border);
  flex-wrap: wrap;
}

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

.mt-btn {
  background: var(--cb-accent-primary);
  border: none;
  color: var(--cb-accent-text);
  box-sizing: border-box;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}

.mt-btn:hover {
  background: var(--cb-accent-hover);
}

.mt-btn.active {
  background: var(--cb-accent-success);
}

.mt-btn.danger {
  background: var(--cb-accent-danger);
}

/* Toolbar dropdowns (Tools / Export) */
.mt-dropdown {
  position: relative;
  display: inline-block;
}

.mt-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: none;
  flex-direction: column;
  min-width: 180px;
  background: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 4px;
  z-index: 1000;
}

.mt-dropdown-menu.open {
  display: flex;
}

.mt-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--cb-text-primary);
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}

.mt-menu-item:hover {
  background: var(--cb-bg-hover);
}

.mt-menu-item.active {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.mt-input {
  background: var(--cb-bg-input);
  border: 1px solid var(--cb-border-light);
  color: var(--cb-text-primary);
  box-sizing: border-box;
  padding: 3px 6px;
  border-radius: 3px;
  width: 60px;
  font-size: 11px;
  vertical-align: middle;
}

/* Uniform control height across the toolbars (top + per-track piano/drum),
   so buttons, number inputs, and selects line up regardless of border/padding
   differences. Scoped to toolbars so the compact sidebar/pattern buttons keep
   their natural size. box-sizing: border-box (above) makes the height inclusive. */
.mt-toolbar,
.mt-piano-toolbar,
.mt-drum-toolbar {
  --mt-control-h: 26px;
}

.mt-toolbar .mt-btn,
.mt-toolbar .mt-input,
.mt-piano-toolbar .mt-btn,
.mt-piano-toolbar .mt-input,
.mt-drum-toolbar .mt-btn,
.mt-drum-toolbar .mt-input {
  height: var(--mt-control-h, 26px);
  padding-top: 0;
  padding-bottom: 0;
}

/* Piano-roll zoom cluster — keep the four axis buttons + readout tight so the
   toolbar isn't overrun. Buttons inherit .mt-btn; just trim their footprint. */
.mt-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.mt-piano-toolbar .mt-btn.mt-zoom {
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mt-input:focus {
  border-color: var(--cb-border-focus);
  outline: none;
}

select.mt-input {
  width: 80px;
}

/* The highlight-scale picker names the mode as well as the feel ("Happy —
   Major (Ionian)"), which does not fit the 80px every other select gets — the
   selected option was cut off, so the thing the name was added for could not
   be read. Sized to its own content rather than a guessed pixel width, so a
   longer mode name later widens it instead of being clipped. */
select.mt-input.mt-piano-scale-id {
  width: auto;
  max-width: 220px;
}

select.mt-song-select {
  width: 120px;
}

.mt-label {
  color: var(--cb-syntax-variable);
  font-size: 10px;
}

/* Checkbox + label sit on one centered baseline (was baseline-aligned). */
.mt-loop-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.mt-loop-label .mt-loop {
  margin: 0;
}

/* Main layout */
.mt-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
.mt-sidebar {
  width: 180px;
  background: var(--cb-bg-tertiary);
  border-right: 1px solid var(--cb-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mt-sidebar-section {
  padding: 6px;
  border-bottom: 1px solid var(--cb-border);
}

/* Marker for the section that should swallow whatever vertical space is left
   in the sidebar (currently: Arrangement). Pairs with `.mt-arrangement` going
   flex:1 inside, so the arrangement list — not the patterns list — gets the
   long-list real estate. */
.mt-sidebar-section-grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mt-sidebar-title {
  font-weight: bold;
  color: var(--cb-syntax-keyword);
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.mt-pattern-list {
  flex: 1;
  overflow-y: auto;
}

.mt-pattern-item {
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mt-pattern-item:hover {
  background: var(--cb-bg-hover);
}

.mt-pattern-item.selected {
  background: var(--cb-bg-selected);
}

.mt-pattern-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-pattern-item .mt-btn {
  padding: 2px 4px;
  font-size: 9px;
  opacity: 0.6;
  min-width: 18px;
}

.mt-pattern-item:hover .mt-btn {
  opacity: 1;
}

.mt-dup-pattern {
  background: var(--cb-bg-input) !important;
  color: var(--cb-text-primary) !important;
}

.mt-dup-pattern:hover {
  background: var(--cb-accent-primary) !important;
  color: var(--cb-accent-text) !important;
}

.mt-del-pattern {
  background: var(--cb-bg-input) !important;
  color: var(--cb-text-primary) !important;
}

.mt-del-pattern:hover {
  background: var(--cb-accent-danger) !important;
  color: var(--cb-text-inverse) !important;
}

.mt-arrangement {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 10px;
}

.mt-arr-step {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 2px;
}

.mt-arr-step:hover {
  background: var(--cb-bg-hover);
}

/* Vertical column of rows inside an arrangement step: the main pattern row
   plus zero or more `with`-layered pattern rows plus an "Add layer" button.
   A subtle left rail visually ties the layered rows to their main pattern. */
.mt-arr-step-rows {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mt-arr-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mt-arr-with-row {
  margin-left: 10px;
  padding-left: 6px;
  border-left: 2px solid var(--cb-border);
}

.mt-arr-with-row:hover {
  border-left-color: var(--cb-accent);
}

.mt-arr-add-with {
  align-self: flex-start;
  margin-left: 10px;
  padding: 1px 6px;
  font-size: 9px;
  opacity: 0.7;
}

.mt-arr-add-with:hover {
  opacity: 1;
}

.mt-arr-order-btns {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mt-arr-order-btns .mt-btn {
  padding: 0 3px;
  font-size: 7px;
  line-height: 1;
  min-width: 14px;
  height: 10px;
}

.mt-arr-pattern-select {
  flex: 1;
  min-width: 60px;
  max-width: 80px;
  padding: 2px 4px;
  font-size: 10px;
  cursor: pointer;
}

.mt-arr-repeat-btn {
  color: var(--cb-syntax-number);
  background: var(--cb-bg-tertiary);
  border: 1px solid var(--cb-border);
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
}

.mt-arr-repeat-btn:hover {
  background: var(--cb-bg-hover);
  border-color: var(--cb-accent);
}

.mt-arr-step .mt-remove-arr {
  margin-left: 8px;
}

/* Editor */
.mt-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Track headers */
.mt-track-headers {
  display: flex;
  background: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
  padding: 4px;
  gap: 2px;
  /* Scroll horizontally when there are more tracks than fit, instead of
     squishing the headers. */
  overflow-x: auto;
  overflow-y: hidden;
}

/* Keep each header (and the + Track button) at its natural size so the row
   overflows into a horizontal scroll rather than compressing. */
.mt-track-headers > * {
  flex-shrink: 0;
}

.mt-track-header {
  width: 120px;
  padding: 4px;
  background: var(--cb-bg-tertiary);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.mt-track-header.selected {
  border: 1px solid var(--cb-border-focus);
}

.mt-track-header-name {
  font-weight: bold;
  color: var(--cb-syntax-keyword);
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

/* The label must be free to shrink, or a long instrument name pushes the
   expand/group buttons out of the fixed-width card. */
.mt-track-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* A meta-track card stands for several tracks, so it gets a left edge to read
   as a container rather than as one more track. */
.mt-track-header.mt-track-group {
  border-left: 3px solid var(--cb-syntax-keyword);
}

/* Voices revealed by expanding a part: indented and de-emphasised so the group
   card above still reads as the thing they belong to. */
.mt-track-header.mt-track-voice {
  margin-left: 10px;
  background: var(--cb-bg-secondary);
}

.mt-track-header.mt-track-voice .mt-track-header-name {
  color: var(--cb-text-secondary);
  font-weight: normal;
}

.mt-group-toggle,
.mt-group-suggest {
  flex-shrink: 0;
  padding: 0 3px;
  font-size: 10px;
  line-height: 1.4;
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  cursor: pointer;
}

.mt-group-toggle:hover,
.mt-group-suggest:hover {
  background: var(--cb-btn-hover);
}

/* The suggestion is an offer, not a control the user asked for — keep it quiet
   until hovered so it doesn't compete with the real track controls. */
.mt-group-suggest {
  opacity: 0.65;
}

.mt-group-suggest:hover {
  opacity: 1;
}

/* Instrument as a live dropdown in the track header (was a static label). */
.mt-track-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mt-header-inst {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  padding: 1px 2px;
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  cursor: pointer;
}

.mt-track-vol-tag {
  font-size: 11px;
  color: var(--cb-text-secondary);
  white-space: nowrap;
}

.mt-header-edit {
  flex-shrink: 0;
  padding: 1px 5px;
  font-size: 11px;
  line-height: 1.4;
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  cursor: pointer;
}

.mt-header-edit:hover {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.mt-track-controls {
  display: flex;
  gap: 2px;
}

.mt-track-btn {
  padding: 2px 5px;
  font-size: 9px;
  background: var(--cb-bg-input);
  border: none;
  color: var(--cb-text-primary);
  border-radius: 2px;
  cursor: pointer;
  min-width: 18px;
}

.mt-track-btn:hover {
  background: var(--cb-bg-hover);
}

.mt-track-btn.danger {
  color: var(--cb-text-muted);
}

.mt-track-btn.danger:hover {
  background: var(--cb-accent-danger);
  color: var(--cb-text-inverse);
}

.mt-track-btn.muted {
  background: var(--cb-accent-danger);
}

.mt-track-btn.solo {
  background: var(--cb-accent-success);
}

.mt-track-btn.repeat {
  background: var(--cb-accent-info, #3b82f6);
}

/* FX button lit when the track has a DSP effect chain. */
.mt-track-btn.active {
  background: var(--cb-accent-primary, #8b5cf6);
  color: var(--cb-accent-text, #fff);
}

/* Grid container */
.mt-grid-container {
  flex: 1;
  overflow: auto;
  background: var(--cb-bg-primary);
}

.mt-grid {
  display: flex;
  min-width: max-content;
}

.mt-track-col {
  width: 120px;
  border-right: 1px solid var(--cb-border);
}

.mt-note-row {
  height: 20px;
  border-bottom: 1px solid var(--cb-border);
  display: flex;
  align-items: center;
  padding: 0 4px;
  cursor: pointer;
}

.mt-note-row:hover {
  background: var(--cb-bg-hover);
}

.mt-note-row.beat {
  border-bottom-color: var(--cb-border-light);
}

.mt-note-row.has-note {
  background: var(--cb-bg-selected);
}

/* MML Editor */
.mt-mml-editor {
  padding: 8px;
  background: var(--cb-bg-tertiary);
  border-top: 1px solid var(--cb-border);
}

.mt-mml-input {
  width: 100%;
  background: var(--cb-bg-input);
  border: 1px solid var(--cb-border-light);
  color: var(--cb-text-primary);
  padding: 6px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  resize: vertical;
  min-height: 40px;
}

.mt-mml-input:focus {
  border-color: var(--cb-border-focus);
  outline: none;
}

/* Piano Roll View */
.mt-piano-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 10px; /* Buffer below scrollbar to avoid accidental widget resize */
  padding-right: 10px; /* Buffer to right of scrollbar to avoid accidental widget resize */
}

.mt-piano-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 4px 8px;
  background: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
}

.mt-piano-main {
  flex: 1;
  display: flex;
  overflow: auto;
  /* Programmatic scrollLeft updates animate smoothly via the
   * compositor instead of jumping. Lets us keep `scrollLeft`
   * writes at the cursor's step rate (~8 Hz) without visible
   * stutter and without per-frame main-thread scroll work that
   * would glitch the audio thread on note attack. */
  scroll-behavior: smooth;
}

.mt-piano-keys {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--cb-bg-tertiary);
  border-right: 1px solid var(--cb-border);
  position: sticky;
  left: 0;
  z-index: 2;
}

.mt-piano-key {
  /* Height is set inline per element from the vertical zoom (rowHeightPx); these
     are the un-zoomed defaults for any non-zoomed render path. */
  height: 12px;
  min-height: 12px;
  max-height: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  font-size: 9px;
  min-width: 40px;
  cursor: pointer;
  user-select: none;
  box-sizing: content-box;
  border-bottom: 1px solid #1a1a1a;
}

.mt-piano-key.white {
  background: linear-gradient(to right, #e8e8e8, #fff);
  color: #333;
}

.mt-piano-key.white:hover {
  background: linear-gradient(to right, #d0d0d0, #e8e8e8);
}

.mt-piano-key.white:active {
  background: linear-gradient(to right, #b0b0b0, #c8c8c8);
}

.mt-piano-key.black {
  background: linear-gradient(to right, #333, #444);
  color: #aaa;
}

.mt-piano-key.black:hover {
  background: linear-gradient(to right, #444, #555);
}

.mt-piano-key.black:active {
  background: linear-gradient(to right, #555, #666);
}

.mt-piano-key.octave-c {
  box-shadow: inset 0 2px 0 #569cd6;
}

/* Scale + chord-tone highlight on the key column. Keys have white/black
   gradient backgrounds, so we tint with a translucent green overlay via
   box-shadow rather than rewriting `background` (would clobber the
   gradient + the octave-c top stripe). The double shadow keeps the
   octave-C top stripe stacked with the scale tint. */
.mt-piano-key.in-scale {
  box-shadow: inset 0 0 0 100px rgba(80, 180, 100, 0.12);
}

.mt-piano-key.in-scale.octave-c {
  box-shadow: inset 0 2px 0 #569cd6, inset 0 0 0 100px rgba(80, 180, 100, 0.12);
}

.mt-piano-key.chord-tone {
  box-shadow: inset 0 0 0 100px rgba(80, 200, 100, 0.45);
  font-weight: bold;
}

.mt-piano-key.chord-tone.octave-c {
  box-shadow: inset 0 2px 0 #569cd6, inset 0 0 0 100px rgba(80, 200, 100, 0.45);
}

.mt-piano-grid-wrap {
  flex: 1;
  /* Programmatic scrollLeft updates animate smoothly via the
   * compositor instead of jumping. Lets us keep `scrollLeft`
   * writes at the cursor's step rate (~8 Hz) without visible
   * stutter and without per-frame main-thread scroll work that
   * was glitching the audio thread on note attack. */
  scroll-behavior: smooth;
}

.mt-piano-grid {
  display: flex;
  flex-direction: column;
  min-width: max-content;
  position: relative;
}

/* Canvas piano-roll: the 84×numSteps pitch grid is drawn as two VIEWPORT-sized
   canvases over `.mt-piano-main` — a static grid canvas (notes/washes/gridlines/
   bends/ruler/rest-lane) and a dynamic overlay (playhead/hover/drag/selection/
   recording). Both draw in viewport coords using the scroll offset and are only
   viewport-sized, so redraws are cheap and there is no full-content canvas size
   limit. An empty spacer inside the grid provides the native scroll extent. */
.mt-pr-spacer {
  flex-shrink: 0;
}

/* Relative wrapper so the canvases can cover exactly the scroll viewport. */
.mt-piano-mainwrap {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
}

/* Both canvases are pointer-events:none so clicks pass through to the DOM inside
   `.mt-piano-main` (keys/ruler/rest cells, and the spacer for the pitch area,
   which the delegated handlers hit-test in canvas mode). */
.mt-pr-grid,
.mt-pr-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mt-pr-grid { z-index: 2; }
.mt-pr-overlay { z-index: 3; }

/* The rest lane's DOM element — an empty pointer-hit bar; its pitch grid,
   washes, notes and rest fills are all painted on the grid canvas. Height is
   set inline per element from the vertical zoom (rowHeightPx). */
.mt-piano-row {
  height: 12px;
  min-height: 12px;
  max-height: 12px;
  display: flex;
  box-sizing: content-box;
  border-bottom: 1px solid #2a2a2a;
}

/* Rest row - pinned at the top of the piano roll.
   Sticks just below the beat header (17px content + 1px border = 18px) so the
   rest lane stays visible while the pitch rows scroll vertically underneath. */
.mt-piano-row.rest-row {
  background: #2d2d3a;
  border-bottom: 2px solid #569cd6;
  position: sticky;
  top: 18px;
  z-index: 1;
}

.mt-piano-key.rest-key {
  background: #3d3d4a;
  color: #569cd6;
  font-size: 9px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #569cd6;
  /* Pin the REST key alongside its row (same top offset). */
  position: sticky;
  top: 18px;
  z-index: 1;
}

/* Bar line — drawn on the left edge of the first cell of every new bar.
   Stronger than the per-beat tick so bars are obvious at a glance. */
.mt-drum-cell.bar,
.mt-drum-step-header.bar {
  border-left: 2px solid #888;
}

/* Select mode button - muted when inactive, highlighted when active */
.mt-select-mode {
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border-light);
}

.mt-select-mode:hover {
  background: var(--cb-bg-hover);
}

.mt-select-mode.active {
  background: var(--cb-accent-success);
  color: var(--cb-accent-text);
  border-color: var(--cb-accent-success);
}

/* Multi-track block selection (drumloop view): persistent highlight + drag preview */
.mt-drum-cell.block-sel,
.mt-drum-cell.block-sel-preview {
  box-shadow: inset 0 0 0 2px #ffcc00;
}
.mt-drum-cell.block-sel:not(.on),
.mt-drum-cell.block-sel-preview:not(.on) {
  background: rgba(255, 204, 0, 0.18);
}

.mt-piano-beat-header {
  display: flex;
  align-items: center;
  background: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: max-content;
  height: 17px;
  min-height: 17px;
  max-height: 17px;
  box-sizing: content-box;
  overflow: hidden;
}

/* Header placeholder in piano keys to align with beat header */
.mt-piano-key-header {
  height: 17px;
  min-height: 17px;
  max-height: 17px;
  background: var(--cb-bg-tertiary);
  border-bottom: 1px solid var(--cb-border);
  box-sizing: content-box;
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Instrument select in toolbar */
.mt-inst-select {
  width: 130px;
}

/* Piano roll drag and drop */
.piano-dragging {
  cursor: grabbing !important;
}

/* Drum step sequencer */
.mt-drum-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mt-drum-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg-secondary);
  flex-shrink: 0;
}

.mt-drum-grid-wrap {
  flex: 1;
  overflow: auto;
  padding: 8px 0;
}

.mt-drum-header-row {
  display: flex;
  position: sticky;
  top: 0;
  background: var(--cb-bg-secondary);
  z-index: 2;
  border-bottom: 1px solid var(--cb-border);
}

.mt-drum-row-label-spacer {
  width: 320px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.mt-drum-step-header-row {
  display: flex;
}

.mt-drum-step-header {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--cb-text-muted);
  border-right: 1px solid #2a2a2a;
}

.mt-drum-step-header.beat {
  color: var(--cb-text-secondary);
  border-right-color: var(--cb-border);
  font-weight: bold;
}

.mt-drum-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #2a2a2a;
}

.mt-drum-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 320px;
  flex-shrink: 0;
  box-sizing: border-box; /* keep total width 320px (incl. padding+border) so it matches the header spacer and the step columns line up */
  padding: 6px 8px;
  background: var(--cb-bg-tertiary);
  border-right: 1px solid var(--cb-border);
}

.mt-drum-row-label .mt-input {
  font-size: 11px;
  padding: 2px 4px;
}

.mt-drum-pitch {
  width: 64px;
}

.mt-drum-inst {
  flex: 1;
  min-width: 100px;
}

.mt-drum-vol {
  width: 50px;
}

.mt-drum-loop-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--cb-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.mt-drum-loop-label input {
  margin: 0;
}

.mt-drum-row-delete {
  background: transparent;
  color: var(--cb-text-muted);
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

.mt-drum-row-delete:hover {
  color: var(--cb-accent-danger, #f44747);
}

.mt-drum-cells {
  display: flex;
  flex-shrink: 0;
}

.mt-drum-cell {
  width: 22px;
  height: 22px;
  border-right: 1px solid #2a2a2a;
  background: var(--cb-bg-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.05s;
}

.mt-drum-cell.beat {
  border-right-color: var(--cb-border);
}

.mt-drum-cell:hover {
  background: var(--cb-bg-hover, rgba(255, 255, 255, 0.05));
}

.mt-drum-cell.on {
  background: #e74c3c;
}

.mt-drum-cell.on:hover {
  background: #ec6356;
}

.mt-drum-cell.on::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

/* Step-Input record button — lives in the inline piano-roll toolbar
 * alongside Length / Rest / Steps inputs, so it's styled like an
 * input-row control rather than a transport button. */
.mt-midi-record {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border-light);
  transition: all 0.15s ease;
}

.mt-midi-record:hover {
  background: var(--cb-bg-hover);
  border-color: var(--cb-border-focus);
}

.mt-midi-record .midi-record-icon {
  font-size: 10px;
  color: #888;
  transition: color 0.15s ease;
}

.mt-midi-record.active {
  background: rgba(86, 156, 214, 0.2);
  border-color: #569cd6;
  color: #569cd6;
}

.mt-midi-record.active .midi-record-icon {
  color: #569cd6;
}

.mt-midi-record.recording {
  animation: midi-record-pulse 1s ease-in-out infinite;
}

/* Transport-group buttons — Play / Stop / Record / Step-toggle.
 * The base `.mt-btn` sizes by content, so each glyph (▶ narrow,
 * ⏹ square, ⏺ circle, S letter) yielded a different button width
 * even with min-width applied (the glyphs themselves render wider
 * than the floor). Using fixed `width` with `box-sizing: border-box`
 * forces the whole row into uniform 32×24 boxes; the inline-flex
 * centering keeps glyphs visually centered when they don't fill
 * the box. */
.mt-play,
.mt-stop,
.mt-realtime-record,
.mt-step-mode-toggle {
  width: 32px;
  height: 26px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Keep the glyph from pushing line-height past the box. */
  line-height: 1;
}

/* Step-mode toggle — its content is a letter, not a glyph, so dial
 * the typography in to match the visual weight of the transport
 * icons next to it. */
.mt-step-mode-toggle {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* Live-Record button — lives in the transport group next to Play /
 * Stop, so it inherits the base `.mt-btn` look (solid accent-primary
 * background, white glyph, no border) for visual consistency. The
 * idle state therefore needs no overrides. The active+recording
 * state turns red and pulses to clearly signal "audio is being
 * captured right now". */
.mt-realtime-record.active {
  background: var(--cb-accent-danger);
  color: var(--cb-text-inverse);
}

.mt-realtime-record.active:hover {
  background: var(--cb-accent-danger);
  filter: brightness(1.1);
}

.mt-realtime-record.recording {
  animation: realtime-record-pulse 1s ease-in-out infinite;
}

@keyframes midi-record-pulse {
  0%, 100% { background: rgba(231, 76, 60, 0.2); }
  50% { background: rgba(231, 76, 60, 0.4); }
}

@keyframes realtime-record-pulse {
  0%, 100% { background: var(--cb-accent-danger); filter: brightness(1.0); }
  50%      { background: var(--cb-accent-danger); filter: brightness(1.25); }
}

.mt-midi-cursor-reset {
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border-light);
  padding: 4px 6px;
}

.mt-midi-cursor-reset:hover {
  background: var(--cb-bg-hover);
}

/* ── Live chord/arp transport chip ──────────────────────────────────────────
   Shown while the Arpeggiator / Chord Builder live-MIDI mode is armed, so the
   mode survives closing the modal and can be driven from the transport. */
.mt-liveroot-chip {
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--cb-accent-primary);
  border-radius: 4px;
  background: var(--cb-bg-tertiary, var(--cb-bg-secondary));
}

.mt-liveroot-dot {
  font-size: 12px;
  line-height: 1;
}

.mt-liveroot-open {
  font-size: 11px;
  font-weight: 600;
  color: var(--cb-text-primary);
  cursor: pointer;
  padding: 0 2px;
}

.mt-liveroot-open:hover {
  text-decoration: underline;
}

.mt-liveroot-record.recording {
  animation: realtime-record-pulse 1s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   Audio clip strip — shown above the view content when a pattern mixes a
   recording. A pattern can carry tracks and audio at once, so this stacks with
   the piano roll rather than replacing it.
   --------------------------------------------------------------------------- */

.mt-clip-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
  font-size: 11px;
  color: var(--cb-text-secondary);
}

.mt-clip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mt-clip-label {
  color: var(--cb-accent-info);
  font-weight: 600;
  white-space: nowrap;
}

/* Which project file the editor previews. */
.mt-clip-resource {
  flex: 1;
  min-width: 0; /* let the select shrink instead of forcing the row to scroll */
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 11px;
}

.mt-clip-resource:focus {
  border-color: var(--cb-border-focus);
  outline: none;
}

/* The engine's name for the clip — what a program must LOADMP3 under. Given the
   accent colour because it is the one value here that a BASIC program has to
   match exactly. */
.mt-clip-handle {
  width: 140px;
  background: var(--cb-bg-input);
  color: var(--cb-accent-info);
  border: 1px solid var(--cb-border);
  border-radius: 2px;
  padding: 1px 4px;
  font-family: var(--cb-font-mono, monospace);
  font-size: 11px;
}

.mt-clip-handle:focus {
  border-color: var(--cb-border-focus);
  outline: none;
}

/* The LOADMP3 line a program needs. Scrolls rather than wrapping so a long
   path can't reflow the whole strip. */
.mt-clip-basic {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--cb-bg-tertiary);
  color: var(--cb-text-secondary);
  font-family: var(--cb-font-mono, monospace);
  font-size: 10px;
}

.mt-clip-warn {
  color: var(--cb-accent-danger);
  font-size: 10px;
  white-space: nowrap;
}

.mt-clip-field {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mt-clip-field input[type="number"] {
  width: 62px;
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 11px;
}

.mt-clip-field input[type="number"]:focus {
  border-color: var(--cb-border-focus);
  outline: none;
}

.mt-clip-sep {
  color: var(--cb-text-muted);
}

/* Marks an audio-backed pattern in the sidebar list. */
.mt-pattern-audio-tag {
  color: var(--cb-accent-info);
  font-size: 10px;
  flex: 0 0 auto;
}

/* GitHub sync section — secondary action buttons for the Resources widget's
   GitHub panel. All styling comes from theme tokens so it tracks every theme;
   no hardcoded colours. */

.github-push-cart-btn,
.github-setup-builds-btn,
.github-run-build-btn,
.github-migrate-btn {
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}

.github-push-cart-btn:hover,
.github-setup-builds-btn:hover,
.github-run-build-btn:hover,
.github-migrate-btn:hover {
  background: var(--cb-btn-hover);
}

.github-push-cart-btn:disabled,
.github-setup-builds-btn:disabled,
.github-run-build-btn:disabled,
.github-migrate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary repo/build actions laid out 2–3 per row instead of a tall stack.
   auto-fit + minmax gives 2 columns in a narrow sidebar, more as it widens. */
.github-build-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

/* The buttons carry their own margin-top for the stacked layout; inside the
   grid the gap handles spacing, so drop it to keep rows even. */
.github-build-actions > button {
  margin-top: 0;
}

/* "View build progress" deep-link — looks like a quiet link, not a button. */
.github-build-progress-link {
  display: block;
  width: 100%;
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  color: var(--cb-link, var(--cb-text-secondary));
  text-decoration: none;
}

.github-build-progress-link:hover {
  text-decoration: underline;
}

/* Layer panel row layout.
 *
 * The LayerPanel component injects its base styles at runtime; these rules use
 * a `.layer-panel` ancestor for the specificity needed to override that base,
 * and lay each row out as two lines: the controls (visibility, thumbnail,
 * opacity) on top, with the editable layer name on its own line beneath so it's
 * fully visible instead of squeezed between the thumbnail and the slider.
 * Colors come from theme tokens only. */

.layer-panel .layer-item {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.layer-panel .layer-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The eye and thumbnail keep their size — never let the slider squeeze them. */
.layer-panel .layer-row-top .layer-visibility,
.layer-panel .layer-row-top .layer-thumbnail {
  flex: 0 0 auto;
}

/* Opacity slider fills the rest of the top row instead of a fixed 40px.
   min-width: 0 lets it shrink past the range input's large intrinsic width
   (without it, the slider pushes the thumbnail out of the row). */
.layer-panel .layer-row-top .layer-opacity-slider {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Editable name on its own full-width line. */
.layer-panel .layer-name {
  flex: none;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px;
  border-radius: 2px;
  cursor: text;
}

.layer-panel .layer-name:hover {
  background: var(--cb-btn-bg);
}

/* The active row's background is --cb-accent-primary, and so is the default
   slider thumb — it disappears into the highlight. On active rows, use the
   on-accent foreground token (which exists precisely to be legible on
   --cb-accent-primary). Separate rules per vendor pseudo-element: grouping an
   unknown one invalidates the whole selector. */
.layer-panel .layer-item.active .layer-opacity-slider::-webkit-slider-thumb {
  background: var(--cb-accent-text);
}

.layer-panel .layer-item.active .layer-opacity-slider::-moz-range-thumb {
  background: var(--cb-accent-text);
}

/* Per-layer blend-mode dropdown (sits beneath the layer name). */
.layer-panel .layer-blend-select {
  width: 100%;
  margin-top: 4px;
  background: var(--cb-bg-primary);
  border: 1px solid var(--cb-border);
  color: var(--cb-text-primary);
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 11px;
}

/* Aseprite-style timeline grid for the sprite editor (rows = layers, columns =
 * frames, cells = cels). Theme tokens only — no hardcoded colors. The grid
 * template (column/row counts) is set inline by the component; this file owns
 * appearance, stickiness, and highlights. */

.timeline-grid-root {
  display: grid;
  position: relative;
  overflow: auto;
  height: 100%;
  background: var(--cb-bg-secondary);
  font-size: 11px;
  color: var(--cb-text-secondary);
  user-select: none;
}

/* Empty state */
.timeline-grid-root.tl-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tl-empty-message {
  text-align: center;
  color: var(--cb-text-muted);
  line-height: 1.8;
}

.tl-empty-add,
.tl-mini-btn {
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  padding: 2px 6px;
}

.tl-empty-add:hover,
.tl-mini-btn:hover {
  background: var(--cb-btn-hover);
}

/* Corner — sticky to both axes, holds add-frame / add-layer */
.tl-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  justify-content: center;
  background: var(--cb-bg-tertiary);
  border-right: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
}

/* Frame headers — sticky to the top */
.tl-frame-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-bg-tertiary);
  border-right: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
  cursor: pointer;
}

.tl-frame-header.active {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.tl-frame-num {
  pointer-events: none;
}

.tl-frame-del {
  display: none;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  line-height: 10px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
}

.tl-frame-header:hover .tl-frame-del {
  display: block;
}

.tl-frame-del:hover {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

/* Layer headers — sticky to the left */
.tl-layer-header {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  background: var(--cb-bg-tertiary);
  border-right: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
  cursor: pointer;
}

.tl-layer-header.active {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

.tl-eye {
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
  font-size: 13px;
  opacity: 0.85;
}

.tl-eye:hover {
  opacity: 1;
}

/* Hidden layer: dim the eye and draw a diagonal slash across it (eye-with-slash).
   Uses tl-eye-off — NOT "hidden", which is a global display:none utility that
   would remove the toggle from layout entirely. */
.tl-eye.tl-eye-off {
  opacity: 0.85;
  filter: grayscale(1);
}

.tl-eye.tl-eye-off:hover {
  opacity: 1;
}

.tl-eye.tl-eye-off::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--cb-text-primary);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  border-radius: 1px;
  transform: rotate(-45deg);
  pointer-events: none;
}

.tl-layer-name {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: text;
}

.tl-gear {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  opacity: 0.7;
  padding: 0;
}

.tl-gear:hover {
  opacity: 1;
}

.tl-rename-input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--cb-bg-primary);
  border: 1px solid var(--cb-accent-primary);
  color: var(--cb-text-primary);
  border-radius: 2px;
  padding: 1px 3px;
  font-size: 11px;
}

/* Cels — a subtle two-token checker shows transparency; the canvas sits on top */
.tl-cel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
  background-image: repeating-conic-gradient(
    var(--cb-bg-secondary) 0% 25%,
    var(--cb-bg-tertiary) 0% 50%
  );
  background-size: 10px 10px;
  cursor: pointer;
}

.tl-cel.row-active,
.tl-cel.col-active {
  background-image: none;
  background-color: var(--cb-bg-tertiary);
}

.tl-cel.active {
  outline: 2px solid var(--cb-accent-primary);
  outline-offset: -2px;
  z-index: 1;
}

.tl-cel-canvas {
  image-rendering: pixelated;
  pointer-events: none;
}

/* Z-index override badge (shown only when a cel's z-index is non-zero) */
.tl-cel-z {
  position: absolute;
  bottom: 0;
  right: 1px;
  font-size: 8px;
  line-height: 1;
  padding: 1px 2px;
  border-radius: 2px;
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  pointer-events: none;
}

/* Empty cel — faint center dot instead of a canvas */
.tl-cel-empty::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cb-text-muted);
  opacity: 0.4;
}

/* Drag reorder */
.tl-dragging {
  opacity: 0.5;
}

.tl-drop-target {
  box-shadow: inset 0 0 0 2px var(--cb-accent-primary);
}

/* Layer properties popover */
.tl-popover {
  position: fixed;
  z-index: 10000;
  background: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: var(--cb-text-primary);
}

.tl-popover-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}

.tl-popover-label {
  font-size: 11px;
  color: var(--cb-text-secondary);
}

.tl-popover-slider {
  width: 100%;
  accent-color: var(--cb-accent-primary);
}

.tl-popover-number {
  width: 100%;
  background: var(--cb-bg-primary);
  border: 1px solid var(--cb-border);
  color: var(--cb-text-primary);
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 11px;
}

.tl-popover-select {
  width: 100%;
  background: var(--cb-bg-primary);
  border: 1px solid var(--cb-border);
  color: var(--cb-text-primary);
  border-radius: 2px;
  padding: 2px 4px;
  font-size: 11px;
}

/* Animation tag band — bars on the row beneath the frame numbers */
.tl-tag-bar {
  position: sticky;
  top: 22px; /* = FRAMEH: sit directly under the sticky frame-number row */
  z-index: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 1px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  cursor: grab;
  font-size: 9px;
  line-height: 1;
}

.tl-tag-bar.tl-tag-dragging {
  cursor: grabbing;
  opacity: 0.85;
}

.tl-tag-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Edge grips for resizing a tag's start/end */
.tl-tag-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  cursor: ew-resize;
}

.tl-tag-handle-left {
  left: 0;
}

.tl-tag-handle-right {
  right: 0;
}

.tl-tag-delete {
  margin-top: 6px;
  width: 100%;
  background: var(--cb-accent-danger);
  color: var(--cb-accent-text);
  border: none;
  border-radius: 3px;
  padding: 4px;
  cursor: pointer;
  font-size: 11px;
}

/* Context menu */
.tl-context-menu {
  position: fixed;
  z-index: 10000;
  background: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 150px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: var(--cb-text-primary);
}

.tl-context-menu-item {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
}

.tl-context-menu-item:hover {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
}

/* Palette toolbar — shared by the sprite + tile editors. Theme tokens only. */

.palette-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.palette-btn {
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  padding: 5px 6px;
  font-size: 11px;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-btn:hover {
  background: var(--cb-btn-hover);
}

/* ── Sprite editor "Options" flyout menu (declutters the toolbar) ─────────── */
.options-menu,
.options-submenu {
  position: fixed;
  display: none;
  z-index: 9999;
  min-width: 180px;
  background: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 4px;
}

/* Top-level category rows (View ▸ / Symmetry ▸ / Skeleton ▸). */
.options-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  background: none;
  border: none;
  color: var(--cb-text-primary);
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}

.options-cat:hover,
.options-cat.active {
  background: var(--cb-btn-hover, var(--cb-bg-input));
}

.options-cat .options-cat-arrow {
  color: var(--cb-text-muted);
  font-size: 10px;
}

/* Rows inside a submenu — checkboxes, labeled selects, button groups. */
.options-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--cb-text-primary);
  white-space: nowrap;
  cursor: pointer;
}

.options-row.column {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.options-row select {
  flex: 1;
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 4px;
}

.options-row .options-row-label {
  font-size: 10px;
  color: var(--cb-text-muted);
}

/* Symmetry radio-style menu items. */
.options-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  color: var(--cb-text-primary);
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}

.options-item:hover {
  background: var(--cb-btn-hover, var(--cb-bg-input));
}

.options-item .options-check {
  width: 12px;
  color: var(--cb-accent-primary);
}

.options-section-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cb-text-muted);
  padding: 4px 8px 2px;
}

.options-row button {
  background: var(--cb-btn-bg);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 10px;
  cursor: pointer;
}

.options-row button:hover {
  background: var(--cb-btn-hover);
}

/* ── Palette ramp generator modal (shared by sprite + tile editors) ───────── */
.palette-ramp-overlay {
  position: fixed;
  inset: 0;
  background: var(--cb-modal-overlay, rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.palette-ramp-modal {
  background: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  width: 440px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.palette-ramp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cb-border);
}

.palette-ramp-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-text-primary);
}

.ramp-close {
  background: none;
  border: none;
  color: var(--cb-text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.ramp-close:hover {
  color: var(--cb-text-primary);
}

.palette-ramp-body {
  padding: 16px;
  overflow-y: auto;
}

.ramp-control {
  display: grid;
  grid-template-columns: 120px 1fr 48px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ramp-control-label {
  font-size: 12px;
  color: var(--cb-text-secondary);
}

.ramp-control input[type="range"] {
  width: 100%;
}

.ramp-control-value {
  font-size: 12px;
  color: var(--cb-text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ramp-base-row input[type="color"] {
  width: 36px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  background: none;
  cursor: pointer;
}

.ramp-hex-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  padding: 4px 6px;
  font-family: monospace;
  font-size: 12px;
}

.ramp-preview-label {
  margin: 14px 0 6px;
  font-size: 12px;
  color: var(--cb-text-secondary);
}

.ramp-hint {
  color: var(--cb-text-muted);
  font-size: 11px;
}

.palette-ramp-preview {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.ramp-swatch {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 1px solid var(--cb-border);
}

.ramp-swatch.is-base {
  outline: 2px solid var(--cb-text-primary);
  outline-offset: 1px;
}

.palette-ramp-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--cb-border);
}

.ramp-count {
  font-size: 11px;
  color: var(--cb-text-muted);
}

.ramp-footer-spacer {
  flex: 1;
}

.ramp-btn {
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.ramp-btn:hover {
  background: var(--cb-btn-hover);
}

.ramp-confirm {
  background: var(--cb-accent, var(--cb-btn-bg));
  border-color: var(--cb-accent, var(--cb-border));
}

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

/* ---------------------------------------------------------------------------
   Docked tool palette — sprite + tile editors. A vertical icon-button strip
   to the left of the canvas, replacing the old tool dropdown. Theme tokens
   only; tap targets sized for tablet/stylus use.
   --------------------------------------------------------------------------- */

.tool-area {
  flex: 1;
  display: flex;
  min-height: 0;
}

.tool-palette {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  background-color: var(--cb-bg-secondary);
  border-right: 1px solid var(--cb-border);
}

.tool-palette.hidden {
  display: none;
}

.tool-pal-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.tool-pal-sep {
  height: 1px;
  background-color: var(--cb-border);
  margin: 2px 2px;
}

.tool-pal-btn,
.tool-pal-action {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  background-color: var(--cb-btn-bg);
  color: var(--cb-text-primary);
}

.tool-pal-btn:hover,
.tool-pal-action:hover {
  border-color: var(--cb-accent-primary);
}

.tool-pal-btn.active {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border-color: var(--cb-accent-primary);
}

/* ── Tool variant flyout (shape slot: circle / pentagon / hexagon / octagon) ─ */
/* The slot button shows whichever variant is active, with a corner marker as
   the affordance. Click an inactive slot to select it; click it again (or
   right-click it) to open the flyout. */

.tool-pal-btn.has-variants {
  position: relative;
}

.tool-pal-variant-marker {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0.55;
  pointer-events: none;
}

.tool-pal-btn.has-variants:hover .tool-pal-variant-marker,
.tool-pal-btn.has-variants.active .tool-pal-variant-marker {
  opacity: 1;
}

/* Rendered as a sibling of .tool-palette (which clips overflow) and positioned
   from the button's rect, so it can escape the scrolling strip. */
.tool-variant-flyout {
  display: none;
}

.tool-variant-flyout.open {
  display: flex;
  position: fixed;
  z-index: 2000;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  background-color: var(--cb-bg-secondary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.tool-variant-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  color: var(--cb-text-primary);
  font-size: 12px;
}

.tool-variant-btn:hover {
  border-color: var(--cb-accent-primary);
}

.tool-variant-btn[aria-checked="true"] {
  background-color: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border-color: var(--cb-accent-primary);
}

.tool-variant-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Blob sculpt toolbar controls (sprite + tile editors) ─────────────────── */
/* Shown only while the Blob tool is active — the widget flips display inline. */
.blob-control {
  display: none;
  align-items: center;
  gap: 6px;
}

.blob-control > label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--cb-text-primary);
}

.blob-control select {
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 3px;
}

.blob-control button {
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 10px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.blob-control button:hover:not(:disabled) {
  background: var(--cb-btn-hover);
  border-color: var(--cb-accent-primary);
}

/* Disabled is the resting state — there is no session most of the time — so it
   has to read as "not available yet" rather than as broken. */
.blob-control button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Commit is the affirmative action of the pair, so it carries the accent once
   there is actually something to commit. */
.blob-control button.blob-commit:not(:disabled) {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border-color: var(--cb-accent-primary);
}

.blob-control button.blob-commit:not(:disabled):hover {
  background: var(--cb-accent-hover);
}

/* Reserves its width so the toolbar doesn't jump when a session opens. */
.blob-session-status {
  font-size: 10px;
  color: var(--cb-accent-warning);
  white-space: nowrap;
  min-width: 60px;
}

/* Widget Help modal — shows a widget's annotated control reference (the ?
   button on each widget header). Content is generated by npm run docs:capture
   and served at /widget-docs. Theme tokens only. */

.wh-overlay {
  position: fixed;
  inset: 0;
  background: var(--cb-modal-overlay, rgba(0, 0, 0, 0.7));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.wh-modal {
  background: var(--cb-bg-secondary, #252526);
  border: 1px solid var(--cb-border, #3e3e42);
  border-radius: 8px;
  width: 1100px;
  max-width: 94vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: var(--cb-text-primary, #d4d4d4);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cb-border, #3e3e42);
  flex: none;
}

.wh-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.wh-close {
  background: var(--cb-btn-bg, #555);
  color: var(--cb-btn-text, #fff);
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  cursor: pointer;
  flex: none;
}

.wh-body {
  padding: 16px 20px;
  overflow-y: auto;
  overflow-x: hidden; /* only ever scroll vertically */
  flex: 1;
  min-height: 0;
}

.wh-caption {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--cb-text-secondary, #ccc);
  line-height: 1.4;
}

.wh-shot {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--cb-border, #3e3e42);
  border-radius: 4px;
  margin-bottom: 14px;
}

.wh-subtitle {
  font-size: 14px;
  font-weight: 600;
  margin: 22px 0 10px;
  color: var(--cb-text-secondary, #ccc);
}

.wh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}

.wh-table th,
.wh-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--cb-border, #3e3e42);
  vertical-align: top;
  overflow-wrap: anywhere; /* wrap long descriptions instead of widening the table */
}

.wh-table th {
  color: var(--cb-text-muted, #888);
  font-weight: 600;
}

.wh-table td.wh-num {
  text-align: right;
  color: var(--cb-text-muted, #888);
  width: 2.5em;
  white-space: nowrap;
}

.wh-table td.wh-kind {
  color: var(--cb-text-muted, #888);
  white-space: nowrap;
}

.wh-empty {
  padding: 40px 8px;
  text-align: center;
  color: var(--cb-text-muted, #888);
  font-size: 13px;
}

/* Help widget — parameter list formatting. Bare "**Heading**" parameters are
   shown as subheadings (no bullet, bold, spaced) to group long modifier lists;
   the rest are normal bullets. Theme tokens only. */

/* ---- Readable bullet/list typography (descriptions, notes, parameters) ----
   Rules target `li` directly so inline styles on the <ul> containers don't
   override the line-height/colour. A clean reading stack with generous spacing
   and a soft accent marker reads far better than the old tight default discs. */

.markdown-content ul,
.markdown-content ol {
  margin: 10px 0;
  padding-left: 1.5em;
}

.markdown-content li,
.help-params li {
  margin: 6px 0;
  padding-left: 3px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--cb-text-secondary);
}

/* Soft, smaller accent marker instead of a heavy black disc. */
.markdown-content li::marker,
.help-params li::marker {
  color: var(--cb-accent-primary);
  font-size: 0.85em;
}

/* Nested lists tuck in closer to their parent item. */
.markdown-content li > ul,
.markdown-content li > ol {
  margin: 4px 0;
}

.help-params .help-param-heading {
  list-style: none;
  margin: 14px 0 4px -20px; /* cancel the ul padding so it aligns left, drop bullet */
  padding-left: 0; /* override the bullet item's padding so headings stay flush */
  font-weight: 700;
  color: var(--cb-text-secondary);
}

.help-params .help-param-heading:first-child {
  margin-top: 0;
}

.help-params strong {
  font-weight: 700;
  color: var(--cb-text-primary);
}

/* Copy-to-clipboard button on code blocks (syntax, examples, markdown code).
   Subtle in the corner; clearer on hover/focus; confirms with "Copied!". */
.help-widget pre {
  /* JS sets position:relative too, but declare it so the button anchors even
     before the script runs. */
  position: relative;
}

/* A code block is one surface, not one per line.
 *
 * VS Code's webview stylesheet gives every <code> a background of its own
 * (--vscode-textPreformat-background). On an inline code span that is exactly
 * right. Inside a <pre> it is not: <code> is an inline element, so a wrapped
 * block gets a separate background box hugging the text of each LINE, and the
 * block's own background never shows. The web IDE has no such default, which
 * is why this only ever looked wrong in the extension.
 *
 * The <pre> carries the surface; the <code> inside it carries none. Inline
 * code spans elsewhere in the docs keep their background. */
.help-widget pre code,
.markdown-content pre code {
  background: none;
  background-color: transparent;
  padding: 0;
}

.help-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
  color: var(--cb-text-secondary);
  background: var(--cb-btn-bg);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.help-copy-btn svg {
  display: block;
}

.help-widget pre:hover .help-copy-btn,
.help-copy-btn:focus-visible {
  opacity: 1;
}

.help-copy-btn:hover {
  opacity: 1;
  background: var(--cb-bg-hover);
}

.help-copy-btn.copied {
  opacity: 1;
  color: var(--cb-accent-text);
  background: var(--cb-accent-success);
  border-color: var(--cb-accent-success);
}

/* Body prose typography — the description/notes paragraphs were inheriting the
   app's default font (a rougher fallback on some platforms) at a tight
   line-height, so they read worse than the bullets. Give them the same clean
   reading stack + comfortable line-height the lists use. */
.markdown-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
  font-size: 13px;
}

.markdown-content p {
  line-height: 1.7;
}

/* Crash BASIC syntax highlighting for help code blocks (see highlightBasic in
   help-widget.ts). Colours come from the shared --cb-syntax-* theme tokens, so
   it tracks the active theme like the editor does. */
.help-widget .hl-keyword  { color: var(--cb-syntax-keyword); }
.help-widget .hl-function { color: var(--cb-syntax-function); }
.help-widget .hl-type     { color: var(--cb-syntax-type); }
.help-widget .hl-string   { color: var(--cb-syntax-string); }
.help-widget .hl-number   { color: var(--cb-syntax-number); }
.help-widget .hl-comment  { color: var(--cb-syntax-comment); font-style: italic; }

/* Hover feedback for the keyword reference's clickable rows and buttons.
 *
 * These lived only in the VS Code extension's inline <style> block, which
 * meant the web IDE had no hover feedback at all and the extension had five
 * rules nothing else knew about. They belong here, where both surfaces get
 * them from the same file.
 *
 * `!important` because the template styles these elements inline, so a plain
 * class rule loses the specificity contest. */
.search-result-item:hover {
  background: var(--cb-bg-hover) !important;
}

.keyword-item:hover {
  border-color: var(--cb-border-focus) !important;
}

.category-btn:hover,
.see-also-btn:hover,
#back-to-list:hover {
  opacity: 0.8;
}

/* ---- Find on this page ------------------------------------------------
   The bar sticks to the top of the article while it scrolls, rather than
   floating over it: in a narrow widget an overlay covers the very text the
   reader is trying to find. Theme tokens only. */

.help-find {
  position: sticky;
  top: -16px;               /* cancels the content area's own padding */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -16px -16px 12px;
  padding: 8px 12px;
  background: var(--cb-bg-secondary);
  border-bottom: 1px solid var(--cb-border);
}

.help-find[hidden] {
  display: none;
}

.help-find-icon {
  display: flex;
  color: var(--cb-text-muted);
}

.help-find-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  background: var(--cb-bg-primary);
  border: 1px solid var(--cb-border-light);
  border-radius: 4px;
  color: var(--cb-text-primary);
  font-size: 13px;
}

.help-find-input:focus {
  outline: 1px solid var(--cb-accent-primary);
  outline-offset: -1px;
}

.help-find-count {
  flex: none;
  min-width: 62px;
  text-align: right;
  font-size: 11px;
  color: var(--cb-text-muted);
  white-space: nowrap;
}

.help-find-count.is-empty {
  color: var(--cb-accent-warning);
}

/* Scoped to the bar: the widget's other buttons are sized by their own rules,
   and a shared selector here would resize them. */
.help-find button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--cb-text-secondary);
  cursor: pointer;
}

.help-find button:hover {
  background: var(--cb-btn-hover);
  color: var(--cb-text-primary);
}

/* The way in, in the category row. */
.help-find-open {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 6px 10px;
  background: var(--cb-btn-bg);
  color: var(--cb-text-primary);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.help-find-open:hover {
  background: var(--cb-btn-hover);
}

/* A hit has to read as a hit in every theme, and the current one has to be
   findable among the rest without hunting. */
.help-find-hit {
  background: var(--cb-accent-secondary);
  color: var(--cb-text-inverse);
  border-radius: 2px;
}

.help-find-hit.is-current {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  outline: 1px solid var(--cb-text-primary);
}

/*
 * Monaco overrides.
 *
 * Widget-title tooltips ("workbench hovers") — e.g. the Find widget's Close
 * button — are rendered by Monaco into a body-level `.context-view` at z-index
 * 2576, and it gets positioned ON TOP of the very button it describes.
 *
 * Because the tooltip is hit-testable, that creates a loop: hovering the X pops
 * the tooltip, the tooltip covers the X, so the button receives `mouseleave`,
 * so the tooltip hides, so the button receives `mouseenter`… The tooltip visibly
 * flickers, and a click lands on the tooltip rather than the button — the X
 * never sees a `mousedown` at all, which is why Find could only be dismissed
 * with Escape.
 *
 * These tooltips are informational and have nothing clickable in them, so take
 * them out of the hit-test entirely. That both restores the click and breaks the
 * flicker loop, since the tooltip can no longer pull the pointer off the button.
 *
 * Scoped to `.workbench-hover`: Monaco's *content* hovers (error messages,
 * symbol info) don't carry that class and stay fully interactive, as do context
 * menus, which share the `.context-view` container but never contain a hover.
 */
.context-view:has(.monaco-hover.workbench-hover),
.context-view .workbench-hover-container,
.context-view .monaco-hover.workbench-hover,
.context-view .monaco-hover.workbench-hover * {
  pointer-events: none;
}

/* Crashkit import modal — preview + per-file conflict resolution. */

.crashkit-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--cb-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.crashkit-modal {
  width: 520px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--cb-bg-secondary);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
}

.crashkit-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cb-border);
}

.crashkit-modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.crashkit-modal-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--cb-text-secondary);
}

.crashkit-modal-body {
  padding: 12px 20px;
  overflow-y: auto;
  flex: 1;
}

.crashkit-section + .crashkit-section {
  margin-top: 16px;
}

.crashkit-section h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cb-text-secondary);
}

.crashkit-section h3.crashkit-warn {
  color: var(--cb-accent-warning);
}

.crashkit-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--cb-text-secondary);
}

.crashkit-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: var(--cb-accent-primary);
  cursor: pointer;
  text-decoration: underline;
}

.crashkit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cb-border);
  border-radius: 4px;
}

.crashkit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  font-size: 12px;
}

.crashkit-row + .crashkit-row {
  border-top: 1px solid var(--cb-border);
}

.crashkit-row.conflict {
  background: var(--cb-bg-tertiary);
}

.crashkit-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
}

.crashkit-res {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 2px 4px;
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
}

.crashkit-empty {
  margin: 0;
  font-size: 12px;
  color: var(--cb-text-secondary);
}

.crashkit-modal-footer {
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--cb-bg-tertiary);
  border-top: 1px solid var(--cb-border);
  border-radius: 0 0 8px 8px;
}

.crashkit-btn {
  padding: 6px 14px;
  font-size: 12px;
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  cursor: pointer;
}

.crashkit-btn:hover {
  background: var(--cb-bg-hover);
}

.crashkit-btn.primary {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border-color: var(--cb-accent-primary);
}

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

/* --- Selection checkboxes in the resource list --- */

.resource-select {
  flex: 0 0 auto;
  margin-right: 6px;
  cursor: pointer;
}

.crashkit-selection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--cb-text-secondary);
  background: var(--cb-bg-tertiary);
  border-bottom: 1px solid var(--cb-border);
}

/**
 * Sprite resize modal — size presets plus a choice of what happens to the
 * artwork already on the canvas.
 */

.sprite-resize-overlay {
    position: fixed;
    inset: 0;
    background: var(--cb-modal-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.sprite-resize-modal {
    background: var(--cb-bg-secondary);
    color: var(--cb-text-primary);
    border: 1px solid var(--cb-border);
    border-radius: 8px;
    width: 460px;
    max-width: 92vw;
    max-height: 92vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.sprite-resize-modal .srm-header {
    padding: 16px 20px;
    background: var(--cb-bg-tertiary);
    border-bottom: 1px solid var(--cb-border);
    border-radius: 8px 8px 0 0;
}

.sprite-resize-modal .srm-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--cb-text-primary);
}

.sprite-resize-modal .srm-header p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--cb-text-muted);
}

.sprite-resize-modal .srm-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sprite-resize-modal .srm-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cb-text-muted);
    margin-bottom: 8px;
}

/* ---- Presets ---- */

.sprite-resize-modal .srm-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.sprite-resize-modal .srm-preset {
    padding: 7px 4px;
    background: var(--cb-btn-bg);
    color: var(--cb-btn-text);
    border: 1px solid var(--cb-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.15s, border-color 0.15s;
}

.sprite-resize-modal .srm-preset:hover {
    background: var(--cb-bg-hover);
    border-color: var(--cb-accent-primary);
}

.sprite-resize-modal .srm-preset.selected {
    background: var(--cb-accent-primary);
    color: var(--cb-accent-text);
    border-color: var(--cb-accent-primary);
}

/* ---- Size inputs ---- */

.sprite-resize-modal .srm-size-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.sprite-resize-modal .srm-field {
    flex: 1;
}

.sprite-resize-modal .srm-field label {
    display: block;
    font-size: 11px;
    color: var(--cb-text-muted);
    margin-bottom: 4px;
}

.sprite-resize-modal .srm-field input {
    width: 100%;
    padding: 7px 9px;
    background: var(--cb-bg-input);
    color: var(--cb-text-primary);
    border: 1px solid var(--cb-border);
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
}

.sprite-resize-modal .srm-field input:focus {
    outline: none;
    border-color: var(--cb-accent-primary);
}

.sprite-resize-modal .srm-times {
    color: var(--cb-text-muted);
    font-size: 16px;
    padding-bottom: 8px;
}

/* ---- Mode cards ---- */

.sprite-resize-modal .srm-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sprite-resize-modal .srm-mode {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--cb-bg-tertiary);
    border: 1px solid var(--cb-border);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s;
}

.sprite-resize-modal .srm-mode:hover {
    background: var(--cb-bg-hover);
}

.sprite-resize-modal .srm-mode.selected {
    border-color: var(--cb-accent-primary);
    background: var(--cb-bg-hover);
}

.sprite-resize-modal .srm-mode-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cb-text-primary);
}

.sprite-resize-modal .srm-mode-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--cb-text-muted);
    flex-shrink: 0;
}

.sprite-resize-modal .srm-mode.selected .srm-mode-dot {
    border-color: var(--cb-accent-primary);
    background: var(--cb-accent-primary);
    box-shadow: inset 0 0 0 2px var(--cb-bg-tertiary);
}

.sprite-resize-modal .srm-mode-desc {
    font-size: 11px;
    line-height: 1.45;
    color: var(--cb-text-muted);
}

/* Tiny before/after diagram inside each mode card. */
.sprite-resize-modal .srm-mode-art {
    display: block;
    width: 100%;
    height: 44px;
}

/* ---- Warning + error ---- */

.sprite-resize-modal .srm-note {
    padding: 9px 11px;
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    background: var(--cb-bg-tertiary);
    color: var(--cb-text-secondary);
    border-left: 3px solid var(--cb-accent-warning);
}

.sprite-resize-modal .srm-error {
    padding: 8px 12px;
    background: var(--cb-bg-tertiary);
    border-left: 3px solid var(--cb-accent-danger);
    border-radius: 4px;
    font-size: 12px;
    color: var(--cb-accent-danger);
}

/* ---- Footer ---- */

.sprite-resize-modal .srm-footer {
    padding: 12px 16px;
    background: var(--cb-bg-tertiary);
    border-top: 1px solid var(--cb-border);
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.sprite-resize-modal .srm-footer button {
    padding: 8px 16px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid var(--cb-border);
    transition: background-color 0.15s;
}

.sprite-resize-modal .srm-cancel {
    background: var(--cb-btn-bg);
    color: var(--cb-btn-text);
}

.sprite-resize-modal .srm-cancel:hover {
    background: var(--cb-bg-hover);
}

.sprite-resize-modal .srm-confirm {
    background: var(--cb-accent-primary);
    color: var(--cb-accent-text);
    border-color: var(--cb-accent-primary);
}

.sprite-resize-modal .srm-confirm:hover {
    background: var(--cb-accent-hover);
}

/**
 * Quickstart — the welcome shown after New Project. Same six steps as the
 * VS Code extension's wizard (see src/quickstart/quickstart-content.ts); this
 * is only how the IDE draws them.
 */

.quickstart-overlay {
    position: fixed;
    inset: 0;
    background: var(--cb-modal-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.quickstart-modal {
    background: var(--cb-bg-secondary);
    color: var(--cb-text-primary);
    border: 1px solid var(--cb-border);
    border-radius: 8px;
    width: 640px;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.quickstart-header {
    padding: 18px 22px;
    background: var(--cb-bg-tertiary);
    border-bottom: 1px solid var(--cb-border);
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.quickstart-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.quickstart-lede {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--cb-text-muted);
}

.quickstart-close {
    background: none;
    border: none;
    color: var(--cb-text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.quickstart-close:hover {
    background: var(--cb-bg-hover);
    color: var(--cb-text-primary);
}

.quickstart-body {
    padding: 4px 22px 8px;
    overflow-y: auto;
}

.quickstart-step {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--cb-border);
}

.quickstart-step:last-child {
    border-bottom: none;
}

.quickstart-marker {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cb-bg-tertiary);
    color: var(--cb-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.quickstart-content {
    flex: 1;
}

.quickstart-content h3 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.quickstart-content p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cb-text-secondary);
}

.quickstart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.quickstart-footer {
    padding: 12px 18px;
    background: var(--cb-bg-tertiary);
    border-top: 1px solid var(--cb-border);
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: flex-end;
}

/* Scoped to the modal so the global toolbar button sizing can't reach in. */
.quickstart-modal .qs-btn {
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid var(--cb-border);
    border-radius: 4px;
    background: var(--cb-btn-bg);
    color: var(--cb-btn-text);
    cursor: pointer;
}

.quickstart-modal .qs-btn:hover {
    background: var(--cb-btn-hover-bg);
}

.quickstart-modal .qs-btn-primary {
    background: var(--cb-accent-primary);
    color: var(--cb-accent-text);
    border-color: var(--cb-accent-primary);
}

.quickstart-modal .qs-btn-primary:hover {
    background: var(--cb-accent-hover, var(--cb-accent-primary));
}

/**
 * MIDI drum pad mapping modal — which note plays which drum.
 */

.dpm-overlay {
  position: fixed;
  inset: 0;
  background: var(--cb-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.drum-pad-map-modal {
  background: var(--cb-bg-secondary);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  width: 460px;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.drum-pad-map-modal .dpm-header {
  padding: 14px 18px;
  background: var(--cb-bg-tertiary);
  border-bottom: 1px solid var(--cb-border);
  border-radius: 8px 8px 0 0;
}

.drum-pad-map-modal .dpm-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.drum-pad-map-modal .dpm-header p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--cb-text-muted);
}

.drum-pad-map-modal .dpm-body {
  padding: 8px 12px;
  overflow-y: auto;
}

.drum-pad-map-modal .dpm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
}

.drum-pad-map-modal .dpm-row:hover {
  background: var(--cb-bg-hover);
}

.drum-pad-map-modal .dpm-note {
  flex: 0 0 96px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--cb-bg-input);
  border: 1px solid var(--cb-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drum-pad-map-modal select {
  flex: 1;
  min-width: 0;
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 4px;
}

.drum-pad-map-modal .dpm-empty {
  margin: 14px 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cb-text-muted);
}

/* Adding a binding is its own step, separated from the list it appends to. */
.drum-pad-map-modal .dpm-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--cb-border);
}

.drum-pad-map-modal button {
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  padding: 3px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.drum-pad-map-modal button:hover:not(:disabled) {
  background: var(--cb-bg-hover);
  border-color: var(--cb-accent-primary);
}

.drum-pad-map-modal button:disabled {
  opacity: 0.4;
  cursor: default;
}

.drum-pad-map-modal .dpm-footer {
  padding: 10px 14px;
  background: var(--cb-bg-tertiary);
  border-top: 1px solid var(--cb-border);
  border-radius: 0 0 8px 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.drum-pad-map-modal .dpm-remove {
  flex: 0 0 auto;
  color: var(--cb-accent-danger);
}

.drum-pad-map-modal .dpm-done {
  background: var(--cb-accent-primary);
  color: var(--cb-accent-text);
  border-color: var(--cb-accent-primary);
}

.drum-pad-map-modal .dpm-done:hover {
  background: var(--cb-accent-hover);
}

.drum-pad-map-modal .dpm-pitch {
  flex: 0 0 68px;
  min-width: 0;
  background: var(--cb-bg-input);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 3px;
  font-size: 11px;
  padding: 2px 4px;
}

/* Rejected in place: a pitch that can't be parsed would otherwise be stored
   and then ignored at record time, which reads as the setting doing nothing. */
.drum-pad-map-modal .dpm-pitch.invalid {
  border-color: var(--cb-accent-danger);
  color: var(--cb-accent-danger);
}

/**
 * MIDI setup modal — which ports play notes, and what each transport button sends.
 */

.mss-overlay {
  position: fixed;
  inset: 0;
  background: var(--cb-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.midi-setup-modal {
  background: var(--cb-bg-secondary);
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  width: 460px;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.midi-setup-modal .mss-header {
  padding: 14px 18px;
  background: var(--cb-bg-tertiary);
  border-bottom: 1px solid var(--cb-border);
  border-radius: 8px 8px 0 0;
}

.midi-setup-modal .mss-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.midi-setup-modal .mss-header p {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--cb-text-muted);
}

.midi-setup-modal .mss-section {
  padding: 12px 18px;
  overflow-y: auto;
}

.midi-setup-modal .mss-section + .mss-section {
  border-top: 1px solid var(--cb-border);
}

.midi-setup-modal .mss-section h3 {
  margin: 0 0 2px;
  font-size: 12.5px;
  font-weight: 600;
}

.midi-setup-modal .mss-hint {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--cb-text-muted);
}

.midi-setup-modal .mss-empty {
  margin: 0;
  font-size: 11.5px;
  color: var(--cb-text-muted);
}

.midi-setup-modal .mss-capture-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 8px;
}

.midi-setup-modal .mss-capture-state {
  flex: 1;
  font-size: 12px;
}

/* Off is worth noticing here, because nothing further down the dialog responds
   to the hardware while it is. */
.midi-setup-modal .mss-capture-off .mss-capture-state {
  color: var(--cb-accent-warning);
}

.midi-setup-modal .mss-port {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.midi-setup-modal .mss-port:hover {
  background: var(--cb-bg-hover);
}

.midi-setup-modal .mss-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
}

.midi-setup-modal .mss-row:hover {
  background: var(--cb-bg-hover);
}

.midi-setup-modal .mss-action {
  width: 60px;
  flex: none;
  font-size: 12px;
  font-weight: 600;
}

.midi-setup-modal .mss-binding {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--cb-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.midi-setup-modal .mss-unbound {
  flex: 1;
  font-size: 11.5px;
  color: var(--cb-text-muted);
}

.midi-setup-modal .mss-listening {
  flex: 1;
  font-size: 11.5px;
  color: var(--cb-accent-primary);
}

.midi-setup-modal button {
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
}

.midi-setup-modal button:hover:not(:disabled) {
  background: var(--cb-btn-hover);
}

.midi-setup-modal button:disabled {
  opacity: 0.45;
  cursor: default;
}

.midi-setup-modal .mss-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--cb-border);
  display: flex;
  justify-content: flex-end;
}

.midi-setup-modal .mss-footer .mss-done {
  background: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-text);
  padding: 5px 16px;
}

/* Third-party licenses modal — opened from the About widget's Legal section.
   Content is the vendored engine's THIRD_PARTY_LICENSES.txt, fetched at open.
   Theme tokens only. */

/* The opener, in the About widget's Legal section. Scoped to the widget root so
   the global .toolbar-btn-sized rules can't reach it. */
.about-widget .about-licenses-btn {
  margin-top: 10px;
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.about-widget .about-licenses-btn:hover {
  background: var(--cb-btn-hover);
}

.lic-overlay {
  position: fixed;
  inset: 0;
  background: var(--cb-modal-overlay, rgba(0, 0, 0, 0.7));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.lic-modal {
  background: var(--cb-bg-secondary);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  width: 900px;
  max-width: 94vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: var(--cb-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.lic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cb-border);
  flex: none;
}

.lic-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.lic-subtitle {
  margin-top: 2px;
  font-size: 11px;
  color: var(--cb-text-muted);
}

.lic-close {
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex: none;
}

.lic-close:hover {
  background: var(--cb-btn-hover);
}

.lic-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--cb-border);
  flex: none;
}

.lic-nav-btn {
  background: var(--cb-btn-bg);
  color: var(--cb-btn-text);
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}

.lic-nav-btn:hover {
  background: var(--cb-btn-hover);
}

.lic-body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  overflow-x: auto;
  flex: 1;
  min-height: 0;
}

.lic-status {
  padding: 40px 8px;
  text-align: center;
  color: var(--cb-text-muted);
  font-size: 13px;
}

.lic-section + .lic-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cb-border);
}

.lic-section-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cb-accent-primary);
}

.lic-text {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--cb-text-secondary);
  white-space: pre;
}

/* Local Folder sync section — the auto-sync opt-in in the Resources widget.
   All styling comes from theme tokens so it tracks every theme; no hardcoded
   colours. */

.local-folder-autosync {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--cb-text-secondary);
  cursor: pointer;
}

.local-folder-autosync input[type='checkbox'] {
  margin: 0;
  cursor: pointer;
}

/* Armed state reads as active, so a glance at the panel tells the user the
   folder is being written to. */
.local-folder-autosync.active {
  color: var(--cb-text-primary);
  font-weight: 600;
}

.local-folder-autosync.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.local-folder-autosync.disabled input[type='checkbox'] {
  cursor: not-allowed;
}

.local-folder-autosync-note {
  margin-top: 2px;
  font-size: 10px;
  color: var(--cb-text-secondary);
  opacity: 0.8;
}

/* Project switcher — the toolbar pulldown that selects which walled-off
   project this window has open. All colours come from theme tokens. */

.project-menu-container {
  position: relative;
  display: inline-block;
}

/* Sizing comes entirely from .toolbar-btn so this matches Menu exactly —
   only the gap between icon/name/caret is added here. Anything that sets
   padding, height, or a max-width on the button makes it disagree with its
   neighbours. A long project name is truncated on the name span instead. */
.project-menu-btn {
  gap: 6px;
}

.project-menu-icon,
.project-menu-caret {
  flex-shrink: 0;
  /* Match the button's own font-size: emoji and glyphs otherwise render
     taller than the label and stretch the button past Menu's height. */
  font-size: inherit;
  line-height: 1;
}

.project-menu-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-menu-caret {
  opacity: 0.7;
}

.project-menu-dropdown {
  position: absolute;
  left: 0;
  /* Matches the main Menu dropdown. Monaco raises its own overlays well above
     1000, so anything lower than this renders behind the editor. */
  z-index: 10000;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px 0;
  /* Same offset, surface, border and shadow as .main-menu-dropdown so the two
     toolbar dropdowns read as one component. */
  top: calc(100% + 4px);
  background-color: var(--cb-menu-bg);
  border: 1px solid var(--cb-border-light);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.project-menu-dropdown.hidden {
  display: none;
}

.project-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--cb-text-primary);
  cursor: pointer;
  user-select: none;
}

.project-menu-item:hover:not(.disabled) {
  background-color: var(--cb-menu-hover);
}

.project-menu-item.active {
  font-weight: 600;
}

/* A project already open in another window, or an action with nothing to
   act on. Left visible rather than hidden so the state is explainable. */
.project-menu-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.project-menu-check {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 11px;
  color: var(--cb-accent-primary);
}

.project-menu-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-menu-badge {
  flex-shrink: 0;
  padding: 1px 6px;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  font-size: 10px;
  color: var(--cb-text-secondary);
}

.project-menu-separator {
  height: 1px;
  margin: 4px 0;
  background-color: var(--cb-border-light);
}

.project-menu-action .project-menu-check {
  color: inherit;
}

/* Per-row delete. Kept faint until the row is hovered so the menu reads as a
   switcher first and a manager second, but it stays in the layout so rows
   don't reflow on hover. */
.project-menu-delete {
  flex-shrink: 0;
  margin-left: 4px;
  padding: 2px 4px;
  background: none;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  color: var(--cb-text-secondary);
}

.project-menu-item:hover .project-menu-delete {
  opacity: 0.7;
}

.project-menu-delete:hover:not(:disabled) {
  opacity: 1;
  background-color: var(--cb-accent-danger);
  color: var(--cb-accent-text);
}

.project-menu-delete:disabled {
  cursor: not-allowed;
}

/* Keyboard users never trigger :hover, so the button must appear on focus or
   it is unreachable without a mouse. */
.project-menu-delete:focus-visible {
  opacity: 1;
  outline: 1px solid var(--cb-border-focus);
}

/**
 * Main styles for CrashBasic IDE
 * Extracted from index.html inline styles
 */

/* ===== Base Styles ===== */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--cb-bg-primary);
    color: var(--cb-text-primary);
    overflow: hidden;
}

/* ===== Loading Screen ===== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.loading-logo {
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.loading-logo-img {
    max-width: 550px;
    width: 85%;
    height: auto;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.loading-text {
    font-size: 18px;
    color: #ddd;
    margin-bottom: 30px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #ffffff40;
    border-top: 4px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-progress {
    width: 300px;
    height: 6px;
    background-color: #ffffff20;
    border-radius: 3px;
    margin-top: 20px;
    overflow: hidden;
}

.loading-progress-bar {
    height: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    width: 0%;
    animation: progress 3s ease-out forwards;
}

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ===== Main Container ===== */
.main-container {
    display: none;
    flex-direction: column;
    height: 100vh;
}

.content-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Split-pane container fills content area */
#grid-container {
    width: 100%;
    height: 100%;
}

/* ===== Error Overlay ===== */
.error-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.error-dialog {
    background-color: var(--cb-bg-secondary);
    border: 1px solid var(--cb-border);
    border-radius: 6px;
    padding: 20px;
    max-width: 500px;
    max-height: 300px;
    overflow-y: auto;
}

.error-title {
    color: var(--cb-accent-danger);
    font-weight: bold;
    margin-bottom: 10px;
}

.error-message {
    color: var(--cb-text-secondary);
    white-space: pre-wrap;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.error-close {
    margin-top: 15px;
    text-align: right;
}

.error-close button {
    background-color: var(--cb-accent-primary);
    color: var(--cb-accent-text);
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
}

.error-close button:hover {
    background-color: var(--cb-accent-hover);
}

/* ===== Status Bar ===== */
#status-bar-container {
    flex-shrink: 0;
    flex-grow: 0;
}

/* ===== Utility Classes ===== */
.hidden {
    display: none !important;
}

/* ===== Split-pane Widget Styles ===== */
.split-workspace {
    background-color: var(--cb-bg-primary);
}

.widget-pane {
    background-color: transparent;
}

.widget-pane-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background-color: var(--cb-bg-tertiary);
    border: 1px solid var(--cb-border);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Motion Panels supplies sizing and input; all appearance uses our theme. */
.content-container {
    min-height: 0;
}

#grid-container {
    position: relative;
    box-sizing: border-box;
    padding: 4px;
    min-width: 0;
    min-height: 0;
}

.split-layout-host, .split-group, .split-pane-slot, .widget-pane {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.split-group {
    display: flex;
}

.split-group-vertical {
    flex-direction: column;
}

.split-sized-pane {
    flex: 0 0 auto;
}

.split-fill-pane {
    flex: 1 1 0;
}

.split-separator {
    flex: 0 0 8px;
    position: relative;
    touch-action: none;
    user-select: none;
    cursor: col-resize;
    outline: none;
}

.split-group-vertical > .split-separator {
    cursor: row-resize;
}

.split-separator::after {
    content: '';
    position: absolute;
    inset: 0 3px;
    border-radius: 2px;
    background: var(--cb-border);
}

.split-group-vertical > .split-separator::after {
    inset: 3px 0;
}

.split-separator:hover::after,
.split-separator:focus-visible::after,
.split-separator[data-resizing]::after {
    background: var(--cb-accent-primary);
}

.split-maximized-host {
    position: absolute;
    inset: 4px;
    z-index: 1;
}

/* Layout presets in the View menu */
.layout-preset-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.layout-preset-check {
    margin-left: auto;
    color: var(--cb-accent-primary);
    visibility: hidden;
}

.layout-preset-item[aria-checked="true"] .layout-preset-check {
    visibility: visible;
}

.layout-preset-item:focus-visible {
    outline: 1px solid var(--cb-accent-primary);
    outline-offset: -2px;
}

/* Widget Header */
.widget-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--cb-widget-header);
    border-bottom: 1px solid var(--cb-border);
    flex-shrink: 0;
    cursor: default;
}

.widget-icon {
    font-size: 16px;
    margin-right: 8px;
}

.widget-title {
    flex: 1;
    font-weight: bold;
    font-size: 12px;
    color: var(--cb-text-secondary);
}

.widget-type-selector {
    flex: none;
    max-width: 140px;
    background: transparent;
    border: none;
    color: var(--cb-text-secondary);
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    margin-right: auto; /* Push controls to the right, keep the selector compact */
    border-radius: 3px;
    outline: none;
    text-overflow: ellipsis;
}

.widget-type-selector:hover {
    background: var(--cb-bg-hover);
}

.widget-type-selector:focus {
    background: var(--cb-bg-hover);
    outline: 1px solid var(--cb-border);
}

.widget-type-selector option {
    background: var(--cb-bg-primary);
    color: var(--cb-text-primary);
}

.widget-type-selector optgroup {
    background: var(--cb-bg-secondary);
    color: var(--cb-text-muted);
    font-weight: bold;
    font-style: normal;
}

.widget-controls {
    display: flex;
    gap: 4px;
}

.widget-control-btn {
    background: none;
    border: none;
    color: var(--cb-text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 16px;
    border-radius: 2px;
    transition: background-color 0.2s;
}

.widget-control-btn:hover {
    background-color: var(--cb-bg-hover);
}

/* Widget Body */
.widget-body {
    flex: 1;
    overflow: auto;
    position: relative;
    /* Thin scrollbar for Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--cb-scrollbar-thumb) transparent;
}

/* Webkit scrollbar styling (Chrome, Safari, Edge) - matches Monaco style */
.widget-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.widget-body::-webkit-scrollbar-track {
    background: transparent;
}

.widget-body::-webkit-scrollbar-thumb {
    background: var(--cb-scrollbar-thumb);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.widget-body::-webkit-scrollbar-thumb:hover {
    background: var(--cb-scrollbar-thumb-hover);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.widget-body::-webkit-scrollbar-corner {
    background: transparent;
}

/* Toolbar Icon Buttons */
.toolbar-icons {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.toolbar-icon-btn {
    background: none;
    border: 1px solid var(--cb-border);
    color: var(--cb-text-secondary);
    cursor: pointer;
    padding: 6px 10px;
    font-size: 16px;
    border-radius: 3px;
    transition: all 0.2s;
}

.toolbar-icon-btn:hover {
    background-color: var(--cb-bg-hover);
    border-color: var(--cb-accent-primary);
}

.toolbar-icon-btn.active {
    background-color: var(--cb-accent-primary);
    border-color: var(--cb-accent-primary);
}

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

/* Widget-specific styles */