@layer tokens, base, components, themes;

/* Begin bundled CSS: web/css/fonts.css */
@layer base {
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin-400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/space-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-mono-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/space-mono-latin-italic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-mono-latin-italic-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

}

/* End bundled CSS: web/css/fonts.css */
/* Begin bundled CSS: web/css/tokens.css */
@layer tokens {
/* ==========================================================================
   Front-my-End: Core Neo-Brutalist Foundations (BeaverFlow OS Inspired)
   ========================================================================== */

/* Colors - Light Mode Default */
:root, body.light-mode {
  color-scheme: light;

  --primary-container: #ff5f1f; /* Orange */
  --surface-variant: #f9dcd4;    /* Retro Tan */
  --surface-tint: #ab3600;       /* Rust Crimson */
  --surface-container: #ffe9e3;  /* Peach Cream */
  --surface-container-lowest: #ffffff; /* Pure White */
  --on-surface: #271813;         /* Deep Coffee */
  --on-surface-variant: #5b4138; /* Muted Charcoal */
  --outline-variant: #e3bfb3;    /* Tan Muted Border */
  
  --brutal-shadow: #271813;
  --brutal-shadow-rgb: 39, 24, 19;
  
  /* Layout Metrics */
  --border-width: 3px;
  --border-width-sm: 2px;
  --border-radius: 0px;
  --border-size: 3px;
  --card-shadow: 8px 8px 0 var(--brutal-shadow);
  --btn-shadow: 3px 3px 0 var(--brutal-shadow);
  --text-shadow: 2px 2px 0 var(--brutal-shadow);
  --hover-transform: translate(-2px, -2px);
  --hover-shadow: 5px 5px 0 var(--brutal-shadow);
  --active-transform: translate(1px, 1px);
  --active-shadow: 1px 1px 0 var(--brutal-shadow);
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  --top-bar-height: 48px;
  --bottom-bar-height: 56px;
  
  /* Font Stacks */
  --font-ui: "Space Grotesk", sans-serif;
  --font-code: "Space Mono", monospace;
  
  /* Theme Highlights */
  --color-success: #10b981; /* Green */
  --color-warning: #f59e0b; /* Yellow */
  --color-error: #ef4444;   /* Red */
  
  --color-info: #3b82f6;    /* Soft Blue for Console logs */
  
  /* Panel Badge Custom Accent colors */
  --color-html-badge: #ef4444; /* HTML Red */
  --color-css-badge: #3b82f6;  /* CSS Blue */
  --color-js-badge: #eab308;   /* JS Yellow */
  --color-preview-badge: #a855f7; /* Preview Purple */
  --color-console-badge: var(--surface-tint); /* Console Coral-Orange */
  --color-scratch-badge: #10b981; /* Scratchpad Green */
  
  /* Syntax Highlighting Tokens */
  --token-keyword: #ab3600;
  --token-string: #059669;
  --token-number: #d97706;
  --token-comment: #78716c;
  --token-operator: #271813;
  --token-punctuation: #5b4138;
  --token-tag: #2563eb;
  --token-attr: #db2777;
  --token-property: #7c3aed;
  --token-value: #059669;
  --token-selector: #b91c1c;
  --token-identifier: #271813;
}

body.dark-mode,
body.boring-dark {
  color-scheme: dark;
}

body.boring-light {
  color-scheme: light;
}

}

