/* Fullscreen CRT Vector Oscilloscope — Warm Beige Instrument Panel */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* CRT screen area (stays dark, glass-like) */
  --bg-deep: #050806;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 255, 255, 0.16);

  --phosphor-glow: #2bfa4e;
  --phosphor-core: #ebffea;
  --phosphor-hud: #4aff6b;

  --accent-red: #ff4757;

  /* Warm bench-instrument chassis (controls) */
  --instrument-cream: #d8d1bd;
  --instrument-light: #eee9d8;
  --instrument-shadow: #aba592;
  --instrument-ink: #33332e;
  --instrument-muted: #6b695e;
  --instrument-well: #1b1d1a;
  --instrument-red: #b13b2f;
  --instrument-green: #55672f;
  --panel-seam: rgba(56, 54, 45, 0.28);

  --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --radius-sm: 3px;
  --radius-md: 4px;

  /* Layout */
  --control-rail-width: 340px;
  --control-top-height: clamp(134px, 17vh, 158px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Inline <svg> defaults to baseline-aligned inline layout, which some engines
   position differently inside flex rows than others — force block so every
   icon centers identically across browsers instead of clipping at the top. */
svg {
  display: block;
  flex-shrink: 0;
}

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--instrument-shadow);
  color: var(--instrument-ink);
  font-family: var(--font-ui);
}

/* ============================================================
   SHELL: CSS Grid frame — top strip spans full width, then
   CRT screen (left) and control rail (right) share the rest.
   ============================================================ */
.scope-frame {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr var(--control-rail-width);
  grid-template-rows: var(--control-top-height) 1fr;
  grid-template-areas:
    "top  top"
    "crt  rail";
  transition: grid-template-columns 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  /* On screens wider than the mobile breakpoint, JS (applyResponsiveScale)
     sets explicit width/height + a uniform transform: scale(...) here so
     the ENTIRE instrument — fonts, knobs, paddings, everything — grows on
     large monitors and shrinks to fit on small laptops, as one proportional
     unit, instead of individual pieces overflowing or scrolling. On mobile
     widths, JS clears these and this rule's own `inset: 0` takes back over
     for the dedicated stacked/scrollable mobile layout below. */
  transform-origin: 0 0;
}

.scope-frame.drawer-collapsed {
  grid-template-columns: 1fr 0px;
  grid-template-rows: 0px 1fr;
}

/* ============================================================
   TOP STRIP: title bar + source tabs + active source panel
   ============================================================ */
.top-strip {
  grid-area: top;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.2), transparent 18%),
    repeating-linear-gradient(0deg, rgba(70, 65, 52, 0.035) 0 1px, transparent 1px 4px),
    var(--instrument-cream);
  border-bottom: 1px solid #817d6c;
  box-shadow: 0 2px 6px rgba(24, 24, 19, 0.3);
}

.scope-frame.drawer-collapsed .top-strip,
.scope-frame.drawer-collapsed .controls-drawer {
  visibility: hidden;
  pointer-events: none;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--panel-seam);
  background: linear-gradient(#e9e4d3, #c8c1ae);
  flex: none;
}

.drawer-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--instrument-ink);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
}

.drawer-title svg {
  stroke: var(--instrument-red);
}

