:root {
  --bg: #0f1116;
  --bg2: #141823;
  --panel: #151a26;
  --panel2: #111522;
  --stroke: #2a3247;
  --stroke2: #20283c;
  --text: #d6d9e4;
  --muted: #8891a8;
  --accent: #ff8a00; /* FL-ish orange */
  --accent2: #ffa83a;
  --danger: #ff3b3b;
  --good: #2ee59d;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 14px;
  --radius2: 10px;
  --tracks-width: 320px;
  --tracks-min: 320px;
  --tracks-max: 420px;
  --timeline-min: 420px;
  --inspector-width: 370px;
  --inspector-collapsed-width: 16px;
  --left-drawer-width: 150px;
  --left-drawer-collapsed-width: 16px;
  --mixer-left-width: 150px;
  --topbar-height: 140px;
  --transport-height: 80px;
  --mixer-height: 0px;
  --layout-min-width: calc(
    var(--left-drawer-width) + var(--tracks-min) + var(--timeline-min) +
      var(--inspector-width)
  );
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;
  color: var(--text);
  background:
    radial-gradient(
      1200px 700px at 20% -10%,
      rgba(255, 138, 0, 0.14),
      transparent 55%
    ),
    radial-gradient(
      900px 600px at 95% 0%,
      rgba(90, 120, 255, 0.1),
      transparent 60%
    ),
    var(--bg);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Tooltips */
.tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(36, 44, 60, 0.96);
  color: #e9edf8;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 80ms ease, transform 80ms ease;
}
.tooltip-inner {
  display: block;
}
.tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.tooltip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
}
.tooltip.top .tooltip-arrow {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}
.tooltip.bottom .tooltip-arrow {
  top: -5px;
  left: 50%;
  margin-left: -5px;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: var(--layout-min-width);
  width: 100%;
}

.topbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    var(--panel2);
  border-bottom: 1px solid var(--stroke);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}

.menu-group {
  display: flex;
  gap: 10px;
}
.top-controls {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.top-controls .time,
.top-controls .tempo,
.top-controls .snap {
  padding: 6px 9px;
}
.top-controls .tempo .icon-btn {
  width: 34px;
  height: 32px;
}
.top-controls .tempo input {
  width: 64px;
}

.toolbar .snap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
}
.toolbar .snap select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 8px;
  height: 30px;
}
.toolbar .snap span {
  font-size: 13px;
  color: var(--muted);
}
.logo-text {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  letter-spacing: 0.4px;
  font-size: 15px;
}
.logo-vibe {
  color: #ff8a00;
}
.logo-daw {
  color: #60a5fa;
}
.menu-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.menu-btn:hover {
  border-color: var(--stroke);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.window-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
.status-pill {
  font-size: 12px;
  color: var(--muted);
  padding: 5px 10px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  position: relative;
}

.toolgroup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toolgroup.right {
  margin-left: auto;
  gap: 10px;
}
.timeline-toolbar-inline {
  position: absolute;
  left: calc(var(--left-drawer-width) + var(--tracks-width) + 12px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 6px;
}
.timeline-toolbar-inline .icon-btn {
  width: 34px;
  height: 32px;
  padding: 0;
}
.timeline-toolbar-inline .timeline-btn-spacer {
  flex: 0 0 calc(34px + 6px);
}
.timeline-split-btn .fa-scissors {
  font-size: 16px;
}
.timeline-staple-btn .fa-thumbtack {
  font-size: 15px;
}
.timeline-merge-btn .fa-object-group {
  font-size: 15px;
}
.timeline-edit-btn .fa-pen-to-square,
.timeline-share-btn .fa-share-from-square {
  font-size: 15px;
}

.icon-btn {
  width: 40px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
}
.icon-btn:disabled,
.icon-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.icon-btn:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.icon-btn.pulse {
  animation: pulse 1s ease-in-out infinite;
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--stroke);
  outline: none;
  box-shadow: none;
}
.icon-btn.pulse:focus,
.icon-btn.pulse:active {
  outline: none;
  box-shadow: none;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.25);
  }
  55% {
    box-shadow: 0 0 0 12px rgba(255, 138, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0);
  }
}
.icon-btn.danger:hover {
  border-color: rgba(255, 59, 59, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.12);
}

.divider {
  width: 1px;
  height: 30px;
  background: var(--stroke);
  margin: 0 4px;
}