/* End bundled CSS: web/css/tokens.css */
/* Begin bundled CSS: web/css/base.css */
@layer base {
/* ==========================================================================
   Resets and General Styling
   ========================================================================== */

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

html {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background-color: var(--surface-variant, #f9dcd4);
  color: var(--on-surface, #271813);
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

:where(
  button,
  [href],
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}



/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--surface-container, #ffe9e3);
  border-left: var(--border-width-sm, 2px) solid var(--brutal-shadow, #271813);
  border-top: var(--border-width-sm, 2px) solid var(--brutal-shadow, #271813);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-container, #ff5f1f);
  border: var(--border-width-sm, 2px) solid var(--brutal-shadow, #271813);
  box-shadow: 2px 2px 0 var(--brutal-shadow, #271813);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--surface-tint, #ab3600);
}

}

/* End bundled CSS: web/css/base.css */
/* Begin bundled CSS: web/css/layout.css */
@layer base {
/* ==========================================================================
   Header and Actions Layout
   ========================================================================== */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--top-bar-height);
  background-color: var(--surface-container);
  border-bottom: var(--border-width) solid var(--brutal-shadow);
  padding: 0 var(--spacing-md);
  box-shadow: 0 4px 0 rgba(var(--brutal-shadow-rgb), 0.15);
  z-index: 1000;
  position: relative;
  transition: background-color 0.2s ease;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.brand-logo {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--primary-container);
  color: #fff;
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: 2px 10px;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  text-shadow: 1px 1px 0 var(--brutal-shadow);
  user-select: none;
  white-space: nowrap;
}

body.dark-mode .brand-logo {
  color: #000;
  text-shadow: none;
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.control-label {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface);
}

/* Brutalist Dropdown Styling */
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "▼";
  font-size: 8px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--on-surface);
}

#view-select, #menu-template-select, #menu-theme-select, #menu-view-select {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: 4px 22px 4px 10px;
  border-radius: 0;
  appearance: none;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 var(--brutal-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

#view-select:hover, #menu-template-select:hover, #menu-theme-select:hover, #menu-view-select:hover {
  transform: translate(-0.5px, -0.5px);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
}

#view-select:focus, #menu-template-select:focus, #menu-theme-select:focus, #menu-view-select:focus {
  outline: none;
  border-color: var(--primary-container);
}

#view-select:focus-visible,
#menu-template-select:focus-visible,
#menu-theme-select:focus-visible,
#menu-view-select:focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 2px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Retro-Brutalist Buttons */
.icon-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: 4px 12px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  /* Optimized: only transition transform and box-shadow, not all properties */
  transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.1s ease;
  border-radius: 0;
  /* GPU layer promotion for smooth transforms */
  transform: translateZ(0);
  will-change: transform;
}

.icon-btn:hover {
  background-color: var(--surface-container);
  transform: translate(-1.5px, -1.5px) translateZ(0);
  box-shadow: 3.5px 3.5px 0 var(--brutal-shadow);
}

.icon-btn:active {
  transform: translate(1px, 1px) translateZ(0);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

/* Accent Buttons */
.icon-btn.action-btn {
  background-color: var(--primary-container);
  color: white;
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  font-weight: 900;
  text-shadow: 1px 1px 0 var(--brutal-shadow);
}

body.dark-mode .icon-btn.action-btn {
  color: black;
  text-shadow: none;
}

.icon-btn.action-btn:hover {
  background-color: var(--surface-tint);
  box-shadow: 5px 5px 0 var(--brutal-shadow);
}

.icon-btn.warning {
  border-color: var(--color-error);
}

.icon-btn.warning:hover {
  background-color: var(--color-error);
  color: white;
  border-color: var(--brutal-shadow);
}

/* Sizing and alignment for header icon-only buttons */
.top-bar-right .icon-btn.only-icon {
  padding: 4px !important;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-bar-right .icon-btn.only-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

}

/* End bundled CSS: web/css/layout.css */
/* Begin bundled CSS: web/css/components.css */
@layer components {
/* Begin bundled CSS: web/css/components/panels.css */
.workspace {
  flex: 1;
  display: grid;
  padding: var(--spacing-md);
  gap: var(--spacing-md);
  min-height: 0; /* Important for scroll nested elements */
  background-color: var(--surface-variant);
  background-image: radial-gradient(var(--outline-variant) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Core Panel Style */
.panel {
  background-color: var(--surface-container-lowest);
  border: var(--border-width) solid var(--brutal-shadow);
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Standard containment */
  resize: both; /* Standard CSS resizability */
  min-width: 180px;
  min-height: 120px;
  position: relative;
  /* Define panel as a queryable container to adjust titles/text sizes based on actual widget dimensions */
  container-type: inline-size;
  /* Optimized: only transition specific properties, not 'all' */
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  /* GPU acceleration: promote panel to its own compositor layer */
  transform: translateZ(0);
  /* Paint containment: isolate repaint regions for performance */
  contain: layout style paint;
}

.panel:hover {
  box-shadow: 6px 6px 0 var(--brutal-shadow);
}

.panel.dragging {
  transition: none;
  cursor: grabbing;
  z-index: 200;
  opacity: 0.95;
}

.panel.inspect-pulse {
  animation: inspectPulse 0.7s ease-in-out 3;
}

@keyframes inspectPulse {
  0%, 100% {
    box-shadow: 4px 4px 0 var(--brutal-shadow);
  }
  50% {
    box-shadow: 0 0 0 4px var(--primary-container), 6px 6px 0 var(--brutal-shadow);
  }
}

.panel-header {
  height: 40px;
  background-color: var(--surface-container);
  background-image: radial-gradient(var(--on-surface-variant) 1.2px, transparent 1.2px);
  background-size: 6px 6px;
  background-repeat: repeat-y;
  background-position: 72px center;
  border-bottom: var(--border-width-sm) solid var(--brutal-shadow);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-sm) 0 var(--spacing-sm); /* Pulled closer to the left edge */
  user-select: none;
}

/* Keep the badge (and console clear+badge cluster) pushed to the right edge,
   while the minimize/focus controls group at the left. */
.panel-header > .panel-badge,
.panel-header > .panel-header-right {
  margin-left: auto;
}
.panel.minimized .panel-badge {
  margin-left: 0 !important;
}

.panel-title {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
  transition: font-size 0.15s ease;
}

/* Ensure panel badges remain fully visible and aligned regardless of panel sizing */

.panel-header-actions, .panel-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Minimize Button — Neo-Brutalist styled */
.minimize-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  padding: 0;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
  transform: translateZ(0);
  will-change: transform;
}

.minimize-btn:hover {
  background-color: var(--primary-container);
  color: white;
  transform: translate(-1px, -1px) translateZ(0);
  box-shadow: 3px 3px 0 var(--brutal-shadow);
}

.minimize-btn:active {
  transform: translate(1px, 1px) translateZ(0);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

/* Focus Mode + Close buttons — share the Neo-Brutalist control styling */
.focus-btn,
.inspect-btn,
.close-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  padding: 0;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
  transform: translateZ(0);
  will-change: transform;
}

.focus-svg,
.inspect-svg {
  width: 15px;
  height: 15px;
  display: block;
}

.focus-btn:hover,
.inspect-btn:hover,
.close-btn:hover {
  background-color: var(--primary-container);
  color: white;
  transform: translate(-1px, -1px) translateZ(0);
  box-shadow: 3px 3px 0 var(--brutal-shadow);
}

body.dark-mode .focus-btn:hover,
body.dark-mode .inspect-btn:hover,
body.dark-mode .close-btn:hover {
  color: black;
}

.focus-btn:active,
.inspect-btn:active,
.close-btn:active {
  transform: translate(1px, 1px) translateZ(0);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

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

/* Eliminate browser-default generic focus rings and apply a premium themed indicator */
.minimize-btn:focus,
.focus-btn:focus,
.inspect-btn:focus,
.close-btn:focus {
  outline: none;
}

.minimize-btn:focus-visible,
.focus-btn:focus-visible,
.inspect-btn:focus-visible,
.close-btn:focus-visible {
  outline: var(--border-width-sm) solid var(--primary-container);
  outline-offset: 1px;
}

/* Active (engaged) Focus Mode button state */
.focus-btn.active {
  background-color: var(--primary-container);
  color: white;
}
body.dark-mode .focus-btn.active {
  color: black;
}

.inspect-btn[aria-pressed="true"] {
  background-color: var(--primary-container);
  color: white;
}

body.dark-mode .inspect-btn[aria-pressed="true"] {
  color: black;
}

/* Hide secondary controls when a panel is collapsed (keep the fused badge+restore pill clean) */
.panel.minimized .focus-btn,
.panel.minimized .inspect-btn,
.panel.minimized .close-btn {
  display: none !important;
}

/* Boring themes: round the control buttons to match the modern shell */
body.boring-light .focus-btn, body.boring-dark .focus-btn,
body.boring-light .inspect-btn, body.boring-dark .inspect-btn,
body.boring-light .close-btn, body.boring-dark .close-btn {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: none;
}
body.boring-light .focus-btn:hover, body.boring-dark .focus-btn:hover,
body.boring-light .inspect-btn:hover, body.boring-dark .inspect-btn:hover,
body.boring-light .close-btn:hover, body.boring-dark .close-btn:hover {
  transform: none;
  box-shadow: none;
}

.panel-badge {
  font-size: 13px; /* Scaled up from 10px for readability */
  font-weight: 900;
  padding: 3px 10px; /* Enhanced box dimensions */
  border: var(--border-width-sm) solid var(--brutal-shadow);
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--brutal-shadow); /* Solid brutalist accent */
  letter-spacing: 0.05em;
}

.html-badge { background-color: #ef4444; color: white; }
.css-badge { background-color: #3b82f6; color: white; }
.js-badge { background-color: #eab308; color: black; }
.preview-badge { background-color: #a855f7; color: white; }
.console-badge { background-color: var(--surface-tint); color: white; }
.scratch-badge { background-color: #10b981; color: white; }

/* Hidden panels (e.g. the scratch pad before it is opened) */
.hidden-panel { display: none !important; }

/* End bundled CSS: web/css/components/panels.css */
/* Begin bundled CSS: web/css/components/editor.css */
/* Editor Fields */
/* Editor Fields Wrapper & Highlighting Layers */
.editor-wrapper {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --editor-code-padding-left: var(--spacing-md);
  background-color: var(--surface-container-lowest, #ffffff);
}

.editor-textarea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.5;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--editor-code-padding-left);
  color: transparent; /* Makes text transparent but keeps the caret visible */
  caret-color: var(--on-surface, #271813);
  background-color: transparent;
  tab-size: 4;
  z-index: 2;
  overflow: auto;
  white-space: pre;
  word-wrap: normal;
  box-sizing: border-box;
}

.editor-textarea:focus {
  background-color: rgba(var(--primary-container), 0.03);
}

.editor-textarea:focus-visible {
  box-shadow: inset 0 0 0 var(--border-width-sm, 2px) var(--primary-container, #ff5f1f);
}

.highlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--editor-code-padding-left);
  font-family: var(--font-code);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-surface, #271813);
  background-color: transparent;
  z-index: 1;
  pointer-events: none; /* Let scrolls/clicks fall through */
  overflow: hidden;
  white-space: pre;
  word-wrap: normal;
  box-sizing: border-box;
}

.inspect-line-marker {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  height: 21px;
  pointer-events: none;
  background-color: rgba(255, 95, 31, 0.18);
  border-top: 1px solid rgba(255, 95, 31, 0.24);
  border-bottom: 1px solid rgba(255, 95, 31, 0.24);
}

body.dark-mode .inspect-line-marker {
  background-color: rgba(255, 138, 61, 0.24);
  border-color: rgba(255, 176, 138, 0.28);
}

body.boring-light .inspect-line-marker {
  background-color: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.22);
}

body.boring-dark .inspect-line-marker {
  background-color: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.28);
}

.editor-wrapper.with-line-numbers {
  --editor-code-padding-left: 54px;
}

.line-number-gutter {
  position: absolute;
  top: var(--spacing-md);
  left: 0;
  width: 42px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding-right: 9px;
  box-sizing: border-box;
  color: var(--on-surface-variant, #5b4138);
  opacity: 0.58;
  font-family: var(--font-code);
  font-size: 12px;
  line-height: 1.5;
  user-select: none;
  background: linear-gradient(
    90deg,
    var(--surface-container-lowest, #ffffff) 0%,
    var(--surface-container-lowest, #ffffff) 78%,
    transparent 100%
  );
}

.line-number-gutter span {
  display: block;
  height: 21px;
}

.editor-wrapper.with-line-numbers::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42px;
  z-index: 3;
  border-right: 1px dashed var(--outline-variant, #e3bfb3);
  pointer-events: none;
}

/* Token classes for syntax highlighting */
.token-keyword { color: var(--token-keyword, #ab3600); font-weight: 700; }
.token-string { color: var(--token-string, #059669); }
.token-number { color: var(--token-number, #d97706); }
.token-comment { color: var(--token-comment, #78716c); font-style: italic; }
.token-operator { color: var(--token-operator, #271813); }
.token-punctuation { color: var(--token-punctuation, #5b4138); }
.token-tag { color: var(--token-tag, #2563eb); font-weight: 700; }
.token-attr { color: var(--token-attr, #db2777); }
.token-property { color: var(--token-property, #7c3aed); }
.token-value { color: var(--token-value, #059669); }
.token-selector { color: var(--token-selector, #b91c1c); font-weight: 700; }
.token-identifier { color: var(--token-identifier, #271813); }

/* End bundled CSS: web/css/components/editor.css */
/* Begin bundled CSS: web/css/components/preview-frame.css */
/* Preview Rendering Iframe */
.iframe-container {
  flex: 1;
  background-color: #ffffff;
  position: relative;
  min-height: 0;
}

#preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background-color: #ffffff;
}

/* Block iframe inputs only while active drag coordinates are being tracked, preserving full preview interactions otherwise */
.panel.dragging #preview-iframe {
  pointer-events: none !important;
}


/* End bundled CSS: web/css/components/preview-frame.css */
/* Begin bundled CSS: web/css/components/console.css */
/* Console Panel Layout */
.console-panel {
  display: flex;
  flex-direction: column;
}

.console-output {
  flex: 1;
  padding: var(--spacing-sm);
  background-color: var(--surface-container-lowest);
  overflow-y: auto;
  font-family: var(--font-code);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-height: 0;
}

.console-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px var(--spacing-sm);
  border-bottom: 1px dashed var(--outline-variant);
}

.console-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.console-time {
  color: var(--on-surface-variant);
  opacity: 0.6;
  user-select: none;
  font-size: 10px;
  margin-right: 2px;
}

.console-level,
.console-source,
.console-location,
.console-repeat {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 1px 5px;
  border: 1px solid var(--brutal-shadow);
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

.console-source,
.console-location {
  color: var(--on-surface-variant);
}

.console-repeat {
  display: none;
  background-color: var(--surface-tint);
  color: white;
}

.console-repeat:not(:empty):not([data-count="1"]) {
  display: inline-flex;
}

.console-body {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  color: var(--on-surface);
}

.console-details {
  width: 100%;
  margin: 0;
  padding: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  border-left: 2px solid var(--outline-variant);
  background-color: var(--surface-container);
  color: var(--on-surface-variant);
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.45;
}

.console-tree-list {
  width: 100%;
  display: grid;
  gap: 4px;
}

.console-tree,
.console-tree-leaf {
  width: 100%;
  color: var(--on-surface);
  font-family: var(--font-code);
  font-size: 11px;
}

.console-tree summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--on-surface);
}

.console-tree-children {
  display: grid;
  gap: 3px;
  margin: 4px 0 0 12px;
  padding-left: 8px;
  border-left: 1px dashed var(--outline-variant);
}

/* Console Message Levels */
.console-row.log-info {
  background-color: rgba(59, 130, 246, 0.05);
  border-left: 3px solid var(--color-info);
}
.console-row.log-info .console-level {
  background-color: var(--color-info);
  color: white;
}
.console-row.log-info .console-body {
  color: var(--color-info);
}

.console-row.log-warn {
  background-color: rgba(245, 158, 11, 0.05);
  border-left: 3px solid var(--color-warning);
}
.console-row.log-warn .console-level {
  background-color: var(--color-warning);
  color: black;
}
.console-row.log-warn .console-body {
  color: var(--color-warning);
}

.console-row.log-error {
  background-color: rgba(239, 68, 68, 0.05);
  border-left: 3px solid var(--color-error);
}
.console-row.log-error .console-level {
  background-color: var(--color-error);
  color: white;
}
.console-row.log-error .console-body {
  color: var(--color-error);
}

.console-row.system-msg {
  background-color: var(--surface-container);
  border-left: 3px solid var(--brutal-shadow);
  font-style: italic;
}

.console-row.system-msg .console-level {
  background-color: var(--brutal-shadow);
  color: var(--surface-container-lowest);
}


/* End bundled CSS: web/css/components/console.css */
/* Begin bundled CSS: web/css/components/panel-drag.css */
/* ==========================================================================
   Panel Drag System — GPU-accelerated transform-based dragging
   ========================================================================== */

.panel-header {
  cursor: grab;
  user-select: none;
  touch-action: none; /* Prevent browser scroll during drag on touch devices */
}

.panel-header:active {
  cursor: grabbing;
}

.panel.dragging {
  transition: none !important;
  cursor: grabbing;
  z-index: 200;
  opacity: 0.95;
  /* Ensure the dragged panel renders on its own GPU layer */
  will-change: transform;
  transform: translateZ(0);
  /* Slightly scale up for visual feedback while keeping it on GPU */
  box-shadow: 8px 8px 0 var(--brutal-shadow);
}

/* Ghost placeholder shown where panel was originally */
.panel-placeholder {
  opacity: 0.3;
  border: var(--border-width) dashed var(--outline-variant);
  box-shadow: none;
  pointer-events: none;
}


/* End bundled CSS: web/css/components/panel-drag.css */
/* Begin bundled CSS: web/css/components/responsive.css */
/* ==========================================================================
   Responsive Navigation Tabs (Bottom Nav)
   ========================================================================== */

.bottom-nav {
  display: none; /* Hidden on Desktop */
  height: var(--bottom-bar-height);
  background-color: var(--surface-container);
  border-top: var(--border-width) solid var(--brutal-shadow);
  grid-template-columns: repeat(5, 1fr);
  z-index: 100;
  box-shadow: 0 -4px 0 rgba(var(--brutal-shadow-rgb), 0.1);
  position: relative;
}

.bottom-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--on-surface-variant);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 900; /* Ultra prominent bold weight */
  font-size: 14px; /* Far larger size */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: all 0.1s ease;
  border-right: var(--border-width-sm) dashed var(--outline-variant);
}

.bottom-nav-item:last-child {
  border-right: none;
}

.bottom-nav-item.active {
  background-color: var(--primary-container);
  color: white;
  border-top: var(--border-width) solid var(--brutal-shadow);
  margin-top: calc(-1 * var(--border-width));
  position: relative;
  z-index: 10;
}

body.dark-mode .bottom-nav-item.active {
  color: black;
}

/* ==========================================================================
   Media Queries & Layout Modes (Responsive Engine)
   ========================================================================== */

/* 1. Desktop & Tablet Split Screens (Min 880px Width) */
body.desktop-view {
  .workspace {
    position: relative;
    display: block;
    height: calc(100vh - var(--top-bar-height));
    padding: var(--spacing-md);
    overflow: hidden;
  }

  /* Dissolve column wrappers so absolute positioning works relative to .workspace */
  .workspace-left, .workspace-middle, .workspace-right {
    display: contents;
  }

  /* Make panels draggable, absolute, and resizable independently in both directions */
  .panel {
    position: absolute;
    resize: both;
    overflow: hidden;
  }

  /* HTML Panel */
  #panel-html {
    left: var(--spacing-md);
    top: var(--spacing-md);
    width: calc(30% - 11px - var(--spacing-md));
    height: calc(33.33% - 11px - var(--spacing-md));
  }

  /* CSS Panel */
  #panel-css {
    left: var(--spacing-md);
    top: calc(33.33% + 5px);
    width: calc(30% - 11px - var(--spacing-md));
    height: calc(33.33% - 11px);
  }

  /* JS Panel */
  #panel-js {
    left: var(--spacing-md);
    top: calc(66.66% + 10px);
    width: calc(30% - 11px - var(--spacing-md));
    height: calc(33.33% - 10px - var(--spacing-md));
  }

  /* Preview Panel */
  #panel-preview {
    left: calc(30% + 5px);
    top: var(--spacing-md);
    width: calc(45% - 10px);
    height: calc(100% - var(--spacing-md) * 2);
  }

  /* Console Panel */
  #panel-console {
    left: calc(75% + 11px);
    top: var(--spacing-md);
    width: calc(25% - 11px - var(--spacing-md));
    height: calc(100% - var(--spacing-md) * 2);
  }

  /* Scratch Pad Panel — floats centered-ish over the workspace when opened */
  #panel-scratchpad {
    left: 34%;
    top: 16%;
    width: 32%;
    height: 56%;
    z-index: 150;
  }

  /* Prevent iframe mouse interception during preview resizing or panel dragging */
  .workspace-middle:active iframe,
  #panel-preview:active iframe {
    pointer-events: none;
  }

  /* Collapsed panel state — hide all children except header */
  .panel.minimized > :not(.panel-header) {
    display: none;
  }

  .panel.minimized {
    flex: 0 0 auto;
    width: max-content !important;
    height: auto !important;
    min-height: unset !important;
    min-width: unset !important;
    overflow: visible !important;
    container-type: normal !important; /* Fixes browser inline size containment bug that collapses minimized panels to 0px width */
    
    border: var(--border-width) solid var(--brutal-shadow);
    box-shadow: 3px 3px 0 var(--brutal-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .panel.minimized:hover {
    box-shadow: 5px 5px 0 var(--brutal-shadow);
  }

  /* Theme color matching */
  #panel-html.minimized { background-color: #ef4444; }
  #panel-css.minimized { background-color: #3b82f6; }
  #panel-js.minimized { background-color: #eab308; }
  #panel-preview.minimized { background-color: #a855f7; }
  #panel-console.minimized { background-color: var(--surface-tint); }
  #panel-scratchpad.minimized { background-color: #10b981; }

  /* Keep header transparent inside the minimized colored panel */
  .panel.minimized .panel-header {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* Styling the badge name inside the minimized panel */
  .panel.minimized .panel-badge {
    display: inline-block;
    height: auto;
    line-height: 1;
    padding: 4px 8px 4px 10px;
    margin: 0;
    vertical-align: middle;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    order: 1;
  }

  /* Text color matching */
  #panel-html.minimized .panel-badge,
  #panel-html.minimized .minimize-btn {
    color: #ffffff;
  }
  #panel-css.minimized .panel-badge,
  #panel-css.minimized .minimize-btn {
    color: #ffffff;
  }
  #panel-js.minimized .panel-badge,
  #panel-js.minimized .minimize-btn {
    color: #000000;
  }
  #panel-preview.minimized .panel-badge,
  #panel-preview.minimized .minimize-btn {
    color: #ffffff;
  }
  #panel-console.minimized .panel-badge,
  #panel-console.minimized .minimize-btn {
    color: #ffffff;
  }
  #panel-scratchpad.minimized .panel-badge,
  #panel-scratchpad.minimized .minimize-btn {
    color: #ffffff;
  }

  /* Style the expand/restore button */
  .panel.minimized .minimize-btn {
    height: 25px;
    width: 25px;
    font-size: 14px;
    margin: 0;
    border: none;
    box-shadow: none;
    transform: none;
    z-index: 1;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    transition: background-color 0.15s ease;
  }

  /* Dividing line between badge name and restore button */
  #panel-js.minimized .minimize-btn {
    border-left: 1px solid rgba(0, 0, 0, 0.15);
  }
  #panel-html.minimized .minimize-btn,
  #panel-css.minimized .minimize-btn,
  #panel-preview.minimized .minimize-btn,
  #panel-console.minimized .minimize-btn,
  #panel-scratchpad.minimized .minimize-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* Hover highlights for the restore button */
  .panel.minimized .minimize-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }
  #panel-js.minimized .minimize-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }

  /* Console-specific minimization layouts */
  .panel.minimized .panel-header-right {
    display: contents;
  }

  /* Boring Mode overrides */
  body.boring-light .panel.minimized,
  body.boring-dark .panel.minimized {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  body.boring-dark .panel.minimized {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  body.boring-light .panel.minimized .minimize-btn,
  body.boring-dark .panel.minimized .minimize-btn {
    border-radius: 0;
  }
}

/* 2. Mobile Layout & Tab Navigation (Max 879.98px Width)
   The page shell is fixed to three rows: top bar, active panel, bottom tabs.
   Scrolling is contained inside the active panel contents only. */
body.mobile-view {
  display: grid;
  grid-template-rows: var(--top-bar-height) minmax(0, 1fr) var(--bottom-bar-height);
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  
  .top-bar {
    grid-row: 1;
    padding: 0 var(--spacing-sm);
    min-height: 0;
  }
  
  /* Hide templates/theme selector groups in top-bar on mobile */
  .top-bar-left .control-group {
    display: none;
  }
  
  .top-bar-left {
    gap: var(--spacing-sm);
  }
  
  .brand-logo {
    font-size: 18px;
    padding: 2px 8px;
  }

  /* Hide header action buttons on mobile since they collapse into the menu bar */
  #run-btn, #export-btn, #reset-btn, #live-btn, #import-btn {
    display: none;
  }

  #share-btn {
    display: none;
  }
  
  /* Hide desktop-only window manager controls on mobile */
  .minimize-btn,
  .inspect-btn,
  .focus-btn {
    display: none;
  }
  
  /* Dissolve column wrappers into direct children in mobile active tab grid */
  .workspace-left, .workspace-middle, .workspace-right {
    display: contents;
  }
  
  .workspace {
    grid-row: 2;
    padding: 8px var(--spacing-sm);
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "active-panel";
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }
  
  /* Scrap the window header system completely on mobile, making headers invisible */
  .panel-header {
    background: transparent;
    border: none;
    height: 0;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    pointer-events: none; /* Allow clicking through invisible header space to textareas */
  }
  
  /* Hide all header element children by default */
  .panel-header > * {
    display: none;
  }
  
  /* Keep only the scratch close action visible in the top right corner */
  .panel-header .scratch-close-btn {
    display: flex;
    pointer-events: auto; /* Enable interaction */
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }
  
  /* In mobile mode, hide all panels by default, show active */
  .panel {
    display: none;
    grid-area: active-panel;
    position: relative;
    height: 100% !important;
    min-height: 0;
    width: 100% !important;
    box-shadow: 3px 3px 0 var(--brutal-shadow);
    overflow: hidden !important;
    resize: none;
    touch-action: pan-y;
  }
  
  .panel.mobile-active {
    display: flex;
    animation: slideUp 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-swipe-edge {
    display: none;
  }

  .panel.mobile-active .mobile-swipe-edge {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 120;
    pointer-events: auto;
    touch-action: none;
  }

  .panel.mobile-active .mobile-swipe-edge.left {
    left: 0;
  }

  .panel.mobile-active .mobile-swipe-edge.right {
    right: 0;
  }
  
  .bottom-nav {
    grid-row: 3;
    display: grid;
    min-height: 0;
  }

  /* Scratch pad panel overlay on mobile when opened */
  .panel.scratch-panel:not(.hidden-panel) {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 200;
  }
}

/* 3. Intermediate Desktop Breakpoint (880px to 1099.98px)
   Hides non-essential action buttons from the top bar to prevent squeezing
   and logo vertical wrapping. Buttons remain accessible in the hamburger menu. */
body.desktop-view.intermediate-width {
  #reset-btn, #export-btn, #share-btn, #import-btn, #live-btn {
    display: none;
  }
}

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

/* End bundled CSS: web/css/components/responsive.css */
/* Begin bundled CSS: web/css/components/context-menu.css */
/* Custom Right-Click Context Menu overlay */
.custom-context-menu {
  position: absolute;
  z-index: 10000;
  min-width: 160px;
  background-color: var(--surface-container);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  font-family: var(--font-ui);
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}

.custom-context-menu .menu-item {
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.custom-context-menu .menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.custom-context-menu .menu-item:disabled:hover {
  background-color: transparent;
  color: var(--on-surface) !important;
}

.custom-context-menu .menu-item:hover {
  background-color: var(--primary-container);
  color: white !important;
}

.custom-context-menu .menu-item.active {
  background-color: var(--primary-container);
  color: white !important;
}

body.dark-mode .custom-context-menu .menu-item:hover,
body.dark-mode .custom-context-menu .menu-item.active {
  color: black !important;
}

/* Dividing line between groups */
.custom-context-menu .menu-divider {
  height: 1px;
  border-bottom: 1px dashed var(--outline-variant);
  margin: 4px 0;
}

/* Modern Flat Boring Mode overrides for Context Menu */
body.boring-light .custom-context-menu,
body.boring-dark .custom-context-menu {
  border-radius: 6px;
  border: 1px solid var(--outline-variant);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.boring-light .custom-context-menu .menu-item:hover,
body.boring-dark .custom-context-menu .menu-item:hover {
  border-radius: 4px;
}


/* End bundled CSS: web/css/components/context-menu.css */
/* Begin bundled CSS: web/css/components/editor-search.css */
/* Inline Editor Search Bar */
.editor-search-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  background-color: var(--surface-container-lowest);
  border-bottom: var(--border-width-sm) solid var(--brutal-shadow);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-sm);
  box-sizing: border-box;
}

.editor-search-bar .search-input-group {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--spacing-xs);
}

.editor-search-bar .search-input {
  flex: 1;
  height: 26px;
  border: var(--border-width-sm) solid var(--brutal-shadow);
  background-color: var(--surface-container);
  color: var(--on-surface);
  padding: 0 8px;
  font-family: var(--font-code);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}

.editor-search-bar .search-input:focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 1px;
}

.editor-search-bar .search-btn:focus-visible,
.editor-search-bar .search-close-btn:focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 2px;
}

.editor-search-bar .search-btn {
  height: 26px;
  padding: 0 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--on-surface);
  background-color: var(--surface-container);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0 var(--brutal-shadow);
  box-sizing: border-box;
}

.editor-search-bar .search-btn:hover {
  background-color: var(--primary-container);
  color: white;
}

body.dark-mode .editor-search-bar .search-btn:hover {
  color: black;
}

.editor-search-bar .search-btn:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.editor-search-bar .search-badge {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 700;
  color: var(--on-surface-variant);
  background-color: var(--surface-container);
  border: var(--border-width-sm) dashed var(--outline-variant);
  padding: 2px 6px;
  user-select: none;
}

.editor-search-bar .search-close-btn {
  background: transparent;
  border: none;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.editor-search-bar .search-close-btn:hover {
  color: var(--color-error);
}

/* Adjust Textarea offsets when search is open to prevent overlapping text */
.editor-wrapper.search-active .editor-textarea,
.editor-wrapper.search-active .highlight-overlay {
  top: 38px !important;
  height: calc(100% - 38px) !important;
}

/* Boring Mode overrides for Search Bar */
body.boring-light .editor-search-bar,
body.boring-dark .editor-search-bar {
  border-bottom: 1px solid var(--outline-variant);
}

body.boring-light .editor-search-bar .search-input,
body.boring-dark .editor-search-bar .search-input {
  border-radius: 4px;
  border: 1px solid var(--outline-variant);
}

body.boring-light .editor-search-bar .search-btn,
body.boring-dark .editor-search-bar .search-btn {
  border-radius: 4px;
  border: 1px solid var(--outline-variant);
  box-shadow: none;
}
body.boring-light .editor-search-bar .search-btn:active,
body.boring-dark .editor-search-bar .search-btn:active {
  transform: none;
}

/* End bundled CSS: web/css/components/editor-search.css */
/* Begin bundled CSS: web/css/components/resize.css */
/* Custom Edge Resize Handles */
.panel .resize-handle {
  position: absolute;
  z-index: 15;
  background: transparent;
}

.panel .resize-left {
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}

.panel .resize-right {
  right: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
}

.panel .resize-top {
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
}

.panel .resize-bottom {
  bottom: -4px;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
}

/* Hide browser-native resizer indicators on desktop to keep visual system premium */
@media (min-width: 880px) {
  .panel {
    resize: none !important;
  }
}


/* End bundled CSS: web/css/components/resize.css */
/* Begin bundled CSS: web/css/components/preview-presets.css */
/* Live Preview Viewport Presets & Bezel Frames */
.preview-viewport-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.preview-viewport-wrapper.device-frame-active {
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Boring Mode keeps the simulated viewport truthful: no decorative frame. */
body.boring-light .preview-viewport-wrapper.device-frame-active,
body.boring-dark .preview-viewport-wrapper.device-frame-active {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Zoom/status badge sits in reserved space and never overlays the preview. */
.preview-preset-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 50;
  background-color: var(--surface-container);
  color: var(--on-surface);
  border: var(--border-size) solid var(--on-surface);
  border-radius: var(--border-radius);
  padding: 4px 10px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-preset-badge .badge-zoom {
  opacity: 0.8;
  font-weight: 400;
  font-size: 10px;
  padding-left: 6px;
  border-left: 1px solid var(--outline-variant);
}

/* If dragging or resizing a panel, disable transitions for absolute 60fps performance */
.panel.dragging .preview-viewport-wrapper {
  transition: none !important;
}
.panel.resizing-active .preview-viewport-wrapper {
  transition: none !important;
}

/* End bundled CSS: web/css/components/preview-presets.css */
/* Begin bundled CSS: web/css/components/custom-select.css */
/* ==========================================================================
   Native-backed themed select skins
   ========================================================================== */

.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Keep the real native select interactive for labels, keyboard, forms, tests,
   and assistive tech. It sits above the visual skin but remains transparent. */
.select-wrapper select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  appearance: none !important;
  transition: none !important;
  color: transparent !important;
  opacity: 1 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.select-wrapper select:disabled {
  cursor: not-allowed !important;
}

.select-wrapper select option,
.select-wrapper select optgroup {
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
}

.select-wrapper select option {
  padding: 8px 10px;
}

.select-wrapper select option:checked {
  color: #fff;
  background-color: var(--primary-container);
}

body.dark-mode .select-wrapper select option:checked {
  color: #000;
}

/* Remove the older wrapper arrow; the skin owns the visible arrow. */
.select-wrapper::after {
  display: none !important;
}

.custom-select-trigger {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: 4px 22px 4px 10px;
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  user-select: none;
  min-width: 110px;
  min-height: 30px;
  width: 100%;
  white-space: nowrap;
  pointer-events: none;
  box-sizing: border-box;
}

.select-wrapper select:hover + .custom-select-trigger {
  transform: translate(-0.5px, -0.5px);
  box-shadow: 3px 3px 0 var(--brutal-shadow);
  background-color: var(--surface-container);
}

.select-wrapper select:focus-visible + .custom-select-trigger {
  outline: var(--border-width-sm) solid var(--primary-container);
  outline-offset: 2px;
  border-color: var(--primary-container);
}

.select-wrapper select:disabled + .custom-select-trigger {
  opacity: 0.65;
}

.custom-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-arrow {
  font-size: 8px;
  color: var(--on-surface);
  pointer-events: none;
  flex: 0 0 auto;
}

/* End bundled CSS: web/css/components/custom-select.css */

}

/* End bundled CSS: web/css/components.css */
/* Begin bundled CSS: web/css/themes.css */
@layer themes {
/* Begin bundled CSS: web/css/themes/boring-shell.css */
/* ==========================================================================
   Boring Mode: Flat and Modern Visual Shell Overrides
   ========================================================================== */

body.boring-light, body.boring-dark {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  cursor: default;
}


body.boring-light .brand-logo, body.boring-dark .brand-logo {
  border-radius: 4px;
  border-width: 1px;
  box-shadow: none;
  text-shadow: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: normal;
  padding: 2px 10px;
}

body.boring-light .top-bar, body.boring-dark .top-bar {
  border-bottom: 1px solid var(--outline-variant);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

body.boring-light #view-select, body.boring-dark #view-select,
body.boring-light #menu-template-select, body.boring-dark #menu-template-select,
body.boring-light #menu-theme-select, body.boring-dark #menu-theme-select,
body.boring-light #menu-view-select, body.boring-dark #menu-view-select,
body.boring-light .custom-select-trigger, body.boring-dark .custom-select-trigger {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-weight: 600;
  text-transform: none;
  padding: 4px 22px 4px 10px;
}

body.boring-light #view-select:hover, body.boring-dark #view-select:hover,
body.boring-light #menu-template-select:hover, body.boring-dark #menu-template-select:hover,
body.boring-light #menu-theme-select:hover, body.boring-dark #menu-theme-select:hover,
body.boring-light #menu-view-select:hover, body.boring-dark #menu-view-select:hover,
body.boring-light .select-wrapper select:hover + .custom-select-trigger,
body.boring-dark .select-wrapper select:hover + .custom-select-trigger {
  transform: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background-color: var(--surface-container-lowest);
}

body.boring-light .select-wrapper::after, body.boring-dark .select-wrapper::after {
  content: "▾";
  font-size: 10px;
}

body.boring-light .icon-btn, body.boring-dark .icon-btn {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-weight: 600;
  padding: 4px 10px;
}

body.boring-light .icon-btn:hover, body.boring-dark .icon-btn:hover {
  transform: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
  background-color: var(--surface-container);
}

body.boring-light .icon-btn:active, body.boring-dark .icon-btn:active {
  transform: none;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

body.boring-light .icon-btn.action-btn, body.boring-dark .icon-btn.action-btn {
  background-color: var(--primary-container);
  color: white;
  text-shadow: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

body.boring-light .icon-btn.action-btn:hover, body.boring-dark .icon-btn.action-btn:hover {
  background-color: var(--surface-tint);
}

body.boring-light .icon-btn.warning, body.boring-dark .icon-btn.warning {
  border-color: var(--color-error);
  color: var(--color-error);
}

body.boring-light .icon-btn.warning:hover, body.boring-dark .icon-btn.warning:hover {
  background-color: var(--color-error);
  color: white;
}

/* Panel modern adjustments */
body.boring-light .panel, body.boring-dark .panel {
  border-radius: 8px;
  border-width: 1px;
  border-color: var(--outline-variant);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

body.boring-light .panel:hover, body.boring-dark .panel:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* Symmetrical Header Orange-ish backgrounds across all themes */
body.light-mode .panel-header {
  background-color: #ffd2c2 !important; /* Brighter, glowing pastel melon-orange */
}
body.dark-mode .panel-header {
  background-color: #4e2e22 !important; /* Brighter, glowing dark copper-orange */
}
body.boring-light .panel-header {
  border-bottom: 1px solid var(--outline-variant);
  background-color: #ffe6d4 !important; /* Brighter, elegant apricot-orange slate */
}
body.boring-dark .panel-header {
  border-bottom: 1px solid var(--outline-variant);
  background-color: #38231a !important; /* Brighter, saturated warm dark amber slate */
}

body.boring-light .panel-badge, body.boring-dark .panel-badge {
  border-radius: 4px;
  border-width: 1px;
  box-shadow: none;
}

body.boring-light .panel.minimized .panel-header {
  background-color: var(--primary-container) !important;
  color: white !important;
  border-bottom: none !important;
}
body.boring-dark .panel.minimized .panel-header {
  background-color: var(--surface-container) !important;
  color: var(--on-surface) !important;
  border-bottom: none !important;
}

/* Tab Controls modern adjustments */
body.boring-light .bottom-nav, body.boring-dark .bottom-nav {
  border-top: 1px solid var(--outline-variant);
  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.05);
}

body.boring-light .bottom-nav-item, body.boring-dark .bottom-nav-item {
  border-right: 1px solid var(--outline-variant);
}

body.boring-light .bottom-nav-item.active, body.boring-dark .bottom-nav-item.active {
  background-color: var(--primary-container);
  color: white;
  border-top: none;
  margin-top: 0;
}

/* Custom Scrollbars overrides for Boring themes */
body.boring-light ::-webkit-scrollbar-track, body.boring-dark ::-webkit-scrollbar-track {
  background: var(--surface-container-lowest);
  border-left: none;
  border-top: none;
}

body.boring-light ::-webkit-scrollbar-thumb, body.boring-dark ::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border: none;
  border-radius: 10px;
  box-shadow: none;
}

body.boring-light ::-webkit-scrollbar-thumb:hover, body.boring-dark ::-webkit-scrollbar-thumb:hover {
  background: var(--on-surface-variant);
}

/* End bundled CSS: web/css/themes/boring-shell.css */
/* Begin bundled CSS: web/css/themes/modals.css */
/* ==========================================================================
   Custom Modal / Dialog Styling
   ========================================================================== */

dialog.custom-modal {
  border: var(--border-width) solid var(--brutal-shadow);
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  box-shadow: 6px 6px 0 var(--brutal-shadow);
  max-width: 400px;
  width: 90%;
  padding: 0;
  margin: auto;
  border-radius: 0;
  contain: content;
}

/* Boring mode style overrides */
body.boring-light dialog.custom-modal,
body.boring-dark dialog.custom-modal {
  border-radius: 12px;
  border-width: 1px;
  border-color: var(--outline-variant);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Modal layout */
.modal-content {
  display: flex;
  flex-direction: column;
}

.modal-header {
  height: 40px;
  background-color: var(--surface-container);
  border-bottom: var(--border-width-sm) solid var(--brutal-shadow);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md);
}

/* Custom glowing orange-ish header for dialog to match other panel headers */
body.light-mode dialog.custom-modal .modal-header {
  background-color: #ffd2c2 !important;
}
body.dark-mode dialog.custom-modal .modal-header {
  background-color: #4e2e22 !important;
}
body.boring-light dialog.custom-modal .modal-header {
  background-color: #ffe6d4 !important;
  border-bottom: 1px solid var(--outline-variant);
}
body.boring-dark dialog.custom-modal .modal-header {
  background-color: #38231a !important;
  border-bottom: 1px solid var(--outline-variant);
}

.modal-header h3 {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--on-surface);
  letter-spacing: 0.05em;
}

.modal-body {
  padding: var(--spacing-md);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-surface-variant);
}

.form-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.field-label,
.theme-checks legend {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface);
}

.text-field,
.form-select {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--on-surface);
  background-color: var(--surface-container-lowest);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  padding: 6px 10px;
  outline: none;
}

.text-field:focus,
.form-select:focus {
  border-color: var(--primary-container);
}

.text-field:focus-visible,
.form-select:focus-visible,
.theme-checks input:focus-visible {
  outline: var(--border-width-sm, 2px) solid var(--primary-container, #ff5f1f);
  outline-offset: 2px;
}

.theme-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-xs) var(--spacing-sm);
  margin: var(--spacing-xs) 0 0;
  padding: var(--spacing-sm);
  border: var(--border-width-sm) dashed var(--outline-variant);
}

.theme-checks label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--on-surface);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

.theme-checks input {
  accent-color: var(--primary-container);
}

.share-link-output {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.share-link-output[hidden] {
  display: none !important;
}

.share-challenge {
  min-height: 65px;
  margin-top: var(--spacing-xs);
}

.share-challenge[hidden],
.share-challenge-status[hidden] {
  display: none !important;
}

.share-challenge-status {
  margin: 0;
  color: var(--on-surface-variant);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

body.boring-light .text-field,
body.boring-dark .text-field,
body.boring-light .form-select,
body.boring-dark .form-select {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: none;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px dashed var(--outline-variant);
  background-color: var(--surface-container);
}

/* Styled backdrop */
dialog.custom-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  transition: backdrop-filter 0.2s ease, background-color 0.2s ease;
}

/* Animation for custom dialog */
dialog.custom-modal[open] {
  animation: modalScaleUp 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalScaleUp {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* End bundled CSS: web/css/themes/modals.css */
/* Begin bundled CSS: web/css/themes/menu.css */
/* ==========================================================================
   Quick Menu Dropdown Styling
   ========================================================================== */

/* Hamburger Button sizing */
.menu-btn-icon {
  padding: 4px !important;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hamburger-svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Dropdown Container */
.menu-dropdown {
  position: absolute;
  top: calc(var(--top-bar-height) - 2px);
  right: var(--spacing-md);
  width: 260px;
  background-color: var(--surface-container-lowest);
  border: var(--border-width) solid var(--brutal-shadow);
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  display: none; /* Toggle via active class */
  flex-direction: column;
  z-index: 9999;
  border-radius: 0;
  overflow: hidden;
  animation: dropdownScaleUp 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  contain: content;
}

.menu-dropdown.active {
  display: flex;
}

body.desktop-view #menu-run-btn {
  display: none;
}

/* Boring mode overrides */
body.boring-light .menu-dropdown,
body.boring-dark .menu-dropdown {
  border-radius: 10px;
  border-width: 1px;
  border-color: var(--outline-variant);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  top: calc(var(--top-bar-height) + 2px);
}

body.boring-light .menu-btn-icon,
body.boring-dark .menu-btn-icon {
  border-radius: 6px;
}

/* Dropdown elements */
.menu-dropdown-header {
  height: 34px;
  padding: 0 var(--spacing-sm);
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface);
}

body.light-mode .menu-dropdown-header { background-color: #ffd2c2 !important; }
body.dark-mode .menu-dropdown-header { background-color: #4e2e22 !important; }
body.boring-light .menu-dropdown-header { background-color: #ffe6d4 !important; border-bottom: 1px solid var(--outline-variant); }
body.boring-dark .menu-dropdown-header { background-color: #38231a !important; border-bottom: 1px solid var(--outline-variant); }

.menu-dropdown-body {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.menu-item-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.menu-item-group.divider {
  border-top: 1px dashed var(--outline-variant);
  padding-top: var(--spacing-sm);
}

.menu-item-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  opacity: 0.8;
  margin-bottom: var(--spacing-xs);
}

/* Dropdown buttons */
.menu-item-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--on-surface);
  background-color: var(--surface-container);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
  border-radius: 0;
  text-align: left;
}

body.boring-light .menu-item-btn,
body.boring-dark .menu-item-btn {
  border-radius: 6px;
  border-width: 1px;
  box-shadow: none;
  background-color: var(--surface-container-lowest);
}

body.boring-light .menu-item-btn:hover,
body.boring-dark .menu-item-btn:hover {
  background-color: var(--surface-container);
}

.menu-item-btn:hover {
  background-color: var(--primary-container);
  color: white;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--brutal-shadow);
}

body.dark-mode .menu-item-btn:hover {
  color: black;
}

.menu-item-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--brutal-shadow);
}

.menu-item-btn.warning {
  border-color: var(--color-error);
}
.menu-item-btn.warning:hover {
  background-color: var(--color-error);
  color: white;
}

/* Info Row styling */
.menu-info-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--on-surface-variant);
}

.menu-info-row .label {
  font-weight: 700;
}

.menu-info-row .val {
  font-family: var(--font-code);
  font-size: 10px;
}

@keyframes dropdownScaleUp {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Align and size Workspace Settings controls to prevent overflow */
.menu-dropdown .control-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.menu-dropdown .select-wrapper {
  flex: 0 0 135px;
  width: 135px;
}

.menu-dropdown select {
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}


/* End bundled CSS: web/css/themes/menu.css */
/* Begin bundled CSS: web/css/themes/focus.css */
/* ==========================================================================
   Focus Mode — single-panel popup (Goal 11, desktop only)
   ========================================================================== */

.focus-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  z-index: 8000;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.focus-backdrop.active {
  opacity: 1;
}

/* The focused panel becomes a centered popup floating above the darkened rest */
.panel.focused {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(900px, 86vw) !important;
  height: min(680px, 82vh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  z-index: 8500 !important;
  resize: both !important;
  overflow: hidden !important;
  box-shadow: 12px 12px 0 var(--brutal-shadow);
  animation: focusPop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.boring-light .panel.focused,
body.boring-dark .panel.focused {
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
}

@keyframes focusPop {
  from { transform: translate(-50%, -50%) scale(0.96); opacity: 0.4; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* End bundled CSS: web/css/themes/focus.css */
/* Begin bundled CSS: web/css/themes/live-toggle.css */
/* ==========================================================================
   Live Reflection toggle (Goal 6)
   ========================================================================== */

.live-toggle .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-success);
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.live-toggle[aria-pressed="true"] .live-dot {
  animation: livePulse 1.6s ease-out infinite;
}
.live-toggle[aria-pressed="false"] {
  opacity: 0.7;
}
.live-toggle[aria-pressed="false"] .live-dot {
  background-color: var(--on-surface-variant);
  animation: none;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* End bundled CSS: web/css/themes/live-toggle.css */
/* Begin bundled CSS: web/css/themes/mobile-context-fab.css */
/* ==========================================================================
   Mobile Floating Context trigger
   ========================================================================== */

.mobile-context-fab {
  display: none; /* shown only inside the mobile media query */
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-bar-height) + 16px);
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  background-color: var(--color-info);
  color: white;
  border: var(--border-width) solid var(--brutal-shadow);
  box-shadow: 4px 4px 0 var(--brutal-shadow);
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  line-height: 0;
  overflow: hidden;
  flex: 0 0 auto;
}

.mobile-context-fab[hidden] {
  display: none !important;
}

body.mobile-view .mobile-context-fab {
  display: flex;
}

.mobile-context-fab svg {
  width: 26px;
  height: 26px;
  max-width: 26px;
  max-height: 26px;
  flex: 0 0 26px;
  display: block;
}

.mobile-context-fab:active,
.mobile-context-fab[aria-expanded="true"] {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
}

body.dark-mode .mobile-context-fab {
  color: white;
}
body.boring-light .mobile-context-fab,
body.boring-dark .mobile-context-fab {
  border-radius: 50%;
  border-width: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* End bundled CSS: web/css/themes/mobile-context-fab.css */
/* Begin bundled CSS: web/css/themes/drop-overlay.css */
/* ==========================================================================
   Drag-and-drop Import overlay (Goal 12)
   ========================================================================== */

.drop-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  background-color: rgba(var(--brutal-shadow-rgb), 0.45);
  backdrop-filter: blur(3px);
}
.drop-overlay.active {
  display: flex;
}
.drop-overlay-card {
  background-color: var(--surface-container-lowest);
  border: var(--border-width) dashed var(--primary-container);
  box-shadow: 8px 8px 0 var(--brutal-shadow);
  padding: 32px 48px;
  text-align: center;
  pointer-events: none;
}
.drop-overlay-icon {
  font-size: 44px;
}
.drop-overlay-title {
  font-family: var(--font-ui);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  margin-top: 8px;
  color: var(--on-surface);
}
.drop-overlay-sub {
  font-family: var(--font-code);
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
  color: var(--on-surface);
}
body.boring-light .drop-overlay-card,
body.boring-dark .drop-overlay-card {
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* End bundled CSS: web/css/themes/drop-overlay.css */
/* Begin bundled CSS: web/css/themes/tooltip.css */
/* ==========================================================================
   Custom Themed Tooltips (Brutalist Style)
   ========================================================================== */

.custom-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  display: none;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  white-space: nowrap;
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  border: var(--border-width-sm) solid var(--brutal-shadow);
  box-shadow: 2px 2px 0 var(--brutal-shadow);
  transform: translateZ(0);
}

/* Bright yellow pop for Retro Light tooltips */
body.light-mode .custom-tooltip {
  background-color: #ffffdd; /* Retro yellow accent */
}

/* Boring mode overrides */
body.boring-light .custom-tooltip,
body.boring-dark .custom-tooltip {
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--outline-variant);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* End bundled CSS: web/css/themes/tooltip.css */
/* Begin bundled CSS: web/css/themes/misc.css */
/* ==========================================================================
   Message modal extras (Goal 12 import guidelines) + Scratch pad
   ========================================================================== */

.message-list {
  margin: 8px 0 8px 18px;
  padding: 0;
}
.message-list li {
  margin-bottom: 4px;
  word-break: break-word;
}
.message-guidelines {
  margin-top: 10px;
  font-size: 13px;
}

.legal-doc-content {
  text-align: left;
  line-height: 1.6;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--on-surface);
}
.legal-doc-content p {
  margin-bottom: 12px;
}

/* Notes read better in the UI font than the code mono font */
.scratch-textarea {
  font-family: var(--font-ui);
  line-height: 1.6;
}

/* End bundled CSS: web/css/themes/misc.css */

}

/* End bundled CSS: web/css/themes.css */