.drawer-close-btn {
  background: linear-gradient(#eee9d8, #bcb5a3);
  border: 1px solid #8f8a79;
  color: var(--instrument-ink);
  border-radius: var(--radius-sm);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  margin-left: auto;
  box-shadow: 0 1px 2px rgba(34, 32, 26, 0.3), inset 0 1px rgba(255, 255, 255, 0.65);
  transition: all 0.2s;
}

.drawer-close-btn:hover {
  border-color: var(--instrument-red);
  color: var(--instrument-red);
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--panel-seam);
  background: linear-gradient(#e9e4d3, #c8c1ae);
  flex: none;
}

.source-nav {
  display: flex;
  flex: none;
  gap: 5px;
}

.nav-tab {
  flex: none;
  background: linear-gradient(#e3decd, #b7b09c);
  border: 1px solid #8d8877;
  color: #5b594f;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(37, 34, 27, 0.3), inset 0 1px rgba(255, 255, 255, 0.5);
  transition: all 0.15s;
}

.nav-tab:hover {
  color: var(--instrument-ink);
}

.nav-tab.active {
  background: linear-gradient(#474942, #262824);
  border-color: #1d1e1b;
  color: #d8e7bd;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 1px rgba(255, 255, 255, 0.35);
}

.nav-tab svg {
  stroke: currentColor;
}

.top-panels {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 12px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}

.top-panels > .panel-view {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.top-panels > .panel-view > .control-box {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.top-panels > .panel-view[style*="display: none"] {
  display: none !important;
}

#transform-controls {
  flex: 1.7;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* Sound Dots sits directly in .top-panels (not wrapped in a .panel-view) and
   its content (pills, several knob rows, color + toggle rows) runs taller
   than the Text tab that now defines the fixed bar height. Scroll it
   internally instead of letting it stretch the whole top strip. */
#sound-dots-controls {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* ============================================================
   CRT SCREEN
   ============================================================ */
.crt-fullscreen-viewport {
  grid-area: crt;
  position: relative;
  overflow: hidden;
  background-color: #040705;
  min-width: 0;
  min-height: 0;
}

#crt-screen {
  width: 100%;
  height: 100%;
  display: block;
}

.crt-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}

.crt-vignette-overlay {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.crt-glare.hidden,
.crt-vignette-overlay.hidden {
  display: none;
}

/* Floating Top-Left Minimal HUD (over the dark screen, glass style) */
.floating-hud {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(10, 15, 22, 0.65);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  padding: 5px 12px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.floating-hud.visible {
  opacity: 1;
  transform: translateY(0);
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--phosphor-hud);
  box-shadow: 0 0 8px var(--phosphor-hud);
  animation: pulse-led 2s infinite ease-in-out;
}

@keyframes pulse-led {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.9); }
}

.hud-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
}

.hud-model {
  font-size: 0.63rem;
  font-family: var(--font-mono);
  color: var(--phosphor-hud);
  opacity: 0.8;
}

.hud-status {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #8b9bb4;
}

.hud-quick-clear-btn {
  background: rgba(255, 71, 87, 0.2);
  border: 1px solid rgba(255, 71, 87, 0.4);
  color: #ff8597;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
  transition: all 0.2s;
}

.hud-quick-clear-btn:hover {
  background: rgba(255, 71, 87, 0.4);
  border-color: #ff4757;
  color: #ffffff;
}

/* Floating Drawer Toggle Button (glass, sits over the dark screen) */
.drawer-toggle-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 90;
  background: rgba(16, 23, 33, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-highlight);
  color: #e6edf3;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}

.drawer-toggle-btn:hover {
  background: rgba(26, 36, 50, 0.95);
  border-color: var(--phosphor-hud);
}

/* Only needed to reopen the rail; the drawer's own close button handles the other direction. */
.scope-frame:not(.drawer-collapsed) .drawer-toggle-btn {
  display: none;
}

.drawer-toggle-btn svg {
  stroke: var(--phosphor-hud);
}

.toggle-shortcut {
  font-size: 0.62rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  color: #8b9bb4;
}

/* ============================================================
   CONTROL RAIL
   ============================================================ */
.controls-drawer {
  grid-area: rail;
  overflow: hidden;
  min-width: 0;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.2), transparent 18%),
    repeating-linear-gradient(0deg, rgba(70, 65, 52, 0.035) 0 1px, transparent 1px 4px),
    var(--instrument-cream);
  border-left: 1px solid #817d6c;
  box-shadow: -6px 0 16px rgba(24, 24, 19, 0.3);
  color: var(--instrument-ink);
}