.zoom,
.time,
.tempo,
.snap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
}
.zoom input {
  width: 160px;
}
.time select,
.tempo input {
  background: var(--bg2);
  border: 1px solid var(--stroke);
  color: var(--text);
  border-radius: 10px;
  padding: 5px 8px;
  min-width: 64px;
}
.tempo input {
  width: 70px;
  -moz-appearance: textfield;
}
.tempo input::-webkit-outer-spin-button,
.tempo input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tempo {
  gap: 6px;
}
.tempo .icon-btn {
  width: 38px;
  height: 36px;
  padding: 0;
}
.tempo .icon-btn + .icon-btn {
  margin-left: 4px;
}
.btn-label {
  font-size: 12px;
  color: var(--muted);
}
.btn-ruler-mode {
  gap: 4px;
}
.ruler-icon {
  display: none;
}
.btn-ruler-mode.mode-sec .ruler-icon-sec {
  display: inline-block;
}
.btn-ruler-mode.mode-bars .ruler-icon-bars {
  display: inline-block;
}
.tempo .icon-btn.active {
  border-color: rgba(255, 138, 0, 0.7);
  background: rgba(255, 138, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.icon-btn.active {
  border-color: rgba(255, 138, 0, 0.7);
  background: rgba(255, 138, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.snap select {
  background: var(--bg2);
  border: 1px solid var(--stroke);
  color: var(--text);
  border-radius: 10px;
  padding: 5px 8px;
}

.pill-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 138, 0, 0.5);
  background: rgba(255, 138, 0, 0.12);
  color: var(--text);
  cursor: pointer;
}
.pill-btn:hover {
  background: rgba(255, 138, 0, 0.18);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}

.main {
  flex: 1;
  min-height: 0;
  display: flex;
  padding-top: var(--topbar-height);
  padding-bottom: calc(var(--transport-height) + var(--mixer-height));
  overflow: hidden;
  overflow-x: auto;
  min-width: var(--layout-min-width);
}

.arrangement {
  height: calc(
    100vh - var(--topbar-height) - var(--transport-height) - var(--mixer-height)
  );
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns:
    var(--left-drawer-width) var(--tracks-width) 1fr var(--inspector-width);
  position: relative;
  overflow: hidden;
  min-width: var(--layout-min-width);
}

.tracks-left {
  border-right: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    var(--panel);
  min-width: var(--tracks-min);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.left-drawer {
  position: relative;
  background: var(--panel);
  border-right: 1px solid var(--stroke);
  min-width: var(--left-drawer-collapsed-width);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: visible;
  z-index: 5;
  height: 100%;
  min-height: 0;
}
.left-drawer.collapsed {
  width: var(--left-drawer-collapsed-width);
}
.left-drawer-toggle {
  position: absolute;
  top: 16px;
  right: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6; /* above tracks and resizer */
}
.left-drawer.collapsed .left-drawer-toggle i {
  transform: rotate(180deg);
}
.left-drawer.collapsed .left-header,
.left-drawer.collapsed .left-body {
  visibility: hidden;
  pointer-events: none;
}
.left-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 12px 14px;
  height: 56px;
  border-bottom: 1px solid var(--stroke);
}
.master-mixer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
  width: 100%;
}
.master-mixer-btn:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.master-mixer-btn.active {
  border-color: rgba(255, 138, 0, 0.8);
  background: rgba(255, 138, 0, 0.15);
}
.left-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 12px 12px 22px;
  overflow: hidden;
  gap: 12px;
}
.left-body-top {
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-meter-stack {
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  width: 100%;
}
.mixer-open .left-meter-stack {
  display: none;
}
.meter-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.meter-label {
  font-size: 12px;
  color: var(--muted);
}
.meter {
  width: 18px;
  height: 180px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--stroke);
  overflow: hidden;
  position: relative;
}
.meter-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, #15803d 0%, #22c55e 40%, #4ade80 100%);
  transition: height 80ms linear;
}
.master-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.master-label {
  font-size: 12px;
  color: var(--muted);
}
.tracks-resizer {
  position: absolute;
  top: 0;
  left: calc(var(--left-drawer-width) + var(--tracks-width));
  width: 10px;
  height: 100%;
  cursor: col-resize;
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 4;
}
.tracks-resizer::before {
  content: "";
  width: 2px;
  background: var(--stroke);
  border-radius: 1px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.tracks-resizer:hover::before,
.tracks-resizer.dragging::before {
  background: rgba(255, 138, 0, 0.65);
  box-shadow: 0 0 0 6px rgba(255, 138, 0, 0.08);
}

.tracks-header,
.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 14px;
  height: 56px;
  border-bottom: 1px solid var(--stroke);
}
.tracks-title,
.inspector-title {
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text);
  padding-left: 10px;
}
.mini-btn {
  width: 34px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}