.drawer-content {
  height: 100%;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ============================================================
   MEDIUM SCREENS: side-by-side text/transform no longer has room —
   stack them instead of letting the row squeeze/overflow.
   ============================================================ */
@media (max-width: 1180px) and (min-width: 761px) {
  :root {
    --control-top-height: clamp(230px, 30vh, 275px);
  }
  .top-panels {
    flex-direction: column;
  }
  .top-panels > .panel-view,
  #transform-controls {
    flex: 1;
  }
}

/* ============================================================
   NARROW SCREENS: stack top / crt / rail vertically
   ============================================================ */
@media (max-width: 760px) {
  .scope-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(160px, 34vh) auto;
    grid-template-areas: "top" "crt" "rail";
    overflow-y: auto;
  }
  .scope-frame.drawer-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: 0px 1fr 0px;
  }
  .top-panels {
    flex-direction: column;
  }
  .knob-control { width: 52px; }
  .knob-face { left: 2px; width: 48px; height: 48px; }
}

/* ============================================================
   SHARED COMPONENTS (single theme throughout)
   ============================================================ */
.control-box {
  background: rgba(238, 233, 216, 0.42);
  border: 1px solid var(--panel-seam);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.38), 0 1px 2px rgba(67, 62, 49, 0.1);
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--instrument-ink);
  font-family: var(--font-mono);
}

.box-header .badge {
  font-size: 0.58rem;
  font-family: var(--font-mono);
  color: #d7e6bc;
  background: #474942;
  padding: 1px 5px;
  border-radius: 3px;
}

.badge-amber { background: #6b5518; color: #ffe9a8; }

.btn-micro {
  background: linear-gradient(#eee9d8, #bcb5a3);
  border: 1px solid #8f8a79;
  color: var(--instrument-ink);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(34, 32, 26, 0.3);
  transition: all 0.2s;
}

.btn-micro:hover {
  border-color: var(--instrument-red);
  color: var(--instrument-red);
}

.btn-micro.marker-off {
  background: linear-gradient(#d8d3c2, #a8a190);
  color: #6b6656;
  border-color: #6b6656;
}

/* Textarea for Vector Text Generator */
#vector-text-input {
  width: 100%;
  background: var(--instrument-well);
  border: 1px solid #171815;
  border-radius: var(--radius-sm);
  color: #c7e6a1;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 6px 8px;
  outline: none;
  resize: none;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#vector-text-input:focus {
  border-color: #a9c882;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(104, 128, 72, 0.22);
}

#view-text .control-box:first-child {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* ============================================================
   KNOB ROWS: compact rotary controls arranged 2-3 per row
   ============================================================ */
.knob-row {
  display: flex;
  justify-content: space-around;
  gap: 4px;
}

.knob-row-single {
  justify-content: flex-start;
}

.knob-row-wrap {
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 4px;
  column-gap: 12px;
}

.knob-row-wrap .knob-item {
  flex: 0 0 auto;
  width: 50px;
}

.knob-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.knob-item-label {
  font-size: 0.55rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--instrument-muted);
  line-height: 1;
}

.knob-item .param-val {
  font-size: 0.6rem;
  line-height: 1;
}

.knob-item .mute-btn {
  margin-top: 2px;
}

/* Mechanical rotary control: drag vertically, or use arrow keys via the underlying range input. */
.knob-control {
  position: relative;
  width: 40px;
  height: 36px;
  touch-action: none;
  cursor: ns-resize;
}

.knob-face {
  position: absolute;
  left: 2px;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #f1eddb 0 8%, #c7c0ac 30%, #817d6d 72%, #57564c 100%);
  border: 2px solid #777363;
  box-shadow: 0 2px 3px rgba(44, 40, 30, 0.45), inset 1px 1px 2px rgba(255, 255, 255, 0.8), inset -3px -4px 6px rgba(55, 51, 41, 0.38);
  transform: rotate(var(--knob-angle));
  transition: transform 0.08s linear;
}

.knob-face::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dotted rgba(47, 45, 37, 0.42);
}

.knob-face span {
  position: absolute;
  width: 2px;
  height: 10px;
  left: 17px;
  top: 3px;
  border-radius: 2px;
  background: #383831;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.3);
}

.knob-control input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.knob-control.is-dragging .knob-face {
  filter: brightness(1.08);
  box-shadow: 0 2px 3px rgba(44, 40, 30, 0.35), 0 0 0 2px rgba(177, 59, 47, 0.32);
}

/* Fallback plain range styling (used only by elements without a knob wrapper, e.g. disabled inputs) */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: #6d6a5d;
  border-radius: 2px;
  outline: none;
  border: 1px solid #46453d;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--instrument-red);
  border: 2px solid #e7e1cf;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(50, 30, 25, 0.45);
}

.param-val {
  font-family: var(--font-mono);
  color: var(--instrument-red);
  font-weight: 600;
  font-size: 0.66rem;
}

/* ============================================================
   TOGGLE GRID (2 per row) & switches
   ============================================================ */
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px 10px;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--instrument-ink);
}

.toggle-switch {
  position: relative;
  width: 28px;
  height: 15px;
  flex: none;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #57574e;
  border: 1px solid #3d3d37;
  border-radius: 2px;
  transition: .2s;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 9px;
  width: 9px;
  left: 2px;
  bottom: 2px;
  background-color: #c9c2ae;
  border-radius: 1px;
  transition: .2s;
}

input:checked + .switch-slider {
  background-color: #65744c;
  border-color: #495a34;
}

input:checked + .switch-slider:before {
  transform: translateX(13px);
  background-color: #dce7bd;
}

#wiggle-toggle:checked + .switch-slider {
  background-color: #6b4f8a;
  border-color: #4b3563;
}

#wiggle-toggle:checked + .switch-slider:before {
  background-color: #e3d2fb;
  transform: translateX(13px);
}

/* Wiggle Card */
.wiggle-box {
  border-color: #8a7bb0;
}

.wiggle-box.wiggle-active {
  box-shadow: 0 0 0 2px rgba(107, 79, 138, 0.35);
}

.wiggle-title {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wiggle-icon {
  font-size: 0.85rem;
  color: #6b4f8a;
}

/* Poster / Burn-In Studio */
.poster-studio-box {
  border-color: #aa8d3a;
}

.poster-title {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6b5518;
}

.poster-title svg {
  stroke: #aa8d3a;
}

.burn-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.btn-burn-in,
.btn-burn-motion {
  width: 100%;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.64rem;
  padding: 6px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(41, 38, 30, 0.32), inset 0 1px rgba(255, 255, 255, 0.35);
  transition: all 0.2s;
}

.btn-burn-in {
  background: linear-gradient(#c99a52, #a06a2a);
  border: 1px solid #7a4f1e;
  color: #fff3dc;
}

.btn-burn-in:hover {
  filter: brightness(1.06);
}

.btn-burn-in svg {
  stroke: #fff3dc;
}

.btn-burn-motion {
  background: linear-gradient(#bf5228, #913515);
  border: 1px solid #6b240b;
  color: #fff0eb;
}

.btn-burn-motion:hover {
  filter: brightness(1.08);
}

.btn-burn-motion.active-burning {
  animation: pulse-burn 0.5s infinite alternate;
  background: linear-gradient(#ff6229, #c73c0e);
}

.btn-burn-motion.armed-burning {
  animation: pulse-armed 1s infinite alternate;
  background: linear-gradient(#c9a227, #8a6d12);
}

@keyframes pulse-burn {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.25); box-shadow: 0 0 10px rgba(255, 98, 41, 0.6); }
}

@keyframes pulse-armed {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.2); box-shadow: 0 0 8px rgba(201, 162, 39, 0.6); }
}

.btn-burn-motion svg {
  stroke: #fff0eb;
}

/* Phosphor theme selector: a single row of small round switches */
.phosphor-row {
  display: flex;
  gap: 6px;
}

.phosphor-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0a0f17;
  border: 2px solid #8d8877;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(37, 34, 27, 0.3);
  transition: all 0.15s;
}