.mini-btn:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.mini-btn.danger:hover {
  border-color: rgba(255, 59, 59, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.12);
}

.track-list {
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  /* Custom scrollbar: match timeline styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 180, 255, 0.6) rgba(0, 0, 0, 0.22);
}
.track-list::-webkit-scrollbar {
  width: 10px;
}
.track-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}
.track-list::-webkit-scrollbar-thumb {
  background: rgba(111, 180, 255, 0.75);
  border-radius: 999px;
}
.track-list::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 180, 255, 0.9);
}

.track-card {
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 10px 10px 10px 18px;
  cursor: pointer;
  position: relative;
}
.track-card.active {
  border-color: rgba(255, 138, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.track-card.dragging {
  opacity: 0.6;
}
.track-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.track-row1-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.track-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-tools {
  display: flex;
  gap: 8px;
}
.track-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
}
.track-icon:hover {
  color: var(--text);
  border-color: var(--stroke2);
}
.track-icon.active {
  border-color: rgba(255, 138, 0, 0.7);
  color: var(--text);
  background: rgba(255, 138, 0, 0.14);
}
.track-sliders {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.track-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  flex: 1;
  min-width: 0;
}
.track-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.track-slider input {
  width: 100%;
}
.track-expand {
  width: 32px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.track-expand:hover {
  color: var(--text);
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.track-expand.active {
  color: var(--text);
  border-color: rgba(255, 138, 0, 0.9);
  background: rgba(255, 138, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.16);
}
.track-expand-ghost {
  visibility: hidden;
}
.track-fx-btn {
  width: 32px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.track-fx-btn:hover {
  color: var(--text);
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.track-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 20;
  opacity: 0.9;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
.track-slider input {
  flex: 1;
}
.track-slider-label {
  font-size: 12px;
  color: var(--muted);
}
.track-slider-value {
  font-size: 12px;
  color: var(--text);
  min-width: 48px;
  text-align: right;
}
.track-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}
.track-placeholder {
  border: 1px dashed var(--accent);
  border-radius: 14px;
  background: rgba(255, 138, 0, 0.08);
  height: 74px;
  margin-bottom: 10px;
}
.track-placeholder.hidden {
  display: none;
}
.track-drag-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  border-radius: 12px 0 0 12px;
  cursor: grab;
  background: var(
    --track-strip-color,
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent)
  );
}
.track-drag-strip:hover,
.track-card.dragging .track-drag-strip {
  background: var(
    --track-strip-hover-color,
    linear-gradient(180deg, rgba(255, 138, 0, 0.35), rgba(255, 138, 0, 0.05))
  );
}

.timeline-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background:
    radial-gradient(
      800px 400px at 35% 0%,
      rgba(255, 138, 0, 0.08),
      transparent 60%
    ),
    var(--bg2);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.timeline-wrap {
  flex: 1;
  min-height: 0;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  height: 100%;
  /* Custom scrollbar: match timeline background with a soft blue thumb */
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 180, 255, 0.6) rgba(0, 0, 0, 0.22);
}
.timeline-wrap::-webkit-scrollbar {
  height: 10px;
}
.timeline-wrap::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}
.timeline-wrap::-webkit-scrollbar-thumb {
  background: rgba(111, 180, 255, 0.75);
  border-radius: 999px;
}
.timeline-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 180, 255, 0.9);
}
.timeline-ruler {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.2);
  margin: 0;
}
.timeline-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding-top: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 180, 255, 0.6) rgba(0, 0, 0, 0.22);
}
.timeline-scroll::-webkit-scrollbar {
  width: 10px;
}
.timeline-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}
.timeline-scroll::-webkit-scrollbar-thumb {
  background: rgba(111, 180, 255, 0.75);
  border-radius: 999px;
}
.timeline-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 180, 255, 0.9);
}
.timeline-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
  margin-left: 4px;
  z-index: 3;
}
.timeline-toolbar .icon-btn {
  width: 34px;
  height: 32px;
  padding: 0;
}
.konva-container {
  height: 100%;
  border: none;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    rgba(0, 0, 0, 0.2);
  box-shadow: none;
  overflow: hidden;
  display: block;
}

.inspector {
  border-left: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    var(--panel);
  padding: 0;
  min-width: var(--inspector-width);
  width: var(--inspector-width);
  transition: width 0.15s ease, min-width 0.15s ease, padding 0.15s ease;
  position: relative;
  overflow: visible;
  z-index: 8;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.inspector.collapsed {
  width: var(--inspector-collapsed-width);
  min-width: var(--inspector-collapsed-width);
  padding: 0;
}
.inspector.collapsed .panel {
  display: none;
}
.inspector.collapsed .inspector-header,
.inspector.collapsed .inspector-body {
  display: none;
}
.inspector-body {
  flex: 1;
  min-height: 0;
  background: none;
}
.inspector-toggle {
  position: absolute;
  left: -12px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: #1b2335;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  z-index: 10;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.inspector-toggle:hover {
  border-color: rgba(255, 138, 0, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.inspector.collapsed .inspector-toggle {
  left: -10px;
  transform: rotate(180deg);
}
.panel {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke);
  height: 57px;
  box-sizing: border-box;
}
.panel-title {
  font-weight: 700;
}
.panel-toggle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease, transform 0.15s ease;
}
.panel-toggle:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.panel.collapsed .panel-toggle i {
  transform: rotate(180deg);
}
.panel-body {
  padding: 12px 14px;
}
.panel.collapsed .panel-body {
  display: none;
}

.inspector-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.inspector-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease, color 0.15s ease;
}
.inspector-tab i {
  font-size: 14px;
}
.inspector-tab.active {
  border-color: rgba(255, 138, 0, 0.7);
  background: rgba(255, 138, 0, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.inspector-tab:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.inspector-pane {
  display: none;
  padding: 14px 12px 12px;
  min-height: 100%;
}
.inspector-pane.active {
  display: block;
}
.inspector-pane-imported {
  height: 100%;
  overflow-y: auto;
  /* Scrollbar styling matches track-list */
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 180, 255, 0.6) rgba(0, 0, 0, 0.22);
}
.inspector-pane-imported::-webkit-scrollbar {
  width: 10px;
}
.inspector-pane-imported::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}
.inspector-pane-imported::-webkit-scrollbar-thumb {
  background: rgba(111, 180, 255, 0.75);
  border-radius: 999px;
}
.inspector-pane-imported::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 180, 255, 0.9);
}
.inspector-pane-created {
  height: 100%;
  overflow-y: auto;
  /* Scrollbar styling matches track-list */
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 180, 255, 0.6) rgba(0, 0, 0, 0.22);
}
.inspector-pane-created::-webkit-scrollbar {
  width: 10px;
}
.inspector-pane-created::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}
.inspector-pane-created::-webkit-scrollbar-thumb {
  background: rgba(111, 180, 255, 0.75);
  border-radius: 999px;
}
.inspector-pane-created::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 180, 255, 0.9);
}
.asset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.asset-chip-ghost {
  opacity: 0.82;
  filter: brightness(1.2);
}
.asset-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.asset-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 170px;
  min-width: 0;
}
.asset-meta {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.asset-chip {
  flex: 1;
  min-width: 0;
  max-width: 170px;
  flex: 0 0 170px;
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  height: 53px; /* +5px vs previous 48px preview */
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.18);
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
}
.asset-chip:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.asset-chip.pulse-asset {
  animation: assetPulse 1s ease;
  animation-iteration-count: 5;
}
@keyframes assetPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.5);
    border-color: rgba(255, 138, 0, 0.8);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 138, 0, 0.15);
    border-color: rgba(255, 138, 0, 1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.0);
    border-color: rgba(255, 138, 0, 0.8);
  }
}
.asset-chip canvas,
.asset-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
}
.asset-title {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.asset-title:focus {
  outline: none;
}
.asset-title-editing {
  border: none;
  background: transparent;
  caret-color: var(--accent);
}
.asset-remove {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.asset-remove:hover {
  border-color: rgba(255, 59, 59, 0.7);
  background: rgba(255, 59, 59, 0.16);
}
.placeholder {
  color: var(--muted);
  font-size: 13px;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.kv:last-child {
  border-bottom: none;
}
.k {
  color: var(--muted);
  font-size: 12px;
}
.v {
  color: var(--text);
  font-size: 12px;
  max-width: 60%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subsection {
  margin-top: 14px;
}
.subsection-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.wave-preview {
  height: 110px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.vertical-slider {
  appearance: none;
  -webkit-appearance: slider-vertical;
  writing-mode: bt-lr;
  height: 140px;
  width: 28px;
  background: transparent;
}
.vertical-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 24px;
  border-radius: 8px;
  background: var(--accent);
  border: 1px solid var(--stroke);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.vertical-slider::-moz-range-thumb {
  height: 16px;
  width: 24px;
  border-radius: 8px;
  background: var(--accent);
  border: 1px solid var(--stroke);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.vertical-slider::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  border: 1px solid var(--stroke);
}
.vertical-slider::-moz-range-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  border: 1px solid var(--stroke);
}
.track-panel {
  display: flex;
  gap: 0.5px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.fader-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px;
  min-width: 70px;
}
.fader-label {
  font-size: 12px;
  color: var(--muted);
}
.fader-value {
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eq-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eq-viz-wrap {
  width: 100%;
  height: 170px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.35)),
    rgba(0, 0, 0, 0.3);
  padding: 8px 6px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.eq-viz-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.eq-sliders {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: max-content;
  overflow-x: auto;
  padding-bottom: 4px;
}
.eq-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  min-width: 52px;
}
.eq-label {
  font-size: 11px;
  color: var(--muted);
}
.eq-value {
  font-size: 11px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 18; /* above mixer-panel, below modals/topbar */
  border-top: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), #0d1018;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 12px;
}

.mixer-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--transport-height);
  height: 410px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    var(--panel);
  border-top: 1px solid var(--stroke);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.22s ease;
  z-index: 15; /* above arrangement layers and transport */
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--muted);
  pointer-events: none;
}
.mixer-panel.open {
  transform: translateY(0);
  pointer-events: auto;
}
.mixer-left {
  width: var(--mixer-left-width);
  min-width: var(--mixer-left-width);
  height: 100%;
  border-right: 1px solid var(--stroke);
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding-right: 14px;
}
.mixer-meter-stack {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.mixer-master {
  gap: 8px;
}
.mixer-right {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  /* Scrollbar styling mirrors track list */
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 180, 255, 0.6) rgba(0, 0, 0, 0.22);
}
.mixer-right::-webkit-scrollbar {
  height: 10px;
}
.mixer-right::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
}
.mixer-right::-webkit-scrollbar-thumb {
  background: rgba(111, 180, 255, 0.75);
  border-radius: 999px;
}
.mixer-right::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 180, 255, 0.9);
}
.mixer-card {
  position: relative;
  width: 92px;
  height: 100%;
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 12px 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  flex: 0 0 92px; /* Fixed width so cards don't shrink when scrolling */
}
.mixer-tools {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.mixer-tools .track-icon,
.mixer-tools .track-fx-btn {
  width: 100%;
  height: 30px;
  padding: 0;
}
.mixer-card.active {
  border-color: rgba(255, 138, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14), 0 12px 25px rgba(0, 0, 0, 0.28);
}
.mixer-fader-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  justify-content: center;
  min-height: 0;
}
.mixer-meter-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  justify-content: center;
}
.mixer-meter {
  position: relative;
  width: 12px;
  height: 140px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.mixer-meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(
    --mixer-meter-color,
    linear-gradient(180deg, rgba(255, 138, 0, 0.7), rgba(255, 138, 0, 0.2))
  );
}
.mixer-fader {
  width: 32px;
}
.mixer-value {
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pan-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pan-knob {
  position: relative;
  width: 32px;
  height: 32px;
}
.pan-knob input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.pan-knob-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1f2434, #0f1116);
  border: 1px solid var(--stroke);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.06);
}
.pan-knob-pointer {
  position: absolute;
  width: 2px;
  height: 12px;
  background: #3b82f6;
  top: 6px;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--pan-angle, 0deg));
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.45);
}
.pan-value {
  font-size: 11px;
  color: var(--muted);
}
.mixer-name {
  margin-top: auto;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px 4px;
}
.mixer-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  border-radius: 0 0 12px 12px;
  background: var(
    --mixer-strip-color,
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02))
  );
}

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