.phosphor-pill.active {
  border-color: var(--instrument-red);
  box-shadow: 0 0 0 2px rgba(177, 59, 47, 0.3);
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.swatch-green { background: #2bfa4e; box-shadow: 0 0 6px #2bfa4e; }
.swatch-amber { background: #ff9d00; box-shadow: 0 0 6px #ff9d00; }
.swatch-cyan  { background: #00d0ff; box-shadow: 0 0 6px #00d0ff; }
.swatch-white { background: #e2ebf8; box-shadow: 0 0 6px #e2ebf8; }

/* Compact color pickers row */
.color-row {
  display: flex;
  gap: 8px;
}

.color-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.color-chip input[type="color"] {
  width: 100%;
  height: 20px;
  padding: 1px;
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-sm);
  background: #131b26;
  cursor: pointer;
}

.color-chip span {
  font-size: 0.56rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--instrument-muted);
}

/* Compact inline swatch (paired with a toggle in the same row, e.g. Sound
   Dots' Custom Color) instead of the full-width stacked .color-chip. */
.color-chip-inline {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex: none;
}

.color-chip-inline input[type="color"] {
  width: 26px;
  height: 18px;
  padding: 1px;
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-sm);
  background: #131b26;
  cursor: pointer;
}

/* Chip Buttons (Display Mode) */
.chip-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.chip-btn {
  background: linear-gradient(#e3decd, #b7b09c);
  border: 1px solid #8d8877;
  color: #5b594f;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}

.chip-btn.active {
  background: linear-gradient(#474942, #262824);
  color: #d8e7bd;
  border-color: #1d1e1b;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* Upload Dropzone */
.upload-dropzone {
  border: 2px dashed #8d8877;
  border-radius: var(--radius-md);
  padding: 8px;
  text-align: center;
  background: rgba(10, 15, 24, 0.06);
  cursor: pointer;
  transition: all 0.2s;
}

.upload-dropzone:hover {
  border-color: var(--instrument-red);
}

.upload-dropzone-compact {
  padding: 5px;
}

.upload-dropzone-compact .drop-title {
  font-size: 0.62rem;
}

.upload-dropzone svg {
  stroke: var(--instrument-muted);
  margin-bottom: 2px;
}

.drop-title {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--instrument-ink);
}

.file-loaded-info {
  font-size: 0.62rem;
  font-family: var(--font-mono);
  color: var(--instrument-muted);
  text-align: center;
}

/* Buttons */
.mute-btn {
  background: linear-gradient(#eee9d8, #bcb5a3);
  color: var(--instrument-ink);
  border: 1px solid #8f8a79;
  padding: 2px 8px;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.mute-btn.muted {
  background: rgba(255, 71, 87, 0.25);
  border-color: var(--accent-red);
  color: #7a1c26;
}

.btn-primary,
.btn-burn-in,
.btn-clear-all,
.btn-export-poster {
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(41, 38, 30, 0.32), inset 0 1px rgba(255, 255, 255, 0.35);
}

.btn-primary {
  width: 100%;
  background: linear-gradient(#59614c, #30372b);
  border: 1px solid #283024;
  color: #dce8c1;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.64rem;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

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

.drawer-footer-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 5px 8px;
  background: rgba(73, 69, 57, 0.12);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--instrument-muted);
}

.drawer-footer-hint kbd {
  background: #4b4c43;
  color: #e9e2ce;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid #34352f;
}

.btn-clear-all {
  background: linear-gradient(#d2a19a, #b9655b);
  border: 1px solid #823b34;
  color: #3e1c18;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.6rem;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
}

.btn-clear-all:hover {
  filter: brightness(1.05);
}

.btn-export-poster {
  background: linear-gradient(#9eafb0, #687d7e);
  border: 1px solid #4f6263;
  color: #f1eee0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.6rem;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
}

.btn-export-poster:hover {
  filter: brightness(1.05);
}

.btn-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.btn-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.btn-grid-5 .btn-clear-all,
.btn-grid-5 .btn-export-poster {
  padding: 5px 2px;
  font-size: 0.55rem;
}

.layer-list {
  display: grid;
  gap: 3px;
  max-height: 78px;
  overflow-y: auto;
}

.layer-item,
.layer-empty {
  width: 100%;
  border: 1px solid #171815;
  background: var(--instrument-well);
  color: #c7e6a1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
  transition: all 0.15s;
}

.layer-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.layer-select {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.layer-move-controls {
  display: flex;
  gap: 2px;
}

.layer-move-btn {
  width: 18px;
  height: 18px;
  border: 1px solid #45443a;
  border-radius: 3px;
  background: #2a2c27;
  color: #9bb37a;
  cursor: pointer;
  font-size: 0.6rem;
}

.layer-move-btn:hover:not(:disabled) {
  color: #c7e6a1;
  border-color: #c7e6a1;
}

.layer-move-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.layer-item.selected {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(170, 141, 58, 0.6);
}

.layer-empty {
  color: var(--instrument-muted);
  text-align: center;
  cursor: default;
}

/* ============================================================
   FONT SELECTOR (Text panel)
   ============================================================ */
.font-selector-box {
  flex: none;
  min-width: 130px;
}

#font-selector {
  width: 100%;
  background: var(--instrument-well);
  border: 1px solid #171815;
  border-radius: var(--radius-sm);
  color: #c7e6a1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 6px;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c7e6a1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 22px;
}

#font-selector:focus {
  border-color: #a9c882;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(104, 128, 72, 0.22);
}

#font-selector option {
  background: #1b1d1a;
  color: #c7e6a1;
}

#font-selector optgroup {
  background: #121411;
  color: #e5b958;
  font-weight: 700;
  font-size: 0.68rem;
}

/* ============================================================
   PAPER FORMAT SELECTOR (Burn Studio)
   ============================================================ */
.format-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--instrument-well);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid #171815;
}

.format-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: #9c9987;
  text-transform: uppercase;
}

.format-pills {
  display: flex;
  gap: 3px;
}

.format-pill {
  background: #252822;
  border: 1px solid #3d4237;
  color: #a4a292;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}

.format-pill:hover {
  color: #f1ede1;
  border-color: #636b57;
}

.format-pill.active {
  background: #4a5c32;
  border-color: #8bb559;
  color: #e5ffbb;
  box-shadow: 0 0 5px rgba(139, 181, 89, 0.4);
}

.paper-size-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  background: var(--instrument-well);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid #171815;
  margin-top: 4px;
}

.paper-size-input {
  width: 44px;
  background: #1c1e19;
  border: 1px solid #3d4237;
  color: #e5ffbb;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 2px;
  text-align: center;
}

.paper-size-input:focus {
  outline: none;
  border-color: #8bb559;
  box-shadow: 0 0 4px rgba(139, 181, 89, 0.4);
}

/* Hide the native spinner arrows — they don't fit this compact of a field */
.paper-size-input::-webkit-outer-spin-button,
.paper-size-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.paper-size-input[type="number"] {
  -moz-appearance: textfield;
}

.paper-size-x,
.paper-size-unit {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: #9c9987;
}

/* ============================================================
   SOUND DOTS (Mic & Music visualizer instances)
   ============================================================ */
.dot-pills-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  margin: 0 8px;
  cursor: help; /* hint text now lives in the title tooltip */
}

.dot-pill {
  background: var(--instrument-well);
  border: 1px solid #33362e;
  color: #a4a292;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.dot-pill:hover {
  color: #ffffff;
  border-color: #666a5e;
}

.dot-pill.active {
  background: #263820;
  border-color: #4aff6b;
  color: #4aff6b;
  box-shadow: 0 0 6px rgba(74, 255, 107, 0.3);
}

/* ============================================================
   CUSTOM FONTS SECTION
   Drop font files into fonts/ folder and load via @font-face
   ============================================================ */
/* Example:
@font-face {
  font-family: 'CustomFont';
  src: url('../fonts/CustomFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
*/