.transport-btn {
  height: 40px;
  min-width: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}
.transport-btn:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.transport-btn.primary {
  border-color: rgba(255, 138, 0, 0.7);
  background: rgba(255, 138, 0, 0.08);
}
.transport-btn.active {
  border-color: rgba(255, 138, 0, 0.8);
  background: rgba(255, 138, 0, 0.22);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.16);
}
.transport-btn.rec {
  border-color: rgba(255, 59, 59, 0.6);
  background: rgba(255, 59, 59, 0.06);
  gap: 10px;
  display: flex;
  align-items: center;
}
.transport-btn.rec.recording {
  border-color: rgba(255, 59, 59, 0.9);
  background: rgba(255, 59, 59, 0.18);
  box-shadow: 0 0 0 4px rgba(255, 59, 59, 0.14);
}
.transport-btn.rec i {
  color: var(--danger);
}

.transport-mid {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  justify-content: center;
}
.timecode {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.18);
  min-width: 110px;
  text-align: center;
}
.posbar {
  flex: 1;
  max-width: 720px;
  min-width: 260px;
}
#position {
  width: 100%;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 40; /* ensure modals sit above mixer/arrangement/topbar */
}
.modal-backdrop.open {
  display: flex;
}
.modal {
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.modal-title {
  font-weight: 700;
  margin-bottom: 8px;
}
.modal-body {
  color: var(--muted);
  margin-bottom: 16px;
}
.modal-body .btn-label {
  display: block;
  margin-bottom: 8px;
}
.modal-body .text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--bg2);
  color: var(--text);
}
.modal-fx {
  width: 1250px;
  max-width: 96vw;
  min-height: 800px; /* +150px height only for FX modal */
}
.modal-fx-body {
  display: flex;
  gap: 16px;
  align-items: stretch;
  height: 670px; /* fixed height to stabilize layout (+150px) */
}
.fx-left {
  width: 180px;
  min-width: 180px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fx-track-label {
  font-weight: 700;
  color: var(--text);
  padding: 4px 0;
}
.fx-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fx-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.fx-btn i {
  color: var(--accent);
}
.fx-btn:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
  background: rgba(255, 138, 0, 0.08);
}
.fx-btn.active {
  border-color: rgba(255, 138, 0, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.18);
  background: rgba(255, 138, 0, 0.14);
}
.fx-slot {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  color: var(--text);
  font-size: 13px;
}
.fx-slot.muted {
  color: var(--muted);
}
.fx-right {
  flex: 1;
  min-width: 0;
  width: 950px;
  min-height: 520px;
  height: 100%;
  max-width: calc(96vw - 220px);
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}
.fx-left {
  min-height: 520px;
}
.fx-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}
.fx-right .panel {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.eq-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.eq-panel .panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fx-right .panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.eq-block {
  flex: 1;
  min-height: 0;
}
.eq2-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.eq2-canvas-wrap {
  flex: 1;
  min-height: 240px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
}
.eq2-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.eq2-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.eq2-band-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.eq2-band-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.eq2-band-btn .dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.eq2-band-btn.active {
  border-color: rgba(255, 138, 0, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.14);
  background: rgba(255, 138, 0, 0.12);
}
.eq2-knobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.eq2-knobs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.eq2-knobs input[type="range"] {
  width: 100%;
}
.eq2-val {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.comp-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.comp-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.comp-graph-wrap {
  position: relative;
  flex: 0 0 320px;
  min-height: 260px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.04), transparent 35%),
    linear-gradient(135deg, rgba(88, 28, 135, 0.18), rgba(14, 165, 233, 0.12), rgba(34, 197, 94, 0.1));
}
.comp-graph-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.comp-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 180, 255, 0.6) rgba(0, 0, 0, 0.22);
}
.comp-controls::-webkit-scrollbar {
  width: 10px;
}
.comp-controls::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
}
.comp-controls::-webkit-scrollbar-thumb {
  background: rgba(111, 180, 255, 0.75);
  border-radius: 999px;
}
.comp-controls::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 180, 255, 0.9);
}
.comp-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.comp-row label,
.comp-band-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.comp-row input[type="range"],
.comp-band-card input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  accent-color: #4da3ff;
}
.comp-row input[type="range"]::-webkit-slider-thumb,
.comp-band-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4da3ff;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.comp-row input[type="range"]::-moz-range-thumb,
.comp-band-card input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4da3ff;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.comp-row input[type="range"]::-webkit-slider-runnable-track,
.comp-band-card input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  border: none;
}
.comp-row input[type="range"]::-moz-range-track,
.comp-band-card input[type="range"]::-moz-range-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  border: none;
}
.comp-row .val,
.comp-band-card .val {
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.comp-band-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  align-items: stretch;
}
.comp-mix-card {
  min-width: 100px;
  max-width: 100px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.comp-mix-title {
  font-weight: 600;
  color: var(--text);
}
.comp-mix-slider-wrap {
  width: 40px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comp-mix-slider {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  width: 6px;
  height: 160px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  accent-color: #4da3ff;
}
.comp-mix-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4da3ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: none;
}
.comp-mix-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4da3ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: none;
}
.comp-mix-val {
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.comp-band-card {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  min-width: 240px;
  max-width: 240px;
  position: relative;
  overflow: hidden;
}
.comp-band-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--band-color, #a855f7);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}
.comp-band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text);
}
.comp-band-head .dot {
  flex: 0 0 auto;
}
.comp-band-name {
  margin-right: auto;
  text-align: left;
}
.comp-band-head .switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.comp-band-range {
  font-size: 12px;
  color: var(--muted);
  display: block;
  text-align: center;
  margin: 2px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.comp-band-head .dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--band-color, #999);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}
.comp-band-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.comp-band-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 10px;
  cursor: pointer;
}
.comp-band-toggle i {
  font-size: 14px;
}
.comp-band-toggle.active,
.comp-band-toggle.active:hover {
  border-color: rgba(255, 138, 0, 0.6) !important; /* same as hover */
  background: rgba(255, 138, 0, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12) !important;
}
.comp-band-actions .comp-band-remove {
  cursor: pointer;
}
.comp-band-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: start;
}
.pill-btn.ghost,
button.mini.ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  color: var(--text);
}
button.mini.ghost {
  padding: 6px 10px;
  border-radius: 10px;
}
.pill-btn.ghost:hover,
button.mini.ghost:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
  background: rgba(255, 138, 0, 0.08);
}
.panel-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.panel-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.switch.tight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.switch.tight .switch-label,
.comp-band-head .switch-label {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
}
.comp-knob-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.comp-knob {
  position: relative;
  width: 32px;
  height: 32px;
}
.comp-knob input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.comp-knob-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1f2434, #0f1116);
  border: 1px solid var(--stroke);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.06);
}
.comp-knob-pointer {
  position: absolute;
  width: 2px;
  height: 12px;
  background: #4da3ff;
  top: 6px;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--knob-angle, 0deg));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(77, 163, 255, 0.45);
}
.comp-knob-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--muted);
}
.comp-knob-label .val {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eq-presets {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 10px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 180, 255, 0.6) rgba(0, 0, 0, 0.22);
  max-width: 100%;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  min-height: 48px;
}
.eq-presets::-webkit-scrollbar {
  height: 8px;
}
.eq-presets::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
}
.eq-presets::-webkit-scrollbar-thumb {
  background: rgba(111, 180, 255, 0.75);
  border-radius: 999px;
}
.eq-presets::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 180, 255, 0.9);
}
.preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
}
.preset-btn.muted {
  color: var(--muted);
}
.preset-btn:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
}
.preset-btn .delete {
  color: var(--muted);
}
.preset-btn .delete:hover {
  color: var(--danger);
}
.fx-placeholder i {
  font-size: 22px;
  color: var(--accent);
}
.color-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.color-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  cursor: pointer;
  padding: 0;
  background-clip: padding-box;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.color-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.16);
}
.color-btn.selected {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 0 4px rgba(255, 138, 0, 0.32);
}
.color-btn-brush {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.circle-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.circle-btn:hover {
  border-color: rgba(255, 138, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.12);
  background: rgba(255, 138, 0, 0.08);
}
.hidden-color-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.pill-btn.mini {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.pill-btn.danger {
  border-color: rgba(255, 59, 59, 0.7);
  background: rgba(255, 59, 59, 0.12);
}

@media (max-width: 960px) {
  .top-controls {
    justify-content: flex-end;
    gap: 8px;
  }
  .top-controls label span:first-child {
    display: none;
  }
  .top-controls .tempo,
  .top-controls .time,
  .top-controls .snap {
    padding: 5px 8px;
  }
}